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

- saving progress;

Browse Source
This commit is contained in:
Vitalii Kiiko
2024-09-02 17:15:43 +02:00
parent d634e425e5
commit c15360faf0
41 changed files with 1531 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { isEmpty } from 'ramda';
import { head } from 'ramda';
// components
import { Button } from 'primereact/button';
@@ -20,11 +20,10 @@ const FormFieldRepeaterFaq = ({
errors,
register,
label,
config = {},
setError,
clearErrors
config = {}
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [stateOptionsData, setStateOptionsData] = useState([]);
const [question, setQuestion] = useState('');
const [answer, setAnswer] = useState('');
const [editDataIndex, setEditDataIndex] = useState(null);
@@ -36,12 +35,15 @@ const FormFieldRepeaterFaq = ({
}
const selectItem = (e) => {
const chosen = {...e.value};
setStateFieldData([...stateFieldData, chosen]);
const targetedOption = head(stateOptionsData.filter(o => o.question === e.value));
if (targetedOption) {
setStateFieldData([...stateFieldData, targetedOption]);
}
}
const addNewItem = () => {
const newItem = { id: 0, status: 'new', question: '', answer: '', visible: true };
const newItem = { id: null, lookUpDataId: null, question: '', response: '', visible: true };
setStateFieldData([...stateFieldData, newItem]);
}
@@ -49,7 +51,7 @@ const FormFieldRepeaterFaq = ({
e.preventDefault();
const newData = stateFieldData.map((o, i) => {
if (i === index) {
o.visible = e.value;
o.isVisible = e.value;
}
return o;
});
@@ -59,7 +61,7 @@ const FormFieldRepeaterFaq = ({
const editItem = (e, index) => {
e.stopPropagation();
setQuestion(stateFieldData[index].question);
setAnswer(stateFieldData[index].answer);
setAnswer(stateFieldData[index].response);
setEditDataIndex(index);
setIsVisibleEditDialog(true);
}
@@ -83,7 +85,7 @@ const FormFieldRepeaterFaq = ({
const newData = stateFieldData.map((o, i) => {
if (i === editDataIndex) {
o.question = question;
o.answer = answer;
o.response = answer;
return o
} else {
return o;
@@ -102,25 +104,31 @@ const FormFieldRepeaterFaq = ({
const footerEditDialog = () => {
return <div>
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined />
<Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog} />
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
<Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
</div>
}
const usedExistingValues = stateFieldData
.filter(o => o.status === 'existing')
.map(o => o.question);
const usedExistingValues = useCallback(() => {
return stateFieldData
.filter(o => o.lookUpDataId)
.map(o => o.question)
}, [stateFieldData]);
useEffect(() => {
const storeFieldData = data[fieldName] ?? [];
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
setStateFieldData(newData);
setStateFieldData(storeFieldData);
setStateOptionsData([...options, ...storeFieldData]);
register(fieldName, config)
}, [])
}, []);
useEffect(() => {
setStateOptionsData([...options]);
}, [options]);
useEffect(() => {
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
}, [stateFieldData]);
return (
<div className={classNames(['appForm__field', 'formfieldrepeater'])}>
@@ -131,8 +139,9 @@ const FormFieldRepeaterFaq = ({
<Button type="button" iconPos="left" label={__('Aggiungi', 'gepafin')}
icon="pi pi-plus" onClick={addNewItem}/>
<Dropdown onChange={(e) => selectItem(e)}
optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
options={options} optionLabel="question"/>
optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
options={stateOptionsData}
optionLabel="question"/>
</div>
<Accordion activeIndex={0}>
{stateFieldData.map((o, i) => <AccordionTab key={i}
@@ -144,7 +153,7 @@ const FormFieldRepeaterFaq = ({
offIcon="pi pi-eye-slash"
onLabel=""
offLabel=""
checked={o.visible}
checked={o.isVisible}
onChange={(e) => setChecked(e, i)}/>
{o.question}
</div>
@@ -160,7 +169,7 @@ const FormFieldRepeaterFaq = ({
}
>
<p className="m-0">
{o.answer}
{o.response}
</p>
</AccordionTab>)}
</Accordion>
@@ -170,14 +179,18 @@ const FormFieldRepeaterFaq = ({
footer={footerEditDialog}
style={{ maxWidth: '50rem' }}
onHide={hideEditDialog}>
<div className="appPage__spacer"></div>
<div className="appForm__field">
<label>{__('Titolo FAQ', 'gepafin')}</label>
<InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'question')}/>
</div>
<div className="appForm__field">
<label>{__('Risposta', 'gepafin')}</label>
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'answer')} rows={5} cols={30} />
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
rows={5}
cols={30}/>
</div>
<div className="appPage__spacer"></div>
</Dialog>
</div>
)