Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3324 Rev 3719
Línea 1... Línea 1...
1 
import React, { useMemo, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react';
2 
import { useNavigate } from 'react-router-dom'
 2 
import { useNavigate } from 'react-router-dom';
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux';
4 
import { Typography } from '@mui/material'
 4 
import { Typography } from '@mui/material';
5 
 
 5 
 
6 
import { useHabitProgress } from '@hooks'
 6 
import { useHabitProgress } from '@hooks';
7 
import { deleteProgress } from '@services/habits/habits'
 7 
import { deleteProgress } from '@services/habits/habits';
8 
import { addNotification } from '@store/notification/notification.actions'
 8 
import { addNotification } from '@store/notification/notification.actions';
9 
 
 9 
 
10 
import Widget from '@components/UI/Widget'
 10 
import Widget from '@components/UI/Widget';
11 
import Options from '@components/UI/Option'
 11 
import Options from '@components/UI/Option';
12 
import ConfirmModal from '@components/modals/ConfirmModal'
 12 
import ConfirmModal from '@components/modals/ConfirmModal';
13 
 
 13 
 
14 
export default function ProgressItem({ progress }) {
 14 
export default function ProgressItem({ progress }) {
15 
  const [show, setShow] = useState(false)
 15 
  const [show, setShow] = useState(false);
16 
  const navigate = useNavigate()
 16 
  const navigate = useNavigate();
17 
  const dispatch = useDispatch()
 17 
  const dispatch = useDispatch();
18 
 
 18 
 
19 
  const { id, date, quantitative_value, qualitative_description, actions } =
 19 
  const { id, date, quantitative_value, qualitative_description, actions } = progress;
20 
    progress
 - 
 
21 
 
 20 
 
22 
  const { removeItem, getItemById } = useHabitProgress()
 21 
  const { removeItem, getItemById } = useHabitProgress();
23 
  const currentRegister = getItemById(id)
 22 
  const currentRegister = getItemById(id);
24 
 
 23 
 
25 
  const formatDate = useMemo(() => {
 24 
  const formatDate = useMemo(() => {
26 
    const intlDate = new Intl.DateTimeFormat('es', {
 25 
    const intlDate = new Intl.DateTimeFormat('es', {
27 
      dateStyle: 'full',
 26 
      dateStyle: 'full',
28 
      timeStyle: 'medium',
 27 
      timeStyle: 'medium',
29 
      timeZone: 'America/Bogota'
 28 
      timeZone: 'America/Bogota'
30 
    }).format(new Date(date))
 29 
    }).format(new Date(date));
31 
    return intlDate
 30 
    return intlDate;
32 
  }, [date])
 31 
  }, [date]);
33 
 
 32 
 
34 
  const toggleConfirmModal = () => setShow(!show)
 33 
  const toggleConfirmModal = () => setShow(!show);
35 
 
 34 
 
36 
  const handleDelete = async () => {
 35 
  const handleDelete = async () => {
37 
    try {
 36 
    try {
38 
      const response = await deleteProgress(
 - 
 
39 
        currentRegister?.actions.link_delete
 37 
      const response = await deleteProgress(currentRegister?.actions.link_delete);
40 
      )
 - 
 
41 
      dispatch(addNotification({ style: 'success', msg: response }))
 38 
      dispatch(addNotification({ style: 'success', msg: response }));
42 
      removeItem(id)
 39 
      removeItem(id);
43 
    } catch (error) {
 40 
    } catch (error) {
44 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 41 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
45 
    }
 42 
    }
46 
  }
 43 
  };
47 
 
 44 
 
48 
  return (
 45 
  return (
49 
    <>
 46 
    <>
50 
      <Widget>
 47 
      <Widget>
51 
        <Widget.Header
 48 
        <Widget.Header
52 
          title={formatDate}
 49 
          title={formatDate}
53 
          subheader={quantitative_value}
 50 
          subheader={quantitative_value}
54 
          renderAction={() => (
 51 
          renderAction={() => (
55 
            <Options>
 52 
            <Options>
56 
              {actions.link_edit && (
 53 
              {actions.link_edit && (
57 
                <Options.Item onClick={() => navigate(`edit/${id}`)}>
 54 
                <Options.Item onClick={() => navigate(`edit/${id}`)}>Editar</Options.Item>
58 
                  Editar
 - 
 
59 
                </Options.Item>
 - 
 
60 
              )}
 55 
              )}
61 
              {actions.link_delete && (
 56 
              {actions.link_delete && (
62 
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
 57 
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
63 
              )}
 58 
              )}
64 
            </Options>
 59 
            </Options>
65 
          )}
 60 
          )}
66 
        />
 61 
        />
67 
 
 62 
 
68 
        <Widget.Body>
 63 
        <Widget.Body>
69 
          <Typography>{qualitative_description}</Typography>
 64 
          <Typography>{qualitative_description}</Typography>
70 
        </Widget.Body>
 65 
        </Widget.Body>
71 
      </Widget>
 66 
      </Widget>
72 
      <ConfirmModal
 67 
      <ConfirmModal
73 
        show={show}
 68 
        show={show}
74 
        title='Borrar'
 69 
        title='Borrar'
75 
        message='¿Estás seguro de que deseas borrar este registro?'
 70 
        message='¿Estás seguro de que deseas borrar este registro?'
76 
        onAccept={handleDelete}
 71 
        onAccept={handleDelete}
77 
        onClose={toggleConfirmModal}
 72 
        onClose={toggleConfirmModal}
78 
      />
 73 
      />
79 
    </>
 74 
    </>
80 
  )
 75 
  );
81 
}
 76 
}