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

- updates and fixes;

Browse Source
This commit is contained in:
Vitalii Kiiko
2024-09-03 17:24:41 +02:00
parent 429ca3c1d1
commit 949ff95933
21 changed files with 342 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/FormField/components/Fileupload/index.js → src/components/FormField/components/FileuploadAsync/index.js
View File

@@ -8,7 +8,7 @@ import { FileUpload } from 'primereact/fileupload';
import { Tag } from 'primereact/tag';
import { Button } from 'primereact/button';
const Fileupload = ({
const FileuploadAsync = ({
fieldName,
setDataFn,
label,
@@ -150,4 +150,4 @@ const Fileupload = ({
)
}
export default Fileupload;
export default FileuploadAsync;

41
src/components/FormField/components/Radio/index.js Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { RadioButton } from 'primereact/radiobutton';
const Radio = ({
fieldName,
label,
control,
errors,
defaultValue,
config = {},
infoText = null,
options = []
}) => {
const input = <Controller
name={fieldName}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) =>
options.map(o => <div className="appForm__fieldItem" key={o.name}>
<RadioButton
id={`${fieldName}_${o.name}`}
name={fieldName}
value={o.name}
onChange={(e) => field.onChange(e.value)}
checked={field.value === o.name}/>
<label htmlFor={`${fieldName}_${o.name}`}>{o.label}</label>
</div>)}/>
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
</label>
{input}
{infoText ? <small>{infoText}</small> : null}
</>)
}
export default Radio;

50
src/components/FormField/components/Select/index.js Normal file
View File

@@ -0,0 +1,50 @@
import React from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { Dropdown } from 'primereact/dropdown';
const Select = ({
fieldName,
label,
control,
errors,
defaultValue,
config = {},
infoText = null,
inputgroup = false,
icon = null,
placeholder = '',
options = []
}) => {
const input = <Controller
name={fieldName}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) => (
<Dropdown
value={field.value}
onChange={(e) => field.onChange(e.value)}
options={options}
optionLabel="label"
placeholder={placeholder}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
</label>
{inputgroup
? <div className="p-inputgroup flex-1">
<span className="p-inputgroup-addon">
{icon}
</span>
{input}
</div>
: input}
{infoText ? <small>{infoText}</small> : null}
</>)
}
export default Select;

10
src/components/FormField/index.js
View File

