-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
998 producten aanbieden optioneel standaard op nee zetten (#1016)
- Loading branch information
Showing
17 changed files
with
465 additions
and
293 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
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
144 changes: 144 additions & 0 deletions
144
src/sdg/js/components/form/abstract/clarification_field_component.js
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,144 @@ | ||
| import { availableEditors } from "../../markdown"; | ||
| import { FormComponent } from "./form_component"; | ||
|
|
||
| /** | ||
| * Base class for implementing components within the update form. | ||
| * @abstract | ||
| */ | ||
| export class ClarificationFieldComponent extends FormComponent { | ||
| /** | ||
| * Constructor method. | ||
| * @param {HTMLSelectElement} node | ||
| */ | ||
| constructor(node) { | ||
| super(node); | ||
| this.node = node; // Same as in super(node), but this will overwrite the type HTMLElement with HTMLSelectElement. | ||
| this.isReferenceForm = this.getForm().dataset.reference === "true"; | ||
| this.availability = false; | ||
| this.fallsUnder = false; | ||
| } | ||
|
|
||
| /** | ||
| * Shows the clarification field `this.dependency` and collapse specific form | ||
| */ | ||
| showClarificationField() { | ||
| this.dependency.style.display = "grid"; | ||
| this.collapseOrExpandSpecificForm(); | ||
| } | ||
|
|
||
| /** | ||
| * Hides the clarification field `this.dependency` and expands specific form | ||
| */ | ||
| hideClarificationField() { | ||
| this.dependency.style.display = "none"; | ||
| this.collapseOrExpandSpecificForm(); | ||
| } | ||
|
|
||
| /** | ||
| * Reset all the text areas, markdown fields and array fields inside the specific form. | ||
| * Use fieldGroups to specify the fields to reset. | ||
| */ | ||
| resetSpecifiekeGegevens() { | ||
| const RESET_VALUE = ""; | ||
|
|
||
| const resetConfiguration = { | ||
| noneMarkdown: { | ||
| fields: [ | ||
| "[name=vertalingen-0-product_titel_decentraal]", | ||
| "[name=vertalingen-1-product_titel_decentraal]", | ||
| "[name=vertalingen-0-decentrale_procedure_link]", | ||
| "[name=vertalingen-1-decentrale_procedure_link]", | ||
| "[name=vertalingen-0-decentrale_procedure_label]", | ||
| "[name=vertalingen-1-decentrale_procedure_label]", | ||
| ], | ||
| selectAll: false, | ||
| }, | ||
| arrayFields: { | ||
| fields: [ | ||
| "[name=vertalingen-0-verwijzing_links]", | ||
| "[name=vertalingen-1-verwijzing_links]", | ||
| ], | ||
| selectAll: true, | ||
| }, | ||
| markdown: { | ||
| fields: [".markdownx textarea"], | ||
| selectAll: true, | ||
| }, | ||
| }; | ||
|
|
||
| Object.values(resetConfiguration).forEach((group) => { | ||
| group.fields.forEach((field_class) => { | ||
| if (group.selectAll) { | ||
| document.querySelectorAll(field_class).forEach((field) => { | ||
| field.value = RESET_VALUE; | ||
| }); | ||
| } else { | ||
| document.querySelector(field_class).value = RESET_VALUE; | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| Object.values(availableEditors).forEach((instance) => { | ||
| instance.editor.setData(RESET_VALUE); | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Collapse and remove pointer events or expand and add pointer events the specific form. | ||
| * @param {boolean} collapse | ||
| */ | ||
| collapseOrExpandSpecificForm() { | ||
| if (this.isReferenceForm) return; // Don't collapse the specific form inside the reference product form. | ||
| const collapse = this.availability || this.fallsUnder; | ||
|
|
||
| const formSpecific = document.querySelector(".form__specific"); | ||
| const formSpecificClassList = formSpecific.classList; | ||
| formSpecific.style.pointerEvents = collapse ? "none" : "all"; | ||
| formSpecificClassList.toggle("tabs__table--hidden", collapse); | ||
| formSpecificClassList.toggle("form__specific--hidden", collapse); | ||
| } | ||
|
|
||
| /** | ||
| * Returns an object containing all product_aanwezig_toelichting fields as value with the key as the language. | ||
| * @returns { HTMLElement } | ||
| */ | ||
| getAvailabilityClarificationFormField(child = undefined) { | ||
| const availabilityClarificationField = this.getForm( | ||
| child | ||
| ).querySelector('[id$="product_aanwezig_toelichting"]'); | ||
| return this.getFormField(availabilityClarificationField); | ||
| } | ||
|
|
||
| /** | ||
| * Returns an object containing all product_aanwezig_toelichting fields as value with the key as the language. | ||
| * @returns { HTMLElement } | ||
| */ | ||
| getFallsUnderClarificationFormField(child = undefined) { | ||
| const fallsUnderClarificationField = this.getForm(child).querySelector( | ||
| '[id$="product_valt_onder_toelichting"]' | ||
| ); | ||
| return this.getFormField(fallsUnderClarificationField); | ||
| } | ||
|
|
||
| /** | ||
| * Returns an object containing all product_aanwezig_toelichting fields as value with the key as the language. | ||
| * @returns {{ [language: string]: HTMLElement} } | ||
| */ | ||
| getAvailabilityClarificationFields(child = undefined) { | ||
| const nodes = this.getForm(child).querySelectorAll( | ||
| '[id$="product_aanwezig_toelichting"]' | ||
| ); | ||
| return this._localizedGetter(nodes); | ||
| } | ||
|
|
||
| /** | ||
| * Returns an object containing all product_valt_onder_toelichting fields as value with the key as the language. | ||
| * @returns {{ [language: string]: HTMLElement} } | ||
| */ | ||
| getFallsUnderClarificationFields(child = undefined) { | ||
| const nodes = this.getForm(child).querySelectorAll( | ||
| '[id$="product_valt_onder_toelichting"]' | ||
| ); | ||
| return this._localizedGetter(nodes); | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { ClarificationFieldComponent } from "./abstract/clarification_field_component"; | ||
|
|
||
| /** @type {NodeListOf<HTMLSelectElement>} */ | ||
| const PRODUCT_AANWEZIG_SELECTS = document.querySelectorAll( | ||
| "#id_product_aanwezig" | ||
| ); | ||
|
|
||
| const PRODUCT_AANWEZIG_QUESTION = | ||
| "Weet u zeker dat u dit product niet aanbiedt?\nAls u 'OK' antwoordt worden alle teksten leeggemaakt."; | ||
|
|
||
| /** | ||
| * Button allow the user to take over the reference text in all localized fields at the same time. | ||
| */ | ||
| class ProductAvailable extends ClarificationFieldComponent { | ||
| /** | ||
| * Constructor method. | ||
| * @param {HTMLSelectElement} node | ||
| */ | ||
| constructor(node) { | ||
| super(node); | ||
| this.dependency = this.getAvailabilityClarificationFormField(); | ||
| this.previousSelectedIndex = this.node.selectedIndex; | ||
| } | ||
|
|
||
| /** | ||
| * Gets called after the first render cycle. | ||
| */ | ||
| onMount() { | ||
| super.onMount(); | ||
| this.handle({ onMount: true }); | ||
| } | ||
|
|
||
| /** | ||
| * Binds events to callbacks. | ||
| */ | ||
| bindEvents() { | ||
| this.node.addEventListener( | ||
| "change", | ||
| this.handle.bind(this, { onMount: false }) | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Update the values of the text areas. | ||
| */ | ||
| updateValues() { | ||
| Object.entries(this.getAvailabilityClarificationFields()).forEach( | ||
| ([language, node]) => { | ||
| if (node.value) return; | ||
| const defaultExplanation = | ||
| this.getCurrentReferenceForm(language).dataset | ||
| .productAanwezigToelichting; | ||
| node.value = defaultExplanation; | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Gets called on change and on mount. | ||
| * @param {{ onMount: boolean }} options | ||
| */ | ||
| handle(options) { | ||
| const FalseOption = this.isReferenceForm ? 1 : 2; | ||
| if (this.node.selectedIndex === FalseOption) { | ||
| this.availability = true; | ||
| if ( | ||
| !this.isReferenceForm && | ||
| this.node.selectedIndex != this.previousSelectedIndex | ||
| ) { | ||
| if (confirm(PRODUCT_AANWEZIG_QUESTION)) { | ||
| this.resetSpecifiekeGegevens(); | ||
| } else { | ||
| this.node.selectedIndex = this.previousSelectedIndex; | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| this.showClarificationField(); | ||
| if (!options.onMount) this.updateValues(); | ||
| } else { | ||
| console.log("hiding now"); | ||
| this.availability = false; | ||
| this.hideClarificationField(); | ||
| } | ||
|
|
||
| this.previousSelectedIndex = this.node.selectedIndex; | ||
| } | ||
| } | ||
|
|
||
| // Start! | ||
| [...PRODUCT_AANWEZIG_SELECTS].forEach((node) => new ProductAvailable(node)); |
Oops, something went wrong.