allow using a library field when adding a new field to the form

lblod · Jan 7, 2025 · 960760f · 960760f
1 parent 662c5ec
commit 960760f
Show file tree

Hide file tree

Showing 12 changed files with 210 additions and 23 deletions.
diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs
@@ -25,6 +25,44 @@
         {{on "input" this.updateName}}
       />
     </div>
+    <div>
+      <AuLabel @required={{true}} for="library-entry">Uit bibliotheek</AuLabel>
+      <PowerSelect
+        @allowClear={{false}}
+        @renderInPlace={{false}}
+        @searchEnabled={{true}}
+        @loadingMessage="Aan het laden..."
+        @noMatchesMessage="Geen velden gevonden"
+        @searchMessage="Typ om te zoeken"
+        @searchField="name"
+        @options={{this.libraryFieldOptions}}
+        @selected={{this.selectedLibraryFieldType}}
+        @onChange={{this.selectLibraryFieldType}}
+        id="library-entry"
+        as |selected|
+      >
+        {{selected.name}}
+      </PowerSelect>
+    </div>
+    <div>
+      <AuLabel @required={{true}} for="display-type">Type</AuLabel>
+      <PowerSelect
+        @allowClear={{false}}
+        @renderInPlace={{false}}
+        @searchEnabled={{true}}
+        @loadingMessage="Aan het laden..."
+        @noMatchesMessage="Geen types gevonden"
+        @searchMessage="Typ om te zoeken"
+        @searchField="label"
+        @options={{this.displayTypes}}
+        @selected={{this.selectedDisplayType}}
+        @onChange={{this.selectDisplayType}}
+        id="display-type"
+        as |selected|
+      >
+        {{selected.label}}
+      </PowerSelect>
+    </div>
     <AuToolbar class="au-u-margin-top" as |Group|>
       <Group>
         <AuButtonGroup>

diff --git a/app/components/generate-custom-field-button.js b/app/components/generate-custom-field-button.js
@@ -5,13 +5,31 @@ import { tracked } from '@glimmer/tracking';
 import { JSON_API_TYPE } from 'frontend-lmb/utils/constants';
 import { showErrorToast } from 'frontend-lmb/utils/toasts';
 
