Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 618 | Rev 646 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 618 Rev 645
Línea 1... Línea 1...
1 
import React, { useRef, useState } from 'react'
 1 
import React, { useRef, useState } from "react";
2 
import { axios } from '../../utils'
 2 
import { axios } from "../../utils";
3 
import { Avatar } from '@mui/material'
 3 
import { Avatar } from "@mui/material";
4 
import { Link, useHistory } from 'react-router-dom'
 4 
import { Link, useHistory } from "react-router-dom";
5 
import { addNotification } from 'store/notification/notification.actions'
 5 
import { addNotification } from "store/notification/notification.actions";
6 
import { useDispatch, useSelector } from 'react-redux'
 6 
import { useDispatch, useSelector } from "react-redux";
7 
import styled from 'styled-components'
 7 
import styled from "styled-components";
8 
import Spinner from '../UI/Spinner'
 8 
import Spinner from "../UI/Spinner";
9 
import StyledContainer from '../widgets/WidgetLayout'
 9 
import StyledContainer from "../widgets/WidgetLayout";
10 
import ConfirmModal from '../modals/ConfirmModal'
 10 
import ConfirmModal from "../modals/ConfirmModal";
Línea 11... Línea 11...
11 
 
 11 
 
12 
const StyledSpinnerContainer = styled.div`
 12 
const StyledSpinnerContainer = styled.div`
13 
  position: absolute;
 13 
  position: absolute;
14 
  left: 0;
 14 
  left: 0;
15 
  top: 0;
 15 
  top: 0;
16 
  width: 100%;
 16 
  width: 100%;
17 
  height: 100%;
 17 
  height: 100%;
18 
  background: rgba(255, 255, 255, 0.4);
 18 
  background: rgba(255, 255, 255, 0.4);
19 
  place-items: center;
 19 
  place-items: center;
20 
  z-index: 50;
 20 
  z-index: 50;
Línea 21... Línea 21...
21 
`
 21 
`;
22 
 
 22 
 
23 
const StyledItemContainer = styled(StyledContainer)`
 23 
const StyledItemContainer = styled(StyledContainer)`
24 
  display: flex;
 24 
  display: flex;
25 
  flex-direction: column;
 25 
  flex-direction: column;
26 
  justify-content: center;
 26 
  justify-content: center;
Línea 27... Línea 27...
27 
  height: 100%;
 27 
  height: 100%;
28 
`
 28 
`;
29 
 
 29 
 
30 
const StyledHeader = styled.div`
 30 
const StyledHeader = styled.div`
31 
  align-items: center;
 31 
  align-items: center;
32 
  display: flex;
 32 
  display: flex;
33 
  gap: 0.5rem;
 33 
  gap: 0.5rem;
- 
 
 34 
  justify-content: center;
- 
 
 35 
  position: relative;
- 
 
 36 
  padding: 10px 1rem;
- 
 
 37 
  ul {
- 
 
 38 
    display: flex;
34 
  justify-content: center;
 39 
    justify-content: center;
Línea 35... Línea 40...
35 
  position: relative;
 40 
    align-items: center;
36 
  padding: 5px 1rem;
 41 
  }
37 
`
 42 
`;
38 
 
 43 
 
39 
const StyledContent = styled.div`
 44 
const StyledContent = styled.div`
40 
  display: flex;
 45 
  display: flex;
41 
  flex-direction: column;
 46 
  flex-direction: column;
42 
  text-align: center;
 47 
  text-align: center;
43 
  ul{
 48 
  ul {
44 
    align-items: center;
 49 
    align-items: center;
45 
    display: flex;
 50 
    display: flex;
Línea 46... Línea 51...
46 
    flex-direction: column;
 51 
    flex-direction: column;
47 
    justify-content: center;
 52 
    justify-content: center;
48 
  }
 53 
  }
49 
`
 54 
`;
Línea 50... Línea 55...
50 
 
 55 
 
51 
const StyledAvatar = styled(Avatar)`
 56 
const StyledAvatar = styled(Avatar)`
52 
  height: 60px;
 57 
  height: 60px;
53 
  width: 60px;
 58 
  width: 60px;
