feat(emeisOptions): action button label overrides

README.md

@@ -91,68 +91,68 @@ export default class EmeisOptionsService extends Service {
   // 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 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".
-  */
-  customComponents = {
-    users: DummyButton,
-  },
-  /*
-  Within the actions block you can define functions which evaluate the visibility of the "deactivate" and "delete" buttons in the model edit form. The visibilty must be defined for each model separately.
-
-  The model must support the "isActive" property for deactivation capabilities, which are currently only supported by user and scope.
-  */
-  actions = {
-    user: {
+  // user view specific settings
+  user = {
+    /*
+    Within the actions block you can define functions which evaluate the visibility of the "deactivate" and "delete" buttons in the model edit form. The visibilty must be defined for each model separately. The model must support the "isActive" property for deactivation capabilities, which are currently only supported by user and scope.
+    */
+    actions: {
       deactivate: (model) => myUser.canChange(model),
-      delete: (model) => myUser.canDelete(model),
+      delete: {
+        label: "some.translation.key", // you can optionally override the label for the action button with translation key or static string
+        fn: (model) => myUser.canDelete(model), // in case of label overrides, you have to define th function override via the "fn" key
+      },
     },
-    scope: {
+    // show only a subset of the "additional" fields on the user model
+    additionalFields: {
+      phone: "required",
+      language: "required",
+      address: "optional",
+      city: "optional",
+      zip: "optional",
+    },
+    /*
+    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,
+  };
+
+  scope = {
+    actions: {
       deactivate: () => false, // statically deactivate the deactivate-button
       // leaving out the "delete" key here will always display the delete button
-    }
-  }
-  // define custom fields for a given context (user, scope, role or permission)
-  metaFields = {
-    user: [],
-    scope: [
+    },
+    // define custom fields for a given context (user, scope, role or permission)
+    metaFields: [
       {
         slug: "test-input",
         label: "My Input", // this could also be an ember-intl translation key
         type: "text",
         visible: true,
         readOnly: false,
         required: false, //marks this field as optional
-        placeholder: "some.translation.key" //ember-intl translation key or plain string
+        placeholder: "some.translation.key", //ember-intl translation key or plain string
       },
       {
         slug: "test-input-2",
         label: "some.translation.key",
-        options: [  // insert a static list of options (value, label), or a (async) function which resolves to a list of options
+        options: [
+          // insert a static list of options (value, label), or a (async) function which resolves to a list of options
           {
             value: "option-1",
-            label: "Option one"
-          }
+            label: "Option one",
+          },
         ],
         type: "choice",
         visible: () => true,
         readOnly: false,
         required: true, //marks this field as required
-      }
-    ]
-  }
+      },
+    ],
+  };
 }
 ```
 

addon/components/edit-form.hbs

@@ -22,7 +22,7 @@
         data-test-toggle-active
         @onClick={{perform this.toggleActiveState}}
       >
-        {{t (concat "emeis.form." (if @model.isActive "deactivate" "activate"))}}
+        {{optional-translate this.deactivateLabelOverride}}
       </UkButton>
     {{/if}}
 
@@ -34,7 +34,7 @@
         data-test-delete
         @onClick={{perform this.delete}}
       >
-        {{t "emeis.form.delete"}}
+        {{optional-translate this.deleteLabelOverride}}
       </UkButton>
     {{/if}}
 

addon/components/edit-form.js

@@ -1,6 +1,7 @@
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { task } from "ember-concurrency";
+import { singularize } from "ember-inflector";
 
 import { confirmTask } from "../decorators/confirm-task";
 
@@ -42,33 +43,57 @@ export default class EditFormComponent extends Component {
   }
 
   get modelName() {
-    return this.relativeParentRouteName.split(".")[0];
+    return singularize(this.relativeParentRouteName.split(".")[0]);
   }
 
   get customComponent() {
-    return this.emeisOptions.customComponents?.[this.modelName];
+    return this.emeisOptions[this.modelName]?.customComponent;
   }
 
   get modelHasActiveState() {
     return this.args.model?.isActive !== undefined;
   }
 
   get canChangeActiveState() {
-    return this.emeisOptions.actions?.[this.args.model._internalModel.modelName]
-      ?.deactivate
-      ? this.emeisOptions.actions[
-          this.args.model._internalModel.modelName
-        ].deactivate(this.args.model)
-      : true;
+    const option =
+      this.emeisOptions[this.args.model?._internalModel?.modelName]?.actions
+        ?.deactivate;
+    const func = option?.func || option;
+    return typeof func === "function" ? func(this.args.model) : true;
   }
 
   get canDeleteModel() {
-    return this.emeisOptions.actions?.[this.args.model._internalModel.modelName]
-      ?.delete
-      ? this.emeisOptions.actions[
-          this.args.model._internalModel.modelName
-        ].delete(this.args.model)
-      : true;
+    const option =
+      this.emeisOptions[this.args.model?._internalModel?.modelName]?.actions
+        ?.delete;
+    const func = option?.fn || option;
+    return typeof func === "function" ? func(this.args.model) : true;
+  }
+
+  get deactivateLabelOverride() {
+    const label =
+      this.emeisOptions[this.args.model?._internalModel?.modelName]?.actions
+        ?.deactivate?.label;
+    if (typeof label === "function") {
+      return label(this.args.model);
+    } else if (label) {
+      return label;
+    }
+    return this.intl.t(
+      `emeis.form.${this.args.model.isActive ? "deactivate" : "activate"}`
+    );
+  }
+
+  get deleteLabelOverride() {
+    const label =
+      this.emeisOptions[this.args.model?._internalModel?.modelName]?.actions
+        ?.delete?.label;
+    if (typeof label === "function") {
+      return label(this.args.model);
+    } else if (label) {
+      return label;
+    }
+    return this.intl.t("emeis.form.delete");
   }
 
   @task

addon/controllers/scopes/edit.js

@@ -14,7 +14,7 @@ export default class ScopesEditIndexController extends PaginationController {
   }
 
   get metaFields() {
-    return this.emeisOptions.metaFields?.scope;
+    return this.emeisOptions.scope?.metaFields;
   }
 
   get allScopes() {

addon/controllers/users/edit.js

@@ -17,26 +17,26 @@ export default class UsersEditController extends PaginationController {
   @tracked showAclWizzard = false;
 
   get metaFields() {
-    return this.emeisOptions.metaFields?.user;
+    return this.emeisOptions.user?.metaFields;
   }
 
   get emailAsUsername() {
     return this.emeisOptions.emailAsUsername;
   }
 
   get visibleFields() {
-    if (!this.emeisOptions.additionalUserFields) {
+    if (!this.emeisOptions.user.additionalFields) {
       return ALL_ADDITIONAL_FIELDS;
     }
 
-    return Object.keys(this.emeisOptions.additionalUserFields);
+    return Object.keys(this.emeisOptions.user.additionalFields);
   }
 
   get requiredFields() {
-    if (!this.emeisOptions.additionalUserFields) {
+    if (!this.emeisOptions.user.additionalFields) {
       return ALL_ADDITIONAL_FIELDS;
     }
-    return Object.entries(this.emeisOptions.additionalUserFields, {})
+    return Object.entries(this.emeisOptions.user.additionalFields, {})
       .filter(([, value]) => value === "required")
       .map(([key]) => key);
   }

package.json

@@ -51,6 +51,7 @@
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^2.1.2",
     "ember-data": "^3.28.3",
+    "ember-inflector": "^4.0.2",
     "ember-intl": "^5.7.2",
     "ember-modifier": "^3.2.7",
     "ember-power-select": "^5.0.4",

tests/acceptance/users-test.js

@@ -15,9 +15,11 @@ import { module, test } from "qunit";
 import setupRequestAssertions from "./../helpers/assert-request";
 
 class EmeisOptionsStub extends Service {
-  additionalUserFields = {
-    phone: "optional",
-    language: "required",
+  user = {
+    additionalFields: {
+      phone: "optional",
+      language: "required",
+    },
   };
 }
 

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

@@ -9,25 +9,19 @@ export default class EmeisOptionsService extends Service {
   // forceLocale = {
   //   scope: "en",
   // };
-  // additionalUserFields = {
-  //   phone: "optional",
-  //   language: "optional",
-  // };
   // navigationEntries = ["users", "scopes"];
-  customComponents = {
-    users: TestButtonComponent,
-  };
-  actions = {
-    user: {
+
+  // user view specific settings
+  user = {
+    actions: {
       delete: () => true,
     },
-    scope: {
-      delete: (model) => model.id !== "special",
-      deactivate: (model) => model.id !== "special",
-    },
-  };
-  metaFields = {
-    user: [
+    // additionalFields: {
+    //   phone: "optional",
+    //   language: "optional",
+    // }
+    customComponent: TestButtonComponent,
+    metaFields: [
       {
         slug: "user-meta-example",
         label: "emeis.options.meta.user.example", // ember-intl translation key
@@ -55,7 +49,19 @@ export default class EmeisOptionsService extends Service {
       //   readOnly: false,
       // },
     ],
-    scope: [
+  };
+
+  // scope view specific settings
+  scope = {
+    actions: {
+      delete: (model) => model.id !== "special",
+      deactivate: {
+        label: (model) =>
+          model.isActive ? "my deactivate label" : "my reactivate label",
+        fn: (model) => model.id !== "special",
+      },
+    },
+    metaFields: [
       {
         slug: "meta-example",
         label: "emeis.options.meta.scope.meta-example",

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

@@ -8,8 +8,8 @@ import { module, test } from "qunit";
 import DummyButton from "../../../components/dummy-button/dummy-button";
 
 class EmeisOptionsStub extends Service {
-  customComponents = {
-    users: DummyButton,
+  user = {
+    customComponent: DummyButton,
   };
 }
 
@@ -53,6 +53,9 @@ module("Integration | Component | edit-form", function (hooks) {
 
     this.setProperties({
       model: {
+        _internalModel: {
+          modelName: "user",
+        },
         save() {
           assert.step("save");
         },
@@ -80,6 +83,9 @@ module("Integration | Component | edit-form", function (hooks) {
     };
 
     this.set("model", {
+      _internalModel: {
+        modelName: "user",
+      },
       destroyRecord() {
         assert.step("destroyRecord");
       },
@@ -103,6 +109,9 @@ module("Integration | Component | edit-form", function (hooks) {
 
     this.setProperties({
       model: {
+        _internalModel: {
+          modelName: "user",
+        },
         save() {
           assert.step("save");
         },

yarn.lock

@@ -6512,7 +6512,7 @@ ember-in-element-polyfill@^1.0.1:
     ember-cli-htmlbars "^5.3.1"
     ember-cli-version-checker "^5.1.2"
 
-"ember-inflector@^2.0.0 || ^3.0.0 || ^4.0.2", ember-inflector@^4.0.1:
+"ember-inflector@^2.0.0 || ^3.0.0 || ^4.0.2", ember-inflector@^4.0.1, ember-inflector@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/ember-inflector/-/ember-inflector-4.0.2.tgz#4494f1a5f61c1aca7702d59d54024cc92211d8ec"
   integrity sha512-+oRstEa52mm0jAFzhr51/xtEWpCEykB3SEBr7vUg8YnXUZJ5hKNBppP938q8Zzr9XfJEbzrtDSGjhKwJCJv6FQ==