- added add company page;
- connected api for delega download, upload and deleting;
This commit is contained in:
Vitalii Kiiko
334
src/pages/AddCompany/index.js
Normal file
334
src/pages/AddCompany/index.js
Normal file
@@ -0,0 +1,334 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { isEmpty, isNil, head } from 'ramda';
|
||||
import { klona } from 'klona';
|
||||
import { useDebounce } from 'primereact/hooks';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
// store
|
||||
import { storeSet, useStore, storeGet } from '../../store';
|
||||
|
||||
// components
|
||||
import { Messages } from 'primereact/messages';
|
||||
import FormField from '../../components/FormField';
|
||||
import { Button } from 'primereact/button';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import BlockingOverlay from '../../components/BlockingOverlay';
|
||||
|
||||
// api
|
||||
import CompanyService from '../../service/company-service';
|
||||
|
||||
// tools
|
||||
import { isPIVA, isEmail, isEmailPEC } from '../../helpers/validators';
|
||||
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
|
||||
|
||||
const AddCompany = () => {
|
||||
const navigate = useNavigate();
|
||||
const isAsyncRequest = useStore().main.isAsyncRequest();
|
||||
const infoMsgs = useRef(null);
|
||||
const [, debouncedPivaValue, setInputPiva] = useDebounce('', 1000);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
getValues,
|
||||
watch
|
||||
} = useForm({
|
||||
defaultValues: {},
|
||||
mode: 'onChange'
|
||||
});
|
||||
const values = getValues();
|
||||
const emptyValues = Object.values(values).filter(v => isEmpty(v) || isNil(v)).length;
|
||||
const isPiva = watch('vatNumber')
|
||||
|
||||
const setEmptyValues = () => {
|
||||
const formData = {
|
||||
cap: '',
|
||||
pec: '',
|
||||
email: '',
|
||||
city: '',
|
||||
codiceFiscale: '',
|
||||
address: '',
|
||||
companyName: ''
|
||||
}
|
||||
Object.keys(formData).map(k => setValue(k, formData[k]));
|
||||
}
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
infoMsgs.current.clear();
|
||||
storeSet.main.setAsyncRequest();
|
||||
|
||||
CompanyService.createCompany(formData, updateCallback, updateError);
|
||||
};
|
||||
|
||||
const updateCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
const company = klona(data.data);
|
||||
const companies = storeGet.main.companies();
|
||||
const existingCompany = head(companies.filter(o => o.id === company.id));
|
||||
let newCompanies = [];
|
||||
|
||||
if (existingCompany) {
|
||||
newCompanies = companies.map(o => o.id === company.id ? company : o)
|
||||
} else {
|
||||
newCompanies = [...companies, company];
|
||||
storeSet.main.chosenCompanyId(company.id);
|
||||
}
|
||||
|
||||
storeSet.main.companies(newCompanies);
|
||||
|
||||
if (company.isLegalRepresentant) {
|
||||
navigate('/');
|
||||
} else {
|
||||
navigate('/profilo-aziendale');
|
||||
}
|
||||
|
||||
}
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
const updateError = (data) => {
|
||||
set404FromErrorResponse(data);
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
const checkVatNumber = (value) => {
|
||||
infoMsgs.current.clear();
|
||||
const isValid = isPIVA(value);
|
||||
|
||||
if (isValid) {
|
||||
storeSet.main.setAsyncRequest();
|
||||
CompanyService.checkVat(checkVatCallback, errCheckVatCallback, [['vatNumber', value]])
|
||||
} else {
|
||||
setEmptyValues();
|
||||
}
|
||||
}
|
||||
|
||||
const checkVatCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
const resp = data.data.data;
|
||||
if (!isEmpty(resp)) {
|
||||
const {
|
||||
cap, cf, denominazione, piva, indirizzo, comune, dettaglio: { pec }
|
||||
} = resp;
|
||||
|
||||
const formData = {
|
||||
cap,
|
||||
pec,
|
||||
email: pec,
|
||||
city: comune,
|
||||
codiceFiscale: cf,
|
||||
address: indirizzo,
|
||||
vatNumber: piva,
|
||||
companyName: denominazione
|
||||
}
|
||||
Object.keys(formData).map(k => setValue(k, formData[k]));
|
||||
}
|
||||
//setData(getFormattedBandiData(data.data));
|
||||
} else {
|
||||
setEmptyValues();
|
||||
}
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
const errCheckVatCallback = (data) => {
|
||||
setEmptyValues();
|
||||
set404FromErrorResponse(data);
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setInputPiva(isPiva);
|
||||
}, [isPiva]);
|
||||
|
||||
useEffect(() => {
|
||||
checkVatNumber(debouncedPivaValue);
|
||||
}, [debouncedPivaValue])
|
||||
|
||||
return (
|
||||
<div className="appPage">
|
||||
<div className="appPage__pageHeader">
|
||||
<h1>{__('Profilo aziendale', 'gepafin')}</h1>
|
||||
</div>
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
<Messages ref={infoMsgs}/>
|
||||
|
||||
<form id="companyForm" className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
|
||||
<div className="appPageSection">
|
||||
<h2>{__('Informazioni aziendali', 'gepafin')}</h2>
|
||||
<p>
|
||||
{__('Inserisci P.IVA e i dati aziendali verranno inseriti automaticamente per le aziende già esistenti', 'gepafin')}
|
||||
</p>
|
||||
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
/*disabled={true}*/
|
||||
fieldName="companyName"
|
||||
label={__('Ragione Sociale', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
placeholder="Nome di azienda"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="vatNumber"
|
||||
label={__('P.IVA', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={true}
|
||||
fieldName="codiceFiscale"
|
||||
label={__('Codice fiscale', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
/*disabled={true}*/
|
||||
fieldName="pec"
|
||||
label={__('Email PEC', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin'),
|
||||
validate: {
|
||||
isEmailPEC
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
/*disabled={true}*/
|
||||
fieldName="email"
|
||||
label={__('Email', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin'),
|
||||
validate: {
|
||||
isEmail
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/*<FormField
|
||||
type="textinput"
|
||||
fieldName="phoneNumber"
|
||||
label={__('Telefono', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>*/}
|
||||
</div>
|
||||
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
/*disabled={true}*/
|
||||
fieldName="address"
|
||||
label={__('Indirizzo', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
/*disabled={true}*/
|
||||
fieldName="city"
|
||||
label={__('Città', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
/*disabled={true}*/
|
||||
fieldName="cap"
|
||||
label={__('CAP', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="contactName"
|
||||
label={__('Nome di referente aziendale', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="contactEmail"
|
||||
label={__('Email di referente aziendale', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
config={{
|
||||
required: __('È obbligatorio', 'gepafin'),
|
||||
validate: {
|
||||
isEmail
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection">
|
||||
<FormField
|
||||
type="switch"
|
||||
fieldName="isLegalRepresentant"
|
||||
label={__('Sei il Rapprentante Legale dell’azienda?', 'gepafin')}
|
||||
control={control}
|
||||
errors={errors}
|
||||
onLabel={__('Si', 'gepafin')}
|
||||
offLabel={__('No', 'gepafin')}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<div className="appPageSection__hr">
|
||||
<span>{__('Azioni rapide', 'gepafin')}</span>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection">
|
||||
<div className="appPageSection__actions">
|
||||
<Button
|
||||
form="companyForm"
|
||||
disabled={isAsyncRequest || emptyValues}
|
||||
label={__('Salva modifiche', 'gepafin')}
|
||||
icon="pi pi-check" iconPos="right"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default AddCompany;
|
||||
@@ -1,12 +1,19 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { isEmpty, isNil, pathOr, head } from 'ramda';
|
||||
import { isEmpty, pathOr, head } from 'ramda';
|
||||
import { klona } from 'klona';
|
||||
import { wrap } from 'object-path-immutable';
|
||||
|
||||
// store
|
||||
import { storeSet, useStore, storeGet } from '../../store';
|
||||
|
||||
// api
|
||||
import CompanyService from '../../service/company-service';
|
||||
|
||||
// tools
|
||||
import { isPIVA, isEmail, isEmailPEC } from '../../helpers/validators';
|
||||
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
|
||||
|
||||
// components
|
||||
import { Messages } from 'primereact/messages';
|
||||
import FormField from '../../components/FormField';
|
||||
@@ -14,17 +21,11 @@ import { Button } from 'primereact/button';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import BlockingOverlay from '../../components/BlockingOverlay';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
|
||||
// api
|
||||
import CompanyService from '../../service/company-service';
|
||||
|
||||
// tools
|
||||
import { isPIVA, isCodiceFiscale, isEmail, isEmailPEC } from '../../helpers/validators';
|
||||
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
|
||||
import FileuploadStandalone from '../../components/FileuploadStandalone';
|
||||
import FileuploadDelega from '../../components/FileuploadDelega';
|
||||
|
||||
const ProfileCompany = () => {
|
||||
const isAsyncRequest = useStore().main.isAsyncRequest();
|
||||
const chosenCompanyId = useStore().main.chosenCompanyId();
|
||||
const companies = useStore().main.companies();
|
||||
const infoMsgs = useRef(null);
|
||||
const [formInitialData, setFormInitialData] = useState({});
|
||||
@@ -37,17 +38,13 @@ const ProfileCompany = () => {
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
getValues,
|
||||
watch,
|
||||
register
|
||||
} = useForm({
|
||||
defaultValues: useMemo(() => {
|
||||
return formInitialData;
|
||||
}, [formInitialData]),
|
||||
mode: 'onChange'
|
||||
});
|
||||
const values = getValues();
|
||||
const emptyValues = Object.values(values).filter(v => isEmpty(v) || isNil(v)).length;
|
||||
const isLegalRepresentant = watch('isLegalRepresentant')
|
||||
|
||||
const setEmptyValues = () => {
|
||||
@@ -67,11 +64,7 @@ const ProfileCompany = () => {
|
||||
infoMsgs.current.clear();
|
||||
storeSet.main.setAsyncRequest();
|
||||
|
||||
if (isNil(formData.id)) {
|
||||
CompanyService.createCompany(formData, updateCallback, updateError);
|
||||
} else {
|
||||
CompanyService.updateCompany(formData.id, formData, updateCallback, updateError);
|
||||
}
|
||||
CompanyService.updateCompany(formData.id, formData, updateCallback, updateError);
|
||||
};
|
||||
|
||||
const updateCallback = (data) => {
|
||||
@@ -148,9 +141,47 @@ const ProfileCompany = () => {
|
||||
setDelegaData(newDelegaData)
|
||||
}
|
||||
|
||||
const setDelegaFile = (data) => {
|
||||
console.log('setDelegaFile', data)
|
||||
setDelega(data);
|
||||
const setDelegaFile = (name, value) => {
|
||||
console.log('setDelegaFile', value)
|
||||
setDelega(value);
|
||||
}
|
||||
|
||||
const getDellegaCallback = (data) => {
|
||||
console.log(data)
|
||||
if (data.data) {
|
||||
setDelega(data.data);
|
||||
}
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
const errDellegaCallback = () => {
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
const downloadDelega = () => {
|
||||
storeSet.main.setAsyncRequest();
|
||||
const data = {
|
||||
codiceFiscale: delegaCodiceFiscale,
|
||||
firstName: delegaFirstName,
|
||||
lastName: delegaLastName
|
||||
}
|
||||
CompanyService.downloadCompanyDelega(formInitialData.id, data, getDellegaDownloadCallback, errDellegaDownloadCallback)
|
||||
}
|
||||
|
||||
const getDellegaDownloadCallback = (data) => {
|
||||
const pdfFile = new Blob([data], { type: 'application/octet-stream' })
|
||||
const url = window.URL.createObjectURL(pdfFile);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', 'delega.docx');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
const errDellegaDownloadCallback = () => {
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@@ -159,9 +190,43 @@ const ProfileCompany = () => {
|
||||
}, [formInitialData]);
|
||||
|
||||
useEffect(() => {
|
||||
const chosenCompany = pathOr({}, [0], companies);
|
||||
setFormInitialData(chosenCompany);
|
||||
}, [companies]);
|
||||
let chosenCompany = {};
|
||||
|
||||
if (chosenCompanyId) {
|
||||
chosenCompany = head(companies.filter(o => o.id === chosenCompanyId));
|
||||
}
|
||||
|
||||
if (!chosenCompany) {
|
||||
chosenCompany = pathOr({}, [0], companies);
|
||||
}
|
||||
|
||||
const {
|
||||
cap, codiceFiscale, companyName, vatNumber, address, city, pec, email,
|
||||
contactName, contactEmail, isLegalRepresentant, id
|
||||
} = chosenCompany;
|
||||
const companyData = {
|
||||
id,
|
||||
cap,
|
||||
pec,
|
||||
email,
|
||||
city,
|
||||
codiceFiscale,
|
||||
address,
|
||||
vatNumber,
|
||||
companyName,
|
||||
contactName,
|
||||
contactEmail,
|
||||
isLegalRepresentant
|
||||
}
|
||||
setFormInitialData(companyData);
|
||||
}, [chosenCompanyId, companies]);
|
||||
|
||||
useEffect(() => {
|
||||
if (formInitialData.id) {
|
||||
storeSet.main.setAsyncRequest();
|
||||
CompanyService.getCompanyDelega(formInitialData.id, getDellegaCallback, errDellegaCallback);
|
||||
}
|
||||
}, [formInitialData])
|
||||
|
||||
return (
|
||||
<div className="appPage">
|
||||
@@ -179,7 +244,6 @@ const ProfileCompany = () => {
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={true}
|
||||
fieldName="companyName"
|
||||
label={__('Ragione Sociale', 'gepafin')}
|
||||
control={control}
|
||||
@@ -193,7 +257,7 @@ const ProfileCompany = () => {
|
||||
<FormField
|
||||
type="textinput"
|
||||
fieldName="vatNumber"
|
||||
disabled={!isNil(formInitialData.id)}
|
||||
disabled={true}
|
||||
label={__('P.IVA', 'gepafin')}
|
||||
onBlurFn={checkVatNumber}
|
||||
control={control}
|
||||
@@ -215,7 +279,6 @@ const ProfileCompany = () => {
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={isNil(formInitialData.id)}
|
||||
fieldName="pec"
|
||||
label={__('Email PEC', 'gepafin')}
|
||||
control={control}
|
||||
@@ -230,7 +293,6 @@ const ProfileCompany = () => {
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={true}
|
||||
fieldName="email"
|
||||
label={__('Email', 'gepafin')}
|
||||
control={control}
|
||||
@@ -256,7 +318,6 @@ const ProfileCompany = () => {
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={true}
|
||||
fieldName="address"
|
||||
label={__('Indirizzo', 'gepafin')}
|
||||
control={control}
|
||||
@@ -266,7 +327,6 @@ const ProfileCompany = () => {
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={true}
|
||||
fieldName="city"
|
||||
label={__('Città', 'gepafin')}
|
||||
control={control}
|
||||
@@ -276,7 +336,6 @@ const ProfileCompany = () => {
|
||||
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={true}
|
||||
fieldName="cap"
|
||||
label={__('CAP', 'gepafin')}
|
||||
control={control}
|
||||
@@ -288,7 +347,6 @@ const ProfileCompany = () => {
|
||||
<div className="appForm__cols">
|
||||
<FormField
|
||||
type="textinput"
|
||||
disabled={isNil(formInitialData.id)}
|
||||
fieldName="contactName"
|
||||
label={__('Nome di referente aziendale', 'gepafin')}
|
||||
control={control}
|
||||
@@ -379,6 +437,7 @@ const ProfileCompany = () => {
|
||||
<div>
|
||||
<Button
|
||||
disabled={isEmpty(delegaCodiceFiscale) || isEmpty(delegaFirstName) || isEmpty(delegaLastName)}
|
||||
onClick={downloadDelega}
|
||||
type="button"
|
||||
label={__('Genera documento Delega', 'gepafin')}
|
||||
icon="pi pi-check" iconPos="right"/>
|
||||
@@ -389,16 +448,15 @@ const ProfileCompany = () => {
|
||||
{__('Carica documento Delega Firmato', 'gepafin')}
|
||||
<span className="appForm__field--required">*</span>
|
||||
</label>
|
||||
<FileuploadStandalone
|
||||
<FileuploadDelega
|
||||
setDataFn={setDelegaFile}
|
||||
fieldName="delega"
|
||||
defaultValue={[delega]}
|
||||
accept={['']}
|
||||
defaultValue={delega}
|
||||
accept={['.p7m,application/pkcs7-mime,application/x-pkcs7-mime']}
|
||||
chooseLabel={__('Aggiungi documento', 'gepafin')}
|
||||
multiple={false}
|
||||
doctype="document"
|
||||
sourceId={formInitialData.id}
|
||||
source="call"
|
||||
companyId={formInitialData.id}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user