Lmb 182 | can modify custom field

app/components/custom-form-fields/display-type-selector.hbs

@@ -0,0 +1,24 @@
+<div ...attributes>
+  {{#unless @inTable}}
+    <AuLabel @required={{true}} {{did-insert this.load}}>
+      {{this.label}}
+    </AuLabel>
+  {{/unless}}
+  <PowerSelect
+    @disabled={{@disabled}}
+    name={{@variableName}}
+    @searchField="label"
+    @searchEnabled={{true}}
+    @selected={{this.selectedType}}
+    @options={{this.typeOptions}}
+    @onChange={{this.updateSelectedType}}
+    @allowClear={{false}}
+    @loadingMessage="Aan het laden"
+    @noMatchesMessage="Geen resultaten gevonden"
+    as |displayType|
+  >
+    <span>
+      {{displayType.label}}
+    </span>
+  </PowerSelect>
+</div>

app/components/custom-form-fields/display-type-selector.js

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+export default class CustomFormFieldsDisplayTypeSelectorComponent extends Component {
+  @service store;
+
+  @tracked typeOptions = [];
+
+  @action
+  async load() {
+    this.typeOptions = await this.store.findAll('display-type');
+  }
+
+  @action
+  async updateSelectedType(type) {
+    // This event.target is used in the update method of the edit field /custom-field-wrapper-js
+    this.args.onTypeUpdated({
+      target: { name: this.args.variableName, value: type.uri },
+    });
+  }
+
+  get label() {
+    return this.args.label || 'Type';
+  }
+
+  get selectedType() {
+    return this.typeOptions.find(
+      (option) => option.uri === this.args.displayTypeUri
+    );
+  }
+}

app/components/editable-form.hbs

@@ -8,9 +8,23 @@
     @customHistoryMessage={{@customHistoryMessage}}
   >
     {{#if this.editableFormsEnabled}}
-      <GenerateCustomFieldButton
+      <AuButton
+        @skin="link"
+        @icon="plus"
+        {{on "click" (fn (mut this.showModal) true)}}
+        class="au-u-padding-left-none au-u-margin-bottom"
+      >
+        Voeg een veld toe
+      </AuButton>
+
+      {{yield}}
+
+      <RdfInputFields::CrudCustomFieldModal
+        @isCreating={{true}}
+        @showModal={{this.showModal}}
+        @onCloseModal={{this.onFormUpdate}}
         @form={{this.currentForm}}
-        @onUpdate={{this.onFormUpdate}}
+        @field={{@field}}
       />
     {{/if}}
     {{yield}}

app/components/editable-form.js

@@ -1,7 +1,9 @@
 import Component from '@glimmer/component';
+
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
+
 import { provide } from 'ember-provide-consume-context';
 
 export default class EditableFormComponent extends Component {
@@ -12,6 +14,8 @@ export default class EditableFormComponent extends Component {
   @service semanticFormRepository;
   @service features;
 
+  @tracked showModal = false;
+
   constructor() {
     super(...arguments);
     this.baseFormId = this.args.form.id;
@@ -27,6 +31,7 @@ export default class EditableFormComponent extends Component {
     );
     this.currentForm = form;
     this.loading = false;
+    this.showModal = false;
   }
 
   get editableFormsEnabled() {
@@ -38,4 +43,9 @@ export default class EditableFormComponent extends Component {
   onFormUpdate() {
     this.updateForm();
   }
+
+  @provide('form-definition')
+  get formDefinition() {
+    return this.currentForm;
+  }
 }