Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 605 Rev 607
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 { Link, useHistory } from 'react-router-dom'
 4 
import { Link, useHistory } from 'react-router-dom'
4 
import { addNotification } from 'store/notification/notification.actions'
 5 
import { addNotification } from 'store/notification/notification.actions'
5 
import { useDispatch, useSelector } from 'react-redux'
 6 
import { useDispatch, useSelector } from 'react-redux'
6 
import styled from 'styled-components'
 7 
import styled from 'styled-components'
Línea 7... Línea 8...
7 
 
 8 
 
8 
import Spinner from '../UI/Spinner'
 9 
import Spinner from '../UI/Spinner'
9 
import StyledContainer from '../widgets/WidgetLayout'
 10 
import StyledContainer from '../widgets/WidgetLayout'
Línea 10... Línea -...
10 
import ConfirmModal from '../modals/ConfirmModal'
 - 
 
11 
 
 - 
 
12 
import styles from './ProfileItem.module.scss'
 11 
import ConfirmModal from '../modals/ConfirmModal'
13 
 
 12 
 
14 
const StyledSpinnerContainer = styled.div`
 13 
const StyledSpinnerContainer = styled.div`
15 
  position: absolute;
 14 
  position: absolute;
16 
  left: 0;
 15 
  left: 0;
17 
  top: 0;
 16 
  top: 0;
18 
  width: 100%;
 17 
  width: 100%;
19 
  height: 100%;
 18 
  height: 100%;
20 
  background: rgba(255, 255, 255, 0.4);
 19 
  background: rgba(255, 255, 255, 0.4);
21 
  place-items: center;
 - 
 
22 
  z-index: 50;
 20 
  place-items: center;
- 
 
 21 
  z-index: 50;
- 
 
 22 
`
- 
 
 23 
 
- 
 
 24 
const StyledHeader = styled.div`
- 
 
 25 
  align-items: center;
- 
 
 26 
  display: flex;
- 
 
 27 
  gap: 0.5rem;
- 
 
 28 
  position: relative;
- 
 
 29 
  padding: 5px 1rem;
- 
 
 30 
`
- 
 
 31 
 
- 
 
 32 
const StyledAvatar = styled(Avatar)`
- 
 
 33 
  height: 60px;
- 
 
 34 
  width: 60px;
23
35 
`
24 
`
 36 
 
25 
const ProfileItem = ({
 37 
const ProfileItem = ({
26 
  image,
 38 
  image,
27 
  name,
 39 
  name,
28 
  email,
 40 
  email,
29 
  network,
 41 
  network,
30 
  status,
 - 
 
31 
  fetchCallback,
 - 
 
32 
  btnAcceptTitle = ' Ver',
 - 
 
33 
  btnCancelTitle = 'Borrar',
 - 
 
34 
  btnEditTitle = 'Editar',
 42 
  status,
35 
  btnLeaveTitle = 'Dejar',
 43 
  fetchCallback,
36 
  link_remove,
 44 
  link_remove,
37 
  link_view,
 45 
  link_view,
38 
  link_edit,
 46 
  link_edit,
Línea 47... Línea 55...
47 
  link_unfollow,
 55 
  link_unfollow,
48 
  link_approve,
 56 
  link_approve,
49 
  link_leave,
 57 
  link_leave,
50 
  link_admin,
 58 
  link_admin,
51 
  link_impersonate,
 59 
  link_impersonate,
- 
 
 60 
  btnAcceptTitle = 'Ver',
- 
 
 61 
  btnCancelTitle = 'Borrar',
- 
 
 62 
  btnEditTitle = 'Editar',
- 
 
 63 
  btnLeaveTitle = 'Dejar',
52 
  isTopData,
 64 
  isTopData
53 
}) => {
 65 
}) => {
54 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
 66 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
55 
  const [loading, setLoading] = useState(false)
 67 
  const [loading, setLoading] = useState(false)
56 
  const confirmUrl = useRef('')
 68 
  const confirmUrl = useRef('')
57 
  const labels = useSelector(({ intl }) => intl.labels)
 69 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 99... Línea 111...
99 
      })
 111 
      })
100 
      .catch(() => {
 112 
      .catch(() => {
101 
        dispatch(
 113 
        dispatch(
102 
          addNotification({
 114 
          addNotification({
103 
            style: 'error',
 115 
            style: 'error',
104 
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
 116 
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.'
105 
          })
 117 
          })
106 
        )
 118 
        )
107 
      })
 119 
      })
