- added registartion page;
- 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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user