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

- added login page;

Browse Source 
- added file upload;
- added faq item edit modal;
This commit is contained in:
Vitalii Kiiko
2024-08-23 16:55:19 +02:00
parent 0a21444ee4
commit 5095ed7365
50 changed files with 1540 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ const Datepicker = ({
label,
control,
errors,
defaultValue,
defaultValue = [],
config = {},
infoText = null,
minDate = null,
@@ -27,7 +27,7 @@ const Datepicker = ({
rules={config}
render={({ field, fieldState }) => (
<Calendar id={field.name}
value={field.value}
value={field.value ?? []}
onChange={(e) => field.onChange(e.value)}
dateFormat="dd/mm/yy"
mask="99/99/9999"

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

@@ -11,13 +11,15 @@ const DatepickerRange = ({
label,
control,
errors,
defaultValue,
defaultValue = [],
config = {},
infoText = null,
minDate = null,
maxDate = null
}) => {
const datesDefaultValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue.length ? defaultValue.map(v => new Date(v)) : [];
const datesDefaultValue = !isNil(defaultValue) && defaultValue.length
? defaultValue.map(v => new Date(v))
: [];
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
@@ -31,12 +33,8 @@ const DatepickerRange = ({
render={({ field, fieldState }) => (
<Calendar id={field.name}
value={field.value}
onChange={(e) => {
const formattedValues = e.value.map(d => d ? d.toISOString() : d);
console.log('formattedValues', formattedValues);
field.onChange(formattedValues)
}}
dateFormat="dd/mm/yy"
onChange={field.onChange}
mask="99/99/9999"
showIcon
minDate={minDate}
@@ -44,6 +42,7 @@ const DatepickerRange = ({
selectionMode="range"
readOnlyInput
hideOnRangeSelection
showButtonBar
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
{infoText ? <small>{infoText}</small> : null}

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

@@ -1,50 +1,133 @@
import React from 'react';
import React, { useEffect, useState, useRef } from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { __ } from '@wordpress/i18n';
import FileUploadService from '../../../../service/file-upload-service';
import { FileUpload } from 'primereact/fileupload';
import { Tag } from 'primereact/tag';
import { Button } from 'primereact/button';
const Fileupload = ({
fieldName,
setDataFn,
label,
control,
errors,
defaultValue,
register,
defaultValue = [],
config = {},
infoText = null,
accept = 'image/*',
api = '/api/upload',
doctype = 'images',
emptyText = __('Trascina qui il tuo file', 'gepafin'),
chooseLabel = __('Aggiungi immagine', 'gepafin'),
multiple = false
multiple = false
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const inputRef = useRef();
const customBase64Uploader = (event) => {
const formData = new FormData()
for (const file of event.files) {
formData.append('file', file)
}
/*for (const pair of formData.entries()) {
console.log(pair[0], pair[1]);
}*/
FileUploadService.uploadFile(formData, callback, errorCallback, [['documentType', doctype.toUpperCase()]]);
};
const callback = (data) => {
console.log('data', data);
if (data.status === 'SUCCESS') {
setStateFieldData(data.data);
const files = inputRef.current.getFiles();
inputRef.current.setUploadedFiles(files);
inputRef.current.setFiles([]);
}
}
const errorCallback = (err) => {
console.log('err', err);
}
const itemTemplate = (file) => {
return (
<div className="appForm__fileUploadItem">
<span className="appForm__fileUploadItemName">
{file.name}
</span>
{file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
{!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
<Button icon="pi pi-times" severity="danger"
aria-label={__('Anulla', 'gepafin')}
onClick={() => onTemplateRemove(file)}/>
</div>
);
};
const onTemplateRemove = (file) => {
if (file.id) {
FileUploadService.deleteFile(
{},
(data) => dCallback(data, file.id),
dErrorCallback,
[['id', file.id]]
);
} else {
const files = inputRef.current.getFiles()
const newFiles = files.filter(o => o.lastModified !== file.lastModified && o.name !== file.name);
inputRef.current.setFiles(newFiles);
}
}
const dCallback = (data, id) => {
if (data.status === 'SUCCESS') {
setStateFieldData(prevState => {
const newFiles = prevState.filter(o => o.id !== id);
inputRef.current.setUploadedFiles(newFiles);
console.log('newFiles', newFiles);
return newFiles;
});
}
}
const dErrorCallback = (err) => {
console.log('err', err);
}
useEffect(() => {
setStateFieldData(defaultValue);
register(fieldName, config)
}, []);
useEffect(() => {
inputRef.current.setUploadedFiles(stateFieldData);
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
</label>
<Controller
<FileUpload
ref={inputRef}
id={fieldName}
name={fieldName}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) => (
<FileUpload
id={field.name}
name={`${field.name}[]`}
url={api}
multiple={multiple}
accept={accept}
maxFileSize={1000000}
emptyTemplate={<p>{emptyText}</p>}
chooseLabel={chooseLabel}
cancelLabel={__('Cancella', 'gepafin')}
uploadLabel={__('Carica', 'gepafin')}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
url={'/document/uploadFile'}
multiple={multiple}
accept={accept}
maxFileSize={1000000}
emptyTemplate={<p>{emptyText}</p>}
chooseLabel={chooseLabel}
cancelLabel={__('Cancella', 'gepafin')}
uploadLabel={__('Carica', 'gepafin')}
className={classNames({ 'p-invalid': errors[fieldName] })}
itemTemplate={itemTemplate}
customUpload
uploadHandler={customBase64Uploader}/>
{infoText ? <small>{infoText}</small> : null}
{defaultValue ? <p>Uploaded:</p> : null}
{defaultValue}
</>)
}

49
src/components/FormField/components/Switch/index.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { isNil, isEmpty } from 'ramda';
// components
import { InputSwitch } from 'primereact/inputswitch';
const Switch = ({
fieldName,
label,
control,
errors,
defaultValue,
config = {},
infoText = null,
onLabel = '',
offLabel = ''
}) => {
const properValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue !== false;
const input = <Controller
name={fieldName}
control={control}
defaultValue={properValue}
rules={config}
render={({ field, fieldState }) => (
<InputSwitch
checked={field.value}
onChange={(e) => field.onChange(e.value)}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
return (
<>
<div className="appForm__row">
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] }, 'mr-8')}>
{label}{config.required ? '*' : null}
</label>
<div className="appForm__row">
{offLabel ? <span>{offLabel}</span> : null}
{input}
{onLabel ? <span>{onLabel}</span> : null}
</div>
</div>
{infoText ? <small>{infoText}</small> : null}
</>)
}
export default Switch;

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

@@ -12,7 +12,9 @@ const TextInput = ({
config = {},
infoText = null,
inputgroup = false,
icon = null
icon = null,
placeholder = '',
inputtype = 'text'
}) => {
const input = <Controller
name={fieldName}
@@ -22,6 +24,8 @@ const TextInput = ({
render={({ field, fieldState }) => (
<InputText id={field.name}
{...field}
type={inputtype}
placeholder={placeholder}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
return (

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

@@ -9,6 +9,7 @@ import Datepicker from './components/Datepicker';
import DatepickerRange from './components/DatepickerRange';
import Fileupload from './components/Fileupload';
import NumberInput from './components/NumberInput';
import Switch from './components/Switch';
const FormField = (props) => {
const fields = {
@@ -17,7 +18,8 @@ const FormField = (props) => {
datepicker: Datepicker,
datepickerrange: DatepickerRange,
fileupload: Fileupload,
numberinput: NumberInput
numberinput: NumberInput,
switch: Switch
}
const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;