Línea 74... Línea 79...
74 
  link_unfollow,
 79 
  link_unfollow,
75 
  link_approve,
 80 
  link_approve,
76 
  link_leave,
 81 
  link_leave,
77 
  link_admin,
 82 
  link_admin,
78 
  link_impersonate,
 83 
  link_impersonate,
79 
  btnAcceptTitle = 'Ver',
 84 
  btnAcceptTitle = "Ver",
80 
  btnCancelTitle = 'Borrar',
 85 
  btnCancelTitle = "Borrar",
81 
  btnEditTitle = 'Editar',
 86 
  btnEditTitle = "Editar",
82 
  btnLeaveTitle = 'Dejar',
 87 
  btnLeaveTitle = "Dejar",
83 
  isTopData
 88 
  isTopData,
84 
}) => {
 89 
}) => {
85 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
 90 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false);
86 
  const [loading, setLoading] = useState(false)
 91 
  const [loading, setLoading] = useState(false);
87 
  const confirmUrl = useRef('')
 92 
  const confirmUrl = useRef("");
88 
  const labels = useSelector(({ intl }) => intl.labels)
 93 
  const labels = useSelector(({ intl }) => intl.labels);
89 
  const dispatch = useDispatch()
 94 
  const dispatch = useDispatch();
90 
  const history = useHistory()
 95 
  const history = useHistory();
91 
 
 96 
 
92 
  const showConfirm = (url = '') => {
 97 
  const showConfirm = (url = "") => {
93 
    setIsShowConfirmation(true)
 98 
    setIsShowConfirmation(true);
94 
    confirmUrl.current = url
 99 
    confirmUrl.current = url;
95 
  }
 100 
  };
Línea 96... Línea 101...
96 
 
 101 
 
97 
  const closeConfirm = () => {
 102 
  const closeConfirm = () => {
98 
    setIsShowConfirmation(false)
 103 
    setIsShowConfirmation(false);
99 
    confirmUrl.current = ''
 104 
    confirmUrl.current = "";
Línea 100... Línea 105...
100 
  }
 105 
  };
101 
 
 106 
 
102 
  const getImpersonateUrl = async (url = '') => {
 107 
  const getImpersonateUrl = async (url = "") => {
103 
    try {
 108 
    try {
104 
      const { data } = await axios.get(url)
 109 
      const { data } = await axios.get(url);
105 
      if (data.success) window.location.href = data.data
 110 
      if (data.success) window.location.href = data.data;
106 
    } catch (error) {
 111 
    } catch (error) {
107 
      console.log('>>: error > ', error)
 112 
      console.log(">>: error > ", error);
Línea 108... Línea 113...
108 
    }
 113 
    }
109 
  }
 114 
  };
110 
 
 115 
 
111 
  const onConfirm = (url) => {
 116 
  const onConfirm = (url) => {
112 
    setLoading(true)
 117 
    setLoading(true);
113 
    axios
 118 
    axios
Línea 114... Línea 119...
114 
      .post(url)
 119 
      .post(url)
115 
      .then((response) => {
 120 
      .then((response) => {
116 
        const { success, data } = response.data
 121 
        const { success, data } = response.data;
117 
 
 122 
 
118 
        if (!success) {
 123 
        if (!success) {
Línea 119... Línea 124...
119 
          const errorMessage =
 124 
          const errorMessage =
120 
            typeof data === 'string'
 125 
            typeof data === "string"
121 
              ? data
 126 
              ? data
Línea 122... Línea 127...
122 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
 127 
              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
123 
 
 128 
 
124 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 129 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
125 
          return
 130 
          return;
126 
        }
 131 
        }
127 
 
 132 
 
128 
        if (fetchCallback) fetchCallback()
 133 
        if (fetchCallback) fetchCallback();
129 
        dispatch(addNotification({ style: 'success', msg: data }))
 134 
        dispatch(addNotification({ style: "success", msg: data }));
130 
      })
 135 
      })
131 
      .catch(() => {
 136 
      .catch(() => {
132 
        dispatch(
 137 
        dispatch(
133 
          addNotification({
 138 
          addNotification({
134 
            style: 'error',
 139 
            style: "error",
135 
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.'
 140 
            msg: "Error interno. Por favor, inténtelo de nuevo más tarde.",
136 
          })
 141 
          })
137 
        )
 142 
        );
Línea 138... Línea 143...
138 
      })
 143 
      })
139 
      .finally(() => {
 144 
      .finally(() => {
140 
        confirmUrl.current = ''
 145 
        confirmUrl.current = "";
141 
        setLoading(false)
 146 
        setLoading(false);
142 
      })
 147 
      });
143 
  }
 148 
  };
