Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7323 Rev 7324
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useEffect, useRef, useState } from 'react'
2 
import { axios } from '../../../utils'
 2 
import { axios } from '../../../utils'
3 
import { useSelector } from 'react-redux'
 3 
import { useSelector } from 'react-redux'
4 
import styled from 'styled-components'
 4 
import styled from 'styled-components'
5 
import SearchIcon from '@mui/icons-material/Search'
 - 
 
Línea 6... Línea 5...
6 
 
 5 
 
7 
import TextBox from './TextBox'
 6 
import TextBox from './TextBox'
8 
import ChatList from './ChatList'
 7 
import ChatList from './ChatList'
9 
import EmptySection from '../../UI/EmptySection'
 8 
import EmptySection from '../../UI/EmptySection'
10 
import ConfirmModal from '../../modals/ConfirmModal'
 9 
import ConfirmModal from '../../modals/ConfirmModal'
11 
import ConferenceModal from '../../modals/ConferenceModal'
 10 
import ConferenceModal from '../../modals/ConferenceModal'
12 
import { Avatar, Icon, IconButton } from '@mui/material'
 11 
import { Avatar, IconButton } from '@mui/material'
13 
import { Add, ArrowBackIos } from '@mui/icons-material'
 12 
import { Add, ArrowBackIos } from '@mui/icons-material'
Línea 14... Línea 13...
14 
import SearchInput from '../../UI/SearchInput'
 13 
import SearchInput from '../../UI/SearchInput'
15 
 
 14 
 
Línea 23... Línea 22...
23 
    display: flex;
 22 
    display: flex;
24 
  }
 23 
  }
25 
  &.hide {
 24 
  &.hide {
26 
    display: none;
 25 
    display: none;
27 
  }
 26 
  }
28 
  .optionBack {
 27 
  .option-tab {
29 
    margin: 1rem 0 0.5rem 1rem;
 28 
    align-items: center;
- 
 
 29 
    border-bottom: 1px solid #e2e2e2;
30 
    cursor: pointer;
 30 
    cursor: pointer;
31 
  }
 - 
 
32 
  .optionsTab {
 31 
    display: flex;
33 
    &__option {
 32 
    gap: 0.5rem;
34 
      padding: 0.5rem;
 33 
    padding: 0.5rem;
35 
      border-bottom: 1px solid #e2e2e2;
 - 
 
36 
      cursor: pointer;
 - 
 
37 
      &:hover {
 34 
    &:hover {
38 
        background-color: #e2e2e2;
 35 
      background-color: #e2e2e2;
39 
      }
 - 
 
40 
      &__icon {
 - 
 
41 
        margin-right: 0.3rem;
 - 
 
42 
      }
 - 
 
43 
    }
 36 
    }
44 
  }
 37 
  }
45 
  .contact-tab {
 38 
  .contact-tab {
46 
    align-items: center;
 39 
    align-items: center;
47 
    border-bottom: 1px solid #e2e2e2;
 40 
    border-bottom: 1px solid #e2e2e2;
48 
    display: flex;
 41 
    display: flex;
49 
    flex-direction: column;
 - 
 
50 
    justify-content: space-between;
 42 
    justify-content: space-between;
51 
    padding: 0.2rem 0.5rem;
 43 
    padding: 0.2rem 0.5rem;
52 
    .info {
 44 
    .info {
53 
      display: flex;
 45 
      display: flex;
54 
      align-items: center;
 46 
      align-items: center;
55 
      gap: 0.5rem;
 47 
      gap: 0.5rem;
56 
    }
 48 
    }
57 
  }
 49 
  }
58 
`
 50 
`
Línea -... Línea 51...
- 
 
 51 
 
- 
 
 52 
const StyledComeBack = styled(IconButton)`
- 
 
 53 
  border-radius: 0;
- 
 
 54 
  font-size: 1rem;
- 
 
 55 
  flex-grow: 1;
- 
 
 56 
`
59 
 
 57 
 