+import { TEXT_CUSTOM_DISPLAY_TYPE_ID } from 'frontend-lmb/utils/well-known-ids';
+
 export default class GenerateCustomFieldButtonComponent extends Component {
   @service formReplacements;
+  @service store;
   @service toaster;
 
   @tracked showModal = false;
   @tracked loading = false;
   @tracked fieldName = '';
+  customFieldEntry = this.store.createRecord('library-entry', {
+    name: 'Eigen veld',
+  });
+  @tracked selectedLibraryFieldType = this.customFieldEntry;
+  @tracked selectedDisplayType = null;
+
+  constructor() {
+    super(...arguments);
+    this.displayTypes.then((displayTypes) => {
+      this.selectedDisplayType = displayTypes.findBy(
+        'id',
+        TEXT_CUSTOM_DISPLAY_TYPE_ID
+      );
+    });
+  }
 
   get invalidName() {
     return !this.fieldName || this.fieldName.trim().length < 1;
@@ -21,6 +39,20 @@ export default class GenerateCustomFieldButtonComponent extends Component {
     return this.invalidName;
   }
 
+  get libraryFieldOptions() {
+    return this.store
+      .findAll('library-entry', { include: 'display-type' })
+      .then((entries) => {
+        return entries.sortBy('id').reverse();
+      });
+  }
+
+  get displayTypes() {
+    return this.store.findAll('display-type').then((entries) => {
+      return entries.sortBy('label');
+    });
+  }
+
   @action
   async onAddField() {
     this.showModal = true;
@@ -32,17 +64,32 @@ export default class GenerateCustomFieldButtonComponent extends Component {
     this.showModal = false;
   }
 
+  @action
+  selectLibraryFieldType(libraryEntry) {
+    this.selectedLibraryFieldType = libraryEntry;
+    this.displayTypes.then((types) => {
+      this.selectedDisplayType =
+        types.findBy('uri', libraryEntry.get('displayType.uri')) ||
+        types.findBy('id', TEXT_CUSTOM_DISPLAY_TYPE_ID);
+    });
+  }
+
+  @action
+  selectDisplayType(displayType) {
+    this.selectedDisplayType = displayType;
+  }
+
   @action async onSaveField() {
+    this.loading = true;
     try {
-      this.loading = true;
       const result = await fetch(`/form-content/${this.args.form.id}/fields`, {
         method: 'POST',
         headers: {
           'Content-Type': JSON_API_TYPE,
         },
         body: JSON.stringify({
-          displayType:
-            'http://lblod.data.gift/display-types/lmb/custom-string-input',
+          displayType: this.selectedDisplayType.uri,
+          libraryEntryUri: this.selectedLibraryFieldType.uri,
           order: 9000,
           name: this.fieldName,
         }),

diff --git a/app/components/rdf-input-fields/custom-address-input.hbs b/app/components/rdf-input-fields/custom-address-input.hbs
@@ -0,0 +1,19 @@
+<RdfInputFields::CustomFieldWrapper
+  @field={{@field}}
+  @form={{@form}}
+  @formStore={{@formStore}}
+>
+  <div class="au-o-box au-u-background-gray-100 au-u-margin-top-tiny">
+    <RdfInputFields::AddressSelector
+      @inTable={{true}}
+      @field={{@field}}
+      @form={{@form}}
+      @formStore={{@formStore}}
+      @graphs={{@graphs}}
+      @sourceNode={{@sourceNode}}
+      @forceShowErrors={{@forceShowErrors}}
+      @cacheConditionals={{@cacheConditionals}}
+      @show={{@show}}
+    />
+  </div>
+</RdfInputFields::CustomFieldWrapper>
diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs
@@ -1,26 +1,50 @@
 {{#unless this.removed}}
-  <AuLabel
-    for={{this.inputId}}
-    @error={{this.hasErrors}}
-    @warning={{this.hasWarnings}}
-    @required={{this.isRequired}}
-  >{{this.title}}</AuLabel>
-  <div
-    class="au-u-flex au-u-flex--between au-u-flex--vertical-start au-u-flex--spaced-tiny"
-  >
-    <div class="flex-grow">
-      {{yield}}
+  {{#if @inline}}
+    <AuLabel
+      for={{this.inputId}}
+      @error={{this.hasErrors}}
+      @warning={{this.hasWarnings}}
+      @required={{this.isRequired}}
+    >{{this.title}}</AuLabel>
+    <div
+      class="au-u-flex au-u-flex--between au-u-flex--vertical-start au-u-flex--spaced-tiny"
+    >
+      <div class="flex-grow">
+        {{yield}}
+      </div>
+      <AuButton
+        @skin="secondary"
+        @alert={{true}}
+        @icon="trash"
+        @loading={{this.removing}}
+        {{on "click" this.onRemove}}
+      >
+        Verwijder
+      </AuButton>
     </div>
-    <AuButton
-      @skin="secondary"
-      @alert={{true}}
-      @icon="trash"
-      @loading={{this.removing}}
-      {{on "click" this.onRemove}}
+  {{else}}
+    <div
+      class="au-u-flex au-u-flex--between au-u-flex--vertical-center au-u-flex--spaced-tiny"
     >
-      Verwijder
-    </AuButton>
-  </div>
+      <AuLabel
+        class="flex-grow au-u-margin-bottom-none"
+        for={{this.inputId}}
+        @error={{this.hasErrors}}
+        @warning={{this.hasWarnings}}
+        @required={{this.isRequired}}
+      >{{this.title}}</AuLabel>
+      <AuButton
+        @skin="secondary"
+        @alert={{true}}
+        @icon="trash"
+        @loading={{this.removing}}
+        {{on "click" this.onRemove}}
+      >
+        Verwijder
+      </AuButton>
+    </div>
+    {{yield}}
+  {{/if}}
   {{#each this.errors as |error|}}
     <AuHelpText @error={{true}}>{{error.resultMessage}}</AuHelpText>
   {{/each}}

diff --git a/app/components/rdf-input-fields/custom-string-input.hbs b/app/components/rdf-input-fields/custom-string-input.hbs
@@ -1,4 +1,5 @@
 <RdfInputFields::CustomFieldWrapper
+  @inline={{true}}
   @field={{@field}}
   @form={{@form}}
   @formStore={{@formStore}}

diff --git a/app/config/custom-inflector-rules.js b/app/config/custom-inflector-rules.js
@@ -12,6 +12,7 @@ inflector.plural(/ief$/, 'ieven');
 inflector.plural(/or$/, 'oren');
 inflector.plural(/ie$/, 'ies');
 inflector.plural(/eid$/, 'eden');
+inflector.plural(/y$/, 'ies');
 inflector.plural(/aa([a-z])$/, 'a$1en');
 inflector.plural(/uu([a-z])$/, 'u$1en');
 inflector.plural(/oo([a-z])$/, 'o$1en');
@@ -37,6 +38,7 @@ inflector.irregular('rechtsgrond-besluit', 'rechtsgronden-besluit');
 inflector.irregular('editor-document', 'editor-documents');
 inflector.irregular('editor-document-status', 'editor-document-statuses');
 inflector.irregular('export', 'exports');
+inflector.irregular('library-entry', 'library-entries');
 inflector.irregular('account', 'accounts');
 inflector.irregular('identificator', 'identificatoren');
 inflector.irregular('file', 'files');

diff --git a/app/models/display-type.js b/app/models/display-type.js
@@ -0,0 +1,6 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class DisplayTypeModel extends Model {
+  @attr label;
+  @attr uri;
+}
diff --git a/app/models/library-entry.js b/app/models/library-entry.js
@@ -0,0 +1,14 @@
+import Model, { attr, belongsTo } from '@ember-data/model';
+
+export default class LibraryEntryModel extends Model {
+  @attr uri;
+  @attr name;
+  @attr path;
+  @attr options;
+
+  @belongsTo('displayType', {
+    async: true,
+    inverse: null,
+  })
+  displayType;
+}
diff --git a/app/utils/register-form-fields.js b/app/utils/register-form-fields.js
@@ -19,6 +19,7 @@ import RdfDateInputComponent from 'frontend-lmb/components/rdf-input-fields/rdf-
 import RDFGeboorteInput from 'frontend-lmb/components/rdf-input-fields/geboorte-input';
 import RDFGenderSelector from 'frontend-lmb/components/rdf-input-fields/gender-selector';
 import RdfInputFieldsCustomStringInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-string-input';
+import RdfInputFieldsCustomAddressInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-address-input';
 
 export const registerCustomFormFields = () => {
   registerFormFields([
@@ -115,5 +116,10 @@ export const registerCustomFormFields = () => {
         'http://lblod.data.gift/display-types/lmb/custom-string-input',
       edit: RdfInputFieldsCustomStringInputComponent,
     },
+    {
+      displayType:
+        'http://lblod.data.gift/display-types/lmb/custom-address-input',
+      edit: RdfInputFieldsCustomAddressInputComponent,
+    },
   ]);
 };
diff --git a/app/utils/well-known-ids.js b/app/utils/well-known-ids.js
@@ -37,3 +37,5 @@ export const MANDAAT_TOEGEVOEGDE_SCHEPEN_CODE_ID =
   '59a90e03-4f22-4bb9-8c91-132618db4b38';
 export const MANDAAT_LID_RMW_CODE_ID = '5ab0e9b8a3b2ca7c5e000015';
 export const MANDAAT_LID_VAST_BUREAU_CODE_ID = '5ab0e9b8a3b2ca7c5e000017';
+export const TEXT_CUSTOM_DISPLAY_TYPE_ID =
+  '220427c5-65c7-4be6-b84a-fc7401b465ec';
diff --git a/tests/unit/models/display-type-test.js b/tests/unit/models/display-type-test.js
@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+
+import { setupTest } from 'frontend-lmb/tests/helpers';
+
+module('Unit | Model | display type', function (hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function (assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('display-type', {});
+    assert.ok(model);
+  });
+});
diff --git a/tests/unit/models/library-entry-test.js b/tests/unit/models/library-entry-test.js
@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+
+import { setupTest } from 'frontend-lmb/tests/helpers';
+
+module('Unit | Model | library entry', function (hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function (assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('library-entry', {});
+    assert.ok(model);
+  });
+});