datasync-dynamic-form 1.3.3 → 1.3.5

package/dist/DsDynamicForm.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Component, useImperativeHandle, forwardRef } from "react";
 import Multiselect from 'multiselect-react-dropdown';
@@ -15,11 +6,15 @@ import { DsBlob } from "datasync-blob";
 import { DsPdf } from "datasync-pdf";
 // reactstrap components
 import { Button, Label, FormGroup, Input, InputGroupText, InputGroup, Row as ReactstrapRow, Col as ReactstrapCol, } from "reactstrap";
+import "./flex-grid.css";
+const FlexRow = ({ className, ...props }) => (_jsx(ReactstrapRow, { className: ["flex-row", className].filter(Boolean).join(" "), ...props }));
+const FlexCol = ({ className, ...props }) => (_jsx(ReactstrapCol, { className: ["flex-col", className].filter(Boolean).join(" "), ...props }));
 const debugging = false;
 const globals = {
     parameters: {
         debugging: debugging,
         local: true,
+        production: false,
         use_navigate: false,
         save_failed_alert: false,
         form_version: "1.0",
@@ -187,8 +182,11 @@ export class DsDynamicForm extends Component {
             this.onFormSavedLocalHandler, this.onFormUpdatedLocalHandler, this.onFormFailedLocalHandler, null);
         };
         /** Form Handlers */
-        this.onClickSubmitFormHandler = (event) => __awaiter(this, void 0, void 0, function* () {
+        this.onClickSubmitFormHandler = async (event) => {
             try {
+                //Trigger handler as user click submit button in order to animate checking + saving progress bar.
+                if (this.props.onBeforeFormSubmit)
+                    this.props.onBeforeFormSubmit(this.local_data_blob);
                 if (event)
                     event.preventDefault();
                 //Force all fields check    
@@ -247,7 +245,50 @@ export class DsDynamicForm extends Component {
                 console.error(`onClickSubmitFormHandler raises "${error}"`);
                 return false;
             }
-        });
+        };
+        this.checkCurrentPage = async (event) => {
+            try {
+                /*Trigger typically called from external to check curetn page fields.
+                returns true when all fields are correct. User is then allowed to pursue to next page*/
+                if (event)
+                    event.preventDefault();
+                //Force all fields check    
+                let canSubmit = true;
+                let firstErrFieldName = null;
+                let iPage = this.props.active_page || 0; //Process only current page
+                let iRow = 0;
+                while (iRow < this.state.form.Pages[iPage].Rows.length) {
+                    let iCol = 0;
+                    while (iCol < this.state.form.Pages[iPage].Rows[iRow].Cols.length) {
+                        let ii = 0;
+                        while (ii < this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields.length) {
+                            const field = this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields[ii];
+                            const isValid = this.checkValidation(field);
+                            if (!isValid && firstErrFieldName === null) {
+                                firstErrFieldName = field.name;
+                            }
+                            canSubmit = canSubmit && isValid;
+                            ii++;
+                        }
+                        iCol++;
+                    }
+                    iRow++;
+                }
+                if (!canSubmit) {
+                    let err_message = `La page ${iPage} de formulaire comporte des erreurs !`;
+                    if (this.props.onFormFailed)
+                        this.props.onFormFailed(err_message);
+                    else
+                        console.error(`checkCurrentPage ${iPage} raises "${err_message}"`);
+                    return false;
+                }
+                return canSubmit;
+            }
+            catch (error) {
+                console.error(`checkCurrentPage raises "${error}"`);
+                return false;
+            }
+        };
         this.onFormSavedLocalHandler = (blob) => {
             if (this.props.onFormSaved)
                 this.props.onFormSaved(blob);
@@ -385,22 +426,22 @@ export class DsDynamicForm extends Component {
         };
         this._rowRendering = (row) => {
             try {
-                return (_jsx(ReactstrapRow, { children: row.Cols.map((col, ii) => {
+                return (_jsx(FlexRow, { children: row.Cols.map((col, ii) => {
                         return (this._colRendering(col));
                     }) }));
             }
             catch (err) {
-                return (_jsxs(ReactstrapCol, { children: ["Error ", err.message] }));
+                return (_jsxs(FlexCol, { children: ["Error ", err.message] }));
             }
         };
         this._colRendering = (col) => {
             try {
-                return (_jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", id: `${col.Id ? col.Id : ''}`, children: col.Fields.map((field, ii) => {
+                return (_jsx(FlexCol, { id: `${col.Id ? col.Id : ''}`, children: col.Fields.map((field, ii) => {
                         return this._fieldRendering(field, ii);
                     }) }));
             }
             catch (err) {
-                return (_jsxs(ReactstrapCol, { children: ["Error ", err.message] }));
+                return (_jsxs(FlexCol, { children: ["Error ", err.message] }));
             }
         };
         this._fieldRendering = (field, ii) => {
@@ -474,7 +515,7 @@ export class DsDynamicForm extends Component {
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", children: _jsx(Button, { id: "dsdf_clear_button", block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
+                return (_jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_clear_button", block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
             }
         };
         this._submitButton = () => {
@@ -483,7 +524,7 @@ export class DsDynamicForm extends Component {
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", children: _jsx(Button, { id: "dsdf_submit_button", block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
+                return (_jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_submit_button", block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
             }
         };
         this.render = () => {
@@ -498,12 +539,12 @@ export class DsDynamicForm extends Component {
                                 return (_jsx("div", { id: `dsdf_page_${pageIndex}`, className: `form-page ${((pageIndex == this.state.active_page) || this.props.read_only) ? "page_visible" : ""}`, children: page.Rows.map((row, rowIndex) => {
                                         return (_jsx("div", { children: this._rowRendering(row) }, rowIndex));
                                     }) }, pageIndex));
-                            }) }), _jsxs(ReactstrapRow, { id: "dsdf_buttons_container", className: "buttons-row", children: [this._cancelButton(), this._submitButton(), this.props.custom_button_caption &&
-                                _jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", children: _jsx(Button, { id: "dsdf_custom_button", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler)
+                            }) }), _jsxs(FlexRow, { id: "dsdf_buttons_container", className: "buttons-row", children: [this._cancelButton(), this._submitButton(), this.props.custom_button_caption &&
+                                _jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_custom_button", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler)
                                             this.props.custom_button_handler(this.state.form);
                                         else
                                             console.error("custom_button_handler unset !"); }, children: this.props.custom_button_caption }) }), this.props.custom_button_caption2 &&
-                                _jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", children: _jsx(Button, { id: "dsdf_custom_button2", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler2)
+                                _jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_custom_button2", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler2)
                                             this.props.custom_button_handler2(this.state.form);
                                         else
                                             console.error("custom_button_handler2 unset !"); }, children: this.props.custom_button_caption2 }) })] })] }));
