From 156aac3d20ff5cd4e9f95d1a5f18611bf22d267c Mon Sep 17 00:00:00 2001
From: Vitalii Kiiko <mr.psiho@gmail.com>
Date: Thu, 10 Oct 2024 14:42:19 +0200
Subject: [PATCH] - fixed fileupload;

---
 .../FormField/components/Fileupload/index.js  |  32 ++--
 src/configData.js                             |   2 +-
 .../ApplicationSteps/index.js                 |  10 +-
 src/pages/BandoApplication/index.js           | 138 ++++++++++--------
 src/pages/BandoViewBeneficiario/index.js      |  37 ++++-
 5 files changed, 132 insertions(+), 87 deletions(-)

diff --git a/src/components/FormField/components/Fileupload/index.js b/src/components/FormField/components/Fileupload/index.js
index 3a17fcb..1509156 100644
--- a/src/components/FormField/components/Fileupload/index.js
+++ b/src/components/FormField/components/Fileupload/index.js
@@ -14,6 +14,7 @@ import { mimeTypes } from '../../../../configData';
 const Fileupload = ({
                         fieldName,
                         setDataFn,
+                        control,
                         label,
                         errors,
                         register,
@@ -21,7 +22,7 @@ const Fileupload = ({
                         config = {},
                         infoText = null,
                         accept = ['image/*'],
-                        doctype = 'images',
+                        doctype = 'document',
                         maxSize = 100000000,
                         emptyText = __('Trascina qui il tuo file', 'gepafin'),
                         chooseLabel = __('Aggiungi file', 'gepafin'),
@@ -29,7 +30,7 @@ const Fileupload = ({
                         sourceId = 0,
                         source = 'application',
                         disabled = false,
-                        maxFileSize = 100000000
+                        saveFormCallback = () => {}
                     }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
     const [acceptFormats, setAcceptFormats] = useState('');
@@ -51,7 +52,9 @@ const Fileupload = ({
             setStateFieldData(data.data);
             const files = inputRef.current.getFiles();
             inputRef.current.setUploadedFiles(files);
+            setDataFn(fieldName, data.data, { shouldValidate: true });
             inputRef.current.setFiles([]);
+            saveFormCallback();
         }
     }
 
@@ -60,11 +63,12 @@ const Fileupload = ({
     }
 
     const itemTemplate = (file) => {
+        let fileName = file.fileName ? file.fileName : file.name;
         return (
             <div className="appForm__fileUploadItem">
                 <div>
                     <span className="appForm__fileUploadItemName">
-                        {file.name}
+                        {fileName}
                     </span>
                 </div>
                 <div>
@@ -72,7 +76,9 @@ const Fileupload = ({
                     {!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
                 </div>
                 <div>
-                    <Button icon="pi pi-times" severity="danger"
+                    <Button icon="pi pi-times"
+                            severity="danger"
+                            type="button"
                             disabled={disabled}
                             aria-label={__('Anulla', 'gepafin')}
                             onClick={() => onTemplateRemove(file)}/>
@@ -101,6 +107,8 @@ const Fileupload = ({
             setStateFieldData(prevState => {
                 const newFiles = prevState.filter(o => o.id !== id);
                 inputRef.current.setUploadedFiles(newFiles);
+                setDataFn(fieldName, newFiles, { shouldValidate: true });
+                saveFormCallback();
                 return newFiles;
             });
         }
@@ -154,11 +162,9 @@ const Fileupload = ({
 
     useEffect(() => {
         if (inputRef.current) {
-            const properValue = multiple
-                ? defaultValue
-                : !isEmpty(defaultValue) ? [defaultValue] : [];
-            inputRef.current.setUploadedFiles(properValue);
+            inputRef.current.setUploadedFiles(defaultValue);
         }
+        setStateFieldData(defaultValue);
     }, [defaultValue]);
 
     useEffect(() => {
@@ -166,18 +172,12 @@ const Fileupload = ({
         setAcceptFormats(accept.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
     }, [accept]);
 
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.setUploadedFiles(stateFieldData);
-        }
-        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
-    }, [stateFieldData])
-
     return (
         sourceId || sourceId === 0
             ? <>
                 <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
-                    {label}{config.required || config.isRequired ? <span className="appForm__field--required">*</span> : null}
+                    {label}{config.required || config.isRequired ?
+                    <span className="appForm__field--required">*</span> : null}
                     {acceptFormats ? ' (' + getPropeMimeLabels(accept) + ')' : null}
                 </label>
                 <FileUpload
diff --git a/src/configData.js b/src/configData.js
index 343fe94..b8e4b46 100644
--- a/src/configData.js
+++ b/src/configData.js
@@ -1,6 +1,6 @@
 export const mimeTypes = [
     { name: 'PDF', code: 'application/pdf' },
-    { name: 'p7m', ext: '.p7m,application/pkcs7-mime,application/x-pkcs7-mime' },
+    { name: 'p7m', code: '.p7m,application/pkcs7-mime,application/x-pkcs7-mime' },
     { name: 'ZIP', code: 'application/zip' },
     { name: 'Immagine', code: 'image/*' },
     {
diff --git a/src/pages/BandoApplication/ApplicationSteps/index.js b/src/pages/BandoApplication/ApplicationSteps/index.js
index a3144b1..46df2c5 100644
--- a/src/pages/BandoApplication/ApplicationSteps/index.js
+++ b/src/pages/BandoApplication/ApplicationSteps/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { range } from 'ramda';
-import { __ } from '@wordpress/i18n';
+//import { __ } from '@wordpress/i18n';
 
 // components
 import { Steps } from 'primereact/steps';
@@ -9,18 +9,18 @@ const ApplicationSteps = ({ totalSteps = 0, activeStepIndex }) => {
     const rangeArr = range(1, totalSteps + 1);
     const items = rangeArr.map(() => ({ label: 'Passo' }));
 
-    // TODO update to using Steps after primereact is updated
+    /*// TODO update to using Steps after primereact is updated
     return(
         0 !== totalSteps
             ? <span>{__('Passo', 'gepafin')}: {activeStepIndex + 1}</span>
             : null
-    )
+    )*/
 
-    /*return(
+    return(
         0 !== totalSteps
             ? <Steps model={items} activeIndex={activeStepIndex} readOnly/>
             : null
-    )*/
+    )
 }
 
 export default ApplicationSteps
\ No newline at end of file
diff --git a/src/pages/BandoApplication/index.js b/src/pages/BandoApplication/index.js
index 86690bc..77b34d4 100644
--- a/src/pages/BandoApplication/index.js
+++ b/src/pages/BandoApplication/index.js
@@ -1,7 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useParams } from 'react-router-dom';
-import { klona } from 'klona';
 import { head, is, pluck, isEmpty } from 'ramda';
 import { useForm } from 'react-hook-form';
 import { TZDate } from '@date-fns/tz';
@@ -37,7 +36,7 @@ import ApplicationSteps from './ApplicationSteps';
 const BandoApplication = () => {
     const { id } = useParams();
     const [formData, setFormData] = useState([]);
-    const [formInitialData, setFormInitialData] = useState([]);
+    const [formInitialData, setFormInitialData] = useState(null);
     const [bandoTitle, setBandoTitle] = useState('');
     const [formId, setFormId] = useState('');
     const [totalSteps, setTotalSteps] = useState(0);
@@ -54,9 +53,14 @@ const BandoApplication = () => {
         setValue,
         trigger,
         register,
-        getValues
-    } = useForm({ defaultValues: {}, mode: 'onChange' });
-    const values = getValues();
+        getValues,
+        reset
+    } = useForm({
+        defaultValues: useMemo(() => {
+            return formInitialData ? formInitialData : {}
+        }, [formInitialData]),
+        mode: 'onChange'
+    });
     const validationFns = {
         isPIVA,
         isCodiceFiscale,
@@ -68,6 +72,7 @@ const BandoApplication = () => {
         isMarcaDaBollo
     }
     const activeStepIndex = activeStep - 1;
+    const values = getValues();
 
     const onSubmit = () => {
         const applId = getApplicationId();
@@ -140,7 +145,7 @@ const BandoApplication = () => {
 
                 fieldVal = !fieldVal ? null : fieldVal;
                 if (formField && formField.name === 'fileupload') {
-                    fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : fieldVal;
+                    fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : null;
                 }
                 acc.push({
                     'fieldId': cur,
@@ -245,7 +250,12 @@ const BandoApplication = () => {
                     fieldId: o.fieldId,
                     fieldValue: o.fieldValue
                 }));
-                setFormInitialData(submitData)
+                const formDataInitial = submitData.reduce((acc, cur) => {
+                    acc[cur.fieldId] = cur.fieldValue;
+                    return acc;
+                }, {});
+                console.log('formDataInitial', formDataInitial)
+                setFormInitialData(formDataInitial);
             }
         }
         storeSet.main.unsetAsyncRequest();
@@ -277,8 +287,10 @@ const BandoApplication = () => {
     }
 
     useEffect(() => {
-        const newFormData = klona(formInitialData);
-        newFormData.map(o => setValue(o.fieldId, o.fieldValue));
+        if (formInitialData) {
+            reset();
+            Object.keys(formInitialData).map(k => setValue(k, formInitialData[k]))
+        }
     }, [formInitialData]);
 
     useEffect(() => {
@@ -312,62 +324,64 @@ const BandoApplication = () => {
             {!isAsyncRequest
                 ? <div className="appPage__content">
                     <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
-                        {formData.map(o => {
-                            const label = head(o.settings.filter(o => o.name === 'label'));
-                            const text = head(o.settings.filter(o => o.name === 'text'));
-                            const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
-                            const options = head(o.settings.filter(o => o.name === 'options'));
-                            const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
-                            const step = head(o.settings.filter(o => o.name === 'step'));
-                            const mime = head(o.settings.filter(o => o.name === 'mime'));
-                            let mimeValue = '';
+                        {formInitialData
+                            ? formData.map(o => {
+                                const label = head(o.settings.filter(o => o.name === 'label'));
+                                const text = head(o.settings.filter(o => o.name === 'text'));
+                                const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
+                                const options = head(o.settings.filter(o => o.name === 'options'));
+                                const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                                const step = head(o.settings.filter(o => o.name === 'step'));
+                                const mime = head(o.settings.filter(o => o.name === 'mime'));
+                                let mimeValue = '';
 
-                            if (mime) {
-                                mimeValue = mime.value.map(o => o.code);
-                            }
-
-                            const validations = Object.keys(o.validators).reduce((acc, cur) => {
-                                if (o.validators[cur]) {
-                                    if (['min', 'max', 'minLength', 'maxLength', 'maxSize'].includes(cur)) {
-                                        acc[cur] = parseInt(o.validators[cur]);
-                                    } else if ('pattern' === cur) {
-                                        acc[cur] = new RegExp(o.validators[cur]);
-                                    } else if ('isRequired' === cur) {
-                                        //acc[cur] = o.validators[cur];
-                                        acc['required'] = true;
-                                    } else if ('custom' === cur && validationFns[o.validators[cur]]) {
-                                        if (!acc.validate) {
-                                            acc.validate = {};
-                                        }
-                                        acc.validate[cur] = validationFns[o.validators[cur]];
-                                    }
+                                if (mime) {
+                                    mimeValue = mime.value.map(o => o.code ? o.code : o.ext);
                                 }
 
-                                return acc;
-                            }, {});
+                                const validations = Object.keys(o.validators).reduce((acc, cur) => {
+                                    if (o.validators[cur]) {
+                                        if (['min', 'max', 'minLength', 'maxLength', 'maxSize'].includes(cur)) {
+                                            acc[cur] = parseInt(o.validators[cur]);
+                                        } else if ('pattern' === cur) {
+                                            acc[cur] = new RegExp(o.validators[cur]);
+                                        } else if ('isRequired' === cur) {
+                                            //acc[cur] = o.validators[cur];
+                                            acc['required'] = true;
+                                        } else if ('custom' === cur && validationFns[o.validators[cur]]) {
+                                            if (!acc.validate) {
+                                                acc.validate = {};
+                                            }
+                                            acc.validate[cur] = validationFns[o.validators[cur]];
+                                        }
+                                    }
 
-                            return ['paragraph'].includes(o.name) && text
-                                ? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
-                                : <FormField
-                                    key={o.id}
-                                    type={o.name}
-                                    fieldName={o.id}
-                                    label={label ? label.value : ''}
-                                    placeholder={placeholder ? placeholder.value : ''}
-                                    control={control}
-                                    register={register}
-                                    errors={errors}
-                                    defaultValue={values[o.id]}
-                                    maxFractionDigits={step ? step.value : 0}
-                                    accept={mimeValue}
-                                    config={validations}
-                                    options={options ? options.value : []}
-                                    setDataFn={setValue}
-                                    sourceId={getApplicationId()}
-                                    useGrouping={false}
-                                    tableColumns={tableColumns ? tableColumns.value : {}}
-                                />
-                        })}
+                                    return acc;
+                                }, {});
+
+                                return ['paragraph'].includes(o.name) && text
+                                    ? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
+                                    : <FormField
+                                        key={o.id}
+                                        type={o.name}
+                                        fieldName={o.id}
+                                        label={label ? label.value : ''}
+                                        placeholder={placeholder ? placeholder.value : ''}
+                                        control={control}
+                                        register={register}
+                                        errors={errors}
+                                        defaultValue={values[o.id] ? values[o.id] : ''}
+                                        maxFractionDigits={step ? step.value : 0}
+                                        accept={mimeValue}
+                                        config={validations}
+                                        options={options ? options.value : []}
+                                        setDataFn={setValue}
+                                        saveFormCallback={saveDraft}
+                                        sourceId={getApplicationId()}
+                                        useGrouping={false}
+                                        tableColumns={tableColumns ? tableColumns.value : {}}
+                                    />
+                            }) : null}
 
                         <div className="appPage__spacer"></div>
 
diff --git a/src/pages/BandoViewBeneficiario/index.js b/src/pages/BandoViewBeneficiario/index.js
index 14596ac..dfe89f5 100644
--- a/src/pages/BandoViewBeneficiario/index.js
+++ b/src/pages/BandoViewBeneficiario/index.js
@@ -19,6 +19,7 @@ import { AccordionTab } from 'primereact/accordion';
 import { Button } from 'primereact/button';
 import { Messages } from 'primereact/messages';
 import { Message } from 'primereact/message';
+import { Toast } from 'primereact/toast';
 
 // api
 import BandoService from '../../service/bando-service';
@@ -35,6 +36,7 @@ const BandoViewBeneficiario = () => {
     const [newQuestion, setNewQuestion] = useState('');
     const [applicationObj, setApplicationObj] = useState(true);
     const bandoMsgs = useRef(null);
+    const toast = useRef(null);
 
     const scaricaBando = () => {
 
@@ -66,6 +68,13 @@ const BandoViewBeneficiario = () => {
     }
 
     const errCreateApplCallback = (data) => {
+        if (toast.current) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
         if (bandoMsgs.current && data.message) {
             bandoMsgs.current.show([
                 {
@@ -103,7 +112,7 @@ const BandoViewBeneficiario = () => {
     const createCallBack = (data) => {
         if (data.status === 'SUCCESS') {
             setNewQuestion('');
-            if (bandoMsgs.current && data.message) {
+            /*if (bandoMsgs.current && data.message) {
                 bandoMsgs.current.show([
                     {
                         sticky: true, severity: 'success', summary: '',
@@ -115,13 +124,20 @@ const BandoViewBeneficiario = () => {
                 setTimeout(() => {
                     bandoMsgs.current.clear();
                 }, 5000);
+            }*/
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
             }
         }
         storeSet.main.unsetAsyncRequest();
     }
 
     const errCreateCallback = (data) => {
-        if (bandoMsgs.current && data.message) {
+        /*if (bandoMsgs.current && data.message) {
             bandoMsgs.current.show([
                 {
                     sticky: true, severity: 'error', summary: '',
@@ -129,6 +145,13 @@ const BandoViewBeneficiario = () => {
                     closable: true
                 }
             ]);
+        }*/
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
         }
         storeSet.main.unsetAsyncRequest();
     }
@@ -140,7 +163,7 @@ const BandoViewBeneficiario = () => {
     }
 
     const errGetBandoCallback = (data) => {
-        if (bandoMsgs.current && data.message) {
+        /*if (bandoMsgs.current && data.message) {
             bandoMsgs.current.show([
                 {
                     sticky: true, severity: 'error', summary: '',
@@ -148,6 +171,13 @@ const BandoViewBeneficiario = () => {
                     closable: true
                 }
             ]);
+        }*/
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
         }
         set404FromErrorResponse(data);
     }
@@ -215,6 +245,7 @@ const BandoViewBeneficiario = () => {
 
             <div className="appPage__spacer"></div>
             <Messages ref={bandoMsgs}/>
+            <Toast ref={toast}/>
 
             {!isAsyncRequest && !isEmpty(data)
                 ? <div className="appPage__content">