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/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/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]
+      : undefined || this.intl.localizedFieldLocale || this.intl.primaryLocale;
+  }
+
+  compute([field, modelName]) {
+    if (typeof field === "string") {
+      return field;
+    }
+    return field[this.getFieldLocale(modelName)];
+  }
+}

addon/templates/permissions/index.hbs

@@ -15,6 +15,11 @@
     <th>
       {{t "emeis.permissions.headings.description"}}
     </th>
+    {{#each this.customColumns as |extraColumn|}}
+      <Column @sort={{if extraColumn.sort 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-column={{extraColumn.slug}}>
+              {{optional-localized-value (get permission.metainfo extraColumn.slug) "permission"}}
+          </td>
+        {{/each}}
       {{/let}}
     </body.row>
   </table.body>

addon/templates/roles/index.hbs

@@ -15,6 +15,11 @@
     <th>
       {{t "emeis.roles.headings.description"}}
     </th>
+    {{#each this.customColumns as |extraColumn|}}
+      <Column @sort={{if extraColumn.sort 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-column={{extraColumn.slug}}>
+              {{optional-localized-value (get role.metainfo extraColumn.slug) "role"}}
+          </td>
+        {{/each}}
       {{/let}}
     </body.row>
   </table.body>

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.sort 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-column={{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/dummy/app/services/emeis-options.js

@@ -20,6 +20,14 @@ export default class EmeisOptionsService extends Service {
     //   phone: "optional",
     //   language: "optional",
     // }
+    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
+      },
+    ],
     customComponent: TestButtonComponent,
     metaFields: [
       {

tests/dummy/mirage/factories/user.js

@@ -14,6 +14,10 @@ export default Factory.extend({
   address: () => faker.address.streetAddress(),
   city: () => localize(faker.address.city()),
   zip: () => faker.datatype.number(),
-  metainfo: () => {},
+  metainfo: () => {
+    return {
+      additional_column_function: faker.company.bsNoun(),
+    };
+  },
   isActive: () => faker.datatype.boolean(),
 });

tests/integration/helpers/optional-localized-value-test.js

@@ -0,0 +1,25 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupIntl } from "ember-intl/test-support";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Helper | optional-localized-value", function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks, ["en"]);
+
+  test("it renders a localized field", async function (assert) {
+    this.set("inputValue", { en: "english", de: "deutsch" });
+
+    await render(hbs`{{optional-localized-value this.inputValue}}`);
+
+    assert.dom(this.element).hasText("english");
+  });
+  test("it renders a unlocalized field", async function (assert) {
+    this.set("inputValue", "1234-string");
+
+    await render(hbs`{{optional-localized-value this.inputValue}}`);
+
+    assert.dom(this.element).hasText("1234-string");
+  });
+});