chore(deps): bump ember-cli-babel from 7.26.6 to 7.26.10

README.md

@@ -87,9 +87,53 @@ export default class EmeisOptionsService extends Service {
 
   // show only a subset of the main navigation entries
   navigationEntries = ["users", "scopes"];
+
+  // define custom fields for a given context (user, scope, role or permission)
+  metaFields = {
+    user: [],
+    scope: [
+      {
+        slug: "test-input",
+        label: "translation.key",
+        type: "text",
+        visible: true,
+        readOnly: false
+      },
+      {
+        slug: "test-input-2",
+        label: "translation.key-2",
+        type: "choice",
+        visible: () => true,
+        readOnly: false
+      }
+    ]
+  }
 }
 ```
 
+*Watch out* - the translation key has to be present in your local translation files.
+
+There are special options available for `type` and `visible` properties.
+
+#### **type** - meta field
+Defines the type of the output component and can either be a *text* or a *choice*.
+
+#### **visible** & **readOnly** meta field
+Accepts a boolean value for static visibility or a function which evaluates to a boolean value. Submitted functions will evaluate live while rendering.
+
+The evaluation function will receive the current model as argument. For instance if you are on the scope route, you will receive the [scope model](addon/models/scope.js) as first argument. Same for [user](addon/models/user.js) | [role](addon/models/role.js) | [permission](addon/models/permission.js)
+
+So the function signature looks like this for `visible` and `readOnly`.
+```ts
+  type visible = (model:scope|user|role|permission) => boolean;
+```
+And an actual implementation example, which makes use of the `mode.name` property:
+```js
+  visible: (model) => model.name === "test-scope"
+```
+
+For a complete `emeis-options` configuration open the [test config](tests/dummy/app/services/emeis-options.js).
+
 ### Emeis store
 
 If you need to customize your store service passed to emeis, use:

addon/-private/controllers/pagination.js

@@ -4,7 +4,7 @@ import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
 
 export default class PaginationController extends Controller {
-  queryParams = ["page", "search"];
+  queryParams = ["page", "search", "sort"];
 
   @service router;
 
@@ -13,7 +13,7 @@ export default class PaginationController extends Controller {
 
   @action
   updateQueryParam(field, value) {
-    // We dont want to set an empty stirng as this is still serialized
+    // We dont want to set an empty string as this is still serialized
     if (typeof value === "string" && !value.length) {
       value = null;
     }

addon/components/data-table.hbs

@@ -29,28 +29,27 @@
 </div>
 
 <table
-  class="uk-table uk-table-divider"
+  class="uk-table uk-table-striped"
   ...attributes
 >
 
   {{#if this.isLoading}}
-    <tbody>
-      <td colspan="99" class="uk-padding-large uk-animation-fade">
-        <UkFlex
-          @direction="column"
-          @horizontal="center"
-          @vertical="middle"
-          class="uk-height-large"
-        >
-          <UkSpinner @ratio="3" />
-        </UkFlex>
-      </td>
+    {{yield (hash
+        head=(component "data-table/head" sortedBy=this.sort update=this.updateSort)
+      )
+    }}
+    <tbody data-test-loading>
+      <tr>
+        <td colspan="99" class="uk-padding-large uk-animation-fade uk-text-center">
+          <UkSpinner @ratio="1" />
+        </td>
+      </tr>
     </tbody>
   {{else}}
     {{yield
       (hash
         body=(component "data-table/body" models=this.data.value)
-        head=(component "data-table/head")
+        head=(component "data-table/head" sortedBy=this.sort update=this.updateSort)
         refresh=(perform this.fetchData)
       )
     }}

addon/components/data-table.js

@@ -14,15 +14,21 @@ export default class DataTableComponent extends Component {
   @tracked numPages;
   @tracked internalSearch;
   @tracked internalPage = 1;
+  @tracked internalSort;
 
   // While using 'useTask' we ended up in an infinite loop.
   // data = useTask(this, this.fetchData, () => [this.args.filter]);
   data = useFunction(this, this.fetchData.perform, () => [
     this.args.filter,
-    this.page,
     this.search,
+    this.sort,
+    this.page,
   ]);
 
+  get sort() {
+    return this.internalSort || this.args.defaultSort;
+  }
+
   get page() {
     return this.args.page || this.internalPage;
   }
@@ -31,6 +37,13 @@ export default class DataTableComponent extends Component {
     return this.args.search || this.internalSearch;
   }
 
+  set sort(sort) {
+    if (this.args.updateSort) {
+      this.args.updateSort(sort);
+    }
+    this.internalSort = sort;
+  }
+
   set search(search) {
     if (this.args.updateSearch) {
       this.args.updateSearch(search);
@@ -39,6 +52,14 @@ export default class DataTableComponent extends Component {
     }
   }
 
+  set page(page) {
+    if (this.args.updatePage) {
+      this.args.updatePage(page);
+    } else {
+      this.internalPage = page;
+    }
+  }
+
   get isLoading() {
     return this.fetchData.isRunning;
   }
@@ -66,7 +87,7 @@ export default class DataTableComponent extends Component {
 
     let options = {
       filter: { search: this.search, ...(this.args.filter || {}) },
-      sort: this.args.sort,
+      sort: this.sort,
       include: this.args.include || "",
     };
 
@@ -87,28 +108,43 @@ export default class DataTableComponent extends Component {
     return data;
   }
 
+  @action
+  updateSort(sortLabel) {
+    if (this.args.updateSort) {
+      this.args.updateSort(sortLabel);
+    }
+
+    const invers = this.sort[0] === "-";
+
+    if (
+      this.sort === sortLabel ||
+      (invers && this.sort.slice(1) === sortLabel)
+    ) {
+      if (invers) {
+        this.internalSort = undefined;
+      } else {
+        this.internalSort = `-${sortLabel}`;
+      }
+    } else {
+      this.internalSort = sortLabel;
+    }
+  }
+
   @action
   updateSearch(submitEvent) {
     // Prevent reload because of form submit
     submitEvent.preventDefault();
     this.search = submitEvent.target.elements.search.value;
-    this.fetchData.perform();
   }
 
   @action
   resetSearch(event) {
     event.preventDefault();
     this.search = "";
-    this.fetchData.perform();
   }
 
   @action
   updatePage(page) {
-    if (this.args.updatePage) {
-      this.args.updatePage(page);
-    } else {
-      this.internalPage = page;
-    }
-    this.fetchData.perform();
+    this.page = page;
   }
 }

addon/components/data-table/head.hbs

@@ -1,5 +1,5 @@
 <thead>
   <tr>
-    {{yield}}
+    {{yield (hash sorthead=(component "data-table/head/sortable-th" update=@update sortedBy=@sortedBy))}}
   </tr>
-</thead>
+</thead>

addon/components/data-table/head/sortable-th.hbs

@@ -0,0 +1,15 @@
+<th>
+  <span
+    data-test-sortable-th={{@sort}}
+    class="sortable-th"
+    role="button"
+    {{on "click" (fn @update @sort)}}
+  >
+    {{yield}}
+    {{#if (eq @sortedBy @sort)}}
+      <UkIcon @icon="chevron-down"/>
+    {{else if (eq @sortedBy (concat "-" @sort))}}
+      <UkIcon @icon="chevron-up"/>
+    {{/if}}
+  </span>
+</th>

addon/components/meta-fields.hbs

@@ -1,26 +1,26 @@
 {{#each @fields as |field|}}
-  {{#if field.visible}}
-    <EditForm::Element @label={{get field.label this.intl.primaryLocale}}>
+  {{#if (eval-meta field.visible @model)}}
+    <EditForm::Element @label={{t field.label}}>
       {{#if (eq field.type "choice")}}
         <PowerSelect
-          @disabled={{field.readOnly}}
+          @disabled={{eval-meta field.readOnly @model}}
           @options={{field.options}}
           @selected={{find-by "value" (get @model.meta field.slug) field.options}}
           @onChange={{fn this.updateMetaField field @model}}
-          @placeholder={{concat (get field.label this.intl.primaryLocale) "..."}}
+          @placeholder={{t field.label}}
           @allowClear={{true}}
           as |option|
         >
-          {{get option.label this.intl.primaryLocale}}
+          {{t option.label}}
         </PowerSelect>
       {{/if}}
       {{#if (eq field.type "text")}}
         <input
-          data-test-meta-field-text
+          data-test-meta-field-text={{field.slug}}
           class="uk-input"
           type="text"
           value={{get @model.meta field.slug}}
-          disabled={{field.readOnly}}
+          disabled={{eval-meta field.readOnly @model}}
           {{on "input" (fn this.updateMetaField field @model)}}
         >
       {{/if}}

addon/controllers/scopes/edit/index.js

@@ -23,4 +23,9 @@ export default class ScopesEditIndexController extends Controller {
 
     return model;
   }
+
+  @action
+  setParent(scope) {
+    this.model.parent = scope;
+  }
 }

addon/decorators/handle-model-errors.js

@@ -28,13 +28,14 @@ export default function (...args) {
           this.notification.danger(this.intl.t(notFoundErrorMessage));
           this.replaceWith(routeFor404);
         } else {
+          console.error(exception);
           this.notification.danger(this.intl.t(errorMessage));
         }
       };
 
       try {
         const result = originalDescriptor.apply(this, args);
-        return result.then ? result.catch(catchErrors) : result;
+        return result?.then ? result.catch(catchErrors) : result;
       } catch (exception) {
         catchErrors(exception);
       }

addon/helpers/eval-meta.js

@@ -0,0 +1,8 @@
+import { helper } from "@ember/component/helper";
+
+export default helper(function evalMeta([expression, model]) {
+  if (typeof expression === "boolean") return expression;
+  if (typeof expression === "function") return expression(model);
+  if (typeof expression === "string") return expression === "true";
+  return false;
+});

addon/templates/scopes/edit/index.hbs

@@ -29,7 +29,7 @@
       @model={{this.allScopes}}
       @selected={{@model.parent}}
       @placeholder="{{t "emeis.scopes.headings.parent"}}..."
-      @onChange={{set @model.parent}} as |scope|
+      @onChange={{this.setParent}} as |scope|
     >
       {{scope.name}}
     </RelationshipSelect>

addon/templates/users/index.hbs

@@ -2,25 +2,28 @@
   @modelName="user"
   @page={{this.page}}
   @search={{this.search}}
-  @sort="last_name"
+  @defaultSort="last_name"
   @updatePage={{fn this.updateQueryParam "page"}}
-  @updateSearch={{fn this.updateQueryParam "search"}} as |table|
+  @updateSearch={{fn this.updateQueryParam "search"}}
+  @updateSort={{fn this.updateQueryParam "sort"}}
+  @include={{"acls.role"}}
+  as |table|
 >
-  <table.head>
+  <table.head as |head|>
     {{#unless this.emailAsUsername}}
-      <th>
+      <head.sorthead @sort="username">
         {{t "emeis.users.headings.username"}}
-      </th>
-    {{/unless}}
-    <th>
+      </head.sorthead>
+      {{/unless}}
+    <head.sorthead @sort="last_name">
       {{t "emeis.users.headings.lastName"}}
-    </th>
-    <th>
+    </head.sorthead>
+    <head.sorthead @sort="first_name">
       {{t "emeis.users.headings.firstName"}}
-    </th>
-    <th>
+    </head.sorthead>
+    <head.sorthead @sort="email">
       {{t "emeis.users.headings.email"}}
-    </th>
+    </head.sorthead>
   </table.head>
   <table.body as |body|>
     <body.row>

app/components/data-table/head/sortable-th.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/components/data-table/head/sortable-th";

app/helpers/eval-meta.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/helpers/eval-meta";