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

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)}