pw-components-js-dev v0.1.23

pw-components-js-dev

Installation

Pour installer pw-components Package, exécutez simplement l'une ces commandes suivantes dans votre terminal :

• Avec yarn:

yarn add pw-components-js-dev

• Avec npm:

npm install pw-components-js-dev

Utilisation

Etape 1 : Définition type de champs assets/common/structure/FIELD/FIELD.STRUCTURE.js

class STRUCTURE{
	static LASTNAME = {
		NAME:"lastname",
		TYPE:"text",
	}
	static FIRSTNAME = {
		NAME:"firstname",
		TYPE:"text",
	}
	static EMAIL = {
		NAME:"email",
		TYPE:"email",
	}
	static PHONE = {
		NAME:"phone",
	}
	static CATEGORY = {
		NAME:"category",
	}
	static PASSWORD = {
		NAME:"password",
		TYPE:"password",
	}
	static CONFIRM_PASSWORD = {
		NAME:"confirm_password",
		TYPE:"password",
	}
	static SEARCH = {
		NAME:"search",
		TYPE:"text",
	}
}
export default STRUCTURE

Dans ce fichier, on définit le nom (name) et le type de champs qu’on utilise dans le projet

Etape 2 : Définition de structure de champs

Exemple pour une langue FR common/structure/FIELD/LANG/FIELD.fr.js :

import STRUCTURE from "common/structure/FIELD/FIELD.STRUCTURE.js"

class FIELD {
	static FIRSTNAME = {
		...STRUCTURE.FIRSTNAME,
		PLACEHOLDER:{
			DEFAULT:"Votre prénom",
			BO:"Le prénom",
		},
		LABEL:{
			DEFAULT:"Entrez votre prénom",
			BO:"Entrez le prénom",
		},
		MINIMUM_ERROR_MESSAGE:{
			DEFAULT:"Votre prénom doit contenir au moins 3 caractères",
			BO:"Le prénom doit contenir au moins 3 caractères",
		},
		MAXIMUM_ERROR_MESSAGE:{
			DEFAULT:"Votre prénom doit contenir au plus 255 caractères",
			BO:"Le prénom doit contenir au plus 255 caractères",
		},
		MUST_NOT_CONTAIN_NUMBER:{
			DEFAULT:"Votre prénom ne doit pas contenir de chiffre",
			BO:"Le prénom ne doit pas contenir de chiffre",
		},
		EMPTY_MESSAGE:{
			DEFAULT:"Veuillez saisir votre prénom",
			BO:"Veuillez saisir le prénom",
		},
	}
	static EMAIL = {
		...STRUCTURE.EMAIL,
		PLACEHOLDER:{
			DEFAULT:"Votre adresse email",
			BO:"L'adresse email",
		},
		LABEL:{
			DEFAULT:"Entrez votre adresse email",
			BO:"Entrez l'adresse email",
		},
		INVALID_MESSAGE:{
			DEFAULT:"Votre adresse email est invalide",
			BO:"L'adresse email est invalide",
		},
		EMPTY_MESSAGE:{
			DEFAULT:"Veuillez saisir l'adresse email",
			BO:"Veuillez saisir l'adresse email",
		},
	}
	static PHONE = {
		...STRUCTURE.PHONE,
		PLACEHOLDER:{
			DEFAULT:"Votre numéro de téléphone",
			BO:"Le numéro de téléphone",
		},
		LABEL:{
			DEFAULT:"Entrez votre numéro de téléphone",
			BO:"Entrez le numéro de téléphone",
		},
		INVALID_MESSAGE:{
			DEFAULT:"Numéro de téléphone invalide",
			BO:"Numéro de téléphone invalide",
		},
	}
}

Exemple pour une langue MG common/structure/FIELD/LANG/FIELD.mg.js :

import STRUCTURE from "common/structure/FIELD/FIELD.STRUCTURE.js"

