Merge pull request #458 from lblod/lmb-181-add-more-displaytypes

Lmb 1226 | can mark custom field required
lblod · Jan 24, 2025 · 01f4d46 · 01f4d46
2 parents caf4dd1 + 95c46fb
commit 01f4d46
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 33 deletions.
diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs
@@ -27,6 +27,7 @@
           @onCloseModal={{this.onCloseEditModal}}
           @form={{this.currentForm}}
           @field={{@field}}
+          @showModal={{this.showEditModal}}
         />
       {{/if}}
     {{/if}}

diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs
@@ -1,5 +1,5 @@
 <AuModal
-  @modalOpen={{true}}
+  @modalOpen={{@showModal}}
   @closeModal={{this.closeModal}}
   @closable={{true}}
   @title={{this.title}}
@@ -71,6 +71,13 @@
             {{selected.label}}
           </PowerSelect>
         </AuFormRow>
+        <AuFormRow>
+          <AuToggleSwitch
+            @disabled={{@show}}
+            @checked={{this.isFieldRequired}}
+            @onChange={{this.toggleIsRequired}}
+          >Maak veld verplicht</AuToggleSwitch>
+        </AuFormRow>
       </form>
     {{/if}}
   </:body>

diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js
@@ -25,6 +25,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
   @service formReplacements;
 
   @tracked isRemovingField;
+  @tracked isFieldRequired;
   @tracked wantsToRemove;
 
   customFieldEntry = this.store.createRecord('library-entry', {
@@ -45,7 +46,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
       this.fieldName = label;
       withValue = displayType;
     }
-
+    this.isFieldRequired = this.args.isRequiredField ?? false;
     this.displayTypes.then((displayTypes) => {
       this.displayType = displayTypes.findBy('uri', withValue);
     });
@@ -60,6 +61,11 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
     this.fieldName = event.target?.value;
   }
 
+  @action
+  toggleIsRequired() {
+    this.isFieldRequired = !this.isFieldRequired;
+  }
+
   updateField = task(async () => {
     try {
       await fetch(`/form-content/${this.formDefinition.id}/fields`, {
@@ -71,6 +77,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
           field: this.args.field.uri.value,
           displayType: this.displayType.uri,
           name: this.fieldName,
+          isRequired: !!this.isFieldRequired,
         }),
       });
       this.onFormUpdate();
@@ -96,6 +103,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
             displayType: this.displayType.uri,
             libraryEntryUri: this.libraryFieldType.uri,
             name: this.fieldName,
+            isRequired: !!this.isFieldRequired,
           }),
         }
       );
@@ -226,15 +234,11 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
       return this.hasValidFieldName;
     }
 
