Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3153 Rev 3239
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React, { useState } from 'react'
2 
import {
 - 
 
3 
  Accordion,
 2 
import { useNavigate } from 'react-router-dom'
4 
  AccordionDetails,
 3 
import { useDispatch } from 'react-redux'
5 
  AccordionSummary,
 4 
import { Typography } from '@mui/material'
6 
  Box,
 5 
 
7 
  Typography
 6 
import { useHabits } from '@hooks'
8 
} from '@mui/material'
 7 
import { deleteHabit } from '@services/habits/habits'
9 
import { ExpandMore, StarRateRounded } from '@mui/icons-material'
 8 
import { addNotification } from '@store/notification/notification.actions'
Línea 10... Línea 9...
10 
 
 9 
 
- 
 
 10 
import Widget from '@components/UI/Widget'
- 
 
 11 
import Options from '@components/UI/Option'
Línea 11... Línea 12...
11 
import Widget from '@components/UI/Widget'
 12 
import ConfirmModal from '@components/modals/ConfirmModal'
12 
 
 13 
 
13 
export default function HabitItem({
 14 
export default function HabitItem({
14 
  habit: {
 15 
  habit: {
15 
    id,
 16 
    id = 1,
16 
    name,
 - 
 
17 
    description,
 17 
    name = 'Habito 1',
18 
    action = {
 - 
 
19 
      frequency: 'Diariamente'
 18 
    description = 'Prueba',
20 
    },
 19 
    intelligence = 'physical',
21 
    method = {
 20 
    actions = {
22 
      type: 'video',
 - 
 
23 
      content: 'https://example.com/ejercicio-diario.mp4'
 21 
      link_edit:
24 
    },
 22 
        'https://dev-services.leaderslinked.com/habits/skills/edit/da9210a1-c36b-4b51-b102-9f3bd1e33bc1',
25 
    goal = {
 23 
      link_delete:
26 
      amount: 30 // minutos de ejercicio diario
 24 
        'https://dev-services.leaderslinked.com/habits/skills/delete/da9210a1-c36b-4b51-b102-9f3bd1e33bc1'
27 
    }
 25 
    }
- 
 
 26 
  }
- 
 
 27 
}) {
- 
 
 28 
  const [show, setShow] = useState(false)
- 
 
 29 
  const navigate = useNavigate()
- 
 
 30 
  const dispatch = useDispatch()
- 
 
 31 
 
- 
 
 32 
  const { removeHabit, getHabitById } = useHabits()
- 
 
 33 
  const currentParadigm = getHabitById(id)
- 
 
 34 
 
- 
 
 35 
  const toggleConfirmModal = () => setShow(!show)
- 
 
 36 
 
- 
 
 37 
  const handleDelete = async () => {
- 
 
 38 
    try {
- 
 
 39 
      const response = await deleteHabit(currentParadigm.actions.link_delete)
- 
 
 40 
      dispatch(addNotification({ style: 'success', msg: response }))
- 
 
 41 
      removeHabit(id)
- 
 
 42 
    } catch (error) {
- 
 
 43 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
- 
 
 44 
    }
28 
  }
 45 
  }
29 
}) {
 46 
 
30 
  return (
 47 
  return (
31 
    <Widget>
 48 
    <>
32 
      <Widget.Body>
 49 
      <Widget>
33 
        <Box
 50 
        <Widget.Header
34 
          sx={{
 51 
          title={name}
35 
            display: 'flex',
 52 
          subheader={intelligence}
36 
            alignItems: 'center',
 53 
          renderAction={() => (
37 
            gap: 1,
 - 
 
38 
            justifyContent: 'space-between'
 - 
 
39 
          }}
 54 
            <Options>
40 
        >
 - 
 
41 
          <Typography variant='h3'>{name}</Typography>
 - 
 
42 
          <Typography variant='overline'>
 55 
              {actions.link_edit && (
43 
            <StarRateRounded />
 56 
                <Options.Item onClick={() => navigate(`edit/${id}`)}>
44 
            {goal.amount}
 57 
                  Editar
45 
          </Typography>
 58 
                </Options.Item>
46 
        </Box>
 59 
              )}
47 
        <Typography>{description}</Typography>
 - 
 
48 
        <Typography variant='overline'>{action.frequency}</Typography>
 - 
 
49 
 
 60 
              {actions.link_delete && (
50 
        <Accordion
 - 
 
51 
          sx={{
 - 
 
52 
            display: method.content ? 'block' : 'none',
 - 
 
53 
            backgroundColor: 'transparent',
 - 
 
54 
            boxShadow: 'none',
 - 
 
55 
            margin: '0 !important',
 61 
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
56 
            '&::before': {
 - 
 
57 
              height: 0
 62 
              )}
58 
            }
 63 
            </Options>
59 
          }}
 64 
          )}
60 
        >
 65 
        />
61 
          <AccordionSummary
 66 
        <Widget.Body>
62 
            expandIcon={<ExpandMore />}
 67 
          <Typography>{description}</Typography>
63 
            disableRipple
 - 
 
64 
            sx={{
 - 
 
65 
              minHeight: 'auto !important',
 - 
 
66 
              padding: '0 1rem',
 - 
 
67 
              '& .MuiAccordionSummary-content': {
 68 
        </Widget.Body>
68 
                margin: '0 !important'
 69 
      </Widget>
69 
              }
 - 
 
70 
            }}
 - 
 
71 
          >
 70 
      <ConfirmModal
72 
            <Typography variant='h3'>Método</Typography>
 71 
        show={show}
73 
          </AccordionSummary>
 72 
        onClose={toggleConfirmModal}
74 
          <AccordionDetails>
 73 
        title='Borrar'
75 
            <Widget.Media src={method.content} alt={name} />
 - 
 
76 
          </AccordionDetails>
 74 
        message='¿Estás seguro de que quieres borrar este hábito?'
77 
        </Accordion>
 75 
        onAccept={handleDelete}
78 
      </Widget.Body>
 76 
      />
79 
    </Widget>
 77 
    </>