- updated call form - added new fields;

This commit is contained in:
Vitalii Kiiko
2024-10-01 10:35:21 +02:00
parent 4ba883c073
commit 111b1b5620
5 changed files with 136 additions and 16 deletions

View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { classNames } from 'primereact/utils'; import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
import { isNil } from 'ramda';
import { Calendar } from 'primereact/calendar'; import { Calendar } from 'primereact/calendar';
const Datepicker = ({ const Datepicker = ({
@@ -14,7 +14,8 @@ const Datepicker = ({
infoText = null, infoText = null,
minDate = null, minDate = null,
maxDate = null, maxDate = null,
disabled = false disabled = false,
timeOnly = false
}) => { }) => {
return ( return (
<> <>
@@ -32,7 +33,8 @@ const Datepicker = ({
value={field.value ?? []} value={field.value ?? []}
onChange={(e) => field.onChange(e.value)} onChange={(e) => field.onChange(e.value)}
dateFormat="dd/mm/yy" dateFormat="dd/mm/yy"
mask="99/99/9999" hourFormat="24"
timeOnly={timeOnly}
showIcon showIcon
minDate={minDate} minDate={minDate}
maxDate={maxDate} maxDate={maxDate}

View File

@@ -18,6 +18,9 @@ import { Toast } from 'primereact/toast';
import BandoService from '../../../../service/bando-service'; import BandoService from '../../../../service/bando-service';
import LookupdataService from '../../../../service/lookupdata-service'; import LookupdataService from '../../../../service/lookupdata-service';
// tools
import { isEmail } from '../../../../helpers/validators';
// store // store
import { storeSet } from '../../../../store'; import { storeSet } from '../../../../store';
@@ -44,7 +47,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
const toast = useRef(null); const toast = useRef(null);
const onSubmit = (formData) => { const onSubmit = (formData) => {
if (!isNil(formData.dates) && formData.dates.length) { /*if (!isNil(formData.dates) && formData.dates.length) {
formData.dates = formData.dates.map(v => { formData.dates = formData.dates.map(v => {
if (is(String, v)) { if (is(String, v)) {
return v; return v;
@@ -60,10 +63,11 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
BandoService.createBando(formData, createCallback, errCreateCallback); BandoService.createBando(formData, createCallback, errCreateCallback);
} else { } else {
BandoService.updateBandoStep1(formData.id, formData, createCallback, errCreateCallback); BandoService.updateBandoStep1(formData.id, formData, createCallback, errCreateCallback);
} }*/
}; };
const onSaveDraft = () => { const onSaveDraft = () => {
trigger();
const formData = getValues(); const formData = getValues();
if (!isNil(formData.dates) && formData.dates.length) { if (!isNil(formData.dates) && formData.dates.length) {
formData.dates = formData.dates.map(v => { formData.dates = formData.dates.map(v => {
@@ -285,9 +289,34 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
errors={errors} errors={errors}
defaultValue={values['dates']} defaultValue={values['dates']}
config={{ required: __('È obbligatorio', 'gepafin') }} 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"> <div className="appForm__cols">
<FormField <FormField
type="numberinput" type="numberinput"
@@ -302,6 +331,19 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
icon="€" 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 <FormField
type="numberinput" type="numberinput"
disabled={shouldDisableField()} disabled={shouldDisableField()}
@@ -316,6 +358,38 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
/> />
</div> </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 <FormFieldRepeaterFaq
data={values['faq']} data={values['faq']}
setDataFn={setValue} setDataFn={setValue}

View File

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
import ElementSettingRepeater from '../ElementSettingRepeater'; import ElementSettingRepeater from '../ElementSettingRepeater';
import { InputText } from 'primereact/inputtext'; import { InputText } from 'primereact/inputtext';
import { MultiSelect } from 'primereact/multiselect'; import { MultiSelect } from 'primereact/multiselect';
import { Editor } from 'primereact/editor';
import { mimeTypes } from '../../../../../../configData'; import { mimeTypes } from '../../../../../../configData';
@@ -19,6 +20,26 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
text: __('Testo formattato', 'gepafin') 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}> return <div className="formElementSettings__field" key={setting.name}>
<label htmlFor={setting.name}>{settingLabels[setting.name]}</label> <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
{setting.name === 'options' {setting.name === 'options'
@@ -31,6 +52,13 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
optionLabel="name" optionLabel="name"
display="chip" display="chip"
placeholder={__('Scegli', 'gepafin')} /> placeholder={__('Scegli', 'gepafin')} />
: 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`} : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
value={setting.value} value={setting.value}
onChange={(e) => changeFn(e.target.value, setting.name)}/>} onChange={(e) => changeFn(e.target.value, setting.name)}/>}

View File

@@ -16,12 +16,14 @@ import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
import { InputText } from 'primereact/inputtext'; import { InputText } from 'primereact/inputtext';
import { Toast } from 'primereact/toast'; import { Toast } from 'primereact/toast';
import { ConfirmDialog } from 'primereact/confirmdialog'; import { ConfirmDialog } from 'primereact/confirmdialog';
import { Messages } from 'primereact/messages';
// api // api
import FormsService from '../../service/forms-service'; import FormsService from '../../service/forms-service';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse'; import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import { elementItems } from '../../tempData';
import { Messages } from 'primereact/messages'; // TODO temp data
//import { elementItems } from '../../tempData';
const BandoFormsEdit = () => { const BandoFormsEdit = () => {
const { id, formId } = useParams(); const { id, formId } = useParams();
@@ -206,8 +208,8 @@ const BandoFormsEdit = () => {
const getElementItemsCallback = (data) => { const getElementItemsCallback = (data) => {
if (data.status === 'SUCCESS') { if (data.status === 'SUCCESS') {
storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder)); //storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
//storeSet.main.elementItems(data.data); storeSet.main.elementItems(data.data.sort((a, b) => a.sortOrder - b.sortOrder));
} }
storeSet.main.unsetAsyncRequest(); storeSet.main.unsetAsyncRequest();
} }

View File

@@ -729,9 +729,23 @@ export const elementItems = [
settings: [ settings: [
{ {
name: "text", name: "text",
value: "Testo formattato" value: ""
} }
], ],
validators: {} validators: {}
},
/*{
id: 20,
sortOrder: 20,
name: 'table',
label: 'Tabella',
description: 'Tabella',
settings: [
{
name: "label",
value: "Tabella"
} }
],
validators: {}
}*/
] ]