Lmb 1222 | read only custom form view

app/components/editable-form.hbs

@@ -1,7 +1,8 @@
 {{#unless this.loading}}
   <SemanticForms::Instance
+    @show={{@isReadOnly}}
     @instanceId={{@instanceId}}
-    @form={{this.currentForm}}
+    @form={{this.formContext.formDefinition}}
     @onCancel={{@onCancel}}
     @onSave={{@onSave}}
     @formInitialized={{@formInitialized}}
@@ -10,26 +11,26 @@
     @saveTitle={{@saveTitle}}
   >
     {{#if this.editableFormsEnabled}}
-      <AuButton
-        @skin="link"
-        @icon="plus"
-        {{on "click" (fn (mut this.showEditModal) true)}}
-        class="au-u-padding-left-none au-u-margin-bottom"
-      >
-        Voeg een veld toe
-      </AuButton>
+      {{#unless @isReadOnly}}
+        <AuButton
+          @skin="link"
+          @icon="plus"
+          {{on "click" (fn (mut this.showEditModal) true)}}
+          class="au-u-padding-left-none au-u-margin-bottom"
+        >
+          Voeg een veld toe
+        </AuButton>
+      {{/unless}}
 
       {{yield}}
 
-      {{#if this.showEditModal}}
-        <RdfInputFields::CrudCustomFieldModal
-          @isCreating={{true}}
-          @onCloseModal={{this.onCloseEditModal}}
-          @form={{this.currentForm}}
-          @field={{@field}}
-          @showModal={{this.showEditModal}}
-        />
-      {{/if}}
+      <RdfInputFields::CrudCustomFieldModal
+        @isCreating={{true}}
+        @showModal={{this.showEditModal}}
+        @onCloseModal={{this.formContext.onFormUpdate}}
+        @form={{this.formContext.formDefinition}}
+        @field={{@field}}
+      />
     {{/if}}
     {{yield}}
   </SemanticForms::Instance>

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,20 +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;
-  }
-
-  @action
-  onCloseEditModal() {
-    this.showEditModal = false;
-    this.onFormUpdate();
+  @provide('form-context')
+  get formContext() {
+    return {
+      onFormUpdate: () => this.updateForm(),
+      formDefinition: this.currentForm,
+      isReadOnly: this.args.isReadOnly,
+    };
   }
 }

app/components/mandatarissen/mandataris-extra-info-card.hbs

@@ -21,16 +21,31 @@
 
 <div class="au-o-box au-u-background-gray-100">
   <div class="au-o-grid au-o-grid--small">
-    {{#if this.hasBeleidsdomeinen}}
-      <div class="au-o-grid__item au-u-5-6">
-        <div class="au-c-description-label"><div>Beleidsdomein(en)</div></div>
-        <div class="au-c-description-value">{{await
-            this.formattedBeleidsdomein
-          }}
-        </div>
-      </div>
+    {{#if this.onSave.isRunning}}
+      <AuLabel for="input" class="skeleton-label" />
+      <p class="skeleton-text au-u-margin-top"></p>
     {{else}}
-      Dit mandaat heeft geen bijkomende informatie.
+      {{#if (and this.editableFormsEnabled (not this.isSaving))}}
+        <EditableForm
+          @isReadOnly={{true}}
+          @instanceId={{@mandataris.id}}
+          @form={{@form}}
+          @formInitialized={{fn (mut this.formInitialized) true}}
+        />
+      {{else}}
+        {{#if this.hasBeleidsdomeinen}}
+          <div class="au-o-grid__item au-u-5-6">
+            <div class="au-c-description-label"><div
+              >Beleidsdomein(en)</div></div>
+            <div class="au-c-description-value">{{await
+                this.formattedBeleidsdomein
+              }}
+            </div>
+          </div>
+        {{else}}
+          Dit mandaat heeft geen bijkomende informatie.
+        {{/if}}
+      {{/if}}
     {{/if}}
   </div>
 </div>
@@ -45,7 +60,7 @@
     <EditableForm
       @instanceId={{@mandataris.id}}
       @form={{@form}}
-      @onCancel={{this.toggleModal}}
+      @onCancel={{this.onSave}}
       @onSave={{this.onSave}}
       @formInitialized={{fn (mut this.formInitialized) true}}
       @customHistoryMessage={{true}}

app/components/mandatarissen/mandataris-extra-info-card.js

@@ -4,11 +4,17 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 
+import { RESOURCE_CACHE_TIMEOUT } from 'frontend-lmb/utils/constants';
+
+import { timeout } from 'ember-concurrency';
+
 export default class MandatarisExtraInfoCardComponent extends Component {
   @service router;
+  @service features;
 
   @tracked isModalActive = false;
   @tracked formInitialized;
+  @tracked isSaving;
 
   get formattedBeleidsdomein() {
     const beleidsdomeinenPromise = this.args.mandataris.beleidsdomein;
@@ -35,6 +41,10 @@ export default class MandatarisExtraInfoCardComponent extends Component {
     }
   }
 
+  get editableFormsEnabled() {
+    return this.features.isEnabled('editable-forms');
+  }
+
   @action
   toggleModal() {
     if (this.isModalActive) {
@@ -45,9 +55,12 @@ export default class MandatarisExtraInfoCardComponent extends Component {
   }
 
   @action
-  onSave() {
+  async onSave() {
+    this.isSaving = true;
     this.isModalActive = !this.isModalActive;
-    setTimeout(() => this.router.refresh(), 1000);
+    await timeout(RESOURCE_CACHE_TIMEOUT);
+    this.router.refresh();
+    this.isSaving = false;
   }
 
   get disabled() {

app/components/rdf-input-fields/address-selector.hbs

@@ -1,8 +1,17 @@
 {{#if this.initialized}}
-  <Address::AdressenregisterSelector
-    @address={{this.address}}
-    @onChange={{this.updateAddress}}
-  />
+  {{#if @show}}
+    <AuLabel class="au-c-description-label">
+      {{@field.label}}
+    </AuLabel>
+    <p class="au-c-description-value">
+      {{this.address.volledigAdres}}
+    </p>
+  {{else}}
+    <Address::AdressenregisterSelector
+      @address={{this.address}}
+      @onChange={{this.updateAddress}}
+    />
+  {{/if}}
 {{else}}
   <AuLabel for="input" class="skeleton-label au-u-margin-top" />
   <p class="skeleton-input-full au-u-margin-top"></p>

app/components/rdf-input-fields/beleidsdomein-code-selector.hbs

@@ -1,38 +1,52 @@
-{{#if this.shouldRender}}
-  {{#unless @inTable}}
-    <AuLabel
-      @error={{this.hasErrors}}
-      @required={{this.isRequired}}
-      @warning={{this.hasWarnings}}
-      for={{this.inputId}}
-    >
-      {{@field.label}}
-    </AuLabel>
-  {{/unless}}
-  <div class={{if this.hasErrors "ember-power-select--error"}}>
-    <Mandatarissen::ConceptSelectorWithCreate
-      @multiple={{true}}
-      @type={{@field.options.type}}
-      @conceptScheme={{this.conceptScheme}}
-      @search={{this.search}}
-      @searchEnabled={{this.searchEnabled}}
-      @selected={{this.selected}}
-      @options={{this.options}}
-      @onClose={{fn (mut this.hasBeenFocused) true}}
-      @onChange={{this.updateSelection}}
-      @onCreate={{this.add}}
-      @disabled={{@show}}
-      as |concept|
-    >
-      {{concept.label}}
-    </Mandatarissen::ConceptSelectorWithCreate>
-  </div>
+{{#if @show}}
+  <AuLabel class="au-c-description-label">
+    {{@field.label}}
+  </AuLabel>
+  <p class="au-c-description-value">
+    {{#each this.selected as |beleidsdomein index|}}
+      {{beleidsdomein.label}}
+      {{#if (not-eq index (dec this.selected.length))}}
+        ,
+      {{/if}}
+    {{/each}}
+  </p>
+{{else}}
+  {{#if this.shouldRender}}
+    {{#unless @inTable}}
+      <AuLabel
+        @error={{this.hasErrors}}
+        @required={{this.isRequired}}
+        @warning={{this.hasWarnings}}
+        for={{this.inputId}}
+      >
+        {{@field.label}}
+      </AuLabel>
+    {{/unless}}
+    <div class={{if this.hasErrors "ember-power-select--error"}}>
+      <Mandatarissen::ConceptSelectorWithCreate
+        @multiple={{true}}
+        @type={{@field.options.type}}
+        @conceptScheme={{this.conceptScheme}}
+        @search={{this.search}}
+        @searchEnabled={{this.searchEnabled}}
+        @selected={{this.selected}}
+        @options={{this.options}}
+        @onClose={{fn (mut this.hasBeenFocused) true}}
+        @onChange={{this.updateSelection}}
+        @onCreate={{this.add}}
+        @disabled={{@show}}
+        as |concept|
+      >
+        {{concept.label}}
+      </Mandatarissen::ConceptSelectorWithCreate>
+    </div>
 
-  {{#each this.errors as |error|}}
-    <AuHelpText @error={{true}}>{{error.resultMessage}}</AuHelpText>
-  {{/each}}
+    {{#each this.errors as |error|}}
+      <AuHelpText @error={{true}}>{{error.resultMessage}}</AuHelpText>
+    {{/each}}
 
-  {{#each this.warnings as |warning|}}
-    <AuHelpText @warning={{true}}>{{warning.resultMessage}}</AuHelpText>
-  {{/each}}
+    {{#each this.warnings as |warning|}}
+      <AuHelpText @warning={{true}}>{{warning.resultMessage}}</AuHelpText>
+    {{/each}}
+  {{/if}}
 {{/if}}

app/components/rdf-input-fields/crud-custom-field-modal.hbs

@@ -71,15 +71,18 @@
             {{selected.label}}
           </PowerSelect>
         </AuFormRow>
-        <AuFormRow>
-          <AuToggleSwitch
-            @disabled={{@show}}
-            @checked={{this.isFieldRequired}}
-            @onChange={{this.toggleIsRequired}}
-          >Maak veld verplicht</AuToggleSwitch>
-        </AuFormRow>
+        {{#unless @isCreating}}
+          <AuFormRow>
+            <AuToggleSwitch
+              @disabled={{@show}}
+              @checked={{this.isFieldRequired}}
+              @onChange={{this.toggleIsRequired}}
+            >Maak veld verplicht</AuToggleSwitch>
+          </AuFormRow>
+        {{/unless}}
       </form>
     {{/if}}
+
   </:body>
   <:footer>
     <div class="au-u-flex au-u-flex--between">