BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added registartion page;

Browse Source 
- implemented validation helper-functions;
- fixed form fields datepicker and datepicker range;
- updated routes logic;
- fixed FAQ items editing/submission;
This commit is contained in:
Vitalii Kiiko
2024-09-23 10:05:43 +02:00
parent cf149485e0
commit bbf117eb9b
58 changed files with 1238 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/FlowBuilder/components/NodeInitialForm/index.js
View File

@@ -4,12 +4,14 @@ import { isEmpty, head } from 'ramda';
// store
import { storeGet, storeSet } from '../../../../store';
import { __ } from '@wordpress/i18n';
const NodeInitialForm = ({ data: { id, label = '' } }) => {
const [options, setOptions] = useState([]);
const flowData = storeGet.main.flowData();
//const [options, setOptions] = useState([]);
const [value, setValue] = useState('');
const onChangeFn = (e) => {
/*const onChangeFn = (e) => {
const { value } = e.target;
const data = {
formId: String(id),
@@ -18,12 +20,14 @@ const NodeInitialForm = ({ data: { id, label = '' } }) => {
}
setValue(value);
storeSet.main.addFlowData(data);
}
}*/
useEffect(() => {
const forms = storeGet.main.flowForms();
if (forms.length > 2) {
const form = head(forms.filter(o => String(o.id) === String(id)))
/*useEffect(() => {
const flowForms = storeGet.main.flowForms();
const flowData = storeGet.main.flowData();
if (flowForms.length > 2) {
const form = head(flowForms.filter(o => String(o.id) === String(id)))
const relevantFields = form
? form.content
.filter(o => ['radio', 'select'].includes(o.name))
@@ -31,20 +35,42 @@ const NodeInitialForm = ({ data: { id, label = '' } }) => {
: [];
setOptions(relevantFields);
}
}, [id]);
const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id)));
if (flowDataForm) {
setValue(flowDataForm.chosenField);
}
}, [id]);*/
useEffect(() => {
const flowForms = storeGet.main.flowForms();
const form = head(flowForms.filter(o => String(o.id) === String(id)));
const flowDataItem = head(flowData.filter(o => String(o.formId) === String(id)));
if (form && flowDataItem) {
const field = head(form.content.filter(o => o.id === flowDataItem.chosenField));
if (field) {
const label = head(field.settings.filter(o => o.name === 'label'));
setValue(label ? label.value : field.label);
}
}
}, [flowData]);
return (
<div className="nodeInitialForm">
<label>
{label}
</label>
{options && !isEmpty(options)
<span>{value}</span>
{/*{options && !isEmpty(options)
? <select onChange={onChangeFn} value={value}>
<option value="">Choose form</option>
<option value="">{__('Scegli il campo', 'gepafin')}</option>
{options.map(o => <option key={o.name} value={o.name}>
{o.label}
</option>)}
</select> : null}
</select> : null}*/}
<Handle
type="source"
position={Position.Bottom}

11
src/components/FlowBuilder/components/NodeIntermediateForm/index.js
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { Handle, Position } from '@xyflow/react';
import { head, isEmpty } from 'ramda';
import { __ } from '@wordpress/i18n';
import { useStore, storeSet, storeGet } from '../../../../store';
@@ -25,9 +26,10 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
const edge = head(flowEdges.filter(o => o.target === String(id)));
if (edge) {
const sourceForm = edge.source;
const sourceFormData = head(flowData.filter(o => o.formId === sourceForm));
const sourceFormData = head(flowData.filter(o => String(o.formId) === sourceForm));
const flowForms = storeGet.main.flowForms();
const form = head(flowForms.filter(o => String(o.id) === String(sourceForm)));
if (form && sourceFormData) {
const { chosenField } = sourceFormData;
const field = head(form.content.filter(o => o.id === chosenField));
@@ -38,7 +40,12 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
}
}
}
}
const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id)));
if (flowDataForm) {
setValue(flowDataForm.chosenValue);
}
}, [flowEdges, flowData]);
@@ -54,7 +61,7 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
</label>
{options && !isEmpty(options)
? <select onChange={onChangeFn} value={value}>
<option value="">Choose form</option>
<option value="">{__('Scegli il valore', 'gepafin')}</option>
{options.map(o => <option key={o.name} value={o.name}>
{o.label}
</option>)}

50
src/components/FlowBuilder/index.js
View File

@@ -19,8 +19,8 @@ const nodeTypes = {
intermediateForm: NodeIntermediateForm
};
const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
const forms = useStore().main.flowForms();
const FlowBuilder = ({ initialForm = 0, finalForm = 0, mainField = '' }) => {
const flowForms = useStore().main.flowForms();
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);
@@ -33,13 +33,13 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
useEffect(() => {
if (
(forms.length === 2 && initialForm) ||
(forms.length > 2 && initialForm && finalForm)
(flowForms.length === 2 && initialForm) ||
(flowForms.length > 2 && initialForm && finalForm)
) {
const total = (forms.length - 2) * (200 - 90);
const total = (flowForms.length - 2) * (200 - 90);
let coordinates = range(total * -1, total, 200);
const initialNodes = forms.map(o => {
const initialNodes = flowForms.map(o => {
const formId = String(o.id);
let obj;
@@ -55,7 +55,7 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
id: formId,
type: 'output',
data: { label: o.label, id: formId },
position: { x: 0, y: forms.length === 2 ? 150 : 300 },
position: { x: 0, y: flowForms.length === 2 ? 150 : 300 },
}
} else {
const x = coordinates.splice(0, 1);
@@ -71,29 +71,53 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
let edges = [];
// eslint-disable-next-line
forms.map(o => {
flowForms.map(o => {
const formId = String(o.id);
if (formId !== String(initialForm) && formId !== String(finalForm)) {
edges.push({ id: `${initialForm}->${formId}`, source: String(initialForm), target: formId, type: 'smoothstep' });
edges.push({
id: `${initialForm}->${formId}`,
source: String(initialForm),
target: formId,
type: 'smoothstep'
});
}
if (formId !== String(initialForm) && formId !== String(finalForm) && String(finalForm) !== '0') {
edges.push({ id: `${formId}->${finalForm}`, source: formId, target: String(finalForm), type: 'smoothstep' });
edges.push({
id: `${formId}->${finalForm}`,
source: formId,
target: String(finalForm),
type: 'smoothstep'
});
}
});
if (forms.length === 2 && initialForm && finalForm) {
edges.push({ id: `${initialForm}->${finalForm}`, source: String(initialForm), target: String(finalForm), type: 'smoothstep' });
if (flowForms.length === 2 && initialForm && finalForm) {
edges.push({
id: `${initialForm}->${finalForm}`,
source: String(initialForm),
target: String(finalForm),
type: 'smoothstep'
});
}
setNodes(initialNodes);
setEdges(edges);
storeSet.main.flowEdges(edges);
if (!isEmpty(mainField)) {
const data = {
formId: String(initialForm),
chosenField: mainField,
chosenValue: ''
}
storeSet.main.addFlowData(data);
}
} else {
setNodes([]);
setEdges([]);
}
}, [initialForm, finalForm, forms]);
}, [initialForm, finalForm, flowForms, mainField]);
return (
!isEmpty(nodes) && !isEmpty(edges)

20
src/components/FormField/components/Checkboxes/index.js
View File

@@ -4,15 +4,16 @@ import { Controller } from 'react-hook-form';
import { Checkbox } from 'primereact/checkbox';
const Checkboxes = ({
fieldName,
label,
control,
errors,
defaultValue = [],
config = {},
infoText = null,
options = []
}) => {
fieldName,
label,
control,
errors,
defaultValue = [],
config = {},
infoText = null,
options = [],
disabled = false
}) => {
const [fieldVal, setFieldVal] = useState(defaultValue);
const onCheckboxesChange = useCallback((e, updateFn) => {
@@ -37,6 +38,7 @@ const Checkboxes = ({
options.map(o => <div className="appForm__fieldItem" key={o.name}>
<Checkbox
inputId={`${fieldName}_${o.name}`}
disabled={disabled}
name={fieldName}
value={o.name}
onChange={(e) => onCheckboxesChange(e, field.onChange)}

33
src/components/FormField/components/Datepicker/index.js
View File

@@ -13,7 +13,8 @@ const Datepicker = ({
config = {},
infoText = null,
minDate = null,
maxDate = null
maxDate = null,
disabled = false
}) => {
return (
<>
@@ -21,20 +22,22 @@ const Datepicker = ({
{label}{config.required || config.isRequired ? '*' : null}
</label>
<Controller
name={fieldName}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) => (
<Calendar id={field.name}
value={field.value ?? []}
onChange={(e) => field.onChange(e.value)}
dateFormat="dd/mm/yy"
mask="99/99/9999"
showIcon
minDate={minDate} maxDate={maxDate}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
name={fieldName}
disabled={disabled}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) => (
<Calendar id={field.name}
value={field.value ?? []}
onChange={(e) => field.onChange(e.value)}
dateFormat="dd/mm/yy"
mask="99/99/9999"
showIcon
minDate={minDate}
maxDate={maxDate}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
{infoText ? <small>{infoText}</small> : null}
</>)
}

60
src/components/FormField/components/DatepickerRange/index.js
View File

@@ -7,16 +7,17 @@ import { Controller } from 'react-hook-form';
import { Calendar } from 'primereact/calendar';
const DatepickerRange = ({
fieldName,
label,
control,
errors,
defaultValue = [],
config = {},
infoText = null,
minDate = null,
maxDate = null
}) => {
fieldName,
label,
control,
errors,
defaultValue = [],
config = {},
infoText = null,
minDate = null,
maxDate = null,
disabled = false
}) => {
const datesDefaultValue = !isNil(defaultValue) && defaultValue.length
? defaultValue.map(v => new Date(v))
: [];
@@ -26,25 +27,26 @@ const DatepickerRange = ({
{label}{config.required ? '*' : null}
</label>
<Controller
name={fieldName}
control={control}
defaultValue={datesDefaultValue}
rules={config}
render={({ field, fieldState }) => (
<Calendar id={field.name}
value={field.value}
onChange={field.onChange}
dateFormat="dd/mm/yy"
mask="99/99/9999"
showIcon
minDate={minDate}
maxDate={maxDate}
selectionMode="range"
readOnlyInput
hideOnRangeSelection
showButtonBar
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
name={fieldName}
control={control}
defaultValue={datesDefaultValue}
rules={config}
render={({ field, fieldState }) => (
<Calendar id={field.name}
disabled={disabled}
value={field.value}
onChange={field.onChange}
dateFormat="dd/mm/yy"
mask="99/99/9999"
showIcon
minDate={minDate}
maxDate={maxDate}
selectionMode="range"
readOnlyInput
hideOnRangeSelection
showButtonBar
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
{infoText ? <small>{infoText}</small> : null}
</>)
}

7
src/components/FormField/components/Fileupload/index.js
View File

@@ -24,7 +24,8 @@ const Fileupload = ({
chooseLabel = __('Aggiungi file', 'gepafin'),
multiple = false,
sourceId = 0,
source = 'application'
source = 'application',
disabled = false
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [acceptFormats, setAcceptFormats] = useState('');
@@ -68,6 +69,7 @@ const Fileupload = ({
</div>
<div>
<Button icon="pi pi-times" severity="danger"
disabled={disabled}
aria-label={__('Anulla', 'gepafin')}
onClick={() => onTemplateRemove(file)}/>
</div>
@@ -134,7 +136,7 @@ const Fileupload = ({
}, [stateFieldData])
return (
sourceId && sourceId !== 0
sourceId || sourceId === 0
? <>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required || config.isRequired ? '*' : null}
@@ -142,6 +144,7 @@ const Fileupload = ({
</label>
<FileUpload
ref={inputRef}
disabled={disabled}
id={fieldName}
name={fieldName}
url={'/document/uploadFile'}

5
src/components/FormField/components/FileuploadAsync/index.js
View File

@@ -23,7 +23,8 @@ const FileuploadAsync = ({
chooseLabel = __('Aggiungi immagine', 'gepafin'),
multiple = false,
sourceId = 0,
source = 'application'
source = 'application',
disabled = false
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [acceptFormats, setAcceptFormats] = useState('');
@@ -68,6 +69,7 @@ const FileuploadAsync = ({
<div>
<Button
type="button"
disabled={disabled}
icon="pi pi-times"
severity="danger"
aria-label={__('Anulla', 'gepafin')}
@@ -144,6 +146,7 @@ const FileuploadAsync = ({
</label>
<FileUpload
ref={inputRef}
disabled={disabled}
id={fieldName}
name={fieldName}
url={'/document/uploadFile'}

4
src/components/FormField/components/NumberInput/index.js
View File

@@ -18,7 +18,8 @@ const NumberInput = ({
minFractionDigits = 0,
maxFractionDigits = 1,
min,
max
max,
disabled = false
}) => {
const input = <Controller
name={fieldName}
@@ -27,6 +28,7 @@ const NumberInput = ({
rules={config}
render={({ field, fieldState }) => (
<InputNumber inputId={field.name}
disabled={disabled}
value={field.value}
onValueChange={(e) => field.onChange(e.value)}
min={min}

4
src/components/FormField/components/Radio/index.js
View File

@@ -11,7 +11,8 @@ const Radio = ({
defaultValue,
config = {},
infoText = null,
options = []
options = [],
disabled = false
}) => {
const input = <Controller
name={fieldName}
@@ -22,6 +23,7 @@ const Radio = ({
options.map(o => <div className="appForm__fieldItem" key={o.name}>
<RadioButton
inputId={`${fieldName}_${o.name}`}
disabled={disabled}
name={fieldName}
value={o.name}
onChange={(e) => field.onChange(e.value)}

4
src/components/FormField/components/Select/index.js
View File

@@ -14,7 +14,8 @@ const Select = ({
inputgroup = false,
icon = null,
placeholder = '',
options = []
options = [],
disabled = false
}) => {
const input = <Controller
name={fieldName}
@@ -24,6 +25,7 @@ const Select = ({
render={({ field, fieldState }) => (
<Dropdown
value={field.value}
disabled={disabled}
onChange={(e) => field.onChange(e.value)}
options={options}
optionLabel="label"

4
src/components/FormField/components/Switch/index.js
View File

@@ -15,7 +15,8 @@ const Switch = ({
config = {},
infoText = null,
onLabel = '',
offLabel = ''
offLabel = '',
disabled = false
}) => {
const properValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue !== false;
@@ -27,6 +28,7 @@ const Switch = ({
render={({ field, fieldState }) => (
<InputSwitch
checked={field.value}
disabled={disabled}
onChange={(e) => field.onChange(e.value)}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>

4
src/components/FormField/components/TextArea/index.js
View File

@@ -11,7 +11,8 @@ const TextArea = ({
errors,
defaultValue,
config = {},
infoText = null
infoText = null,
disabled = false
}) => {
return (
<>
@@ -25,6 +26,7 @@ const TextArea = ({
rules={config}
render={({ field, fieldState }) => (
<InputTextarea id={field.name}
disabled={disabled}
rows={rows}
{...field}
className={classNames({ 'p-invalid': fieldState.invalid })}/>

4
src/components/FormField/components/TextInput/index.js
View File

@@ -14,7 +14,8 @@ const TextInput = ({
inputgroup = false,
icon = null,
placeholder = '',
inputtype = 'text'
inputtype = 'text',
disabled = false
}) => {
const input = <Controller
name={fieldName}
@@ -23,6 +24,7 @@ const TextInput = ({
rules={config}
render={({ field, fieldState }) => (
<InputText id={field.name}
disabled={disabled}
{...field}
type={inputtype}
placeholder={placeholder}

11
src/components/FormField/components/Wysiwyg/index.js
View File

@@ -11,7 +11,8 @@ const Wysiwyg = ({
errors,
defaultValue,
config = {},
infoText = null
infoText = null,
disabled = false
}) => {
const renderHeader = () => {
@@ -21,6 +22,13 @@ const Wysiwyg = ({
<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>
);
};
@@ -40,6 +48,7 @@ const Wysiwyg = ({
render={({ field, fieldState }) => (
<Editor
id={field.name}
readOnly={disabled}
{...field}
headerTemplate={header}
onTextChange={(e) => field.onChange(e.htmlValue)}

11
src/components/FormFieldRepeater/index.js
View File

@@ -20,7 +20,8 @@ const FormFieldRepeater = ({
register,
label,
infoText,
config = {}
config = {},
disabled = false
}) => {
const forMenu = useRef(null);
const [stateFieldData, setStateFieldData] = useState([]);
@@ -72,11 +73,12 @@ const FormFieldRepeater = ({
const properField = (item, i) => {
return !isNil(item.lookUpDataId)
? <Dropdown value={item.value}
disabled={disabled}
onChange={(e) => selectItem(e, i)}
optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
options={stateOptionsData}
optionLabel="value"/>
: <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
: <InputText disabled={disabled} value={item.value} onInput={(e) => onInputChange(e, i)}/>
}
const usedExistingValues = useCallback(() => {
@@ -101,7 +103,7 @@ const FormFieldRepeater = ({
const ids = pluck('lookUpDataId', prevState)
const objectsToAdd = klona(storeFieldData)
.filter(o => !ids.includes(o.lookUpDataId))
.map(o => ({...o, id: null}));
.map(o => ({ ...o, id: null }));
return [...prevState, ...objectsToAdd];
});
}
@@ -123,12 +125,13 @@ const FormFieldRepeater = ({
{stateFieldData.map((o, i) => <div key={i} className={classNames('appForm__repeaterItem')}>
<div className="p-inputgroup flex-1">
{properField(o, i)}
<Button type="button" icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
<Button disabled={disabled} type="button" icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
</div>
{isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
</div>)}
<Menu model={menuItems} popup ref={forMenu} id="aimedForMenu"/>
<Button type="button" iconPos="right" label={__('Aggiungi', 'gepafin')}
disabled={disabled}
icon="pi pi-chevron-down" onClick={(event) => forMenu.current.toggle(event)}
aria-controls="aimedForMenu" aria-haspopup/>
</div>

21
src/components/FormFieldRepeaterCriteria/index.js
View File

@@ -21,7 +21,8 @@ const FormFieldRepeaterCriteria = ({
register,
label,
infoText,
config = {}
config = {},
disabled = false
}) => {
const forMenu = useRef(null);
const [stateFieldData, setStateFieldData] = useState([]);
@@ -78,10 +79,12 @@ const FormFieldRepeaterCriteria = ({
const properField = (item, i) => {
return !isNil(item.lookUpDataId)
? <Dropdown value={item.value}
disabled={disabled}
onChange={(e) => selectItem(e, i)}
optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
options={stateOptionsData} optionLabel="value"/>
: <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
: <InputText disabled={disabled} value={item.value}
onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
}
const usedExistingValues = useCallback(() => {
@@ -111,7 +114,7 @@ const FormFieldRepeaterCriteria = ({
const ids = pluck('lookUpDataId', prevState)
const objectsToAdd = klona(storeFieldData)
.filter(o => !ids.includes(o.lookUpDataId))
.map(o => ({...o, id: null, score: 0}));
.map(o => ({ ...o, id: null, score: 0 }));
return [...prevState, ...objectsToAdd];
});
}
@@ -130,27 +133,30 @@ const FormFieldRepeaterCriteria = ({
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] || errors['threshold'] })}>
{label}
</label>
<div className="appForm__oneCol">
<div className="appForm__col">
<label htmlFor="criterionThreshold">{__('Punteggio minimo per l’ammissione', 'gepafin')}</label>
<InputNumber inputId="criterionThreshold"
disabled={disabled}
value={threshold}
showButtons
onValueChange={(e) => onThresholdChange(e.value)}/>
</div>
{stateFieldData.map((o, i) => <div key={i}
className={classNames('appForm__field', 'appForm__repeaterItem')}>
<div className="appForm__twoCols">
<div className="appForm__cols">
<div>
<label>{__('Nome criterio di valutazione', 'gepafin')}</label>
<div className="p-inputgroup flex-1">
{properField(o, i)}
<Button type="button" icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
{properField(o, i)}
<Button disabled={disabled} type="button" icon="pi pi-times" className="p-button-danger"
onClick={() => removeItem(i)}/>
</div>
{isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
</div>
<div>
<label htmlFor="criterionMin">{__('Punteggio', 'gepafin')}</label>
<InputNumber inputId="criterionMin"
disabled={disabled}
value={o.score}
showButtons
onValueChange={(e) => onInputChange(e.value, i, 'score')}/>
@@ -159,6 +165,7 @@ const FormFieldRepeaterCriteria = ({
</div>)}
<Menu model={menuItems} popup ref={forMenu} id="aimedForMenu"/>
<Button type="button" iconPos="right" label={__('Aggiungi', 'gepafin')}
disabled={disabled}
icon="pi pi-chevron-down" onClick={(event) => forMenu.current.toggle(event)}
aria-controls="aimedForMenu" aria-haspopup/>
</div>

66
src/components/FormFieldRepeaterFaq/index.js
View File

@@ -8,10 +8,10 @@ import { diff } from 'deep-object-diff';
import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { ToggleButton } from 'primereact/togglebutton';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { InputSwitch } from 'primereact/inputswitch';
const FormFieldRepeaterFaq = ({
data,
@@ -21,13 +21,15 @@ const FormFieldRepeaterFaq = ({
errors,
register,
label,
config = {}
config = {},
disabled = false
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [stateOptionsData, setStateOptionsData] = useState([]);
const [question, setQuestion] = useState('');
const [answer, setAnswer] = useState('');
const [title, setTitle] = useState('');
const [isVisible, setIsVisible] = useState(false);
const [editDataIndex, setEditDataIndex] = useState(null);
const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
@@ -39,7 +41,7 @@ const FormFieldRepeaterFaq = ({
const selectItem = (e) => {
const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
if (targetedOption) {
setStateFieldData([...stateFieldData, {...targetedOption, isVisible: true}]);
setStateFieldData([...stateFieldData, { ...targetedOption, isVisible: true }]);
}
}
@@ -48,22 +50,12 @@ const FormFieldRepeaterFaq = ({
setStateFieldData([...stateFieldData, newItem]);
}
const setChecked = (e, index) => {
e.preventDefault();
const newData = stateFieldData.map((o, i) => {
if (i === index) {
o.isVisible = e.value;
}
return o;
});
setStateFieldData(newData);
}
const editItem = (e, index) => {
e.stopPropagation();
setTitle(stateFieldData[index].title);
setQuestion(stateFieldData[index].value);
setAnswer(stateFieldData[index].response);
setIsVisible(stateFieldData[index].isVisible);
setEditDataIndex(index);
setIsVisibleEditDialog(true);
}
@@ -73,6 +65,7 @@ const FormFieldRepeaterFaq = ({
setQuestion('');
setAnswer('');
setTitle('');
setIsVisible(false);
setEditDataIndex(null);
}
@@ -81,8 +74,10 @@ const FormFieldRepeaterFaq = ({
setTitle(value);
} else if (key === 'value') {
setQuestion(value);
} else {
} else if (key === 'response') {
setAnswer(value)
} else {
setIsVisible(value);
}
}
@@ -92,6 +87,7 @@ const FormFieldRepeaterFaq = ({
o.title = title;
o.value = question;
o.response = answer;
o.isVisible = isVisible;
return o
} else {
return o;
@@ -102,6 +98,7 @@ const FormFieldRepeaterFaq = ({
setQuestion('');
setAnswer('');
setTitle('');
setIsVisible(false);
setEditDataIndex(null);
}
@@ -111,10 +108,10 @@ const FormFieldRepeaterFaq = ({
const footerEditDialog = () => {
return <div>
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
<Button type="button" disabled={disabled} label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
<Button
type="button"
disabled={isEmpty(title) || isEmpty(question) || isEmpty(answer)}
disabled={isEmpty(title) || isEmpty(question) || isEmpty(answer) || disabled}
label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
</div>
}
@@ -156,37 +153,40 @@ const FormFieldRepeaterFaq = ({
</label>
<div className="appForm__faqHeaderControls">
<Button type="button" iconPos="left" label={__('Aggiungi', 'gepafin')}
disabled={disabled}
icon="pi pi-plus" onClick={addNewItem}/>
<Dropdown onChange={(e) => selectItem(e)}
disabled={disabled}
optionDisabled={(opt) => usedExistingValues().includes(opt.title)}
options={stateOptionsData}
placeholder={__('Scegli tra quelli pre-creati', 'gepafin')}
optionLabel="title"/>
</div>
<Accordion activeIndex={0}>
{stateFieldData.map((o, i) => <AccordionTab key={i}
{stateFieldData.map((o, i) => <AccordionTab key={i} tabIndex={i}
header={
<div className="appForm__faqTab">
<div className="appForm__faqTabItem">
<ToggleButton
onIcon="pi pi-eye"
offIcon="pi pi-eye-slash"
onLabel=""
offLabel=""
checked={o.isVisible}
onChange={(e) => {
e.preventDefault();
e.stopPropagation();
setChecked(e, i);
}}/>
{o.value}
<span>
{o.value}
</span>
</div>
<div className="appForm__faqTabItem">
{o.isVisible
? <i className="pi pi-eye"
style={{ fontSize: '1.5rem' }}></i> : null}
{!o.isVisible
? <i className="pi pi-eye-slash"
style={{ fontSize: '1.5rem' }}></i> : null}
<Button icon="pi pi-pencil" severity="success"
disabled={disabled}
className="actionBtn"
type="button"
aria-label={__('Modifica', 'gepafin')}
onClick={(e) => editItem(e, i)}/>
<Button icon="pi pi-times" severity="danger"
disabled={disabled}
className="actionBtn"
type="button"
aria-label={__('Cancella', 'gepafin')}
onClick={() => removeItem(i)}/>
@@ -203,7 +203,7 @@ const FormFieldRepeaterFaq = ({
visible={isVisibleEditDialog}
modal header={headerEditDialog}
footer={footerEditDialog}
style={{ maxWidth: '50rem' }}
style={{ maxWidth: '600px', width: '100%' }}
onHide={hideEditDialog}>
<div className="appPage__spacer"></div>
<div className="appForm__field">
@@ -220,6 +220,10 @@ const FormFieldRepeaterFaq = ({
rows={5}
cols={30}/>
</div>
<div className="appForm__field">
<label>{__('Pubblicato?', 'gepafin')}</label>
<InputSwitch checked={isVisible} onChange={(e) => onChangeEditItem(e.value, 'isVisible')}/>
</div>
<div className="appPage__spacer"></div>
</Dialog>
</div>