Cambiar el campo clave de pedimento por un select

src/Components/Corresponsales/TraficoCorresponsales.tsx

@@ -115,6 +115,8 @@ import { ITiposMercancias } from '../../Interfaces/Catalogos/ICatTiposMercancias
 import axios from 'axios'
 import { TargetURL } from '../../Constants/TargetURL'
 import CentrosCostosService from '../../Services/Catalogos/CentrosCostos.Service'
+import ClavesPedimentosService from '../../Services/Catalogos/ClavesPedimentos.Service'
+import { ICatClavesPedimentos } from '../../Interfaces/Catalogos/ICatClavesPedimentos'
 
 interface IProps {
   IDTrafico: number
@@ -310,7 +312,7 @@ export default function TraficoCorresponsales (props:IProps) {
   const [EncabezadoPedimento1, setEncabezadoPedimento1] = useState("Pedimento");
   const [EncabezadoPedimento2, setEncabezadoPedimento2] = useState(".");
   const [CentroCostos, setCentroCostos] = useState<string>('');
-
+  const [ClavesPedimentos, setClavesPedimentos] = useState<ICatClavesPedimentos[]>([])
   const FechaRegistro = currentDate()
   const msgColor = 'primary'
 
@@ -522,6 +524,14 @@ export default function TraficoCorresponsales (props:IProps) {
   }
 
   const LoadEverything = () => {
+    ClavesPedimentosService.getAllClavesPedimentos()
+    .then(response => setClavesPedimentos(response.data))
+    .catch((e: Error) => {
+      setHeader('Error')
+      setMsg('Ocurrio un error: ' + e)
+      setShowMsg(true)
+      return
+    })
     CorresponsalesDataService.getAll()
       .then((response) => {
         dispatch(populateCatCorresponsales(response.data))
@@ -1921,15 +1931,26 @@ export default function TraficoCorresponsales (props:IProps) {
                               <Form.Label>
                                 Clave
                                 <Form.Control
-                                  type="text"
-                                  id="Clave"
-                                  size="sm"
+                                  as="select"
+                                  id="CmbClavePedimento"
+                                  onChange={(e) => {
+                                    setClavePedimento(e.target.value)
+                                  }}
+                                  className="form-select form-select-sm"
                                   value={ClavePedimento}
-                                  disabled={
-                                    Depto !== 'Corresponsalias' ? true : false
-                                  }
-                                  onChange={(e) => {if(e.target.value.length <= 2) setClavePedimento(e.target.value)}}
-                                /> 
+                                  disabled={(Depto !== 'Corresponsalias')}
+                                >
+                                  <option value="-Seleccione-">-Seleccione-</option>
+                                  {ClavesPedimentos
+                                    ? ClavesPedimentos.map((item, index) => {
+                                        return (
+                                          <option key={item.id} value={item.clave}>
+                                            {item.clave}
+                                          </option>
+                                        )
+                                      })
+                                    : ''}
+                                </Form.Control> 
                               </Form.Label>
                             </Col>
                             <Col sm={3} md={3}>

src/Interfaces/Catalogos/ICatClavesPedimentos.ts

@@ -0,0 +1,5 @@
+export interface ICatClavesPedimentos{
+    id: number;
+    clave: string;
+    descripcion: string;
+}

src/Services/Catalogos/ClavesPedimentos.Service.ts

@@ -0,0 +1,10 @@
+import http from "../common/http-common";
+import { ICatClavesPedimentos } from "../../Interfaces/Catalogos/ICatClavesPedimentos";
+
+class ClavesPedimentosService{
+    getAllClavesPedimentos(){
+        return http.get<ICatClavesPedimentos[]>('/Catalogos/CatClavesPedimentos/GetAll');
+    }
+}
+
+export default new ClavesPedimentosService();