From 111b1b562081c776a1dcb2584654e90f76812cef Mon Sep 17 00:00:00 2001
From: Vitalii Kiiko <mr.psiho@gmail.com>
Date: Tue, 1 Oct 2024 10:35:21 +0200
Subject: [PATCH] - updated call form - added new fields;

---
 .../FormField/components/Datepicker/index.js  |  8 +-
 .../components/BandoEditFormStep1/index.js    | 82 ++++++++++++++++++-
 .../components/ElementSetting/index.js        | 34 +++++++-
 src/pages/BandoFormsEdit/index.js             | 10 ++-
 src/tempData.js                               | 18 +++-
 5 files changed, 136 insertions(+), 16 deletions(-)

diff --git a/src/components/FormField/components/Datepicker/index.js b/src/components/FormField/components/Datepicker/index.js
index a997c6c..6769409 100644
--- a/src/components/FormField/components/Datepicker/index.js
+++ b/src/components/FormField/components/Datepicker/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { classNames } from 'primereact/utils';
 import { Controller } from 'react-hook-form';
-import { isNil } from 'ramda';
+
 import { Calendar } from 'primereact/calendar';
 
 const Datepicker = ({
@@ -14,7 +14,8 @@ const Datepicker = ({
                         infoText = null,
                         minDate = null,
                         maxDate = null,
-                        disabled = false
+                        disabled = false,
+                        timeOnly = false
                     }) => {
     return (
         <>
@@ -32,7 +33,8 @@ const Datepicker = ({
                               value={field.value ?? []}
                               onChange={(e) => field.onChange(e.value)}
                               dateFormat="dd/mm/yy"
-                              mask="99/99/9999"
+                              hourFormat="24"
+                              timeOnly={timeOnly}
                               showIcon
                               minDate={minDate}
                               maxDate={maxDate}
diff --git a/src/pages/BandoEdit/components/BandoEditFormStep1/index.js b/src/pages/BandoEdit/components/BandoEditFormStep1/index.js
index 895da9b..e075d51 100644
--- a/src/pages/BandoEdit/components/BandoEditFormStep1/index.js
+++ b/src/pages/BandoEdit/components/BandoEditFormStep1/index.js
@@ -18,6 +18,9 @@ import { Toast } from 'primereact/toast';
 import BandoService from '../../../../service/bando-service';
 import LookupdataService from '../../../../service/lookupdata-service';
 
+// tools
+import { isEmail } from '../../../../helpers/validators';
+
 // store
 import { storeSet } from '../../../../store';
 
@@ -44,7 +47,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
     const toast = useRef(null);
 
     const onSubmit = (formData) => {
-        if (!isNil(formData.dates) && formData.dates.length) {
+        /*if (!isNil(formData.dates) && formData.dates.length) {
             formData.dates = formData.dates.map(v => {
                 if (is(String, v)) {
                     return v;
@@ -60,10 +63,11 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
             BandoService.createBando(formData, createCallback, errCreateCallback);
         } else {
             BandoService.updateBandoStep1(formData.id, formData, createCallback, errCreateCallback);
-        }
+        }*/
     };
 
     const onSaveDraft = () => {
+        trigger();
         const formData = getValues();
         if (!isNil(formData.dates) && formData.dates.length) {
             formData.dates = formData.dates.map(v => {
@@ -285,9 +289,34 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
                 errors={errors}
                 defaultValue={values['dates']}
                 config={{ required: __('È obbligatorio', 'gepafin') }}
-                /*minDate={minDateStart}*/
             />
 
+            <div className="appForm__cols">
+                <FormField
+                    type="datepicker"
+                    disabled={shouldDisableField()}
+                    fieldName="startTime"
+                    label={__('Ora di inizio', 'gepafin')}
+                    control={control}
+                    errors={errors}
+                    defaultValue={values['startTime']}
+                    config={{ required: __('È obbligatorio', 'gepafin') }}
+                    timeOnly={true}
+                />
+
+                <FormField
+                    type="datepicker"
+                    disabled={shouldDisableField()}
+                    fieldName="endTime"
+                    label={__('Ora di fine', 'gepafin')}
+                    control={control}
+                    errors={errors}
+                    defaultValue={values['endTime']}
+                    config={{ required: __('È obbligatorio', 'gepafin') }}
+                    timeOnly={true}
+                />
+            </div>
+
             <div className="appForm__cols">
                 <FormField
                     type="numberinput"
@@ -302,6 +331,19 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
                     icon="€"
                 />
 
+                <FormField
+                    type="numberinput"
+                    disabled={shouldDisableField()}
+                    fieldName="amountMin"
+                    label={__('Importo minimo per Progetto', 'gepafin')}
+                    control={control}
+                    errors={errors}
+                    defaultValue={values['amountMin']}
+                    config={{ required: __('È obbligatorio', 'gepafin') }}
+                    inputgroup={true}
+                    icon="€"
+                />
+
                 <FormField
                     type="numberinput"
                     disabled={shouldDisableField()}
@@ -316,6 +358,38 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
                 />
             </div>
 
+            <div className="appForm__cols">
+                <FormField
+                    type="textinput"
+                    disabled={shouldDisableField()}
+                    fieldName="email"
+                    label={__('Email', 'gepafin')}
+                    control={control}
+                    errors={errors}
+                    defaultValue={values['email']}
+                    config={{
+                        required: __('È obbligatorio', 'gepafin'),
+                        validate: {
+                            isEmail
+                        }
+                    }}
+                />
+
+                <FormField
+                    type="textinput"
+                    disabled={shouldDisableField()}
+                    fieldName="phoneNumber"
+                    label={__('Telefono', 'gepafin')}
+                    control={control}
+                    errors={errors}
+                    defaultValue={values['phoneNumber']}
+                    config={{
+                        required: __('È obbligatorio', 'gepafin'),
+                        pattern: /^[0-9]/
+                    }}
+                />
+            </div>
+
             <FormFieldRepeaterFaq
                 data={values['faq']}
                 setDataFn={setValue}
@@ -338,7 +412,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
                 <span>{__('Azioni', 'gepafin')}</span>
             </div>
 
-            <Toast ref={toast} />
+            <Toast ref={toast}/>
             <BandoEditFormActions
                 id={values.id}
                 status={status}
diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
index 459b741..6403454 100644
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import ElementSettingRepeater from '../ElementSettingRepeater';
 import { InputText } from 'primereact/inputtext';
 import { MultiSelect } from 'primereact/multiselect';
+import { Editor } from 'primereact/editor';
 
 import { mimeTypes } from '../../../../../../configData';
 
@@ -19,6 +20,26 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
         text: __('Testo formattato', 'gepafin')
     }
 
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold"></button>
+                <button className="ql-italic" aria-label="Italic"></button>
+                <button className="ql-underline" aria-label="Underline"></button>
+                <button className="ql-link" aria-label="Link"></button>
+                <button className="ql-list" value="ordered"></button>
+                <button className="ql-header" value="1"></button>
+                <button className="ql-header" value="2"></button>
+                <button className="ql-blockquote"></button>
+                <button className="ql-list" value="bullet"></button>
+                <button className="ql-indent" value="-1"></button>
+                <button className="ql-indent" value="+1"></button>
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
     return <div className="formElementSettings__field" key={setting.name}>
         <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
         {setting.name === 'options'
@@ -31,9 +52,16 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
                     optionLabel="name"
                     display="chip"
                     placeholder={__('Scegli', 'gepafin')} />
-                : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
-                         value={setting.value}
-                         onChange={(e) => changeFn(e.target.value, setting.name)}/>}
+                : setting.name === 'text'
+                    ? <Editor
+                        value={setting.value}
+                        headerTemplate={header}
+                        onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
+                        style={{ height: 80 * 4 }}
+                    />
+                    : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
+                                 value={setting.value}
+                                 onChange={(e) => changeFn(e.target.value, setting.name)}/>}
     </div>
 }
 
diff --git a/src/pages/BandoFormsEdit/index.js b/src/pages/BandoFormsEdit/index.js
index 1fbfe9c..7acb89f 100644
--- a/src/pages/BandoFormsEdit/index.js
+++ b/src/pages/BandoFormsEdit/index.js
@@ -16,12 +16,14 @@ import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
 import { InputText } from 'primereact/inputtext';
 import { Toast } from 'primereact/toast';
 import { ConfirmDialog } from 'primereact/confirmdialog';
+import { Messages } from 'primereact/messages';
 
 // api
 import FormsService from '../../service/forms-service';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
-import { elementItems } from '../../tempData';
-import { Messages } from 'primereact/messages';
+
+// TODO temp data
+//import { elementItems } from '../../tempData';
 
 const BandoFormsEdit = () => {
     const { id, formId } = useParams();
@@ -206,8 +208,8 @@ const BandoFormsEdit = () => {
 
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
-            //storeSet.main.elementItems(data.data);
+            //storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
+            storeSet.main.elementItems(data.data.sort((a, b) => a.sortOrder - b.sortOrder));
         }
         storeSet.main.unsetAsyncRequest();
     }
diff --git a/src/tempData.js b/src/tempData.js
index 8ecefba..04a0648 100644
--- a/src/tempData.js
+++ b/src/tempData.js
@@ -729,9 +729,23 @@ export const elementItems = [
         settings: [
             {
                 name: "text",
-                value: "Testo formattato"
+                value: ""
             }
         ],
         validators: {}
-    }
+    },
+    /*{
+        id: 20,
+        sortOrder: 20,
+        name: 'table',
+        label: 'Tabella',
+        description: 'Tabella',
+        settings: [
+            {
+                name: "label",
+                value: "Tabella"
+            }
+        ],
+        validators: {}
+    }*/
 ]