- saving progress;

2024-09-02 17:15:43 +02:00
parent d634e425e5
commit c15360faf0
41 changed files with 1531 additions and 356 deletions
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingRepeater/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingRepeater/index.js
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+// tools
+import uniqid from '../../../../../../helpers/uniqid';
+
+const ElementSettingRepeater = ({
+                                    value,
+                                    name,
+                                    setDataFn
+                                }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+
+    const removeItem = (index) => {
+        const newData = stateFieldData.toSpliced(index, 1);
+        setStateFieldData(newData);
+    }
+
+    const addNewItem = () => {
+        setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '' }]);
+    }
+
+    const onInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.label = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const properField = (item, i) => {
+        return <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
+    }
+
+    useEffect(() => {
+        const storeFieldData = value ?? [];
+        setStateFieldData(storeFieldData);
+    }, []);
+
+    useEffect(() => {
+        setDataFn(name, [...stateFieldData]);
+    }, [stateFieldData])
+
+    return (
+        <div className="formElementSettings__repeater">
+            {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
+                <div className="p-inputgroup flex-1">
+                    {properField(o, i)}
+                    <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
+                </div>
+            </div>)}
+            <Button type="button" label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+        </div>
+    )
+}
+
+export default ElementSettingRepeater;
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { head } from 'ramda';
-import { __ } from '@wordpress/i18n';
+import { head, isNil } from 'ramda';
+import { __, sprintf } from '@wordpress/i18n';
 import { klona } from 'klona';

 // store
@@ -10,12 +10,17 @@ import { storeSet, useStore } from '../../../../store';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
 import { Tag } from 'primereact/tag';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { InputSwitch } from 'primereact/inputswitch';
+import ElementSettingRepeater from './components/ElementSettingRepeater';

