Merge pull request #453 from lblod/karel/lmb-809-library-of-fields

library of fields
lblod · Jan 14, 2025 · e7c6d95 · e7c6d95
2 parents 441690a + 1658d8c
commit e7c6d95
Show file tree

Hide file tree

Showing 17 changed files with 313 additions and 30 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,33 @@ 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';
+import { ForkingStore } from '@lblod/ember-submission-form-fields';
+import { SOURCE_GRAPH } from 'frontend-lmb/utils/constants';
+import { PROV } from 'frontend-lmb/rdf/namespaces';
 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 +41,37 @@ export default class GenerateCustomFieldButtonComponent extends Component {
     return this.invalidName;
   }
 
+  get libraryFieldOptions() {
+    const forkingStore = new ForkingStore();
+    forkingStore.parse(this.args.form.formTtl, SOURCE_GRAPH, 'text/turtle');
+
+    const alreadyUsedLibraryEntries = forkingStore
+      .match(null, PROV('wasDerivedFrom'), null, SOURCE_GRAPH)
+      .map((triple) => triple.object.value);
+
+    return this.store
+      .findAll('library-entry', { include: 'display-type' })
+      .then((entries) => {
+        return [
+          this.customFieldEntry,
+          ...entries
+            .sortBy('id')
+            .reverse()
+            .filter((entry) => {
+              return (
+                entry.uri && alreadyUsedLibraryEntries.indexOf(entry.uri) < 0
+              );
+            }),
+        ];
+      });
+  }
+
+  get displayTypes() {
+    return this.store.findAll('display-type').then((entries) => {
+      return entries.sortBy('label');
+    });
+  }
+
   @action
   async onAddField() {
     this.showModal = true;
@@ -32,17 +83,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-date-input.hbs b/app/components/rdf-input-fields/custom-date-input.hbs
@@ -0,0 +1,19 @@
+<RdfInputFields::CustomFieldWrapper
+  @inline={{true}}
+  @field={{@field}}
+  @form={{@form}}
+  @formStore={{@formStore}}
+>
+  <RdfInputFields::RdfDateInput
+    @inTable={{true}}
+    @field={{@field}}
+    @form={{@form}}
+    @formStore={{@formStore}}
+    @graphs={{@graphs}}
+    @sourceNode={{@sourceNode}}
+    @forceShowErrors={{@forceShowErrors}}
+    @cacheConditionals={{@cacheConditionals}}
+    @show={{@show}}
+  />
+
+</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,27 +1,52 @@
 {{#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}}
+        @loadingMessage="Verwijderen"
+        {{on "click" this.onRemove}}
+      >
+        Verwijder
+      </AuButton>
     </div>
-    <AuButton
-      @skin="secondary"
-      @alert={{true}}
-      @icon="trash"
-      @loading={{this.removing}}
-      @loadingMessage="Verwijderen"
-      {{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}}
+        @loadingMessage="Verwijderen"
+        {{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-number-input.hbs b/app/components/rdf-input-fields/custom-number-input.hbs
@@ -0,0 +1,19 @@
+<RdfInputFields::CustomFieldWrapper
+  @inline={{true}}
+  @field={{@field}}
+  @form={{@form}}
+  @formStore={{@formStore}}
+>
+  <RdfInputFields::NumericalInput
+    @inTable={{true}}
+    @field={{@field}}
+    @form={{@form}}
+    @formStore={{@formStore}}
+    @graphs={{@graphs}}
+    @sourceNode={{@sourceNode}}
+    @forceShowErrors={{@forceShowErrors}}
+    @cacheConditionals={{@cacheConditionals}}
+    @show={{@show}}
+  />
+
+</RdfInputFields::CustomFieldWrapper>
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/components/rdf-input-fields/custom-text-input.hbs b/app/components/rdf-input-fields/custom-text-input.hbs
@@ -0,0 +1,19 @@
+<RdfInputFields::CustomFieldWrapper
+  @inline={{true}}
+  @field={{@field}}
+  @form={{@form}}
+  @formStore={{@formStore}}
+>
+  <RdfInputFields::TextArea
+    @inTable={{true}}
+    @field={{@field}}
+    @form={{@form}}
+    @formStore={{@formStore}}
+    @graphs={{@graphs}}
+    @sourceNode={{@sourceNode}}
+    @forceShowErrors={{@forceShowErrors}}
+    @cacheConditionals={{@cacheConditionals}}
+    @show={{@show}}
+  />
+
+</RdfInputFields::CustomFieldWrapper>
diff --git a/app/components/rdf-input-fields/rdf-date-input.hbs b/app/components/rdf-input-fields/rdf-date-input.hbs
@@ -1,9 +1,11 @@
-<AuLabel
-  for={{this.inputId}}
-  @error={{this.hasErrors}}
-  @warning={{this.hasWarnings}}
-  @required={{this.isRequired}}
->{{this.title}}</AuLabel>
+{{#unless @inTable}}
+  <AuLabel
+    for={{this.inputId}}
+    @error={{this.hasErrors}}
+    @warning={{this.hasWarnings}}
+    @required={{this.isRequired}}
+  >{{this.title}}</AuLabel>
+{{/unless}}
 <DateInput
   @id={{this.inputId}}
   @value={{this.date}}

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/rdf/namespaces.js b/app/rdf/namespaces.js
@@ -3,6 +3,7 @@ import { Namespace } from 'rdflib';
 export { MU, FORM, RDF, XSD, SKOS } from '@lblod/submission-form-helpers';
 
 export const EXT = new Namespace('http://mu.semte.ch/vocabularies/ext/');
+export const PROV = new Namespace('http://www.w3.org/ns/prov#');
 export const ORG = new Namespace('http://www.w3.org/ns/org#');
 export const MANDAAT = new Namespace('http://data.vlaanderen.be/ns/mandaat#');
 export const LMB = new Namespace('http://lblod.data.gift/vocabularies/lmb/');