class FIELD{
	static FIRSTNAME = {
		...STRUCTURE.FIRSTNAME,
		PLACEHOLDER:{
			DEFAULT:"Ny fanampin'anaranao",
			BO:"Ny fanampin'anaranan",
		},
		LABEL:{
			DEFAULT:"Ampidiro ny fanampin'anaranao",
			BO:"Ampidiro ny fanampin'anarana",
		},
		MINIMUM_ERROR_MESSAGE:{
			DEFAULT:"Ny fanampin'anaranao dia tsy maintsy misy litera 3 farafahakeliny",
			BO:"Ny fanampin'anarana dia tsy maintsy misy litera 3 farafahakeliny",
		},
		MAXIMUM_ERROR_MESSAGE:{
			DEFAULT:"Ny fanampin'anaranao dia tsy maintsy misy litera 255 farafahabehany",
			BO:"Ny fanampin'anarana dia tsy maintsy misy litera 255 farafahabehany",
		},
		MUST_NOT_CONTAIN_NUMBER:{
			DEFAULT:"Ny fanampin'anaranao dia tsy azo asiana tarehimarika",
			BO:"Ny fanampin'anarana dia tsy azo asiana tarehimarika",
		},
		EMPTY_MESSAGE:{
			DEFAULT:"Fenoy ny fanampin'anaranao",
			BO:"Fenoy ny fanampin'anarana",
		},
	}
	static EMAIL = {
		...STRUCTURE.EMAIL,
		PLACEHOLDER:{
			DEFAULT:"Ny mailakao",
			BO:"Ny mailaka",
		},
		LABEL:{
			DEFAULT:"Ampidiro ny mailakao",
			BO:"Ampidiro ny mailaka",
		},
		INVALID_MESSAGE:{
			DEFAULT:"Hamarino tsara ny mailakao",
			BO:"Hamarino tsara ny mailaka",
		},
		EMPTY_MESSAGE:{
			DEFAULT:"Fenoy ny mailakao",
			BO:"Fenoy ny mailaka",
		},
	}
	static PHONE = {
		...STRUCTURE.PHONE,
		PLACEHOLDER:{
			DEFAULT:"Ny laharana antarobianao",
			BO:"Ny laharana antarobiany",
		},
		LABEL:{
			DEFAULT:"Ampidiro ny laharana antarobianao",
			BO:"Ampidiro ny laharana antarobiany",
		},
		INVALID_MESSAGE:{
			DEFAULT:"Numéro de téléphone invalide",
			BO:"Numéro de téléphone invalide",
		},
	}
}

Etape 3: Création la validation de champs assets/common/structure/FIELD/FIELD.VALIDATION.js

import {
    VALIDATION,
    Validation,
} from "pw-components-js-dev"

import {FieldManager} from "common/functions/getField.js"

class FIELD_VALIDATION {
    static init() {
        var domain = FieldManager.domain;
        
        Validation.add("confirmPasswordV1", (password) => {
            return (value) => {
                if (password.value == "" && value === "") {
                    return true;
                }
                return (
                    password.value == value
                )
            }
        })
        Validation.add("phone", (password) => {
            return (value, params = {}) => {
                var {instance} = params
                return instance.component.$refs.input.inputmask.isComplete();
            }
        })
        VALIDATION.add("PHONE", {
            INSCRIPTION: [],
            MODAL_USER_ADD: [
                Validation.build({ domain })("PHONE", "phone", "INVALID_MESSAGE"),
            ],
            MODAL_USER_EDIT: [],
        });
        Validation.add("notEmptySelect", (password) => {
            return (baseValue, params = {}) => {
                var {instance} = params
                var value = instance.component.getValue();
                return (value !== "" && value !== undefined && value !== null)
            }
        })
        VALIDATION.add("CATEGORY", {
            MODAL_USER_FILTER: [
                Validation.build({ domain })("CATEGORY", "notEmptySelect", "INVALID_MESSAGE"),
            ],
        });
        VALIDATION.add("FIRSTNAME", {
            INSCRIPTION: [
                Validation.build({ domain })("FIRSTNAME", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "min",
                    "MINIMUM_ERROR_MESSAGE",
                    3
                ),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "max",
                    "MAXIMUM_ERROR_MESSAGE",
                    255
                ),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "notContainNumber",
                    "MUST_NOT_CONTAIN_NUMBER"
                ),
            ],
            MODAL_USER_ADD: [
                Validation.build({ domain })("FIRSTNAME", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "min",
                    "MINIMUM_ERROR_MESSAGE",
                    3
                ),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "max",
                    "MAXIMUM_ERROR_MESSAGE",
                    255
                ),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "notContainNumber",
                    "MUST_NOT_CONTAIN_NUMBER"
                ),
            ],
            MODAL_USER_EDIT: [
                Validation.build({ domain })("FIRSTNAME", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "min",
                    "MINIMUM_ERROR_MESSAGE",
                    3
                ),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "max",
                    "MAXIMUM_ERROR_MESSAGE",
                    255
                ),
                Validation.build({ domain })(
                    "FIRSTNAME",
                    "notContainNumber",
                    "MUST_NOT_CONTAIN_NUMBER"
                ),
            ],
        });
        VALIDATION.add("EMAIL", {
            INSCRIPTION: [
                Validation.build({ domain })("EMAIL", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })("EMAIL", "emailValid", "INVALID_MESSAGE"),
            ],
            MODAL_USER_ADD: [
                Validation.build({ domain })("EMAIL", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })("EMAIL", "emailValid", "INVALID_MESSAGE"),
            ],
            MODAL_USER_EDIT: [
                Validation.build({ domain })("EMAIL", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })("EMAIL", "emailValid", "INVALID_MESSAGE"),
            ],
        });
        Validation.add("passwordValidEmpty", () => {
            return (value) => {
                if(
                    value === "" ||
                    value === undefined ||
                    value === null
                ){
                    return true
                }
                return (
                    Validation.get("containNumber")()(value) &&
                    Validation.get("min")(8)(value) &&
                    Validation.get("containSpecialChar")()(value) &&
                    /[A-Z]/.test(value)
                )
            }
        })
        VALIDATION.add("PASSWORD", {
            INSCRIPTION: [
                Validation.build({ domain })("PASSWORD", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })(
                    "PASSWORD",
                    "passwordValid",
                    "INVALID_MESSAGE"
                ),
            ],
            MODAL_USER_ADD: [
                Validation.build({ domain })("PASSWORD", "notEmpty", "EMPTY_MESSAGE"),
                Validation.build({ domain })(
                    "PASSWORD",
                    "passwordValidEmpty",
                    "INVALID_MESSAGE"
                ),
            ],
            MODAL_USER_EDIT: [
                Validation.build({ domain })(
                    "PASSWORD",
                    "passwordValidEmpty",
                    "INVALID_MESSAGE"
                ),
            ],
        });
        VALIDATION.add("CONFIRM_PASSWORD", {
            INSCRIPTION: [
                Validation.build({ domain })(
                    "CONFIRM_PASSWORD",
                    "notEmpty",
                    "EMPTY_MESSAGE"
                ),
                Validation.build({ domain, action: "check" })(
                    "CONFIRM_PASSWORD",
                    "confirmPasswordV1",
                    "INVALID_MESSAGE"
                ),
            ],
            MODAL_USER_ADD: [
                Validation.build({ domain, action: "check" })(
                    "CONFIRM_PASSWORD",
                    "confirmPasswordV1",
                    "INVALID_MESSAGE"
                ),
            ],
            MODAL_USER_EDIT: [
                Validation.build({ domain, action: "check" })(
                    "CONFIRM_PASSWORD",
                    "confirmPasswordV1",
                    "INVALID_MESSAGE"
                ),
            ],
        });
    }
}
export { FIELD_VALIDATION };