Línea 144... Línea 149...
144 
 
 149 
 
145 
  const handleUnfollow = (link_unfollow) => {
 150 
  const handleUnfollow = (link_unfollow) => {
146 
    setLoading(true)
 151 
    setLoading(true);
147 
    axios
 152 
    axios
148 
      .post(link_unfollow)
 153 
      .post(link_unfollow)
Línea 149... Línea 154...
149 
      .then((response) => {
 154 
      .then((response) => {
150 
        const { data, success } = response.data
 155 
        const { data, success } = response.data;
151 
 
 156 
 
Línea 152... Línea 157...
152 
        if (!success) {
 157 
        if (!success) {
153 
          const errorMessage =
 158 
          const errorMessage =
154 
            typeof data === 'string'
 159 
            typeof data === "string"
155 
              ? data
 160 
              ? data
156 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
 161 
              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
Línea 157... Línea 162...
157 
 
 162 
 
158 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 163 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
159 
          return
 164 
          return;
160 
        }
 165 
        }
161 
 
 166 
 
162 
        if (fetchCallback) fetchCallback()
 167 
        if (fetchCallback) fetchCallback();
163 
        dispatch(addNotification({ style: 'success', msg: data }))
 168 
        dispatch(addNotification({ style: "success", msg: data }));
164 
      })
 169 
      })
Línea 165... Línea 170...
165 
      .finally(() => setLoading(false))
 170 
      .finally(() => setLoading(false));
166 
  }
 171 
  };
167 
 
 172 
 
168 
  const getManageUrl = async () => {
 173 
  const getManageUrl = async () => {
169 
    try {
 174 
    try {
170 
      const { data } = await axios.get(link_admin)
 175 
      const { data } = await axios.get(link_admin);
171 
      if (data.success) window.open(data.data, '_backend')
 176 
      if (data.success) window.open(data.data, "_backend");
172 
    } catch (error) {
 177 
    } catch (error) {
173 
      console.log('>>: error > ', error)
 178 
      console.log(">>: error > ", error);
174 
    }
 179 
    }
175 
  }
 180 
  };
176 
 
 181 
 
177 
  const linksOptions = [
 182 
  const linksOptions = [
178 
    {
 183 
    {
179 
      label: btnAcceptTitle || labels.accept,
 184 
      label: btnAcceptTitle || labels.accept,
180 
      url: link_view,
 185 
      url: link_view,
181 
      color: 'primary'
 186 
      color: "primary",
182 
    },
 187 
    },
183 
    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },
 188 
    { label: btnEditTitle || labels.edit, url: link_edit, color: "secondary" },
184 
    { label: labels.approve, url: link_approve, color: 'tertiary' },
 189 
    { label: labels.approve, url: link_approve, color: "tertiary" },
185 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary' },
 190 
    { label: btnLeaveTitle, url: link_remove, color: "tertiary" },
186 
    { label: labels.accept, url: link_accept, color: 'secondary' },
 191 
    { label: labels.accept, url: link_accept, color: "secondary" },
187 
    { label: labels.reject, url: link_reject, color: 'tertiary' },
 192 
    { label: labels.reject, url: link_reject, color: "tertiary" },
188 
    {
 193 
    {
189 
      label: btnCancelTitle || labels.cancel,
 194 
      label: btnCancelTitle || labels.cancel,
190 
      url: link_delete,
 195 
      url: link_delete,
191 
      color: 'tertiary'
 196 
      color: "tertiary",
192 
    },
 197 
    },
193 
    {
 198 
    {
194 
      label: labels.message || 'Mensaje',
 199 
      label: labels.message || "Mensaje",
Línea 195... Línea 200...
195 
      url: link_inmail,
 200 
      url: link_inmail,
196 
      color: 'secondary'
 201 
      color: "secondary",
197 
    },
 202 
    },
198 
    { label: labels.administrate, url: link_admin, color: 'secondary' },
 203 
    { label: labels.administrate, url: link_admin, color: "secondary" },
Línea 233... Línea 238...
233 
                    <Link
 238 
                    <Link
234 
                      to={link_inmail}
 239 
                      to={link_inmail}
235 
                      data-link={link_inmail}
 240 
                      data-link={link_inmail}
236 
                      className="btn "
 241 
                      className="btn "
237 
                    >
 242 
                    >
238
- 
 
239 
                      {labels.message}
 243 
                      {labels.message}
240
- 
 
241 
                    </Link>
 244 
                    </Link>
242 
                  </li>
 245 
                  </li>
243 
                )}
 246 
                )}
