Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 492 Rev 496
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 { Link } from 'react-router-dom'
- 
 
 4 
import { addNotification } from 'store/notification/notification.actions'
3 
import { useDispatch, useSelector } from 'react-redux'
 5 
import { useDispatch, useSelector } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
 - 
 
5 
import styled from 'styled-components'
 6 
import styled from 'styled-components'
Línea 6... Línea 7...
6 
 
 7 
 
7 
import Spinner from '../UI/Spinner'
 8 
import Spinner from '../UI/Spinner'
Línea 8... Línea 9...
8 
import ConfirmationBox from '../UI/ConfirmBox'
 9 
import ConfirmationBox from '../UI/ConfirmBox'
9 
 
 - 
 
Línea 10... Línea 10...
10 
import styles from './ProfileItem.module.scss'
 10 
 
11 
import { Link } from 'react-router-dom'
 11 
import styles from './ProfileItem.module.scss'
12 
 
 12 
 
13 
const StyledSpinnerContainer = styled.div`
 13 
const StyledSpinnerContainer = styled.div`
14 
  position: absolute;
 14 
  position: absolute;
15 
  left: 0;
 15 
  left: 0;
16 
  top: 0;
 16 
  top: 0;
17 
  width: 100%;
 17 
  width: 100%;
18 
  height: 100%;
 18 
  height: 100%;
19 
  background: rgba(255, 255, 255, 0.4);
 - 
 
20 
  place-items: center;
 19 
  background: rgba(255, 255, 255, 0.4);
21 
  z-index: 50;
20 
  place-items: center;
22
21 
  z-index: 50;
23 
  .titulo{
 22 
  .titulo {
24 
    color:#1b273e !important;
 23 
    color: #1b273e !important;
25 
  }
 24 
  }
26 
`
 25 
`
Línea 62... Línea 61...
62 
  const showConfirm = (url = '') => {
 61 
  const showConfirm = (url = '') => {
63 
    setIsShowConfirmation(true)
 62 
    setIsShowConfirmation(true)
64 
    confirmUrl.current = url
 63 
    confirmUrl.current = url
65 
  }
 64 
  }
Línea 66... Línea 65...
66 
 
 65 
 
67 
  const closeConfirm = (url = '') => {
 66 
  const closeConfirm = () => {
68 
    setIsShowConfirmation(false)
 67 
    setIsShowConfirmation(false)
69 
    confirmUrl.current = ''
 68 
    confirmUrl.current = ''
Línea 70... Línea 69...
70 
  }
 69 
  }
Línea 180... Línea 179...
180 
  return (
 179 
  return (
181 
    <div className={styles.profile_item}>
 180 
    <div className={styles.profile_item}>
182 
      <div className={styles.profile_item_header}>
 181 
      <div className={styles.profile_item_header}>
183 
        {image && <img src={image} alt="group image" />}
 182 
        {image && <img src={image} alt="group image" />}
184 
        <div className={styles.profile_item_header_info}>
 183 
        <div className={styles.profile_item_header_info}>
185 
          <h3 className='titulo'>{name}</h3>
 184 
          <h3 className="titulo">{name}</h3>
186
185 
 
187 
          {isTopData && email && <h4>{email}</h4>}
 186 
          {isTopData && email && <h4>{email}</h4>}
188 
          {network && <h4>{network}</h4>}
 187 
          {network && <h4>{network}</h4>}
189 
          {status && <h4>{status}</h4>}
 188 
          {status && <h4>{status}</h4>}
190 
          {isTopData && (
 189 
          {isTopData && (
191
- 
 
192 
            <ul className='my-5'>
 190 
            <ul className="my-5">
193 
              {link_view && (
 191 
              {link_view && (
194 
                <li>
 192 
                <li>
195 
                  <Link
 193 
                  <Link
196 
                    to={link_view}
 194 
                    to={link_view}
197 
                    data-link={link_view}
 195 
                    data-link={link_view}
Línea 214... Línea 212...
214 
              )}
 212 
              )}
215 
            </ul>
 213 
            </ul>
216 
          )}
 214 
          )}
217 
        </div>
 215 
        </div>
218 
      </div>
 216 
      </div>
219
217 
 
220 
      <ul className="position-relative mt-1">
 218 
      <ul className="position-relative mt-1">
221 
        {linksOptions.map((option) => {
 219 
        {linksOptions.map((option) => {
222 
          const breakOptions = [link_view, link_edit, link_inmail]
 220 
          const breakOptions = [link_view, link_edit, link_inmail]
Línea 223... Línea 221...
223 
 
 221 
 
Línea 262... Línea 260...
262 
                    e.preventDefault()
 260 
                    e.preventDefault()
263 
                    showConfirm(option.url)
 261 
                    showConfirm(option.url)
264 
                  }
 262 
                  }
265 
                }}
 263 
                }}
266 
              >
 264 
              >
267 
                <button className={`btn `}>
 265 
                <button className={`btn `}>{option.label}</button>
268 
                  {option.label}
 - 
 
269 
                </button>
 - 
 
270 
              </Link>
 266 
              </Link>
271 
            </li>
267 
            </li>
272 
          )
 268 
          )
273 
        })}
 269 
        })}
274 
        <ConfirmationBox
 270 
        <ConfirmationBox
275 
          show={isShowConfirmation}
 271 
          show={isShowConfirmation}
276 
          onClose={() => closeConfirm()}
 272 
          onClose={() => closeConfirm()}
277 
          onAccept={() => onConfirm(confirmUrl.current)}
 273 
          onAccept={() => onConfirm(confirmUrl.current)}
278 
        />
 274 
        />
279 
      </ul>
 275 
      </ul>
280 
      <div className='mb-1'></div>
 - 
 
- 
 
 276 
 
281 
      {loading && (
 277 
      {loading && (
282 
        <StyledSpinnerContainer>
 278 
        <StyledSpinnerContainer>
283 
          <Spinner />
 279 
          <Spinner />
284 
        </StyledSpinnerContainer>
 280 
        </StyledSpinnerContainer>
285 
      )}
 281 
      )}