Dans ce fichier, on définit la validation des champs

Etape 4 : Création la limitation de champs assets/common/structure/FIELD/FIELD.LIMITATION.js

import {
    LIMITATION,
    Limitation
} from "pw-components-js-dev"

class FIELD_LIMITATION {
	static init() {
        LIMITATION.add("CATEGORY", []);
        LIMITATION.add("PHONE", []);
		LIMITATION.add("LASTNAME", [
			{
				verification: Limitation.get("max")(255),
			},
		]);
		LIMITATION.add("FIRSTNAME", [
			{
				verification: Limitation.get("max")(255),
			},
		]);
		LIMITATION.add("EMAIL", [
			{
				verification: Limitation.get("max")(255),
			},
		]);
		LIMITATION.add("PASSWORD", [
			{
				verification: Limitation.get("max")(255),
			},
		]);
		LIMITATION.add("CONFIRM_PASSWORD", [
			{
				verification: Limitation.get("max")(255),
			},
		]);
	}
}

export { FIELD_LIMITATION };

Dans ce fichier, on définit la limitation des champs

Etape 5 : Création la restriction de champs assets/common/structure/FIELD/FIELD.RESTRICTION.js

import {
    RESTRICTION,
    Restriction,
} from "pw-components-js-dev"

class FIELD_RESTRICTION {
	static init() {
        RESTRICTION.add("CATEGORY", []);
        RESTRICTION.add("PHONE", []);
		RESTRICTION.add("LASTNAME", [
			{
				verification: Restriction.get("disallowNumber")(),
			},
		]);
		RESTRICTION.add("FIRSTNAME", [
			{
				verification: Restriction.get("disallowNumber")(),
			},
		]);
		RESTRICTION.add("EMAIL", []);
		RESTRICTION.add("PASSWORD", []);
		RESTRICTION.add("CONFIRM_PASSWORD", []);
	}
}

export { FIELD_RESTRICTION };

Dans ce fichier, on définit la restriction des champs

Etape 6 : Configuration de champs common/functions/getField.js

import FIELDMG from "common/structure/FIELD/LANG/FIELD.mg.js"
import FIELDFR from "common/structure/FIELD/LANG/FIELD.fr.js"
import {
	Field,
	VALIDATION,
	RESTRICTION,
	LIMITATION,
} from "pw-components-js-dev"

