feat(emeis-options): allow multiple custom buttons per view

README.md

@@ -88,12 +88,19 @@ export default class EmeisOptionsService extends Service {
   // show only a subset of the main navigation entries
   navigationEntries = ["users", "scopes"];
 
-  //  integrate a custom button into any edit view. On each edit view (e.g. users) you can define a label and a callback function for the button.
+  // 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. 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"),
-    }
+    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: () => window.alert("test"),
+      }
+    ]
   };
 
   // define custom fields for a given context (user, scope, role or permission)

addon/components/edit-form.hbs

@@ -6,13 +6,16 @@
   {{yield}}
 
   <div class="uk-flex uk-flex-left uk-margin">
-    {{#if this.hasCustomButton}}
-      <UkButton
-        @type="button"
-        @label={{optional-translate this.customButtonLabel}}
-        {{on "click" this.customAction}}
-        data-test-custom-button
-      />
+    {{#if this.customButtons}}
+      {{#each this.customButtons as |button index|}}
+        <UkButton
+          @type="button"
+          @label={{optional-translate button.label}}
+          class="uk-margin-right {{if button.type (concat 'uk-button-' button.type) ''}}"
+          {{on "click" (fn this.customAction index)}}
+          data-test-custom-button
+        />
+      {{/each}}
     {{/if}}
   </div>
 

addon/components/edit-form.js

@@ -44,28 +44,21 @@ export default class EditFormComponent extends Component {
     return this.relativeParentRouteName.split(".")[0];
   }
 
-  get hasCustomButton() {
+  get customButtons() {
     return this.emeisOptions.customButtons?.[this.modelName];
   }
 
-  get customButtonLabel() {
-    return (
-      this.emeisOptions.customButtons?.[this.modelName]?.label ||
-      "custom button"
-    );
-  }
-
   @action
-  customAction() {
+  customAction(index) {
     if (
-      typeof this.emeisOptions.customButtons?.[this.modelName].callback !==
-      "function"
+      typeof this.emeisOptions.customButtons?.[this.modelName][index]
+        ?.callback !== "function"
     ) {
       this.notification.danger(
         this.intl.t("emeis.form.custom-button-action-error")
       );
     }
-    this.emeisOptions.customButtons?.[this.modelName]?.callback();
+    this.emeisOptions.customButtons?.[this.modelName][0].callback();
   }
 
   @task

tests/dummy/app/services/emeis-options.js

@@ -9,10 +9,17 @@ export default class EmeisOptionsService extends Service {
   // };
   // navigationEntries = ["users", "scopes"];
   customButtons = {
-    users: {
-      label: "This is a custom button",
-      callback: () => console.warn("test"),
-    },
+    users: [
+      {
+        label: "This is a custom button",
+        callback: () => console.warn("test"),
+        type: "primary",
+      },
+      {
+        label: "Second Button",
+        callback: () => console.warn("test"),
+      },
+    ],
   };
   metaFields = {
     user: [

tests/integration/components/edit-form-test.js

@@ -7,14 +7,17 @@ import { module, test } from "qunit";
 
 class EmeisOptionsStub extends Service {
   customButtons = {
-    users: {
-      label: "This is a custom button",
-      callback: () => {
-        document
-          .querySelector("[data-test-custom-button]")
-          .setAttribute("data-test-action-triggered", true);
+    users: [
+      {
+        label: "This is a custom button",
+        callback: () => {
+          document
+            .querySelector("[data-test-custom-button]")
+            .setAttribute("data-test-action-triggered", true);
+        },
+        type: "danger",
       },
-    },
+    ],
   };
 }
 
@@ -122,14 +125,15 @@ module("Integration | Component | edit-form", function (hooks) {
   });
 
   test("custom action", async function (assert) {
-    assert.expect(3);
+    assert.expect(4);
     this.router.currentRoute.parent.name = "ember-emeis.users.edit";
 
     await render(hbs`
       <EditForm></EditForm>
     `);
 
     assert.dom("[data-test-custom-button]").exists();
+    assert.dom("[data-test-custom-button].uk-button-danger").exists();
     assert
       .dom("[data-test-custom-button]")
       .hasNoAttribute("data-test-action-triggered");