Merge remote-tracking branch 'origin/desarrollo' into indev

src/views/catalogos/productos/ProductoDetalle.jsx

@@ -1,85 +1,56 @@
-import { Form, Input, Button, Spin, Space, Row, Col } from 'antd'
-import { useEffect, useMemo, useState } from 'react'
-import HttpService from '../../../services/httpService'
-import { respuestas } from '../../../utilities'
-import { useNavigate } from 'react-router-dom'
-import { useQuery, useModel } from '../../../hooks'
-import { commonRules } from '../../../constants/rules'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-
-// const selectores = {
-//   consejoElectoral: {
-//     name: "v1/consejo-electoral",
-//   },
-//   distrito: {
-//     name: "v1/distrito",
-//   },
-//   estado: {
-//     name: "v1/estado",
-//   },
-//   municipio: {
-//     name: "v1/municipio",
-//   },
-//   participantePolitico: {
-//     name: "v1/participante-politico",
-//   },
-//   seccion: {
-//     name: "v1/seccion",
-//   },
-//   tipoAgenda: {
-//     name: "v1/agenda/tipo-agenda",
-//   },
-//   usuario: {
-//     name: "v1/usuario",
-//   }
-// }
+import { Form, Input, Button, Spin, Space, Row, Col } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import HttpService from "../../../services/httpService";
+import { respuestas } from "../../../utilities";
+import { useNavigate } from "react-router-dom";
+import { useQuery, useModel } from "../../../hooks";
+import { commonRules } from "../../../constants/rules";
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 
 const endpoints = {
   producto: "producto",
 };
 
 const ProductoDetalle = () => {
-  const [form] = Form.useForm()
-  const navigate = useNavigate()
-  const [loading, setLoading] = useState(false)
-  const query = useQuery()
-  const id = query.get("id")
-  const [request, setRequest] = useState({})
-
-  // const extraParams = useMemo(() => ({
-  //   idAgenda: id,
-  // }), [id])
-
-  const requestParams = useMemo(() => ({
-    name: endpoints.producto,
-    expand: 'subproductos',
-    id,
-    // extraParams
-  }), [id])
-
-
-  const { model, modelLoading } = useModel(request)
+  const [form] = Form.useForm();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const query = useQuery();
+  const id = query.get("id");
+  const [request, setRequest] = useState({});
+
+  const requestParams = useMemo(
+    () => ({
+      name: endpoints.producto,
+      expand: "subproductos",
+      id,
+    }),
+    [id]
+  );
+
+  const { model, modelLoading } = useModel(request);
 
   useEffect(() => {
     if (id) {
-      setRequest(requestParams)
+      setRequest(requestParams);
     }
     return () => {
-      setRequest({})
-    }
-  }, [id, requestParams])
+      setRequest({});
+    };
+  }, [id, requestParams]);
 
   useEffect(() => {
     if (model) {
-      form.setFieldsValue({ //seteo cuando son varios
+      form.setFieldsValue({
+        //seteo cuando son varios
         ...model,
         subproductos: model.subproductos.map((subproducto, index) => ({
           ...subproducto,
-          key: index
-        }))
-      })
+          key: index,
+        })),
+      });
     }
-  }, [form, model])
+  }, [form, model]);
 
   const onFinish = async (values) => {
     try {
@@ -90,13 +61,13 @@ const ProductoDetalle = () => {
       };
 
       if (id) {
-        body.id = id
+        body.id = id;
       }
 
       const res = await HttpService.post(`${endpoints.producto}/guardar`, body);
       respuestas(res);
       if (res?.status === 200) {
-        navigate('/administracion/catalogos/productos')
+        navigate("/administracion/catalogos/productos");
       }
     } catch (error) {
       console.log(error);
@@ -104,13 +75,15 @@ const ProductoDetalle = () => {
     } finally {
       setLoading(false);
     }
-  }
+  };
 
   if (modelLoading) {
-    return <Spin
-      size="large"
-      style={{ display: "block", margin: "auto", marginTop: "50px" }}
-    />
+    return (
+      <Spin
+        size="large"
+        style={{ display: "block", margin: "auto", marginTop: "50px" }}
+      />
+    );
   }
 
   const handleKeyPress = (event) => {
@@ -126,7 +99,7 @@ const ProductoDetalle = () => {
       name="basic"
       form={form}
       onFinish={onFinish}
-      onFinishFailed={() => { }}
+      onFinishFailed={() => {}}
     >
       <Row gutter={16}>
         <Col span={24}>
@@ -136,9 +109,7 @@ const ProductoDetalle = () => {
           <Form.Item
             label="Nombre"
             name="nombre"
-            rules={[
-              commonRules.requerido,
-            ]}
+            rules={[commonRules.requerido]}
           >
             <Input />
           </Form.Item>
@@ -147,11 +118,9 @@ const ProductoDetalle = () => {
           <Form.Item
             label="ID Sagarhpa"
             name="idSagarhpa"
-            rules={[
-              commonRules.requerido,
-            ]}
+            rules={[commonRules.requerido]}
           >
-            <Input onKeyPress={handleKeyPress} maxLength={9}/>
+            <Input onKeyPress={handleKeyPress} maxLength={9} />
           </Form.Item>
         </Col>
         <Col span={24}>
@@ -162,17 +131,36 @@ const ProductoDetalle = () => {
             {(fields, { add, remove }) => (
               <>
                 {fields.map(({ key, name, ...restField }) => (
-                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'nombre']}
-                      rules={[commonRules.requerido]}
-                      style={{ width: '350px' }}
-                    >
-                      <Input placeholder="Nombre del Subproducto" />
-                    </Form.Item>
-                    <MinusCircleOutlined onClick={() => remove(name)} />
-                  </Space>
+                  <Row
+                    key={key}
+                    style={{ display: "flex", marginBottom: 12 }}
+                    align="baseline"
+                    gutter={[10, 10]}
+                  >
+                    <Col md={8} xs={24} lg={6}>
+                      <Form.Item
+                        {...restField}
+                        name={[name, "nombre"]}
+                        label="Nombre del Subproducto"
+                        rules={[commonRules.requerido]}
+                      >
+                        <Input placeholder="Nombre del Subproducto" />
+                      </Form.Item>
+                    </Col>
+                    <Col md={8} xs={24} lg={6}>
+                      <Form.Item
+                        {...restField}
+                        name={[name, "idSagarhpa"]}
+                        label="ID Subproducto"
+                        rules={[commonRules.requerido]}
+                      >
+                        <Input onKeyPress={handleKeyPress} maxLength={9} />
+                      </Form.Item>
+                    </Col>
+                    <Col md={8} xs={24} lg={6} style={{ marginTop: 35 }}>
+                      <MinusCircleOutlined onClick={() => remove(name)} />
+                    </Col>
+                  </Row>
                 ))}
                 <Form.Item>
                   <Button
@@ -187,6 +175,7 @@ const ProductoDetalle = () => {
             )}
           </Form.List>
         </Col>
+
         <Col span={24}>
           <Form.Item>
             <Button
@@ -201,7 +190,7 @@ const ProductoDetalle = () => {
         </Col>
       </Row>
     </Form>
-  )
-}
+  );
+};
 
-export default ProductoDetalle
+export default ProductoDetalle;