244 
              </ul>
 247 
              </ul>
245 
            )}
 248 
            )}
246 
          </StyledContent>
 249 
          </StyledContent>
247 
        </StyledHeader>
 250 
        </StyledHeader>
248 
        <StyledItemContainer.Actions>
 251 
        <StyledItemContainer.Actions>
249 
          {linksOptions.map(({ label, url }) => {
 252 
          {linksOptions.map(({ label, url }) => {
250 
            const breakOptions = [link_view, link_edit, link_inmail]
 253 
            const breakOptions = [link_view, link_edit, link_inmail];
Línea 251... Línea 254...
251 
 
 254 
 
252 
            if (!url) {
 255 
            if (!url) {
253 
              return null
 256 
              return null;
Línea 254... Línea 257...
254 
            }
 257 
            }
255 
 
 258 
 
256 
            if (url === link_view && isTopData) {
 259 
            if (url === link_view && isTopData) {
Línea 257... Línea 260...
257 
              return null
 260 
              return null;
258 
            }
 261 
            }
259 
 
 262 
 
Línea 260... Línea 263...
260 
            if (url === link_inmail && isTopData) {
 263 
            if (url === link_inmail && isTopData) {
261 
              return null
 264 
              return null;
262 
            }
 265 
            }
263 
 
 266 
 
264 
            return (
 267 
            return (
265 
              <button
 268 
              <button
266 
                key={url}
 269 
                key={url}
Línea 267... Línea 270...
267 
                onClick={() => {
 270 
                onClick={() => {
268 
                  if (url === link_unfollow) {
 271 
                  if (url === link_unfollow) {
269 
                    return handleUnfollow(url)
 272 
                    return handleUnfollow(url);
Línea 270... Línea 273...
270 
                  }
 273 
                  }
271 
 
 274 
 
272 
                  if (url === link_admin) {
 275 
                  if (url === link_admin) {
Línea 273... Línea 276...
273 
                    return getManageUrl()
 276 
                    return getManageUrl();
274 
                  }
 277 
                  }
275 
 
 278 
 
276 
                  if (url === link_impersonate) {
 279 
                  if (url === link_impersonate) {
277 
                    return getImpersonateUrl(url)
 280 
                    return getImpersonateUrl(url);
278 
                  }
 281 
                  }
279 
 
 282 
 
280 
                  if (!breakOptions.includes(url)) {
 283 
                  if (!breakOptions.includes(url)) {
281 
                    return showConfirm(url)
 284 
                    return showConfirm(url);
282 
                  } else {
 285 
                  } else {
283 
                    history.push(url)
 286 
                    history.push(url);
284 
                  }
 287 
                  }
285 
                }}
 288 
                }}
286 
              >
 289 
              >
287 
                {label}
 290 
                {label}
Línea 299... Línea 302...
299 
        show={isShowConfirmation}
 302 
        show={isShowConfirmation}
300 
        onClose={() => closeConfirm()}
 303 
        onClose={() => closeConfirm()}
301 
        onAccept={() => onConfirm(confirmUrl.current)}
 304 
        onAccept={() => onConfirm(confirmUrl.current)}
302 
      />
 305 
      />
303 
    </>
 306 
    </>
304 
  )
 307 
  );
305 
}
 308 
};
Línea 306... Línea 309...
306 
 
 309