From 1239c587ae4ddf9ba8136b2945073b997079ccf8 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 17 Dec 2024 13:49:09 +0100 Subject: [PATCH 01/71] add field basic input wrapper component and example --- .../rdf-input-fields/custom-field-wrapper.hbs | 28 +++++++++++++++++++ .../rdf-input-fields/custom-field-wrapper.js | 15 ++++++++++ .../rdf-input-fields/custom-string-input.hbs | 17 +++++++++++ .../rdf-input-fields/custom-string-input.js | 3 ++ app/utils/register-form-fields.js | 6 ++++ package-lock.json | 8 +++--- package.json | 2 +- .../custom-field-wrapper-test.js | 27 ++++++++++++++++++ .../custom-string-input-test.js | 27 ++++++++++++++++++ 9 files changed, 128 insertions(+), 5 deletions(-) create mode 100644 app/components/rdf-input-fields/custom-field-wrapper.hbs create mode 100644 app/components/rdf-input-fields/custom-field-wrapper.js create mode 100644 app/components/rdf-input-fields/custom-string-input.hbs create mode 100644 app/components/rdf-input-fields/custom-string-input.js create mode 100644 tests/integration/components/rdf-input-fields/custom-field-wrapper-test.js create mode 100644 tests/integration/components/rdf-input-fields/custom-string-input-test.js diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs new file mode 100644 index 000000000..47a222717 --- /dev/null +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -0,0 +1,28 @@ +{{this.title}} +
+
+ {{yield}} +
+ + Remove + +
+{{#each this.errors as |error|}} + {{error.resultMessage}} +{{/each}} + +{{#each this.warnings as |warning|}} + {{warning.resultMessage}} +{{/each}} \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js new file mode 100644 index 000000000..a0cd78ac8 --- /dev/null +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + +export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { + get title() { + return this.args.field?.label; + } + + @action + onRemove() { + console.log( + `remove clicked on ${this.args.field.uri} of form ${this.args.form}` + ); + } +} diff --git a/app/components/rdf-input-fields/custom-string-input.hbs b/app/components/rdf-input-fields/custom-string-input.hbs new file mode 100644 index 000000000..489abbe59 --- /dev/null +++ b/app/components/rdf-input-fields/custom-string-input.hbs @@ -0,0 +1,17 @@ + + + \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-string-input.js b/app/components/rdf-input-fields/custom-string-input.js new file mode 100644 index 000000000..4f7b67584 --- /dev/null +++ b/app/components/rdf-input-fields/custom-string-input.js @@ -0,0 +1,3 @@ +import Component from '@glimmer/component'; + +export default class RdfInputFieldsCustomStringInputComponent extends Component {} diff --git a/app/utils/register-form-fields.js b/app/utils/register-form-fields.js index 8d7e3cec1..58a6b2e08 100644 --- a/app/utils/register-form-fields.js +++ b/app/utils/register-form-fields.js @@ -18,6 +18,7 @@ import RdfMandatarisRangorde from 'frontend-lmb/components/rdf-input-fields/mand import RdfDateInputComponent from 'frontend-lmb/components/rdf-input-fields/rdf-date-input'; import RDFGeboorteInput from 'frontend-lmb/components/rdf-input-fields/geboorte-input'; import RDFGenderSelector from 'frontend-lmb/components/rdf-input-fields/gender-selector'; +import RdfInputFieldsCustomStringInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-string-input'; export const registerCustomFormFields = () => { registerFormFields([ @@ -109,5 +110,10 @@ export const registerCustomFormFields = () => { displayType: 'http://lblod.data.gift/display-types/genderSelector', edit: RDFGenderSelector, }, + { + displayType: + 'http://lblod.data.gift/display-types/lmb/custom-string-input', + edit: RdfInputFieldsCustomStringInputComponent, + }, ]); }; diff --git a/package-lock.json b/package-lock.json index 3af4261c5..a9d262aa1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.4.7", "license": "MIT", "dependencies": { - "@lblod/ember-semantic-forms": "0.0.2" + "@lblod/ember-semantic-forms": "0.0.4" }, "devDependencies": { "@appuniversum/ember-appuniversum": "^3.3.0", @@ -4424,9 +4424,9 @@ } }, "node_modules/@lblod/ember-semantic-forms": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@lblod/ember-semantic-forms/-/ember-semantic-forms-0.0.2.tgz", - "integrity": "sha512-Wx2ebnVVqA6nj909n8fMFo1Q9kJBduDyzqYSAvo+FK2OXsoWaowAUa5BI7SLSJUo7weXfkrlo3gUQMSlfIJUDQ==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@lblod/ember-semantic-forms/-/ember-semantic-forms-0.0.4.tgz", + "integrity": "sha512-5365Q76xO35GfJxC9k+0x84UVjs5WGu8u7HyYTuZWXVo0xg1viIRLi/fZ8oeOZAlHvdi9qtLiR/lANCYmm4SnA==", "dependencies": { "@lblod/submission-form-helpers": "~2.10.2", "ember-auto-import": "^2.7.2", diff --git a/package.json b/package.json index d2c42b1f9..a75200e1c 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "webpack": "^5.78.0" }, "dependencies": { - "@lblod/ember-semantic-forms": "0.0.2" + "@lblod/ember-semantic-forms": "0.0.4" }, "engines": { "node": "14.* || 16.* || >= 18" diff --git a/tests/integration/components/rdf-input-fields/custom-field-wrapper-test.js b/tests/integration/components/rdf-input-fields/custom-field-wrapper-test.js new file mode 100644 index 000000000..823c4f64f --- /dev/null +++ b/tests/integration/components/rdf-input-fields/custom-field-wrapper-test.js @@ -0,0 +1,27 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-lmb/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module( + 'Integration | Component | rdf-input-fields/custom-field-wrapper', + function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + template block text +`); + + assert.dom(this.element).hasText('template block text'); + }); + } +); diff --git a/tests/integration/components/rdf-input-fields/custom-string-input-test.js b/tests/integration/components/rdf-input-fields/custom-string-input-test.js new file mode 100644 index 000000000..4c96c16bd --- /dev/null +++ b/tests/integration/components/rdf-input-fields/custom-string-input-test.js @@ -0,0 +1,27 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-lmb/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module( + 'Integration | Component | rdf-input-fields/custom-string-input', + function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + template block text +`); + + assert.dom(this.element).hasText('template block text'); + }); + } +); From 14c0eb84702fee6ec2da3ab69dcf3b93a937f3ba Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 17 Dec 2024 16:07:57 +0100 Subject: [PATCH 02/71] button for adding new form items --- .../generate-custom-field-button.hbs | 9 +++++++ .../generate-custom-field-button.js | 9 +++++++ .../mandataris-extra-info-card.hbs | 11 +++++--- .../generate-custom-field-button-test.js | 27 +++++++++++++++++++ 4 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 app/components/generate-custom-field-button.hbs create mode 100644 app/components/generate-custom-field-button.js create mode 100644 tests/integration/components/generate-custom-field-button-test.js diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs new file mode 100644 index 000000000..1959c9701 --- /dev/null +++ b/app/components/generate-custom-field-button.hbs @@ -0,0 +1,9 @@ + + Voeg een veld toe + +{{yield}} \ No newline at end of file diff --git a/app/components/generate-custom-field-button.js b/app/components/generate-custom-field-button.js new file mode 100644 index 000000000..de3b0806b --- /dev/null +++ b/app/components/generate-custom-field-button.js @@ -0,0 +1,9 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + +export default class GenerateCustomFieldButtonComponent extends Component { + @action + onAddField() { + console.log(`add clicked ${this.args.form.id}`); + } +} diff --git a/app/components/mandatarissen/mandataris-extra-info-card.hbs b/app/components/mandatarissen/mandataris-extra-info-card.hbs index 1bd3951c9..96e5f2b75 100644 --- a/app/components/mandatarissen/mandataris-extra-info-card.hbs +++ b/app/components/mandatarissen/mandataris-extra-info-card.hbs @@ -49,9 +49,12 @@ @onSave={{this.onSave}} @formInitialized={{fn (mut this.formInitialized) true}} @customHistoryMessage={{true}} - /> - {{#unless this.formInitialized}} - - {{/unless}} + > + {{#if this.formInitialized}} + + {{else}} + + {{/if}} + \ No newline at end of file diff --git a/tests/integration/components/generate-custom-field-button-test.js b/tests/integration/components/generate-custom-field-button-test.js new file mode 100644 index 000000000..01be993b7 --- /dev/null +++ b/tests/integration/components/generate-custom-field-button-test.js @@ -0,0 +1,27 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-lmb/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module( + 'Integration | Component | generate-custom-field-button', + function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + template block text +`); + + assert.dom(this.element).hasText('template block text'); + }); + } +); From 089498de42ba8cf883cc8530ff207e801af6a2f1 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Thu, 19 Dec 2024 14:31:44 +0100 Subject: [PATCH 03/71] allow adding and removing custom fields, hide functionality behind feature flag --- app/components/editable-form.hbs | 18 ++++ app/components/editable-form.js | 41 +++++++++ .../generate-custom-field-button.hbs | 45 ++++++++- .../generate-custom-field-button.js | 55 ++++++++++- .../mandataris-extra-info-card.hbs | 13 +-- .../rdf-input-fields/custom-field-wrapper.hbs | 55 +++++------ .../rdf-input-fields/custom-field-wrapper.js | 26 +++++- app/routes/application.js | 2 + app/services/form-dirty-state.js | 32 ------- app/services/form-replacements.js | 40 ++++++++ app/services/form-repository.js | 91 ------------------- config/environment.js | 2 + package-lock.json | 23 ++++- package.json | 3 +- .../components/editable-form-test.js | 24 +++++ ...tate-test.js => form-replacements-test.js} | 4 +- tests/unit/services/form-repository-test.js | 12 --- 17 files changed, 303 insertions(+), 183 deletions(-) create mode 100644 app/components/editable-form.hbs create mode 100644 app/components/editable-form.js delete mode 100644 app/services/form-dirty-state.js create mode 100644 app/services/form-replacements.js delete mode 100644 app/services/form-repository.js create mode 100644 tests/integration/components/editable-form-test.js rename tests/unit/services/{form-dirty-state-test.js => form-replacements-test.js} (64%) delete mode 100644 tests/unit/services/form-repository-test.js diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs new file mode 100644 index 000000000..caa635db5 --- /dev/null +++ b/app/components/editable-form.hbs @@ -0,0 +1,18 @@ +{{#unless this.loading}} + + {{#if this.editableFormsEnabled}} + + {{/if}} + {{yield}} + +{{/unless}} \ No newline at end of file diff --git a/app/components/editable-form.js b/app/components/editable-form.js new file mode 100644 index 000000000..d7aec8307 --- /dev/null +++ b/app/components/editable-form.js @@ -0,0 +1,41 @@ +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 { + baseFormId; + @tracked currentForm; + @tracked loading = true; + @service formReplacements; + @service semanticFormRepository; + @service features; + + constructor() { + super(...arguments); + this.baseFormId = this.args.form.id; + this.updateForm(); + } + + async updateForm() { + this.loading = true; + const currentFormId = this.formReplacements.getReplacement(this.baseFormId); + const form = await this.semanticFormRepository.getFormDefinition( + currentFormId, + true + ); + this.currentForm = form; + this.loading = false; + } + + get editableFormsEnabled() { + return this.features.isEnabled('editable-forms'); + } + + @provide('on-form-update') + @action + onFormUpdate() { + this.updateForm(); + } +} diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs index 1959c9701..2bf4f1129 100644 --- a/app/components/generate-custom-field-button.hbs +++ b/app/components/generate-custom-field-button.hbs @@ -6,4 +6,47 @@ > Voeg een veld toe -{{yield}} \ No newline at end of file +{{yield}} + + +
+
+ Naam + +
+ + + + + + Creëer veld + + + + Annuleer + + + + +
+ + \ No newline at end of file diff --git a/app/components/generate-custom-field-button.js b/app/components/generate-custom-field-button.js index de3b0806b..af03bd70a 100644 --- a/app/components/generate-custom-field-button.js +++ b/app/components/generate-custom-field-button.js @@ -1,9 +1,60 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; +import { service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; export default class GenerateCustomFieldButtonComponent extends Component { + @service formReplacements; + @tracked showModal = false; + @tracked loading = false; + @tracked fieldName = ''; + + get invalidName() { + return !this.fieldName || this.fieldName.trim().length < 1; + } + + get disabled() { + return this.invalidName; + } + @action - onAddField() { - console.log(`add clicked ${this.args.form.id}`); + async onAddField() { + this.showModal = true; + this.fieldName = ''; + } + + @action + closeModal() { + this.showModal = false; + } + + @action async onSaveField() { + 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', + order: 9000, + name: this.fieldName, + }), + }); + + const body = await result.json(); + const newFormId = body.id; + this.formReplacements.setReplacement(this.args.form.id, newFormId); + if (this.args.onUpdate) { + this.args.onUpdate(); + } + this.loading = false; + this.showModal = false; + } + + @action updateName(event) { + this.fieldName = event.target.value; } } diff --git a/app/components/mandatarissen/mandataris-extra-info-card.hbs b/app/components/mandatarissen/mandataris-extra-info-card.hbs index 96e5f2b75..30fd85fd5 100644 --- a/app/components/mandatarissen/mandataris-extra-info-card.hbs +++ b/app/components/mandatarissen/mandataris-extra-info-card.hbs @@ -42,19 +42,16 @@ @closeModal={{this.toggleModal}} >
- - {{#if this.formInitialized}} - - {{else}} - - {{/if}} - + /> + {{#unless this.formInitialized}} + + {{/unless}}
\ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 47a222717..15d25f37e 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -1,28 +1,31 @@ -{{this.title}} -
-
- {{yield}} -
- {{this.title}} +
- Remove - -
-{{#each this.errors as |error|}} - {{error.resultMessage}} -{{/each}} +
+ {{yield}} +
+ + Remove + +
+ {{#each this.errors as |error|}} + {{error.resultMessage}} + {{/each}} -{{#each this.warnings as |warning|}} - {{warning.resultMessage}} -{{/each}} \ No newline at end of file + {{#each this.warnings as |warning|}} + {{warning.resultMessage}} + {{/each}} +{{/unless}} \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index a0cd78ac8..0fdd896f6 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -1,15 +1,33 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; +import { service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; +import { consume } from 'ember-provide-consume-context'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { + @service formReplacements; + @consume('on-form-update') onUpdate; + + @tracked removing = false; get title() { return this.args.field?.label; } @action - onRemove() { - console.log( - `remove clicked on ${this.args.field.uri} of form ${this.args.form}` - ); + async onRemove() { + this.removing = true; + await fetch(`/form-content/fields`, { + method: 'DELETE', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + body: JSON.stringify({ + fieldUri: this.args.field.uri.value, + formUri: this.args.form.uri, + }), + }); + this.onUpdate(); + this.removed = true; } } diff --git a/app/routes/application.js b/app/routes/application.js index 94ba013ec..786206f0c 100644 --- a/app/routes/application.js +++ b/app/routes/application.js @@ -17,9 +17,11 @@ export default class ApplicationRoute extends Route { @service router; @service decretaleOrganen; @service mandatarisStatus; + @service formReplacements; async beforeModel() { await this.session.setup(); + await this.formReplacements.setup(); await Promise.all([ this.decretaleOrganen.setup(), this.mandatarisStatus.loadStatusOptions(), diff --git a/app/services/form-dirty-state.js b/app/services/form-dirty-state.js deleted file mode 100644 index 8b3ac9004..000000000 --- a/app/services/form-dirty-state.js +++ /dev/null @@ -1,32 +0,0 @@ -import Service from '@ember/service'; - -import ENV from 'frontend-lmb/config/environment'; - -export default class FormDirtyStateService extends Service { - dirtyForms = new Set(); - - constructor() { - super(...arguments); - - if (!ENV.APP.DISABLE_RELOAD_WARNINGS) { - window.addEventListener('beforeunload', (e) => { - if (this.hasDirtyForms) { - e.preventDefault(); - e.returnValue = ''; - } - }); - } - } - - get hasDirtyForms() { - return this.dirtyForms.size > 0; - } - - markDirty(formId) { - this.dirtyForms.add(formId); - } - - markClean(formId) { - this.dirtyForms.delete(formId); - } -} diff --git a/app/services/form-replacements.js b/app/services/form-replacements.js new file mode 100644 index 000000000..b36a3b1b7 --- /dev/null +++ b/app/services/form-replacements.js @@ -0,0 +1,40 @@ +import Service from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; + +export default class FormReplacementsService extends Service { + @tracked formReplacements = null; + + async setup() { + const result = await fetch(`/form-content/form-replacements`, { + method: 'GET', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + }); + + const idReplacements = await result.json(); + const mapping = {}; + for (const replacement of idReplacements.replacements) { + mapping[replacement.standardId] = replacement.replacementId; + } + this.formReplacements = mapping; + } + + setReplacement(standardId, replacementId) { + const newFormReplacements = { ...this.formReplacements }; + // maybe the 'standardid' is already a replaced form, let's check the current mapping + let trueStandardId = standardId; + for (const [key, value] of Object.entries(this.formReplacements)) { + if (value === standardId) { + trueStandardId = key; + } + } + newFormReplacements[trueStandardId] = replacementId; + this.formReplacements = newFormReplacements; + } + + getReplacement(standardId) { + return this.formReplacements[standardId] || standardId; + } +} diff --git a/app/services/form-repository.js b/app/services/form-repository.js deleted file mode 100644 index ed0aa2a0e..000000000 --- a/app/services/form-repository.js +++ /dev/null @@ -1,91 +0,0 @@ -import Service from '@ember/service'; - -import { timeout } from 'ember-concurrency'; -import { - JSON_API_TYPE, - RESOURCE_CACHE_TIMEOUT, -} from 'frontend-lmb/utils/constants'; - -export default class FormRepositoryService extends Service { - async createFormInstance(instanceUri, definitionId, ttlCode) { - const result = await fetch(`/form-content/${definitionId}`, { - method: 'POST', - headers: { - 'Content-Type': JSON_API_TYPE, - }, - body: JSON.stringify({ - contentTtl: ttlCode, - instanceUri: instanceUri, - }), - }); - - await timeout(RESOURCE_CACHE_TIMEOUT); - - return await this._handleCreateResult(result); - } - - async updateFormInstance( - instanceId, - instanceUri, - definitionId, - ttlCode, - description - ) { - const result = await fetch( - `/form-content/${definitionId}/instances/${instanceId}`, - { - method: 'PUT', - headers: { - 'Content-Type': JSON_API_TYPE, - }, - body: JSON.stringify({ - contentTtl: ttlCode, - instanceUri: instanceUri, - description: description, - }), - } - ); - - await timeout(RESOURCE_CACHE_TIMEOUT); - - return await this._handleUpdateResult(result); - } - - async _handleCreateResult(result) { - if (!result.ok) { - return { - id: null, - errorMessage: - 'Er ging iets mis bij het opslaan van het formulier. Probeer het later opnieuw.', - }; - } - - const { id } = await result.json(); - - return { - id: id ?? null, - errorMessage: id - ? null - : 'Het formulier werd niet correct opgeslagen. Probeer het later opnieuw.', - }; - } - - async _handleUpdateResult(result) { - if (!result.ok) { - return { - body: null, - errorMessage: - 'Er ging iets mis bij het opslaan van het formulier. Probeer het later opnieuw.', - }; - } - - const body = await result.json(); - - return { - body: body?.instance?.instanceUri ? body : null, - errorMessage: body?.instance?.instanceUri - ? null - : 'Het formulier werd niet correct opgeslagen. Probeer het later opnieuw.', - }; - } -} diff --git a/config/environment.js b/config/environment.js index a681dd122..9852d9390 100644 --- a/config/environment.js +++ b/config/environment.js @@ -56,6 +56,7 @@ module.exports = function (environment) { }, }; + ENV.features['editable-forms'] = false; if (environment === 'development') { ENV.APP.DISABLE_RELOAD_WARNINGS = true; ENV.APP.SHOW_FORM_CONTENT = true; @@ -64,6 +65,7 @@ module.exports = function (environment) { // ENV.APP.LOG_TRANSITIONS = true; // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; // ENV.APP.LOG_VIEW_LOOKUPS = true; + ENV.features['editable-forms'] = true; } if (environment === 'test') { diff --git a/package-lock.json b/package-lock.json index a9d262aa1..a92c5a549 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.4.7", "license": "MIT", "dependencies": { - "@lblod/ember-semantic-forms": "0.0.4" + "@lblod/ember-semantic-forms": "0.0.5" }, "devDependencies": { "@appuniversum/ember-appuniversum": "^3.3.0", @@ -70,6 +70,7 @@ "ember-power-select-with-create": "^1.0.0", "ember-promise-helpers": "^2.0.0", "ember-promise-modals": "^4.0.0", + "ember-provide-consume-context": "^0.6.1", "ember-qunit": "^6.2.0", "ember-resolver": "^10.0.0", "ember-resources": "^7.0.2", @@ -4424,9 +4425,9 @@ } }, "node_modules/@lblod/ember-semantic-forms": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@lblod/ember-semantic-forms/-/ember-semantic-forms-0.0.4.tgz", - "integrity": "sha512-5365Q76xO35GfJxC9k+0x84UVjs5WGu8u7HyYTuZWXVo0xg1viIRLi/fZ8oeOZAlHvdi9qtLiR/lANCYmm4SnA==", + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/@lblod/ember-semantic-forms/-/ember-semantic-forms-0.0.5.tgz", + "integrity": "sha512-2tOmSn0GeHYv1upVYG9KvQwn28ujI8jhagpSABWBM4RzpO7uJ+IqgKf40D27BfnTP9mv8er24A5qL8SWbju7Ug==", "dependencies": { "@lblod/submission-form-helpers": "~2.10.2", "ember-auto-import": "^2.7.2", @@ -19061,6 +19062,20 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/ember-provide-consume-context": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/ember-provide-consume-context/-/ember-provide-consume-context-0.6.1.tgz", + "integrity": "sha512-vlqco12b3NKzLka32jc+99MFdi83jFbjdDOxvv82zQcMGO6WjAs/N+1wDlGHdhsoJ0JWFxQ8NeziRWXDIX2s7A==", + "dev": true, + "dependencies": { + "@embroider/addon-shim": "^1.0.0", + "@glimmer/component": "^1.1.2" + }, + "peerDependencies": { + "@ember/test-helpers": "^2.9.1 || ^3.0.0 || ^4.0.0", + "ember-source": "^4.8.0 || ^5.0.0" + } + }, "node_modules/ember-qunit": { "version": "6.2.0", "dev": true, diff --git a/package.json b/package.json index a75200e1c..a81607a5e 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "ember-power-select-with-create": "^1.0.0", "ember-promise-helpers": "^2.0.0", "ember-promise-modals": "^4.0.0", + "ember-provide-consume-context": "^0.6.1", "ember-qunit": "^6.2.0", "ember-resolver": "^10.0.0", "ember-resources": "^7.0.2", @@ -129,7 +130,7 @@ "webpack": "^5.78.0" }, "dependencies": { - "@lblod/ember-semantic-forms": "0.0.4" + "@lblod/ember-semantic-forms": "0.0.5" }, "engines": { "node": "14.* || 16.* || >= 18" diff --git a/tests/integration/components/editable-form-test.js b/tests/integration/components/editable-form-test.js new file mode 100644 index 000000000..6c4229e47 --- /dev/null +++ b/tests/integration/components/editable-form-test.js @@ -0,0 +1,24 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-lmb/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | editable-form', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + template block text +`); + + assert.dom(this.element).hasText('template block text'); + }); +}); diff --git a/tests/unit/services/form-dirty-state-test.js b/tests/unit/services/form-replacements-test.js similarity index 64% rename from tests/unit/services/form-dirty-state-test.js rename to tests/unit/services/form-replacements-test.js index e8b50fbc1..60300cb87 100644 --- a/tests/unit/services/form-dirty-state-test.js +++ b/tests/unit/services/form-replacements-test.js @@ -1,12 +1,12 @@ import { module, test } from 'qunit'; import { setupTest } from 'frontend-lmb/tests/helpers'; -module('Unit | Service | form-dirty-state', function (hooks) { +module('Unit | Service | form-replacements', function (hooks) { setupTest(hooks); // TODO: Replace this with your real tests. test('it exists', function (assert) { - let service = this.owner.lookup('service:form-dirty-state'); + let service = this.owner.lookup('service:form-replacements'); assert.ok(service); }); }); diff --git a/tests/unit/services/form-repository-test.js b/tests/unit/services/form-repository-test.js deleted file mode 100644 index 37ed09d02..000000000 --- a/tests/unit/services/form-repository-test.js +++ /dev/null @@ -1,12 +0,0 @@ -import { module, test } from 'qunit'; -import { setupTest } from 'frontend-lmb/tests/helpers'; - -module('Unit | Service | form-repository', function (hooks) { - setupTest(hooks); - - // TODO: Replace this with your real tests. - test('it exists', function (assert) { - let service = this.owner.lookup('service:form-repository'); - assert.ok(service); - }); -}); From a8780126cb87dc3b557bf489273ecea1edc3c3e8 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Thu, 19 Dec 2024 14:38:45 +0100 Subject: [PATCH 04/71] remove empty js component --- app/components/rdf-input-fields/custom-string-input.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 app/components/rdf-input-fields/custom-string-input.js diff --git a/app/components/rdf-input-fields/custom-string-input.js b/app/components/rdf-input-fields/custom-string-input.js deleted file mode 100644 index 4f7b67584..000000000 --- a/app/components/rdf-input-fields/custom-string-input.js +++ /dev/null @@ -1,3 +0,0 @@ -import Component from '@glimmer/component'; - -export default class RdfInputFieldsCustomStringInputComponent extends Component {} From 94396fb345a687a30b13d33ca569437a155bb249 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 7 Jan 2025 16:05:24 +0100 Subject: [PATCH 05/71] review fixes --- .../generate-custom-field-button.hbs | 4 +- .../generate-custom-field-button.js | 48 +++++++++++-------- .../rdf-input-fields/custom-field-wrapper.hbs | 2 +- 3 files changed, 32 insertions(+), 22 deletions(-) diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs index 2bf4f1129..aa18a996b 100644 --- a/app/components/generate-custom-field-button.hbs +++ b/app/components/generate-custom-field-button.hbs @@ -30,7 +30,7 @@ - Creëer veld + Bewaar diff --git a/app/components/generate-custom-field-button.js b/app/components/generate-custom-field-button.js index af03bd70a..bdbc5b992 100644 --- a/app/components/generate-custom-field-button.js +++ b/app/components/generate-custom-field-button.js @@ -3,9 +3,12 @@ import { action } from '@ember/object'; import { service } from '@ember/service'; import { tracked } from '@glimmer/tracking'; import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; +import { showErrorToast } from 'frontend-lmb/utils/toasts'; export default class GenerateCustomFieldButtonComponent extends Component { @service formReplacements; + @service toaster; + @tracked showModal = false; @tracked loading = false; @tracked fieldName = ''; @@ -30,25 +33,32 @@ export default class GenerateCustomFieldButtonComponent extends Component { } @action async onSaveField() { - 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', - order: 9000, - name: this.fieldName, - }), - }); - - const body = await result.json(); - const newFormId = body.id; - this.formReplacements.setReplacement(this.args.form.id, newFormId); - if (this.args.onUpdate) { - this.args.onUpdate(); + 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', + order: 9000, + name: this.fieldName, + }), + }); + + const body = await result.json(); + const newFormId = body.id; + this.formReplacements.setReplacement(this.args.form.id, newFormId); + if (this.args.onUpdate) { + this.args.onUpdate(); + } + } catch (error) { + showErrorToast( + this.toaster, + 'Er ging iets mis bij het opslaan van het veld.' + ); } this.loading = false; this.showModal = false; diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 15d25f37e..a1688f83f 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -18,7 +18,7 @@ @loading={{this.removing}} {{on "click" this.onRemove}} > - Remove + Verwijder {{#each this.errors as |error|}} From 10e027d71656f0554189f79b1ce40316286751e2 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Thu, 9 Jan 2025 15:47:38 +0100 Subject: [PATCH 06/71] add loading messages to buttons --- app/components/generate-custom-field-button.hbs | 1 + app/components/rdf-input-fields/custom-field-wrapper.hbs | 1 + 2 files changed, 2 insertions(+) diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs index aa18a996b..ef8f2f283 100644 --- a/app/components/generate-custom-field-button.hbs +++ b/app/components/generate-custom-field-button.hbs @@ -37,6 +37,7 @@ {{on "click" this.onSaveField}} @disabled={{this.disabled}} @loading={{this.loading}} + @loadingMessage="Bewaren" > Bewaar diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index a1688f83f..439f8f225 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -16,6 +16,7 @@ @alert={{true}} @icon="trash" @loading={{this.removing}} + @loadingMessage="Verwijderen" {{on "click" this.onRemove}} > Verwijder From 0feaa24aef0695e54629e5b058b5a6de87bd0d7f Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 17 Dec 2024 13:49:09 +0100 Subject: [PATCH 07/71] add field basic input wrapper component and example --- app/components/rdf-input-fields/custom-string-input.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 app/components/rdf-input-fields/custom-string-input.js diff --git a/app/components/rdf-input-fields/custom-string-input.js b/app/components/rdf-input-fields/custom-string-input.js new file mode 100644 index 000000000..4f7b67584 --- /dev/null +++ b/app/components/rdf-input-fields/custom-string-input.js @@ -0,0 +1,3 @@ +import Component from '@glimmer/component'; + +export default class RdfInputFieldsCustomStringInputComponent extends Component {} From 8cb43634732f742c1814e30d25023402c7649084 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 7 Jan 2025 13:53:01 +0100 Subject: [PATCH 08/71] allow using a library field when adding a new field to the form --- .../generate-custom-field-button.hbs | 38 +++++++++++ .../generate-custom-field-button.js | 53 ++++++++++++++- .../rdf-input-fields/custom-address-input.hbs | 19 ++++++ .../rdf-input-fields/custom-field-wrapper.hbs | 67 +++++++++++++------ .../rdf-input-fields/custom-string-input.hbs | 1 + app/config/custom-inflector-rules.js | 2 + app/models/display-type.js | 6 ++ app/models/library-entry.js | 14 ++++ app/utils/register-form-fields.js | 6 ++ app/utils/well-known-ids.js | 2 + tests/unit/models/display-type-test.js | 14 ++++ tests/unit/models/library-entry-test.js | 14 ++++ 12 files changed, 212 insertions(+), 24 deletions(-) create mode 100644 app/components/rdf-input-fields/custom-address-input.hbs create mode 100644 app/models/display-type.js create mode 100644 app/models/library-entry.js create mode 100644 tests/unit/models/display-type-test.js create mode 100644 tests/unit/models/library-entry-test.js diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs index ef8f2f283..b3513605f 100644 --- a/app/components/generate-custom-field-button.hbs +++ b/app/components/generate-custom-field-button.hbs @@ -25,6 +25,44 @@ {{on "input" this.updateName}} /> +
+ Uit bibliotheek + + {{selected.name}} + +
+
+ Type + + {{selected.label}} + +
diff --git a/app/components/generate-custom-field-button.js b/app/components/generate-custom-field-button.js index bdbc5b992..b03c559f2 100644 --- a/app/components/generate-custom-field-button.js +++ b/app/components/generate-custom-field-button.js @@ -5,13 +5,31 @@ 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'; + 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 +39,20 @@ export default class GenerateCustomFieldButtonComponent extends Component { return this.invalidName; } + get libraryFieldOptions() { + return this.store + .findAll('library-entry', { include: 'display-type' }) + .then((entries) => { + return entries.sortBy('id').reverse(); + }); + } + + get displayTypes() { + return this.store.findAll('display-type').then((entries) => { + return entries.sortBy('label'); + }); + } + @action async onAddField() { this.showModal = true; @@ -32,17 +64,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 new file mode 100644 index 000000000..667c43539 --- /dev/null +++ b/app/components/rdf-input-fields/custom-address-input.hbs @@ -0,0 +1,19 @@ + +
+ +
+ \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 439f8f225..1908cd364 100644 --- 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}} - {{this.title}} -
-
- {{yield}} + {{#if @inline}} + {{this.title}} +
+
+ {{yield}} +
+ + Verwijder +
- - Verwijder - -
+ {{this.title}} + + Verwijder + +
+ {{yield}} + {{/if}} {{#each this.errors as |error|}} {{error.resultMessage}} {{/each}} diff --git a/app/components/rdf-input-fields/custom-string-input.hbs b/app/components/rdf-input-fields/custom-string-input.hbs index 489abbe59..3584a68b0 100644 --- a/app/components/rdf-input-fields/custom-string-input.hbs +++ b/app/components/rdf-input-fields/custom-string-input.hbs @@ -1,4 +1,5 @@ { registerFormFields([ @@ -115,5 +116,10 @@ export const registerCustomFormFields = () => { 'http://lblod.data.gift/display-types/lmb/custom-string-input', edit: RdfInputFieldsCustomStringInputComponent, }, + { + displayType: + 'http://lblod.data.gift/display-types/lmb/custom-address-input', + edit: RdfInputFieldsCustomAddressInputComponent, + }, ]); }; diff --git a/app/utils/well-known-ids.js b/app/utils/well-known-ids.js index 45056bb47..50ed016cc 100644 --- a/app/utils/well-known-ids.js +++ b/app/utils/well-known-ids.js @@ -44,3 +44,5 @@ export const PUBLICATION_STATUS_EFFECTIEF_ID = 'd3b12468-3720-4cb0-95b4-6aa2996ab188'; export const PUBLICATION_STATUS_DRAFT_ID = '588ce330-4abb-4448-9776-a17d9305df07'; +export const TEXT_CUSTOM_DISPLAY_TYPE_ID = + '220427c5-65c7-4be6-b84a-fc7401b465ec'; diff --git a/tests/unit/models/display-type-test.js b/tests/unit/models/display-type-test.js new file mode 100644 index 000000000..6f013ddba --- /dev/null +++ b/tests/unit/models/display-type-test.js @@ -0,0 +1,14 @@ +import { module, test } from 'qunit'; + +import { setupTest } from 'frontend-lmb/tests/helpers'; + +module('Unit | Model | display type', function (hooks) { + setupTest(hooks); + + // Replace this with your real tests. + test('it exists', function (assert) { + let store = this.owner.lookup('service:store'); + let model = store.createRecord('display-type', {}); + assert.ok(model); + }); +}); diff --git a/tests/unit/models/library-entry-test.js b/tests/unit/models/library-entry-test.js new file mode 100644 index 000000000..79ab9f21c --- /dev/null +++ b/tests/unit/models/library-entry-test.js @@ -0,0 +1,14 @@ +import { module, test } from 'qunit'; + +import { setupTest } from 'frontend-lmb/tests/helpers'; + +module('Unit | Model | library entry', function (hooks) { + setupTest(hooks); + + // Replace this with your real tests. + test('it exists', function (assert) { + let store = this.owner.lookup('service:store'); + let model = store.createRecord('library-entry', {}); + assert.ok(model); + }); +}); From 2d6a3fcc0bda60041d2da71ec6f9c4d660c94e26 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 7 Jan 2025 16:40:36 +0100 Subject: [PATCH 09/71] remove empty class --- app/components/rdf-input-fields/custom-string-input.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 app/components/rdf-input-fields/custom-string-input.js diff --git a/app/components/rdf-input-fields/custom-string-input.js b/app/components/rdf-input-fields/custom-string-input.js deleted file mode 100644 index 4f7b67584..000000000 --- a/app/components/rdf-input-fields/custom-string-input.js +++ /dev/null @@ -1,3 +0,0 @@ -import Component from '@glimmer/component'; - -export default class RdfInputFieldsCustomStringInputComponent extends Component {} From af68dd53b10341d8f325ce67730843a0f4145cdd Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 7 Jan 2025 17:00:03 +0100 Subject: [PATCH 10/71] don't allow reusing a library field --- .../generate-custom-field-button.js | 23 +++++++++++++++++-- app/rdf/namespaces.js | 1 + 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/app/components/generate-custom-field-button.js b/app/components/generate-custom-field-button.js index b03c559f2..8bee9d2db 100644 --- a/app/components/generate-custom-field-button.js +++ b/app/components/generate-custom-field-button.js @@ -6,7 +6,9 @@ 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; @@ -40,10 +42,27 @@ export default class GenerateCustomFieldButtonComponent extends Component { } 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 entries.sortBy('id').reverse(); + return [ + this.customFieldEntry, + ...entries + .sortBy('id') + .reverse() + .filter((entry) => { + return ( + entry.uri && alreadyUsedLibraryEntries.indexOf(entry.uri) < 0 + ); + }), + ]; }); } diff --git a/app/rdf/namespaces.js b/app/rdf/namespaces.js index e2fb54f4c..cd724fd7b 100644 --- a/app/rdf/namespaces.js +++ b/app/rdf/namespaces.js @@ -10,6 +10,7 @@ export { } 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/'); From a75644ae46da7d96543a82675c03575271cf22d5 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Thu, 9 Jan 2025 12:51:00 +0100 Subject: [PATCH 11/71] add more custom input field types --- .../rdf-input-fields/custom-date-input.hbs | 19 +++++++++++++++++++ .../rdf-input-fields/custom-number-input.hbs | 19 +++++++++++++++++++ .../rdf-input-fields/custom-text-input.hbs | 19 +++++++++++++++++++ .../rdf-input-fields/rdf-date-input.hbs | 14 ++++++++------ app/utils/register-form-fields.js | 16 ++++++++++++++++ 5 files changed, 81 insertions(+), 6 deletions(-) create mode 100644 app/components/rdf-input-fields/custom-date-input.hbs create mode 100644 app/components/rdf-input-fields/custom-number-input.hbs create mode 100644 app/components/rdf-input-fields/custom-text-input.hbs diff --git a/app/components/rdf-input-fields/custom-date-input.hbs b/app/components/rdf-input-fields/custom-date-input.hbs new file mode 100644 index 000000000..826137fc7 --- /dev/null +++ b/app/components/rdf-input-fields/custom-date-input.hbs @@ -0,0 +1,19 @@ + + + + \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-number-input.hbs b/app/components/rdf-input-fields/custom-number-input.hbs new file mode 100644 index 000000000..953782456 --- /dev/null +++ b/app/components/rdf-input-fields/custom-number-input.hbs @@ -0,0 +1,19 @@ + + + + \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-text-input.hbs b/app/components/rdf-input-fields/custom-text-input.hbs new file mode 100644 index 000000000..f59fe59be --- /dev/null +++ b/app/components/rdf-input-fields/custom-text-input.hbs @@ -0,0 +1,19 @@ + + + + \ No newline at end of file diff --git a/app/components/rdf-input-fields/rdf-date-input.hbs b/app/components/rdf-input-fields/rdf-date-input.hbs index 0da44f213..d2f4255ba 100644 --- a/app/components/rdf-input-fields/rdf-date-input.hbs +++ b/app/components/rdf-input-fields/rdf-date-input.hbs @@ -1,9 +1,11 @@ -{{this.title}} +{{#unless @inTable}} + {{this.title}} +{{/unless}} { registerFormFields([ @@ -121,5 +124,18 @@ export const registerCustomFormFields = () => { 'http://lblod.data.gift/display-types/lmb/custom-address-input', edit: RdfInputFieldsCustomAddressInputComponent, }, + { + displayType: 'http://lblod.data.gift/display-types/lmb/custom-date-input', + edit: RdfInputFieldsCustomDateInputComponent, + }, + { + displayType: + 'http://lblod.data.gift/display-types/lmb/custom-number-input', + edit: RdfInputFieldsCustomNumberInputComponent, + }, + { + displayType: 'http://lblod.data.gift/display-types/lmb/custom-text-input', + edit: RdfInputFieldsCustomTextInputComponent, + }, ]); }; From 7c6ef9b2b9c9a0b126161ff0b3700720023573bc Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 9 Jan 2025 10:25:59 +0100 Subject: [PATCH 12/71] lmb-182: add modal with version one form for editing the form --- .../rdf-input-fields/custom-field-wrapper.hbs | 124 ++++++++++++------ .../rdf-input-fields/custom-field-wrapper.js | 34 +++++ 2 files changed, 117 insertions(+), 41 deletions(-) diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 1908cd364..c2fcca41e 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -1,52 +1,27 @@ {{#unless this.removed}} - {{#if @inline}} +
{{this.title}} -
-
- {{yield}} -
- - Verwijder - + Verwijder + +
+
+
+ {{yield}}
- {{else}} -
- {{this.title}} - - Verwijder - -
- {{yield}} - {{/if}} +
{{#each this.errors as |error|}} {{error.resultMessage}} {{/each}} @@ -54,4 +29,71 @@ {{#each this.warnings as |warning|}} {{warning.resultMessage}} {{/each}} -{{/unless}} \ No newline at end of file +{{/unless}} + + +
+ + Naam + + + + Type + + + + Positie in formulier + + + + + + + Pas aan + + + + Verwijder + + + +
+ \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index 0fdd896f6..3b0a19749 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -1,19 +1,36 @@ import Component from '@glimmer/component'; + import { action } from '@ember/object'; import { service } from '@ember/service'; import { tracked } from '@glimmer/tracking'; + import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; + import { consume } from 'ember-provide-consume-context'; +import { task } from 'ember-concurrency'; +import { showSuccessToast } from 'frontend-lmb/utils/toasts'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { + @service toaster; @service formReplacements; @consume('on-form-update') onUpdate; @tracked removing = false; + @tracked showEditFieldModal; + + // Field properties + @tracked name; + @tracked type; + @tracked order; + get title() { return this.args.field?.label; } + get canSaveChanges() { + return this.name && this.type && this.order; + } + @action async onRemove() { this.removing = true; @@ -30,4 +47,21 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component this.onUpdate(); this.removed = true; } + + @action + closeEditFieldModal() { + this.showEditFieldModal = false; + } + + @action + updateField(event) { + const { name, value } = event.target; + this[name] = value; + } + + saveChanges = task(async () => { + // TODO: + this.showEditFieldModal = false; + showSuccessToast(this.toaster, 'Het veld werd succesvol aangepast.'); + }); } From 05b4f85fd289d155dd99c3a2dd1a3e179bd84160 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 9 Jan 2025 10:46:39 +0100 Subject: [PATCH 13/71] lmb-182: load in the current field values for the edit modal --- .../rdf-input-fields/custom-field-wrapper.hbs | 7 ++++--- .../rdf-input-fields/custom-field-wrapper.js | 18 +++++++++++++++++- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index c2fcca41e..29b7a32b1 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -12,7 +12,7 @@ @hideText={{true}} {{on "click" (fn (mut this.showEditFieldModal) true)}} > - Verwijder + Pas aan
@@ -43,7 +44,7 @@ diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index 3b0a19749..7931f7ebd 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -28,7 +28,23 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component } get canSaveChanges() { - return this.name && this.type && this.order; + return this.fieldHasChanged && this.name && this.type && this.order; + } + + get fieldHasChanged() { + const { label, order, displayType } = this.args.field; + + return ( + this.name != label || this.type != displayType || this.order != order + ); + } + + @action + async loadCurrentFieldInfo() { + const { label, order, displayType } = this.args.field; + this.name = label; + this.type = displayType; + this.order = order; } @action From 73af5d3752f08bfd35263472fd26598c2732d209 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 9 Jan 2025 12:27:18 +0100 Subject: [PATCH 14/71] lmb-182: make the display type a dropdown --- .../display-type-selector.hbs | 23 +++++++++++++ .../display-type-selector.js | 34 +++++++++++++++++++ .../rdf-input-fields/custom-field-wrapper.hbs | 12 +++---- app/config/custom-inflector-rules.js | 3 ++ app/models/form-library/display-type.js | 6 ++++ .../models/form-library/display-type-test.js | 14 ++++++++ 6 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 app/components/custom-form-fields/display-type-selector.hbs create mode 100644 app/components/custom-form-fields/display-type-selector.js create mode 100644 app/models/form-library/display-type.js create mode 100644 tests/unit/models/form-library/display-type-test.js diff --git a/app/components/custom-form-fields/display-type-selector.hbs b/app/components/custom-form-fields/display-type-selector.hbs new file mode 100644 index 000000000..3c47a8308 --- /dev/null +++ b/app/components/custom-form-fields/display-type-selector.hbs @@ -0,0 +1,23 @@ +
+ {{#unless @inTable}} + + {{this.label}} + + {{/unless}} + + + {{displayType.label}} + + +
\ No newline at end of file diff --git a/app/components/custom-form-fields/display-type-selector.js b/app/components/custom-form-fields/display-type-selector.js new file mode 100644 index 000000000..c2893080c --- /dev/null +++ b/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('form-library/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 + ); + } +} diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 29b7a32b1..4e53371da 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -50,13 +50,11 @@ /> - Type - diff --git a/app/config/custom-inflector-rules.js b/app/config/custom-inflector-rules.js index 2399b02d5..57498add4 100644 --- a/app/config/custom-inflector-rules.js +++ b/app/config/custom-inflector-rules.js @@ -73,3 +73,6 @@ inflector.irregular('global-system-message', 'global-system-messages'); inflector.irregular('werkingsgebied', 'werkingsgebieden'); inflector.irregular('bestuurseenheid-contact', 'bestuurseenheid-contacten'); + +// Form Library +inflector.irregular('form-library/display-type', 'display-types'); diff --git a/app/models/form-library/display-type.js b/app/models/form-library/display-type.js new file mode 100644 index 000000000..1144d47cb --- /dev/null +++ b/app/models/form-library/display-type.js @@ -0,0 +1,6 @@ +import Model, { attr } from '@ember-data/model'; + +export default class FormLibraryDisplayTypeModel extends Model { + @attr uri; + @attr label; +} diff --git a/tests/unit/models/form-library/display-type-test.js b/tests/unit/models/form-library/display-type-test.js new file mode 100644 index 000000000..02d973a66 --- /dev/null +++ b/tests/unit/models/form-library/display-type-test.js @@ -0,0 +1,14 @@ +import { module, test } from 'qunit'; + +import { setupTest } from 'frontend-lmb/tests/helpers'; + +module('Unit | Model | form library/display type', function (hooks) { + setupTest(hooks); + + // Replace this with your real tests. + test('it exists', function (assert) { + let store = this.owner.lookup('service:store'); + let model = store.createRecord('form-library/display-type', {}); + assert.ok(model); + }); +}); From a56b29a32122d241a70f05b417d7a0d0b180f2f7 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 9 Jan 2025 12:32:31 +0100 Subject: [PATCH 15/71] lmb-182: make the dropdown use the full width in the form --- app/components/rdf-input-fields/custom-field-wrapper.hbs | 2 +- app/styles/_shame.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 4e53371da..8a5f8b245 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -49,7 +49,7 @@ id="name" /> - + Date: Thu, 9 Jan 2025 14:46:29 +0100 Subject: [PATCH 16/71] lmb-182: the field is updated --- .../display-type-selector.js | 2 +- .../rdf-input-fields/custom-field-wrapper.js | 40 +++++++++++++++---- app/config/custom-inflector-rules.js | 3 -- app/models/form-library/display-type.js | 6 --- 4 files changed, 34 insertions(+), 17 deletions(-) delete mode 100644 app/models/form-library/display-type.js diff --git a/app/components/custom-form-fields/display-type-selector.js b/app/components/custom-form-fields/display-type-selector.js index c2893080c..5b1c74018 100644 --- a/app/components/custom-form-fields/display-type-selector.js +++ b/app/components/custom-form-fields/display-type-selector.js @@ -11,7 +11,7 @@ export default class CustomFormFieldsDisplayTypeSelectorComponent extends Compon @action async load() { - this.typeOptions = await this.store.findAll('form-library/display-type'); + this.typeOptions = await this.store.findAll('display-type'); } @action diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index 7931f7ebd..f943f5bd8 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -4,16 +4,16 @@ import { action } from '@ember/object'; import { service } from '@ember/service'; import { tracked } from '@glimmer/tracking'; -import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; - -import { consume } from 'ember-provide-consume-context'; import { task } from 'ember-concurrency'; -import { showSuccessToast } from 'frontend-lmb/utils/toasts'; + +import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; +import { showErrorToast, showSuccessToast } from 'frontend-lmb/utils/toasts'; +import { MANDATARIS_EXTRA_INFO_FORM_ID } from 'frontend-lmb/utils/well-known-ids'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { @service toaster; @service formReplacements; - @consume('on-form-update') onUpdate; + @service semanticFormRepository; @tracked removing = false; @tracked showEditFieldModal; @@ -60,7 +60,6 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component formUri: this.args.form.uri, }), }); - this.onUpdate(); this.removed = true; } @@ -76,7 +75,34 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component } saveChanges = task(async () => { - // TODO: + try { + const result = await fetch( + `/form-content/${MANDATARIS_EXTRA_INFO_FORM_ID}/fields`, + { + method: 'POST', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + body: JSON.stringify({ + displayType: this.type, + order: this.order, + name: this.name, + }), + } + ); + + const body = await result.json(); + const newFormId = body.id; + this.formReplacements.setReplacement( + MANDATARIS_EXTRA_INFO_FORM_ID, + newFormId + ); + } catch (error) { + showErrorToast( + this.toaster, + 'Er ging iets mis bij het aanpassen van het veld.' + ); + } this.showEditFieldModal = false; showSuccessToast(this.toaster, 'Het veld werd succesvol aangepast.'); }); diff --git a/app/config/custom-inflector-rules.js b/app/config/custom-inflector-rules.js index 57498add4..2399b02d5 100644 --- a/app/config/custom-inflector-rules.js +++ b/app/config/custom-inflector-rules.js @@ -73,6 +73,3 @@ inflector.irregular('global-system-message', 'global-system-messages'); inflector.irregular('werkingsgebied', 'werkingsgebieden'); inflector.irregular('bestuurseenheid-contact', 'bestuurseenheid-contacten'); - -// Form Library -inflector.irregular('form-library/display-type', 'display-types'); diff --git a/app/models/form-library/display-type.js b/app/models/form-library/display-type.js deleted file mode 100644 index 1144d47cb..000000000 --- a/app/models/form-library/display-type.js +++ /dev/null @@ -1,6 +0,0 @@ -import Model, { attr } from '@ember-data/model'; - -export default class FormLibraryDisplayTypeModel extends Model { - @attr uri; - @attr label; -} From e1b3a35a03af9fe3e1461456e4f093d01f5a48b2 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 9 Jan 2025 15:22:49 +0100 Subject: [PATCH 17/71] lmb-182: refresh the form when updating a field --- app/components/rdf-input-fields/custom-field-wrapper.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index f943f5bd8..fcbf86b91 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -5,12 +5,15 @@ import { service } from '@ember/service'; import { tracked } from '@glimmer/tracking'; import { task } from 'ember-concurrency'; +import { consume } from 'ember-provide-consume-context'; import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; import { showErrorToast, showSuccessToast } from 'frontend-lmb/utils/toasts'; import { MANDATARIS_EXTRA_INFO_FORM_ID } from 'frontend-lmb/utils/well-known-ids'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { + @consume('on-form-update') onFormUpdate; + @service toaster; @service formReplacements; @service semanticFormRepository; @@ -60,6 +63,7 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component formUri: this.args.form.uri, }), }); + this.onFormUpdate(); this.removed = true; } @@ -97,10 +101,11 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component MANDATARIS_EXTRA_INFO_FORM_ID, newFormId ); + this.onFormUpdate(); } catch (error) { showErrorToast( this.toaster, - 'Er ging iets mis bij het aanpassen van het veld.' + 'Er ging iets mis bij het opslaan van het veld.' ); } this.showEditFieldModal = false; From d4f466b104d937d8d8e61350e95368d1abc01bf5 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 9 Jan 2025 15:42:00 +0100 Subject: [PATCH 18/71] lmb-182: provide the editable form id, this fixes the disappearing fields --- app/components/editable-form.js | 5 +++ .../rdf-input-fields/custom-field-wrapper.js | 36 ++++++++++--------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/app/components/editable-form.js b/app/components/editable-form.js index d7aec8307..9a7979cb3 100644 --- a/app/components/editable-form.js +++ b/app/components/editable-form.js @@ -38,4 +38,9 @@ export default class EditableFormComponent extends Component { onFormUpdate() { this.updateForm(); } + + @provide('editable-form-id') + get editableFormId() { + return this.currentForm.id; + } } diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index fcbf86b91..f38167e6e 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -9,10 +9,10 @@ import { consume } from 'ember-provide-consume-context'; import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; import { showErrorToast, showSuccessToast } from 'frontend-lmb/utils/toasts'; -import { MANDATARIS_EXTRA_INFO_FORM_ID } from 'frontend-lmb/utils/well-known-ids'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { @consume('on-form-update') onFormUpdate; + @consume('editable-form-id') editableFormId; @service toaster; @service formReplacements; @@ -53,18 +53,9 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component @action async onRemove() { this.removing = true; - await fetch(`/form-content/fields`, { - method: 'DELETE', - headers: { - 'Content-Type': JSON_API_TYPE, - }, - body: JSON.stringify({ - fieldUri: this.args.field.uri.value, - formUri: this.args.form.uri, - }), - }); + await this.removeField(); this.onFormUpdate(); - this.removed = true; + this.removed = false; } @action @@ -79,9 +70,10 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component } saveChanges = task(async () => { + await this.removeField(); try { const result = await fetch( - `/form-content/${MANDATARIS_EXTRA_INFO_FORM_ID}/fields`, + `/form-content/${this.editableFormId}/fields`, { method: 'POST', headers: { @@ -97,10 +89,7 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component const body = await result.json(); const newFormId = body.id; - this.formReplacements.setReplacement( - MANDATARIS_EXTRA_INFO_FORM_ID, - newFormId - ); + this.formReplacements.setReplacement(this.editableFormId, newFormId); this.onFormUpdate(); } catch (error) { showErrorToast( @@ -111,4 +100,17 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component this.showEditFieldModal = false; showSuccessToast(this.toaster, 'Het veld werd succesvol aangepast.'); }); + + async removeField() { + await fetch(`/form-content/fields`, { + method: 'DELETE', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + body: JSON.stringify({ + fieldUri: this.args.field.uri.value, + formUri: this.args.form.uri, + }), + }); + } } From 823232210b2069329dfecadfe560359465d3077f Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 9 Jan 2025 17:18:26 +0100 Subject: [PATCH 19/71] lmb-182: disable type selector when the field has a library entree --- .../display-type-selector.hbs | 1 + app/components/editable-form.js | 6 ++--- .../rdf-input-fields/custom-field-wrapper.hbs | 1 + .../rdf-input-fields/custom-field-wrapper.js | 27 ++++++++++++++++--- 4 files changed, 28 insertions(+), 7 deletions(-) diff --git a/app/components/custom-form-fields/display-type-selector.hbs b/app/components/custom-form-fields/display-type-selector.hbs index 3c47a8308..cee392da4 100644 --- a/app/components/custom-form-fields/display-type-selector.hbs +++ b/app/components/custom-form-fields/display-type-selector.hbs @@ -5,6 +5,7 @@ {{/unless}} Date: Thu, 9 Jan 2025 17:24:06 +0100 Subject: [PATCH 20/71] lmb-182: add library entree uri to the post call --- app/components/rdf-input-fields/custom-field-wrapper.hbs | 2 +- app/components/rdf-input-fields/custom-field-wrapper.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 7ad180478..ceb51a7f9 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -51,7 +51,7 @@ Date: Fri, 10 Jan 2025 08:39:32 +0100 Subject: [PATCH 21/71] lmb-182: comment the order field in the edit modal as we do not want to show this as a number for the DEMO 10/01/2025 --- app/components/rdf-input-fields/custom-field-wrapper.hbs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index ceb51a7f9..a3a1d5cb6 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -58,7 +58,8 @@ @onTypeUpdated={{this.updateField}} /> - + {{!-- Commented because we do not want to show the order as a number here for demo + Positie in formulier - + --}} Date: Fri, 10 Jan 2025 11:59:06 +0100 Subject: [PATCH 22/71] lmb-182: create a component that can be shown and hidden through args + dynamic title --- .../crud-custom-field-modal.hbs | 8 ++++++ .../crud-custom-field-modal.js | 20 ++++++++++++++ .../crud-custom-field-modal-test.js | 27 +++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 app/components/rdf-input-fields/crud-custom-field-modal.hbs create mode 100644 app/components/rdf-input-fields/crud-custom-field-modal.js create mode 100644 tests/integration/components/rdf-input-fields/crud-custom-field-modal-test.js diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs new file mode 100644 index 000000000..83e6d341b --- /dev/null +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -0,0 +1,8 @@ + + modal + \ No newline at end of file diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js new file mode 100644 index 000000000..ceead9646 --- /dev/null +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -0,0 +1,20 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; + +export default class RdfInputFieldCrudCustomFieldModalComponent extends Component { + @action + closeModal() { + if (this.args.onCloseModal) { + this.args.onCloseModal(); + } + } + + get title() { + if (this.args.isCreating) { + return 'Voeg een veld toe'; + } + + return 'Pas een veld aan'; + } +} diff --git a/tests/integration/components/rdf-input-fields/crud-custom-field-modal-test.js b/tests/integration/components/rdf-input-fields/crud-custom-field-modal-test.js new file mode 100644 index 000000000..6ba42e40a --- /dev/null +++ b/tests/integration/components/rdf-input-fields/crud-custom-field-modal-test.js @@ -0,0 +1,27 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-lmb/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module( + 'Integration | Component | rdf-input-fields/crud-custom-field-modal', + function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + template block text +`); + + assert.dom(this.element).hasText('template block text'); + }); + } +); From 56208abe242f0b475320e52d21d31edd4d01e02a Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 12:18:19 +0100 Subject: [PATCH 23/71] lmb-182: add a start form for the modal that shows different buttons depending onj the action --- .../crud-custom-field-modal.hbs | 49 ++++++++++++++- .../crud-custom-field-modal.js | 59 +++++++++++++++++++ 2 files changed, 107 insertions(+), 1 deletion(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 83e6d341b..9fa8601f5 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -4,5 +4,52 @@ @closable={{true}} @title={{this.title}} > - modal + <:body> + + + Naam + + + + + <:footer> + + + + {{this.saveText}} + + + {{#if @isCreating}} + + Annuleer + + {{else}} + + Verwijder + + {{/if}} + + + \ No newline at end of file diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index ceead9646..d13004bbe 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -1,8 +1,47 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; + +import { task } from 'ember-concurrency'; + +import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; export default class RdfInputFieldCrudCustomFieldModalComponent extends Component { + @tracked isRemovingField; + + // Field properties + @tracked fieldName; + + @action + updateField(event) { + const { name, value } = event.target; + this[name] = value; + } + + saveChanges = task(async () => {}); + + async removeField() { + await fetch(`/form-content/fields`, { + method: 'DELETE', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + body: JSON.stringify({ + fieldUri: this.args.field.uri.value, + formUri: this.args.form.uri, + }), + }); + } + + @action + async onRemove() { + this.isRemovingField = true; + await this.removeField(); + this.onFormUpdate(); + this.isRemovingField = false; + } + @action closeModal() { if (this.args.onCloseModal) { @@ -10,6 +49,18 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen } } + get canSaveChanges() { + return this.fieldHasChanged && this.fieldName; + } + + get fieldHasChanged() { + if (this.args.isCreating) { + return true; + } + + return this.fieldName !== this.args.field.label; + } + get title() { if (this.args.isCreating) { return 'Voeg een veld toe'; @@ -17,4 +68,12 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return 'Pas een veld aan'; } + + get saveText() { + if (this.args.isCreating) { + return 'Bewaar'; + } + + return 'Pas aan'; + } } From 24ec5c15d94a25cd91df4a62ed2abd4e57f70c13 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 12:32:37 +0100 Subject: [PATCH 24/71] lmb-182: show the library entry dropdown --- .../crud-custom-field-modal.hbs | 22 ++++++ .../crud-custom-field-modal.js | 75 ++++++++++++++++++- 2 files changed, 96 insertions(+), 1 deletion(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 9fa8601f5..45c157a23 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -16,6 +16,28 @@ id="fieldName" /> + {{#if @isCreating}} + + Uit bibliotheek + + {{selected.name}} + + + {{/if}} <:footer> diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index d13004bbe..0b7899bf4 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -2,16 +2,44 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; +import { service } from '@ember/service'; import { task } from 'ember-concurrency'; +import { ForkingStore } from '@lblod/ember-submission-form-fields'; +import { consume } from 'ember-provide-consume-context'; -import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; +import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; +import { PROV } from 'frontend-lmb/rdf/namespaces'; +import { TEXT_CUSTOM_DISPLAY_TYPE_ID } from 'frontend-lmb/utils/well-known-ids'; export default class RdfInputFieldCrudCustomFieldModalComponent extends Component { + @consume('form-definition') formDefinition; + + @service store; + @tracked isRemovingField; + customFieldEntry = this.store.createRecord('library-entry', { + name: 'Eigen veld', + }); + // Field properties @tracked fieldName; + @tracked libraryFieldType = this.customFieldEntry; + @tracked displayType; + + constructor() { + super(...arguments); + + if (this.args.isCreating) { + this.displayTypes.then((displayTypes) => { + this.displayType = displayTypes.findBy( + 'id', + TEXT_CUSTOM_DISPLAY_TYPE_ID + ); + }); + } + } @action updateField(event) { @@ -21,6 +49,16 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen saveChanges = task(async () => {}); + @action + selectLibraryFieldType(libraryEntry) { + this.libraryFieldType = libraryEntry; + this.displayTypes.then((types) => { + this.displayType = + types.findBy('uri', libraryEntry.get('displayType.uri')) || + types.findBy('id', TEXT_CUSTOM_DISPLAY_TYPE_ID); + }); + } + async removeField() { await fetch(`/form-content/fields`, { method: 'DELETE', @@ -49,6 +87,41 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen } } + get displayTypes() { + return this.store.findAll('display-type').then((entries) => { + return entries.sortBy('label'); + }); + } + + get libraryFieldOptions() { + const forkingStore = new ForkingStore(); + forkingStore.parse( + this.formDefinition.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 canSaveChanges() { return this.fieldHasChanged && this.fieldName; } From e112ec208448816ae8e09ab1502485087105255e Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 12:37:19 +0100 Subject: [PATCH 25/71] lmb-182: validate input field before saving + reset values when modal closes --- .../rdf-input-fields/crud-custom-field-modal.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 0b7899bf4..ef8af8fc6 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -83,6 +83,9 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen @action closeModal() { if (this.args.onCloseModal) { + this.fieldName = null; + this.libraryFieldType = null; + this.displayType = null; this.args.onCloseModal(); } } @@ -123,17 +126,23 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen } get canSaveChanges() { - return this.fieldHasChanged && this.fieldName; + return ( + this.fieldHasChanged && this.hasValidFieldName && this.libraryFieldType + ); } get fieldHasChanged() { if (this.args.isCreating) { - return true; + return this.fieldName && this.libraryFieldType; } return this.fieldName !== this.args.field.label; } + get hasValidFieldName() { + return this.fieldName || this.fieldName.trim().length > 1; + } + get title() { if (this.args.isCreating) { return 'Voeg een veld toe'; From 7314b84ca23d644755f60c25e93b8da06f9852cc Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 12:50:39 +0100 Subject: [PATCH 26/71] lmb-182: add the displayType selector to the form --- .../crud-custom-field-modal.hbs | 22 ++++++++++++++++++ .../crud-custom-field-modal.js | 23 ++++++++++++++++--- 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 45c157a23..a26889e1a 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -38,6 +38,28 @@ {{/if}} + {{#if this.canSelectTypeForEntry}} + + Type + + {{selected.label}} + + + {{/if}} <:footer> diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index ef8af8fc6..e4500b0b5 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -59,6 +59,11 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen }); } + @action + selectDisplayType(displayType) { + this.displayType = displayType; + } + async removeField() { await fetch(`/form-content/fields`, { method: 'DELETE', @@ -133,14 +138,26 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen get fieldHasChanged() { if (this.args.isCreating) { - return this.fieldName && this.libraryFieldType; + return true; + } + + if (!this.hasValidFieldName) { + return false; } - return this.fieldName !== this.args.field.label; + if (this.canSelectTypeForEntry) { + return this.displayType !== this.args.field.type; + } + + return false; } get hasValidFieldName() { - return this.fieldName || this.fieldName.trim().length > 1; + return this.fieldName && this.fieldName.trim().length > 1; + } + + get canSelectTypeForEntry() { + return this.libraryFieldType === this.customFieldEntry; } get title() { From 3b4b529c136dfb9c14231f4fb49079929a81a7a3 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 12:58:30 +0100 Subject: [PATCH 27/71] lmb-182: show the crud modal instead of the other form in generate custom field button --- .../generate-custom-field-button.hbs | 91 ++----------------- 1 file changed, 9 insertions(+), 82 deletions(-) diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs index b3513605f..d8359812d 100644 --- a/app/components/generate-custom-field-button.hbs +++ b/app/components/generate-custom-field-button.hbs @@ -1,91 +1,18 @@ Voeg een veld toe -{{yield}} - -
-
- Naam - -
-
- Uit bibliotheek - - {{selected.name}} - -
-
- Type - - {{selected.label}} - -
- - - - - - Bewaar - - - - Annuleer - - - - -
+{{yield}} - \ No newline at end of file + \ No newline at end of file From 818293d91495a33bd5383bdce6bade5b9c89f619 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 15:37:07 +0100 Subject: [PATCH 28/71] lmb-182: can create and edit a custom field --- .../crud-custom-field-modal.hbs | 2 +- .../crud-custom-field-modal.js | 76 ++++++++++++++++--- 2 files changed, 68 insertions(+), 10 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index a26889e1a..02576d900 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -11,7 +11,7 @@ diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index e4500b0b5..4a6d3b35d 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -11,11 +11,15 @@ import { consume } from 'ember-provide-consume-context'; import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; import { PROV } from 'frontend-lmb/rdf/namespaces'; import { TEXT_CUSTOM_DISPLAY_TYPE_ID } from 'frontend-lmb/utils/well-known-ids'; +import { showErrorToast } from 'frontend-lmb/utils/toasts'; export default class RdfInputFieldCrudCustomFieldModalComponent extends Component { @consume('form-definition') formDefinition; + @consume('on-form-update') onFormUpdate; @service store; + @service toaster; + @service formReplacements; @tracked isRemovingField; @@ -31,14 +35,18 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen constructor() { super(...arguments); - if (this.args.isCreating) { - this.displayTypes.then((displayTypes) => { - this.displayType = displayTypes.findBy( - 'id', - TEXT_CUSTOM_DISPLAY_TYPE_ID - ); - }); + let byProperty = 'id'; + let withValue = TEXT_CUSTOM_DISPLAY_TYPE_ID; + if (!this.args.isCreating) { + const { label, displayType } = this.args.field; + this.fieldName = label; + byProperty = 'uri'; + withValue = displayType; } + + this.displayTypes.then((displayTypes) => { + this.displayType = displayTypes.findBy(byProperty, withValue); + }); } @action @@ -47,7 +55,40 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen this[name] = value; } - saveChanges = task(async () => {}); + saveChanges = task(async () => { + if (!this.args.isCreating) { + await this.removeField(); + } + try { + const result = await fetch( + `/form-content/${this.formDefinition.id}/fields`, + { + method: 'POST', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + body: JSON.stringify({ + displayType: this.displayType.uri, + libraryEntryUri: this.libraryFieldType.uri, + order: 9000, + name: this.fieldName, + }), + } + ); + + const body = await result.json(); + const newFormId = body.id; + this.formReplacements.setReplacement(this.formDefinition.id, newFormId); + this.onFormUpdate(); + } catch (error) { + showErrorToast( + this.toaster, + 'Er ging iets mis bij het opslaan van het veld.' + ); + return; + } + this.showEditFieldModal = false; + }); @action selectLibraryFieldType(libraryEntry) { @@ -101,6 +142,19 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen }); } + get libraryEntryUri() { + const localStore = new ForkingStore(); + localStore.parse(this.formDefinition.formTtl, SOURCE_GRAPH, 'text/turtle'); + const libraryEntree = localStore.any( + this.args.field.uri, + PROV('wasDerivedFrom'), + null, + SOURCE_GRAPH + ); + + return libraryEntree?.value; + } + get libraryFieldOptions() { const forkingStore = new ForkingStore(); forkingStore.parse( @@ -157,7 +211,11 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen } get canSelectTypeForEntry() { - return this.libraryFieldType === this.customFieldEntry; + if (this.args.isCreating) { + return this.libraryFieldType === this.customFieldEntry; + } + + return this.libraryEntryUri === this.customFieldEntry.uri; } get title() { From 2f6c3cf4024b5e7b36a19e339417a27328879719 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 15:39:13 +0100 Subject: [PATCH 29/71] lmb-182: cleanup the custom field wrapper --- .../rdf-input-fields/custom-field-wrapper.hbs | 76 ++--------- .../rdf-input-fields/custom-field-wrapper.js | 122 +----------------- 2 files changed, 9 insertions(+), 189 deletions(-) diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index a3a1d5cb6..d193bc345 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -10,7 +10,7 @@ @skin="link-secondary" @icon="pencil" @hideText={{true}} - {{on "click" (fn (mut this.showEditFieldModal) true)}} + {{on "click" (fn (mut this.showModal) true)}} > Pas aan @@ -31,70 +31,10 @@ {{/each}} {{/unless}} - -
- - Naam - - - - - - {{!-- Commented because we do not want to show the order as a number here for demo - - Positie in formulier - - --}} - - - - - Pas aan - - - - Verwijder - - - -
- \ No newline at end of file + \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index 6d8b6c139..48d8fe1f1 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -1,136 +1,16 @@ import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { service } from '@ember/service'; import { tracked } from '@glimmer/tracking'; -import { task } from 'ember-concurrency'; import { consume } from 'ember-provide-consume-context'; -import { ForkingStore } from '@lblod/ember-submission-form-fields'; - -import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; -import { showErrorToast, showSuccessToast } from 'frontend-lmb/utils/toasts'; -import { PROV } from 'frontend-lmb/rdf/namespaces'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { @consume('on-form-update') onFormUpdate; @consume('form-definition') formDefinition; - @service toaster; - @service formReplacements; - @service semanticFormRepository; - - @tracked removing = false; - @tracked showEditFieldModal; - - // Field properties - @tracked name; - @tracked type; - @tracked order; + @tracked showModal; get title() { return this.args.field?.label; } - - get canSaveChanges() { - if (this.libraryEntree) { - return this.fieldHasChanged && this.name && this.order; - } - - return this.fieldHasChanged && this.name && this.type && this.order; - } - - get fieldHasChanged() { - const { label, order, displayType } = this.args.field; - - return ( - this.name != label || this.type != displayType || this.order != order - ); - } - - @action - async loadCurrentFieldInfo() { - const { label, order, displayType } = this.args.field; - this.name = label; - this.type = displayType; - this.order = order; - } - - @action - async onRemove() { - this.removing = true; - await this.removeField(); - this.onFormUpdate(); - this.removed = false; - } - - @action - closeEditFieldModal() { - this.showEditFieldModal = false; - } - - @action - updateField(event) { - const { name, value } = event.target; - this[name] = value; - } - - saveChanges = task(async () => { - await this.removeField(); - try { - const result = await fetch( - `/form-content/${this.formDefinition.id}/fields`, - { - method: 'POST', - headers: { - 'Content-Type': JSON_API_TYPE, - }, - body: JSON.stringify({ - displayType: this.type, - libraryEntryUri: this.libraryEntree, - order: this.order, - name: this.name, - }), - } - ); - - const body = await result.json(); - const newFormId = body.id; - this.formReplacements.setReplacement(this.formDefinition.id, newFormId); - this.onFormUpdate(); - } catch (error) { - showErrorToast( - this.toaster, - 'Er ging iets mis bij het opslaan van het veld.' - ); - } - this.showEditFieldModal = false; - showSuccessToast(this.toaster, 'Het veld werd succesvol aangepast.'); - }); - - async removeField() { - await fetch(`/form-content/fields`, { - method: 'DELETE', - headers: { - 'Content-Type': JSON_API_TYPE, - }, - body: JSON.stringify({ - fieldUri: this.args.field.uri.value, - formUri: this.args.form.uri, - }), - }); - } - - get libraryEntree() { - const localStore = new ForkingStore(); - localStore.parse(this.formDefinition.formTtl, SOURCE_GRAPH, 'text/turtle'); - const libraryEntree = localStore.any( - this.args.field.uri, - PROV('wasDerivedFrom'), - null, - SOURCE_GRAPH - ); - - return libraryEntree?.value; - } } From 32a324edc46ec96330fa19346430c676360b43a5 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 15:48:06 +0100 Subject: [PATCH 30/71] lmb-182: move the generate custom field component logic to editable field --- app/components/editable-form.hbs | 18 ++- app/components/editable-form.js | 5 + .../generate-custom-field-button.hbs | 18 --- .../generate-custom-field-button.js | 136 ------------------ .../generate-custom-field-button-test.js | 27 ---- 5 files changed, 21 insertions(+), 183 deletions(-) delete mode 100644 app/components/generate-custom-field-button.hbs delete mode 100644 app/components/generate-custom-field-button.js delete mode 100644 tests/integration/components/generate-custom-field-button-test.js diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index caa635db5..4a27f9909 100644 --- a/app/components/editable-form.hbs +++ b/app/components/editable-form.hbs @@ -8,9 +8,23 @@ @customHistoryMessage={{@customHistoryMessage}} > {{#if this.editableFormsEnabled}} - + Voeg een veld toe + + + {{yield}} + + {{/if}} {{yield}} diff --git a/app/components/editable-form.js b/app/components/editable-form.js index 4e4b2d679..d1e014c19 100644 --- a/app/components/editable-form.js +++ b/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() { diff --git a/app/components/generate-custom-field-button.hbs b/app/components/generate-custom-field-button.hbs deleted file mode 100644 index d8359812d..000000000 --- a/app/components/generate-custom-field-button.hbs +++ /dev/null @@ -1,18 +0,0 @@ - - Voeg een veld toe - - -{{yield}} - - \ No newline at end of file diff --git a/app/components/generate-custom-field-button.js b/app/components/generate-custom-field-button.js deleted file mode 100644 index 8bee9d2db..000000000 --- a/app/components/generate-custom-field-button.js +++ /dev/null @@ -1,136 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { service } from '@ember/service'; -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; - } - - get disabled() { - 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; - this.fieldName = ''; - } - - @action - closeModal() { - 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 { - const result = await fetch(`/form-content/${this.args.form.id}/fields`, { - method: 'POST', - headers: { - 'Content-Type': JSON_API_TYPE, - }, - body: JSON.stringify({ - displayType: this.selectedDisplayType.uri, - libraryEntryUri: this.selectedLibraryFieldType.uri, - order: 9000, - name: this.fieldName, - }), - }); - - const body = await result.json(); - const newFormId = body.id; - this.formReplacements.setReplacement(this.args.form.id, newFormId); - if (this.args.onUpdate) { - this.args.onUpdate(); - } - } catch (error) { - showErrorToast( - this.toaster, - 'Er ging iets mis bij het opslaan van het veld.' - ); - } - this.loading = false; - this.showModal = false; - } - - @action updateName(event) { - this.fieldName = event.target.value; - } -} diff --git a/tests/integration/components/generate-custom-field-button-test.js b/tests/integration/components/generate-custom-field-button-test.js deleted file mode 100644 index 01be993b7..000000000 --- a/tests/integration/components/generate-custom-field-button-test.js +++ /dev/null @@ -1,27 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'frontend-lmb/tests/helpers'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module( - 'Integration | Component | generate-custom-field-button', - function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); - - await render(hbs``); - - assert.dom(this.element).hasText(''); - - // Template block usage: - await render(hbs` - template block text -`); - - assert.dom(this.element).hasText('template block text'); - }); - } -); From 2c79dbc1e3551963dbc18d82fbc4db7fa76fcd40 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 15:58:15 +0100 Subject: [PATCH 31/71] lmb-182: always show the annuleer button --- .../crud-custom-field-modal.hbs | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 02576d900..86c8134e2 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -63,25 +63,26 @@ <:footer> - - - + + - {{this.saveText}} - - - {{#if @isCreating}} + + {{this.saveText}} + + Annuleer - {{else}} + + {{#unless @isCreating}} Verwijder - {{/if}} - + {{/unless}} +
\ No newline at end of file From 2e13056b027ac5273b2aa2b9ed3a822be1f4fee1 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 10 Jan 2025 16:55:53 +0100 Subject: [PATCH 32/71] lmb-182: add changing the order to the editable form --- .../crud-custom-field-modal.js | 10 ++- .../rdf-input-fields/custom-field-wrapper.hbs | 63 +++++++++++++------ .../rdf-input-fields/custom-field-wrapper.js | 24 +++++++ 3 files changed, 75 insertions(+), 22 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 4a6d3b35d..7e8dd35b7 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -31,6 +31,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen @tracked fieldName; @tracked libraryFieldType = this.customFieldEntry; @tracked displayType; + @tracked order; constructor() { super(...arguments); @@ -38,12 +39,16 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen let byProperty = 'id'; let withValue = TEXT_CUSTOM_DISPLAY_TYPE_ID; if (!this.args.isCreating) { - const { label, displayType } = this.args.field; + const { label, displayType, order } = this.args.field; + console.log(`${label}: order = ${order}`); + this.fieldName = label; + this.order = order; byProperty = 'uri'; withValue = displayType; } + this.order = 9000; // This is the default order for the field this.displayTypes.then((displayTypes) => { this.displayType = displayTypes.findBy(byProperty, withValue); }); @@ -59,6 +64,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen if (!this.args.isCreating) { await this.removeField(); } + console.log(`${this.fieldName}: order = ${this.order}`); try { const result = await fetch( `/form-content/${this.formDefinition.id}/fields`, @@ -70,7 +76,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen body: JSON.stringify({ displayType: this.displayType.uri, libraryEntryUri: this.libraryFieldType.uri, - order: 9000, + order: this.order, name: this.fieldName, }), } diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index d193bc345..009aa956c 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -1,27 +1,50 @@ {{#unless this.removed}} -
- {{this.title}} - - Pas aan - -
-
+
- {{yield}} +
+ {{this.title}} + + Pas aan + +
+
+
+ {{yield}} +
+
+
+
+ + Naar boven + + + Naar onder +
+ {{#each this.errors as |error|}} {{error.resultMessage}} {{/each}} diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index 48d8fe1f1..6e7879ee6 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -3,6 +3,9 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { consume } from 'ember-provide-consume-context'; +import { task } from 'ember-concurrency'; + +import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { @consume('on-form-update') onFormUpdate; @@ -13,4 +16,25 @@ export default class RdfInputFieldsCustomFieldWrapperComponent extends Component get title() { return this.args.field?.label; } + + moveField = task(async (direction) => { + const result = await fetch( + `/form-content/${this.formDefinition.id}/fields/move`, + { + method: 'POST', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + body: JSON.stringify({ + fieldUri: this.args.field.uri.value, + formUri: this.args.form.uri, + direction, + }), + } + ); + + if (result.ok) { + this.onFormUpdate(); + } + }); } From 18057396b85033b81a7e325e46b4b69081506f9c Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 13:08:32 +0100 Subject: [PATCH 33/71] lmb-182: remove display type selector component --- .../display-type-selector.hbs | 24 ------------- .../display-type-selector.js | 34 ------------------- 2 files changed, 58 deletions(-) delete mode 100644 app/components/custom-form-fields/display-type-selector.hbs delete mode 100644 app/components/custom-form-fields/display-type-selector.js diff --git a/app/components/custom-form-fields/display-type-selector.hbs b/app/components/custom-form-fields/display-type-selector.hbs deleted file mode 100644 index cee392da4..000000000 --- a/app/components/custom-form-fields/display-type-selector.hbs +++ /dev/null @@ -1,24 +0,0 @@ -
- {{#unless @inTable}} - - {{this.label}} - - {{/unless}} - - - {{displayType.label}} - - -
\ No newline at end of file diff --git a/app/components/custom-form-fields/display-type-selector.js b/app/components/custom-form-fields/display-type-selector.js deleted file mode 100644 index 5b1c74018..000000000 --- a/app/components/custom-form-fields/display-type-selector.js +++ /dev/null @@ -1,34 +0,0 @@ -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 - ); - } -} From c2087cbb48eccc648baa4e4d46a4c78b6cfbe681 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 13:18:36 +0100 Subject: [PATCH 34/71] lmb-182: fix can edit a library entree field --- app/components/rdf-input-fields/crud-custom-field-modal.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 7e8dd35b7..0b7c8dace 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -40,7 +40,6 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen let withValue = TEXT_CUSTOM_DISPLAY_TYPE_ID; if (!this.args.isCreating) { const { label, displayType, order } = this.args.field; - console.log(`${label}: order = ${order}`); this.fieldName = label; this.order = order; @@ -209,7 +208,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return this.displayType !== this.args.field.type; } - return false; + return this.fieldName !== this.args.field.label; } get hasValidFieldName() { From aab2d3ed5ad175849bcfd7f9020d2413dac10097 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 13:24:16 +0100 Subject: [PATCH 35/71] lmb-182: remove the order from the crud model logic --- .../rdf-input-fields/crud-custom-field-modal.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 0b7c8dace..f3dd2fc2e 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -27,11 +27,9 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen name: 'Eigen veld', }); - // Field properties @tracked fieldName; @tracked libraryFieldType = this.customFieldEntry; @tracked displayType; - @tracked order; constructor() { super(...arguments); @@ -39,15 +37,13 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen let byProperty = 'id'; let withValue = TEXT_CUSTOM_DISPLAY_TYPE_ID; if (!this.args.isCreating) { - const { label, displayType, order } = this.args.field; + const { label, displayType } = this.args.field; this.fieldName = label; - this.order = order; byProperty = 'uri'; withValue = displayType; } - this.order = 9000; // This is the default order for the field this.displayTypes.then((displayTypes) => { this.displayType = displayTypes.findBy(byProperty, withValue); }); @@ -63,7 +59,6 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen if (!this.args.isCreating) { await this.removeField(); } - console.log(`${this.fieldName}: order = ${this.order}`); try { const result = await fetch( `/form-content/${this.formDefinition.id}/fields`, @@ -75,7 +70,6 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen body: JSON.stringify({ displayType: this.displayType.uri, libraryEntryUri: this.libraryFieldType.uri, - order: this.order, name: this.fieldName, }), } From b853688df47d1ceb7cdca697d38717711b3ace67 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Mon, 13 Jan 2025 12:56:25 +0100 Subject: [PATCH 36/71] pass more params to editable forms, make edit mandataris form editable --- app/components/editable-form.hbs | 2 ++ app/templates/mandatarissen/persoon/mandataris.hbs | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index 4a27f9909..8437cf154 100644 --- a/app/components/editable-form.hbs +++ b/app/components/editable-form.hbs @@ -6,6 +6,8 @@ @onSave={{@onSave}} @formInitialized={{@formInitialized}} @customHistoryMessage={{@customHistoryMessage}} + @buildMetaTtl={{@buildMetaTtl}} + @saveTitle={{@saveTitle}} > {{#if this.editableFormsEnabled}} {{/if}}
- Date: Tue, 14 Jan 2025 14:59:08 +0100 Subject: [PATCH 37/71] lmb-182: remove the form action event for updating the fields in the form --- app/components/rdf-input-fields/crud-custom-field-modal.hbs | 6 ++---- app/components/rdf-input-fields/crud-custom-field-modal.js | 5 ++--- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 86c8134e2..db6d94ebb 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -5,15 +5,15 @@ @title={{this.title}} > <:body> -
+ Naam {{#if @isCreating}} @@ -31,7 +31,6 @@ @selected={{this.libraryFieldType}} @onChange={{this.selectLibraryFieldType}} id="library-entry" - name="libraryEntree" as |selected| > {{selected.name}} @@ -53,7 +52,6 @@ @selected={{this.displayType}} @onChange={{this.selectDisplayType}} id="display-type" - name="displayType" as |selected| > {{selected.label}} diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index f3dd2fc2e..9fd451368 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -50,9 +50,8 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen } @action - updateField(event) { - const { name, value } = event.target; - this[name] = value; + updateFieldName(event) { + this.fieldName = event.target?.value; } saveChanges = task(async () => { From 42e1a40c2f257409e3c326d42a913cab1667812e Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 16:00:53 +0100 Subject: [PATCH 38/71] lmb-182: make update a separate call + fix canSaveChanges --- .../crud-custom-field-modal.hbs | 28 ++++++---- .../crud-custom-field-modal.js | 53 +++++++++++-------- 2 files changed, 49 insertions(+), 32 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index db6d94ebb..e45f73325 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -64,17 +64,27 @@
- - {{this.saveText}} - + {{#if @isCreating}} + + Bewaar + + {{else}} + + Pas aan + + {{/if}} Annuleer diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 9fd451368..2ae547b61 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -54,10 +54,21 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen this.fieldName = event.target?.value; } + updateField = task(async () => { + await fetch(`/form-content/${this.formDefinition.id}/fields`, { + method: 'PUT', + headers: { + 'Content-Type': JSON_API_TYPE, + }, + body: JSON.stringify({ + field: this.args.field.uri, + displayType: this.displayType.uri, + name: this.fieldName, + }), + }); + }); + saveChanges = task(async () => { - if (!this.args.isCreating) { - await this.removeField(); - } try { const result = await fetch( `/form-content/${this.formDefinition.id}/fields`, @@ -103,7 +114,9 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen this.displayType = displayType; } - async removeField() { + @action + async onRemove() { + this.isRemovingField = true; await fetch(`/form-content/fields`, { method: 'DELETE', headers: { @@ -114,12 +127,6 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen formUri: this.args.form.uri, }), }); - } - - @action - async onRemove() { - this.isRemovingField = true; - await this.removeField(); this.onFormUpdate(); this.isRemovingField = false; } @@ -190,18 +197,18 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen get fieldHasChanged() { if (this.args.isCreating) { - return true; - } - - if (!this.hasValidFieldName) { - return false; + return this.hasValidFieldName; } if (this.canSelectTypeForEntry) { - return this.displayType !== this.args.field.type; + return ( + this.hasValidFieldName && + (this.fieldName !== this.args.field.label || + this.displayType.uri !== this.args.field.displayType) + ); } - return this.fieldName !== this.args.field.label; + return this.hasValidFieldName && this.fieldName !== this.args.field.label; } get hasValidFieldName() { @@ -216,19 +223,19 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return this.libraryEntryUri === this.customFieldEntry.uri; } - get title() { + get saveTooltipText() { if (this.args.isCreating) { - return 'Voeg een veld toe'; + return 'Vul eerst al de velden in'; } - return 'Pas een veld aan'; + return 'Geen aanpassingen gevonden'; } - get saveText() { + get title() { if (this.args.isCreating) { - return 'Bewaar'; + return 'Voeg een veld toe'; } - return 'Pas aan'; + return 'Pas een veld aan'; } } From 86ec92eae24da6713a5dc4b352662842a1bcc565 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 17:03:51 +0100 Subject: [PATCH 39/71] lmb-182: when pressing update it calls the update endpoint and the form is updated --- .../crud-custom-field-modal.js | 32 ++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 2ae547b61..0ee61dfd2 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -55,17 +55,27 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen } updateField = task(async () => { - await fetch(`/form-content/${this.formDefinition.id}/fields`, { - method: 'PUT', - headers: { - 'Content-Type': JSON_API_TYPE, - }, - body: JSON.stringify({ - field: this.args.field.uri, - displayType: this.displayType.uri, - name: this.fieldName, - }), - }); + 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, + }), + }); + this.onFormUpdate(); + } catch (error) { + showErrorToast( + this.toaster, + 'Er ging iets mis bij het opslaan van het veld.' + ); + return; + } + this.showEditFieldModal = false; }); saveChanges = task(async () => { From d8a1dbfe5aba75e65408ce8f1a138819c63d2d0a Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 17:08:18 +0100 Subject: [PATCH 40/71] lmb-182: add loading message for create and update --- app/components/rdf-input-fields/crud-custom-field-modal.hbs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index e45f73325..3c9f713c0 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -73,6 +73,7 @@ {{on "click" (perform this.saveChanges)}} @disabled={{not this.canSaveChanges}} @loading={{this.saveChanges.isRunning}} + @loadingMessage="Het veld wordt aangemaakt" > Bewaar @@ -81,6 +82,7 @@ {{on "click" (perform this.updateField)}} @disabled={{not this.canSaveChanges}} @loading={{this.updateField.isRunning}} + @loadingMessage="Het veld wordt aangepast" > Pas aan From 8ce3a1d691009a4e4c181605476bf8ff073c3458 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 15 Jan 2025 09:51:10 +0100 Subject: [PATCH 41/71] lmb-182: disable the type when a library entry is used --- .../crud-custom-field-modal.hbs | 41 +++++++++---------- .../crud-custom-field-modal.js | 20 +++++---- app/utils/well-known-uris.js | 9 ++++ 3 files changed, 42 insertions(+), 28 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 3c9f713c0..17504a9b8 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -37,27 +37,26 @@ {{/if}} - {{#if this.canSelectTypeForEntry}} - - Type - - {{selected.label}} - - - {{/if}} + + Type + + {{selected.label}} + + <:footer> diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 0ee61dfd2..fac0eb853 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -10,8 +10,11 @@ import { consume } from 'ember-provide-consume-context'; import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; import { PROV } from 'frontend-lmb/rdf/namespaces'; -import { TEXT_CUSTOM_DISPLAY_TYPE_ID } from 'frontend-lmb/utils/well-known-ids'; import { showErrorToast } from 'frontend-lmb/utils/toasts'; +import { + LIBRARY_ENTREES, + TEXT_CUSTOM_DISPLAY_TYPE, +} from 'frontend-lmb/utils/well-known-uris'; export default class RdfInputFieldCrudCustomFieldModalComponent extends Component { @consume('form-definition') formDefinition; @@ -34,18 +37,17 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen constructor() { super(...arguments); - let byProperty = 'id'; - let withValue = TEXT_CUSTOM_DISPLAY_TYPE_ID; + let withValue = TEXT_CUSTOM_DISPLAY_TYPE; if (!this.args.isCreating) { const { label, displayType } = this.args.field; this.fieldName = label; - byProperty = 'uri'; withValue = displayType; } + console.log(this.formDefinition); this.displayTypes.then((displayTypes) => { - this.displayType = displayTypes.findBy(byProperty, withValue); + this.displayType = displayTypes.findBy('uri', withValue); }); } @@ -115,7 +117,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen this.displayTypes.then((types) => { this.displayType = types.findBy('uri', libraryEntry.get('displayType.uri')) || - types.findBy('id', TEXT_CUSTOM_DISPLAY_TYPE_ID); + types.findBy('uri', TEXT_CUSTOM_DISPLAY_TYPE); }); } @@ -158,6 +160,10 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen } get libraryEntryUri() { + if (!this.args.field) { + return null; + } + const localStore = new ForkingStore(); localStore.parse(this.formDefinition.formTtl, SOURCE_GRAPH, 'text/turtle'); const libraryEntree = localStore.any( @@ -230,7 +236,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return this.libraryFieldType === this.customFieldEntry; } - return this.libraryEntryUri === this.customFieldEntry.uri; + return !LIBRARY_ENTREES.includes(this.libraryEntryUri); } get saveTooltipText() { diff --git a/app/utils/well-known-uris.js b/app/utils/well-known-uris.js index 926aabc80..78022e71d 100644 --- a/app/utils/well-known-uris.js +++ b/app/utils/well-known-uris.js @@ -98,3 +98,12 @@ export const KANDIDATENLIJST_SENAAT = 'http://data.vlaanderen.be/id/concept/KandidatenlijstLijsttype/af845873-f8fa-4c7e-b67c-10e44957c40e'; export const KANDIDATENLIJST_KAMER_VOLKSVERTEGENWOORDIGING = 'http://data.vlaanderen.be/id/concept/KandidatenlijstLijsttype/83b89937-84e1-4e6c-a070-83b0fda51871'; + +export const TEXT_CUSTOM_DISPLAY_TYPE = + 'http://lblod.data.gift/display-types/lmb/custom-string-input'; + +export const LIBRARY_ENTREES = [ + 'http://data.lblod.info/id/lmb/form-library-entries/095d1329-a9fa-4d72-8c49-eb52aaf893de', // Verblijfsplaats + 'http://data.lblod.info/id/lmb/form-library-entries/31004e04-1b1a-4fda-80ae-612d67a14b5e', // Geboorteplaats + 'http://data.lblod.info/id/lmb/form-library-entries/8991472a-db3f-4f61-b070-5da7883be37d', // Telefoonnummer +]; From 381c5894de2a40314d53acdc822c27f26d63c94c Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 15 Jan 2025 10:01:14 +0100 Subject: [PATCH 42/71] lmb-182: cleanup --- app/components/editable-form.js | 2 +- app/components/rdf-input-fields/crud-custom-field-modal.js | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/app/components/editable-form.js b/app/components/editable-form.js index d1e014c19..985726c33 100644 --- a/app/components/editable-form.js +++ b/app/components/editable-form.js @@ -14,7 +14,7 @@ export default class EditableFormComponent extends Component { @service semanticFormRepository; @service features; - @tracked showModal = false; + @tracked showModal; constructor() { super(...arguments); diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index fac0eb853..6e5c2e8e3 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -44,7 +44,6 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen this.fieldName = label; withValue = displayType; } - console.log(this.formDefinition); this.displayTypes.then((displayTypes) => { this.displayType = displayTypes.findBy('uri', withValue); @@ -77,7 +76,6 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen ); return; } - this.showEditFieldModal = false; }); saveChanges = task(async () => { @@ -108,7 +106,6 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen ); return; } - this.showEditFieldModal = false; }); @action From a51e1e906e0c3ee1f0b1bafb6656b27b6e743e1f Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 15 Jan 2025 11:45:31 +0100 Subject: [PATCH 43/71] lmb-182: rename saveChanges method to createField to prevent mistakes --- .../rdf-input-fields/crud-custom-field-modal.hbs | 16 ++++++++++++---- .../rdf-input-fields/crud-custom-field-modal.js | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 17504a9b8..938f3c431 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -69,9 +69,9 @@ > {{#if @isCreating}} Bewaar @@ -87,7 +87,13 @@ {{/if}} - + Annuleer @@ -95,7 +101,9 @@ { + createField = task(async () => { try { const result = await fetch( `/form-content/${this.formDefinition.id}/fields`, From d0c736070da1597eb19ad80dfce8fe731e6e5ff5 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Wed, 22 Jan 2025 09:31:37 +0100 Subject: [PATCH 44/71] redo delete field confirmation and make forms rerender on close/open --- app/components/editable-form.hbs | 17 +- app/components/editable-form.js | 10 +- .../crud-custom-field-modal.hbs | 157 ++++++++++-------- .../crud-custom-field-modal.js | 27 ++- .../rdf-input-fields/custom-field-wrapper.hbs | 15 +- app/styles/_shame.scss | 7 + 6 files changed, 139 insertions(+), 94 deletions(-) diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index 8437cf154..7cd4dda37 100644 --- a/app/components/editable-form.hbs +++ b/app/components/editable-form.hbs @@ -13,7 +13,7 @@ Voeg een veld toe @@ -21,13 +21,14 @@ {{yield}} - + {{#if this.showEditModal}} + + {{/if}} {{/if}} {{yield}} diff --git a/app/components/editable-form.js b/app/components/editable-form.js index 985726c33..9a7dd0abc 100644 --- a/app/components/editable-form.js +++ b/app/components/editable-form.js @@ -14,7 +14,7 @@ export default class EditableFormComponent extends Component { @service semanticFormRepository; @service features; - @tracked showModal; + @tracked showEditModal; constructor() { super(...arguments); @@ -31,7 +31,7 @@ export default class EditableFormComponent extends Component { ); this.currentForm = form; this.loading = false; - this.showModal = false; + this.showEditModal = false; } get editableFormsEnabled() { @@ -48,4 +48,10 @@ export default class EditableFormComponent extends Component { get formDefinition() { return this.currentForm; } + + @action + onCloseEditModal() { + this.showEditModal = false; + this.onFormUpdate(); + } } diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 938f3c431..832b4ebc4 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -1,98 +1,115 @@ <:body> -
- - Naam - - - {{#if @isCreating}} + {{#if this.wantsToRemove}} +
+ + Dit veld zal verwijderd worden voor + alle items + die bewerkt worden door dit formulier! + {{#if this.deleteWillLoseData}}Dit betekent dat u de + gegevens zal verliezen + die opgeslagen werd in dit veld!{{/if}} + Wilt u nog steeds doorgaan? +
+ {{else}} + + + Naam + + + {{#if @isCreating}} + + Uit bibliotheek + + {{selected.name}} + + + {{/if}} - Uit bibliotheek + Type - {{selected.name}} + {{selected.label}} - {{/if}} - - Type - - {{selected.label}} - - -
+ + {{/if}} <:footer>
- - {{#if @isCreating}} - - Bewaar - - {{else}} - - Pas aan - - {{/if}} - + {{#unless this.wantsToRemove}} + + {{#if @isCreating}} + + Bewaar + + {{else}} + + Pas aan + + {{/if}} + + {{/unless}} Annuleer diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 426a2d2b7..150d615eb 100644 --- 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 wantsToRemove; customFieldEntry = this.store.createRecord('library-entry', { name: 'Eigen veld', @@ -50,6 +51,10 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen }); } + get deleteWillLoseData() { + return this.libraryFieldType?.uri !== null; + } + @action updateFieldName(event) { this.fieldName = event.target?.value; @@ -123,8 +128,21 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen this.displayType = displayType; } + @action + onCancel() { + if (this.wantsToRemove) { + this.wantsToRemove = false; + return; + } + this.closeModal(); + } + @action async onRemove() { + if (!this.wantsToRemove) { + this.wantsToRemove = true; + return; + } this.isRemovingField = true; await fetch(`/form-content/fields`, { method: 'DELETE', @@ -142,12 +160,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen @action closeModal() { - if (this.args.onCloseModal) { - this.fieldName = null; - this.libraryFieldType = null; - this.displayType = null; - this.args.onCloseModal(); - } + this.args.onCloseModal(); } get displayTypes() { @@ -217,7 +230,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return ( this.hasValidFieldName && (this.fieldName !== this.args.field.label || - this.displayType.uri !== this.args.field.displayType) + this.displayType?.uri !== this.args.field.displayType) ); } diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 009aa956c..5d0e67913 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -54,10 +54,11 @@ {{/each}} {{/unless}} - \ No newline at end of file +{{#if this.showModal}} + +{{/if}} \ No newline at end of file diff --git a/app/styles/_shame.scss b/app/styles/_shame.scss index ff7a52935..6e0135add 100644 --- a/app/styles/_shame.scss +++ b/app/styles/_shame.scss @@ -393,3 +393,10 @@ $au-region-breakpoint: medium !default; .au-form-row-full-width { align-items: normal !important; } + +.warning-panel { + background-color: var(--au-red-200); + padding: 1rem; + border-radius: 3px; + border: solid 1px var(--au-red-600); +} From 24253b654eaa4d30c2775e31a2b5972a2194ba28 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 17 Dec 2024 13:49:09 +0100 Subject: [PATCH 45/71] add field basic input wrapper component and example --- .../rdf-input-fields/custom-field-wrapper.hbs | 15 +++++++-------- .../rdf-input-fields/custom-string-input.hbs | 1 + .../rdf-input-fields/custom-string-input.js | 3 +++ 3 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 app/components/rdf-input-fields/custom-string-input.js diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 5d0e67913..009aa956c 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -54,11 +54,10 @@ {{/each}} {{/unless}} -{{#if this.showModal}} - -{{/if}} \ No newline at end of file + \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-string-input.hbs b/app/components/rdf-input-fields/custom-string-input.hbs index 3584a68b0..067ee78f4 100644 --- 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}} > Date: Mon, 13 Jan 2025 09:55:30 +0100 Subject: [PATCH 46/71] lmb-181: register and create empty custom codelist component --- app/components/custom-form-fields/codelist-input.hbs | 1 + app/components/custom-form-fields/codelist-input.js | 11 +++++++++++ app/utils/register-form-fields.js | 7 +++++++ 3 files changed, 19 insertions(+) create mode 100644 app/components/custom-form-fields/codelist-input.hbs create mode 100644 app/components/custom-form-fields/codelist-input.js diff --git a/app/components/custom-form-fields/codelist-input.hbs b/app/components/custom-form-fields/codelist-input.hbs new file mode 100644 index 000000000..fb5c4b157 --- /dev/null +++ b/app/components/custom-form-fields/codelist-input.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/app/components/custom-form-fields/codelist-input.js b/app/components/custom-form-fields/codelist-input.js new file mode 100644 index 000000000..e8825c31d --- /dev/null +++ b/app/components/custom-form-fields/codelist-input.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { service } from '@ember/service'; + +import { task } from 'ember-concurrency'; +import { ForkingStore } from '@lblod/ember-submission-form-fields'; +import { consume } from 'ember-provide-consume-context'; + +export default class CustomFormFieldsCodelistInputComponent extends Component {} diff --git a/app/utils/register-form-fields.js b/app/utils/register-form-fields.js index 909a4647d..e3ef95a69 100644 --- a/app/utils/register-form-fields.js +++ b/app/utils/register-form-fields.js @@ -24,6 +24,8 @@ import RdfInputFieldsCustomDateInputComponent from 'frontend-lmb/components/rdf- import RdfInputFieldsCustomNumberInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-number-input'; import RdfInputFieldsCustomTextInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-text-input'; +import CustomFormFieldsCodelistInputComponent from 'frontend-lmb/components/custom-form-fields/codelist-input'; + export const registerCustomFormFields = () => { registerFormFields([ { @@ -137,5 +139,10 @@ export const registerCustomFormFields = () => { displayType: 'http://lblod.data.gift/display-types/lmb/custom-text-input', edit: RdfInputFieldsCustomTextInputComponent, }, + { + displayType: + 'http://lblod.data.gift/display-types/lmb/custom-codelist-input', + edit: CustomFormFieldsCodelistInputComponent, + }, ]); }; From 9b9991d54d4e46b3d2368e45ebb1516fe72f6202 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Mon, 13 Jan 2025 09:59:20 +0100 Subject: [PATCH 47/71] lmb-181: register and create empty custom nationality component --- .../custom-form-fields/nationality-input.hbs | 1 + .../custom-form-fields/nationality-input.js | 11 +++++++++++ app/utils/register-form-fields.js | 6 ++++++ 3 files changed, 18 insertions(+) create mode 100644 app/components/custom-form-fields/nationality-input.hbs create mode 100644 app/components/custom-form-fields/nationality-input.js diff --git a/app/components/custom-form-fields/nationality-input.hbs b/app/components/custom-form-fields/nationality-input.hbs new file mode 100644 index 000000000..fb5c4b157 --- /dev/null +++ b/app/components/custom-form-fields/nationality-input.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/app/components/custom-form-fields/nationality-input.js b/app/components/custom-form-fields/nationality-input.js new file mode 100644 index 000000000..fd2234225 --- /dev/null +++ b/app/components/custom-form-fields/nationality-input.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { service } from '@ember/service'; + +import { task } from 'ember-concurrency'; +import { ForkingStore } from '@lblod/ember-submission-form-fields'; +import { consume } from 'ember-provide-consume-context'; + +export default class CustomFormFieldsNationalityInputComponent extends Component {} diff --git a/app/utils/register-form-fields.js b/app/utils/register-form-fields.js index e3ef95a69..51b93700d 100644 --- a/app/utils/register-form-fields.js +++ b/app/utils/register-form-fields.js @@ -25,6 +25,7 @@ import RdfInputFieldsCustomNumberInputComponent from 'frontend-lmb/components/rd import RdfInputFieldsCustomTextInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-text-input'; import CustomFormFieldsCodelistInputComponent from 'frontend-lmb/components/custom-form-fields/codelist-input'; +import CustomFormFieldsNationalityInputComponent from 'frontend-lmb/components/custom-form-fields/nationality-input'; export const registerCustomFormFields = () => { registerFormFields([ @@ -144,5 +145,10 @@ export const registerCustomFormFields = () => { 'http://lblod.data.gift/display-types/lmb/custom-codelist-input', edit: CustomFormFieldsCodelistInputComponent, }, + { + displayType: + 'http://lblod.data.gift/display-types/lmb/custom-nationality-input', + edit: CustomFormFieldsNationalityInputComponent, + }, ]); }; From 60977b0b9b5086860b362e946db44e423461573d Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Mon, 13 Jan 2025 10:01:46 +0100 Subject: [PATCH 48/71] lmb-181: register and create empty custom telephone component --- app/components/custom-form-fields/telephone-input.hbs | 1 + app/components/custom-form-fields/telephone-input.js | 11 +++++++++++ app/utils/register-form-fields.js | 6 ++++++ 3 files changed, 18 insertions(+) create mode 100644 app/components/custom-form-fields/telephone-input.hbs create mode 100644 app/components/custom-form-fields/telephone-input.js diff --git a/app/components/custom-form-fields/telephone-input.hbs b/app/components/custom-form-fields/telephone-input.hbs new file mode 100644 index 000000000..fb5c4b157 --- /dev/null +++ b/app/components/custom-form-fields/telephone-input.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/app/components/custom-form-fields/telephone-input.js b/app/components/custom-form-fields/telephone-input.js new file mode 100644 index 000000000..86b0f0c58 --- /dev/null +++ b/app/components/custom-form-fields/telephone-input.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { service } from '@ember/service'; + +import { task } from 'ember-concurrency'; +import { ForkingStore } from '@lblod/ember-submission-form-fields'; +import { consume } from 'ember-provide-consume-context'; + +export default class CustomFormFieldsTelephoneInputComponent extends Component {} diff --git a/app/utils/register-form-fields.js b/app/utils/register-form-fields.js index 51b93700d..04a40b5ce 100644 --- a/app/utils/register-form-fields.js +++ b/app/utils/register-form-fields.js @@ -26,6 +26,7 @@ import RdfInputFieldsCustomTextInputComponent from 'frontend-lmb/components/rdf- import CustomFormFieldsCodelistInputComponent from 'frontend-lmb/components/custom-form-fields/codelist-input'; import CustomFormFieldsNationalityInputComponent from 'frontend-lmb/components/custom-form-fields/nationality-input'; +import CustomFormFieldsTelephoneInputComponent from 'frontend-lmb/components/custom-form-fields/telephone-input'; export const registerCustomFormFields = () => { registerFormFields([ @@ -150,5 +151,10 @@ export const registerCustomFormFields = () => { 'http://lblod.data.gift/display-types/lmb/custom-nationality-input', edit: CustomFormFieldsNationalityInputComponent, }, + { + displayType: + 'http://lblod.data.gift/display-types/lmb/custom-telephone-input', + edit: CustomFormFieldsTelephoneInputComponent, + }, ]); }; From 0bd4de274bee7b15912d656f3d4be65e6691606b Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 13:33:38 +0100 Subject: [PATCH 49/71] lmb-181: remove unused component for codelist telephone and nationality --- .../custom-form-fields/codelist-input.hbs | 1 - .../custom-form-fields/codelist-input.js | 11 ----------- .../custom-form-fields/nationality-input.hbs | 1 - .../custom-form-fields/nationality-input.js | 11 ----------- .../custom-form-fields/telephone-input.hbs | 1 - .../custom-form-fields/telephone-input.js | 11 ----------- app/utils/register-form-fields.js | 19 ------------------- 7 files changed, 55 deletions(-) delete mode 100644 app/components/custom-form-fields/codelist-input.hbs delete mode 100644 app/components/custom-form-fields/codelist-input.js delete mode 100644 app/components/custom-form-fields/nationality-input.hbs delete mode 100644 app/components/custom-form-fields/nationality-input.js delete mode 100644 app/components/custom-form-fields/telephone-input.hbs delete mode 100644 app/components/custom-form-fields/telephone-input.js diff --git a/app/components/custom-form-fields/codelist-input.hbs b/app/components/custom-form-fields/codelist-input.hbs deleted file mode 100644 index fb5c4b157..000000000 --- a/app/components/custom-form-fields/codelist-input.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}} \ No newline at end of file diff --git a/app/components/custom-form-fields/codelist-input.js b/app/components/custom-form-fields/codelist-input.js deleted file mode 100644 index e8825c31d..000000000 --- a/app/components/custom-form-fields/codelist-input.js +++ /dev/null @@ -1,11 +0,0 @@ -import Component from '@glimmer/component'; - -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import { service } from '@ember/service'; - -import { task } from 'ember-concurrency'; -import { ForkingStore } from '@lblod/ember-submission-form-fields'; -import { consume } from 'ember-provide-consume-context'; - -export default class CustomFormFieldsCodelistInputComponent extends Component {} diff --git a/app/components/custom-form-fields/nationality-input.hbs b/app/components/custom-form-fields/nationality-input.hbs deleted file mode 100644 index fb5c4b157..000000000 --- a/app/components/custom-form-fields/nationality-input.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}} \ No newline at end of file diff --git a/app/components/custom-form-fields/nationality-input.js b/app/components/custom-form-fields/nationality-input.js deleted file mode 100644 index fd2234225..000000000 --- a/app/components/custom-form-fields/nationality-input.js +++ /dev/null @@ -1,11 +0,0 @@ -import Component from '@glimmer/component'; - -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import { service } from '@ember/service'; - -import { task } from 'ember-concurrency'; -import { ForkingStore } from '@lblod/ember-submission-form-fields'; -import { consume } from 'ember-provide-consume-context'; - -export default class CustomFormFieldsNationalityInputComponent extends Component {} diff --git a/app/components/custom-form-fields/telephone-input.hbs b/app/components/custom-form-fields/telephone-input.hbs deleted file mode 100644 index fb5c4b157..000000000 --- a/app/components/custom-form-fields/telephone-input.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}} \ No newline at end of file diff --git a/app/components/custom-form-fields/telephone-input.js b/app/components/custom-form-fields/telephone-input.js deleted file mode 100644 index 86b0f0c58..000000000 --- a/app/components/custom-form-fields/telephone-input.js +++ /dev/null @@ -1,11 +0,0 @@ -import Component from '@glimmer/component'; - -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import { service } from '@ember/service'; - -import { task } from 'ember-concurrency'; -import { ForkingStore } from '@lblod/ember-submission-form-fields'; -import { consume } from 'ember-provide-consume-context'; - -export default class CustomFormFieldsTelephoneInputComponent extends Component {} diff --git a/app/utils/register-form-fields.js b/app/utils/register-form-fields.js index 04a40b5ce..909a4647d 100644 --- a/app/utils/register-form-fields.js +++ b/app/utils/register-form-fields.js @@ -24,10 +24,6 @@ import RdfInputFieldsCustomDateInputComponent from 'frontend-lmb/components/rdf- import RdfInputFieldsCustomNumberInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-number-input'; import RdfInputFieldsCustomTextInputComponent from 'frontend-lmb/components/rdf-input-fields/custom-text-input'; -import CustomFormFieldsCodelistInputComponent from 'frontend-lmb/components/custom-form-fields/codelist-input'; -import CustomFormFieldsNationalityInputComponent from 'frontend-lmb/components/custom-form-fields/nationality-input'; -import CustomFormFieldsTelephoneInputComponent from 'frontend-lmb/components/custom-form-fields/telephone-input'; - export const registerCustomFormFields = () => { registerFormFields([ { @@ -141,20 +137,5 @@ export const registerCustomFormFields = () => { displayType: 'http://lblod.data.gift/display-types/lmb/custom-text-input', edit: RdfInputFieldsCustomTextInputComponent, }, - { - displayType: - 'http://lblod.data.gift/display-types/lmb/custom-codelist-input', - edit: CustomFormFieldsCodelistInputComponent, - }, - { - displayType: - 'http://lblod.data.gift/display-types/lmb/custom-nationality-input', - edit: CustomFormFieldsNationalityInputComponent, - }, - { - displayType: - 'http://lblod.data.gift/display-types/lmb/custom-telephone-input', - edit: CustomFormFieldsTelephoneInputComponent, - }, ]); }; From 3a6295bdcbe87d4ccc113e271c94ea3e3888d0ac Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Tue, 14 Jan 2025 14:36:56 +0100 Subject: [PATCH 50/71] lmb-181: make it possible to let the label show the isRequird pill --- .../rdf-input-fields/custom-address-input.hbs | 1 + .../rdf-input-fields/custom-date-input.hbs | 1 + .../rdf-input-fields/custom-field-wrapper.hbs | 15 +--------- .../rdf-input-fields/custom-field-wrapper.js | 30 +++++++++++++++++++ .../rdf-input-fields/custom-number-input.hbs | 1 + .../rdf-input-fields/custom-text-input.hbs | 1 + 6 files changed, 35 insertions(+), 14 deletions(-) diff --git a/app/components/rdf-input-fields/custom-address-input.hbs b/app/components/rdf-input-fields/custom-address-input.hbs index 667c43539..225ceeb7f 100644 --- a/app/components/rdf-input-fields/custom-address-input.hbs +++ b/app/components/rdf-input-fields/custom-address-input.hbs @@ -1,6 +1,7 @@
diff --git a/app/components/rdf-input-fields/custom-date-input.hbs b/app/components/rdf-input-fields/custom-date-input.hbs index 826137fc7..dd07c8914 100644 --- 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}} >
- {{this.title}} + {{this.title}}
- - {{#each this.errors as |error|}} - {{error.resultMessage}} - {{/each}} - - {{#each this.warnings as |warning|}} - {{warning.resultMessage}} - {{/each}} {{/unless}} + 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 index 953782456..4236f4e71 100644 --- 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}} > Date: Wed, 15 Jan 2025 14:12:04 +0100 Subject: [PATCH 51/71] lmb-181: can make the field required with a toggle when updating the field --- .../crud-custom-field-modal.hbs | 32 +++++++++++++++++-- .../crud-custom-field-modal.js | 24 +++++++------- .../rdf-input-fields/custom-field-wrapper.hbs | 1 + 3 files changed, 44 insertions(+), 13 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 832b4ebc4..dc89da3f4 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -71,8 +71,36 @@ {{selected.label}} - - {{/if}} + + Type + + {{selected.label}} + + + {{#unless @isCreating}} + + Maak veld verplicht + + {{/unless}} + <:footer>
diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 150d615eb..1b22fde54 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -25,7 +25,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen @service formReplacements; @tracked isRemovingField; - @tracked wantsToRemove; + @tracked isFieldRequired; customFieldEntry = this.store.createRecord('library-entry', { name: 'Eigen veld', @@ -45,7 +45,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 +60,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 +76,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(); @@ -226,15 +232,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-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 2c5d970c0..cebb4929b 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -47,4 +47,5 @@ @onCloseModal={{fn (mut this.showModal) false}} @form={{@form}} @field={{@field}} + @isRequiredField={{this.isRequired}} /> \ No newline at end of file From 6dd277300df4ceb1d53de961fce13573f032b585 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 16 Jan 2025 09:48:09 +0100 Subject: [PATCH 52/71] lmb-181: also show the required button when creating a field --- .../rdf-input-fields/crud-custom-field-modal.hbs | 16 +++++++--------- .../rdf-input-fields/crud-custom-field-modal.js | 1 + 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index dc89da3f4..a1d20fe51 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -91,15 +91,13 @@ {{selected.label}} - {{#unless @isCreating}} - - Maak veld verplicht - - {{/unless}} + + Maak veld verplicht + <:footer> diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 1b22fde54..37e9bec4d 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -102,6 +102,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen displayType: this.displayType.uri, libraryEntryUri: this.libraryFieldType.uri, name: this.fieldName, + isRequired: !!this.isFieldRequired, }), } ); From 6a7076866ef4372f3d8919609abc6d4d91089122 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 16 Jan 2025 10:45:35 +0100 Subject: [PATCH 53/71] lmb-181: do not show the required toggle for adres types --- .../rdf-input-fields/crud-custom-field-modal.hbs | 16 +++++++++------- .../rdf-input-fields/crud-custom-field-modal.js | 5 +++++ app/utils/well-known-uris.js | 2 ++ 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index a1d20fe51..deb086593 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -91,13 +91,15 @@ {{selected.label}} - - Maak veld verplicht - + {{#if this.canShowRequiredToggle}} + + Maak veld verplicht + + {{/if}} <:footer> diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 37e9bec4d..ed9b99cff 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -12,6 +12,7 @@ import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; import { PROV } from 'frontend-lmb/rdf/namespaces'; import { showErrorToast } from 'frontend-lmb/utils/toasts'; import { + ADRES_CUSTOM_DISPLAY_TYPE, LIBRARY_ENTREES, TEXT_CUSTOM_DISPLAY_TYPE, } from 'frontend-lmb/utils/well-known-uris'; @@ -267,4 +268,8 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return 'Pas een veld aan'; } + + get canShowRequiredToggle() { + return this.displayType.uri !== ADRES_CUSTOM_DISPLAY_TYPE; + } } diff --git a/app/utils/well-known-uris.js b/app/utils/well-known-uris.js index 78022e71d..87642ea58 100644 --- 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 From 8741241ea4cb0f219dd6fb47569208a7fc7d391e Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 22 Jan 2025 10:35:21 +0100 Subject: [PATCH 54/71] lmb-181: remove unused js file for component custom string --- app/components/rdf-input-fields/custom-string-input.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 app/components/rdf-input-fields/custom-string-input.js diff --git a/app/components/rdf-input-fields/custom-string-input.js b/app/components/rdf-input-fields/custom-string-input.js deleted file mode 100644 index 4f7b67584..000000000 --- a/app/components/rdf-input-fields/custom-string-input.js +++ /dev/null @@ -1,3 +0,0 @@ -import Component from '@glimmer/component'; - -export default class RdfInputFieldsCustomStringInputComponent extends Component {} From 66f30f7794c3fc54963182dc9b52c4c122a61b9f Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 23 Jan 2025 09:44:58 +0100 Subject: [PATCH 55/71] lmb-181: always show is required toggle --- .../rdf-input-fields/crud-custom-field-modal.hbs | 16 +++++++--------- .../rdf-input-fields/crud-custom-field-modal.js | 5 ----- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index deb086593..a1d20fe51 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -91,15 +91,13 @@ {{selected.label}} - {{#if this.canShowRequiredToggle}} - - Maak veld verplicht - - {{/if}} + + Maak veld verplicht + <:footer> diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index ed9b99cff..37e9bec4d 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -12,7 +12,6 @@ import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; import { PROV } from 'frontend-lmb/rdf/namespaces'; import { showErrorToast } from 'frontend-lmb/utils/toasts'; import { - ADRES_CUSTOM_DISPLAY_TYPE, LIBRARY_ENTREES, TEXT_CUSTOM_DISPLAY_TYPE, } from 'frontend-lmb/utils/well-known-uris'; @@ -268,8 +267,4 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return 'Pas een veld aan'; } - - get canShowRequiredToggle() { - return this.displayType.uri !== ADRES_CUSTOM_DISPLAY_TYPE; - } } From 8915298ad33c87332c2142996ece141e2966a5cc Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 23 Jan 2025 10:17:32 +0100 Subject: [PATCH 56/71] lmb-181: fix the things that where broken bcs of the rebase --- app/components/editable-form.hbs | 1 + .../crud-custom-field-modal.hbs | 39 +++++-------------- .../crud-custom-field-modal.js | 1 + 3 files changed, 12 insertions(+), 29 deletions(-) diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index 7cd4dda37..f89a57cd1 100644 --- 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 index a1d20fe51..4423ec7c4 100644 --- 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 @@ - - Type - - {{selected.label}} - - - - Maak veld verplicht - - + + Maak veld verplicht + + + {{/if}} <:footer>
diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 37e9bec4d..3b32c6adb 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -26,6 +26,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen @tracked isRemovingField; @tracked isFieldRequired; + @tracked wantsToRemove; customFieldEntry = this.store.createRecord('library-entry', { name: 'Eigen veld', From aad9fec25c286bb107fee7edbfcb2d35ebfdc5e5 Mon Sep 17 00:00:00 2001 From: karel kremer Date: Tue, 17 Dec 2024 13:49:09 +0100 Subject: [PATCH 57/71] add field basic input wrapper component and example --- app/components/rdf-input-fields/custom-string-input.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 app/components/rdf-input-fields/custom-string-input.js diff --git a/app/components/rdf-input-fields/custom-string-input.js b/app/components/rdf-input-fields/custom-string-input.js new file mode 100644 index 000000000..4f7b67584 --- /dev/null +++ b/app/components/rdf-input-fields/custom-string-input.js @@ -0,0 +1,3 @@ +import Component from '@glimmer/component'; + +export default class RdfInputFieldsCustomStringInputComponent extends Component {} From 3e8003412bc172e53abc5d1ba386ccf16be1aff5 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 15 Jan 2025 14:12:04 +0100 Subject: [PATCH 58/71] lmb-181: can make the field required with a toggle when updating the field --- .../crud-custom-field-modal.hbs | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 4423ec7c4..3e8931cde 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -71,15 +71,18 @@ {{selected.label}} - - Maak veld verplicht - + {{#unless @isCreating}} + + Maak veld verplicht + + {{/unless}} {{/if}} + <:footer>
From 0e83a00558259577df98e89b1b740b6655686c95 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 16 Jan 2025 10:45:35 +0100 Subject: [PATCH 59/71] lmb-181: do not show the required toggle for adres types --- app/components/rdf-input-fields/crud-custom-field-modal.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 3b32c6adb..b81f37f5c 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -12,6 +12,7 @@ import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; import { PROV } from 'frontend-lmb/rdf/namespaces'; import { showErrorToast } from 'frontend-lmb/utils/toasts'; import { + ADRES_CUSTOM_DISPLAY_TYPE, LIBRARY_ENTREES, TEXT_CUSTOM_DISPLAY_TYPE, } from 'frontend-lmb/utils/well-known-uris'; @@ -268,4 +269,8 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return 'Pas een veld aan'; } + + get canShowRequiredToggle() { + return this.displayType.uri !== ADRES_CUSTOM_DISPLAY_TYPE; + } } From 749f4b27871f35075237fd2593db5e57fe521d67 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 16 Jan 2025 15:55:05 +0100 Subject: [PATCH 60/71] lmb-1222: editable form now has a isReadonly argument that will show the fields as disabled (base form readonly) --- app/components/editable-form.hbs | 19 +++++++++++-------- app/components/editable-form.js | 5 +++++ .../mandataris-extra-info-card.hbs | 9 +++++++++ 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index f89a57cd1..910454ef3 100644 --- a/app/components/editable-form.hbs +++ b/app/components/editable-form.hbs @@ -1,5 +1,6 @@ {{#unless this.loading}} {{#if this.editableFormsEnabled}} - - Voeg een veld toe - + {{#unless this.isReadOnly}} + + Voeg een veld toe + + {{/unless}} {{yield}} diff --git a/app/components/editable-form.js b/app/components/editable-form.js index 9a7dd0abc..2077902d7 100644 --- a/app/components/editable-form.js +++ b/app/components/editable-form.js @@ -54,4 +54,9 @@ export default class EditableFormComponent extends Component { this.showEditModal = false; this.onFormUpdate(); } + + @provide('is-read-only') + get isReadOnly() { + return this.args.isReadOnly; + } } diff --git a/app/components/mandatarissen/mandataris-extra-info-card.hbs b/app/components/mandatarissen/mandataris-extra-info-card.hbs index 30fd85fd5..d8055ff80 100644 --- a/app/components/mandatarissen/mandataris-extra-info-card.hbs +++ b/app/components/mandatarissen/mandataris-extra-info-card.hbs @@ -32,6 +32,15 @@ {{else}} Dit mandaat heeft geen bijkomende informatie. {{/if}} +
From 3488d946eb5d64c4e8c8da6a52d6279ecc63a0b3 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 16 Jan 2025 16:34:45 +0100 Subject: [PATCH 61/71] lmb-1222: show the beleidsdomeinen as readonly --- app/components/editable-form.hbs | 2 +- .../mandataris-extra-info-card.hbs | 11 --- .../beleidsdomein-code-selector.hbs | 84 +++++++++++-------- .../rdf-input-fields/custom-field-wrapper.hbs | 68 ++++++++------- .../rdf-input-fields/custom-field-wrapper.js | 1 + 5 files changed, 91 insertions(+), 75 deletions(-) diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index 910454ef3..1599bd9cd 100644 --- a/app/components/editable-form.hbs +++ b/app/components/editable-form.hbs @@ -1,6 +1,6 @@ {{#unless this.loading}}
- {{#if this.hasBeleidsdomeinen}} -
-
Beleidsdomein(en)
-
{{await - this.formattedBeleidsdomein - }} -
-
- {{else}} - Dit mandaat heeft geen bijkomende informatie. - {{/if}} - {{@field.label}} - - {{/unless}} -
- - {{concept.label}} - -
+{{#if @show}} + + {{@field.label}} + +

+ {{#each this.selected as |beleidsdomein index|}} + {{beleidsdomein.label}} + {{#if (not-eq index (dec this.selected.length))}} + , + {{/if}} + {{/each}} +

+{{else}} + {{#if this.shouldRender}} + {{#unless @inTable}} + + {{@field.label}} + + {{/unless}} +
+ + {{concept.label}} + +
- {{#each this.errors as |error|}} - {{error.resultMessage}} - {{/each}} + {{#each this.errors as |error|}} + {{error.resultMessage}} + {{/each}} - {{#each this.warnings as |warning|}} - {{warning.resultMessage}} - {{/each}} + {{#each this.warnings as |warning|}} + {{warning.resultMessage}} + {{/each}} + {{/if}} {{/if}} \ No newline at end of file diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index cebb4929b..3ba1cc2c2 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -2,42 +2,54 @@
- {{this.title}} - - Pas aan - + {{#if this.isReadOnly}} + + {{@field.label}} + + {{else}} + {{this.title}} + + Pas aan + + {{/if}}
- {{yield}} + {{#if this.isReadOnly}} +

readonly view

+ {{else}} + {{yield}} + {{/if}}
-
- - Naar boven - - - Naar onder - -
+ {{#unless this.isReadOnly}} +
+ + Naar boven + + + Naar onder + +
+ {{/unless}}
{{/unless}} diff --git a/app/components/rdf-input-fields/custom-field-wrapper.js b/app/components/rdf-input-fields/custom-field-wrapper.js index a219072b4..4746e2868 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.js +++ b/app/components/rdf-input-fields/custom-field-wrapper.js @@ -11,6 +11,7 @@ import { JSON_API_TYPE } from 'frontend-lmb/utils/constants'; export default class RdfInputFieldsCustomFieldWrapperComponent extends Component { @consume('on-form-update') onFormUpdate; @consume('form-definition') formDefinition; + @consume('is-read-only') isReadOnly; @tracked showModal; From 8b1f9aa69dcf89189a97af1b15e89834127edee3 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 16 Jan 2025 17:10:56 +0100 Subject: [PATCH 62/71] lmb-1222: show text as label and value in readonly component for displaytype --- .../rdf-input-fields/custom-field-wrapper.hbs | 13 +++++---- .../read-only-field-for-display-type.hbs | 14 ++++++++++ .../read-only-field-for-display-type.js | 20 ++++++++++++++ .../read-only-field-for-display-type-test.js | 27 +++++++++++++++++++ 4 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 app/components/read-only-field-for-display-type.hbs create mode 100644 app/components/read-only-field-for-display-type.js create mode 100644 tests/integration/components/read-only-field-for-display-type-test.js diff --git a/app/components/rdf-input-fields/custom-field-wrapper.hbs b/app/components/rdf-input-fields/custom-field-wrapper.hbs index 3ba1cc2c2..6754b1069 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -2,11 +2,7 @@
- {{#if this.isReadOnly}} - - {{@field.label}} - - {{else}} + {{#unless this.isReadOnly}} {{this.title}} Pas aan - {{/if}} + {{/unless}}
{{#if this.isReadOnly}} -

readonly view

+ {{else}} {{yield}} {{/if}} diff --git a/app/components/read-only-field-for-display-type.hbs b/app/components/read-only-field-for-display-type.hbs new file mode 100644 index 000000000..f4259c804 --- /dev/null +++ b/app/components/read-only-field-for-display-type.hbs @@ -0,0 +1,14 @@ + + {{#if this.value}} +
+ + {{@field.label}}: + + {{#if this.isTextField}} +

{{this.value}}

+ {{/if}} +
+ {{/if}} + \ No newline at end of file diff --git a/app/components/read-only-field-for-display-type.js b/app/components/read-only-field-for-display-type.js new file mode 100644 index 000000000..f8871957f --- /dev/null +++ b/app/components/read-only-field-for-display-type.js @@ -0,0 +1,20 @@ +import Component from '@glimmer/component'; + +import { triplesForPath } from '@lblod/submission-form-helpers'; +import { isLiteral } from 'rdflib'; + +export default class ReadOnlyFieldForDisplayType extends Component { + get isTextField() { + return ( + this.args.field.displayType === + 'http://lblod.data.gift/display-types/lmb/custom-string-input' + ); + } + + get value() { + const matches = triplesForPath(this.args.storeOptions); + const literal = matches.values.filter((value) => isLiteral(value))?.at(0); + + return literal?.value; + } +} diff --git a/tests/integration/components/read-only-field-for-display-type-test.js b/tests/integration/components/read-only-field-for-display-type-test.js new file mode 100644 index 000000000..e1a037c4c --- /dev/null +++ b/tests/integration/components/read-only-field-for-display-type-test.js @@ -0,0 +1,27 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-lmb/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module( + 'Integration | Component | read-only-field-for-display-type', + function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + template block text +`); + + assert.dom(this.element).hasText('template block text'); + }); + } +); From 5c74bc700c0333d14b187c85d27c3c65c7f9b27a Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 17 Jan 2025 10:18:29 +0100 Subject: [PATCH 63/71] lmb-1222: also make it possible to show an adres in the readonly view --- .../rdf-input-fields/address-selector.hbs | 17 +++++++--- .../rdf-input-fields/custom-address-input.hbs | 7 ++++- .../rdf-input-fields/custom-field-wrapper.hbs | 2 +- .../rdf-input-fields/custom-field-wrapper.js | 8 +++++ .../read-only-field-for-display-type.hbs | 8 ++--- .../read-only-field-for-display-type.js | 31 +++++++++++++------ app/utils/well-known-uris.js | 2 ++ 7 files changed, 53 insertions(+), 22 deletions(-) diff --git a/app/components/rdf-input-fields/address-selector.hbs b/app/components/rdf-input-fields/address-selector.hbs index 5faf4718e..463bd4280 100644 --- a/app/components/rdf-input-fields/address-selector.hbs +++ b/app/components/rdf-input-fields/address-selector.hbs @@ -1,8 +1,17 @@ {{#if this.initialized}} - + {{#if @show}} + + {{@field.label}} + +

+ {{this.address.volledigAdres}} +

+ {{else}} + + {{/if}} {{else}}

diff --git a/app/components/rdf-input-fields/custom-address-input.hbs b/app/components/rdf-input-fields/custom-address-input.hbs index 225ceeb7f..03bc57ba0 100644 --- a/app/components/rdf-input-fields/custom-address-input.hbs +++ b/app/components/rdf-input-fields/custom-address-input.hbs @@ -4,7 +4,12 @@ @graphs={{@graphs}} @formStore={{@formStore}} > -
+
- {{#if this.isReadOnly}} + {{#if this.isFieldReadOnly}} { const result = await fetch( `/form-content/${this.formDefinition.id}/fields/move`, diff --git a/app/components/read-only-field-for-display-type.hbs b/app/components/read-only-field-for-display-type.hbs index f4259c804..605d1e099 100644 --- a/app/components/read-only-field-for-display-type.hbs +++ b/app/components/read-only-field-for-display-type.hbs @@ -1,14 +1,10 @@ {{#if this.value}} -
+
{{@field.label}}: - {{#if this.isTextField}} -

{{this.value}}

- {{/if}} +

{{this.value}}

{{/if}} \ No newline at end of file diff --git a/app/components/read-only-field-for-display-type.js b/app/components/read-only-field-for-display-type.js index f8871957f..1baf7e694 100644 --- a/app/components/read-only-field-for-display-type.js +++ b/app/components/read-only-field-for-display-type.js @@ -1,20 +1,31 @@ import Component from '@glimmer/component'; import { triplesForPath } from '@lblod/submission-form-helpers'; -import { isLiteral } from 'rdflib'; +import { isNamedNode, Literal } from 'rdflib'; +import moment from 'moment'; -export default class ReadOnlyFieldForDisplayType extends Component { - get isTextField() { - return ( - this.args.field.displayType === - 'http://lblod.data.gift/display-types/lmb/custom-string-input' - ); - } +import { DATE_CUSTOM_DISPLAY_TYPE } from 'frontend-lmb/utils/well-known-uris'; +export default class ReadOnlyFieldForDisplayType extends Component { get value() { const matches = triplesForPath(this.args.storeOptions); - const literal = matches.values.filter((value) => isLiteral(value))?.at(0); + const firstMatch = matches.values?.at(0); + if (!firstMatch || isNamedNode(firstMatch)) { + return null; + } + + return this.formatLiteral(firstMatch); + } + + get displayType() { + return this.args.field?.displayType; + } + + formatLiteral(literal) { + if (this.displayType === DATE_CUSTOM_DISPLAY_TYPE) { + return moment(Literal.toJS(literal)).format('DD-MM-YYYY'); + } - return literal?.value; + return Literal.toJS(literal); } } diff --git a/app/utils/well-known-uris.js b/app/utils/well-known-uris.js index 87642ea58..dfff2709e 100644 --- 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 DATE_CUSTOM_DISPLAY_TYPE = + 'http://lblod.data.gift/display-types/lmb/custom-date-input'; export const ADRES_CUSTOM_DISPLAY_TYPE = 'http://lblod.data.gift/display-types/lmb/custom-address-input'; From 6643305a4c5ba2cb7c016803d88ef05103319f55 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 17 Jan 2025 10:25:56 +0100 Subject: [PATCH 64/71] lmb-1222: update the extra info card when the data is updated --- .../mandataris-extra-info-card.hbs | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/app/components/mandatarissen/mandataris-extra-info-card.hbs b/app/components/mandatarissen/mandataris-extra-info-card.hbs index b8cb06b67..d757f38ea 100644 --- a/app/components/mandatarissen/mandataris-extra-info-card.hbs +++ b/app/components/mandatarissen/mandataris-extra-info-card.hbs @@ -21,15 +21,17 @@
- + {{#if this.onSave.isRunning}} + +

+ {{else}} + + {{/if}}
From 0e72c864d86bff7e4a147baaf0953cf16b5ccc09 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 22 Jan 2025 13:48:37 +0100 Subject: [PATCH 65/71] 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 --- app/components/editable-form.hbs | 20 ++++---- app/components/editable-form.js | 28 +++------- .../crud-custom-field-modal.js | 51 +++++++++++-------- .../rdf-input-fields/custom-field-wrapper.hbs | 4 +- .../rdf-input-fields/custom-field-wrapper.js | 10 ++-- .../rdf-input-fields/custom-string-input.js | 3 -- .../read-only-field-for-display-type.hbs | 2 +- 7 files changed, 53 insertions(+), 65 deletions(-) delete mode 100644 app/components/rdf-input-fields/custom-string-input.js diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index 1599bd9cd..af5ed4129 100644 --- a/app/components/editable-form.hbs +++ b/app/components/editable-form.hbs @@ -2,7 +2,7 @@ {{#if this.editableFormsEnabled}} - {{#unless this.isReadOnly}} + {{#unless @isReadOnly}} - {{/if}} + {{/if}} {{yield}} diff --git a/app/components/editable-form.js b/app/components/editable-form.js index 2077902d7..ab34e1c01 100644 --- 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,25 +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('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 index b81f37f5c..e311250f7 100644 --- 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; @@ -69,19 +68,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, @@ -94,7 +96,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: { @@ -111,8 +113,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, @@ -163,7 +168,7 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen formUri: this.args.form.uri, }), }); - this.onFormUpdate(); + this.formContext.onFormUpdate(); this.isRemovingField = false; } @@ -184,7 +189,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'), @@ -198,7 +207,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 index 1701170a5..94f5bc641 100644 --- a/app/components/rdf-input-fields/custom-field-wrapper.hbs +++ b/app/components/rdf-input-fields/custom-field-wrapper.hbs @@ -2,7 +2,7 @@
- {{#unless this.isReadOnly}} + {{#unless this.formContext.isReadOnly}} {{this.title}}
- {{#unless this.isReadOnly}} + {{#unless this.formContext.isReadOnly}}
{ 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 deleted file mode 100644 index 4f7b67584..000000000 --- a/app/components/rdf-input-fields/custom-string-input.js +++ /dev/null @@ -1,3 +0,0 @@ -import Component from '@glimmer/component'; - -export default class RdfInputFieldsCustomStringInputComponent extends Component {} diff --git a/app/components/read-only-field-for-display-type.hbs b/app/components/read-only-field-for-display-type.hbs index 605d1e099..1a77d8a18 100644 --- 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}}
- {{@field.label}}: + {{@field.label}}

{{this.value}}

From 49d28854586111e727aa96dadfd601bc988945ea Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 22 Jan 2025 13:59:19 +0100 Subject: [PATCH 66/71] lmb-1222: when editable forms feature is disabled just show the beleidsdomeinen as before --- .../mandataris-extra-info-card.hbs | 27 ++++++++++++++----- .../mandataris-extra-info-card.js | 5 ++++ 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/app/components/mandatarissen/mandataris-extra-info-card.hbs b/app/components/mandatarissen/mandataris-extra-info-card.hbs index d757f38ea..e060a97cc 100644 --- a/app/components/mandatarissen/mandataris-extra-info-card.hbs +++ b/app/components/mandatarissen/mandataris-extra-info-card.hbs @@ -25,12 +25,27 @@

{{else}} - + {{#if this.editableFormsEnabled}} + + {{else}} + {{#if this.hasBeleidsdomeinen}} +
+
Beleidsdomein(en)
+
{{await + this.formattedBeleidsdomein + }} +
+
+ {{else}} + Dit mandaat heeft geen bijkomende informatie. + {{/if}} + {{/if}} {{/if}}
diff --git a/app/components/mandatarissen/mandataris-extra-info-card.js b/app/components/mandatarissen/mandataris-extra-info-card.js index 0edd91b12..0d910f470 100644 --- a/app/components/mandatarissen/mandataris-extra-info-card.js +++ b/app/components/mandatarissen/mandataris-extra-info-card.js @@ -6,6 +6,7 @@ import { service } from '@ember/service'; export default class MandatarisExtraInfoCardComponent extends Component { @service router; + @service features; @tracked isModalActive = false; @tracked formInitialized; @@ -35,6 +36,10 @@ export default class MandatarisExtraInfoCardComponent extends Component { } } + get editableFormsEnabled() { + return this.features.isEnabled('editable-forms'); + } + @action toggleModal() { if (this.isModalActive) { From f024a40b633b339d931e3d284786a614135a78a8 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Wed, 22 Jan 2025 17:04:35 +0100 Subject: [PATCH 67/71] lmb-1222: do not limit is required with adres type --- app/components/rdf-input-fields/crud-custom-field-modal.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index e311250f7..9c7b26e35 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -278,8 +278,4 @@ export default class RdfInputFieldCrudCustomFieldModalComponent extends Componen return 'Pas een veld aan'; } - - get canShowRequiredToggle() { - return this.displayType.uri !== ADRES_CUSTOM_DISPLAY_TYPE; - } } From 88e5fedcd4dcfe0245ad9f8548b960d54d14e1d4 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Thu, 23 Jan 2025 08:37:02 +0100 Subject: [PATCH 68/71] lmb-1222: remove unused import --- app/components/rdf-input-fields/crud-custom-field-modal.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.js b/app/components/rdf-input-fields/crud-custom-field-modal.js index 9c7b26e35..e7bbb3aa3 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.js +++ b/app/components/rdf-input-fields/crud-custom-field-modal.js @@ -12,7 +12,6 @@ import { JSON_API_TYPE, SOURCE_GRAPH } from 'frontend-lmb/utils/constants'; import { PROV } from 'frontend-lmb/rdf/namespaces'; import { showErrorToast } from 'frontend-lmb/utils/toasts'; import { - ADRES_CUSTOM_DISPLAY_TYPE, LIBRARY_ENTREES, TEXT_CUSTOM_DISPLAY_TYPE, } from 'frontend-lmb/utils/well-known-uris'; From a4186649e018c238bfdac97ddced42d26ebb0a59 Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 24 Jan 2025 09:37:15 +0100 Subject: [PATCH 69/71] lmb-1222: fix the modal not closing and opening --- app/components/editable-form.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/editable-form.hbs b/app/components/editable-form.hbs index af5ed4129..0a11ac730 100644 --- a/app/components/editable-form.hbs +++ b/app/components/editable-form.hbs @@ -15,7 +15,7 @@ Voeg een veld toe @@ -26,7 +26,7 @@ Date: Fri, 24 Jan 2025 11:29:56 +0100 Subject: [PATCH 70/71] lmb-1222: mandataris extra info readonly form is now updated on close and save --- .../mandatarissen/mandataris-extra-info-card.hbs | 4 ++-- .../mandatarissen/mandataris-extra-info-card.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/app/components/mandatarissen/mandataris-extra-info-card.hbs b/app/components/mandatarissen/mandataris-extra-info-card.hbs index e060a97cc..7018596db 100644 --- a/app/components/mandatarissen/mandataris-extra-info-card.hbs +++ b/app/components/mandatarissen/mandataris-extra-info-card.hbs @@ -25,7 +25,7 @@

{{else}} - {{#if this.editableFormsEnabled}} + {{#if (and this.editableFormsEnabled (not this.isSaving))}} this.router.refresh(), 1000); + await timeout(RESOURCE_CACHE_TIMEOUT); + this.router.refresh(); + this.isSaving = false; } get disabled() { From f108be983d0ae3b69b742676f03cdda3a2c5760f Mon Sep 17 00:00:00 2001 From: Jonas Van Hoof Date: Fri, 24 Jan 2025 12:29:34 +0100 Subject: [PATCH 71/71] lmb-333: also show required toggle on create (back added with rebase i think) --- .../rdf-input-fields/crud-custom-field-modal.hbs | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/app/components/rdf-input-fields/crud-custom-field-modal.hbs b/app/components/rdf-input-fields/crud-custom-field-modal.hbs index 3e8931cde..a21a584c4 100644 --- a/app/components/rdf-input-fields/crud-custom-field-modal.hbs +++ b/app/components/rdf-input-fields/crud-custom-field-modal.hbs @@ -71,15 +71,13 @@ {{selected.label}} - {{#unless @isCreating}} - - Maak veld verplicht - - {{/unless}} + + Maak veld verplicht + {{/if}}