-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(fe-piattaforma): fe updates 08042022
- Loading branch information
Showing
14 changed files
with
552 additions
and
269 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
...orma/src/components/AdministrativeArea/Entities/General/UploadCSVModal/UploadCSVModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { Button } from 'design-react-kit'; | ||
| import React, { useState } from 'react'; | ||
| import { selectModalPayload } from '../../../../../redux/features/modal/modalSlice'; | ||
| import { useAppSelector } from '../../../../../redux/hooks'; | ||
| import { downloadCSV } from '../../../../../utils/common'; | ||
| import FileInput from '../../../../General/FileInput/FileInput'; | ||
| import GenericModal from '../../../../Modals/GenericModal/genericModal'; | ||
|
|
||
| const id = 'upload-csv'; | ||
|
|
||
| interface UploadCSVModalI { | ||
| onConfirm: () => void; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| const UploadCSVModal = ({ onConfirm, onClose }: UploadCSVModalI) => { | ||
| const [step, setStep] = useState(0); | ||
| const payload = useAppSelector(selectModalPayload); | ||
|
|
||
| const downloadTemplateHandler = () => { | ||
| downloadCSV(payload?.data, `${payload?.entity}.csv`); | ||
| }; | ||
|
|
||
| let content = <span></span>; | ||
|
|
||
| switch (step) { | ||
| case 0: | ||
| content = ( | ||
| <div className='d-flex flex-column align-items-center justify-content-center p-5'> | ||
| <p className='py-3'> | ||
| Scarica il template relativo alle entità da caricare. | ||
| </p> | ||
| <Button | ||
| color='primary' | ||
| outline | ||
| onClick={() => downloadTemplateHandler()} | ||
| > | ||
| Scarica template | ||
| </Button> | ||
| <div className='w-100 pt-5'> | ||
| <FileInput /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| break; | ||
| case 1: | ||
| content = ( | ||
| <div className='d-flex justify-content-around align-items-center p-5 text-center'> | ||
| <div> | ||
| <h4>Riusciti</h4> | ||
| <p>12</p> | ||
| </div> | ||
| <div> | ||
| <h4>Falliti</h4> | ||
| <p>2</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
|
|
||
| const nextStep = () => { | ||
| switch (step) { | ||
| case 0: | ||
| setStep(1); | ||
| break; | ||
| case 1: | ||
| onConfirm(); | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <GenericModal | ||
| id={id} | ||
| primaryCTA={{ | ||
| label: 'Conferma', | ||
| onClick: nextStep, | ||
| }} | ||
| secondaryCTA={{ | ||
| label: 'Annulla', | ||
| onClick: onClose, | ||
| }} | ||
| centerButtons | ||
| onClose={onClose} | ||
| > | ||
| {content} | ||
| </GenericModal> | ||
| ); | ||
| }; | ||
|
|
||
| export default UploadCSVModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
72 changes: 72 additions & 0 deletions
72
fe-piattaforma/src/components/General/FileInput/FileInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { Button, Icon } from 'design-react-kit'; | ||
| import React, { useRef, useState } from 'react'; | ||
|
|
||
| const FileInput = () => { | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
| const [file, setFile] = useState<string | null>(null); | ||
|
|
||
| const addDocument = () => { | ||
| if (inputRef.current !== null) { | ||
| inputRef.current.click(); | ||
| } | ||
| }; | ||
| const updateFile = () => { | ||
| const input: HTMLInputElement = document.getElementById( | ||
| 'file' | ||
| ) as HTMLInputElement; | ||
|
|
||
| if (input.files?.length) { | ||
| const selectedFile = input.files[0]; | ||
| const reader = new FileReader(); | ||
| reader.readAsDataURL(selectedFile); | ||
| reader.onloadend = () => { | ||
| setFile(selectedFile.name as string); | ||
| }; | ||
| } | ||
| }; | ||
|
|
||
| const removeFile = () => { | ||
| const input: HTMLInputElement = document.getElementById( | ||
| 'file' | ||
| ) as HTMLInputElement; | ||
|
|
||
| if (input.files?.length) { | ||
| input.value = ''; | ||
| setFile(null); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='w-100 border-bottom'> | ||
| <input | ||
| type='file' | ||
| id='file' | ||
| accept='image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv' | ||
| ref={inputRef} | ||
| className='sr-only' | ||
| capture | ||
| onChange={updateFile} | ||
| /> | ||
| <label | ||
| htmlFor='file' | ||
| className='d-flex align-items-center justify-content-between' | ||
| > | ||
| <p className='mt-2' style={{ color: '#4c4c4d' }}> | ||
| {file ? <strong>{file}</strong> : 'Carica file dal tuo dispositivo'} | ||
| </p> | ||
| {file && ( | ||
| <Button icon className='p-2' onClick={removeFile}> | ||
| <Icon icon='it-delete' size='sm' color='primary' /> | ||
| </Button> | ||
| )} | ||
| {file === null && ( | ||
| <Button outline color='primary' className='p-2' onClick={addDocument}> | ||
| <Icon icon='it-plus' size='sm' color='primary' /> Seleziona file | ||
| </Button> | ||
| )} | ||
| </label> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FileInput; |
Oops, something went wrong.