lmb-1222: instead of providing three action do it in one and make it …

…an object, only one consumer has to be added to the component
lblod · Jan 22, 2025 · 587cd0d · 587cd0d
1 parent 09736f4
commit 587cd0d
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 52 deletions.
diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs
@@ -2,7 +2,7 @@
   <SemanticForms::Instance
     @show={{@isReadOnly}}
     @instanceId={{@instanceId}}
-    @form={{this.currentForm}}
+    @form={{this.formContext.formDefinition}}
     @onCancel={{@onCancel}}
     @onSave={{@onSave}}
     @formInitialized={{@formInitialized}}
@@ -11,7 +11,7 @@
     @saveTitle={{@saveTitle}}
   >
     {{#if this.editableFormsEnabled}}
-      {{#unless this.isReadOnly}}
+      {{#unless @isReadOnly}}
         <AuButton
           @skin="link"
           @icon="plus"
@@ -27,8 +27,8 @@
       <RdfInputFields::CrudCustomFieldModal
         @isCreating={{true}}
         @showModal={{this.showModal}}
-        @onCloseModal={{this.onFormUpdate}}
-        @form={{this.currentForm}}
+        @onCloseModal={{this.formContext.onFormUpdate}}
+        @form={{this.formContext.formDefinition}}
         @field={{@field}}
       />
     {{/if}}

diff --git a/app/components/editable-form.js b/app/components/editable-form.js
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 
@@ -38,19 +37,12 @@ export default class EditableFormComponent extends Component {
     return this.features.isEnabled('editable-forms');
   }
 
-  @provide('on-form-update')
-  @action
-  onFormUpdate() {
-    this.updateForm();
-  }
-
-  @provide('form-definition')
-  get formDefinition() {
-    return this.currentForm;
-  }
-
-  @provide('is-read-only')
-  get isReadOnly() {
-    return this.args.isReadOnly;
+  @provide('form-context')
+  get formContext() {
+    return {
+      onFormUpdate: () => this.updateForm(),
+      formDefinition: this.currentForm,
+      isReadOnly: this.args.isReadOnly,
+    };
   }
 }
diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js
@@ -18,8 +18,7 @@ import {
 } from 'frontend-lmb/utils/well-known-uris';
 
 export default class RdfInputFieldCrudCustomFieldModalComponent extends Component {
-  @consume('form-definition') formDefinition;
-  @consume('on-form-update') onFormUpdate;
+  @consume('form-context') formContext;
 
   @service store;
   @service toaster;
@@ -64,19 +63,22 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
 
   updateField = task(async () => {
     try {
-      await fetch(`/form-content/${this.formDefinition.id}/fields`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': JSON_API_TYPE,
-        },
-        body: JSON.stringify({
-          field: this.args.field.uri.value,
-          displayType: this.displayType.uri,
-          name: this.fieldName,
-          isRequired: !!this.isFieldRequired,
-        }),
-      });
-      this.onFormUpdate();
+      await fetch(
+        `/form-content/${this.formContext.formDefinition.id}/fields`,
+        {
+          method: 'PUT',
+          headers: {
+            'Content-Type': JSON_API_TYPE,
+          },
+          body: JSON.stringify({
+            field: this.args.field.uri.value,
+            displayType: this.displayType.uri,
+            name: this.fieldName,
+            isRequired: !!this.isFieldRequired,
+          }),
+        }
+      );
+      this.formContext.onFormUpdate();
     } catch (error) {
       showErrorToast(
         this.toaster,
@@ -89,7 +91,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
   createField = task(async () => {
     try {
       const result = await fetch(
-        `/form-content/${this.formDefinition.id}/fields`,
+        `/form-content/${this.formContext.formDefinition.id}/fields`,
         {
           method: 'POST',
           headers: {
@@ -106,8 +108,11 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
 
       const body = await result.json();
       const newFormId = body.id;
-      this.formReplacements.setReplacement(this.formDefinition.id, newFormId);
-      this.onFormUpdate();
+      this.formReplacements.setReplacement(
+        this.formContext.formDefinition.id,
+        newFormId
+      );
+      this.formContext.onFormUpdate();
     } catch (error) {
       showErrorToast(
         this.toaster,
@@ -145,7 +150,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
         formUri: this.args.form.uri,
       }),
     });
-    this.onFormUpdate();
+    this.formContext.onFormUpdate();
     this.isRemovingField = false;
   }
 
@@ -171,7 +176,11 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
     }
 
     const localStore = new ForkingStore();
-    localStore.parse(this.formDefinition.formTtl, SOURCE_GRAPH, 'text/turtle');
+    localStore.parse(
+      this.formContext.formDefinition.formTtl,
+      SOURCE_GRAPH,
+      'text/turtle'
+    );
     const libraryEntree = localStore.any(
       this.args.field.uri,
       PROV('wasDerivedFrom'),
@@ -185,7 +194,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen
   get libraryFieldOptions() {
     const forkingStore = new ForkingStore();
     forkingStore.parse(
-      this.formDefinition.formTtl,
+      this.formContext.formDefinition.formTtl,
       SOURCE_GRAPH,
       'text/turtle'
     );

diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs
@@ -2,7 +2,7 @@
   <div class="au-u-flex au-u-flex--between">
     <div class="flex-grow">
       <div class="au-u-flex au-u-flex--row">
-        {{#unless this.isReadOnly}}
+        {{#unless this.formContext.isReadOnly}}
           <AuLabel @required={{this.isRequired}}>{{this.title}}</AuLabel>
           <AuButton
             @skin="link-secondary"
@@ -29,7 +29,7 @@
         </div>
       </div>
     </div>
-    {{#unless this.isReadOnly}}
+    {{#unless this.formContext.isReadOnly}}
       <div class="au-u-flex au-u-flex--column au-u-flex--vertical-center">
         <AuButton
           @skin="naked"

diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js
@@ -10,9 +10,7 @@ import { JSON_API_TYPE } from 'frontend-lmb/utils/constants';
 import { ADRES_CUSTOM_DISPLAY_TYPE } from 'frontend-lmb/utils/well-known-uris';
 
 export default class RdfInputFieldsCustomFieldWrapperComponent extends Component {
-  @consume('on-form-update') onFormUpdate;
-  @consume('form-definition') formDefinition;
-  @consume('is-read-only') isReadOnly;
+  @consume('form-context') formContext;
 
   @tracked showModal;
 
@@ -22,14 +20,14 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component
 
   get isFieldReadOnly() {
     return (
-      this.isReadOnly &&
+      this.formContext.isReadOnly &&
       ![ADRES_CUSTOM_DISPLAY_TYPE].includes(this.args.field.displayType)
     );
   }
 
   moveField = task(async (direction) => {
     const result = await fetch(
-      `/form-content/${this.formDefinition.id}/fields/move`,
+      `/form-content/${this.formContext.formDefinition.id}/fields/move`,
       {
         method: 'POST',
         headers: {
@@ -44,7 +42,7 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component
     );
 
     if (result.ok) {
-      this.onFormUpdate();
+      this.formContext.onFormUpdate();
     }
   });
 

diff --git a/app/components/rdf-input-fields/custom-string-input.js b/app/components/rdf-input-fields/custom-string-input.js
diff --git a/app/components/read-only-field-for-display-type.hbs b/app/components/read-only-field-for-display-type.hbs
@@ -2,7 +2,7 @@
   {{#if this.value}}
     <div class="au-u-flex au-u-flex--column">
       <AuLabel class="au-c-description-label">
-        {{@field.label}}:
+        {{@field.label}}
       </AuLabel>
       <p class="au-c-description-value">{{this.value}}</p>
     </div>