laud_lv_react/src/views/administracion/dependencias/DependenciaDetalle.js

import React, { useState, useEffect } from "react";
import { Form, Button, Row, Col, Input, Modal, Table, Typography, Select } from "antd";
import { SaveOutlined, PlusOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { useQuery, useModels } from "../../../hooks";
import { useHistory } from "react-router-dom";
import { firestore } from "../../../services/firebase";
import { ViewLoading } from "../../../components";
import { DefaultLayout } from "../../../components/layouts";
import { addDoc, collection, doc, getDoc, updateDoc } from "firebase/firestore";
import HttpService from "../../../services/httpService";

const { Title } = Typography;

const DependenciaDetalle = () => {

  const firebaseCollection = "dependencias";
  const query = useQuery();
  const history = useHistory();
  const { TextArea } = Input;
  const id = query.get("id");
  const editando = Boolean(id);
  const titulo = editando ? "Editar dependencia" : "Agregar dependencia";
  const url = "/administracion/dependencias";
  const [form] = Form.useForm();

  const [dependencia, setDependencia] = useState([]);
  const [cargandoDependencia, setCargandoDependencia] = useState(true);
  const [guadandoCargando, setGuardandoCargando] = useState(false);
  const [buscarValue, setBuscarValue] = useState('');
  const [requestUsuarios, setRequestUsuarios] = useState({});
  const [timer, setTimer] = useState(null);
  const [miembros, setMiembros] = useState([]);
  const [miembrosLoading, setMiembrosLoading] = useState(false);
  const [usuario, setUsuario] = useState(null);
  const [lideres, setLideres] = useState([]);

  const usuarioExtraParams = React.useMemo(() => ({ q: buscarValue }), [buscarValue])
  const usuariosParams = React.useMemo(() => ({
    name: 'v1/usuario',
    limite: 20,
    ordenar: 'nombre-asc',
    expand: 'grupos',
    extraParams: usuarioExtraParams
  }), [usuarioExtraParams])

  const [
    models,
    modelsLoading, , ,
  ] = useModels(requestUsuarios);

  const columnasMiembros = [
    { title: 'Nombre', dataIndex: 'nombre', key: 'nombre', },
    { title: 'Correo', dataIndex: 'email', key: 'email', },
  ]

  const columnasLideres = [
    { title: 'Nombre', dataIndex: 'nombre', key: 'nombre', },
    {
      title: '', dataIndex: 'uid', key: 'uid', render: (text) =>
        <Button
          danger
          icon={<CloseCircleOutlined />}
          onClick={() => setLideres(lideres.filter(l => l.uid !== text))}
        />
    },
  ]

  const onSearchUsuarios = (value) => {
    clearTimeout(timer);
    const newTimer = setTimeout(() => {
      setBuscarValue(value);
    }, 300);

    setTimer(newTimer);
  };

  React.useEffect(() => {
    setRequestUsuarios(usuariosParams);
    return () => setRequestUsuarios({});
  }, [usuariosParams]);

  React.useEffect(() => {
    if (editando && id) {
      const getMiembros = async () => {
        setMiembrosLoading(true);
        const response = await HttpService.get(`v1/usuario?ordenar=nombre-asc&idDependencia=${id}&limite=-1`);
        if (!response.isError) {
          setMiembros(response.resultado);
          setMiembrosLoading(false);
        }
      }
      getMiembros();
    }
  }, [editando, id]);

  const onFinish = async (values) => {
    try {
      setGuardandoCargando(true);

      let body = {
        ...values,
        timestamp: editando ? dependencia?.timestamp : new Date(),
        estatus: editando ? dependencia?.estatus : true,
        sincronizado: null,
        usuarios: lideres.map(l => ({
          uid: l.uid,
          nombre: l.nombre,
        })),
      };
      // comentario prueba

      // Agregamos o editamos el documento grupo
      if (editando) {
        await updateDoc(doc(firestore, firebaseCollection, id), body);
      } else {
        await addDoc(collection(firestore, firebaseCollection), body);
      }

      Modal.success({
        title: "Éxito",
        content: "Dependencia guardado correctamente",
      });

      history.push(url);

    } catch (error) {
      Modal.warning({
        title: "Atención",
        content: "Hubo un problema al guardar, intentalo de nuevo.",
      });
      console.log("Error al guardar: ", error);
    } finally {
      setGuardandoCargando(false);
    }
  };

  const onFinishFailed = () => {
    Modal.warning({
      title: "Atención",
      content: "Por favor revise los datos.",
      style: { marginTop: "20vh" },
    });
  };

  useEffect(() => {
    let mounted = true;
    if (mounted && editando) {
      try {
        setTimeout(async () => {
          const docRef = doc(firestore, "dependencias", id);
          const docSnap = await getDoc(docRef);
          setDependencia(docSnap.data());

          const { usuarios } = docSnap.data();

          if (usuarios?.length > 0) {
            setLideres(usuarios);
          }
        }, 0);
      } catch (error) {
        console.log("Error al obtener dependencia: ", error);
      } finally {
        setCargandoDependencia(false);
      }
    }
    return () => (mounted = false);
  }, [editando, id]);

  useEffect(() => {
    let mounted = true;
    if (mounted && editando) {
      form.setFieldsValue({
        ...dependencia,
      });
    }
    return () => (mounted = false);
  }, [dependencia, editando, form]);

  if (cargandoDependencia && editando) return <ViewLoading />;

  return (
    <DefaultLayout title={titulo} multipleButtonData={[]}>
      <Form
        name="form"
        form={form}
        autoComplete="off"
        layout="vertical"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        {/* Nombre de la dependecia */}
        <Row gutter={10}>
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 12 }}
          >
            <Form.Item
              label="Nombre de la dependencia"
              name="nombre"
              rules={[{ required: true, message: "Requerido" }]}
            >
              <Input placeholder="Ingresa un nombre..." />
            </Form.Item>
          </Col>
        </Row>

        {/* Descripción  */}
        <Row gutter={10}>
          <Col className="gutter-row" span={24}>
            <Form.Item
              label="Descripción"
              name="descripcion"
              rules={[{ required: true, message: "Requerido" }]}
            >
              <TextArea rows={4} placeholder="Ingrese una Descripción" />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={10}>
          <Col className="gutter-row" span={12}>
            <Title level={4}>Miembros</Title>
            <Table
              columns={columnasMiembros}
              dataSource={miembros}
              loading={miembrosLoading}
              size="small"
              rowKey="id"
              scroll={{ y: 400 }}
              pagination={
                miembros.length > 10
                  ? {
                    pageSize: 10,
                    position: ["bottomCenter"],
                    showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} registros`,
                  } : false
              }
            />
            <br />
          </Col>
          <Col className="gutter-row" span={12}>
            <Row>
              <Col span={22}>
                <Title level={4}>Líderes</Title>
                <Form.Item
                  label="Usuarios"
                  rules={[{
                    required: true,
                    message: 'Selecciona un usuario!',
                  }]}
                  hasFeedback
                >
                  <Select
                    showSearch
                    onSearch={onSearchUsuarios}
                    allowClear
                    placeholder="Elige a un usuario"
                    optionFilterProp="children"
                    filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
                    loading={modelsLoading}
                    onChange={(_, item) => {
                      setUsuario(item);
                      console.log("item", item);
                    }}
                    options={models?.length > 0 && models?.map(i => ({
                      ...i,
                      value: i.uid,
                      label: i.nombre
                    }))}
                    value={usuario}
                  />
                </Form.Item>
              </Col>
              <Col span={2}>
                <Button
                  type="default"
                  icon={<PlusOutlined />}
                  shape="circle"
                  size="middle"
                  style={{
                    marginTop: 70,
                    marginLeft: 10
                  }}
                  onClick={() => {
                    if (usuario) {
                      //agregar sólo si no existe en el array, con esto evitamos duplicados
                      if (!lideres.find(i => i.uid === usuario.uid)) {
                        setLideres([...lideres, usuario]);
                        setUsuario(null);
                      }
                    }
                  }}
                />
              </Col>
            </Row>
            <Table
              columns={columnasLideres}
              dataSource={lideres}
              size="small"
              rowKey="uid"
              pagination={
                lideres.length > 10
                  ? {
                    pageSize: 10,
                    position: ["bottomCenter"],
                    showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} registros`,
                  } : false
              }
            />
          </Col>
        </Row>
        <Row gutter={10}>
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
          >
            <Button
              type="primary"
              htmlType="submit"
              icon={<SaveOutlined />}
              block
              size="large"
              loading={guadandoCargando}
            >
              Guardar
            </Button>
          </Col>
        </Row>
      </Form>
    </DefaultLayout>
  )
}

export default DependenciaDetalle