|
|
|
@ -1,7 +1,15 @@ |
|
|
|
|
import React, { FC, useEffect, useState } from 'react' |
|
|
|
|
import MFileManagerDS from '../../../Services/Utils/MFileManager.Service' |
|
|
|
|
import IFileManager from '../../../Interfaces/Utils/IFileManager' |
|
|
|
|
import { Alert, Button, Card, Col, ListGroup, Modal, Row } from 'react-bootstrap' |
|
|
|
|
import { |
|
|
|
|
Alert, |
|
|
|
|
Button, |
|
|
|
|
Card, |
|
|
|
|
Col, |
|
|
|
|
ListGroup, |
|
|
|
|
Modal, |
|
|
|
|
Row, |
|
|
|
|
} from 'react-bootstrap' |
|
|
|
|
import { IconContext } from 'react-icons' |
|
|
|
|
import { BsFillXCircleFill } from 'react-icons/bs' |
|
|
|
|
import { MsgInformativo } from '../Toast/MsgInformativo' |
|
|
|
@ -21,8 +29,12 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
const stickyValue = window.localStorage.getItem('UserId') |
|
|
|
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
|
|
|
}) |
|
|
|
|
const [IDTrafico, setIDTrafico] = useState<number>(props.IDTrafico ? props.IDTrafico : 0) |
|
|
|
|
const [Proceso, setProceso] = useState<number>(props.Proceso ? props.Proceso : 0) |
|
|
|
|
const [IDTrafico, setIDTrafico] = useState<number>( |
|
|
|
|
props.IDTrafico ? props.IDTrafico : 0 |
|
|
|
|
) |
|
|
|
|
const [Proceso, setProceso] = useState<number>( |
|
|
|
|
props.Proceso ? props.Proceso : 0 |
|
|
|
|
) |
|
|
|
|
const [ListaArchivos, setListaArchivos] = useState<IFileManager[]>() |
|
|
|
|
const [NombreArchivo, setNombreArchivo] = useState('') |
|
|
|
|
const [MsgDialogDelete, setMsgDialogDelete] = useState(false) |
|
|
|
@ -101,7 +113,9 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
window.open(url) |
|
|
|
|
} else if ( |
|
|
|
|
row.nombreArchivo.toLowerCase().endsWith('.png') || |
|
|
|
|
row.nombreArchivo.toLowerCase().endsWith('.jpg') |
|
|
|
|
row.nombreArchivo.toLowerCase().endsWith('.jpg') || |
|
|
|
|
row.nombreArchivo.toLowerCase().endsWith('.gif') || |
|
|
|
|
row.nombreArchivo.toLowerCase().endsWith('.jpeg') |
|
|
|
|
) { |
|
|
|
|
const blob = new Blob([response.data], { type: 'image/png' }) |
|
|
|
|
const url = window.URL.createObjectURL(blob) |
|
|
|
@ -110,7 +124,10 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
const url = window.URL.createObjectURL(new Blob([response.data])) |
|
|
|
|
const link = document.createElement('a') |
|
|
|
|
link.href = url |
|
|
|
|
link.setAttribute('download', NombreArchivo ? NombreArchivo : 'Archivo.zip') |
|
|
|
|
link.setAttribute( |
|
|
|
|
'download', |
|
|
|
|
NombreArchivo ? NombreArchivo : 'Archivo.zip' |
|
|
|
|
) |
|
|
|
|
document.body.appendChild(link) |
|
|
|
|
link.click() |
|
|
|
|
} |
|
|
|
@ -161,9 +178,9 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
<Col xs={3}></Col> |
|
|
|
|
<Col xs={5}> |
|
|
|
|
<img |
|
|
|
|
src={`${URL.get()}/Utils/MFileManager/GetFileContentById?id=${rec.id}&Proceso=${ |
|
|
|
|
rec.proceso |
|
|
|
|
}`}
|
|
|
|
|
src={`${URL.get()}/Utils/MFileManager/GetFileContentById?id=${ |
|
|
|
|
rec.id |
|
|
|
|
}&Proceso=${rec.proceso}`}
|
|
|
|
|
width={150} |
|
|
|
|
height={200} |
|
|
|
|
alt={'Imagen'} |
|
|
|
@ -175,9 +192,15 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
<Col |
|
|
|
|
xs={1} |
|
|
|
|
alt='De un click aqui para eliminar' |
|
|
|
|
style={{ visibility: props.canEdit ? 'visible' : 'hidden' }} |
|
|
|
|
style={{ |
|
|
|
|
visibility: props.canEdit |
|
|
|
|
? 'visible' |
|
|
|
|
: 'hidden', |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<IconContext.Provider |
|
|
|
|
value={{ color: 'red', size: '20px' }} |
|
|
|
|
> |
|
|
|
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
|
|
|
<BsFillXCircleFill |
|
|
|
|
onClick={() => { |
|
|
|
|
confirmDelete(rec) |
|
|
|
@ -217,9 +240,15 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
<Col |
|
|
|
|
xs={1} |
|
|
|
|
alt='De un click aqui para eliminar' |
|
|
|
|
style={{ visibility: props.canEdit ? 'visible' : 'hidden' }} |
|
|
|
|
style={{ |
|
|
|
|
visibility: props.canEdit |
|
|
|
|
? 'visible' |
|
|
|
|
: 'hidden', |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<IconContext.Provider |
|
|
|
|
value={{ color: 'red', size: '20px' }} |
|
|
|
|
> |
|
|
|
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
|
|
|
<BsFillXCircleFill |
|
|
|
|
onClick={() => { |
|
|
|
|
confirmDelete(rec) |
|
|
|
@ -263,9 +292,18 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
{rec.nombreArchivo.substring(0, 40)} |
|
|
|
|
</span> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={1} style={{ visibility: props.canEdit ? 'visible' : 'hidden' }}> |
|
|
|
|
<Col |
|
|
|
|
xs={1} |
|
|
|
|
style={{ |
|
|
|
|
visibility: props.canEdit |
|
|
|
|
? 'visible' |
|
|
|
|
: 'hidden', |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<span> |
|
|
|
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
|
|
|
<IconContext.Provider |
|
|
|
|
value={{ color: 'red', size: '20px' }} |
|
|
|
|
> |
|
|
|
|
<BsFillXCircleFill |
|
|
|
|
onClick={() => { |
|
|
|
|
confirmDelete(rec) |
|
|
|
@ -287,7 +325,11 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
)} |
|
|
|
|
</Card.Body> |
|
|
|
|
</Card> |
|
|
|
|
<Modal show={MsgDialogDelete} onHide={() => setMsgDialogDelete(false)} size='lg'> |
|
|
|
|
<Modal |
|
|
|
|
show={MsgDialogDelete} |
|
|
|
|
onHide={() => setMsgDialogDelete(false)} |
|
|
|
|
size='lg' |
|
|
|
|
> |
|
|
|
|
<Modal.Body> |
|
|
|
|
<h5> |
|
|
|
|
Favor de confirmar |
|
|
|
@ -303,7 +345,11 @@ export const MFileManager: FC<IProps> = (props) => { |
|
|
|
|
<Modal.Footer> |
|
|
|
|
<Row> |
|
|
|
|
<Col xs={1}> |
|
|
|
|
<Button variant='secondary' onClick={() => setMsgDialogDelete(false)} size='sm'> |
|
|
|
|
<Button |
|
|
|
|
variant='secondary' |
|
|
|
|
onClick={() => setMsgDialogDelete(false)} |
|
|
|
|
size='sm' |
|
|
|
|
> |
|
|
|
|
Cerrar |
|
|
|
|
</Button> |
|
|
|
|
</Col> |
|
|
|
|