function getFields(){
	if(window.lang == "MG"){
		return FIELDMG
	}
	else if(window.lang == "FR"){
		return FIELDFR
	}
}
function getField(){
	if(FieldManager.Field){
		return FieldManager.Field;
	}
	var FIELD = getFields()
	Object.keys(FIELD).map((field) =>{
		Field.add(field, FIELD[field]);
	})
	FieldManager.Field = Field.get();
	return FieldManager.Field;
}
class FieldManager{
	static Field = null;	
	static create(KEY, page) {
		var getStructure = () =>{
			if(!getField()[KEY]){
				console.warn(`Field / create : STRUCTURE for ${KEY} not defined`);
				return {}
			}
			return getField()[KEY]
		}
		var getValidation = () =>{
			if(
				!VALIDATION ||
				!VALIDATION.data ||
				!VALIDATION.data[KEY] ||
				!VALIDATION.data[KEY][page]
			){
				console.warn(`Field / create : VALIDATION for ${KEY} not defined`);
				return []
			}
			return VALIDATION.data[KEY][page]
		}
		var getRestriction = () =>{
			if(
				!RESTRICTION ||
				!RESTRICTION.data ||
				!RESTRICTION.data[KEY]
			){
				console.warn(`Field / create : RESTRICTION for ${KEY} not defined`);
				return []
			}
			return RESTRICTION.data[KEY]
		}
		var getLimitation = () =>{
			if(
				!LIMITATION ||
				!LIMITATION.data ||
				!LIMITATION.data[KEY]
			){
				console.warn(`Field / create : LIMITATION for ${KEY} not defined`);
				return []
			}
			return LIMITATION.data[KEY]
		}
		var field = Field.create({
	    	domain:FieldManager.domain,
	        STRUCTURE: getStructure(),
	        VALIDATION: getValidation(),
	        RESTRICTION: getRestriction(),
	        LIMITATION: getLimitation(),
	    });
	    field.page = page;
	    return field
	}
}
export { getField, FieldManager }

Etape 7 : Initialisation de champs common/structure/FIELD/FIELD.js

import {FIELD_VALIDATION} from "common/structure/FIELD/FIELD.VALIDATION.js"
import {FIELD_RESTRICTION} from "common/structure/FIELD/FIELD.RESTRICTION.js"
import {FIELD_LIMITATION} from "common/structure/FIELD/FIELD.LIMITATION.js"

import {getField} from "common/functions/getField.js"

class FIELD {
    static init(){
        getField();
        FIELD_VALIDATION.init();
        FIELD_RESTRICTION.init();
        FIELD_LIMITATION.init();
    }
}

export {FIELD}

Exemple d'utilisation

Etape 8 : Création de fichier main.js

import TestStructure from "vue/components/modules/test/TestStructure/TestStructure.jsx";
import { setChildView } from "vue/helper/renderVue.js";
import { getConfig } from "./test_structure_config.js";

import { getButton } from "common/functions/getButton.js";
import Button from "common/classes/Button.js";

import { FIELD } from "common/structure/FIELD/FIELD.js";
import { FieldManager } from "common/functions/getField.js";

var BUTTON = getButton();
function main() {
    getConfig().component = {};
    FieldManager.domain = "BO";
    FIELD.init();
    var getFieldCreate = () => {
        var page = "MODAL_USER_ADD";
        var email = FieldManager.create("EMAIL", page);
        var lastname = FieldManager.create("LASTNAME", page);
        var password = FieldManager.create("PASSWORD", page);
        var phone = FieldManager.create("PHONE", page);
        var firstname = FieldManager.create("FIRSTNAME", page);
        var confirmPassword = FieldManager.create("CONFIRM_PASSWORD", page);
        confirmPassword.linked = password;
        password.linked = confirmPassword;
        password.useLink = false;
        password.onLink = (params = {}) => {
            if (password.value == password.linked.value) {
                password.linked.checkValidation(false);
            }
        };
        return {
            email,
            lastname,
            password,
            firstname,
            phone,
            confirmPassword,
            confirmPassword,
        };
    };
    var getFieldFilter = () => {
        var page = "MODAL_USER_FILTER";
        var category = FieldManager.create("CATEGORY", page);
        category.options = [
            {
                value: "",
                content: "Tous les catégories",
            },
            {
                value: "id-category-1",
                content: "Instituteur",
            },
            {
                value: "id-category-2",
                content: "Professeur",
            },
            {
                value: "id-category-3",
                content: "CE1",
            },
        ];
        return {
            category
        };
    };
    var getFieldEdit = () => {
        var page = "MODAL_USER_EDIT";
        var email = FieldManager.create("EMAIL", page);
        var lastname = FieldManager.create("LASTNAME", page);
        var password = FieldManager.create("PASSWORD", page);
        var firstname = FieldManager.create("FIRSTNAME", page);
        var confirmPassword = FieldManager.create("CONFIRM_PASSWORD", page);
        confirmPassword.linked = password;
        password.linked = confirmPassword;
        password.useLink = false;
        password.onLink = (params = {}) => {
            if (password.value == password.linked.value) {
                password.linked.checkValidation(false);
            }
        };
        return {
            email,
            lastname,
            password,
            firstname,
            confirmPassword,
        };
    };
    var getButtonCreate = (fields) =>{
        var button = Button.create({
            BUTTON: BUTTON.USER_CREATE,
            domain: FieldManager.domain,
            required_fields: Object.values(fields),
        });
        button.onSuccess = () => {
            alert("OK!");
        };
        return button;
    }

    var getButtonEdit = (fields) =>{
        var button = Button.create({
            BUTTON: BUTTON.USER_EDIT,
            domain: FieldManager.domain,
            required_fields: Object.values(fields),
        });
        button.onSuccess = () => {
            alert("OK!");
        };
        return button;
    }
    var fieldCreate = getFieldCreate()
    var fieldEdit = getFieldEdit()
    var fieldFilter = getFieldFilter()
    var buttonCreate = getButtonCreate(fieldCreate)
    var buttonEdit = getButtonEdit(fieldEdit)
    var search = FieldManager.create("SEARCH");
    getConfig().component.fieldCreate = fieldCreate;
    getConfig().component.fieldEdit = fieldEdit;
    getConfig().component.fieldFilter = fieldFilter;
    getConfig().component.buttonCreate = buttonCreate;
    getConfig().component.buttonEdit = buttonEdit;
    getConfig().component.search = search;
    setChildView(
    	"#app_body_wrapper", 
    	TestStructure, 
    	getConfig().component
    );
}
export { main };

