Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3546 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3546 Rev 3878
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from "react";
 2 
import React from "react";
3 
import { useEffect, useState } from "react";
 3 
import { useEffect, useState } from "react";
4 
import { Modal } from "react-bootstrap";
 - 
 
5 
import { addNotification } from "../../../redux/notification/notification.actions";
 4 
import { addNotification } from "../../../redux/notification/notification.actions";
6 
import { axios } from "../../../utils";
 5 
import { axios } from "../../../utils";
- 
 
 6 
import AddMemberModal from "./AddMemberModal";
- 
 
 7 
import MembersModal from "./MembersModal";
- 
 
 8 
import MemberTemplate from "./MemberTemplate";
7 
 
 9 
 
8 
const GroupMembersHelper = (props) => {
 - 
 
9 
  // props destructuring
 - 
 
10 
  const { show = false, groupId, handleFirstLinkInvite } = props;
 10 
const GroupMembersHelper = ({ show = false, groupId, handleFirstLinkInvite }) => {
11 
 
 11 
 
12 
  // states
 - 
 
13 
  const [members, setMembers] = useState([]);
 12 
  const [members, setMembers] = useState([])
- 
 
 13 
  const [addModalShow, setAddModalShow] = useState(false);
- 
 
 14 
  const [showMembersModal, setShowMembersModal] = useState(false);
14 
  const [linkInvite, setLinkInvite] = useState('')
 15 
  const [linkInvite, setLinkInvite] = useState('')
15 
  const [visible, setVisible] = useState(false)
 - 
 
16 
  const [users, setUsers] = useState([])
 - 
 
17 
  const [search, setSearch] = useState('')
 - 
 
Línea 18... Línea 16...
18 
 
 16 
 
19 
  const load = () => {
 17 
  const load = () => {
20 
    axios.get(`/helpers/group-members/${groupId}`).then((response) => {
 18 
    axios.get(`/helpers/group-members/${groupId}`)
21 
      const resData = response.data;
 19 
      .then(({ data }) => {
22 
      if (resData.success) {
 20 
        if (data.success) {
23 
        setMembers(resData.data.items);
 21 
          setMembers(data.items);
24 
        setLinkInvite(resData.data.link_invite)
 22 
          setLinkInvite(data.link_invite)
25 
        handleFirstLinkInvite(resData.data.link_invite)
 23 
          handleFirstLinkInvite(data.link_invite)
26 
      }
 24 
        }
27 
    });
 25 
      });
Línea 28... Línea 26...
28 
  }
 26 
  }
Línea 29... Línea 27...
29 
 
 27 
 
30 
  useEffect(() => load(), []);
 28 
  useEffect(() => load(), []);
31 
 
 29 
 
32 
  const handleAction = (url) => {
 30 
  const handleAction = (url) => {
33 
    const params = new FormData()
 31 
    const params = new FormData()
34 
    axios.post(url, params)
 32 
    axios.post(url, params)
35 
      .then(res => {
 33 
      .then(({ data }) => {
36 
        if (res.data.success)
 34 
        if (!data.success) {
37 
          addNotification({
 - 
 
38 
            type: 'success',
 35 
          return addNotification({ style: 'danger', msg: data.data })
39 
            payload: 'Accion realizada exitosamente'
 36 
        }
40 
          })
 - 
 
41 
        load()
 37 
        addNotification({ style: 'success', msg: 'Accion realizada exitosamente' })
42 
      })
 - 
 
43 
      .catch(err => {
 38 
        load()
- 
 
 39 
      })
44 
        console.log('>>: err > ', err)
 40 
      .catch(err => console.log('>>: err > ', err))
45 
      })
 41 
  }
46 
  }
 - 
 
47 
  const handleClose = () => {
 42 
 
48 
    setVisible(false)
 43 
  const closeAddModal = () => {
49 
    setUsers([])
 - 
 
50 
    load()
 - 
 
51 
  }
 - 
 
52 
  const handleSearchChange = async e => {
 - 
 
53 
    const value = e.target.value
 - 
 
54 
    setSearch(value)
 - 
 
55 
    try {
 - 
 
56 
      const res = await axios.get(linkInvite + '?search=' + value)
 - 
 
57 
      setUsers(res.data.data)
 - 
 
58 
    } catch (error) {
 - 
 
59 
      console.log('>>: error > ', error)
 - 
 
60 
    }
 - 
 
61 
  }
 - 
 
62 
  const invite = uuid => {
 - 
 
63 
    const formData = new FormData()
 - 
 
64 
    formData.append('id', uuid)
 - 
 
65 
    axios.post(linkInvite, formData)
 - 
 
66 
      .then(res => {
 - 
 
67 
        if (res.data.success) {
 - 
 
68 
          addNotification({
 - 
 
69 
            payload: res.data.data,
 - 
 
70 
            type: 'success'
 - 
 
71 
          })
 - 
 
72 
          handleClose()
 - 
 
73 
        } else {
 - 
 
74 
          addNotification({
 - 
 
75 
            payload: res.data.data,
 - 
 
76 
            type: 'error'
 - 
 
77 
          })
 - 
 
78 
        }
 - 
 
79 
      })
 - 
 
80 
      .catch(err => {
 - 
 
81 
        addNotification({
 - 
 
82 
          payload: 'Disculpe, ha ocurrido un error',
 - 
 
83 
          type: 'error'
 - 
 
84 
        })
 - 
 
Línea 85... Línea 44...
85 
        console.log('>>: err >', err)
 44 
    setAddModalShow(false)
86 
      })
 45 
    load()
87 
  }
 46 
  }
88 
 
 47 
 
89 
  return (
 48 
  return (
90 
    <React.Fragment>
 - 
 
91 
      <Modal
 - 
 
92 
        show={visible}
 - 
 
93 
        onHide={handleClose}
 - 
 
94 
      >
 49 
    <React.Fragment>
95 
        <div className="container">
 - 
 
96 
          <div className="mb-2">
 - 
 
97 
            <label htmlFor="search">
 - 
 
98 
              Escribe el nombre
 - 
 
99 
            </label>
 - 
 
100 
            <input
 50 
      <AddMemberModal
101 
              onChange={handleSearchChange}
 - 
 
102 
              name="search"
 - 
 
103 
              placeholder="Escribe el nombre del usuario"
 - 
 
104 
            />
 51 
        isShow={addModalShow}
105 
          </div>
 - 
 
106 
          {!!users.length &&
 - 
 
107 
            users.map(element =>
 - 
 
108 
              <div
 - 
 
109 
                className="row p-2"
 - 
 
110 
                key={element.value}
 - 
 
111 
              >
 52 
        handleClose={closeAddModal}
112 
                <div
 - 
 
113 
                  className="col-md-8 col-sm-12"
 - 
 
114 
                >
 - 
 
115 
                  {element.text}
 - 
 
116 
                </div>
 - 
 
117 
                <div
 - 
 
118 
                  className="col-md-4 col-sm-12"
 53 
        linkInvite={linkInvite}
119 
                >
 - 
 
120 
                  <button
 54 
      />
121 
                    className="btn btn-primary"
 55 
      <MembersModal
122 
                    onClick={() => invite(element.value)}
 - 
 
123 
                  >
 - 
 
124 
                    Invitar
 - 
 
125 
                  </button>
 56 
        isShow={showMembersModal}
126 
                </div>
 - 
 
127 
              </div>
 - 
 
128 
            )
 57 
        handleClose={() => setShowMembersModal(!showMembersModal)}
129 
          }
 58 
        members={members}
130 
        </div>
 - 
 
131 
      </Modal>
 59 
        handleAction={handleAction}
132 
      <div className={`members-container ${show ? 'd-block' : 'd-sm-none d-none d-md-inline-block d-lg-inline-block'} w-100 overflow-hidden`}>
 60 
      />
133 
        <div className="sd-title">
 61 
      <div className={`members-container ${show ? 'd-block' : 'd-none d-md-inline-block'} w-100 overflow-hidden`}>
134 
          {
 62 
        <div className="sd-title">
135 
            !!linkInvite && (
 63 
          {!!linkInvite &&
136 
              <button
 64 
            <button
137 
                onClick={() => setVisible(true)}
 65 
              onClick={() => setAddModalShow(!addModalShow)}
138 
                className="btn btn-primary btn-sm"
 - 
 
139 
              >
 66 
              className="btn btn-primary btn-sm"
- 
 
 67 
            >
- 
 
 68 
              Añadir miembros
- 
 
 69 
            </button>
- 
 
 70 
          }
- 
 
 71 
          <button
- 
 
 72 
            onClick={() => setShowMembersModal(!showMembersModal)}
140 
                Añadir miembros
 73 
            className="btn btn-primary btn-sm d-block d-md-none"
141 
              </button>
 74 
          >
142 
            )
 - 
 
143 
          }
 - 
 
144 
          <h3 className="pt-2 pb-2">Miembros</h3>
 - 
 
145 
        </div>
 - 
 
146 
        {members.map(({ id, name, image, profile, actions }) => (
 - 
 
147 
          <div className='user' key={id}>
 75 
            Ver miembros
148 
            <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '1rem' }}>
 76 
          </button>
149 
              <a href={profile} target="_blank" rel="noreferrer">
 - 
 
150 
                <img src={image} alt={`${name} profile image`} />
 77 
          <h3 className="pt-2 pb-2">Miembros</h3>
151 
              </a>
 - 
 
152 
              <h4>{name}</h4>
 - 
 
153 
              {!!actions && actions.link_approve &&
 78 
        </div>
154 
                <i
 79 
        {
155 
                  onClick={() => handleAction(actions.link_approve)}
 80 
          members.map((member) =>
156 
                  className="fa fa-check icon-button btn btn-primary"
 - 
 
157 
                  title="Aprobar" />
 - 
 
158 
              }
 - 
 
159 
              {!!actions && actions.link_reject &&
 - 
 
160 
                <i
 81 
            <MemberTemplate
161 
                  onClick={() => handleAction(actions.link_reject)}
 - 
 
162 
                  className="fa fa-close icon-button btn btn-secondary"
 - 
 
163 
                  title="Rechazar" />
 - 
 
164 
              }
 - 
 
165 
              {!!actions && actions.link_cancel &&
 - 
 
166 
                <i
 82 
              key={member.id}
167 
                  onClick={() => handleAction(actions.link_cancel)}
 - 
 
168 
                  className="fa fa-trash icon-button btn btn-primary"
 - 
 
169 
                  title="Cancelar" />
 83 
              member={member}
170 
              }
 84 
              handleAction={handleAction}
171 
            </div>
 85 
            />
172 
          </div>
 86 
          )
173 
        ))}
 87 
        }