parent
62bfd90979
commit
b89c4af501
@ -1,144 +1,206 @@ |
||||
import { useState } from 'react' |
||||
import { useCallback, useState } from 'react' |
||||
import { Button, Col, Form, Modal, Row } from 'react-bootstrap' |
||||
import * as CurrencyFormat from 'react-currency-format' |
||||
import * as CurrencyFormat from 'react-currency-format'
|
||||
/* import { PatternFormat } from 'react-number-format'; */ |
||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
||||
import { RootState } from '../../../../../store/store' |
||||
import { |
||||
populateInvoices, |
||||
addInvoice, |
||||
updateInvoice, |
||||
deleteInvoice |
||||
} from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||
// Redux
|
||||
import { useDispatch, useSelector } from 'react-redux' |
||||
import DTO2096Fraccion from '../../DTO/DTO2096Fraccion' |
||||
import DSAmazon from '../../Services/Amazon.Services' |
||||
import I2096Headers from '../../Interfaces/I2096Header' |
||||
import { max } from 'cypress/types/lodash' |
||||
|
||||
export interface IComboFraccionProps { |
||||
IDDetail: number |
||||
FraccionOriginal: string |
||||
IDInvoice: number |
||||
IDDetail: number |
||||
FraccionOriginal: string |
||||
parentFunction: Function |
||||
} |
||||
|
||||
export function ComboFraccion (props: IComboFraccionProps) { |
||||
const [Validacion, setValidacion] = useState(0) |
||||
const [showModal, setShowModal] = useState(false) |
||||
const [Fraccion, setFraccion] = useState('') |
||||
const [header, setHeader] = useState('') |
||||
const [show, setShowMsg] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const msgColor = 'primary' |
||||
|
||||
const changeValidacion = (e: number) => { |
||||
setValidacion(e) |
||||
if (e === 2) { |
||||
setShowModal(true) |
||||
} |
||||
if (e === 1) { |
||||
const data: DTO2096Fraccion = { |
||||
id: props.IDDetail, |
||||
fraccion: props.FraccionOriginal |
||||
} |
||||
DSAmazon.SetFraccion(data) |
||||
.then((response) => { |
||||
setShowModal(false) |
||||
setHeader('Confirmacion') |
||||
setMsg('La descripcion se ha guardado correctamente') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error' + e.message.toString()) |
||||
}) |
||||
} |
||||
export function ComboFraccion(props: IComboFraccionProps) { |
||||
const dispatch = useDispatch() |
||||
const mInvoices = useSelector( |
||||
(state: RootState) => state.AmazonInvoices.Invoice |
||||
) |
||||
const [Validacion, setValidacion] = useState(0) |
||||
const [showModal, setShowModal] = useState(false) |
||||
const [Fraccion, setFraccion] = useState('') |
||||
const [header, setHeader] = useState('') |
||||
const [show, setShowMsg] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const msgColor = 'primary' |
||||
|
||||
|
||||
const forceUpdate: () => void = useState({})[1].bind(null, {}) // see NOTE below
|
||||
|
||||
const changeValidacion = (e: number) => { |
||||
setValidacion(e) |
||||
if (e === 2) { |
||||
setShowModal(true) |
||||
} |
||||
|
||||
const saveFraccion = () => { |
||||
DSAmazon.GetValidaFraccion(Fraccion) |
||||
if (e === 1) { |
||||
const data: DTO2096Fraccion = { |
||||
id: props.IDDetail, |
||||
fraccion: props.FraccionOriginal |
||||
} |
||||
DSAmazon.SetFraccion(data) |
||||
.then((response) => { |
||||
if (response.data.respuesta === 'Si') { |
||||
const data: DTO2096Fraccion = { |
||||
id: props.IDDetail, |
||||
fraccion: Fraccion |
||||
} |
||||
DSAmazon.SetFraccion(data) |
||||
.then((response) => { |
||||
setShowModal(false) |
||||
setHeader('Confirmacion') |
||||
setMsg('La descripcion se ha guardado correctamente') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error' + e.message.toString()) |
||||
}) |
||||
} else { |
||||
alert( |
||||
'Esa fraccion no existe, favor de verificarla antes de poder guardar...' |
||||
) |
||||
return |
||||
} |
||||
|
||||
/* |
||||
let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === props.IDInvoice) |
||||
const Obj = { ...Invoice[0] } |
||||
|
||||
const newObject = Invoice.map(Invoice => ({ ...Invoice, |
||||
detail: Invoice.detail.filter(detail=>detail.id===props.IDDetail).map(detail => ({ ...detail, |
||||
fraccionGEMCO: detail.destinationHTSCode.replaceAll('.','') |
||||
})) |
||||
})) |
||||
|
||||
|
||||
const Obj2 = { ...newObject[0] } |
||||
Obj2.max = !Obj2.max |
||||
|
||||
console.log('.................................new object '+JSON.stringify(Obj2)) |
||||
dispatch(updateInvoice(Obj2)) |
||||
*/ |
||||
|
||||
/* const newObj = mInvoices.forEach(function(o) { |
||||
o.detail = o.detail.filter(s => (s.idHeader === props.IDInvoice) && (s.id!=props.IDDetail)); |
||||
}); */ |
||||
|
||||
const newObj = mInvoices.map(function(o) { |
||||
const newDetail = {...o.detail} |
||||
if (newDetail[0].id===props.IDDetail) { |
||||
newDetail[0].fraccionGEMCO=Fraccion |
||||
} |
||||
return newDetail |
||||
}); |
||||
|
||||
console.log(newObj) |
||||
|
||||
//dispatch(updateInvoice(newObj))
|
||||
|
||||
|
||||
setShowModal(false) |
||||
setHeader('Confirmacion') |
||||
setMsg('La descripcion se ha guardado correctamente') |
||||
setShowMsg(true) |
||||
forceUpdate() |
||||
return |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error' + e.message.toString()) |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Form.Control |
||||
as="select" |
||||
className="form-select form-select-sm" |
||||
onChange={(e) => changeValidacion(parseInt(e.target.value))} |
||||
value={Validacion} |
||||
> |
||||
<option value="0"> </option> |
||||
<option value="1"> = </option> |
||||
<option value="2"> != </option> |
||||
</Form.Control> |
||||
<Modal |
||||
show={showModal} |
||||
onHide={() => { |
||||
setShowModal(false) |
||||
}} |
||||
size={'sm'} |
||||
dialogClassName={'modal-50w'} |
||||
> |
||||
<Modal.Body> |
||||
<Row> |
||||
<Col xs={2}></Col> |
||||
<Col xs={4}>Proporcione la facccion GEMCO</Col> |
||||
<Col xs={3}> |
||||
<CurrencyFormat |
||||
onValueChange={(values: any) => { |
||||
const { value } = values |
||||
setFraccion(value) |
||||
}} |
||||
format={'######## ##'} |
||||
value={Fraccion} |
||||
displayType={'input'} |
||||
style={{ |
||||
fontSize: '18px', |
||||
backgroundColor: '#F1EEF9', |
||||
border: '2px solid #5923F6', |
||||
color: '#5923F6', |
||||
width: '120px', |
||||
textAlign: 'right', |
||||
borderRadius: '10px' |
||||
}} |
||||
/> |
||||
</Col> |
||||
<Col xs={3}> |
||||
<Button |
||||
onClick={() => { |
||||
saveFraccion() |
||||
}} |
||||
> |
||||
Guardar |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</Modal.Body> |
||||
</Modal> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
const saveFraccion = () => { |
||||
DSAmazon.GetValidaFraccion(Fraccion) |
||||
.then((response) => { |
||||
if (response.data.respuesta === 'Si') { |
||||
const data: DTO2096Fraccion = { |
||||
id: props.IDDetail, |
||||
fraccion: Fraccion |
||||
} |
||||
DSAmazon.SetFraccion(data) |
||||
.then((response) => { |
||||
setShowModal(false) |
||||
setHeader('Confirmacion') |
||||
setMsg('La descripcion se ha guardado correctamente') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error' + e.message.toString()) |
||||
}) |
||||
} else { |
||||
alert( |
||||
'Esa fraccion no existe, favor de verificarla antes de poder guardar...' |
||||
) |
||||
return |
||||
} |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error' + e.message.toString()) |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Form.Control |
||||
as="select" |
||||
className="form-select form-select-sm" |
||||
onChange={(e) => changeValidacion(parseInt(e.target.value))} |
||||
value={Validacion} |
||||
> |
||||
<option value="0"> </option> |
||||
<option value="1"> = </option> |
||||
<option value="2"> != </option> |
||||
</Form.Control> |
||||
<Modal |
||||
show={showModal} |
||||
onHide={() => { |
||||
setShowModal(false) |
||||
}} |
||||
size={'sm'} |
||||
dialogClassName={'modal-50w'} |
||||
> |
||||
<Modal.Body> |
||||
<Row> |
||||
<Col xs={2}></Col> |
||||
<Col xs={4}>Proporcione la facccion GEMCO {props.IDInvoice}</Col> |
||||
<Col xs={3}> |
||||
<CurrencyFormat |
||||
onValueChange={(values: any) => { |
||||
const { value } = values |
||||
setFraccion(value) |
||||
}} |
||||
|
||||
format={'######## ##'} |
||||
value={Fraccion} |
||||
displayType={'input'} |
||||
style={{ |
||||
fontSize: '18px', |
||||
backgroundColor: '#F1EEF9', |
||||
border: '2px solid #5923F6', |
||||
color: '#5923F6', |
||||
width: '120px', |
||||
textAlign: 'right', |
||||
borderRadius: '10px' |
||||
}} |
||||
/> |
||||
{/* <PatternFormat value={Fraccion} format="####### ###" allowEmptyFormatting mask="_" />; */} |
||||
</Col> |
||||
<Col xs={3}> |
||||
<Button |
||||
onClick={() => { |
||||
saveFraccion() |
||||
}} |
||||
> |
||||
Guardar |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</Modal.Body> |
||||
</Modal> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
@ -0,0 +1,227 @@ |
||||
import * as React from 'react' |
||||
import { IconContext } from 'react-icons' |
||||
import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa' |
||||
import { ImCross } from 'react-icons/im' |
||||
import { ComboDescripcion } from '../Components/ComboSelect/ComboDescripcion' |
||||
import { ComboFraccion } from '../Components/ComboSelect/ComboFraccion' |
||||
import { TextBoxFraccion } from '../Components/TextBox/TextBoxFraccion' |
||||
import I2096Detail from '../Interfaces/I2096Detail' |
||||
|
||||
export interface IRtpAmazonPendingInvoivesDetailProps { |
||||
IDMaster: number |
||||
detail: I2096Detail |
||||
} |
||||
|
||||
export default function RtpAmazonPendingInvoivesDetail( |
||||
props: IRtpAmazonPendingInvoivesDetailProps |
||||
) { |
||||
const openLink = (item: string) => { |
||||
window.open('https://www.amazon.com/dp/' + item) |
||||
} |
||||
|
||||
|
||||
const parentFunction = (fraccion: string) => { |
||||
alert('update') |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<tr> |
||||
<th |
||||
style={{ |
||||
width: '50px', |
||||
backgroundColor: '#FFFFFF' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
|
||||
</th> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center', |
||||
cursor: 'pointer' |
||||
}} |
||||
className="DetailData" |
||||
onClick={() => openLink(props.detail.itemId)} |
||||
> |
||||
{props.detail.itemId} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'right' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.itemDescription} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'right' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.pedimentoDescription} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.destinationHTSCode} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.validaFraccionOriginal === 0 ? ( |
||||
<IconContext.Provider |
||||
value={{ |
||||
color: 'orange', |
||||
size: '20px' |
||||
}} |
||||
> |
||||
<FaQuestionCircle /> |
||||
</IconContext.Provider> |
||||
) : props.detail.validaFraccionOriginal === 1 ? ( |
||||
<IconContext.Provider |
||||
value={{ |
||||
color: 'green', |
||||
size: '20px' |
||||
}} |
||||
> |
||||
<FaCheckCircle /> |
||||
</IconContext.Provider> |
||||
) : ( |
||||
<IconContext.Provider |
||||
value={{ |
||||
color: 'red', |
||||
size: '20px' |
||||
}} |
||||
> |
||||
<ImCross /> |
||||
</IconContext.Provider> |
||||
)} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
<ComboFraccion |
||||
IDInvoice={props.IDMaster} |
||||
IDDetail={props.detail.id} |
||||
FraccionOriginal={props.detail.destinationHTSCode} |
||||
parentFunction={parentFunction} |
||||
/> |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
<TextBoxFraccion |
||||
Fraccion={ |
||||
props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : '' |
||||
} |
||||
/> |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
<ComboDescripcion |
||||
IDDetail={props.detail.id} |
||||
DescripcionOriginal={props.detail.pedimentoDescription} |
||||
/> |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.descripcionGEMCO} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.countryOfOrigin} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'right' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.productGroup} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'right' |
||||
}} |
||||
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.netWeightUnitOfMeasure} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.actualUnitCostMonetaryAmount} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
textAlign: 'center' |
||||
}} |
||||
className="DetailData" |
||||
> |
||||
{props.detail.totalUnitValueMonetaryAmount} |
||||
</td> |
||||
</tr> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||
import I2096Headers from '../../../../Components/Clientes/Amazon/Interfaces/I2096Header'; |
||||
const Invoice: I2096Headers[] = [] |
||||
const initialState = { Invoice } |
||||
|
||||
export const AmazonInvoicesSlice = createSlice({ |
||||
name: 'AmazonInvoices', |
||||
initialState: initialState, |
||||
reducers: { |
||||
populateInvoices : (state, action: PayloadAction<I2096Headers[]>) => { |
||||
action.payload.forEach(newItem => { |
||||
var Existe = state.Invoice.find(function(onMemoryItem) { |
||||
return onMemoryItem.id === newItem.id; |
||||
}); |
||||
if (!Existe) state.Invoice.push(newItem) |
||||
}) |
||||
}, |
||||
addInvoice : (state, action: PayloadAction<I2096Headers>) => { |
||||
var Existe = state.Invoice.find(function(item) { |
||||
return item.id === action.payload.id; |
||||
}); |
||||
if (!Existe) state.Invoice.push(action.payload) |
||||
}, |
||||
updateInvoice : (state, action: PayloadAction<I2096Headers>) => { |
||||
const i = state.Invoice.findIndex(_element => _element.id === action.payload.id); |
||||
if (i > -1) state.Invoice[i] = action.payload; |
||||
else state.Invoice.push(action.payload); |
||||
}, |
||||
updateInvoiceDetail : (state, action: PayloadAction<I2096Headers>) => { |
||||
const i = state.Invoice.findIndex(_element => _element.id === action.payload.id); |
||||
if (i > -1) state.Invoice[i] = action.payload; |
||||
else state.Invoice.push(action.payload); |
||||
}, |
||||
deleteInvoice : (state, action: PayloadAction<number>) => { |
||||
const newArr = state.Invoice.filter(data => data.id != action.payload); |
||||
state.Invoice=newArr |
||||
}, |
||||
}, |
||||
}) |
||||
|
||||
export const { addInvoice, populateInvoices, updateInvoice, deleteInvoice } = AmazonInvoicesSlice.actions; |
||||
export default AmazonInvoicesSlice.reducer; |
||||
Loading…
Reference in new issue