Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 1220
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import { Modal } from 'react-bootstrap'
 2 
import { Link } from 'react-router-dom'
- 
 
 3 
import { Avatar, IconButton } from '@mui/material'
- 
 
 4 
import { Clear, Delete, Done } from '@mui/icons-material'
3 
import MemberTemplate from './MemberTemplate'
 5 
import styled from 'styled-components'
- 
 
 6 
 
- 
 
 7 
import Modal from 'components/UI/Modal'
- 
 
 8 
 
- 
 
 9 
const StyledMemberContainer = styled.div`
- 
 
 10 
  display: flex;
- 
 
 11 
  align-items: center;
- 
 
 12 
  justify-content: space-between;
- 
 
 13 
  gap: 0.5rem;
- 
 
 14 
  padding: 10px 0;
- 
 
 15 
  border-top: 1px solid ${(props) => props.theme.border.color.primary};
- 
 
 16 
`
- 
 
 17 
 
- 
 
 18 
const StyledMemberInfo = styled.div`
- 
 
 19 
  display: flex;
- 
 
 20 
  align-items: center;
- 
 
 21 
  gap: 0.5rem;
- 
 
 22 
`
- 
 
 23 
 
- 
 
 24 
const StyledMemberImage = styled(Avatar)`
- 
 
 25 
  width: 40px !important;
- 
 
 26 
  height: 40px !important;
- 
 
 27 
`
Línea 4... Línea 28...
4 
 
 28 
 
5 
const MembersModal = ({
 29 
const MembersModal = ({
6 
  isShow = false,
 30 
  isShow = false,
7 
  members = [],
 31 
  members = [],
8 
  handleClose = function () {},
 32 
  handleClose = function () {},
9 
  handleAction = function () {},
 33 
  handleAction = function () {}
10 
}) => {
 34 
}) => {
11 
  return (
 35 
  return (
12 
    <Modal show={isShow} onHide={handleClose}>
 - 
 
13 
      <Modal.Header closeButton>
 - 
 
14 
        <h3>Miembros</h3>
 - 
 
15 
      </Modal.Header>
 - 
 
16 
      <Modal.Body>
 36 
    <Modal title='Miembros' show={isShow} onHide={handleClose}>
17 
        {members.map((member) => (
 - 
 
18 
          <MemberTemplate
 - 
 
19 
            key={member.id}
 - 
 
20 
            member={member}
 37 
      {members.map((member) => (
21 
            handleAction={handleAction}
 - 
 
22 
          />
 38 
        <Member key={member.id} member={member} handleAction={handleAction} />
23 
        ))}
 - 
 
24 
      </Modal.Body>
 39 
      ))}
25 
    </Modal>
 40 
    </Modal>
26 
  )
 41 
  )
Línea -... Línea 42...
- 
 
 42 
}
- 
 
 43 
 
- 
 
 44 
const Member = ({ member = {}, handleAction = function () {} }) => {
- 
 
 45 
  const { name = '', image = '', profile = '', actions = {} } = member
- 
 
 46 
 
- 
 
 47 
  return (
- 
 
 48 
    <StyledMemberContainer>
- 
 
 49 
      <StyledMemberInfo>
- 
 
 50 
        <Link to={profile}>
- 
 
 51 
          <StyledMemberImage src={image} alt={`${name} profile image`} />
- 
 
 52 
        </Link>
- 
 
 53 
 
- 
 
 54 
        <h4>{name}</h4>
- 
 
 55 
      </StyledMemberInfo>
- 
 
 56 
 
- 
 
 57 
      {actions?.link_approve && (
- 
 
 58 
        <IconButton
- 
 
 59 
          onClick={() => handleAction(actions.link_approve)}
- 
 
 60 
          title='Aprobar'
- 
 
 61 
        >
- 
 
 62 
          <Done />
- 
 
 63 
        </IconButton>
- 
 
 64 
      )}
- 
 
 65 
      {actions?.link_reject && (
- 
 
 66 
        <IconButton
- 
 
 67 
          onClick={() => handleAction(actions.link_reject)}
- 
 
 68 
          title='Rechazar'
- 
 
 69 
        >
- 
 
 70 
          <Clear />
- 
 
 71 
        </IconButton>
- 
 
 72 
      )}
- 
 
 73 
      {actions?.link_cancel && (
- 
 
 74 
        <IconButton
- 
 
 75 
          onClick={() => handleAction(actions.link_cancel)}
- 
 
 76 
          title='Cancelar'
- 
 
 77 
        >
- 
 
 78 
          <Delete />
- 
 
 79 
        </IconButton>
- 
 
 80 
      )}
- 
 
 81 
    </StyledMemberContainer>
- 
 
 82 
  )
27 
}
 83 
}