feat(emeisOptions): passing options as a function

- this enable to pass options for meta-fields of type choice as static list or as a function

README.md

@@ -123,6 +123,12 @@ export default class EmeisOptionsService extends Service {
       {
         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
+          {
+            value: "option-1",
+            label: "Option one"
+          }
+        ],
         type: "choice",
         visible: () => true,
         readOnly: false
@@ -134,12 +140,16 @@ export default class EmeisOptionsService extends Service {
 
 _Watch out_ - the translation key has to be present in your local translation files.
 
-There are special options available for `type` and `visible` properties.
+There are special options available for `options`, `type` and `visible` properties.
 
 #### **type** - meta field
 
 Defines the type of the output component and can either be a _text_ or a _choice_.
 
+#### **options** - meta field
+
+In combination with `type:"choice"` the options can be a list of options (`{value, label}`) or a (async) function which resolves to a list of options.
+
 #### **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.

addon/components/meta-field.hbs

@@ -0,0 +1,32 @@
+{{#if this.visible}}
+  <EditForm::Element @label={{optional-translate @field.label}}>
+    {{#if (eq @field.type "choice")}}
+      {{#if this.options.isRunning}}
+        <UkSpinner @ratio="1" />
+      {{else}}
+        <PowerSelect
+          @disabled={{this.disabled}}
+          @options={{this.options.value}}
+          @selected={{find-by "value" (get @model.metainfo @field.slug) this.options.value}}
+          @onChange={{fn this.updateMetaField @field @model}}
+          @placeholder={{t @field.label}}
+          @allowClear={{true}}
+          @renderInPlace={{true}}
+          as |option|
+        >
+          {{optional-translate option.label}}
+        </PowerSelect>
+      {{/if}}
+    {{/if}}
+    {{#if (eq @field.type "text")}}
+      <input
+        data-test-meta-field-text={{@field.slug}}
+        class="uk-input"
+        type="text"
+        value={{get @model.metainfo @field.slug}}
+        disabled={{this.disabled}}
+        {{on "input" (fn this.updateMetaField @field @model)}}
+      >
+    {{/if}}
+  </EditForm::Element>
+{{/if}}

addon/components/meta-field.js

@@ -0,0 +1,50 @@
+import { assert } from "@ember/debug";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { task } from "ember-concurrency";
+import { useTask } from "ember-resources";
+
+export default class MetaFieldComponent extends Component {
+  @service intl;
+
+  constructor(...args) {
+    super(...args);
+
+    assert("Must pass a valid field argument", this.args.field);
+    assert("Must pass a valid model argument", this.args.model);
+  }
+
+  evaluateProperty(expression) {
+    if (typeof expression === "boolean") return expression;
+    if (typeof expression === "function") return expression(this.args.model);
+    if (typeof expression === "string") return expression === "true";
+    return false;
+  }
+
+  get visible() {
+    return this.evaluateProperty(this.args.field.visible);
+  }
+
+  get disabled() {
+    return this.evaluateProperty(this.args.field.readOnly);
+  }
+
+  options = useTask(this, this.fetchOptions, () => [this.args.field.options]);
+
+  @task
+  *fetchOptions(options) {
+    // options may be a (asnyc) function or a complex property
+    if (typeof options !== "function") {
+      return options;
+    }
+    return yield options();
+  }
+
+  @action
+  updateMetaField(field, model, optionOrEvent) {
+    const value = optionOrEvent?.target?.value ?? optionOrEvent?.value;
+    model.metainfo = { ...model.metainfo, [field.slug]: value };
+    model.notifyPropertyChange("metainfo");
+  }
+}

addon/templates/scopes/edit.hbs

@@ -38,10 +38,10 @@
           </RelationshipSelect>
         </EditForm::Element>
 
-        <MetaFields
-          @model={{@model}}
-          @fields={{this.metaFields}}
-        />
+        {{#each this.metaFields as |field|}}
+          <MetaField @field={{field}} @model={{@model}} />
+        {{/each}}
+
       </EditForm>
     </div>
     <div class="uk-width-1-2@xl">

addon/templates/users/edit.hbs

@@ -131,10 +131,9 @@
           </EditForm::Element>
         {{/if}}
 
-        <MetaFields
-          @model={{@model}}
-          @fields={{this.metaFields}}
-        />
+        {{#each this.metaFields as |field|}}
+          <MetaField @field={{field}} @model={{@model}} />
+        {{/each}}
 
         <EditForm::Element @label={{t "emeis.users.headings.isActive"}}>
           <input

app/components/meta-field.js

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

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

@@ -1,4 +1,5 @@
 import Service from "@ember/service";
+import { timeout } from "ember-concurrency";
 
 import TestButtonComponent from "../components/dummy-button/dummy-button"; // template and component file must have the same name (if not template only)
 
@@ -25,26 +26,46 @@ export default class EmeisOptionsService extends Service {
         visible: true,
         readOnly: false,
       },
+      // {
+      //   slug: "user-meta-example-2",
+      //   label: "emeis.options.meta.user.example",
+      //   type: "choice", // initially supported: "text", "choice"
+      //   options: [
+      //     {
+      //       value: "Option 1",
+      //       label: "Option One",
+      //     },
+      //     {
+      //       value: "Option 2",
+      //       label: "Option Two",
+      //     },
+      //   ],
+      //   visible: true,
+      //   readOnly: false,
+      // },
     ],
     scope: [
       {
         slug: "meta-example",
         label: "emeis.options.meta.scope.meta-example",
         type: "choice", // initially supported: "text", "choice"
-        options: [
-          {
-            value: "Option 1",
-            label: "emeis.options.meta.scope.options.label-1", // again a ember-intl translation key
-          },
-          {
-            value: "Option 2",
-            label: "emeis.options.meta.scope.options.label-2",
-          },
-          {
-            value: "Option 3",
-            label: "emeis.options.meta.scope.options.label-3",
-          },
-        ],
+        options: async () => {
+          await timeout(2000);
+          return [
+            {
+              value: "Option 1",
+              label: "emeis.options.meta.scope.options.label-1", // again a ember-intl translation key
+            },
+            {
+              value: "Option 2",
+              label: "emeis.options.meta.scope.options.label-2",
+            },
+            {
+              value: "Option 3",
+              label: "emeis.options.meta.scope.options.label-3",
+            },
+          ];
+        },
         visible: () => true, // boolean or function which evaluates to a boolean value
         readOnly: false,
       },