parent
6295530948
commit
53e976a382
@ -0,0 +1,611 @@ |
||||
import { useEffect, useState } from 'react' |
||||
import { |
||||
Alert, |
||||
Button, |
||||
Card, |
||||
Col, |
||||
Form, |
||||
Modal, |
||||
Row, |
||||
Table |
||||
} from 'react-bootstrap' |
||||
import { IconContext } from 'react-icons' |
||||
import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs' |
||||
import { FaAmazon } from 'react-icons/fa' |
||||
import I2096Headers from '../../Interfaces/I2096Header' |
||||
import DSAmazon from '../../Services/Amazon.Services' |
||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
||||
import { RootState } from '../../../../../store/store' |
||||
import { |
||||
initializeInvoice, |
||||
populateInvoices, |
||||
updateInvoice |
||||
} from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||
|
||||
// Redux
|
||||
import { useDispatch, useSelector } from 'react-redux' |
||||
import DTO2096LinkInvoice2Reference from '../../DTO/DTO2096LinkInvoice2Reference' |
||||
import { AiFillFileExcel } from 'react-icons/ai' |
||||
import RptConsultaTraficoDetalle from './RptConsultaTraficoDetalle' |
||||
import loadingImg from '../../../../../images/ajaxloader.gif' |
||||
import * as XLSX from 'xlsx' |
||||
|
||||
export interface IRptConsultaTraficoProps {} |
||||
|
||||
export default function RptConsultaTrafico(props: IRptConsultaTraficoProps) { |
||||
const dispatch = useDispatch() |
||||
const mInvoices = useSelector( |
||||
(state: RootState) => state.AmazonInvoices.Invoice |
||||
) |
||||
const [header, setHeader] = useState('') |
||||
const [Referencia, setReferencia] = useState('') |
||||
const [show, setShowMsg] = useState(false) |
||||
const [ShowModal, setShowModal] = useState(false) |
||||
const [ShowModalUnlink, setShowModalUnlink] = useState(false) |
||||
const [WaitingDialog, setWaitingDialog] = useState(false) |
||||
const [WaitingMessage, setWaitingMessage] = useState('') |
||||
const [msg, setMsg] = useState('') |
||||
const [Invoices, setInvoices] = useState<number[]>([]) |
||||
const msgColor = 'primary' |
||||
|
||||
const loadReport = () => { |
||||
DSAmazon.AmazonLinkInvoice2TrafficGet() |
||||
.then((response) => { |
||||
dispatch(initializeInvoice([])) |
||||
dispatch(populateInvoices(response.data)) |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error' + e.message.toString()) |
||||
}) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
loadReport() |
||||
}, []) |
||||
|
||||
/* const check4Updates = (IDInvoice: number) => { |
||||
DSAmazon.SETInvoiceDetailRevalidateParts(IDInvoice) |
||||
.then((response) => { |
||||
DSAmazon.AmazonInvoiceGET(IDInvoice) |
||||
.then((response) => { |
||||
dispatch(updateInvoice(response.data[0])) |
||||
let Invoice: I2096Headers[] = response.data.filter( |
||||
(item) => item.id === IDInvoice |
||||
) |
||||
const Obj = { ...Invoice[0] } |
||||
Obj.max = !Obj.max |
||||
dispatch(updateInvoice(Obj)) |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error') |
||||
return |
||||
}) |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error') |
||||
return |
||||
}) |
||||
} */ |
||||
|
||||
const changeToggle = (row: I2096Headers) => { |
||||
let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id) |
||||
const Obj = { ...Invoice[0] } |
||||
Obj.max = !Obj.max |
||||
dispatch(updateInvoice(Obj)) |
||||
// if (Obj.max) check4Updates(row.id)
|
||||
} |
||||
|
||||
const updateDataGrid = (IDInvoice: number) => { |
||||
//toggleInvoice(IDInvoice)
|
||||
let Invoice: I2096Headers[] = mInvoices.filter( |
||||
(item) => item.id === IDInvoice |
||||
) |
||||
const Obj = { ...Invoice[0] } |
||||
Obj.max = !Obj.max |
||||
dispatch(updateInvoice(Obj)) |
||||
// if (Obj.max) check4Updates(IDInvoice)
|
||||
} |
||||
|
||||
const toggleInvoice = (id: number) => { |
||||
if (!Invoices.includes(id)) { |
||||
Invoices.push(id) |
||||
} else { |
||||
setInvoices( |
||||
Invoices.filter(function (el) { |
||||
return el != id |
||||
}) |
||||
) |
||||
} |
||||
} |
||||
|
||||
function getReceiver(Cadena: string, char1: string[1], char2: string[1]) { |
||||
return Cadena.slice(Cadena.indexOf(char1) + 1, Cadena.lastIndexOf(char2)) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Card> |
||||
<Card.Body> |
||||
<Row> |
||||
<Col xs={6}> |
||||
<Card.Title> |
||||
<IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}> |
||||
<FaAmazon /> |
||||
</IconContext.Provider>{' '} |
||||
TRAFICO : Consulta Amazon |
||||
</Card.Title> |
||||
</Col> |
||||
<Col></Col> |
||||
<Col></Col> |
||||
<Col></Col> |
||||
<Col></Col> |
||||
<Col></Col> |
||||
</Row> |
||||
</Card.Body> |
||||
</Card> |
||||
|
||||
<Card> |
||||
<Card.Body> |
||||
<div className="MDcontainer"> |
||||
<Table className="MDTable" hover> |
||||
<thead style={{ position: 'sticky', top: '0' }}> |
||||
<tr> |
||||
<th></th> |
||||
<th style={{ width: '50px' }}>id</th> |
||||
{/*<th style={{ width: '50px' }}>[...]</th> |
||||
<th style={{ width: '50px' }}>PDF</th> |
||||
<th style={{ width: '50px' }}>Facturas</th> |
||||
<th style={{ width: '50px' }}>Partidas</th> */} |
||||
<th style={{ width: '100px' }}>Referencia</th> |
||||
<th style={{ width: '80px' }}>Commercial Invoice Date</th> |
||||
<th style={{ width: '250px' }}>Invoice Number</th> |
||||
<th style={{ width: '100px' }}>Receiver</th> |
||||
<th style={{ width: '100px' }}>Incoterms</th> |
||||
<th style={{ textAlign: 'center' }}>HAWB</th> |
||||
<th>Qty Unit of measure</th> |
||||
<th>Tot Qty</th> |
||||
<th>Weight unit of measure</th> |
||||
<th>Tot weight</th> |
||||
<th>Tot Charge or allowance</th> |
||||
<th>Tot currency ISO code</th> |
||||
<th>Tot Monetary amount</th> |
||||
<th>Total de partidas</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{mInvoices |
||||
? mInvoices.map((MasterData) => { |
||||
return ( |
||||
<> |
||||
<tr |
||||
style={{ cursor: 'pointer', height: '25px' }} |
||||
className={ |
||||
MasterData.max === true |
||||
? 'masterSelected' |
||||
: 'normalSelected' |
||||
} |
||||
> |
||||
<td |
||||
style={{ textAlign: 'left' }} |
||||
className={ |
||||
MasterData.max === true |
||||
? 'masterSelected' |
||||
: 'normalSelected' |
||||
} |
||||
key={MasterData.id} |
||||
onClick={() => { |
||||
changeToggle(MasterData) |
||||
}} |
||||
> |
||||
{MasterData.max === true ? ( |
||||
<IconContext.Provider |
||||
value={{ color: 'blue', size: '15px' }} |
||||
> |
||||
<BsChevronDown /> |
||||
</IconContext.Provider> |
||||
) : ( |
||||
<IconContext.Provider |
||||
value={{ color: 'blue', size: '15px' }} |
||||
> |
||||
<BsChevronRight /> |
||||
</IconContext.Provider> |
||||
)} |
||||
</td> |
||||
<td>{MasterData.id}</td> |
||||
{/* <td style={{ textAlign: 'center' }}> |
||||
<Form.Check |
||||
aria-label="ChkRow" |
||||
onClick={() => toggleInvoice(MasterData.id)} |
||||
/> |
||||
</td> |
||||
<td style={{ width: '50px', textAlign: 'center' }}> |
||||
<div |
||||
onClick={() => { |
||||
downloadPDF( |
||||
MasterData.id, |
||||
MasterData.invoiceNumber |
||||
) |
||||
}} |
||||
> |
||||
<IconContext.Provider |
||||
value={{ color: 'red', size: '20px' }} |
||||
> |
||||
<BsFilePdfFill /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
</td> |
||||
<td |
||||
style={{ |
||||
width: '50px', |
||||
textAlign: 'center', |
||||
visibility: MasterData.referencia |
||||
? 'visible' |
||||
: 'hidden' |
||||
}} |
||||
> |
||||
<div |
||||
onClick={() => { |
||||
downloadExcelInvoices(MasterData.referencia) |
||||
}} |
||||
> |
||||
<IconContext.Provider |
||||
value={{ color: 'green', size: '20px' }} |
||||
> |
||||
<AiFillFileExcel /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
</td> |
||||
<td |
||||
style={{ |
||||
width: '50px', |
||||
textAlign: 'center', |
||||
visibility: MasterData.referencia |
||||
? 'visible' |
||||
: 'hidden' |
||||
}} |
||||
> |
||||
<div |
||||
onClick={() => { |
||||
downloadExcelPartidas(MasterData.referencia) |
||||
}} |
||||
> |
||||
<IconContext.Provider |
||||
value={{ color: 'green', size: '20px' }} |
||||
> |
||||
<AiFillFileExcel /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
</td> */} |
||||
<td style={{ width: '100px', textAlign: 'center' }}> |
||||
{MasterData.referencia} |
||||
</td> |
||||
<td style={{ width: '80px', textAlign: 'center' }}> |
||||
{MasterData.commercialInvoiceDate} |
||||
</td> |
||||
<td style={{ width: '300px' }}> |
||||
{MasterData.invoiceNumber} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
width: '100px', |
||||
textAlign: 'center', |
||||
fontWeight: 'bold', |
||||
fontSize: '13px' |
||||
}} |
||||
> |
||||
{mInvoices |
||||
.filter((value) => value.id === MasterData.id) |
||||
.map((row) => { |
||||
return getReceiver( |
||||
row.detail[0].amazonShipmentReferenceId, |
||||
'_', |
||||
'_' |
||||
) |
||||
})} |
||||
</td> |
||||
<td style={{ width: '100px', textAlign: 'center' }}> |
||||
{MasterData.incoterms} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.hawb} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceQuantityUnitOfMeasure} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceQuantity} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceWeightUnitOfMeasure} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceWeight} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceValueChargeOrAllowance} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceValueCurrencyISOCode} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceValueMonetaryAmount} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
fontWeight: 'bold', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
{mInvoices |
||||
.filter((value) => value.id === MasterData.id) |
||||
.map((row) => { |
||||
return row.detail.length |
||||
})} |
||||
</td> |
||||
</tr> |
||||
{MasterData.max ? ( |
||||
<tr |
||||
className={ |
||||
MasterData.max === true |
||||
? 'masterSelected2' |
||||
: 'normalSelected2' |
||||
} |
||||
> |
||||
<th colSpan={18}> |
||||
<table |
||||
className="childTable" |
||||
style={{ width: '1650px' }} |
||||
> |
||||
<thead> |
||||
<tr> |
||||
<th |
||||
style={{ |
||||
width: '50px', |
||||
backgroundColor: '#FFFFFF', |
||||
color: '#346288', |
||||
textAlign: 'right' |
||||
}} |
||||
></th> |
||||
<th |
||||
style={{ |
||||
width: '100px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Item Id |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '400px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Item Description |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '120px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Fraccion GEMCO |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Descripcion GEMCO |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Country of Origin |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
ProductGroup |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Brand |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Model |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit Measure |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Qty Shipped |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit of measure |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit Net Weight |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit Cost |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Total value |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Consulta |
||||
</th> |
||||
{/* <th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
></th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
></th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
></th> */} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{mInvoices.map((MD) => { |
||||
return ( |
||||
<> |
||||
{MD.detail |
||||
.filter( |
||||
(detail) => |
||||
MasterData.id === |
||||
detail.idHeader |
||||
) //.sort((a,b) => a.itemId.localeCompare(b.itemId))
|
||||
.sort((a, b) => |
||||
a.partida > b.partida ? 1 : -1 |
||||
) |
||||
.map((detail) => { |
||||
return ( |
||||
<RptConsultaTraficoDetalle |
||||
IDMaster={MasterData.id} |
||||
detail={detail} |
||||
Habilitado={ |
||||
MasterData.estatus <= 1 |
||||
} |
||||
onDataChange={function ( |
||||
IDMaster: number |
||||
): void { |
||||
updateDataGrid(IDMaster) |
||||
}} |
||||
/> |
||||
) |
||||
})} |
||||
</> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</table> |
||||
</th> |
||||
</tr> |
||||
) : null} |
||||
</> |
||||
) |
||||
}) |
||||
: null} |
||||
</tbody> |
||||
</Table> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
|
||||
<Modal |
||||
show={WaitingDialog} |
||||
onHide={() => { |
||||
setWaitingDialog(false) |
||||
}} |
||||
backdrop="static" |
||||
keyboard={false} |
||||
size="sm" |
||||
dialogClassName={'modal-50w'} |
||||
centered |
||||
> |
||||
<Modal.Header closeButton> |
||||
<Modal.Title></Modal.Title> |
||||
</Modal.Header> |
||||
<Modal.Body> |
||||
<img src={loadingImg} style={{ height: '150px' }} alt="proccessing" /> |
||||
Generando {WaitingMessage}... |
||||
</Modal.Body> |
||||
<Modal.Footer></Modal.Footer> |
||||
</Modal> |
||||
|
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
@ -0,0 +1,567 @@ |
||||
import * as React from 'react' |
||||
import { useEffect, useState } from 'react' |
||||
import { |
||||
Alert, |
||||
Button, |
||||
Col, |
||||
Form, |
||||
FormCheck, |
||||
Modal, |
||||
OverlayTrigger, |
||||
Popover, |
||||
Row, |
||||
Tooltip |
||||
} from 'react-bootstrap' |
||||
import { IconContext } from 'react-icons' |
||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
||||
import I2096Detail from '../../Interfaces/I2096Detail' |
||||
import DSAmazon from '../../Services/Amazon.Services' |
||||
// Redux
|
||||
import { RootState } from '../../../../../store/store' |
||||
import { useDispatch, useSelector } from 'react-redux' |
||||
import * as CurrencyFormat from 'react-currency-format' |
||||
import { AiOutlineFileSearch, AiTwotoneEdit } from 'react-icons/ai' |
||||
import { BsFillChatRightTextFill, BsFillPencilFill } from 'react-icons/bs' |
||||
import DTO2096SightLine from '../../DTO/DTO2096SightLine' |
||||
import { updateInvoice } from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||
import DTO2096TraficoFieldsUpdate from '../../DTO/DTO2096TraficoFieldsUpdate' |
||||
import I2096Headers from '../../Interfaces/I2096Header' |
||||
|
||||
export interface IRptConsultaTraficoDetalleProps { |
||||
IDMaster: number, |
||||
detail: I2096Detail, |
||||
Habilitado: boolean, |
||||
onDataChange: (IDMaster: number) => void |
||||
} |
||||
|
||||
export default function RptConsultaTraficoDetalle (props: IRptConsultaTraficoDetalleProps) { |
||||
const dispatch = useDispatch() |
||||
const mInvoices = useSelector( |
||||
(state: RootState) => state.AmazonInvoices.Invoice |
||||
) |
||||
const [ShowModal, setShowModal] = useState(false) |
||||
const [EstatusSwith, setEstatusSwitch] = useState(props.detail.sightLine) |
||||
const [UserChanged, setUserChanged] = useState(false) |
||||
const [header, setHeader] = useState('') |
||||
const [show, setShowMsg] = useState(false) |
||||
//const [Show, setShow] = useState(false)
|
||||
const [msg, setMsg] = useState('') |
||||
const [CumplimientoNormativo, setCumplimientoNormativo] = useState( |
||||
props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : '' |
||||
) |
||||
const [Comentarios, setComentarios] = useState( |
||||
props.detail.comentariosSightLine |
||||
? props.detail.comentariosSightLine |
||||
: '' |
||||
) |
||||
const [ShowModalEdit, setShowModalEdit] = useState(false) |
||||
const [UnitMeasure, setUnitMeasure] = useState('') |
||||
const [UnitOfMeasure, setUnitOfMeasure] = useState('') |
||||
const [UnitCost, setUnitCost] = useState('') |
||||
const [Quantity, setQuantity] = useState(0) |
||||
const [ItemId, setItemId] = useState('') |
||||
const [ItemDescription, setItemDescription] = useState('') |
||||
const [FraccionGEMCO, setFraccionGEMCO] = useState('') |
||||
const [DescripcionGEMCO, setDescripcionGEMCO] = useState('') |
||||
const msgColor = 'primary' |
||||
const openLink = (item: string) => { |
||||
window.open('https://www.amazon.com/dp/' + item) |
||||
} |
||||
const UpdateInvoiceDetail = ( |
||||
Invoice: I2096Headers, |
||||
Detail: I2096Detail[] |
||||
) => { |
||||
const updatedInvoice: I2096Headers = { |
||||
id: props.IDMaster, |
||||
referencia: Invoice.referencia, |
||||
commercialInvoiceDate: Invoice.commercialInvoiceDate, |
||||
invoiceNumber: Invoice.invoiceNumber, |
||||
name: Invoice.name, |
||||
trailerNumber: Invoice.trailerNumber, |
||||
trailerId: Invoice.trailerId, |
||||
porOfLoading: Invoice.porOfLoading, |
||||
portOfEntry: Invoice.portOfEntry, |
||||
paymentsTerms: Invoice.paymentsTerms, |
||||
incoterms: Invoice.incoterms, |
||||
hawb: Invoice.hawb, |
||||
totalInvoiceQuantityUnitOfMeasure: |
||||
Invoice.totalInvoiceQuantityUnitOfMeasure, |
||||
totalInvoiceQuantity: Invoice.totalInvoiceQuantity, |
||||
totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure, |
||||
totalInvoiceWeight: Invoice.totalInvoiceWeight, |
||||
totalInvoiceValueChargeOrAllowance: |
||||
Invoice.totalInvoiceValueChargeOrAllowance, |
||||
totalInvoiceValueCurrencyISOCode: |
||||
Invoice.totalInvoiceValueCurrencyISOCode, |
||||
totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount, |
||||
footNote: Invoice.footNote, |
||||
archivo: Invoice.archivo, |
||||
fCreacion: Invoice.fCreacion, |
||||
clasificador: Invoice.clasificador, |
||||
noVuelta: Invoice.noVuelta, |
||||
estatus: Invoice.estatus, |
||||
max: true, |
||||
urgente: Invoice.urgente, |
||||
detail: Detail |
||||
} |
||||
dispatch(updateInvoice(updatedInvoice)) |
||||
} |
||||
|
||||
const editInvoice = (id: number) => { |
||||
const Invoice = mInvoices |
||||
.filter((el) => el.id === props.IDMaster) |
||||
.map((el) => { |
||||
return el |
||||
}) |
||||
const newDetails = Invoice[0].detail.map((el) => { |
||||
if (el.id === id) { |
||||
return { |
||||
...el, |
||||
itemQuantityUnitOfMeasure: UnitMeasure, |
||||
weightValue: UnitOfMeasure, |
||||
actualUnitCostMonetaryAmount: UnitCost, |
||||
totalUnitValueMonetaryAmount: ( |
||||
el.quantity * parseFloat(UnitCost) |
||||
).toString() |
||||
} |
||||
} |
||||
return el |
||||
}) |
||||
UpdateInvoiceDetail(Invoice[0], newDetails) |
||||
} |
||||
|
||||
const ToggleSightLine = (id: number) => { |
||||
const data: DTO2096SightLine = { |
||||
id: id, |
||||
sightLine: EstatusSwith, |
||||
comentariosSightLine: Comentarios |
||||
} |
||||
DSAmazon.SightLineSET(data) |
||||
.then((response) => { |
||||
setShowModal(false) |
||||
props.onDataChange(props.IDMaster) |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error, no se guardo la informacion en BD') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
const saveFields = () => { |
||||
const data: DTO2096TraficoFieldsUpdate = { |
||||
id: props.detail.id, |
||||
UnitMeasure: UnitMeasure, |
||||
UnitOfMeasure: parseFloat(UnitOfMeasure), |
||||
UnitCost: parseFloat(UnitCost) |
||||
} |
||||
DSAmazon.TrafficFieldsUpdate(data) |
||||
.then((response) => { |
||||
setUnitMeasure(response.data.itemQuantityUnitOfMeasure) |
||||
setUnitOfMeasure(response.data.weightValue) |
||||
setUnitCost(response.data.actualUnitCostMonetaryAmount) |
||||
editInvoice(props.detail.id) |
||||
setHeader('Informativo') |
||||
setMsg('La informacion se guardo exitosamente') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (UserChanged) setShowModal(true) |
||||
}, [EstatusSwith, UserChanged]) |
||||
|
||||
return ( |
||||
<> |
||||
<tr> |
||||
<th |
||||
style={{ |
||||
width: '50px', |
||||
backgroundColor: '#FFFFFF', |
||||
textAlign: 'right', |
||||
fontWeight: 'bold' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.partida} |
||||
</th> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center', |
||||
cursor: 'pointer' |
||||
}} |
||||
className="DetailData" |
||||
onClick={() => openLink(props.detail.itemId)} |
||||
> |
||||
{props.detail.itemId} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'left' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.itemDescription} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
<CurrencyFormat |
||||
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
||||
disabled={true} |
||||
format={'####.##.####'} |
||||
displayType={'input'} |
||||
style={{ |
||||
fontSize: '17px', |
||||
backgroundColor: |
||||
props.detail.validaFraccionOriginal === 0 |
||||
? '#FFFAF2 ' |
||||
: '#E5F7B6', |
||||
border: |
||||
props.detail.validaFraccionOriginal === 0 |
||||
? '2px solid #F9A721' |
||||
: '2px solid green', |
||||
color: |
||||
props.detail.validaFraccionOriginal === 0 |
||||
? '#5923F6' |
||||
: '#000000', |
||||
width: '135px', |
||||
textAlign: 'right', |
||||
borderRadius: '10px' |
||||
}} |
||||
/> |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.descripcionGEMCO} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.countryOfOrigin} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'left', |
||||
paddingLeft: '15px' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.productGroup} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'left', |
||||
paddingLeft: '15px' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.brand} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'right' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.model} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.itemQuantityUnitOfMeasure} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.quantity} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.weightValue} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.netWeightUnitOfMeasure} |
||||
</td> |
||||
|
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.actualUnitCostMonetaryAmount} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.totalUnitValueMonetaryAmount} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center', |
||||
paddingLeft: '30px' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
<FormCheck |
||||
className="form-check form-switch form-control-lg" |
||||
id="switchEnabled" |
||||
type="switch" |
||||
checked={EstatusSwith} |
||||
onChange={() => { |
||||
setEstatusSwitch(!EstatusSwith) |
||||
setUserChanged(true) |
||||
setShowModal(!EstatusSwith) |
||||
}} |
||||
/> |
||||
</td> |
||||
{/* <td |
||||
style={{ |
||||
visibility: |
||||
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
||||
}} |
||||
> |
||||
<OverlayTrigger |
||||
placement="bottom" |
||||
overlay={ |
||||
<Tooltip id="button-tooltip-2">{CumplimientoNormativo}</Tooltip> |
||||
} |
||||
> |
||||
{({ ref, ...triggerHandler }) => ( |
||||
<Button variant="light" {...triggerHandler}> |
||||
<IconContext.Provider |
||||
value={{ |
||||
color: 'blue', |
||||
size: '25px' |
||||
}} |
||||
> |
||||
<AiOutlineFileSearch /> |
||||
</IconContext.Provider> |
||||
<span className="ms-1"></span> |
||||
</Button> |
||||
)} |
||||
</OverlayTrigger> |
||||
</td> |
||||
<td |
||||
style={{ |
||||
visibility: |
||||
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
||||
}} |
||||
> |
||||
<OverlayTrigger |
||||
placement="bottom" |
||||
overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>} |
||||
> |
||||
{({ ref, ...triggerHandler }) => ( |
||||
<Button variant="light" {...triggerHandler}> |
||||
<IconContext.Provider |
||||
value={{ |
||||
color: 'green', |
||||
size: '25px' |
||||
}} |
||||
> |
||||
<BsFillChatRightTextFill /> |
||||
</IconContext.Provider> |
||||
<span className="ms-1"></span> |
||||
</Button> |
||||
)} |
||||
</OverlayTrigger> |
||||
</td> |
||||
<td> |
||||
</td> */} |
||||
</tr> |
||||
<Modal |
||||
show={ShowModalEdit} |
||||
onHide={() => { |
||||
setShowModalEdit(false) |
||||
}} |
||||
size={'sm'} |
||||
dialogClassName={'modal-50w'} |
||||
> |
||||
<Modal.Body> |
||||
<div style={{ height: '230px' }}> |
||||
<Row> |
||||
<Col xs={12}> |
||||
<Alert key="warning" variant="warning"> |
||||
<span style={{ fontWeight: 'bold' }}>No Parte:</span> {ItemId}{' '} |
||||
<br /> |
||||
<span style={{ fontWeight: 'bold' }}> |
||||
Fraccion GEMCO: |
||||
</span>{' '} |
||||
{FraccionGEMCO} <br /> |
||||
<span style={{ fontWeight: 'bold' }}> |
||||
Descripcion GEMCO: |
||||
</span>{' '} |
||||
{DescripcionGEMCO} |
||||
</Alert> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={3}>Unit Measure:</Col> |
||||
<Col xs={3}> |
||||
<Form.Control |
||||
type="text" |
||||
id="Search" |
||||
size="sm" |
||||
value={UnitMeasure} |
||||
onChange={(e) => setUnitMeasure(e.target.value)} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '5px' }}> |
||||
<Col xs={3}>Unit of Measure:</Col> |
||||
<Col xs={3}> |
||||
<CurrencyFormat |
||||
onValueChange={(values: any) => { |
||||
const { value } = values |
||||
setUnitOfMeasure(value) |
||||
}} |
||||
value={UnitOfMeasure} |
||||
displayType={'input'} |
||||
style={{ |
||||
fontSize: '18px', |
||||
backgroundColor: '#F1EEF9', |
||||
border: '2px solid #5923F6', |
||||
color: '#5923F6', |
||||
width: '120px', |
||||
textAlign: 'right', |
||||
borderRadius: '10px' |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '5px' }}> |
||||
<Col xs={3}>Unit Cost:</Col> |
||||
<Col xs={3}> |
||||
<CurrencyFormat |
||||
onValueChange={(values: any) => { |
||||
const { value } = values |
||||
setUnitCost(value) |
||||
}} |
||||
value={UnitCost} |
||||
displayType={'input'} |
||||
style={{ |
||||
fontSize: '18px', |
||||
backgroundColor: '#F1EEF9', |
||||
border: '2px solid #5923F6', |
||||
color: '#5923F6', |
||||
width: '120px', |
||||
textAlign: 'right', |
||||
borderRadius: '10px' |
||||
}} |
||||
/> |
||||
</Col> |
||||
<Col xs={4}></Col> |
||||
<Col xs={2}> |
||||
<Button |
||||
variant="primary" |
||||
onClick={() => { |
||||
saveFields() |
||||
}} |
||||
> |
||||
Guardar |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</Modal.Body> |
||||
</Modal> |
||||
<Modal |
||||
show={ShowModal} |
||||
onHide={() => { |
||||
setShowModal(false) |
||||
}} |
||||
size={'sm'} |
||||
dialogClassName={'modal-50w'} |
||||
> |
||||
<Modal.Body> |
||||
<div style={{ height: '150px' }}> |
||||
<Row style={{ paddingTop: '15px' }}> |
||||
<Col xs={3}>Comentarios</Col> |
||||
<Col xs={8}> |
||||
{' '} |
||||
<Form.Control |
||||
as="textarea" |
||||
id="Comentarios" |
||||
size="sm" |
||||
value={Comentarios.length ? Comentarios : ''} |
||||
onChange={(e) => setComentarios(e.target.value)} |
||||
/> |
||||
</Col> |
||||
<Col> </Col> |
||||
</Row> |
||||
<Row style={{ paddingTop: '15px' }}> |
||||
<Col xs={6} style={{ textAlign: 'center' }}> |
||||
<Button |
||||
variant="secondary" |
||||
onClick={() => { |
||||
setEstatusSwitch(true) |
||||
setShowModal(false) |
||||
}} |
||||
> |
||||
No |
||||
</Button> |
||||
</Col> |
||||
<Col xs={6} style={{ textAlign: 'center' }}> |
||||
<Button |
||||
variant="danger" |
||||
onClick={() => { |
||||
ToggleSightLine(props.detail.id) |
||||
}} |
||||
> |
||||
Si |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</Modal.Body> |
||||
</Modal> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</> |
||||
) |
||||
} |
Loading…
Reference in new issue