Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3488 Rev 3520
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react';
 1 
import React from 'react';
2 
import { useNavigate } from 'react-router-dom';
 2 
import { useNavigate } from 'react-router-dom';
3 
import { connect } from 'react-redux';
 - 
 
4 
import { Box, IconButton, Modal } from '@mui/material';
 3 
import { Button } from '@mui/material';
5 
import Carousel from 'react-slick';
 - 
 
6 
 
 - 
 
7 
import { addNotification } from '@app/redux/notification/notification.actions';
 - 
 
8 
import { getSlide, markClose, markCompleted } from '@app/services/micro-learning';
 - 
 
9 
 
 - 
 
10 
import Button from '@app/components/UI/buttons/Buttons';
 - 
 
11 
import Spinner from '@app/components/UI/Spinner';
 - 
 
12 
import SlideCard from './slide-card';
 - 
 
13 
import { NavigateNext, NavigateBefore } from '@mui/icons-material';
 - 
 
14 
import CapsuleSuccessFeedback from './capsule-success-feedback';
 - 
 
15 
 
 - 
 
16 
const SlidesCarousel = ({
 - 
 
17 
  show = false,
 - 
 
18 
  onClose = () => null,
 - 
 
19 
  slides: currentSlides = [],
 - 
 
20 
  currentSlideIndex = 0,
 - 
 
21 
  autoPlay = false,
 - 
 
22 
  addNotification
 - 
 
23 
}) => {
 - 
 
24 
  const [loading, setLoading] = useState(false);
 - 
 
25 
  const [slides, setSlides] = useState(currentSlides);
 - 
 
26 
  const [currentSlide, setCurrentSlide] = useState(currentSlideIndex);
 - 
 
27 
  const [showCompleteFeedback, setShowCompletedFeedback] = useState(false);
 - 
 
28 
  const [completedFeedback, setCompletedFeedback] = useState('');
 - 
 
Línea -... Línea 4...
- 
 
 4 
 
- 
 
 5 
import { useSlide } from '@microlearning/hooks';
- 
 
 6 
 
- 
 
 7 
import { Spinner } from '@shared/components';
- 
 
 8 
import { CapsuleSuccessFeedback } from './capsule-success-feedback';
- 
 
 9 
import { SlideCard } from './slide-card';
- 
 
 10 
 
29 
 
 11 
export function SlideForm({ slideUuid = '', autoPlay = false }) {
Línea 30... Línea -...
30 
  const navigate = useNavigate();
 - 
 
31 
 
 - 
 
32 
  const handleComplete = async (url, uuid) => {
 12 
  const navigate = useNavigate();
33 
    try {
 13 
 
34 
      const response = await markCompleted(url);
 14 
  const { slide, loading: slideLoading, handleMarkSlideCompleted } = useSlide(slideUuid);
35 
 
 - 
 
36 
      if (response.link_close_capsule) {
 - 
 
37 
        markClose(response?.link_close_capsule).then(() => {
 - 
 
38 
          setCompletedFeedback('Felicidades has terminado una Cápsula');
 15 
 
39 
          setShowCompletedFeedback(true);
 - 
 
40 
        });
 - 
 
41 
      }
 16 
  if (slide.completed) {
42 
 
 - 
 
43 
      if (response.link_close_topic) {
 17 
    return (
44 
        markClose(response?.link_close_topic).then((res) => {
 18 
      <CapsuleSuccessFeedback
45 
          setCompletedFeedback('Felicidades has terminado una capsula y un Tópico');
 - 
 
46 
          setShowCompletedFeedback(true);
 19 
        text='¡Felicidades! Has completado la lección.'
47 
        });
 - 
 
48 
      }
 - 
 
49 
 
 - 
 
50 
      const slidesClone = structuredClone(slides);
 - 
 
51 
      const currentSlideIndex = slidesClone.findIndex((slide) => slide.uuid === uuid);
 - 
 
52 
 
 - 
 
53 
      const currentSlide = slidesClone[currentSlideIndex];
 - 
 
54 
      currentSlide.completed = true;
 - 
 
55 
 
 - 
 
56 
      slidesClone[currentSlideIndex] = currentSlide;
 - 
 
57 
 
 - 
 
58 
      setSlides(slidesClone);
 - 
 
59 
 
 - 
 
60 
      const resMsg = response.message ?? response;
 - 
 
61 
 
 - 
 
62 
      addNotification({ style: 'success', msg: resMsg });
 - 
 
63 
    } catch (error) {
 20 
        onConfirm={() => navigate('/microlearning')}
64 
      addNotification({ style: 'danger', msg: error.message });
 21 
      />
65 
    }
 - 
 
66 
  };
 - 
 
67 
 
 - 
 
68 
  const handleChange = async (index) => {
 - 
 
69 
    const currentSlide = slides[index];
 22 
    );
70 
    if (!currentSlide) return;
 23 
  }
71 
 
 - 
 
72 
    setLoading(true);
 - 
 
73 
 
 24 
 
74 
    getSlide(currentSlide.link_get)
 - 
 
75 
      .then((slide) => {
 - 
 
76 
        setSlides((prevSlides) => {
 - 
 
77 
          const newSlides = [...prevSlides];
 - 
 
78 
          newSlides[index] = { ...currentSlide, ...slide };
 - 
 
79 
          return newSlides;
 - 
 
80 
        });
 - 
 
81 
      })
 - 
 
82 
      .catch((error) => addNotification({ style: 'danger', msg: error.message }))
 25 
  if (slideLoading) {
83 
      .finally(() => setLoading(false));
 - 
 
84 
  };
 - 
 
85 
 
 - 
 
86 
  useEffect(() => {
 - 
 
87 
    setSlides(currentSlides);
 - 
 
88 
  }, [currentSlides]);
 - 
 
89 
 
 - 
 
90 
  useEffect(() => {
 - 
 
Línea 91... Línea 26...
91 
    handleChange(currentSlide);
 26 
    return <Spinner />;
92 
  }, [currentSlide]);
 - 
 
93 
 
 - 
 
94 
  return (
 - 
 
95 
    <Modal open={show} onClose={onClose}>
 - 
 
96 
      <Box
 - 
 
97 
        sx={{
 - 
 
98 
          position: 'absolute',
 - 
 
99 
          top: '50%',
 - 
 
100 
          left: '50%',
 - 
 
101 
          transform: 'translate(-50%, -50%)',
 - 
 
102 
          maxWidth: { xs: '80vw', md: '800px' },
 - 
 
103 
          height: 'fit-content',
 - 
 
104 
          margin: 'auto',
 - 
 
105 
          '& .slick-track': {
 - 
 
106 
            display: 'flex',
 - 
 
107 
            alignItems: 'center'
 27 
  }
108 
          }
 - 
 
109 
        }}
 - 
 
110 
      >
 - 
 
111 
        {showCompleteFeedback ? (
 - 
 
112 
          <CapsuleSuccessFeedback
 - 
 
113 
            text={completedFeedback}
 - 
 
114 
            onConfirm={() => navigate('/microlearning')}
 - 
 
115 
          />
 - 
 
116 
        ) : (
 - 
 
117 
          <Carousel
 - 
 
118 
            infinite={false}
 - 
 
119 
            arrows={true}
 - 
 
120 
            dots={false}
 - 
 
121 
            slidesToShow={1}
 - 
 
122 
            slidesToScroll={1}
 - 
 
123 
            initialSlide={currentSlideIndex}
 - 
 
124 
            beforeChange={(_, newIndex) => setCurrentSlide(newIndex)}
 - 
 
125 
            nextArrow={
 - 
 
126 
              <IconButton>
 - 
 
127 
                <NavigateNext />
 - 
 
128 
              </IconButton>
 - 
 
129 
            }
 - 
 
130 
            prevArrow={
 - 
 
131 
              <IconButton>
 - 
 
132 
                <NavigateBefore />
 - 
 
133 
              </IconButton>
 - 
 
134 
            }
 - 
 
135 
          >
 - 
 
136 
            {slides.map((slide) => (
 - 
 
137 
              <Box
 - 
 
138 
                key={slide.uuid}
 - 
 
139 
                sx={{
 - 
 
140 
                  display: 'flex !important',
 - 
 
141 
                  flexDirection: 'column',
 - 
 
142 
                  justifyContent: 'center',
 - 
 
143 
                  alignItems: 'center',
 - 
 
144 
                  margin: 'auto',
 - 
 
145 
                  height: '100%'
 - 
 
146 
                }}
 - 
 
147 
              >
 - 
 
148 
                {loading ? (
 28 
 
149 
                  <Spinner />
 29 
  return (
150 
                ) : (
 30 
    <>
151 
                  <SlideCard
 31 
      <SlideCard
152 
                    completed={slide.completed}
 32 
        completed={slide.completed}
153 
                    slide={slide}
 33 
        slide={slide}
154 
                    autoPlay={autoPlay}
 - 
 
155 
                    onComplete={() => handleComplete(slide.link_sync, slide.uuid)}
 34 
        autoPlay={autoPlay}
156 
                  />
 35 
        onComplete={() => handleMarkSlideCompleted(slide.uuid)}
157 
                )}
 36 
      />
158 
 
 37 
 
159 
                {slide.type !== 'quiz' ? (
 38 
      {slide.type !== 'quiz' && (
160 
                  <Button
 39 
        <Button
161 
                    color='primary'
 40 
          color='primary'
162 
                    disabled={slide.completed}
 41 
          disabled={slide.completed}
163 
                    onClick={() => handleComplete(slide.link_sync, slide.uuid)}
 42 
          onClick={() => handleMarkSlideCompleted(slide.uuid)}
164 
                    sx={{ width: '100%', mt: 2 }}
 43 
          sx={{ mt: 2 }}
165 
                  >
 - 
 
166 
                    Marcar como completado
 - 
 
167 
                  </Button>
 - 
 
168 
                ) : null}
 - 
 
169 
              </Box>
 44 
        >
170 
            ))}
 - 
 
171 
          </Carousel>
 45 
          Marcar como completado
172 
        )}
 46 
        </Button>
173 
      </Box>
 47 
      )}
174 
    </Modal>
 - 
 
175 
  );
 - 
 
176 
};
 - 
 
177 
 
 - 
 
178 
const mapDispatchToProps = {
 - 
 
179 
  addNotification: (notification) => addNotification(notification)
 -