60 
const OPTIONS = {
 58 
const OPTIONS = {
61 
  GROUP: 'group',
 59 
  GROUP: 'group',
62 
  CONFERENCE: 'conference',
 60 
  CONFERENCE: 'conference',
63 
  ADD_CONTACTS: 'addContacts',
 61 
  ADD_CONTACTS: 'addContacts',
Línea 253... Línea 251...
253 
 
 251 
 
254 
  const tabsOptions = {
 252 
  const tabsOptions = {
255 
    group: (
 253 
    group: (
256 
      <ul>
 254 
      <ul>
257 
        {entity?.url_get_contact_group_list && (
 255 
        {entity?.url_get_contact_group_list && (
- 
 
 256 
          <li>
258 
          <li
 257 
            <button
259 
            className="optionsTab__option"
 258 
              className="option-tab"
260 
            onClick={() => showOptions(OPTIONS.LIST_CONTACTS)}
 259 
              onClick={() => showOptions(OPTIONS.LIST_CONTACTS)}
261 
          >
 - 
 
262 
            <span className="optionsTab__option__icon">
 260 
            >
263 
              <i className="fa fa-group" />
 261 
              <i className="fa fa-group" />
264 
              Integrantes
 262 
              Integrantes
265 
            </span>
 263 
            </button>
266 
          </li>
 264 
          </li>
267 
        )}
 265 
        )}
268 
        {entity?.url_add_user_to_group && (
 266 
        {entity?.url_add_user_to_group && (
- 
 
 267 
          <li>
269 
          <li
 268 
            <button
270 
            className="optionsTab__option"
 269 
              className="option-tab"
271 
            onClick={() => showOptions(OPTIONS.ADD_CONTACTS)}
 270 
              onClick={() => showOptions(OPTIONS.ADD_CONTACTS)}
272 
          >
 - 
 
273 
            <span className="optionsTab__option__icon">
 271 
            >
274 
              <i className="fa fa-user-plus"></i>
 272 
              <i className="fa fa-user-plus"></i>
275 
            </span>
 273 
              {labels.add_contacts}
276 
            {labels.add_contacts}
 274 
            </button>
277 
          </li>
 275 
          </li>
278 
        )}
 276 
        )}
- 
 
 277 
        {entity?.url_zoom && (
279 
        {entity?.url_zoom && (
 278 
          <li>
280 
          <li className="optionsTab__option" onClick={displayConferenceModal}>
 - 
 
281 
            <span className="optionsTab__option__icon">
 279 
            <button className="option-tab" onClick={displayConferenceModal}>
282 
              <i className="fa fa-user-plus" />
 280 
              <i className="fa fa-user-plus" />
283 
            </span>
 281 
              {labels.create_conference}
284 
            {labels.create_conference}
 282 
            </button>
285 
          </li>
 283 
          </li>
286 
        )}
 284 
        )}
287 
        {entity?.url_delete && (
 285 
        {entity?.url_delete && (
288 
          <li
 286 
          <li>
289 
            className="optionsTab__option"
 287 
            <button
290 
            style={{ color: 'red' }}
 288 
              className="option-tab"
291 
            onClick={() => {
 289 
              onClick={() => {
292 
              handleConfirmModalShow()
 290 
                handleConfirmModalShow()
293 
              modalActionUrl.current = entity?.url_delete
 291 
                modalActionUrl.current = entity?.url_delete
294 
            }}
 292 
              }}
295 
          >
 - 
 
296 
            <span className="optionsTab__option__icon">
 293 
            >
297 
              <i className="fa fa-trash"></i>
 294 
              <i className="fa fa-trash"></i>
298 
            </span>
 295 
              Eliminar grupo
299 
            Eliminar grupo
 296 
            </button>
300 
          </li>
 297 
          </li>
301 
        )}
 298 
        )}
302 
        {!!entity?.url_leave && (
 299 
        {!!entity?.url_leave && (
303 
          <li
 300 
          <li>
304 
            className="optionsTab__option"
 301 
            <button
305 
            style={{ color: 'red' }}
 302 
              className="option-tab"
306 
            onClick={() => {
 303 
              onClick={() => {
307 
              handleConfirmModalShow()
 304 
                handleConfirmModalShow()
308 
              modalActionUrl.current = entity?.url_leave
 305 
                modalActionUrl.current = entity?.url_leave
309 
            }}
 306 
              }}
310 
          >
 - 
 
311 
            <span className="optionsTab__option__icon">
 307 
            >
312 
              <i className="fa fa-user-times"></i>
 308 
              <i className="fa fa-user-times"></i>
313 
            </span>
 309 
              Dejar grupo
314 
            Dejar grupo
 310 
            </button>
315 
          </li>
 311 
          </li>
316 
        )}
 312 
        )}
317 
      </ul>
 313 
      </ul>
318 
    ),
 314 
    ),
Línea 448... Línea 444...
448 
 
 444 
 
449 
  return (
 445 
  return (
450 
    <>
 446 
    <>
451 
      <div className="personal-chat">
 447 
      <div className="personal-chat">
- 
 
 448 
        <div className={`chat-header ${not_seen_messages ? 'notify' : ''}`}>
452 
        <div className={`chat-header ${not_seen_messages ? 'notify' : ''}`}>
 449 
          <Avatar
- 
 
 450 
            src={entity?.image || '/images/users-group.png'}
- 
 
 451 
            sx={{ width: '36px', height: '36px' }}
453 
          <img src={entity?.image} alt="avatar-image" />
 452 
          />
454 
          <div className="info-content">
 453 
          <div className="info-content">
455 
            <a href={entity?.profile} target="_blank" rel="noreferrer">
 454 
            <a href={entity?.profile} target="_blank" rel="noreferrer">
456 
              {entity?.name}
 455 
              {entity?.name}
457 
            </a>
 456 
            </a>
Línea 485... Línea 484...
485 
          className="panel-body"
 484 
          className="panel-body"
486 
          style={{ display: !minimized ? 'block' : 'none' }}
 485 
          style={{ display: !minimized ? 'block' : 'none' }}
487 
        >
 486 
        >
488 
          {optionTab ? (
 487 
          {optionTab ? (
489 
            <StyledShowOptions>
 488 
            <StyledShowOptions>
490 
              <IconButton
 - 
 
491 
                sx={{ marginLeft: '.5rem' }}
 - 
 
492 
                onClick={() => showOptions(OPTIONS.INITIAL)}
 489 
              <StyledComeBack onClick={() => showOptions(OPTIONS.INITIAL)}>
493 
              >
 - 
 
494 
                <ArrowBackIos />
 490 
                <ArrowBackIos />
- 
 
 491 
                {labels.back}
495 
              </IconButton>
 492 
              </StyledComeBack>
496 
              <div className="optionsTab">{tabsOptions[optionTab]}</div>
 493 
              <div className="optionsTab">{tabsOptions[optionTab]}</div>
497 
            </StyledShowOptions>
 494 
            </StyledShowOptions>
498 
          ) : (
 495 
          ) : (
499 
            <>
 496 
            <>
500 
              <ChatList
 497 
              <ChatList