Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2614 Rev 3025
Línea 1... Línea 1...
1 
import React, { useEffect, useMemo, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react'
2 
import { useNavigate } from 'react-router-dom'
 2 
import { Link } from 'react-router-dom'
3 
import { useSelector } from 'react-redux'
 3 
import { useSelector } from 'react-redux'
4 
import { Avatar, Box } from '@mui/material'
 - 
 
5 
import styled from 'styled-components'
 - 
 
Línea 6... Línea 4...
6 
 
 4 
 
Línea 7... Línea 5...
7 
import { axios } from '@app/utils'
 5 
import { useFetch } from '@hooks'
8 
 
 6 
 
- 
 
 7 
import Widget from '@components/UI/Widget'
- 
 
 8 
import EmptySection from '@app/components/UI/EmptySection'
- 
 
 9 
import {
- 
 
 10 
  Avatar,
- 
 
 11 
  Button,
- 
 
 12 
  List,
- 
 
 13 
  ListItem,
- 
 
 14 
  ListItemAvatar,
- 
 
 15 
  ListItemButton,
9 
import WidgetWrapper from '../WidgetLayout'
 16 
  ListItemText
Línea 10... Línea -...
10 
import EmptySection from '@app/components/UI/EmptySection'
 - 
 
11 
import Button from '@app/components/UI/buttons/Buttons'
 - 
 
12 
 
 - 
 
13 
const WidgetHeader = styled(WidgetWrapper.Header)`
 - 
 
14 
  align-items: baseline;
 - 
 
15 
  border-bottom: 1px solid var(--border-primary);
 - 
 
16 
  span {
 - 
 
17 
    cursor: pointer;
 - 
 
18 
  }
 - 
 
19 
`
 - 
 
20 
 
 - 
 
21 
const WidgetItem = styled.div`
 - 
 
22 
  align-items: center;
 - 
 
23 
  border-bottom: 1px solid var(--border-primary);
 - 
 
24 
  display: flex;
 - 
 
25 
  padding: 0.5rem 1rem;
 - 
 
26 
  gap: 0.5rem;
 - 
 
27 
  width: 100%;
 - 
 
28 
  justify-content: space-between;
 - 
 
29 
`
 - 
 
30 
 
 - 
 
31 
const WidgetContent = styled.div`
 - 
 
32 
  display: inline-flex;
 - 
 
33 
  align-items: center;
 - 
 
34 
  gap: 0.5rem;
 - 
 
35 
  overflow: hidden;
 - 
 
36 
  max-width: 100%;
 - 
 
37 
  h2 {
 - 
 
38 
    text-overflow: ellipsis;
 - 
 
39 
    white-space: nowrap;
 - 
 
40 
    overflow: hidden;
 - 
 
41 
  }
 17 
} from '@mui/material'
42 
`
 - 
 
43 
 
 - 
 
44 
const SuggestWidget = ({
 - 
 
45 
  title = 'Mis Grupos:',
 - 
 
46 
  url = '/helpers/my-groups',
 18 
import Spinner from '@components/UI/Spinner'
47 
  btnLabelAccept = 'Ver'
 19 
 
48 
}) => {
 20 
const SuggestWidget = ({ title, url }) => {
Línea 49... Línea 21...
49 
  const [data, setData] = useState([])
 21 
  const { data, isLoading } = useFetch(url, [])
50 
  const [lookMore, setLookMore] = useState(false)
 22 
  const [lookMore, setLookMore] = useState(false)
51 
  const labels = useSelector(({ intl }) => intl.labels)
 23 
  const labels = useSelector(({ intl }) => intl.labels)
52 
 
 24 
 
Línea 53... Línea -...
53 
  const items = useMemo(
 - 
 
54 
    () => (lookMore ? data : [...data].slice(0, 3)),
 - 
 
55 
    [lookMore, data]
 - 
 
56 
  )
 - 
 
57 
 
 - 
 
58 
  useEffect(() => {
 - 
 
59 
    if (!url) return
 - 
 
60 
    const getData = (url) => {
 - 
 
61 
      axios.get(url).then(({ data: response }) => {
 - 
 
62 
        const { success, data } = response
 - 
 
63 
        if (success) {
 - 
 
64 
          setData(data.sort((a, b) => a.priority - b.priority).reverse())
 - 
 
65 
        }
 - 
 
66 
      })
 - 
 
67 
    }
 25 
  const items = useMemo(
68 
 
 26 
    () => (lookMore ? data : [...data].slice(0, 3)),
69 
    getData(url)
 27 
    [lookMore, data]
70 
  }, [url])
 28 
  )
71 
 
 - 
 
72 
  return (
 - 
 
73 
    <WidgetWrapper>
 29 
 
74 
      <WidgetHeader title={title}>
 30 
  return (
75 
        {data.length > 3 ? (
 - 
 
76 
          <span onClick={() => setLookMore(!lookMore)}>
 31 
    <Widget>
77 
            {lookMore ? labels.view_less : labels.view_more}
 32 
      <Widget.Header
78 
          </span>
 33 
        title={title}
79 
        ) : null}
 34 
        renderAction={() => {
80 
      </WidgetHeader>
 35 
          if (data.length <= 3) return null
81 
 
 36 
 
82 
      <Box
 37 
          return (
83 
        display='flex'
 38 
            <Button onClick={() => setLookMore(!lookMore)}>
84 
        flexDirection='column'
 - 
 
85 
        maxHeight='201'
 39 
              {lookMore ? labels.view_less : labels.view_more}
86 
        overflow='auto'
 40 
            </Button>
- 
 
 41 
          )
87 
      >
 42 
        }}
88 
        {data.length ? (
 43 
      />
89 
          items.map((suggest) => (
 - 
 
90 
            <SuggestWidget.Item
 - 
 
91 
              key={suggest.id}
 44 
      <Widget.Body>
- 
 
 45 
        {isLoading && <Spinner />}
- 
 
 46 
 
- 
 
 47 
        {!isLoading && data.length === 0 ? (
- 
 
 48 
          <EmptySection message={labels?.datatable_empty} />
- 
 
 49 
        ) : (
92 
              suggest={suggest}
 50 
          <List>
- 
 
 51 
            {items.map(({ name, profile, image, id }) => (
- 
 
 52 
              <ListItem key={id}>
- 
 
 53 
                <ListItemButton LinkComponent={Link} to={profile} disableRipple>
- 
 
 54 
                  <ListItemAvatar>
- 
 
 55 
                    <Avatar src={image} alt={`${name} profile avatar`} />
- 
 
 56 
                  </ListItemAvatar>
- 
 
 57 
 
93 
              btnLabelAccept={btnLabelAccept}
 58 
                  <ListItemText primary={name} />
94 
            />
 - 
 
95 
          ))
 - 
 
96 
        ) : (
 - 
 
97 
          <EmptySection align='left' message={labels?.datatable_empty} />
 - 
 
98 
        )}
 - 
 
99 
      </Box>
 - 
 
100 
    </WidgetWrapper>
 - 
 
101 
  )
 - 
 
102 
}
 - 
 
103 
 
 - 
 
104 
const Item = ({ suggest, btnLabelAccept }) => {
 - 
 
105 
  const { name, profile, image } = suggest
 - 
 
106 
  const labels = useSelector(({ intl }) => intl.labels)
 - 
 
107 
  const navigate = useNavigate()
 - 
 
108 
 
 - 
 
109 
  return (
 - 
 
110 
    <WidgetItem>
 - 
 
111 
      <WidgetContent>
 - 
 
112 
        <Avatar
 - 
 
113 
          sx={{ width: 50, height: 50 }}
 59 
                </ListItemButton>
114 
          src={image}
 - 
 
115 
          alt={`${name} profile image`}
 - 
 
116 
        />
 - 
 
117 
        <h2 title={name}>{name}</h2>
 - 
 
118 
      </WidgetContent>
 60 
              </ListItem>
119 
 
 61 
            ))}
120 
      <Button onClick={() => navigate(profile)}>
 62 
          </List>
Línea 121... Línea -...
121 
        {btnLabelAccept || labels.view_profile}
 - 
 
122 
      </Button>
 - 
 
123 
    </WidgetItem>
 63 
        )}