-    if (this.canSelectTypeForEntry) {
-      return (
-        this.hasValidFieldName &&
-        (this.fieldName !== this.args.field.label ||
-          this.displayType?.uri !== this.args.field.displayType)
-      );
-    }
-
-    return this.hasValidFieldName && this.fieldName !== this.args.field.label;
+    return (
+      (this.hasValidFieldName && this.fieldName !== this.args.field.label) ||
+      this.displayType.uri !== this.args.field.displayType ||
+      this.isFieldRequired != this.args.isRequiredField
+    );
   }
 
   get hasValidFieldName() {

diff --git a/app/components/rdf-input-fields/custom-address-input.hbs b/app/components/rdf-input-fields/custom-address-input.hbs
@@ -1,6 +1,7 @@
 <RdfInputFields::CustomFieldWrapper
   @field={{@field}}
   @form={{@form}}
+  @graphs={{@graphs}}
   @formStore={{@formStore}}
 >
   <div class="au-o-box au-u-background-gray-100 au-u-margin-top-tiny">

diff --git a/app/components/rdf-input-fields/custom-date-input.hbs b/app/components/rdf-input-fields/custom-date-input.hbs
@@ -2,6 +2,7 @@
   @inline={{true}}
   @field={{@field}}
   @form={{@form}}
+  @graphs={{@graphs}}
   @formStore={{@formStore}}
 >
   <RdfInputFields::RdfDateInput

diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs
@@ -2,12 +2,7 @@
   <div class="au-u-flex au-u-flex--between">
     <div class="flex-grow">
       <div class="au-u-flex au-u-flex--row">
-        <AuLabel
-          for={{this.inputId}}
-          @error={{this.hasErrors}}
-          @warning={{this.hasWarnings}}
-          @required={{this.isRequired}}
-        >{{this.title}}</AuLabel>
+        <AuLabel @required={{this.isRequired}}>{{this.title}}</AuLabel>
         <AuButton
           @skin="link-secondary"
           @icon="pencil"
@@ -44,21 +39,13 @@
       </AuButton>
     </div>
   </div>
-
-  {{#each this.errors as |error|}}
-    <AuHelpText @error={{true}}>{{error.resultMessage}}</AuHelpText>
-  {{/each}}
-
-  {{#each this.warnings as |warning|}}
-    <AuHelpText @warning={{true}}>{{warning.resultMessage}}</AuHelpText>
-  {{/each}}
 {{/unless}}
 
-{{#if this.showModal}}
-  <RdfInputFields::CrudCustomFieldModal
-    @isCreating={{false}}
-    @onCloseModal={{fn (mut this.showModal) false}}
-    @form={{@form}}
-    @field={{@field}}
-  />
-{{/if}}
+<RdfInputFields::CrudCustomFieldModal
+  @isCreating={{false}}
+  @showModal={{this.showModal}}
+  @onCloseModal={{fn (mut this.showModal) false}}
+  @form={{@form}}
+  @field={{@field}}
+  @isRequiredField={{this.isRequired}}
+/>
diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js
@@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
 
 import { consume } from 'ember-provide-consume-context';
 import { task } from 'ember-concurrency';
+import { validationsForFieldWithType } from '@lblod/submission-form-helpers';
 
 import { JSON_API_TYPE } from 'frontend-lmb/utils/constants';
 
@@ -37,4 +38,33 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component
       this.onFormUpdate();
     }
   });
+
+  // From ember-submission-form-fields component: input-field.js
+  // We cannot access these properties as they are in the component itself and this is just a wrapper
+  get isRequired() {
+    return (
+      !this.args.show &&
+      this.constraints.some(
+        (constraint) =>
+          constraint.type.value ===
+          'http://lblod.data.gift/vocabularies/forms/RequiredConstraint'
+      )
+    );
+  }
+
+  get constraints() {
+    return validationsForFieldWithType(this.args.field.uri, this.storeOptions);
+  }
+
+  get storeOptions() {
+    return {
+      formGraph: this.args.graphs.formGraph,
+      sourceGraph: this.args.graphs.sourceGraph,
+      metaGraph: this.args.graphs.metaGraph,
+      sourceNode: this.args.sourceNode,
+      store: this.args.formStore,
+      path: this.args.field.rdflibPath,
+      scope: this.args.field.rdflibScope,
+    };
+  }
 }
diff --git a/app/components/rdf-input-fields/custom-number-input.hbs b/app/components/rdf-input-fields/custom-number-input.hbs
@@ -2,6 +2,7 @@
   @inline={{true}}
   @field={{@field}}
   @form={{@form}}
+  @graphs={{@graphs}}
   @formStore={{@formStore}}
 >
   <RdfInputFields::NumericalInput

diff --git a/app/components/rdf-input-fields/custom-string-input.hbs b/app/components/rdf-input-fields/custom-string-input.hbs
@@ -2,6 +2,7 @@
   @inline={{true}}
   @field={{@field}}
   @form={{@form}}
+  @graphs={{@graphs}}
   @formStore={{@formStore}}
 >
   <RdfInputFields::Input

diff --git a/app/components/rdf-input-fields/custom-text-input.hbs b/app/components/rdf-input-fields/custom-text-input.hbs
@@ -2,6 +2,7 @@
   @inline={{true}}
   @field={{@field}}
   @form={{@form}}
+  @graphs={{@graphs}}
   @formStore={{@formStore}}
 >
   <RdfInputFields::TextArea

diff --git a/app/utils/well-known-uris.js b/app/utils/well-known-uris.js
@@ -101,6 +101,8 @@ export const KANDIDATENLIJST_KAMER_VOLKSVERTEGENWOORDIGING =
 
 export const TEXT_CUSTOM_DISPLAY_TYPE =
   'http://lblod.data.gift/display-types/lmb/custom-string-input';
+export const ADRES_CUSTOM_DISPLAY_TYPE =
+  'http://lblod.data.gift/display-types/lmb/custom-address-input';
 
 export const LIBRARY_ENTREES = [
   'http://data.lblod.info/id/lmb/form-library-entries/095d1329-a9fa-4d72-8c49-eb52aaf893de', // Verblijfsplaats