diff --git a/README.md b/README.md index 46e606d7..13da1a8f 100644 --- a/README.md +++ b/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) diff --git a/addon/components/edit-form.hbs b/addon/components/edit-form.hbs index bba43160..1fbe3990 100644 --- a/addon/components/edit-form.hbs +++ b/addon/components/edit-form.hbs @@ -6,13 +6,16 @@ {{yield}}
- {{#if this.hasCustomButton}} - + {{#if this.customButtons}} + {{#each this.customButtons as |button index|}} + + {{/each}} {{/if}}
diff --git a/addon/components/edit-form.js b/addon/components/edit-form.js index 2f039558..29f27f24 100644 --- a/addon/components/edit-form.js +++ b/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 diff --git a/tests/dummy/app/services/emeis-options.js b/tests/dummy/app/services/emeis-options.js index 478ae7ed..efa5c82b 100644 --- a/tests/dummy/app/services/emeis-options.js +++ b/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: [ diff --git a/tests/integration/components/edit-form-test.js b/tests/integration/components/edit-form-test.js index 74715366..e944d9a1 100644 --- a/tests/integration/components/edit-form-test.js +++ b/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,7 +125,7 @@ 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` @@ -130,6 +133,7 @@ module("Integration | Component | edit-form", function (hooks) { `); 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");