Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 959 Rev 960
Línea 1... Línea 1...
1 
import React, { useEffect, useMemo, useState } from 'react'
 1 
import React, { useEffect, useMemo, useState } from 'react'
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from 'react-router-dom'
3 
import { axios } from '../../../utils'
 3 
import { axios } from '../../../utils'
4 
import { useSelector } from 'react-redux'
 4 
import { useSelector } from 'react-redux'
5 
import { Box } from '@mui/material'
 5 
import { Avatar, Box } from '@mui/material'
6 
import styled from 'styled-components'
 6 
import styled from 'styled-components'
Línea 7... Línea 7...
7 
 
 7 
 
8 
import StyledContainer from '../WidgetLayout'
 8 
import StyledContainer from '../WidgetLayout'
Línea 9... Línea 9...
9 
import EmptySection from '../../UI/EmptySection'
 9 
import EmptySection from '../../UI/EmptySection'
10 
 
 - 
 
11 
const WidgetHeader = styled(StyledContainer.Header)`
 10 
 
- 
 
 11 
const WidgetHeader = styled(StyledContainer.Header)`
12 
  padding-bottom: 0;
 12 
  align-items: baseline;
13 
  align-items: baseline;
 13 
  border: 1px solid var(--border-primary);
14 
  span {
 14 
  span {
15 
    cursor: pointer;
 15 
    cursor: pointer;
Línea -... Línea 16...
- 
 
 16 
  }
- 
 
 17 
`
- 
 
 18 
 
- 
 
 19 
const WidgetItem = styled.div`
- 
 
 20 
  align-items: center;
- 
 
 21 
  border-bottom: 1px solid var(--border-primary);
- 
 
 22 
  display: flex;
- 
 
 23 
  padding: 0.5rem 1rem;
- 
 
 24 
  gap: 0.5rem;
- 
 
 25 
  width: 100%;
16 
  }
 26 
  justify-content: space-between;
17 
`
 27 
`
18 
 
 28 
 
19 
const SuggestWidget = ({
 29 
const SuggestWidget = ({
20 
  title = 'Mis Grupos:',
 30 
  title = 'Mis Grupos:',
Línea 44... Línea 54...
44 
  }, [url])
 54 
  }, [url])
Línea 45... Línea 55...
45 
 
 55 
 
46 
  return (
 56 
  return (
47 
    <StyledContainer>
 57 
    <StyledContainer>
48 
      <WidgetHeader title={title}>
 58 
      <WidgetHeader title={title}>
49 
        {items.length >= 3 ? (
 59 
        {items.length > 3 ? (
50 
          <span onClick={() => setLookMore(!lookMore)}>
 60 
          <span onClick={() => setLookMore(!lookMore)}>
51 
            {lookMore ? labels.view_less : labels.view_more}
 61 
            {lookMore ? labels.view_less : labels.view_more}
52 
          </span>
 62 
          </span>
53 
        ) : null}
 63 
        ) : null}
Línea 54... Línea -...
54 
      </WidgetHeader>
 - 
 
55 
 
 64 
      </WidgetHeader>
56 
      <StyledContainer.Body>
 65 
 
57 
        <Box
 66 
      <Box
58 
          display='flex'
 67 
        display='flex'
59 
          flexDirection='column'
 68 
        flexDirection='column'
60 
          maxHeight='350'
 69 
        maxHeight='210'
61 
          overflow='auto'
 70 
        overflow='auto'
62 
        >
 71 
      >
63 
          {data.length ? (
 72 
        {data.length ? (
64 
            items.map((suggest) => (
 73 
          items.map((suggest) => (
65 
              <SuggestWidget.Item
 74 
            <SuggestWidget.Item
66 
                key={suggest.id}
 75 
              key={suggest.id}
67 
                suggest={suggest}
 76 
              suggest={suggest}
68 
                btnLabelAccept={btnLabelAccept}
 77 
              btnLabelAccept={btnLabelAccept}
69 
              />
 78 
            />
70 
            ))
 79 
          ))
71 
          ) : (
 80 
        ) : (
72 
            <EmptySection align='left' message={labels?.datatable_empty} />
 81 
          <EmptySection align='left' message={labels?.datatable_empty} />
73 
          )}
 - 
 
74 
        </Box>
 82 
        )}
75 
      </StyledContainer.Body>
 83 
      </Box>
76 
    </StyledContainer>
 84 
    </StyledContainer>
Línea 77... Línea 85...
77 
  )
 85 
  )
- 
 
 86 
}
78 
}
 87 
 
Línea 79... Línea 88...
79 
 
 88 
const Item = ({ suggest, btnLabelAccept }) => {
80 
const Item = ({ suggest, btnLabelAccept }) => {
 89 
  const { name, profile, image } = suggest
81 
  const labels = useSelector(({ intl }) => intl.labels)
 90 
  const labels = useSelector(({ intl }) => intl.labels)
- 
 
 91 
 
- 
 
 92 
  return (
82 
 
 93 
    <WidgetItem>
83 
  return (
 94 
      <div className='d-inline-flex align-items-center'>
84 
    <div className='user'>
 95 
        <Avatar
- 
 
 96 
          sx={{ width: 60, height: 60 }}
85 
      <div className='d-inline-flex align-items-center'>
 97 
          src={image}
- 
 
 98 
          alt={`${name} profile image`}
- 
 
 99 
        />
86 
        <Link to={suggest.profile}>
 100 
 
- 
 
 101 
        <h4 className='break-ellipsis' title={name}>
87 
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
 102 
          {name}
88 
        </Link>
 103 
        </h4>
89 
        <h4 className='break-ellipsis'>{suggest.name}</h4>
 104 
      </div>
90 
      </div>
 105 
 
91 
      <Link to={suggest.profile} className='btn btn-primary ml-auto'>
 106 
      <Link to={profile} className='btn btn-primary ml-auto'>
92 
        {btnLabelAccept || labels.view_profile}
 107 
        {btnLabelAccept || labels.view_profile}
Línea 93... Línea 108...
93 
      </Link>
 108 
      </Link>