Etape 9 : Création de composant TestStructure.jsx

Pour une page d’inscription

import { C } from "vue/helper/V01Component.jsx";
import styles from "./TestStructure.scss?module";
import classNames from "classnames";
import Components from "common/classes/Components.jsx";

export default C.make({
    ...Components.getMethods(),
    $render() {
        var {
            fieldCreate,
            buttonCreate:button,
        } = this.config;
        var {
            firstname,
            lastname,
            email,
            phone,
            password,
            confirmPassword
        } = fieldCreate

        return (
            <div class={classNames("")}>
                <div class="row">
                    <div class="col-6">
                        {this.$input(lastname)}
                        {this.$input(firstname)}
                        {this.$input(email)}
                        {this.$password(password)}
                        {this.$password(confirmPassword)}
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">{this.$button(button)}</div>
                </div>
            </div>
        );
    },
});

Pour le Modal

import { C } from "vue/helper/V01Component.jsx";
import styles from "./TestStructure.scss?module";
import classNames from "classnames";
import { getConfig } from "modules/test/test_structure/test_structure_config.js";
import Components from "common/classes/Components.jsx";
import LIST_USER_TABLE from "common/structure/TABLE/LIST_USER_TABLE.jsx";

import MODAL_CREATE_USER from "common/structure/TABLE/modal/MODAL_CREATE_USER.jsx";
import MODAL_USER_FILTER from "common/structure/TABLE/modal/MODAL_USER_FILTER.jsx";
import { showModal } from "common/functions/modal/modalFunction.js";

import PwLoading from "vue/components/core/PwLoading/PwLoading.jsx";

