-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #449 from lblod/karel/lmb-333-create-form-extensions
add field basic input wrapper component and example
- Loading branch information
Showing
44 changed files
with
1,220 additions
and
201 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| {{#unless this.loading}} | ||
| <SemanticForms::Instance | ||
| @show={{@isReadOnly}} | ||
| @instanceId={{@instanceId}} | ||
| @form={{this.formContext.formDefinition}} | ||
| @onCancel={{@onCancel}} | ||
| @onSave={{@onSave}} | ||
| @formInitialized={{@formInitialized}} | ||
| @customHistoryMessage={{@customHistoryMessage}} | ||
| @buildMetaTtl={{@buildMetaTtl}} | ||
| @saveTitle={{@saveTitle}} | ||
| > | ||
| {{#if this.editableFormsEnabled}} | ||
| {{#unless @isReadOnly}} | ||
| <AuButton | ||
| @skin="link" | ||
| @icon="plus" | ||
| {{on "click" (fn (mut this.showEditModal) true)}} | ||
| class="au-u-padding-left-none au-u-margin-bottom" | ||
| > | ||
| Voeg een veld toe | ||
| </AuButton> | ||
| {{/unless}} | ||
|
|
||
| {{yield}} | ||
|
|
||
| <RdfInputFields::CrudCustomFieldModal | ||
| @isCreating={{true}} | ||
| @showModal={{this.showEditModal}} | ||
| @onCloseModal={{this.formContext.onFormUpdate}} | ||
| @form={{this.formContext.formDefinition}} | ||
| @field={{@field}} | ||
| /> | ||
| {{/if}} | ||
| {{yield}} | ||
| </SemanticForms::Instance> | ||
| {{/unless}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import Component from '@glimmer/component'; | ||
|
|
||
| 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; | ||
|
|
||
| @tracked showEditModal; | ||
|
|
||
| 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; | ||
| this.showEditModal = false; | ||
| } | ||
|
|
||
| get editableFormsEnabled() { | ||
| return this.features.isEnabled('editable-forms'); | ||
| } | ||
|
|
||
| @provide('form-context') | ||
| get formContext() { | ||
| return { | ||
| onFormUpdate: () => this.updateForm(), | ||
| formDefinition: this.currentForm, | ||
| isReadOnly: this.args.isReadOnly, | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 49 additions & 35 deletions
84
app/components/rdf-input-fields/beleidsdomein-code-selector.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,52 @@ | ||
| {{#if this.shouldRender}} | ||
| {{#unless @inTable}} | ||
| <AuLabel | ||
| @error={{this.hasErrors}} | ||
| @required={{this.isRequired}} | ||
| @warning={{this.hasWarnings}} | ||
| for={{this.inputId}} | ||
| > | ||
| {{@field.label}} | ||
| </AuLabel> | ||
| {{/unless}} | ||
| <div class={{if this.hasErrors "ember-power-select--error"}}> | ||
| <Mandatarissen::ConceptSelectorWithCreate | ||
| @multiple={{true}} | ||
| @type={{@field.options.type}} | ||
| @conceptScheme={{this.conceptScheme}} | ||
| @search={{this.search}} | ||
| @searchEnabled={{this.searchEnabled}} | ||
| @selected={{this.selected}} | ||
| @options={{this.options}} | ||
| @onClose={{fn (mut this.hasBeenFocused) true}} | ||
| @onChange={{this.updateSelection}} | ||
| @onCreate={{this.add}} | ||
| @disabled={{@show}} | ||
| as |concept| | ||
| > | ||
| {{concept.label}} | ||
| </Mandatarissen::ConceptSelectorWithCreate> | ||
| </div> | ||
| {{#if @show}} | ||
| <AuLabel class="au-c-description-label"> | ||
| {{@field.label}} | ||
| </AuLabel> | ||
| <p class="au-c-description-value"> | ||
| {{#each this.selected as |beleidsdomein index|}} | ||
| {{beleidsdomein.label}} | ||
| {{#if (not-eq index (dec this.selected.length))}} | ||
| , | ||
| {{/if}} | ||
| {{/each}} | ||
| </p> | ||
| {{else}} | ||
| {{#if this.shouldRender}} | ||
| {{#unless @inTable}} | ||
| <AuLabel | ||
| @error={{this.hasErrors}} | ||
| @required={{this.isRequired}} | ||
| @warning={{this.hasWarnings}} | ||
| for={{this.inputId}} | ||
| > | ||
| {{@field.label}} | ||
| </AuLabel> | ||
| {{/unless}} | ||
| <div class={{if this.hasErrors "ember-power-select--error"}}> | ||
| <Mandatarissen::ConceptSelectorWithCreate | ||
| @multiple={{true}} | ||
| @type={{@field.options.type}} | ||
| @conceptScheme={{this.conceptScheme}} | ||
| @search={{this.search}} | ||
| @searchEnabled={{this.searchEnabled}} | ||
| @selected={{this.selected}} | ||
| @options={{this.options}} | ||
| @onClose={{fn (mut this.hasBeenFocused) true}} | ||
| @onChange={{this.updateSelection}} | ||
| @onCreate={{this.add}} | ||
| @disabled={{@show}} | ||
| as |concept| | ||
| > | ||
| {{concept.label}} | ||
| </Mandatarissen::ConceptSelectorWithCreate> | ||
| </div> | ||
|
|
||
| {{#each this.errors as |error|}} | ||
| <AuHelpText @error={{true}}>{{error.resultMessage}}</AuHelpText> | ||
| {{/each}} | ||
| {{#each this.errors as |error|}} | ||
| <AuHelpText @error={{true}}>{{error.resultMessage}}</AuHelpText> | ||
| {{/each}} | ||
|
|
||
| {{#each this.warnings as |warning|}} | ||
| <AuHelpText @warning={{true}}>{{warning.resultMessage}}</AuHelpText> | ||
| {{/each}} | ||
| {{#each this.warnings as |warning|}} | ||
| <AuHelpText @warning={{true}}>{{warning.resultMessage}}</AuHelpText> | ||
| {{/each}} | ||
| {{/if}} | ||
| {{/if}} |
Oops, something went wrong.