feat(emeis-options): custom user status component (#523)

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 = {

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

addon/templates/users/edit.hbs

@@ -8,6 +8,11 @@
         {{#unless @model.isActive}}
           <span class="uk-badge uk-background-secondary">{{t "emeis.inactive"}}</span>
         {{/unless}}
+        {{#if this.statusComponent}}
+          {{#let (component (ensure-safe-component this.statusComponent)) as |StatusComponent|}}
+            <StatusComponent @model={{@model}} />
+          {{/let}}
+        {{/if}}
       </h3>
       <EditForm
         @model={{@model}}

tests/dummy/app/components/dummy-status/dummy-status.hbs

@@ -0,0 +1,3 @@
+{{#each this.badges as |badge|}}
+  <span class="uk-badge uk-background-primary">{{optional-translate badge.label}}</span>
+{{/each}}

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`,
+      },
+    ];
+  }
+}

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