From e629c97f0d02dc1166a065cdd0184a2e045fa4e8 Mon Sep 17 00:00:00 2001 From: Alastair Mucklow Date: Thu, 27 Apr 2023 09:09:49 +0000 Subject: [PATCH] Merged PR 44771: Remove class property in validation-directive.js ## What's being changed Our validation-directive.js file. ## Why it's being changed We had class properties here that caused an error in some lower versions of Shopware 6.4.x (certainly 6.4.9). The error was triggered when running: ``` bin/build-administration.sh ``` and the error was: ``` Support for the experimental syntax 'classProperties' isn't currently enabled ``` ## How to review / test this change - Checkout this branch in a Shopware 6.4.9 - Run `bin/build-administration.sh` ## Notes You may need to add `--legacy-peer-deps` to the `npm install` command on L53 of `build-administration.sh` Related work items: #209832 --- README.md | 5 + composer.json | 2 +- .../src/directives/validation-directive.js | 277 +++++++++--------- 3 files changed, 142 insertions(+), 142 deletions(-) diff --git a/README.md b/README.md index 31d2136..eb7f763 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,11 @@ in order to rebuild the JS for Flow Builder. ## Changelog +### 1.1.1 + +#### Bug fixes +- We fixed an error in validation-directive.js relating to unsupported 'classProperties'. + ### 1.1.0 #### What's new diff --git a/composer.json b/composer.json index 108526a..41c44d6 100644 --- a/composer.json +++ b/composer.json @@ -1,7 +1,7 @@ { "name": "dotdigital/dotdigital-for-shopware-flowbuilder", "description": "Integrate with Dotdigital using Flow Builder actions.", - "version": "1.1.0", + "version": "1.1.1", "type": "shopware-platform-plugin", "license": "MIT", "authors": [ diff --git a/src/Resources/app/administration/src/directives/validation-directive.js b/src/Resources/app/administration/src/directives/validation-directive.js index bad2b55..1337c17 100644 --- a/src/Resources/app/administration/src/directives/validation-directive.js +++ b/src/Resources/app/administration/src/directives/validation-directive.js @@ -2,160 +2,155 @@ const { Directive } = Shopware; const DDValidationRepository = new Map(); class Validator { -/** -* Allowed validation types -* -* @type {string[]} -*/ -static Types = [ - 'number', - 'required', -] - -/** -* Validator constructor. -* -* @param identifier -*/ -constructor( - identifier, -) { - const validationGroup = Validator.getGroup(identifier); - if (!validationGroup) { - throw new DOMException(`Unable to find validation group ${identifier}`); + /** + * Validator constructor. + * + * @param identifier + */ + constructor( + identifier, + ) { + const validationGroup = Validator.getGroup(identifier); + if (!validationGroup) { + throw new DOMException(`Unable to find validation group ${identifier}`); + } + + this.Types = [ + 'number', + 'required', + ]; + + if (!this.Types.includes(validationGroup.config.type)) { + throw new DOMException(`${validationGroup.config.type} is not supported by validator`); + } + + this.identifier = identifier; + this.vNode = validationGroup.node; + this.expression = validationGroup.node.data.model.expression; + this.parent = validationGroup.parent; + this.message = validationGroup.config.message; + this.type = validationGroup.config.type; + this.passes = true; } - if (!Validator.Types.includes(validationGroup.config.type)) { - throw new DOMException(`${validationGroup.config.type} is not supported by validator`); + /** + * Build new validation object on vNode element + * + * @param element + * @param binding + * @param node + * @param eventType + */ + static build(element, binding, node, eventType = 'blur') { + const input = element.querySelector('input'); + const messageElement = document.createElement('div'); + const identifier = `dd-validation-${input.getAttribute('name')}`; + + messageElement.setAttribute('id', identifier); + messageElement.classList.add('sw-field__error'); + messageElement.style.visibility = 'hidden'; + + element.appendChild(messageElement); + + input.addEventListener(eventType, event => Validator.handleValidationEvent(event)); + + Validator.addGroup(identifier, { + parent: element, + node: node, + config: binding.value, + }); } - this.identifier = identifier; - this.vNode = validationGroup.node; - this.expression = validationGroup.node.data.model.expression; - this.parent = validationGroup.parent; - this.message = validationGroup.config.message; - this.type = validationGroup.config.type; - this.passes = true; -} - -/** - * Build new validation object on vNode element - * - * @param element - * @param binding - * @param node - * @param eventType - */ -static build(element, binding, node, eventType = 'blur') { - const input = element.querySelector('input'); - const messageElement = document.createElement('div'); - const identifier = `dd-validation-${input.getAttribute('name')}`; - - messageElement.setAttribute('id', identifier); - messageElement.classList.add('sw-field__error'); - messageElement.style.visibility = 'hidden'; - - element.appendChild(messageElement); - - input.addEventListener(eventType, event => Validator.handleValidationEvent(event)); - - Validator.addGroup(identifier, { - parent: element, - node: node, - config: binding.value, - }); -} - -/** - * Add group to repository - * - * @param identifier - * @param data - */ -static addGroup(identifier, data) { - DDValidationRepository.set(identifier, data); -} - -/** - * Get group from repository - * - * @param identifier - * @returns {any} - */ -static getGroup(identifier) { - return DDValidationRepository.get(identifier); -} - -/** - * Emit validation results - * - * @param data - */ -emitValidationResults(data) { - const handlers = (this.vNode.data && this.vNode.data.on) || - (this.vNode.componentOptions && this.vNode.componentOptions.listeners); - - if (handlers && handlers['dd-validation']) { - handlers['dd-validation'].fns(data); + /** + * Add group to repository + * + * @param identifier + * @param data + */ + static addGroup(identifier, data) { + DDValidationRepository.set(identifier, data); } -} -/** - * Hande a validation run event - * - * @param event - */ -static handleValidationEvent(event, passive = false) { - const identifier = `dd-validation-${event.target.getAttribute('name')}`; - const validator = new Validator(identifier); - const messageContainer = document.getElementById(identifier); - - messageContainer.style.visibility = 'hidden'; - messageContainer.innerText = ''; - validator.parent.classList.remove('has--error'); - - if (!validator.validate() && !passive) { - validator.parent.classList.add('has--error'); - messageContainer.style.visibility = 'visible'; - messageContainer.innerText = validator.message; + /** + * Get group from repository + * + * @param identifier + * @returns {any} + */ + static getGroup(identifier) { + return DDValidationRepository.get(identifier); } -} -/** - * Valid value - * - * @returns {boolean} - */ -validate() { - const value = this.vNode.componentInstance.currentValue; - const isNumber = Number.isNaN(Number(value)); - switch (this.type) { - case 'number': - this.passes = !(!value || /^\s*$/.test(value)) && !isNumber && value > 0; - break; - case 'required': - this.passes = !(!value || /^\s*$/.test(value)); - break; - default: - break; + /** + * Emit validation results + * + * @param data + */ + emitValidationResults(data) { + const handlers = (this.vNode.data && this.vNode.data.on) || + (this.vNode.componentOptions && this.vNode.componentOptions.listeners); + + if (handlers && handlers['dd-validation']) { + handlers['dd-validation'].fns(data); + } } - this.emitValidationResults({ - key: this.expression, - error: this.message, - passes: this.passes, - }); + /** + * Hande a validation run event + * + * @param event + */ + static handleValidationEvent(event, passive = false) { + const identifier = `dd-validation-${event.target.getAttribute('name')}`; + const validator = new Validator(identifier); + const messageContainer = document.getElementById(identifier); + + messageContainer.style.visibility = 'hidden'; + messageContainer.innerText = ''; + validator.parent.classList.remove('has--error'); + + if (!validator.validate() && !passive) { + validator.parent.classList.add('has--error'); + messageContainer.style.visibility = 'visible'; + messageContainer.innerText = validator.message; + } + } - return this.passes; -} + /** + * Valid value + * + * @returns {boolean} + */ + validate() { + const value = this.vNode.componentInstance.currentValue; + const isNumber = Number.isNaN(Number(value)); + switch (this.type) { + case 'number': + this.passes = !(!value || /^\s*$/.test(value)) && !isNumber && value > 0; + break; + case 'required': + this.passes = !(!value || /^\s*$/.test(value)); + break; + default: + break; + } + + this.emitValidationResults({ + key: this.expression, + error: this.message, + passes: this.passes, + }); + + return this.passes; + } } Directive.register('dd-validate', { -/** - * Initialize the validation once it has been inserted to the DOM. - * @param el - * @param binding - * @param node - */ + /** + * Initialize the validation once it has been inserted to the DOM. + * @param el + * @param binding + * @param node + */ inserted: (el, binding, node) => Validator.build(el, binding, node, 'blur'), });