feat(emeisOptions): add custom column option

README.md

@@ -114,6 +114,15 @@ export default class EmeisOptionsService extends Service {
       city: "optional",
       zip: "optional",
     },
+    // adds additional custom columns to this model's list view. *Scopes are not supported, since they are represented as a tree!*
+    customColumns: [
+      {
+        heading: "Funktion", // ember-intl or string
+        slug: "additional-column-function", // relative to "model.metainfo[slug]"
+        sortable: true, // whether sorting is supported for this column
+        localized: true, // whether to expect a plain value or a object with localized values
+      },
+    ],
     /*
     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".
     */

addon/components/data-table.js

@@ -26,7 +26,11 @@ export default class DataTableComponent extends Component {
   ]);
 
   get sort() {
-    return this.internalSort || this.args.defaultSort;
+    return (
+      this.internalSort ||
+      this.router.currentRoute.queryParams?.sort ||
+      this.args.defaultSort
+    );
   }
 
   get page() {

addon/components/data-table/head/column.hbs

@@ -1,4 +1,4 @@
-<th>
+<th ...attributes>
   {{#if @sort}}
     <span
       data-test-sortable-th={{@sort}}

addon/components/edit-form.js

@@ -66,7 +66,7 @@ export default class EditFormComponent extends Component {
     const option =
       this.emeisOptions[this.args.model?._internalModel?.modelName]?.actions
         ?.delete;
-    const func = option?.fn || option;
+    const func = option?.func || option;
     return typeof func === "function" ? func(this.args.model) : true;
   }
 

addon/components/edit-form/element.hbs

@@ -1,4 +1,4 @@
-<div class="uk-margin">
+<div class="uk-margin" ...attributes>
   <label class="uk-form-label" for="form-stacked-text">
     {{@label}}
     {{#if @optional}}

addon/components/meta-field.hbs

@@ -1,5 +1,5 @@
 {{#if this.visible.value}}
-  <EditForm::Element @label={{optional-translate @field.label}} @optional={{@optional}}>
+  <EditForm::Element @label={{optional-translate @field.label}} @optional={{@optional}} ...attributes>
     {{#if (eq @field.type "choice")}}
       {{#if this.options.isRunning}}
         <UkSpinner @ratio="1" />

addon/controllers/permissions/edit.js

@@ -1,7 +1,14 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 
 export default class PermissionsEditController extends Controller {
+  @service emeisOptions;
+
+  get metaFields() {
+    return this.emeisOptions.permission?.metaFields;
+  }
+
   @action
   updateModel(model, formElements) {
     model.slug = formElements.slug.value;

addon/controllers/permissions/index.js

@@ -1,3 +1,11 @@
+import { inject as service } from "@ember/service";
+
 import PaginationController from "ember-emeis/-private/controllers/pagination";
 
-export default class PermissionsIndexController extends PaginationController {}
+export default class PermissionsIndexController extends PaginationController {
+  @service emeisOptions;
+
+  get customColumns() {
+    return this.emeisOptions.permission?.customColumns;
+  }
+}

addon/controllers/roles/edit.js

@@ -1,7 +1,10 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 
 export default class RolesEditController extends Controller {
+  @service emeisOptions;
+
   get permissionFilter() {
     return { roles: this.model.id };
   }
@@ -10,6 +13,10 @@ export default class RolesEditController extends Controller {
     return !this.model.isNew && this.model.permissions;
   }
 
+  get metaFields() {
+    return this.emeisOptions.role?.metaFields;
+  }
+
   @action
   updateModel(model, formElements) {
     model.slug = formElements.slug.value;

addon/controllers/roles/index.js

@@ -1,3 +1,11 @@
+import { inject as service } from "@ember/service";
+
 import PaginationController from "ember-emeis/-private/controllers/pagination";
 
-export default class RolesIndexController extends PaginationController {}
+export default class RolesIndexController extends PaginationController {
+  @service emeisOptions;
+
+  get customColumns() {
+    return this.emeisOptions.role?.customColumns;
+  }
+}

addon/controllers/users/index.js

@@ -11,6 +11,10 @@ export default class UsersIndexController extends PaginationController {
   @service notification;
   @service intl;
 
+  get customColumns() {
+    return this.emeisOptions.user?.customColumns;
+  }
+
   get emailAsUsername() {
     return this.emeisOptions.emailAsUsername;
   }

addon/helpers/optional-localized-value.js

@@ -0,0 +1,20 @@
+import Helper from "@ember/component/helper";
+import { inject as service } from "@ember/service";
+
+export default class OptionalLocalizedValue extends Helper {
+  @service intl;
+  @service emeisOptions;
+
+  getFieldLocale(modelName) {
+    return modelName
+      ? this.emeisOptions.forceLocale?.[modelName]
+      : this.intl.localizedFieldLocale || this.intl.primaryLocale;
+  }
+
+  compute([field, modelName]) {
+    if (typeof field === "string") {
+      return field;
+    }
+    return field?.[this.getFieldLocale(modelName)];
+  }
+}

addon/templates/permissions/edit.hbs

@@ -53,4 +53,9 @@
       {{role.name}}
     </RelationshipSelect>
   </EditForm::Element>
+
+  {{#each this.metaFields as |field|}}
+    <MetaField @field={{field}} @model={{@model}} @optional={{unless field.required true}} data-test-meta-field={{field.slug}} />
+  {{/each}}
+
 </EditForm>

addon/templates/permissions/index.hbs

@@ -5,7 +5,7 @@
   @updatePage={{fn this.updateQueryParam "page"}}
   @updateSearch={{fn this.updateQueryParam "search"}} as |table|
 >
-  <table.head>
+  <table.head as |Column|>
     <th>
       {{t "emeis.permissions.headings.name"}}
     </th>
@@ -15,6 +15,11 @@
     <th>
       {{t "emeis.permissions.headings.description"}}
     </th>
+    {{#each this.customColumns as |extraColumn|}}
+      <Column @sort={{if extraColumn.sortable (concat "metainfo__" extraColumn.slug) ""}} data-test-custom-column={{extraColumn.slug}}>
+        {{optional-translate extraColumn.heading}}
+      </Column>
+    {{/each}}
   </table.head>
   <table.body as |body|>
     <body.row>
@@ -36,6 +41,11 @@
         <td class="uk-width-expand" data-test-permission-desc={{permission.id}}>
           {{permission.description}}
         </td>
+        {{#each this.customColumns as |extraColumn|}}
+          <td class="uk-width-expand" data-test-custom-row={{extraColumn.slug}}>
+              {{optional-localized-value (get permission.metainfo extraColumn.slug) "permission"}}
+          </td>
+        {{/each}}
       {{/let}}
     </body.row>
   </table.body>

addon/templates/roles/edit.hbs

@@ -39,6 +39,11 @@
       required
     ></textarea>
   </EditForm::Element>
+
+  {{#each this.metaFields as |field|}}
+    <MetaField @field={{field}} @model={{@model}} @optional={{unless field.required true}} data-test-meta-field={{field.slug}} />
+  {{/each}}
+
 </EditForm>
 
 {{#if this.displayPermissionTable}}

addon/templates/roles/index.hbs

@@ -5,7 +5,7 @@
   @updatePage={{fn this.updateQueryParam "page"}}
   @updateSearch={{fn this.updateQueryParam "search"}} as |table|
 >
-  <table.head>
+  <table.head as |Column|>
     <th>
       {{t "emeis.roles.headings.name"}}
     </th>
@@ -15,6 +15,11 @@
     <th>
       {{t "emeis.roles.headings.description"}}
     </th>
+    {{#each this.customColumns as |extraColumn|}}
+      <Column @sort={{if extraColumn.sortable (concat "metainfo__" extraColumn.slug) ""}} data-test-custom-column={{extraColumn.slug}}>
+        {{optional-translate extraColumn.heading}}
+      </Column>
+    {{/each}}
   </table.head>
   <table.body as |body|>
     <body.row>
@@ -28,10 +33,14 @@
         <td class="uk-width-1-4" data-test-role-slug={{role.id}}>
           {{role.slug}}
         </td>
-
         <td class="uk-width-expand" data-test-role-desc={{role.id}}>
           {{role.description}}
         </td>
+        {{#each this.customColumns as |extraColumn|}}
+          <td class="uk-width-expand" data-test-custom-row={{extraColumn.slug}}>
+              {{optional-localized-value (get role.metainfo extraColumn.slug) "role"}}
+          </td>
+        {{/each}}
       {{/let}}
     </body.row>
   </table.body>

addon/templates/users/edit.hbs

@@ -136,7 +136,7 @@
         {{/if}}
 
         {{#each this.metaFields as |field|}}
-          <MetaField @field={{field}} @model={{@model}} @optional={{unless field.required true}} />
+          <MetaField @field={{field}} @model={{@model}} @optional={{unless field.required true}} data-test-meta-field={{field.slug}} />
         {{/each}}
       </EditForm>
 

addon/templates/users/index.hbs

@@ -24,6 +24,11 @@
     <Column @sort="email">
       {{t "emeis.users.headings.email"}}
     </Column>
+    {{#each this.customColumns as |extraColumn|}}
+      <Column @sort={{if extraColumn.sortable (concat "metainfo__" extraColumn.slug) ""}} data-test-custom-column={{extraColumn.slug}}>
+        {{optional-translate extraColumn.heading}}
+      </Column>
+    {{/each}}
     <Column>
       {{t "emeis.roles.title"}}
     </Column>
@@ -56,6 +61,11 @@
         <td class="uk-link-text {{unless user.isActive "text-line-through"}}" data-test-user-email={{user.id}}>
           {{user.email}}
         </td>
+        {{#each this.customColumns as |extraColumn|}}
+          <td class="uk-link-text {{unless user.isActive "text-line-through"}}" data-test-custom-row={{extraColumn.slug}}>
+              {{optional-localized-value (get user.metainfo extraColumn.slug) "user"}}
+          </td>
+        {{/each}}
         <td class="uk-link-text {{unless user.isActive "text-line-through"}}">
           <ul class="uk-list uk-list-divider">
             {{#each user.acls as |acl|}}

app/helpers/optional-localized-value.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/helpers/optional-localized-value";

tests/acceptance/permissions-test.js

@@ -1,3 +1,4 @@
+import Service from "@ember/service";
 import {
   visit,
   currentURL,
@@ -8,15 +9,55 @@ import {
   settled,
 } from "@ember/test-helpers";
 import { setupMirage } from "ember-cli-mirage/test-support";
+import { setupIntl } from "ember-intl/test-support";
 import { selectChoose } from "ember-power-select/test-support";
 import { setupApplicationTest } from "ember-qunit";
 import { module, test } from "qunit";
 
 import setupRequestAssertions from "./../helpers/assert-request";
 
+const createEmeisOptions = (context) => {
+  return class ExtendedEmeisOptionsStub extends Service {
+    permission = {
+      actions: {
+        delete: {
+          func: () => {
+            context.step("delete");
+            return true;
+          },
+          label: () => {
+            context.step("delete-label");
+            return "my delete label";
+          },
+        },
+      },
+      customColumns: [
+        {
+          heading: "Funktion", // ember-intl or string
+          slug: "additional-column-function", // relative to "model.metainfo[slug]"
+          sortable: true, // whether sorting is supported for this column
+          localized: true, // whether to expect a plain value or a object with localized values
+        },
+      ],
+      metaFields: [
+        {
+          slug: "meta-example",
+          label: "Example for custom text field", // ember-intl translation key
+          type: "text",
+          visible: true,
+          readOnly: false,
+          required: false,
+          placeholder: "Example for custom text field",
+        },
+      ],
+    };
+  };
+};
+
 module("Acceptance | permissions", function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupIntl(hooks, "en");
   setupRequestAssertions(hooks);
 
   test("list view /permissions", async function (assert) {
@@ -162,4 +203,41 @@ module("Acceptance | permissions", function (hooks) {
     assert.strictEqual(currentURL(), `/permissions?page=1`);
     assert.dom("[data-test-permission-name]").doesNotExist();
   });
+
+  test("emeisOptions integration", async function (assert) {
+    assert.expect(11);
+
+    const customEmeisOptionsStub = createEmeisOptions(assert);
+    this.owner.register("service:emeis-options", customEmeisOptionsStub);
+
+    const permission = this.server.create("permission");
+
+    await visit("/permissions");
+    // eslint-disable-next-line ember/no-settled-after-test-helper
+    await settled();
+
+    assert.strictEqual(currentURL(), "/permissions");
+
+    assert
+      .dom("[data-test-custom-column=additional-column-function]")
+      .exists({ count: 1 });
+    assert
+      .dom("[data-test-custom-column=additional-column-function]")
+      .hasText("Funktion");
+    assert
+      .dom("[data-test-custom-row=additional-column-function]")
+      .exists({ count: 1 });
+
+    await visit(`/permissions/${permission.id}`);
+    assert.dom("[data-test-delete]").hasText("my delete label");
+    assert.verifySteps(["delete", "delete-label"]);
+
+    assert.dom("[data-test-meta-field=meta-example]").exists({ count: 1 });
+    assert
+      .dom("[data-test-meta-field=meta-example]")
+      .hasText("Example for custom text field (optional)");
+    assert
+      .dom("[data-test-meta-field=meta-example] input")
+      .hasAttribute("placeholder", "Example for custom text field");
+  });
 });