@@ -7,9 +7,11 @@ import TextInput from './components/TextInput';
import TextArea from './components/TextArea';
import Datepicker from './components/Datepicker';
import DatepickerRange from './components/DatepickerRange';
import Fileupload from './components/Fileupload';
import FileuploadAsync from './components/FileuploadAsync';
import NumberInput from './components/NumberInput';
import Switch from './components/Switch';
import Select from './components/Select';
import Radio from './components/Radio';
const FormField = (props) => {
const fields = {
@@ -17,9 +19,11 @@ const FormField = (props) => {
textarea: TextArea,
datepicker: Datepicker,
datepickerrange: DatepickerRange,
fileupload: Fileupload,
fileuploadasync: FileuploadAsync,
numberinput: NumberInput,
switch: Switch
switch: Switch,
select: Select,
radio: Radio
}
const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;

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

@@ -1,13 +1,14 @@
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { head, isNil, pluck } from 'ramda';
import { head, isEmpty, isNil } from 'ramda';
// components
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';
import { Dropdown } from 'primereact/dropdown';
import { diff } from 'deep-object-diff';
const FormFieldRepeater = ({
data,
@@ -84,11 +85,20 @@ const FormFieldRepeater = ({
}, [stateFieldData]);
useEffect(() => {
const storeFieldData = data[fieldName] ?? [];
const storeFieldData = data ?? [];
setStateFieldData(storeFieldData);
register(fieldName, config);
}, []);
useEffect(() => {
const diffData = diff(data, stateFieldData);
if (!isEmpty(diffData)) {
const storeFieldData = data ?? [];
setStateFieldData(storeFieldData);
}
}, [data]);
useEffect(() => {
setStateOptionsData([...options]);
}, [options]);

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

@@ -36,15 +36,15 @@ const FormFieldRepeaterFaq = ({
}
const selectItem = (e) => {
const targetedOption = head(stateOptionsData.filter(o => o.question === e.value));
const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
console.log('selected:', e, stateOptionsData, targetedOption)
if (targetedOption) {
setStateFieldData([...stateFieldData, targetedOption]);
}
}
const addNewItem = () => {
const newItem = { id: null, lookUpDataId: null, question: '', response: '', visible: true };
const newItem = { id: null, lookUpDataId: null, title: '', value: '', isVisible: true };
setStateFieldData([...stateFieldData, newItem]);
}
@@ -61,8 +61,8 @@ const FormFieldRepeaterFaq = ({
const editItem = (e, index) => {
e.stopPropagation();
setQuestion(stateFieldData[index].question);
setAnswer(stateFieldData[index].response);
setQuestion(stateFieldData[index].title);
setAnswer(stateFieldData[index].value);
setEditDataIndex(index);
setIsVisibleEditDialog(true);
}
@@ -75,7 +75,7 @@ const FormFieldRepeaterFaq = ({
}
const onChangeEditItem = (value, key) => {
if (key === 'question') {
if (key === 'title') {
setQuestion(value);
} else {
setAnswer(value)
@@ -85,8 +85,8 @@ const FormFieldRepeaterFaq = ({
const saveEditDialog = () => {
const newData = stateFieldData.map((o, i) => {
if (i === editDataIndex) {
o.question = question;
o.response = answer;
o.title = question;
o.value = answer;
return o
} else {
return o;
@@ -113,7 +113,7 @@ const FormFieldRepeaterFaq = ({
const usedExistingValues = useCallback(() => {
return stateFieldData
.filter(o => o.lookUpDataId)
.map(o => o.question)
.map(o => o.title)
}, [stateFieldData]);
useEffect(() => {
@@ -149,9 +149,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)}
optionDisabled={(opt) => usedExistingValues().includes(opt.title)}
options={stateOptionsData}
optionLabel="question"/>
optionLabel="title"/>
</div>
<Accordion activeIndex={0}>
{stateFieldData.map((o, i) => <AccordionTab key={i}
@@ -165,21 +165,21 @@ const FormFieldRepeaterFaq = ({
offLabel=""
checked={o.isVisible}
onChange={(e) => setChecked(e, i)}/>
{o.question}
{o.title}
</div>
<div className="appForm__faqTabItem">
<Button icon="pi pi-pencil" severity="success"
aria-label="Edit"
aria-label={__('Modifica', 'gepafin')}
onClick={(e) => editItem(e, i)}/>
<Button icon="pi pi-times" severity="danger"
aria-label="Cancel"
aria-label={__('Cancella', 'gepafin')}
onClick={() => removeItem(i)}/>
</div>
</div>
}
>
<p className="m-0">
{o.response}
{o.value}
</p>
</AccordionTab>)}
</Accordion>
@@ -192,11 +192,11 @@ const FormFieldRepeaterFaq = ({
<div className="appPage__spacer"></div>
<div className="appForm__field">
<label>{__('Titolo FAQ', 'gepafin')}</label>
<InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'question')}/>
<InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'title')}/>
</div>
<div className="appForm__field">
<label>{__('Risposta', 'gepafin')}</label>
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'value')}
rows={5}
cols={30}/>
</div>

10
src/components/ProtectedRoute/index.js
View File

@@ -1,16 +1,10 @@
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
// store
import { useStore } from '../../store';
// tools
import AuthenticationService from '../../service/authentication-service';
const ProtectedRoute = () => {
// we need this to track existance of the token
const token = useStore().main.token();
if (!AuthenticationService.wasLoggedIn()) {
return (<Navigate to={'/login'} replace/>);
}
@@ -23,9 +17,9 @@ const ProtectedRoute = () => {
return (<Navigate to={'/login?redirectReason=auth_required'} replace/>);
}
/*if (window.location.pathname === '/') {
if (window.location.pathname === '/') {
return (<Navigate to={'/'} replace/>);
}*/
}
return <Outlet/>;
}