export default C.make({
    ...Components.getMethods(),
    ...LIST_USER_TABLE.getMethods(),
    $render() {
        var {
            fieldCreate,
            fieldEdit,
            buttonCreate,
            buttonEdit,
            fieldFilter,
            search,
        } = this.config;
        var datatable = this.setupTable();

        var openModalAjouter = () => {
            var modal = showModal(MODAL_CREATE_USER, {
                fieldCreate,
                buttonCreate,
            });
        };

        var openModalFilter = () => {
            var modal = showModal(MODAL_USER_FILTER, {
                fieldFilter,
                datatable,
            });
        };

        search.onSearch = (params = {}) => {
            var { value } = params;
            datatable.activePage = 1;
            datatable.key = value;
            datatable.load();
        };

        var resetFilters = () => {
            datatable.activePage = 1;
            datatable.filters = "";
            datatable.load();
        };

        var renderButtonFilter = () => {
            var reset = () => {
                if (datatable.filters && datatable.filters.length) {
                    return (
                        <button class="btn btn-secondary" onClick={resetFilters}>
                            Annuler les filtres
                        </button>
                    );
                }
                return null;
            }
            return (
                <span>
                    <button class="btn btn-primary" onClick={openModalFilter}>
                        Filter
                    </button>
                    {reset()}
                </span>
            );
        };

        return (
            <div class={classNames("")}>
                <div class="p-3">
                    <div class="row">
                        <div class="col-9">
                            <span
                                class="btn btn-primary"
                                onClick={openModalAjouter}
                            >
                                Ajouter
                            </span>
                            {renderButtonFilter()}
                        </div>
                        <div class="col-3">{this.$search(search)}</div>
                        <div class="col-12">
                            <div class="position-relative">
                                {this.drawTable(datatable)}
                                <PwLoading
                                    ref="loading"
                                    config={{
                                        isVisible: datatable.isLoading,
                                        hasConfig:true
                                    }}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    },
});

Modal de la création d’un utilisateur

import { C } from "vue/helper/V01Component.jsx";
import classNames from "classnames";
import { PwModalMethodes } from "common/functions/modal/PwModalMethodes.jsx";
import Components from "common/classes/Components.jsx";

export default C.make({
    ...Components.getMethods(),
	...PwModalMethodes.getMethodsJsx(),
	
	$render() {
        var {
            fieldCreate,
            buttonCreate:button,
            search,
        } = this.config;
        var {
        	firstname,
            lastname,
            email,
            phone,
            password,
            confirmPassword
        } = fieldCreate
		return (
			<div class="modal fade" ref="modal" tabindex="-1" role="dialog" aria-hidden="true">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h5 class="modal-title">Ajouter un utilisateur</h5>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
			      <div class="modal-body">
			        <form action="#">
                        {this.$input(lastname)}
                        {this.$input(firstname)}
                        {this.$phone(phone)}
                        {this.$input(email)}
                        {this.$password(password)}
                        {this.$password(confirmPassword)}
			        </form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
			        
                    {this.$button(button)}
			      </div>
			    </div>
			  </div>
			</div>
		);
	},
});

Modal de filtrage d’utilisateur

import { C } from "vue/helper/V01Component.jsx";
import classNames from "classnames";
import { PwModalMethodes } from "common/functions/modal/PwModalMethodes.jsx";
import Components from "common/classes/Components.jsx";

export default C.make({
    ...Components.getMethods(),
	...PwModalMethodes.getMethodsJsx(),
	
	$render() {
        var {
            fieldFilter,
            datatable,
        } = this.config;
        var {
        	category
        } = fieldFilter

        var applyFilter = () => {
        	var categoryInstance = category;
        	var run = () =>{
	            var category = categoryInstance.value;
	            var subcategory = $('[name="mf_subcategory"]').val();

	            var filters = [];

	            if (category && category.length) {
	                filters.push({ category });
	            }

	            if (subcategory && subcategory.length) {
	                filters.push({ subcategory });
	            }

	            datatable.activePage = 1;
	            datatable.filters = json_encode(filters);
	            datatable.load();

	            hideModalFilter();
        	}

        	run()
        };

        var hideModalFilter = () => {

        	this.$$$hide();
        };
		return (
			<div class="modal fade" ref="modal" tabindex="-1" role="dialog" aria-hidden="true">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h5 class="modal-title">Filtrage</h5>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
			      <div class="modal-body">
			        <form action="#">
                        <div class="my-1">
                        	{this.$select(category)}
                                            
                        </div>
                        <div class="my-1">
                            <label
                                class="mr-sm-2"
                                for="inlineFormCustomSelect"
                            >
                                Sous-catégorie
                            </label>
                            <select
                                ref="mf_subcategory"
                                class="custom-select mr-sm-2"
                                name="mf_subcategory"
                            >
                                <option value="">
                                    Tous les sous-catégories
                                </option>
                                <option value="id-sub-category-1">
                                    Maths
                                </option>
                                <option value="id-sub-category-2">
                                    A
                                </option>
                                <option value="id-sub-category-3">
                                    B
                                </option>
                            </select>
                        </div>
			        </form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                    <button
                        type="button"
                        class="btn btn-primary"
                        onClick={applyFilter}
                    >
                        Filtrer
                    </button>
			      </div>
			    </div>
			  </div>
			</div>
		);
	},
});

Etape 10 : Création de composant pour lister les utilisateurs

import Style from "./LIST_USER_TABLE.scss?module";
import classNames from "classnames";
import {DatatableObject as Datatable} from "pw-components-jsx-dev";
import {Datatable as Dt} from "pw-components-jsx-dev";

import MODAL_EDIT_USER from "common/structure/TABLE/modal/MODAL_EDIT_USER.jsx";
import { showModal } from "common/functions/modal/modalFunction.js";

class LIST_USER_TABLE {
	static datatable
	static getMethods() {
		return {
    		...Dt.getMethods(),
			setupTable() {
				if(LIST_USER_TABLE.datatable){
					return LIST_USER_TABLE.datatable
				}
				var datatable = new Datatable();
				LIST_USER_TABLE.datatable = datatable
				datatable.instance = this;
				datatable.head.fields = [
					{
						key: "firstname",
						text: "Prénom",
						render: this.orderable,
					},
					{
						key: "email",
						text: "Email",
						render: this.orderable,
					},
					{
						key: "phone",
						text: <u>phone</u>,
						render:this.orderable
					},
					{
						text: "Actions",
						renderBody: ({ line }) => {
							return (
								<td>
									<span
										class="btn btn-primary"
										onClick={() => {
									        var {
								                fieldEdit,
								                buttonEdit,
									        } = this.config;
								            var modal = showModal(MODAL_EDIT_USER, {
								                fieldEdit,
								                buttonEdit,
								                line
								            });
										}}
									>
										Modifier
									</span>
									<span
										class="btn btn-danger"
										onClick={() => {
											alert(
												`Suppression de ${line.firstname}`
											);
										}}
									>
										Supprimer
									</span>
								</td>
							);
						},
					},
				];
				datatable.body.data = []

				datatable.render = ({ Style:Stl, head, body }) => {
					return (
						<table class={classNames(Stl.table, Style.table)}>
							{head()}
							{body()}
						</table>
					);	
				}

				datatable.pagination = 1
				datatable.activePage = 1
				datatable.url = window.test_api_listing

				return datatable;
			},
		};
	}
}
export default LIST_USER_TABLE;

Modal de la modification d’un utilisateur

import { C } from "vue/helper/V01Component.jsx";
import classNames from "classnames";
import { PwModalMethodes } from "common/functions/modal/PwModalMethodes.jsx";
import Components from "common/classes/Components.jsx";

export default C.make({
    ...Components.getMethods(),
    ...PwModalMethodes.getMethodsJsx(),

    $render() {
        var { fieldEdit, buttonEdit: button, line } = this.config;

        var { lastname, firstname, email, password, confirmPassword } =
            fieldEdit;

        this.$setRenderIndex();

        var set = (key) => {
            return ({ element }) => {
                if (this.$getRenderIndex() > 1) {
                    return true;
                }
                element.value = line[key];
                fieldEdit[key].value = element.value;
            };
        };

        return (
            <div
                class="modal fade"
                ref="modal"
                tabindex="-1"
                role="dialog"
                aria-hidden="true"
            >
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Modifier un utilisateur</h5>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form action="#">
                                {this.$input(lastname, set("lastname"))}
                                {this.$input(firstname, set("firstname"))}
                                {this.$input(email, set("email"))}
                                {this.$password(password)}
                                {this.$password(confirmPassword)}
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button
                                type="button"
                                class="btn btn-secondary"
                                data-dismiss="modal"
                            >
                                Fermer
                            </button>

                            {this.$button(button)}
                        </div>
                    </div>
                </div>
            </div>
        );
    },
});

Etape 11 : Création de composant Components.jsx s’il n’existe pas

import classNames from "classnames";
import ComponentsStyle from "./Components.scss?module";
import { waitInput } from "core/utilities/input/input.js";
import {idGenerator} from "core/tools/security/idGenerator.js"
import PwInput from "vue/components/core/PwInput/PwInput.jsx";
import PwSelect from "vue/components/core/PwSelect/PwSelect.jsx";

class Components {
	static getMethods() {
		return {
			$setRenderIndex(){
		        if(!this.config.renderIndex){
		        	this.config.renderIndex = 0
		        }
		        this.config.renderIndex = this.config.renderIndex + 1
			},
			$getRenderIndex(){
				return this.config.renderIndex;
			},
			$setupInstance(elements){
				elements.map((element) =>{
					element.instance = this;
				})
			},
			$input(field, callback = () =>{}) {
				this.$setupInstance([field])
				var id = idGenerator();
				setTimeout(() =>{
					var {[id]:element} = this.$refs 
					callback({element})
				}, 100)
				return (
					<div class="form-group">
						<label class="pw_input">
							{field.label}
							<input
								data-jid={field.id}
								ref={id}
								type={field.type}
								placeholder={field.placeholder}
								name={field.name}
								required={field.required}
								class="pw_input form-control"
								onInput={field.checkValidation.bind(field)}
								onPaste={field.checkRestriction.bind(field)}
								onKeypress={field.checkRestriction.bind(field)}
							/>
						</label>

						<span
							class={classNames(
								"form_feedback_error",
								field.isValid
									? "d-none"
									: "invalid-feedback d-block"
							)}
						>
							{field.errorMessage}
						</span>
					</div>
				);
			},
			$phone(field, callback = () =>{}) {
				this.$setupInstance([field])
				var id = idGenerator();
				setTimeout(() =>{
					var {[id]:element} = this.$refs 
					callback({element})
				}, 100)
				return (
					<div class="form-group">
						<label class="pw_input">
							{field.label}
							<PwInput
								ref={id}
							    config={{
							        mask: "phone",
									placeholder:field.placeholder,
									name:field.name,
									required:field.required,
									className:"pw_input form-control",

							        isDirect:true,
									onInput:field.checkValidation.bind(field),
									onPaste:field.checkRestriction.bind(field),
									onKeypress:field.checkRestriction.bind(field),
									onRender:(instance) =>{
										field.component = instance
									},
							        params: {
							            attrs: {
							                "data-jid":field.id
							            },
							        },
							    }}
							/>
						</label>

						<span
							class={classNames(
								"form_feedback_error",
								field.isValid
									? "d-none"
									: "invalid-feedback d-block"
							)}
						>
							{field.errorMessage}
						</span>
					</div>
				);
			},
			$select(field, callback = () =>{}) {
				this.$setupInstance([field])
				var id = idGenerator();
				setTimeout(() =>{
					var {[id]:element} = this.$refs 
					callback({element})
				}, 100)
				return (
					<div class="form-group">
						<label class="pw_input">
							{field.label}
							<PwSelect
								ref={id}
							    config={{
							        mask: "phone",
									placeholder:field.placeholder,
									name:field.name,
									required:field.required,
									className:"pw_input form-control",

							        isDirect:true,
									onChange:field.checkValidation.bind(field),
									onRender:(instance) =>{
										field.component = instance
									},
									options: field.options,
							        params: {
							            attrs: {
							                "data-jid":field.id
							            },
							        },
							    }}
							/>
						</label>

						<span
							class={classNames(
								"form_feedback_error",
								field.isValid
									? "d-none"
									: "invalid-feedback d-block"
							)}
						>
							{field.errorMessage}
						</span>
					</div>
				);
			},
			$search(field) {
				this.$setupInstance([field])
				var onSearch = (event) =>{
					var {currentTarget:input} = event
					waitInput(input, () =>{
						var {value} = input
						var {onSearch} = field
						onSearch({value, event, input})
					}, 100)
				}
				return (
					<div class="form-group">
						<label class="pw_input">
							{field.label}
							<input
								data-jid={field.id}
								type={field.type}
								placeholder={field.placeholder}
								name={field.name}
								required={field.required}
								class="pw_input form-control"
								onInput={onSearch}
								onPaste={onSearch}
								onKeypress={onSearch}
							/>
						</label>

						<span
							class={classNames(
								"form_feedback_error",
								field.isValid
									? "d-none"
									: "invalid-feedback d-block"
							)}
						>
							{field.errorMessage}
						</span>
					</div>
				);
			},
			$password(field) {
				this.$setupInstance([field])
				if (field.switchType === undefined) {
					field.switchType = "text";
				}
				var onClickEye = () => {
					var t = field.switchType;
					field.switchType = field.type;
					field.type = t;
					field.instance.refresh();
				};
				var eye = () => {
					if (field.type == "password") {
						return (
							<svg
								xmlns="http://www.w3.org/2000/svg"
								width="24"
								height="24"
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								class="feather feather-eye"
							>
								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
								<circle cx="12" cy="12" r="3"></circle>
							</svg>
						);
					}
					return (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							class="feather feather-eye-off"
						>
							<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
							<line x1="1" y1="1" x2="23" y2="23"></line>
						</svg>
					);
				};
				return (
					<div class="form-group">
						<label class="pw_input field_pwd">
							{field.label}
							<input
								data-jid={field.id}
								type={field.type}
								placeholder={field.placeholder}
								name={field.name}
								required={field.required}
								class="pw_input form-control"
								onInput={field.checkValidation.bind(field)}
								onPaste={field.checkRestriction.bind(field)}
								onKeypress={field.checkRestriction.bind(field)}
							/>
							<span class="eye" onClick={onClickEye}>
								{eye()}
							</span>
						</label>

						<span
							class={classNames(
								"form_feedback_error",
								field.isValid
									? "d-none"
									: "invalid-feedback d-block"
							)}
						>
							{field.errorMessage}
						</span>
					</div>
				);
			},
			$button(button) {
				this.$setupInstance([button])
				return (
					<div class="form-group">
						<button 
							class="btn btn-primary"
							onClick={button.handleValidation.bind(button)}
						>
							{button.text}
						</button>
					</div>
				)
			},
		};
	}
}
export default Components;

Etape 12 : Déclaration de la variable lang dans un twig

window.lang = "FR"

Quelques méthodes sur le package pw-components-js-dev

Exemple méthodes de la validation:

Validation.add("containSpecialChar", () => {
    return (value) => {
        return /[^a-zA-ZáàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ'\-\s\d]/.test(value)
    }
})

Validation.add("min", (n) => {
    return (value) => {
        if (value.length < n) {
            return false
        }
        return true;
    }
})
Validation.add("max", (n) => {
    return (value) => {
        if (value.length > n) {
            return false
        }
        return true;
    }
})

Exemple méthode de la restriction:

Restriction.add("disallowNumber", () =>{
    return (event) => {
        if (48 <= event.keyCode && event.keyCode <= 57) {
            event.preventDefault();
        }
        return true;
    }
})

Exemple méthode de la limitation:

Limitation.add("max", (n) =>{
    return (event) => {
        var { currentTarget: input } = event
        var value = input.value
        if (value === undefined) {
            return true
        }
        if (value.length > n) {
            input.value = value.substring(0, n)
            event.preventDefault();
        }
        return true;
    }
})

Dépendances

moment
uuid