- added add company page;
- connected api for delega download, upload and deleting;
This commit is contained in:
173
src/components/FileuploadDelega/index.js
Normal file
173
src/components/FileuploadDelega/index.js
Normal file
@@ -0,0 +1,173 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { isEmpty } from 'ramda';
|
||||
|
||||
import FileUploadService from '../../service/file-upload-service';
|
||||
|
||||
import { FileUpload } from 'primereact/fileupload';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Button } from 'primereact/button';
|
||||
import CompanyService from '../../service/company-service';
|
||||
|
||||
const FileuploadDelega = ({
|
||||
fieldName,
|
||||
setDataFn,
|
||||
defaultValue = [],
|
||||
accept = [],
|
||||
maxSize = 100000000,
|
||||
emptyText = __('Trascina qui il tuo file', 'gepafin'),
|
||||
chooseLabel = __('Aggiungi delega', 'gepafin'),
|
||||
multiple = false,
|
||||
companyId = 0,
|
||||
disabled = false
|
||||
}) => {
|
||||
const [stateFieldData, setStateFieldData] = useState({});
|
||||
const [acceptFormats, setAcceptFormats] = useState('');
|
||||
const inputRef = useRef();
|
||||
|
||||
const customBase64Uploader = (event) => {
|
||||
const formData = new FormData()
|
||||
for (const file of event.files) {
|
||||
formData.append('file', file)
|
||||
}
|
||||
CompanyService.uploadCompanyDelega(companyId, formData, callback, errorCallback);
|
||||
};
|
||||
|
||||
const callback = (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) => {
|
||||
console.log('file', file)
|
||||
return (
|
||||
<div className="appForm__fileUploadItem">
|
||||
<div>
|
||||
<span className="appForm__fileUploadItemName">
|
||||
{file.fileName}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
|
||||
{!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
icon="pi pi-times"
|
||||
severity="danger"
|
||||
aria-label={__('Anulla', 'gepafin')}
|
||||
onClick={() => onTemplateRemove(file)}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const onTemplateRemove = (file) => {
|
||||
if (file.id) {
|
||||
CompanyService.deleteDelega(
|
||||
companyId,
|
||||
(data) => dCallback(data, file.id),
|
||||
dErrorCallback
|
||||
);
|
||||
} 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);
|
||||
return newFiles;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const dErrorCallback = (err) => {
|
||||
console.log('err', err);
|
||||
}
|
||||
|
||||
const onBeforeDrop = (e) => {
|
||||
return !isEmpty(e.dataTransfer.files) ? validateFileInputType(e.dataTransfer.files) : false;
|
||||
}
|
||||
|
||||
const onBeforeSelect = (e) => {
|
||||
if (e.originalEvent.target.files) {
|
||||
return !isEmpty(e.originalEvent.target.files)
|
||||
? validateFileInputType(e.originalEvent.target.files)
|
||||
: false;
|
||||
}
|
||||
}
|
||||
|
||||
const validateFileInputType = (files) => {
|
||||
const MIMEtype = new RegExp(acceptFormats);
|
||||
|
||||
return Array.prototype.every.call(files, function passesAcceptedFormat(file) {
|
||||
const fileExtension = `.${file.name.split('.').pop().toLowerCase()}`;
|
||||
const fileType = file.type;
|
||||
return MIMEtype.test(fileType) || MIMEtype.test(fileExtension);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setStateFieldData(defaultValue);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.setUploadedFiles(multiple ? defaultValue : [defaultValue]);
|
||||
console.log('inputRef.current', inputRef.current, multiple ? defaultValue : [defaultValue])
|
||||
}
|
||||
}, [defaultValue]);
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
setAcceptFormats(accept.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
|
||||
}, [accept]);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.setUploadedFiles(multiple ? stateFieldData : [stateFieldData]);
|
||||
}
|
||||
|
||||
setDataFn(fieldName, multiple ? [...stateFieldData] : stateFieldData, { shouldValidate: true });
|
||||
}, [stateFieldData])
|
||||
|
||||
return (
|
||||
companyId && companyId !== 0
|
||||
? <FileUpload
|
||||
ref={inputRef}
|
||||
disabled={disabled}
|
||||
id={fieldName}
|
||||
name={fieldName}
|
||||
url={'/document/uploadFile'}
|
||||
multiple={multiple}
|
||||
accept={accept}
|
||||
maxFileSize={maxSize}
|
||||
emptyTemplate={<p>{emptyText}</p>}
|
||||
chooseLabel={chooseLabel}
|
||||
cancelLabel={__('Cancella', 'gepafin')}
|
||||
uploadLabel={__('Carica', 'gepafin')}
|
||||
itemTemplate={itemTemplate}
|
||||
customUpload
|
||||
onBeforeDrop={onBeforeDrop}
|
||||
onBeforeSelect={onBeforeSelect}
|
||||
uploadHandler={customBase64Uploader}/>
|
||||
: null
|
||||
)
|
||||
}
|
||||
|
||||
export default FileuploadDelega;
|
||||
Reference in New Issue
Block a user