Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3156 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3156 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react';
2 
import {
 2 
import {
3 
  Avatar,
 3 
  Avatar,
4 
  Button,
 4 
  Button,
5 
  Card,
 5 
  Card,
6 
  CardActions,
 6 
  CardActions,
7 
  CardContent,
 7 
  CardContent,
8 
  CardHeader,
 8 
  CardHeader,
9 
  Collapse,
 9 
  Collapse,
10 
  Typography
 10 
  Typography
11 
} from '@mui/material'
 11 
} from '@mui/material';
12 
 
 12 
 
13 
export default function ReportCard({ report }) {
 13 
export default function ReportCard({ report }) {
14 
  const {
 14 
  const {
15 
    first_name = '',
 15 
    first_name = '',
16 
    last_name = '',
 16 
    last_name = '',
17 
    email = '',
 17 
    email = '',
18 
    image = '',
 18 
    image = '',
19 
    status = '',
 19 
    status = '',
20 
    reason = '',
 20 
    reason = '',
21 
    type = '',
 21 
    type = '',
22 
    commet = '',
 22 
    commet = '',
23 
    review = null,
 23 
    review = null,
24 
    date = ''
 24 
    date = ''
25 
  } = report
 25 
  } = report;
26 
  const [expanded, setExpanded] = useState(false)
 26 
  const [expanded, setExpanded] = useState(false);
27 
 
 27 
 
28 
  const handleExpandClick = () => {
 28 
  const handleExpandClick = () => {
29 
    setExpanded(!expanded)
 29 
    setExpanded(!expanded);
30 
  }
 30 
  };
31 
 
 31 
 
32 
  return (
 32 
  return (
33 
    <Card sx={{ maxWidth: 345, margin: '0 auto' }}>
 33 
    <Card sx={{ maxWidth: 345, margin: '0 auto' }}>
34 
      <CardHeader
 34 
      <CardHeader
35 
        avatar={<Avatar src={image} alt={name} />}
 35 
        avatar={<Avatar src={image} alt={name} />}
36 
        title={`${first_name} ${last_name}`}
 36 
        title={`${first_name} ${last_name}`}
37 
        subheader={date}
 37 
        subheader={date}
38 
        sx={{ p: 1 }}
 38 
        sx={{ p: 1 }}
39 
      />
 39 
      />
40 
 
 40 
 
41 
      <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
 41 
      <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
42 
        <Typography paragraph>
 42 
        <Typography paragraph>
43 
          <Typography variant='overline'>Tipo: </Typography>
 43 
          <Typography variant='overline'>Tipo: </Typography>
44 
          {type}
 44 
          {type}
45 
        </Typography>
 45 
        </Typography>
46 
        <Typography paragraph>
 46 
        <Typography paragraph>
47 
          <Typography variant='overline'>Motivo: </Typography>
 47 
          <Typography variant='overline'>Motivo: </Typography>
48 
          {reason}
 48 
          {reason}
49 
        </Typography>
 49 
        </Typography>
50 
        <Typography paragraph>
 50 
        <Typography paragraph>
51 
          <Typography variant='overline'>Estatus: </Typography>
 51 
          <Typography variant='overline'>Estatus: </Typography>
52 
          {status}
 52 
          {status}
53 
        </Typography>
 53 
        </Typography>
54 
        <Typography paragraph>
 54 
        <Typography paragraph>
55 
          <Typography variant='overline'>Email: </Typography>
 55 
          <Typography variant='overline'>Email: </Typography>
56 
          {email}
 56 
          {email}
57 
        </Typography>
 57 
        </Typography>
58 
      </CardContent>
 58 
      </CardContent>
59 
 
 59 
 
60 
      <CardActions sx={{ p: 1 }}>
 60 
      <CardActions sx={{ p: 1 }}>
61 
        <Button color='info' size='small' onClick={handleExpandClick}>
 61 
        <Button color='info' size='small' onClick={handleExpandClick}>
62 
          Detalles
 62 
          Detalles
63 
        </Button>
 63 
        </Button>
64 
      </CardActions>
 64 
      </CardActions>
65 
 
 65 
 
66 
      <Collapse in={expanded} timeout='auto' unmountOnExit>
 66 
      <Collapse in={expanded} timeout='auto' unmountOnExit>
67 
        <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
 67 
        <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
68 
          <Typography variant='overline'>Comentario:</Typography>
 68 
          <Typography variant='overline'>Comentario:</Typography>
69 
          <Typography paragraph>{commet}</Typography>
 69 
          <Typography paragraph>{commet}</Typography>
70 
          {review && (
 70 
          {review && (
71 
            <>
 71 
            <>
72 
              <Typography variant='overline'>Revisión:</Typography>
 72 
              <Typography variant='overline'>Revisión:</Typography>
73 
              <Typography paragraph>{review}</Typography>
 73 
              <Typography paragraph>{review}</Typography>
74 
            </>
 74 
            </>
75 
          )}
 75 
          )}
76 
        </CardContent>
 76 
        </CardContent>
77 
      </Collapse>
 77 
      </Collapse>
78 
    </Card>
 78 
    </Card>
79 
  )
 79 
  );
80 
}
 80 
}