Skip to content

Commit

Permalink
Implement depends action in form
Browse files Browse the repository at this point in the history
  • Loading branch information
kekefreedog committed Dec 28, 2024
1 parent 9c24333 commit 5fb80da
Showing 6 changed files with 245 additions and 5 deletions.
9 changes: 4 additions & 5 deletions resources/Hbs/Partials/form.hbs
Original file line number Diff line number Diff line change
@@ -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
62 changes: 62 additions & 0 deletions src/Front/Library/Utility/Boolean.ts
Original file line number Diff line number Diff line change
@@ -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;

}

}
175 changes: 175 additions & 0 deletions src/Front/Library/Utility/Form.ts
Original file line number Diff line number Diff line change
@@ -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
******************************************************
*/
2 changes: 2 additions & 0 deletions src/Front/Types/index.d.ts
Original file line number Diff line number Diff line change
@@ -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,
1 change: 1 addition & 0 deletions src/Front/index.ts
Original file line number Diff line number Diff line change
@@ -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";
1 change: 1 addition & 0 deletions src/Library/State/Components/Form.php
Original file line number Diff line number Diff line change
@@ -75,6 +75,7 @@ class Form {
"select" => [],
"default" => null,
"multiple" => false,
"depends" => null,
"_style" => [],
];

0 comments on commit 5fb80da

Please sign in to comment.