feat: extract meta fields rendering into a component (projectcaluma#277)

This also allows usage of meta fields under users

Co-authored-by: Akanksh Saxena <[email protected]>

addon/components/meta-fields.hbs

@@ -0,0 +1,27 @@
+{{#each @fields as |field|}}
+  {{#if field.visible}}
+    <EditForm::Element @label={{get field.label this.intl.primaryLocale}}>
+      {{#if (eq field.type "choice")}}
+        <PowerSelect
+          @disabled={{field.readOnly}}
+          @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) "..."}}
+          as |option|
+        >
+          {{get option.label this.intl.primaryLocale}}
+        </PowerSelect>
+      {{/if}}
+      {{#if (eq field.type "text")}}
+        <input
+            class="uk-input"
+            type="text"
+            value={{get @model.meta field.slug}}
+            disabled={{field.readOnly}}
+            {{on "input" (fn this.updateMetaField field @model)}}
+        >
+      {{/if}}
+    </EditForm::Element>
+  {{/if}}
+{{/each}}

addon/components/meta-fields.js

@@ -0,0 +1,14 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+
+export default class EditFormComponent extends Component {
+  @service intl;
+
+  @action
+  updateMetaField(field, model, optionOrEvent) {
+    const value = optionOrEvent.target?.value ?? optionOrEvent.value;
+    model.meta = { ...model.meta, [field.slug]: value };
+    model.notifyPropertyChange("meta");
+  }
+}

addon/controllers/scopes/edit/index.js

@@ -7,7 +7,7 @@ export default class ScopesEditIndexController extends Controller {
   @service intl;
 
   get metaFields() {
-    return this.emeisOptions.metaFields.scope;
+    return this.emeisOptions.metaFields?.scope;
   }
 
   @action
@@ -17,11 +17,4 @@ export default class ScopesEditIndexController extends Controller {
 
     return model;
   }
-
-  @action
-  updateMetaField(field, model, optionOrEvent) {
-    const value = optionOrEvent.target?.value ?? optionOrEvent.value;
-    model.meta = { ...model.meta, [field.slug]: value };
-    model.notifyPropertyChange("meta");
-  }
 }

addon/controllers/users/edit/index.js

@@ -8,6 +8,10 @@ export default class UsersEditIndexController extends Controller {
   @service intl;
   @service emeisOptions;
 
+  get metaFields() {
+    return this.emeisOptions.metaFields?.user;
+  }
+
   @action
   updateModel(model, formElements) {
     model.firstName = formElements.firstName.value;

addon/templates/scopes/edit/index.hbs

@@ -35,30 +35,8 @@
     </RelationshipSelect>
   </EditForm::Element>
 
-  {{#each this.metaFields as |field|}}
-    {{#if field.visible}}
-      <EditForm::Element @label={{get field.label this.intl.primaryLocale}}>
-        {{#if (eq field.type "choice")}}
-          <PowerSelect
-            @disabled={{field.readOnly}}
-            @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) "..."}}
-            as |option|
-          >
-            {{get option.label this.intl.primaryLocale}}
-          </PowerSelect>
-        {{else}}
-          <input
-            class="uk-input"
-            type="text"
-            value={{get @model.meta field.slug}}
-            disabled={{field.readOnly}}
-            {{on "input" (fn this.updateMetaField field @model)}}
-          >
-        {{/if}}
-      </EditForm::Element>
-    {{/if}}
-  {{/each}}
+  <MetaFields
+    @model={{@model}}
+    @fields={{this.metaFields}}
+  />
 </EditForm>

addon/templates/users/edit/index.hbs

@@ -125,6 +125,11 @@
     </EditForm::Element>
   {{/if}}
 
+  <MetaFields
+    @model={{@model}}
+    @fields={{this.metaFields}}
+  />
+
   <EditForm::Element @label={{t "emeis.users.headings.isActive"}}>
     <input
       class="uk-checkbox"

app/components/meta-fields.js

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

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

@@ -9,6 +9,18 @@ export default class EmeisOptionsService extends Service {
   // };
   // navigationEntries = ["users", "scopes"];
   metaFields = {
+    user: [
+      {
+        slug: "user-meta-example",
+        label: {
+          en: "Example for custom text field",
+          de: "Beispiel für benutzerdefiniertes Textfeld",
+        },
+        type: "text",
+        visible: true,
+        readOnly: false,
+      },
+    ],
     scope: [
       {
         slug: "meta-example",

tests/integration/components/meta-fields-test.js

@@ -0,0 +1,14 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | meta-fields", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    await render(hbs`<MetaFields />`);
+
+    assert.dom(this.element).hasText("");
+  });
+});