The frontend for the emeis user management service
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
ember install ember-emeisThen add the following lines to your app/styles/app.scss:
@import "ember-uikit";
@import "ember-emeis";Register the engine in app/app.js:
export default class App extends Application {
// ...
this.engines = {
"ember-emeis": {
dependencies: {
services: ["store", "fetch", "intl", "notification", { "host-router": "router"
}],
},
},
};
}
});Emeis requires the following services to be injects:
store- almost all of the data fetching is done using ember datafetch- the user export requires afetchservices that handles authenticationintl- ember-intl for i18nnotification- handles success and error messageshost-router- the ember router service
Basic configuration of ember-emeis can be done via the emeis-options service. To generate it, run ember g service emeis-options and add it to the dependencies in app/app.js:
export default class App extends Application {
// ...
this.engines = {
"ember-emeis": {
dependencies: {
services: ["store", "intl", "notification", "router", "emeis-options"],
},
},
};
}
});The config service supports the following options:
import Service from "@ember/service";
import DummyButton from "dummy/app/components/dummy-button/dummy-button";
export default class EmeisOptionsService extends Service {
// number of items in list views
pageSize = 10;
// force the locale of models to a specific value (i.e. to make it "untranslated")
forceLocale = {
scope: "en",
};
// hide "username" field
emailAsUsername = false;
// show only a subset of the main navigation entries
navigationEntries = ["users", "scopes"];
// user view specific settings
user = {
/*
Within the actions block you can define functions which evaluate the visibility of the "deactivate" and "delete" buttons in the model edit form. The visibilty must be defined for each model separately. The model must support the "isActive" property for deactivation capabilities, which are currently only supported by user and scope.
*/
actions: {
deactivate: (model) => myUser.canChange(model),
delete: {
label: "some.translation.key", // you can optionally override the label for the action button with translation key or static string
func: (model) => myUser.canDelete(model), // in case of label overrides, you have to define th function override via the "func" key
},
},
// show only a subset of the "additional" fields on the user model
additionalFields: {
phone: "required",
language: "required",
address: "optional",
city: "optional",
zip: "optional",
},
// adds additional custom columns to this model's list view. *Scopes are not supported, since they are represented as a tree!*
customColumns: [
{
heading: "Funktion", // ember-intl or string
slug: "additional-column-function", // relative to "model.metainfo[slug]"
sortable: true, // whether sorting is supported for this column
localized: true, // whether to expect a plain value or a object with localized values
},
],
/*
On each model edit view (e.g. users) you can define a custom component. The component will be rendered at the bottom of the edit view, but above the primary form buttons. Each component can be designed freely and the model will be passed into the component as `@model` argument. For a working demo have a look at our "dummy-button" at "dummy/app/components/dummy-button".
*/
customComponent: DummyButton,
/*
Exclusively on USER model - Optionally hide the "active" / "inactive" filter buttons on top of the user list. You can pass
a function, boolean or string as value.
*/
filtersVisible: () => true,
/*
Exclusively on USER model - define a custom component which will get displayed next to the 'inacitve' pill on top of the user detail view. Ideally this will be an inline element.
*/
statusComponent: DummyStatus,
};
scope = {
actions: {
deactivate: () => false, // statically deactivate the deactivate-button
// leaving out the "delete" key here will always display the delete button
},
// define custom fields for a given context (user, scope, role or permission)
metaFields: [
{
slug: "test-input",
label: "My Input", // this could also be an ember-intl translation key
type: "text",
visible: true,
readOnly: false,
required: false, //marks this field as optional
placeholder: "some.translation.key", //ember-intl translation key or plain string
},
{
slug: "test-input-2",
label: "some.translation.key",
options: [
// insert a static list of options (value, label), or a (async) function which resolves to a list of options
{
value: "option-1",
label: "Option one",
},
],
type: "choice",
visible: () => true,
readOnly: false,
required: true, //marks this field as required
},
],
};
}Watch out - the translation key has to be present in your local translation files.
There are special options available for options, type and visible properties.
Defines the type of the output component and can either be a text or a choice.
Marks this field as optional or validates its presence in case it's set to true. Custom choice fields may not be validated as required, tho.
In combination with type:"choice" the options can be a list of options ({value, label}) or a (async) function which resolves to a list of options.
Accepts a boolean value for static visibility or a (async) function which evaluates to a boolean value. Submitted functions will evaluate live while rendering.
The evaluation function will receive the current model as argument. For instance if you are on the scope route, you will receive the scope model as first argument. Same for user | role | permission
So the function signature looks like this for visible and readOnly.
type visible = (model: scope | user | role | permission) => boolean;And an actual implementation example, which makes use of the model.name property:
{
// ...
visible: (model) => model.name === "test-scope",
// ...
}For a complete emeis-options configuration open the test config.
If you need to customize your store service passed to emeis, use:
ember g emeis-store <your_name>
This will generate a store service and an adapter for you. In those two files you can then configure custom api endpoints or hosts and/or custom authentication.
See the Contributing guide for details.
This project is licensed under the LGPL-3.0-or-later license.