add bando page form;

2024-08-20 08:17:42 +02:00
parent 8616ae04b3
commit b4522f1580
14 changed files with 952 additions and 81 deletions
--- a/src/components/FormFieldRepeaterCriteria/index.js
+++ b/src/components/FormFieldRepeaterCriteria/index.js
@@ -0,0 +1,143 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { classNames } from 'primereact/utils';
+import { __ } from '@wordpress/i18n';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Menu } from 'primereact/menu';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+
+const FormFieldRepeaterCriteria = ({
+                                       data,
+                                       setDataFn,
+                                       fieldName,
+                                       options = [],
+                                       errors,
+                                       register,
+                                       label,
+                                       infoText
+                                   }) => {
+    const forMenu = useRef(null);
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const menuItems = [
+        {
+            type: 'existing',
+            label: __('Esistente', 'gepafin'),
+            command: (data) => {
+                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+            }
+        },
+        {
+            type: 'new',
+            label: __('Nuovo', 'gepafin'),
+            command: (data) => {
+                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+            }
+        }
+    ]
+
+    const removeItem = (index) => {
+        const newData = stateFieldData.toSpliced(index, 1);
+        setStateFieldData(newData);
+    }
+
+    const selectItem = (e, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.value = e.value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const onInputChange = (value, index, name) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o[name] = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const properField = (item, i) => {
+        return item.status === 'new'
+            ? <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
+            : <Dropdown value={item.value}
+                        onChange={(e) => selectItem(e, i)}
+                        optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
+                        options={options} optionLabel="value"/>
+    }
+
+    const usedExistingValues = stateFieldData
+        .filter(o => o.status === 'existing')
+        .map(o => o.value);
+
+    useEffect(() => {
+        const storeFieldData = data[fieldName] ?? [];
+        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
+        setStateFieldData(newData);
+        register(fieldName)
+    }, [])
+
+    useEffect(() => {
+        setDataFn(fieldName, [...stateFieldData]);
+    }, [stateFieldData])
+
+    return (
+        <div className={classNames(['appForm__field', 'formfieldrepeater'])}>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}
+            </label>
+            {stateFieldData.map((o, i) => <div key={i} className={classNames("appForm__field", 'appForm__repeaterItem')}>
+                <div className="appForm__twoCols">
+                    <div>
+                        <label htmlFor="criterionTotal">{__('Punteggio Totale', 'gepafin')}</label>
+                        <InputNumber inputId="criterionTotal"
+                                     value={o.total}
+                                     showButtons
+                                     onValueChange={(e) => onInputChange(e.value, i, 'total')}/>
+                    </div>
+                    <div>
+                        <label htmlFor="criterionThreshold">{__('Punteggio minimo per l’ammissione', 'gepafin')}</label>
+                        <InputNumber inputId="criterionThreshold"
+                                     value={o.threshold}
+                                     showButtons
+                                     onValueChange={(e) => onInputChange(e.value, i, 'threshold')}/>
+                    </div>
+                </div>
+                <div className="appForm__twoCols">
+                    <div>
+                        <label>{__('Nome criterio di valutazione', 'gepafin')}</label>
+                        <div className="p-inputgroup flex-1">
+                            {properField(o, i)}
+                            <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
+                        </div>
+                        {o.status === 'new' && infoText ? <small>{infoText}</small> : null}
+                    </div>
+                    <div>
+                        <label htmlFor="criterionMin">{__('Punteggio minimo', 'gepafin')}</label>
+                        <InputNumber inputId="criterionMin"
+                                     value={o.min}
+                                     showButtons
+                                     onValueChange={(e) => onInputChange(e.value, i, 'min')}/>
+                    </div>
+                    <div>
+                        <label htmlFor="criterionMax">{__('Punteggio massimo', 'gepafin')}</label>
+                        <InputNumber inputId="criterionMax"
+                                     value={o.max}
+                                     showButtons
+                                     onValueChange={(e) => onInputChange(e.value, i, 'max')}/>
+                    </div>
+                </div>
+            </div>)}
+            <Menu model={menuItems} popup ref={forMenu} id="aimedForMenu"/>
+            <Button type="button" iconPos="right" label={__('Aggiungi', 'gepafin')}
+                    icon="pi pi-chevron-down" onClick={(event) => forMenu.current.toggle(event)}
+                    aria-controls="aimedForMenu" aria-haspopup/>
+        </div>
+    )
+}
+
+export default FormFieldRepeaterCriteria;