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

import React, { useState, useEffect, useMemo } 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, useModel } 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";
import { emptyRequest } from "../../../constants/requests";
import { respuestas } from "../../../utilities";

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 [miembro, setMiembro] = useState(null);
  const [lideres, setLideres] = useState([]);
  const [request, setRequest] = useState(emptyRequest);

  const requestParams = useMemo(() => ({
    name: 'v1/dependencia',
    id: id,
    expand: 'lideres,usuarios'
  }), [id]);

  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 {
    model,
    modelLoading
  } = useModel(request);

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

  const columnasMiembros = [
    { title: 'Nombre', dataIndex: 'nombre', key: 'nombre', },
    { title: 'Correo', dataIndex: 'email', key: 'email', },
    {
      title: '', dataIndex: 'id', key: 'id', render: (text) =>
        <Button
          danger
          icon={<CloseCircleOutlined />}
          onClick={() => setMiembros(miembros.filter(l => l.id !== text))}
        />
    },
  ]

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

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

    setTimer(newTimer);
  };

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

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

      if (editando) {
        body.id = model?.id;
      }

      const res = await HttpService.post('v1/dependencia', body);
      respuestas(res);
      if (res?.status === 200) {
        Modal.success({
          title: "Éxito",
          content: "Dependencia guardada correctamente",
        });

        history.push(url);
      }
      // comentario prueba

      // Agregamos o editamos el documento grupo
      /* if (editando) {
        await updateDoc(doc(firestore, firebaseCollection, id), body);
      } else {
        await addDoc(collection(firestore, firebaseCollection), body);
      } */
    } 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(() => {
    setRequest(requestParams);
    return () => setRequest({});
  }, [requestParams]);

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

  /* 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]); */

  /* 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(() => {
    if (model && editando) {
      form.setFieldsValue({
        ...model,
      });

      if (model?.lideres) {
        setLideres(model?.lideres);
      }

      if (model?.usuarios) {
        setMiembros(model?.usuarios);
      }
    }
  }, [editando, form, model]);

  if (modelLoading && 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>
            <Row>
              <Col span={22}>
                <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) => {
                      setMiembro(item);
                      console.log("item", item);
                    }}
                    options={models?.length > 0 && models?.map(i => ({
                      ...i,
                      value: i.id,
                      label: i.nombre
                    }))}
                    value={miembro}
                  />
                </Form.Item>
              </Col>
              <Col span={2}>
                <Form.Item label="&nbsp;">
                  <Button
                    type="default"
                    icon={<PlusOutlined />}
                    shape="circle"
                    size="middle"
                    style={{
                      // marginTop: 70,
                      marginLeft: 10
                    }}
                    onClick={() => {
                      if (miembro) {
                        //agregar sólo si no existe en el array, con esto evitamos duplicados
                        if (!miembros.find(i => i.id === miembro.id)) {
                          setMiembros([...miembros, miembro]);
                          setMiembro(null);
                        }
                      }
                    }}
                  />
                </Form.Item>
              </Col>
            </Row>
            <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.id,
                      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.id === usuario.id)) {
                        setLideres([...lideres, usuario]);
                        setUsuario(null);
                      }
                    }
                  }}
                />
              </Col>
            </Row>
            <Table
              columns={columnasLideres}
              dataSource={lideres}
              size="small"
              rowKey="id"
              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