108 
      .finally(() => {
 120 
      .finally(() => {
109 
        confirmUrl.current = ''
 121 
        confirmUrl.current = ''
Línea 145... Línea 157...
145 
 
 157 
 
146 
  const linksOptions = [
 158 
  const linksOptions = [
147 
    {
 159 
    {
148 
      label: btnAcceptTitle || labels.accept,
 160 
      label: btnAcceptTitle || labels.accept,
149 
      url: link_view,
 161 
      url: link_view,
150 
      color: 'primary',
 162 
      color: 'primary'
151 
    },
 163 
    },
152 
    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },
 164 
    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },
153 
    { label: labels.approve, url: link_approve, color: 'tertiary' },
 165 
    { label: labels.approve, url: link_approve, color: 'tertiary' },
154 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary' },
 166 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary' },
155 
    { label: labels.accept, url: link_accept, color: 'secondary' },
 167 
    { label: labels.accept, url: link_accept, color: 'secondary' },
156 
    { label: labels.reject, url: link_reject, color: 'tertiary' },
 168 
    { label: labels.reject, url: link_reject, color: 'tertiary' },
157 
    {
 169 
    {
158 
      label: btnCancelTitle || labels.cancel,
 170 
      label: btnCancelTitle || labels.cancel,
159 
      url: link_delete,
 171 
      url: link_delete,
160 
      color: 'tertiary',
 172 
      color: 'tertiary'
161 
    },
 173 
    },
162 
    {
 174 
    {
163 
      label: labels.message || 'Mensaje',
 175 
      label: labels.message || 'Mensaje',
164 
      url: link_inmail,
 176 
      url: link_inmail,
165 
      color: 'secondary',
 177 
      color: 'secondary'
166 
    },
 178 
    },
167 
    { label: labels.administrate, url: link_admin, color: 'secondary' },
 179 
    { label: labels.administrate, url: link_admin, color: 'secondary' },
168 
    { label: labels.unfollow, url: link_unfollow, color: 'tertiary' },
 180 
    { label: labels.unfollow, url: link_unfollow, color: 'tertiary' },
169 
    { label: labels.block, url: link_block, color: 'tertiary' },
 181 
    { label: labels.block, url: link_block, color: 'tertiary' },
170 
    { label: labels.unblock, url: link_unblock, color: 'tertiary' },
 182 
    { label: labels.unblock, url: link_unblock, color: 'tertiary' },
171 
    { label: labels.connect, url: link_request, color: 'tertiary' },
 183 
    { label: labels.connect, url: link_request, color: 'tertiary' },
172 
    { label: labels.cancel, url: link_cancel, color: 'tertiary' },
 184 
    { label: labels.cancel, url: link_cancel, color: 'tertiary' },
173 
    { label: btnLeaveTitle, url: link_leave, color: 'tertiary' },
 185 
    { label: btnLeaveTitle, url: link_leave, color: 'tertiary' },
174 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
 186 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' }
Línea 175... Línea 187...
175 
  ]
 187 
  ]
176 
 
 188 
 
177 
  return (
 189 
  return (
178 
    <>
 190 
    <>
179 
      <StyledContainer>
 191 
      <StyledContainer>
180 
        <div className={styles.profile_item_header}>
 192 
        <StyledHeader>
181 
          {image && <img src={image} alt="group image" />}
 193 
          {image && <StyledAvatar src={image} alt={`${name} image`} />}
182 
          <div className={styles.profile_item_header_info}>
 - 
 
183 
            <h3>{name}</h3>
 194 
          <div>
184 
 
 195 
            <h3>{name}</h3>
185 
            {isTopData && email && <h4>{email}</h4>}
 196 
            {isTopData && email && <h4>{email}</h4>}
186 
            {network && <h4>{network}</h4>}
 197 
            {network && <h4>{network}</h4>}
187 
            {status && <h4>{status}</h4>}
 198 
            {status && <h4>{status}</h4>}
Línea 210... Línea 221...
210 
                  </li>
 221 
                  </li>
211 
                )}
 222 
                )}
212 
              </ul>
 223 
              </ul>
213 
            )}
 224 
            )}
214 
          </div>
 225 
          </div>
215 
        </div>
 226 
        </StyledHeader>
216 
        <StyledContainer.Actions>
 227 
        <StyledContainer.Actions>
217 
          {linksOptions.map(({ label, url, color }) => {
 228 
          {linksOptions.map(({ label, url, color }) => {
218 
            const breakOptions = [link_view, link_edit, link_inmail]
 229 
            const breakOptions = [link_view, link_edit, link_inmail]
Línea 219... Línea 230...
219 
 
 230 
 
Línea 230... Línea 241...
230 
            }
 241 
            }
Línea 231... Línea 242...
231 
 
 242 
 
232 
            return (
 243 
            return (
233 
              <button
 244 
              <button
234 
                key={url}
 - 
 
235 
                className={`btn-${color}`}
 245 
                key={url}
236 
                onClick={() => {
 246 
                onClick={() => {
237 
                  if (url === link_unfollow) {
 247 
                  if (url === link_unfollow) {
238 
                    return handleUnfollow(url)
 248 
                    return handleUnfollow(url)