@@ -522,6 +563,9 @@ export class DsDynamicForm extends Component {
             this.clearForm();
         }
         if (this.props.active_page != prevProps.active_page) {
+            //Page is about to change, then triger onPageChanging Handler
+            if (this.props.onPageChanging)
+                this.props.onPageChanging({ "active_page": prevProps.active_page ?? 0, "next_page": this.props.active_page ?? 0, "last_page": this.state.form.Pages.length - 1 });
             if (globals.parameters.debugging)
                 console.log("active_page has changed !");
             try {
@@ -548,14 +592,18 @@ export const DsDynamicFormForwardRef = forwardRef((props, ref) => {
     const innerRef = React.useRef(null);
     useImperativeHandle(ref, () => ({
         clearForm: () => {
-            var _a;
-            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.clearForm();
+            innerRef.current?.clearForm();
         },
         onClickSubmitFormHandler: (event) => {
             return innerRef.current
                 ? innerRef.current.onClickSubmitFormHandler(event)
                 : Promise.resolve(false);
         },
+        checkCurrentPage: (event) => {
+            return innerRef.current
+                ? innerRef.current.checkCurrentPage(event)
+                : Promise.resolve(false);
+        },
     }));
-    return (_jsx(DsDynamicForm, Object.assign({}, props, { ref: innerRef })));
+    return (_jsx(DsDynamicForm, { ...props, ref: innerRef }));
 });

package/dist/flex-grid.css

@@ -0,0 +1,51 @@
+.flex-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 10px;
+    /* Make all .flex-col in a flex-row equal height */
+    align-items: stretch;
+    /* For multi-line rows, ensure lines use full vertical space */
+    align-content: stretch;
+}
+
+.flex-col {
+    flex: 1 1 0;
+    /* Fill available vertical space of its flex line */
+    height: 100%;
+    min-height: 100px;
+    border: 3px solid;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.box-next {
+    flex: 1 1 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+/* Media query pour 600px :  diviser par 2 le nombre de div par ligne */
+@media (max-width: 600px) {
+    .box {
+        flex:  1 1 calc(50% - 5px);
+        max-width: calc(50% - 5px);
+    }
+    
+    /* Si une div est seule sur sa ligne, elle prend 100% */
+    .box:only-child {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+}
+
+/* Media query pour 300px : toutes les divs à 100% de la largeur */
+@media (max-width: 300px) {
+    .box {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+}

package/dist/types/DsDynamicForm.d.ts

@@ -1,4 +1,5 @@
 import React, { Component, ChangeEvent } from "react";
+import "./flex-grid.css";
 interface Field {
     name: string;
     input_type: string;
@@ -79,10 +80,16 @@ interface DsDynamicFormProps {
     read_only?: boolean;
     foreign_keys?: DataTier;
     onFormChange?: (data: DataTier) => void;
+    onBeforeFormSubmit?: (data: DataBlob) => void;
     onFormSubmit?: (data: DataBlob) => void;
     onFormSaved?: (blob: DataBlob) => void;
     onFormUpdated?: (blob: DataBlob) => void;
     onFormFailed?: (error: string) => void;
+    onPageChanging?: (pageInfo: {
+        active_page: number;
+        next_page: number;
+        last_page: number;
+    }) => void;
     clearOnSave?: boolean;
     clearOnUpdate?: boolean;
     onTerminated?: () => void;
@@ -97,6 +104,10 @@ interface DsDynamicFormProps {
     custom_button_handler2?: (form: Form) => void;
     show_hidden?: boolean;
     active_page?: number;
+    col_xs?: number | string;
+    col_sm?: number | string;
+    col_md?: number | string;
+    col_lg?: number | string;
 }
 interface DsDynamicFormState {
     form: Form;
@@ -140,6 +151,7 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
     saveFormToDatasyncProcess: () => void;
     /** Form Handlers */
     onClickSubmitFormHandler: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
+    checkCurrentPage: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
     onFormSavedLocalHandler: (blob: DataBlob) => void;
     onFormUpdatedLocalHandler: (blob: DataBlob) => void;
     onFormFailedLocalHandler: (err: string) => void;
@@ -163,6 +175,7 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
 export type DsDynamicFormRef = {
     clearForm: () => void;
     onClickSubmitFormHandler: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
+    checkCurrentPage: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
 };
-export declare const DsDynamicFormForwardRef: any;
+export declare const DsDynamicFormForwardRef: React.ForwardRefExoticComponent<DsDynamicFormProps & React.RefAttributes<DsDynamicFormRef>>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "datasync-dynamic-form",
   "description": "Datasync Dynamic Form component",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "main": "dist/DsDynamicForm.js",
   "module": "dist/DsDynamicForm.js",
   "types": "dist/types/DsDynamicForm.d.ts",
@@ -21,14 +21,16 @@
     "multiselect-react-dropdown": "^2.0.25",
     "react": ">=18.2.0",
     "reactstrap": ">=8.4.1",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.25"
   },
   "peerDependencies": {
     "multiselect-react-dropdown": "^2.0.25",
     "react": "^17 || ^18"
   },
   "scripts": {
-    "hybrid": "tsc"
+    "hybrid": "tsc && cp src/flex-grid.css dist/flex-grid.css"
   },
   "keywords": [],
   "author": "",