Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2875 Rev 2921
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from '../../../utils'
 - 
 
3 
import { Link } from 'react-router-dom'
 - 
 
4 
import { Avatar, IconButton } from '@mui/material'
 - 
 
5 
import { useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux'
6 
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 3 
import { IconButton, styled } from '@mui/material'
7 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 4 
import { ExpandLess, ExpandMore } from '@mui/icons-material'
8 
import styled, { css } from 'styled-components'
 - 
 
Línea 9... Línea 5...
9 
 
 5 
 
10 
import EmptySection from '../../UI/EmptySection'
 - 
 
Línea 11... Línea 6...
11 
import WidgetWrapper from '../../widgets/WidgetLayout'
 6 
import { axios } from '@utils'
12 
 
 7 
 
13 
const HelperContainer = styled(WidgetWrapper)`
 - 
 
Línea 14... Línea 8...
14 
  padding: 10px;
 8 
import Widget from '@components/UI/Widget'
15 
`
 9 
import List from '@components/UI/List'
16 
 
 10 
 
17 
const HelperItem = styled.div`
 11 
const HelperItem = styled('div')`
18 
  cursor: pointer;
 12 
  cursor: pointer;
19 
  display: flex;
 13 
  display: flex;
20 
  align-items: center;
 14 
  align-items: center;
Línea 21... Línea -...
21 
  justify-content: space-between;
 - 
 
22 
  width: 100%;
 - 
 
23 
`
 - 
 
24 
 
 - 
 
25 
const HelperList = styled.ul`
 - 
 
26 
  display: flex;
 - 
 
27 
  flex-direction: column;
 - 
 
28 
  gap: 0.5rem;
 - 
 
29 
  overflow-y: auto;
 - 
 
30 
  height: 0;
 - 
 
31 
  max-height: 210px;
 - 
 
32 
  transition: all 0.2s ease-in-out;
 - 
 
33 
  ${(props) =>
 - 
 
34 
    props.show &&
 - 
 
35 
    css`
 - 
 
36 
      height: auto;
 - 
 
37 
    `}
 - 
 
38 
`
 - 
 
39 
 
 - 
 
40 
const HelperListItem = styled.div`
 - 
 
41 
  padding: 5px 10px;
 - 
 
42 
  display: flex;
 - 
 
43 
  align-items: center;
 - 
 
44 
  gap: 0.5rem;
 - 
 
45 
  border-radius: ${(props) => props.theme.border.radius};
 - 
 
46 
  &:hover {
 - 
 
47 
    background-color: rgba(0, 0, 0, 0.08);
 15 
  justify-content: space-between;
48 
  }
 16 
  width: 100%;
Línea 49... Línea 17...
49 
`
 17 
`
- 
 
 18 
 
50 
 
 19 
const GroupsWidget = () => {
51 
const GroupsWidget = () => {
 20 
  const labels = useSelector(({ intl }) => intl.labels)
52 
  const labels = useSelector(({ intl }) => intl.labels)
 21 
 
53 
 
 22 
  return (
54 
  return (
 23 
    <Widget>
55 
    <HelperContainer>
 24 
      <Widget.Body>
56 
      <GroupsWidget.Item url='/helpers/my-groups' title={labels.my_groups} />
 25 
        <GroupsWidget.Item url='/helpers/my-groups' title={labels.my_groups} />
- 
 
 26 
        <GroupsWidget.Item
57 
      <GroupsWidget.Item
 27 
          url='/helpers/groups-suggestion'
58 
        url='/helpers/groups-suggestion'
 28 
          title={labels.suggest_groups}
Línea 59... Línea 29...
59 
        title={labels.suggest_groups}
 29 
        />
60 
      />
 30 
      </Widget.Body>
Línea 101... Línea 71...
101 
  return (
 71 
  return (
102 
    <>
 72 
    <>
103 
      <HelperItem>
 73 
      <HelperItem>
104 
        <span>{title}</span>
 74 
        <span>{title}</span>
105 
        <IconButton onClick={toggleMenu}>
 75 
        <IconButton onClick={toggleMenu}>
106 
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
 76 
          {displayMenu ? <ExpandLess /> : <ExpandMore />}
107 
        </IconButton>
 77 
        </IconButton>
108 
      </HelperItem>
 78 
      </HelperItem>
Línea 109... Línea 79...
109 
 
 79 
 
110 
      <HelperList show={displayMenu}>
 - 
 
111 
        {widgetData.length ? (
 80 
      <List styles={{ width: '100%', height: displayMenu ? 'auto' : 0 }}>
112 
          dataSlice().map(({ id, name, profile, image }) => (
 - 
 
113 
            <li key={id}>
 - 
 
114 
              <Link to={profile} target='secondary'>
 - 
 
115 
                <HelperListItem>
 - 
 
116 
                  <Avatar
 - 
 
117 
                    src={image}
 - 
 
118 
                    alt={`${name} group image`}
 - 
 
119 
                    sx={{ width: '40px', height: '40px' }}
 - 
 
120 
                  />
 - 
 
121 
                  <span>{name}</span>
 - 
 
122 
                </HelperListItem>
 - 
 
123 
              </Link>
 - 
 
124 
            </li>
 - 
 
125 
          ))
 - 
 
126 
        ) : (
 81 
        {dataSlice().map(({ id, name, profile, image }) => (
127 
          <EmptySection message={labels.datatable_empty} />
 82 
          <List.Item key={id} image={image} title={name} url={profile} />
Línea 128... Línea 83...
128 
        )}
 83 
        ))}
129 
 
 - 
 
130 
        {widgetData.length > 3 && (
 84 
 
131 
          <li>
 85 
        {widgetData.length > 3 && (
132 
            <HelperListItem
 86 
          <List.Item
133 
              className='justify-content-center cursor-pointer'
 87 
            title={lookMore ? labels.view_less : labels.view_more}
134 
              onClick={() => setLookMore(!lookMore)}
 - 
 
135 
            >
 - 
 
136 
              <span>{lookMore ? labels.view_less : labels.view_more}</span>
 - 
 
137 
            </HelperListItem>
 88 
            onClick={() => setLookMore(!lookMore)}
138 
          </li>
 89 
          />
139 
        )}
 90 
        )}
140 
      </HelperList>
 91 
      </List>
141 
    </>
 92 
    </>
Línea 142... Línea 93...
142 
  )
 93 
  )