Added Catalogo de conceptos para consultar a Amazon

RptwebMission
alfonso 10 months ago
parent 4168ed846e
commit a89472eb7d
  1. 2
      .vscode/settings.json
  2. 501
      src/Components/Clientes/Amazon/Catalogos/CatConceptosConsulta.tsx
  3. 8
      src/Components/Clientes/Amazon/Interfaces/I2096CatConceptosConsulta.ts
  4. 15
      src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico.tsx
  5. 7
      src/Components/Clientes/Amazon/Services/Amazon.Services.ts
  6. 7
      src/index.tsx
  7. 50
      src/store/features/Clientes/2096/AmazonCatConceptosConsulta.ts
  8. 4
      src/store/store.ts

@ -1,3 +1,3 @@
{ {
"workbench.colorTheme": "Abyss" "workbench.colorTheme": "Infinity Dark Theme Eye Friendly Colors"
} }

@ -0,0 +1,501 @@
import React, { FC, useEffect, useState } from 'react'
import ITabulador from '../../../../Interfaces/Catalogos/ITabulador'
import ITabuladorConceptos from '../../../../Interfaces/Catalogos/ITabuladorConceptos'
import DTOConceptos from '../../../../DTO/Utils/DTOConceptos'
import CTabDataService from '../../../../Services/Corresponsalias/Corresponsales.Tabuladores.Services'
//import CTabDetDataService from '../../../../Services/Corresponsalias/Corresponsales.Tabuladores.Detalle.Sevices'
import AmazonSrvDataService from '../Services/Amazon.Services'
import ClientesDataService from '../../../../Services/Catalogos/Clientes.Services'
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
import { ControlledInput } from '../../../Utils/ControlledInput/ControlledInput'
import DataTable from 'react-data-table-component'
import {
Alert,
Button,
Card,
Col,
Container,
FloatingLabel,
Form,
Modal,
Row
} from 'react-bootstrap'
import { IconContext } from 'react-icons'
import 'react-data-table-component-extensions/dist/index.css'
import {
BsCheckCircleFill,
BsPlusSquareFill,
BsXCircleFill
} from 'react-icons/bs'
import IClientes from '../../../../Interfaces/Catalogos/IClientes'
import { FcTimeline } from 'react-icons/fc'
import { FaEraser, FaTimesCircle } from 'react-icons/fa'
import ICat2096CatConceptosConsulta from '../Interfaces/I2096CatConceptosConsulta'
import { populateCatConcetosConsultas, updateCatConcetosConsulta } from '../../../../store/features/Clientes/2096/AmazonCatConceptosConsulta'
import { useDispatch } from 'react-redux'
export interface ICatConceptosConsultaProps {}
export default function CatConceptosConsulta(
props: ICatConceptosConsultaProps
) {
const [UserId, setUserId] = useState(() => {
const stickyValue = window.localStorage.getItem('UserId')
return stickyValue !== null ? JSON.parse(stickyValue) : 0
})
const dispatch = useDispatch()
const [Tabulador, setTabulador] = useState(0)
const [Id, setId] = useState(0)
const [Concepto, setConcepto] = useState(0)
const [Cliente, setCliente] = useState(0)
const [Activo, setActivo] = useState(0)
const [Clientes, setClientes] = useState<Array<IClientes>>()
const [Siglas, setSiglas] = useState('')
const [ShortDescription, setShortDescription] = useState('')
const [SpanishDescription, setSpanishDescription] = useState('')
const [SpanishDescriptionWide, setSpanishDescriptionWide] = useState('')
const [DetalleConceptos, setDetalleConceptos] = useState<
ITabuladorConceptos[]
>([])
const [CatConceptos, setCatConceptos] = useState<
ICat2096CatConceptosConsulta[]
>([])
const [Tabuladores, setTabuladores] = useState<ITabulador[]>([])
const [AllTabuladores, setAllTabuladores] = useState<ITabulador[]>([])
const [Costo, setCosto] = useState('')
const [header, setHeader] = useState('')
const [msgColor, setMsgColor] = React.useState('primary')
const [show, setShowMsg] = useState(false)
const [msg, setMsg] = useState('')
const [DialogTabs, setDialogTabs] = useState(false)
const colConcepts = [
{
name: 'Activo',
width: '80px',
cell: (row: ICat2096CatConceptosConsulta) => (
<div
onClick={() => {
loadData(row)
}}
>
<IconContext.Provider
value={{ color: row.activo ? 'green' : 'red', size: '20px' }}
>
{row.activo ? <BsCheckCircleFill /> : <BsXCircleFill />}
</IconContext.Provider>
</div>
)
},
{
name: 'Siglas',
width: '80px',
selector: (row: ICat2096CatConceptosConsulta) => row.siglas,
sortable: true
},
{
name: 'Descripcion corta',
width: '300px',
selector: (row: ICat2096CatConceptosConsulta) => row.shortDescription,
wrap: true,
sortable: true
},
{
name: 'Descripcion español',
width: '450px',
selector: (row: ICat2096CatConceptosConsulta) => row.spanishDescription,
wrap: true,
sortable: true
},
{
name: 'Descripcion amplia',
width: '450px',
selector: (row: ICat2096CatConceptosConsulta) =>
row.spanishDescriptionWide,
wrap: true,
sortable: true
}
]
const loadData = (data: ICat2096CatConceptosConsulta) => {
setId(data.id)
setSiglas(data.siglas)
setShortDescription(data.shortDescription)
setSpanishDescription(data.spanishDescription)
setSpanishDescriptionWide(data.spanishDescriptionWide)
setActivo(data.activo ? 1 : 0)
}
const deleteTabulador = () => {
CTabDataService.Delete(Tabulador)
.then((response) => {
if (response.status === 200) {
setHeader('Informativo')
setMsg(response.data.respuesta)
setShowMsg(true)
setDialogTabs(false)
setTabuladores(Tabuladores.filter((data) => data.id != Tabulador))
setAllTabuladores(Tabuladores)
return
}
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}
const loadCatalog = () => {
AmazonSrvDataService.CatConceptosConsultaGET()
.then((response) => {
dispatch(populateCatConcetosConsultas(response.data))
setCatConceptos(response.data)
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}
useEffect(() => {
loadCatalog()
}, [])
useEffect(() => {
if (Cliente > 0) {
setSiglas('')
setTabuladores([])
setDetalleConceptos([])
CTabDataService.GetByCustomer(Cliente)
.then((response) => {
setTabuladores(response.data)
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}
}, [Cliente])
const filtraTabulador = (e: any) => {
if (e.target.value !== '') {
setTabuladores(
AllTabuladores.filter(function (el) {
return el.nombre
.toLocaleLowerCase()
.includes(e.target.value.toLocaleLowerCase())
})
)
} else {
setTabuladores(AllTabuladores)
}
}
const save = () => {
const data: ICat2096CatConceptosConsulta = {
id: Id,
siglas: Siglas,
shortDescription: ShortDescription,
spanishDescription: SpanishDescription,
spanishDescriptionWide: SpanishDescriptionWide,
activo: Activo==1
}
AmazonSrvDataService.CatConceptosConsultaAppend(data)
.then((response) => {
if (response.status === 200) {
loadCatalog()
setHeader('Informativo')
setMsg('La informacion se guardo correctamente')
setShowMsg(true)
return
}
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}
return (
<div>
<Card>
<Card.Body>
<Card style={{ height: '100%' }}>
<Card.Header as="h4">Catalogo de consultas para Amazon</Card.Header>
<Card.Body>
<Container fluid>
<Alert variant="primary">
<Row>
<Col xs={1}>
<FloatingLabel
controlId="floatingInput"
label="Siglas"
className="mb-3"
>
<Form.Control
type="text"
placeholder=""
value={Siglas}
maxLength={4}
onChange={(e) => {
setSiglas(e.target.value)
}}
/>
</FloatingLabel>
</Col>
<Col xs={8}>
<FloatingLabel
controlId="floatingInput"
label="Descripcion corta"
className="mb-3"
>
<Form.Control
type="text"
placeholder="Descripcion corta"
value={ShortDescription}
onChange={(e) => {
setShortDescription(e.target.value)
}}
/>
</FloatingLabel>
</Col>
<Col
xs={1}
style={{
textAlign: 'left',
paddingTop: '5px',
cursor: 'pointer',
paddingLeft: '0px'
}}
onClick={() => {
setTabulador(0)
setSiglas('')
}}
>
<IconContext.Provider
value={{ color: 'orange', size: '25px' }}
>
<FaEraser />
</IconContext.Provider>
</Col>
<Col></Col>
<Col style={{ paddingTop: '20px' }}>
<Button
variant="primary"
size="sm"
style={{ paddingLeft: '10px', paddingRight: '10px' }}
onClick={() => save()}
>
Guardar
</Button>
</Col>
</Row>
<Row>
<Col xs={5}>
<FloatingLabel
controlId="floatingInput"
label="Descripcion en español"
className="mb-3"
>
<Form.Control
as="textarea"
placeholder=""
style={{ height: '100px' }}
value={SpanishDescription}
onChange={(e) => {
setSpanishDescription(e.target.value)
}}
/>
</FloatingLabel>
</Col>
<Col xs={5}>
<FloatingLabel
controlId="floatingInput"
label="Descripcion amplia"
className="mb-3"
>
<Form.Control
as="textarea"
placeholder="Descripcion amplia"
style={{ height: '100px' }}
value={SpanishDescriptionWide}
onChange={(e) => {
setSpanishDescriptionWide(e.target.value)
}}
/>
</FloatingLabel>
</Col>
<Col style={{ paddingTop: '20px' }}>
<FloatingLabel controlId="floatingSelect" label="Activo">
<Form.Select
aria-label="Activo"
value={Activo}
onChange={(e) => {
setActivo(parseInt(e.target.value))
}}
>
<option value="1">Si</option>
<option value="0">No</option>
</Form.Select>
</FloatingLabel>
</Col>
<Col></Col>
</Row>
</Alert>
<Row>
{/* <Col xs={6}>
<Card style={{}}>
<Card.Body>
<Card.Subtitle className="mb-2 text-muted">
<Row>
<Col xs={2} style={{ paddingTop: '8px' }}>
Tabulador
</Col>
<Col xs={10}>
<Form.Control
type="text"
size="sm"
placeholder="Busqueda de tabulador..."
onChange={(e) => {
filtraTabulador(e)
}}
/>
</Col>
</Row>
</Card.Subtitle>
</Card.Body>
</Card>
</Col> */}
<Col xs={12}>
<Card style={{}}>
<Card.Body>
<Card.Subtitle className="mb-2 text-muted">
<Row>
<Col xs={12} style={{ paddingTop: '8px' }}>
<DataTable
noHeader
defaultSortFieldId={'id'}
defaultSortAsc={true}
pagination
highlightOnHover
columns={colConcepts}
data={CatConceptos}
/>
</Col>
<Col xs={9}>
{/* <Form.Control
as="select"
onChange={(e) =>
setConcepto(parseInt(e.target.value))
}
className="form-select form-select-sm"
style={{ fontSize: '17px' }}
>
<option value="0">- Seleccione -</option>
{CatConceptos
? CatConceptos.map((c) => {
return (
<option value={c.id} key={c.id}>
{c.concepto}
</option>
)
})
: null}
</Form.Control> */}
</Col>
<Col style={{ paddingTop: '5px' }}>
{/* <Form.Label
onClick={() => {
addConcept()
}}
style={{ cursor: 'pointer' }}
>
<IconContext.Provider
value={{ color: 'green', size: '30px' }}
>
<BsPlusSquareFill />
</IconContext.Provider>
</Form.Label> */}
</Col>
</Row>
</Card.Subtitle>
{/* <DataTable
noHeader
defaultSortFieldId={'id'}
defaultSortAsc={true}
pagination
highlightOnHover
columns={columnsConcepts}
data={DetalleConceptos}
/> */}
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</Card.Body>
</Card>
</Card.Body>
</Card>
<Modal
show={DialogTabs}
onHide={() => {
setDialogTabs(false)
}}
size="sm"
>
<Modal.Body>
¿Esta seguro de eliminar:
<br /> {Siglas}?
</Modal.Body>
<Modal.Footer>
<Row>
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
<Button
variant="danger"
onClick={deleteTabulador}
size="sm"
style={{ paddingRight: '20px', paddingLeft: '20px' }}
>
Si
</Button>
</Col>
<Col xs={6} style={{ textAlign: 'right' }}>
<Button
variant="secondary"
onClick={() => {
setDialogTabs(false)
}}
size="sm"
>
Cerrar
</Button>
</Col>
</Row>
</Modal.Footer>
</Modal>
<MsgInformativo
show={show}
msg={msg}
header={header}
msgColor={msgColor}
closeToast={() => {
setShowMsg(false)
}}
/>
</div>
)
}

@ -0,0 +1,8 @@
export default interface ICat2096CatConceptosConsulta {
id: number,
siglas: string,
shortDescription: string,
spanishDescription: string,
spanishDescriptionWide: string,
activo: boolean
}

@ -144,18 +144,6 @@ export default function RptConsultaTrafico(props: IRptConsultaTraficoProps) {
if (Obj.max) */ check4Updates(IDInvoice) 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]) { function getReceiver(Cadena: string, char1: string[1], char2: string[1]) {
return Cadena.slice(Cadena.indexOf(char1) + 1, Cadena.lastIndexOf(char2)) return Cadena.slice(Cadena.indexOf(char1) + 1, Cadena.lastIndexOf(char2))
} }
@ -191,9 +179,6 @@ export default function RptConsultaTrafico(props: IRptConsultaTraficoProps) {
<th></th> <th></th>
<th style={{ width: '50px' }}>id</th> <th style={{ width: '50px' }}>id</th>
<th style={{ width: '50px' }}></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: '100px' }}>Referencia</th>
<th style={{ width: '80px' }}>Commercial Invoice Date</th> <th style={{ width: '80px' }}>Commercial Invoice Date</th>
<th style={{ width: '250px' }}>Invoice Number</th> <th style={{ width: '250px' }}>Invoice Number</th>

@ -26,6 +26,7 @@ import DTO2096TraficoConsultaAmazonHeader from '../DTO/DTO2096TraficoConsultaAma
import DTO2096DataTraficoConsulta from '../DTO/DTO2096DataTraficoConsulta' import DTO2096DataTraficoConsulta from '../DTO/DTO2096DataTraficoConsulta'
import I2096CatGrupoRegulatorio from '../Interfaces/I2096CatGrupoRegulatorio' import I2096CatGrupoRegulatorio from '../Interfaces/I2096CatGrupoRegulatorio'
import DTOAmazonSegragacion from '../DTO/DTOAmazonSegragacion' import DTOAmazonSegragacion from '../DTO/DTOAmazonSegragacion'
import ICat2096CatConceptosConsulta from '../Interfaces/I2096CatConceptosConsulta'
class AmazonDataService { class AmazonDataService {
AmazonPendingClasificationInvoiceGET() { AmazonPendingClasificationInvoiceGET() {
@ -286,5 +287,11 @@ class AmazonDataService {
DeleteNoParte(id: number) { DeleteNoParte(id: number) {
return http.delete<Boolean>(`/AmazonInvoice/DeleteNoParte?id=${id}`) return http.delete<Boolean>(`/AmazonInvoice/DeleteNoParte?id=${id}`)
} }
CatConceptosConsultaGET() {
return http.get<ICat2096CatConceptosConsulta[]>(`/AmazonInvoice/Catalogos/CatConceptosConsultaGET`)
}
CatConceptosConsultaAppend(data: ICat2096CatConceptosConsulta) {
return http.post<ICat2096CatConceptosConsulta>(`/AmazonInvoice/Catalogos/CatConceptosConsultaAppend`, data)
}
} }
export default new AmazonDataService() export default new AmazonDataService()

@ -65,6 +65,7 @@ import RptConsultaTrafico from './Components/Clientes/Amazon/Reportes/ConsultaTr
import RptMonitoreoFacturasPagadasAmazon from './Components/Reportes/RptMonitoreoFacturasPagadasAmazon' import RptMonitoreoFacturasPagadasAmazon from './Components/Reportes/RptMonitoreoFacturasPagadasAmazon'
import CatFraccionesVulnerables from './Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables' import CatFraccionesVulnerables from './Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables'
import RptFacturasFraccion from './Components/Reportes/RptContsFacturasFraccion' import RptFacturasFraccion from './Components/Reportes/RptContsFacturasFraccion'
import CatConceptosConsulta from './Components/Clientes/Amazon/Catalogos/CatConceptosConsulta'
require(`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`) require(`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)
@ -239,12 +240,14 @@ ReactDOM.render(
path="/RptPedimentosCruces06" path="/RptPedimentosCruces06"
element={<RptPedimentosCruces06 />} element={<RptPedimentosCruces06 />}
/> />
<Route <Route
path="/RptConsFacturasFraccion" path="/RptConsFacturasFraccion"
element={<RptFacturasFraccion />} element={<RptFacturasFraccion />}
/> />
<Route
path="/CatConceptosConsulta"
element={<CatConceptosConsulta />}
/>
<Route path="*" element={<PageNotFound />} /> <Route path="*" element={<PageNotFound />} />
</Route> </Route>
</Routes> </Routes>

@ -0,0 +1,50 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import ICat2096CatConceptosConsulta from '../../../../Components/Clientes/Amazon/Interfaces/I2096CatConceptosConsulta'
const CatConcetosConsulta: ICat2096CatConceptosConsulta[] = []
const initialState = { CatConcetosConsulta }
export const CatConceptosConsultaSlice = createSlice({
name: 'CatConceptosConsulta',
initialState: initialState,
reducers: {
initializeCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => {
state.CatConcetosConsulta = action.payload
},
populateCatConcetosConsultas: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => {
action.payload.forEach((newItem) => {
var Existe = state.CatConcetosConsulta.find(function (onMemoryItem) {
return onMemoryItem.id === newItem.id
})
if (!Existe) state.CatConcetosConsulta.push(newItem)
})
},
addCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => {
var Existe = state.CatConcetosConsulta.find(function (item) {
return item.id === action.payload.id
})
if (!Existe) state.CatConcetosConsulta.push(action.payload)
},
updateCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => {
const i = state.CatConcetosConsulta.findIndex(
(_element) => _element.id === action.payload.id
)
if (i > -1) state.CatConcetosConsulta[i] = action.payload
else state.CatConcetosConsulta.push(action.payload)
},
updateCatConcetosConsultaDetail: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => {
const i = state.CatConcetosConsulta.findIndex(
(_element) => _element.id === action.payload.id
)
if (i > -1) state.CatConcetosConsulta[i] = action.payload
else state.CatConcetosConsulta.push(action.payload)
},
deleteCatConcetosConsulta: (state, action: PayloadAction<number>) => {
const newArr = state.CatConcetosConsulta.filter((data) => data.id != action.payload)
state.CatConcetosConsulta = newArr
}
}
})
export const { initializeCatConcetosConsulta, addCatConcetosConsulta, populateCatConcetosConsultas, updateCatConcetosConsulta, deleteCatConcetosConsulta } =
CatConceptosConsultaSlice.actions
export default CatConceptosConsultaSlice.reducer

@ -18,6 +18,7 @@ import CorresponsalesCuentasComplementariasEstatusSlice from './features/Corresp
import AmazonInvoicesSlice from './features/Clientes/2096/AmazonInvoices' import AmazonInvoicesSlice from './features/Clientes/2096/AmazonInvoices'
import AmazonNoPartesSlice from './features/Clientes/2096/AmazonNoPartes' import AmazonNoPartesSlice from './features/Clientes/2096/AmazonNoPartes'
import AmazonTraficoConsultaSlice from './features/Clientes/2096/AmazonTraficoConsulta' import AmazonTraficoConsultaSlice from './features/Clientes/2096/AmazonTraficoConsulta'
import AmazonCatConceptosConsulta from './features/Clientes/2096/AmazonCatConceptosConsulta'
@ -41,7 +42,8 @@ export const store = configureStore({
CCueCompEstatus : CorresponsalesCuentasComplementariasEstatusSlice, CCueCompEstatus : CorresponsalesCuentasComplementariasEstatusSlice,
AmazonInvoices : AmazonInvoicesSlice, AmazonInvoices : AmazonInvoicesSlice,
AmazonNoPartes: AmazonNoPartesSlice, AmazonNoPartes: AmazonNoPartesSlice,
AmazonTraficoConsulta: AmazonTraficoConsultaSlice AmazonTraficoConsulta: AmazonTraficoConsultaSlice,
AmazonCatConceptosConsulta: AmazonCatConceptosConsulta
} }
}) })

Loading…
Cancel
Save