src/components/DefaultLayout.jsx

@@ -0,0 +1,12 @@
+import { Layout } from "antd";
+import React from "react";
+
+const DefaultLayout = ({ children }) => {
+  return (
+    <Layout style={{ backgroundColor: "white", padding: "0 24px 24px" }}>
+      {children}
+    </Layout>
+  );
+};
+
+export default DefaultLayout;

src/components/index.js

@@ -12,6 +12,7 @@ import ViewLoading from "./ViewLoading";
 import MediaCards from "./MediaCards";
 import InputPass from "./InputPass";
 import Selector from "./Selector";
+import DefaultLayout from "./DefaultLayout";
 
 export {
   Tabla,
@@ -27,5 +28,6 @@ export {
   ViewLoading,
   MediaCards,
   InputPass,
-  ArbolPermisos
+  ArbolPermisos,
+  DefaultLayout,
 };

src/views/catalogos/municipios/MunicipioDetalle.jsx

@@ -1,11 +1,11 @@
-import { Form, Input, Button, Spin, Row, Col } from 'antd';
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { respuestas } from '../../../utilities'
-import HttpService from '../../../services/httpService';
-import { useQuery, useModel } from '../../../hooks';
-import { commonRules } from '../../../constants/rules';
-import { Select } from "../../../components";
+import { Form, Input, Button, Row, Col, Select as AntSelect } from "antd";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { respuestas } from "../../../utilities";
+import HttpService from "../../../services/httpService";
+import { useQuery, useModel } from "../../../hooks";
+import { commonRules } from "../../../constants/rules";
+import { DefaultLayout, Select } from "../../../components";
 
 const endpoints = {
   municipio: "municipio",
@@ -19,18 +19,26 @@ const MunicipioDetalle = () => {
   const id = query.get("id");
   const [estado, setEstado] = useState("");
   const [timer, setTimer] = useState(null);
-  const [request, setRequest] = useState({})
+  const [request, setRequest] = useState({});
+  const [niveles, setNiveles] = useState([]);
 
-  const estadoExtraParams = useMemo(() => ({
-    idEstado: id,
-  }), [id])
+  const estadoExtraParams = useMemo(
+    () => ({
+      idEstado: id,
+    }),
+    [id]
+  );
 
-  const requestParams = useMemo(() => ({
-    name: endpoints.municipio,
-    id,
-  }), [id])
+  const requestParams = useMemo(
+    () => ({
+      name: endpoints.municipio,
+      expand: "estado,niveles",
+      id,
+    }),
+    [id]
+  );
 
-  const { model, modelLoading } = useModel(request)
+  const { model, modelLoading } = useModel(request);
 
   const onFinish = async (values) => {
     try {
@@ -41,13 +49,16 @@ const MunicipioDetalle = () => {
       };
 
       if (id) {
-        body.id = id
+        body.id = id;
       }
 
-      const res = await HttpService.post(`${endpoints.municipio}/guardar`, body);
+      const res = await HttpService.post(
+        `${endpoints.municipio}/guardar`,
+        body
+      );
       respuestas(res);
       if (res?.status === 200) {
-        navigate('/administracion/catalogos/municipios')
+        navigate("/administracion/catalogos/municipios");
       }
     } catch (error) {
       console.log(error);
@@ -55,7 +66,7 @@ const MunicipioDetalle = () => {
     } finally {
       setLoading(false);
     }
-  }
+  };
 
   const onSearch = (value) => {
     clearTimeout(timer);
@@ -65,75 +76,112 @@ const MunicipioDetalle = () => {
     setTimer(newTimer);
   };
 
+  const getNiveles = useCallback(async () => {
+    try {
+      const res = await HttpService.get("nivel");
+      if (res.status === 200) {
+        setNiveles(
+          res?.resultado?.map((nivel) => ({
+            value: nivel?.id,
+            label: nivel?.nombre,
+          }))
+        );
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
 
   useEffect(() => {
     if (id) {
-      setRequest(requestParams)
+      setRequest(requestParams);
     }
     return () => {
-      setRequest({})
-    }
-  }, [id, requestParams])
+      setRequest({});
+    };
+  }, [id, requestParams]);
 
   useEffect(() => {
     if (model) {
-      form.setFieldsValue({ 
+      form.setFieldsValue({
         ...model,
-      })
+      });
+      let nivelesGuardados = [];
+      if (model?.niveles?.length > 0) {
+        nivelesGuardados = model?.niveles?.map((nivel) => nivel?.id);
+        form.setFieldValue("niveles", nivelesGuardados);
+      }
     }
-  }, [form, model])
+  }, [form, model]);
+
+  useEffect(() => {
+    getNiveles();
+  }, [getNiveles]);
 
   return (
-    <Form
-      layout="vertical"
-      name="basic"
-      form={form}
-      onFinish={onFinish}
-      onFinishFailed={() => {}}
-    >
-      <Row gutter={16}>
-        <Col span={24}>
-          <h2>Información del Municipio</h2>
-        </Col>
-        <Col md={8} xs={12}>
-          <Form.Item
-            label="Nombre"
-            name="nombre"
-            rules={[commonRules.requerido]}
-          >
-            <Input />
-          </Form.Item>
-        </Col>
-        <Col md={8} xs={12}>
-          <Form.Item
-            label="Estado"
-            name="idEstado"
-            rules={[commonRules.requerido]}
-          >
-            <Select
-              modelsParams={{ name: 'estado', ordenar: 'nombre' }}
-              labelProp="nombre"
-              valueProp="id"
-              append={form.getFieldValue('idEstado') ? [{ id: form.getFieldValue('idEstado'), nombre: form.getFieldValue('estado') }] : []}
-              onSearch={onSearch}
-              extraParams={estadoExtraParams}
-            />
-          </Form.Item>
-        </Col>
-        <Col span={24}>
-          <Form.Item>
-            <Button
-              type="primary"
-              htmlType="submit"
-              style={{ marginTop: "30px" }}
-              loading={loading}
+    <DefaultLayout>
+      <Form
+        layout="vertical"
+        name="basic"
+        form={form}
+        onFinish={onFinish}
+        onFinishFailed={() => {}}
+      >
+        <Row gutter={[10, 10]}>
+          <Col span={24}>
+            <h2>Información del Municipio</h2>
+          </Col>
+          <Col span={24} md={12}>
+            <Form.Item
+              label="Nombre"
+              name="nombre"
+              rules={[commonRules.requerido]}
+            >
+              <Input size="large" />
+            </Form.Item>
+          </Col>
+          <Col span={24} md={12}>
+            <Form.Item
+              label="Estado"
+              name="idEstado"
+              rules={[commonRules.requerido]}
             >
-              Guardar
-            </Button>
-          </Form.Item>
-        </Col>
-      </Row>
-    </Form>
+              <Select
+                size="large"
+                modelsParams={{ name: "estado", ordenar: "nombre" }}
+                labelProp="nombre"
+                valueProp="id"
+                append={[model?.estado]}
+                onSearch={onSearch}
+                extraParams={estadoExtraParams}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item label="Estado" name="niveles">
+              <AntSelect
+                style={{ width: "100%" }}
+                options={niveles}
+                mode="multiple"
+              />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item>
+              <Button
+                size="large"
+                type="primary"
+                htmlType="submit"
+                loading={loading}
+                style={{ marginTop: "30px" }}
+              >
+                Guardar
+              </Button>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </DefaultLayout>
   );
 };