diff --git a/README.md b/README.md index 7703361d..02adea80 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,9 @@ export default class EmeisOptionsService extends Service { 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 - 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 = { diff --git a/addon/controllers/users/edit.js b/addon/controllers/users/edit.js index 78d72e1a..6e4bad0d 100644 --- a/addon/controllers/users/edit.js +++ b/addon/controllers/users/edit.js @@ -20,6 +20,10 @@ export default class UsersEditController extends PaginationController { return this.emeisOptions.user?.metaFields; } + get statusComponent() { + return this.emeisOptions.user?.statusComponent; + } + get emailAsUsername() { return this.emeisOptions.emailAsUsername; } diff --git a/addon/templates/users/edit.hbs b/addon/templates/users/edit.hbs index c0f867fd..690f50c2 100644 --- a/addon/templates/users/edit.hbs +++ b/addon/templates/users/edit.hbs @@ -8,6 +8,11 @@ {{#unless @model.isActive}} {{t "emeis.inactive"}} {{/unless}} + {{#if this.statusComponent}} + {{#let (component (ensure-safe-component this.statusComponent)) as |StatusComponent|}} + + {{/let}} + {{/if}} {{optional-translate badge.label}} +{{/each}} \ No newline at end of file diff --git a/tests/dummy/app/components/dummy-status/dummy-status.js b/tests/dummy/app/components/dummy-status/dummy-status.js new file mode 100644 index 00000000..848155da --- /dev/null +++ b/tests/dummy/app/components/dummy-status/dummy-status.js @@ -0,0 +1,11 @@ +import Component from "@glimmer/component"; + +export default class DummyStatusComponent extends Component { + get badges() { + return [ + { + label: `${this.args.model.username}'s custom status`, + }, + ]; + } +} diff --git a/tests/dummy/app/services/emeis-options.js b/tests/dummy/app/services/emeis-options.js index 9080eb96..a33d8e9d 100644 --- a/tests/dummy/app/services/emeis-options.js +++ b/tests/dummy/app/services/emeis-options.js @@ -2,6 +2,7 @@ import Service from "@ember/service"; import { timeout } from "ember-concurrency"; import TestButtonComponent from "../components/dummy-button/dummy-button"; // template and component file must have the same name (if not template only) +import TestStatusComponent from "../components/dummy-status/dummy-status"; // template and component file must have the same name (if not template only) export default class EmeisOptionsService extends Service { emailAsUsername = false; @@ -57,6 +58,7 @@ export default class EmeisOptionsService extends Service { // readOnly: false, // }, ], + statusComponent: TestStatusComponent, }; // scope view specific settings