-const BuilderElementSettings = () => {
-    const elements = useStore().main.elements();
+const BuilderElementSettings = ({ closeSettings }) => {
+    const elements = useStore().main.formElements();
    const activeElement = useStore().main.activeElement();
    const [activeElementData, setActiveElementData] = useState({});
    const [settings, setSettings] = useState([]);
+    const [validators, setValidators] = useState({});
+    const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern', 'custom'];

    const onChange = (value, name) => {
        const newSettings = settings
@@ -30,10 +35,47 @@ const BuilderElementSettings = () => {
        setSettings(newSettings);
    }

+    const onUpdateOptions = (name, value) => {
+        const newSettings = settings
+            .map(o => {
+                if (o.name === name) {
+                    o.value = value;
+                }
+
+                return o;
+            });
+
+        setSettings(newSettings);
+    }
+
    const saveSettings = () => {
        activeElementData.settings = settings;
+        activeElementData.validators = validators;
        const newElements = elements.map(o => o.id === activeElementData.id ? activeElementData : o);
-        storeSet.main.elements(newElements);
+        storeSet.main.formElements(newElements);
+        closeSettings();
+    }
+
+    const showField = (value, key) => {
+        let newValidators = klona(validators);
+        if (value) {
+            newValidators[key] = '';
+        } else {
+            newValidators[key] = null;
+        }
+        setValidators(newValidators);
+    }
+
+    const toggleRequired = (value, key) => {
+        let newValidators = klona(validators);
+        newValidators[key] = value;
+        setValidators(newValidators);
+    }
+
+    const onChangeValidator = (value, name) => {
+        let newValidators = klona(validators);
+        newValidators[name] = value;
+        setValidators(newValidators);
    }

    useEffect(() => {
@@ -41,22 +83,59 @@ const BuilderElementSettings = () => {
        if (chosen) {
            setActiveElementData(klona(chosen));
            setSettings(klona(chosen.settings));
+            setValidators(klona(chosen.validators))
        } else {
            setActiveElementData({});
            setSettings([]);
+            setValidators({})
        }
    }, [activeElement])

    return (activeElementData
            ? <div className="formElementSettings">
                <Tag value={activeElementData.name} severity="info"/>
-                {settings
-                    ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
-                    <label htmlFor={o.name}>{o.name}</label>
-                    <InputText id={o.name} aria-describedby={`${o.name}-help`}
-                               value={o.value}
-                               onChange={(e) => onChange(e.target.value, o.name)}/>
-                </div>) : null}
+                <TabView className="formElementSettings__tabs">
+                    <TabPanel header={__('Presentation', 'gepafin')}>
+                        {settings
+                            ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
+                                <label htmlFor={o.name}>{o.name}</label>
+                                {o.name === 'options'
+                                    ? <ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions} />
+                                    : <InputText id={o.name} aria-describedby={`${o.name}-help`}
+                                           value={o.value}
+                                           onChange={(e) => onChange(e.target.value, o.name)}/>}
+                            </div>) : null}
+                    </TabPanel>
+                    <TabPanel header={__('Validation', 'gepafin')}>
+                        {validators
+                            ? Object.keys(validators).map((k) => <div
+                                className="formElementSettings__field" key={k}>
+                                {k === 'isRequired'
+                                    ? <div className="formElementSettings__field">
+                                        <label htmlFor={k}>{__('Required?', 'gepafin')}</label>
+                                        <InputSwitch
+                                            checked={validators[k]}
+                                            onChange={(e) => toggleRequired(e.value, k)}/>
+                                    </div>
+                                    : null}
+                                {textBasedValidatorFields.includes(k)
+                                    ? <div className="formElementSettings__field">
+                                        <label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
+                                        <InputSwitch
+                                            checked={!isNil(validators[k])}
+                                            onChange={(e) => showField(e.value, k)}/>
+                                    </div>
+                                    : null}
+                                {textBasedValidatorFields.includes(k) && !isNil(validators[k])
+                                    ? <div className="formElementSettings__field">
+                                    <label htmlFor={k}>{k}</label>
+                                    <InputText id={k} aria-describedby={`${k}-help`}
+                                               value={validators[k]}
+                                               onChange={(e) => onChangeValidator(e.target.value, k)}/>
+                                </div> : null}
+                            </div>) : null}
+                    </TabPanel>
+                </TabView>

                <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>
            </div>
--- a/src/pages/BandoFormsEdit/components/FormBuilder/index.js
+++ b/src/pages/BandoFormsEdit/components/FormBuilder/index.js
@@ -48,7 +48,7 @@ const FormBuilder = () => {
        <>
            <Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
                <h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
-                {!isEmpty(activeElement) ? <BuilderElementSettings/> : null}
+                {!isEmpty(activeElement) ? <BuilderElementSettings closeSettings={closeSettings}/> : null}
            </Sidebar>
            <div className="formBuilder">
                <div className="formBuilder__main">
--- a/src/pages/BandoFormsEdit/index.js
+++ b/src/pages/BandoFormsEdit/index.js
@@ -6,52 +6,121 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { klona } from 'klona';

 // store
-import { storeSet, storeGet } from '../../store';
+import { storeSet, storeGet, useStore } from '../../store';

 // components
 import FormBuilder from './components/FormBuilder';
 import { Button } from 'primereact/button';

-// TODO temp
-import { formData, elementItems } from '../../tempData';
+// components
 import { InputText } from 'primereact/inputtext';
+import FormsService from '../../service/forms-service';

 const BandoFormsEdit = () => {
    const { id, formId } = useParams();
    const navigate = useNavigate();
-    const [isLoading, setIsLoading] = useState(true);
    const [formName, setFormName] = useState('');
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+
+    const getBandoId = () => {
+        const parsed = parseInt(id)
+        return !isNaN(parsed) ? parsed : 0;
+    }

    const goBack = () => {
-        navigate(`/bandi/${id}/forms`);
+        const bandoId = getBandoId();
+        navigate(`/bandi/${bandoId}/forms`);
    }

    const doSave = () => {
-        console.log('doSave', storeGet.main.formElements());
+        const content = storeGet.main.formElements();
+        const bandoId = getBandoId();
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        const formData = {
+            label: formName,
+            content
+        }
+
+        storeSet.main.setAsyncRequest();
+        if (bandoFormId === 0) {
+            FormsService.createFormForCall(bandoId, formData, formCreateCallback, errFormCreateCallback);
+        } else {
+            FormsService.updateForm(bandoFormId, formData, formCreateCallback, errFormCreateCallback)
+        }
+    }
+
+    const formCreateCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const parsed = parseInt(id)
+            const bandoId = !isNaN(parsed) ? parsed : 0;
+            if (data.data.id) {
+                navigate(`/bandi/${bandoId}/forms/${data.data.id}`);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errFormCreateCallback = (data) => {
+        console.log('errFormCreateCallback', data)
+        storeSet.main.unsetAsyncRequest();
    }

    const openPreview = () => {
-        navigate(`/bandi/${id}/forms/${formId}/preview`);
+        const bandoId = getBandoId();
+        navigate(`/bandi/${bandoId}/forms/${formId}/preview`);
    }

    const doPublish = () => {
        console.log('doPublish');
    }

+    const getElementItemsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.elementItems(data.data);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetElementItemsCallbacks = (data) => {
+        console.log('errGetElementItemsCallbacks', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.formId(data.data.id);
+            storeSet.main.formLabel(data.data.label);
+            setFormName(data.data.label);
+            const elements = klona(data.data.content);
+            storeSet.main.formElements(elements);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFormCallbacks = (data) => {
+        console.log('errGetElementItemsCallbacks', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
    useEffect(() => {
-        //const parsed = parseInt(id)
-        //const bandoId = !isNaN(parsed) ? parsed : 0;
-        //const parsedFormId = parseInt(formId)
-        //const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;

-        // 1. TODO get builder content data from API
-        storeSet.main.formLabel(formData.label);
-        const elements = klona(formData.content);
-        storeSet.main.formElements(elements);
-        storeSet.main.elementItems(elementItems);
-        setIsLoading(false);
+        storeSet.main.setAsyncRequest();
+        FormsService.getElementItems(getElementItemsCallback, errGetElementItemsCallbacks);

-    }, [id]);
+        if (bandoFormId) {
+            storeSet.main.setAsyncRequest();
+            FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
+        }
+
+        return () => {
+            storeSet.main.formId(0);
+            storeSet.main.formLabel('');
+            storeSet.main.formElements([]);
+        }
+    }, [id, formId]);

    return (
        <div className="appPage">
@@ -65,11 +134,11 @@ const BandoFormsEdit = () => {
            <div className="appPage__spacer"></div>

            <div className="appForm__field">
-                <label htmlFor="label">{__('Form label', 'gepafin')}</label>
+                <label htmlFor="label">{__('Assegna un nome a questo form', 'gepafin')}</label>
                <InputText
                    id="label"
                    value={formName}
-                    placeholder={__('Nome della forma', 'gepafin')}
+                    placeholder=""
                    onChange={(e) => setFormName(e.target.value)}
                    aria-describedby="label-help"/>
            </div>
@@ -78,7 +147,7 @@ const BandoFormsEdit = () => {

            <div className="appPageSection">
                <DndProvider backend={HTML5Backend}>
-                    {!isLoading ? <FormBuilder/> : null}
+                    {!isAsyncRequest ? <FormBuilder/> : null}
                </DndProvider>
            </div>