Implement depends action in form

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}}<label for="{{../form.id}}_{{item.name}}">{{#if item.required}}<b>{{/if}}{{item.label}}{{#if item.required}}</b>*{{/if}}</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}}
             >
             <span class="lever"></span>
             On

src/Front/Library/Utility/Boolean.ts

@@ -0,0 +1,62 @@
+/**
+ * Utility
+ *
+ * Front TS Scrips for multiple tasks
+ *
+ * @package    kzarshenas/crazyphp
+ * @author     kekefreedog <kevin.zarshenas@gmail.com>
+ * @copyright  2022-2024 Kévin Zarshenas
+ */
+
+/**
+ * Dependances
+ */
+
+/**
+ * Boolean
+ *
+ * Methods for manage boolean
+ *
+ * @package    kzarshenas/crazyphp
+ * @author     kekefreedog <kevin.zarshenas@gmail.com>
+ * @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;
+
+    }
+
+}

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<any> => {
 
+        // 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<any> => {
 
+        // 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<any> => {
 
+        // 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 = <string[]>[...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<any> = 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
      ******************************************************
      */

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,

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";

src/Library/State/Components/Form.php

@@ -75,6 +75,7 @@ class Form {
         "select"        =>  [],
         "default"       =>  null,
         "multiple"      =>  false,
+        "depends"       =>  null,
         "_style"        =>  [],
     ];