From 5fb80da1c40c0242fa8a5b76a76fe512ea2cf62a Mon Sep 17 00:00:00 2001 From: kekefreedog <70959083+kekefreedog@users.noreply.github.com> Date: Sat, 28 Dec 2024 20:28:58 +0100 Subject: [PATCH] Implement depends action in form --- resources/Hbs/Partials/form.hbs | 9 +- src/Front/Library/Utility/Boolean.ts | 62 +++++++++ src/Front/Library/Utility/Form.ts | 175 ++++++++++++++++++++++++++ src/Front/Types/index.d.ts | 2 + src/Front/index.ts | 1 + src/Library/State/Components/Form.php | 1 + 6 files changed, 245 insertions(+), 5 deletions(-) create mode 100644 src/Front/Library/Utility/Boolean.ts diff --git a/resources/Hbs/Partials/form.hbs b/resources/Hbs/Partials/form.hbs index 4cbe8cc..6e26383 100644 --- a/resources/Hbs/Partials/form.hbs +++ b/resources/Hbs/Partials/form.hbs @@ -185,17 +185,15 @@ name="{{item.name}}" {{#if item._style.customClass.input}}class="{{item._style.customClass.input}}"{{/if}} {{#if item.disabled}}disabled=""{{else}}{{#if ../form.onready}}disabled="loading"{{/if}}{{/if}} - type="number" + type="text" + data-type="number" {{#if item.placeholder}}placeholder="{{item.placeholder}}"{{else}}placeholder=" "{{/if}} {{#if item.readonly}}readonly=""{{/if}} {{#if item.default includeZero=false}}value="{{item.default}}" default="{{item.default}}"{{/if}} {{#if item.select.[0].value includeZero=false}}min="{{item.select.[0].value}}"{{/if}} {{#if item.select.[1].value includeZero=false}}max="{{item.select.[1].value}}"{{/if}} {{#if item.required}}required=""{{/if}} - {{#if item._style.number.decimal}} - step=".01" inputmode="numeric"{{else}} - data-maska="N" data-maska-tokens="N:[0-9]:multiple" inputmode="numeric"{{/if}} - + {{#if item._style.number.decimal}}step=".01"{{/if}} > {{#if item.label}}{{/if}} @@ -230,6 +228,7 @@ {{#if item._style.customClass.input}}class="{{item._style.customClass.input}}"{{/if}} {{#if item.disabled}}disabled=""{{else}}{{#if radioItem.disabled}}disabled=""{{else}}disabled="loading"{{/if}}{{/if}} {{#if item.default}}checked="" default="true"{{/if}} + {{#if item.depends}}data-depends="{{#isArray item.depends}}{{join "," item.depends}}{{else}}{{item.depends}}{{/isArray}}" default="true"{{/if}} > On diff --git a/src/Front/Library/Utility/Boolean.ts b/src/Front/Library/Utility/Boolean.ts new file mode 100644 index 0000000..cb68182 --- /dev/null +++ b/src/Front/Library/Utility/Boolean.ts @@ -0,0 +1,62 @@ +/** + * Utility + * + * Front TS Scrips for multiple tasks + * + * @package kzarshenas/crazyphp + * @author kekefreedog + * @copyright 2022-2024 Kévin Zarshenas + */ + +/** + * Dependances + */ + +/** + * Boolean + * + * Methods for manage boolean + * + * @package kzarshenas/crazyphp + * @author kekefreedog + * @copyright 2022-2024 Kévin Zarshenas + */ +export default class Boolean { + + /** Public static methods + ****************************************************** + */ + + /** + * Check + * + * Check in given input of any type is true or false + * + * @param input - The input string. + * @returns A string with duplicate lines removed. + */ + public static check = (value:any):boolean => { + + // Set result + let result:boolean = true; + + // Check for falsy values or specific strings you want to treat as false + if( + value === false || + value === null || + value === undefined || + value === 0 || + value === "" || + value === "false" || + value === "0" || + value === "off" + ) + // set result false + result = false; + + // Return result + return result; + + } + +} \ No newline at end of file diff --git a/src/Front/Library/Utility/Form.ts b/src/Front/Library/Utility/Form.ts index 2bb6801..f2d7c97 100644 --- a/src/Front/Library/Utility/Form.ts +++ b/src/Front/Library/Utility/Form.ts @@ -18,6 +18,7 @@ import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; import IMask, { MaskedOptions, MaskedNumberOptions } from 'imask'; import {default as PageError} from './../Error/Page'; import {default as UtilityStrings} from './Strings'; +import UtilityBoolean from '../Utility/Boolean'; import Crazyrequest from '../Crazyrequest'; import fr_FR from 'filepond/locale/fr-fr'; import * as FilePond from 'filepond'; @@ -738,6 +739,9 @@ export default class Form { */ private _onSubmitCreate = async (entityValue:string, formData:FormData):Promise => { + // Check submit before + this._options.onBeforeSubmit && this._options.onBeforeSubmit(entityValue, formData); + // Prepare request let request = new Crazyrequest(`/api/v2/${entityValue}/create`, { method: "POST", @@ -764,6 +768,9 @@ export default class Form { */ private _onSubmitUpdate = async (entityValue:string, valueID:string, formData:FormData):Promise => { + // Check submit before + this._options.onBeforeSubmit && this._options.onBeforeSubmit(entityValue, formData); + // Prepare request let request = new Crazyrequest(`/api/v2/${entityValue}/update/${valueID}`, { method: "PUT", @@ -790,6 +797,20 @@ export default class Form { */ private _onSubmiDelete = async (entityValue:string, valueID:string):Promise => { + // Check event + if(this._options.onBeforeSubmit){ + + // New formdata + let formData = new FormData(); + + // Append if to formdata + formData.append("id", valueID); + + // Check submit before + this._options.onBeforeSubmit(entityValue, formData); + + } + // Prepare request let request = new Crazyrequest(`/api/v2/${entityValue}/delete/${valueID}`, { method: "DELETE", @@ -1012,6 +1033,9 @@ export default class Form { : inputEl.type ; + // Check depends + inputEl.dataset.depends && this._addDependencies(inputEl, inputEl.dataset.depends); + // Get init method name let initMethodName:string = `_init${UtilityStrings.ucfirst(inputType.toLowerCase())}Input`; @@ -2737,6 +2761,157 @@ export default class Form { } + /** Private methods | Depends + ****************************************************** + */ + + /** + * Add Dependencies + * + * @param inputEl + * @param dependencies + */ + private _addDependencies = ( + inputEl:HTMLInputElement|HTMLSelectElement, + dependencies:string|string[], + ):void => { + + // Check depends + if(typeof dependencies === "string"){ + + // Convert it to array + dependencies = dependencies.split(","); + + // Remove duplicates + dependencies = [...new Set(dependencies)]; + + // Check dependencies + if(dependencies.length){ + + // Get type of input el + let inputType = inputEl.dataset.type + ? inputEl.dataset.type + : inputEl.type + ; + + // Check inputType + if(inputType){ + + // Iteration of dependencies + for(let dependency of dependencies){ + + // Search el + let dependencyEl:HTMLInputElement|HTMLSelectElement|null = !dependency + ? null + : this._formEl.querySelector(`input[name="${dependency}"], select[name="${dependency}"`) + ; + + // Check dependency + if(dependencyEl){ + + // Get type of input el + let dependencyType = dependencyEl.dataset.type + ? dependencyEl.dataset.type + : dependencyEl.type + ; + + // Check if method to retrieve value is set + if(dependencyType && typeof this[`${dependencyType}Retrieve`] === "function"){ + + // Set result + let retrieveMethold = this[`${dependencyType}Retrieve`]; + + // Add event change on dependencyEl + dependencyEl.addEventListener( + "change", + (e:Event):void => { + + // Get current element + let currentTarget = e.currentTarget; + + // Check if select or input + if(currentTarget instanceof HTMLSelectElement || currentTarget instanceof HTMLInputElement){ + + // Retrieve value of the current target + let result:null|Array = retrieveMethold(currentTarget); + + // Check if already disabled + if( + inputEl.disabled && + inputEl.hasAttribute("disabled") && + inputEl.getAttribute("disabled") != "depends" + ){ + + // Stop + return; + + }else + // Check if result is null + if( + result === null + ){ + + // Remove disabled + if(inputEl.disabled){ + + // Remove disabled + inputEl.disabled = false; + + // Remove attribute + inputEl.removeAttribute("disabled"); + + } + + // Stop + return; + + } + + // Check result is false + if( + result.length !== 2 || + // Case checkbox + ( + inputType === "checkbox" && + UtilityBoolean.check(result[1]) == false + ) + // ... + ){ + + // Disable input El + inputEl.disabled = true; + + // Add value to attribute + inputEl.setAttribute("disabled", "depends") + + // Unchecked check box + inputEl instanceof HTMLInputElement && inputType === "checkbox" && (inputEl.checked = false); + + }else{ + + // Disable input El + inputEl.disabled = false; + + } + + } + + } + ) + + } + + + } + + } + + } + + } + + } + /** Private methods | Error ****************************************************** */ diff --git a/src/Front/Types/index.d.ts b/src/Front/Types/index.d.ts index 8250e71..96f8709 100644 --- a/src/Front/Types/index.d.ts +++ b/src/Front/Types/index.d.ts @@ -21,6 +21,7 @@ export {default as Componentregister} from "./../Library/Componentregister"; export {default as NavigatorClient} from "./../Library/Navigator/Client"; export {default as UtilityDateTime} from "./../Library/Utility/DateTime"; export {default as ColorSchema} from "./../Library/Utility/ColorSchema"; +export {default as UtilityBoolean} from "./../Library/Utility/Boolean"; export {default as UtilityProcess} from "./../Library/Utility/Process"; export {default as UtilityObjects} from "./../Library/Utility/Objects"; export {default as UtilityStrings} from "./../Library/Utility/Strings"; @@ -433,6 +434,7 @@ declare global { */ interface FormOptions { + onBeforeSubmit:(entity:string, formData:FormData)=>void, onSubmitDone:(result:object, entity:string, formData:FormData)=>void, onError:(result:object, entity:string, formData:FormData)=>void, alertDriver:string, diff --git a/src/Front/index.ts b/src/Front/index.ts index 6d4322d..a5ad43f 100644 --- a/src/Front/index.ts +++ b/src/Front/index.ts @@ -16,6 +16,7 @@ export {default as Componentregister} from "./Library/Componentregister"; export {default as NavigatorClient} from "./Library/Navigator/Client"; export {default as UtilityDateTime} from "./Library/Utility/DateTime"; export {default as ColorSchema} from "./Library/Utility/ColorSchema"; +export {default as UtilityBoolean} from "./Library/Utility/Boolean"; export {default as UtilityProcess} from "./Library/Utility/Process"; export {default as UtilityObjects} from "./Library/Utility/Objects"; export {default as UtilityStrings} from "./Library/Utility/Strings"; diff --git a/src/Library/State/Components/Form.php b/src/Library/State/Components/Form.php index 71ae79a..fe3492e 100644 --- a/src/Library/State/Components/Form.php +++ b/src/Library/State/Components/Form.php @@ -75,6 +75,7 @@ class Form { "select" => [], "default" => null, "multiple" => false, + "depends" => null, "_style" => [], ];