ember-emeis

The frontend for the emeis user management service

Compatibility

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v10 or above

Installation

$ ember install ember-emeis

Then 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", "intl", "notification", "router"],
      },
    },
  };
}
});

Configuration

Emeis options

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";

export default class EmeisOptionsService extends Service {
  // number of items in list views
  pageSize = 10;

  // hide "username" field
  emailAsUsername = false;

  // show only a subset of the "additional" fields on the user model
  additionalUserFields = {
    "phone": "required",
    "language": "required",
    "address": "optional",
    "city": "optional",
    "zip": "optional"
  ];

  // show only a subset of the main navigation entries
  navigationEntries = ["users", "scopes"];

  // On each model edit view (e.g. users) you can define a list of custom buttons. Each button needs a label and a callback function. The callback function gets the current active model as first argument. Optionally you can highlight the button with the 'type' attribute.
  customButtons = {
    users: [
      {
        label: "My Button", // this could also be an ember-intl translation key
        callback: () => window.alert("test"),
        type: "danger" // leave blank or choose between primary, danger
      },
      {
        label: "A second Button",
        callback: (model) => console.log(model),
      }
    ]
  };

  // define custom fields for a given context (user, scope, role or permission)
  metaFields = {
    user: [],
    scope: [
      {
        slug: "test-input",
        label: "My Input", // this could also be an ember-intl translation key
        type: "text",
        visible: true,
        readOnly: false
      },
      {
        slug: "test-input-2",
        label: "some.translation.key",
        type: "choice",
        visible: () => true,
        readOnly: false
      }
    ]
  }
}

Watch out - the translation key has to be present in your local translation files.

There are special options available for type and visible properties.

type - meta field

Defines the type of the output component and can either be a text or a choice.

visible & readOnly meta field

Accepts a boolean value for static visibility or a 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.

Emeis store

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.

Contributing

See the Contributing guide for details.

License

This project is licensed under the LGPL-3.0-or-later license.