Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 853 Rev 854
Línea 3... Línea 3...
3 
import { Link } from 'react-router-dom'
 3 
import { Link } from 'react-router-dom'
4 
import { Avatar, IconButton } from '@mui/material'
 4 
import { Avatar, IconButton } from '@mui/material'
5 
import { useSelector } from 'react-redux'
 5 
import { useSelector } from 'react-redux'
6 
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 6 
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
7 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 7 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
8 
import styled from 'styled-components'
 8 
import styled, { css } from 'styled-components'
Línea 9... Línea 9...
9 
 
 9 
 
10 
import EmptySection from '../../UI/EmptySection'
 10 
import EmptySection from '../../UI/EmptySection'
Línea 11... Línea 11...
11 
import StyledContainer from '../../widgets/WidgetLayout'
 11 
import StyledContainer from '../../widgets/WidgetLayout'
12 
 
 12 
 
13 
const GroupsHelperContainer = styled(StyledContainer)`
 13 
const HelperContainer = styled(StyledContainer)`
Línea 14... Línea 14...
14 
  padding: 10px;
 14 
  padding: 10px;
15 
`
 15 
`
16 
 
 16 
 
17 
const StyledGroupItem = styled.div`
 17 
const HelperItem = styled.div`
18 
  cursor: pointer;
 18 
  cursor: pointer;
19 
  display: flex;
 19 
  display: flex;
20 
  align-items: center;
 20 
  align-items: center;
Línea -... Línea 21...
- 
 
 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: 250px;
- 
 
 32 
  transition: all 0.2s ease-in-out;
- 
 
 33 
 
- 
 
 34 
  ${(props) =>
- 
 
 35 
    props.show &&
- 
 
 36 
    css`
21 
  justify-content: space-between;
 37 
      height: auto;
22 
  width: 100%;
 38 
    `}
Línea 23... Línea 39...
23 
`
 39 
`
24 
 
 40 
 
25 
const Groups = () => {
 41 
const Groups = () => {
26 
  const labels = useSelector(({ intl }) => intl.labels)
 42 
  const labels = useSelector(({ intl }) => intl.labels)
27 
 
 43 
 
28 
  return (
 44 
  return (
29 
    <GroupsHelperContainer>
 45 
    <HelperContainer>
30 
      <Groups.Item
 46 
      <Groups.Item
31 
        url='/helpers/my-groups'
 47 
        url='/helpers/my-groups'
32 
        title={labels.my_groups}
 48 
        title={labels.my_groups}
33 
        display={true}
 49 
        display={true}
34 
      />
 50 
      />
35 
      <Groups.Item
 51 
      <Groups.Item
36 
        url='/helpers/groups-suggestion'
 52 
        url='/helpers/groups-suggestion'
Línea 37... Línea 53...
37 
        title={labels.suggest_groups}
 53 
        title={labels.suggest_groups}
38 
      />
 54 
      />
39 
    </GroupsHelperContainer>
 55 
    </HelperContainer>
40 
  )
 56 
  )
41 
}
 57 
}
42 
 
 58 
 
43 
const Item = ({
 59 
const Item = ({
44 
  url = '/helpers/my-groups',
 - 
 
45 
  title = 'Mis grupos',
 60 
  url = '/helpers/my-groups',
- 
 
 61 
  title = 'Mis grupos',
Línea 46... Línea 62...
46 
  display = false
 62 
  display = false
47 
}) => {
 63 
}) => {
48 
  const [widgetData, setWidgetData] = useState([])
 64 
  const [widgetData, setWidgetData] = useState([])
Línea 76... Línea 92...
76 
    getData()
 92 
    getData()
77 
  }, [])
 93 
  }, [])
Línea 78... Línea 94...
78 
 
 94 
 
79 
  return (
 95 
  return (
80 
    <>
 96 
    <>
81 
      <StyledGroupItem>
 97 
      <HelperItem>
82 
        <span>{title}</span>
 98 
        <span>{title}</span>
83 
        <IconButton onClick={toggleMenu}>
 99 
        <IconButton onClick={toggleMenu}>
84 
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
 100 
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
85 
        </IconButton>
 101 
        </IconButton>
Línea 86... Línea 102...
86 
      </StyledGroupItem>
 102 
      </HelperItem>
87 
 
 103 
 
88 
      <ul className={`helper__list ${displayMenu ? 'show' : 'hide'}`}>
 104 
      <HelperList>
89 
        {widgetData.length ? (
 105 
        {widgetData.length ? (
90 
          dataSlice().map(({ id, name, profile, image }) => (
 106 
          dataSlice().map(({ id, name, profile, image }) => (
91 
            <li key={id}>
 107 
            <li key={id}>
Línea 113... Línea 129...
113 
            onClick={() => setLookMore(!lookMore)}
 129 
            onClick={() => setLookMore(!lookMore)}
114 
          >
 130 
          >
115 
            <span>{lookMore ? labels.view_less : labels.view_more}</span>
 131 
            <span>{lookMore ? labels.view_less : labels.view_more}</span>
116 
          </li>
 132 
          </li>
117 
        )}
 133 
        )}
118 
      </ul>
 134 
      </HelperList>
119 
    </>
 135 
    </>
120 
  )
 136 
  )
121 
}
 137 
}
Línea 122... Línea 138...
122 
 
 138