- added download application pdf button for submitted applications;

- fixed adding files for call;
This commit is contained in:
Vitalii Kiiko
2024-10-12 13:49:40 +02:00
parent 68f2d756ce
commit 6bfe2f9728
14 changed files with 400 additions and 264 deletions

View File

@@ -0,0 +1,194 @@
import React, { useEffect, useState, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { head, isEmpty } from 'ramda';
import { FileUpload } from 'primereact/fileupload';
import { Tag } from 'primereact/tag';
import { Button } from 'primereact/button';
// api
import ApplicationService from '../../service/application-service';
import { mimeTypes } from '../../configData';
const FileuploadApplicationSignedPdf = ({
fieldName,
setDataFn,
defaultValue = [],
accept = [],
maxSize = 100000000,
emptyText = __('Trascina qui il tuo file', 'gepafin'),
chooseLabel = __('Aggiungi documento', 'gepafin'),
uploadLabel = __('Salva documento', 'gepafin'),
cancelLabel = __('Cancella documento', 'gepafin'),
multiple = false,
applicationId = 0,
disabled = false
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [acceptFormats, setAcceptFormats] = useState('');
const [formatsForInput, setFormatsForInput] = useState('');
const inputRef = useRef();
const customBase64Uploader = (event) => {
const formData = new FormData()
for (const file of event.files) {
formData.append('file', file)
}
ApplicationService.uploadApplicationSignedPdf(applicationId, formData, callback, errorCallback);
};
const callback = (data) => {
if (data.status === 'SUCCESS') {
setStateFieldData([data.data]);
inputRef.current.setFiles([]);
}
}
const errorCallback = (err) => {
console.log('err', err);
}
const itemTemplate = (file) => {
let fileName = file.fileName ? file.fileName : file.name;
return (
<div className="appForm__fileUploadItem">
<div>
<span className="appForm__fileUploadItemName">
{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) {
ApplicationService.deleteApplicationSignedPdf(
applicationId,
(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);
console.log('dCallback - newFiles', 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) => {
const files = inputRef.current.getFiles();
const uploadedfiles = inputRef.current.getUploadedFiles();
if (!multiple && (uploadedfiles.length > 0 || files.length > 0)) {
return false;
}
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(defaultValue);
}
}, [defaultValue]);
useEffect(() => {
const properMime = accept
.map(v => {
const found = head(mimeTypes.filter(o => o.code.includes(v)));
let res = v;
if (found) {
res = found.code;
}
return res;
})
// eslint-disable-next-line no-useless-escape
setAcceptFormats(properMime.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
setFormatsForInput(properMime.join(','))
}, [accept]);
useEffect(() => {
if (inputRef.current) {
inputRef.current.setUploadedFiles(stateFieldData);
}
setDataFn(fieldName, stateFieldData, { shouldValidate: true });
}, [stateFieldData])
return (
applicationId && applicationId !== 0
? <FileUpload
ref={inputRef}
disabled={disabled}
id={fieldName}
name={fieldName}
url={'/document/uploadFile'}
multiple={multiple}
accept={formatsForInput}
maxFileSize={maxSize}
emptyTemplate={<p>{emptyText}</p>}
chooseLabel={chooseLabel}
cancelLabel={cancelLabel}
uploadLabel={uploadLabel}
itemTemplate={itemTemplate}
customUpload
onBeforeDrop={onBeforeDrop}
onBeforeSelect={onBeforeSelect}
uploadHandler={customBase64Uploader}/>
: null
)
}
export default FileuploadApplicationSignedPdf;

View File

@@ -11,19 +11,19 @@ import CompanyService from '../../service/company-service';
import { mimeTypes } from '../../configData';
const FileuploadDelega = ({
fieldName,
setDataFn,
defaultValue = [],
accept = [],
maxSize = 100000000,
emptyText = __('Trascina qui il tuo file', 'gepafin'),
chooseLabel = __('Aggiungi delega', 'gepafin'),
fieldName,
setDataFn,
defaultValue = [],
accept = [],
maxSize = 100000000,
emptyText = __('Trascina qui il tuo file', 'gepafin'),
chooseLabel = __('Aggiungi delega', 'gepafin'),
uploadLabel = __('Salva documento', 'gepafin'),
cancelLabel = __('Cancella documento', 'gepafin'),
multiple = false,
companyId = 0,
disabled = false
}) => {
multiple = false,
companyId = 0,
disabled = false
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [acceptFormats, setAcceptFormats] = useState('');
const [formatsForInput, setFormatsForInput] = useState('');

View File

@@ -35,11 +35,11 @@ const Checkboxes = ({
const properConfig = (config) => {
let newConfig = klona(config);
if (config.minLength) {
newConfig = wrap(newConfig).set(['validate', 'minChecks'], (v) => minChecks(v, config.minLength)).value();
if (config.min) {
newConfig = wrap(newConfig).set(['validate', 'minChecks'], (v) => minChecks(v, config.min)).value();
}
if (config.maxLength) {
newConfig = wrap(newConfig).set(['validate', 'maxChecks'], (v) => maxChecks(v, config.maxLength)).value();
if (config.max) {
newConfig = wrap(newConfig).set(['validate', 'maxChecks'], (v) => maxChecks(v, config.max)).value();
}
return newConfig;

View File

@@ -60,9 +60,8 @@ const Fileupload = ({
const callback = (data) => {
if (data.status === 'SUCCESS') {
setStateFieldData(data.data);
const files = inputRef.current.getFiles();
inputRef.current.setUploadedFiles(files);
setDataFn(fieldName, data.data, { shouldValidate: true });
const uploadedFiles = inputRef.current.getUploadedFiles();
setDataFn(fieldName, [...uploadedFiles, ...data.data], { shouldValidate: true });
inputRef.current.setFiles([]);
saveFormCallback();
}
@@ -116,7 +115,6 @@ const Fileupload = ({
if (data.status === 'SUCCESS') {
setStateFieldData(prevState => {
const newFiles = prevState.filter(o => o.id !== id);
inputRef.current.setUploadedFiles(newFiles);
setDataFn(fieldName, newFiles, { shouldValidate: true });
saveFormCallback();
return newFiles;

View File

@@ -54,8 +54,8 @@ const FileuploadAsync = ({
const callback = (data) => {
if (data.status === 'SUCCESS') {
setStateFieldData(data.data);
const files = inputRef.current.getFiles();
inputRef.current.setUploadedFiles(files);
const uploadedFiles = inputRef.current.getUploadedFiles();
setDataFn(fieldName, [...uploadedFiles, ...data.data], { shouldValidate: true });
inputRef.current.setFiles([]);
}
}
@@ -108,7 +108,7 @@ const FileuploadAsync = ({
if (data.status === 'SUCCESS') {
setStateFieldData(prevState => {
const newFiles = prevState.filter(o => o.id !== id);
inputRef.current.setUploadedFiles(newFiles);
setDataFn(fieldName, newFiles, { shouldValidate: true });
return newFiles;
});
}
@@ -123,6 +123,13 @@ const FileuploadAsync = ({
}
const onBeforeSelect = (e) => {
const files = inputRef.current.getFiles();
const uploadedfiles = inputRef.current.getUploadedFiles();
if (!multiple && (uploadedfiles.length > 0 || files.length > 0)) {
return false;
}
if (e.originalEvent.target.files) {
return !isEmpty(e.originalEvent.target.files)
? validateFileInputType(e.originalEvent.target.files)
@@ -147,11 +154,9 @@ const FileuploadAsync = ({
useEffect(() => {
if (inputRef.current) {
const properValue = multiple
? defaultValue
: !isEmpty(defaultValue) ? [defaultValue] : [];
inputRef.current.setUploadedFiles(properValue);
inputRef.current.setUploadedFiles(defaultValue);
}
setStateFieldData(defaultValue);
}, [defaultValue]);
useEffect(() => {
@@ -171,13 +176,6 @@ const FileuploadAsync = ({
setFormatsForInput(properMime.join(','))
}, [accept]);
useEffect(() => {
if (inputRef.current) {
inputRef.current.setUploadedFiles(stateFieldData);
}
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (
sourceId && sourceId !== 0
? <>

View File

@@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import equal from 'fast-deep-equal';
import { diff } from 'deep-object-diff';
// store
import { storeGet } from '../../store';
@@ -10,7 +11,8 @@ const UnsavedChangesDetector = ({ getValuesFn }) => {
const formData = getValuesFn();
const initial = storeGet.main.formInitialData();
const isEqual = equal(initial, formData);
// TODO
//console.log('isEqual', isEqual, initial, formData, diff(initial, formData))
if (!isEqual) {
event.returnValue = __('You have unsaved changes. If you proceed, they will be lost.', 'gepafin');
}