Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3481 Rev 3505
Línea 1... Línea 1...
1 
import React, { useState } from "react";
 1 
import React, { useState } from 'react';
2 
import { useNavigate, useParams } from "react-router-dom";
 2 
import { useNavigate, useParams } from 'react-router-dom';
3 
import { connect } from "react-redux";
 3 
import { useDispatch } from 'react-redux';
4 
import { styled } from "@mui/material";
 4 
import { Button, styled } from '@mui/material';
5 
import { CheckCircle } from "@mui/icons-material";
 5 
import { CheckCircle } from '@mui/icons-material';
6 
import parse from "html-react-parser";
 6 
import parse from 'html-react-parser';
7 
 
 7 
 
8 
import { axios } from "@app/utils";
 8 
import { axios } from '@app/utils';
9 
import { addNotification } from "@app/redux/notification/notification.actions";
 9 
import { addNotification } from '@app/redux/notification/notification.actions';
10 
import { useFetch } from "@hooks";
 10 
import { useFetch } from '@hooks';
11 
 
 - 
 
12 
import { FILE_TYPE_LABELS } from "@app/constants/files";
 - 
 
13 
 
 - 
 
14 
import Button from "@app/components/UI/buttons/Buttons";
 - 
 
15 
import Spinner from "@app/components/UI/Spinner";
 - 
 
16 
import WidgetWrapper from "@app/components/widgets/WidgetLayout";
 - 
 
17 
import MicrolearningLayout from "@app/layouts/micro-learning/GoBack";
 - 
 
Línea -... Línea 11...
- 
 
 11 
 
- 
 
 12 
import { FILE_TYPE_LABELS } from '@app/constants/files';
- 
 
 13 
import { Card, PageHeader, Spinner } from '@shared/components';
18 
 
 14 
 
19 
const Slide = styled(WidgetWrapper)`
 15 
const Slide = styled(Card)`
20 
  margin: auto;
 16 
  margin: auto;
21 
  width: fit-content;
 17 
  width: fit-content;
22 
  svg {
 18 
  svg {
23 
    position: absolute;
 19 
    position: absolute;
Línea 35... Línea 31...
35 
    bottom: 1rem;
 31 
    bottom: 1rem;
36 
    right: 1rem;
 32 
    right: 1rem;
37 
  }
 33 
  }
38 
`;
 34 
`;
Línea 39... Línea 35...
39 
 
 35 
 
40 
const SlideViewPage = ({ addNotification }) => {
 36 
export function SlideViewPage() {
41 
  const { uuid } = useParams();
 - 
 
42 
  const {
 37 
  const { uuid } = useParams();
43 
    data: slide,
 - 
 
44 
    isLoading,
 - 
 
45 
    mutate,
 38 
  const dispatch = useDispatch();
46 
  } = useFetch(`/microlearning/get-slide/${uuid}`, {});
 39 
  const { data: slide, isLoading, mutate } = useFetch(`/microlearning/get-slide/${uuid}`, {});
47 
  const [displayFile, setDisplayFile] = useState(false);
 40 
  const [displayFile, setDisplayFile] = useState(false);
Línea 48... Línea 41...
48 
  const navigate = useNavigate();
 41 
  const navigate = useNavigate();
49 
 
 42 
 
50 
  const closeParent = async (url = "") => {
 43 
  const closeParent = async (url = '') => {
Línea 51... Línea 44...
51 
    const response = await axios.post(url);
 44 
    const response = await axios.post(url);
52 
    const { data, success } = response.data;
 45 
    const { data, success } = response.data;
53 
 
 46 
 
54 
    if (!success) {
 47 
    if (!success) {
55 
      const errorMessage =
 48 
      const errorMessage =
56 
        typeof data === "string"
 49 
        typeof data === 'string'
57 
          ? data
 50 
          ? data
58 
          : Object.entries(data)
 51 
          : Object.entries(data)
59 
              .map(([key, value]) => `${key}: ${value}`)
 52 
              .map(([key, value]) => `${key}: ${value}`)
Línea 60... Línea 53...
60 
              .join(", ");
 53 
              .join(', ');
61 
      throw new Error(errorMessage);
 54 
      throw new Error(errorMessage);
62 
    }
 55 
    }
Línea 63... Línea 56...
63 
 
 56 
 
64 
    const resMsg = data.message ?? data;
 57 
    const resMsg = data.message ?? data;
65 
    addNotification({ style: "success", msg: resMsg });
 58 
    dispatch(addNotification({ style: 'success', msg: resMsg }));
66 
  };
 59 
  };
Línea 67... Línea 60...
67 
 
 60 
 
68 
  const markCompleted = async () => {
 61 
  const markCompleted = async () => {
69 
    try {
 62 
    try {
70 
      const response = await axios.post(slide?.link_sync);
 63 
      const response = await axios.post(slide?.link_sync);
71 
      const { data, success } = response.data;
 64 
      const { data, success } = response.data;
72 
 
 65 
 
73 
      if (!success) {
 66 
      if (!success) {
74 
        const errorMessage =
 67 
        const errorMessage =
75 
          typeof data === "string"
 68 
          typeof data === 'string'
Línea 76... Línea 69...
76 
            ? data
 69 
            ? data
77 
            : Object.entries(data)
 70 
            : Object.entries(data)
78 
                .map(([key, value]) => `${key}: ${value}`)
 71 
                .map(([key, value]) => `${key}: ${value}`)
79 
                .join(", ");
 72 
                .join(', ');
Línea 80... Línea 73...
80 
        throw new Error(errorMessage);
 73 
        throw new Error(errorMessage);
81 
      }
 74 
      }
82 
 
 75 
 
Línea 83... Línea 76...
83 
      if (data.link_close_capsule) {
 76 
      if (data.link_close_capsule) {
84 
        await closeParent(data?.link_close_capsule);
 77 
        await closeParent(data?.link_close_capsule);
85 
        navigate("/microlearning");
 78 
        navigate('/microlearning');
86 
      }
 79 
      }
87 
 
 80 
 
88 
      if (data.link_close_topic) {
 81 
      if (data.link_close_topic) {
89 
        await closeParent(data?.link_close_topic);
 82 
        await closeParent(data?.link_close_topic);
90 
      }
 83 
      }
91 
 
 84 
 
Línea 92... Línea 85...
92 
      const resMsg = data.message ?? data;
 85 
      const resMsg = data.message ?? data;
93 
      addNotification({ style: "success", msg: resMsg });
 86 
      dispatch(addNotification({ style: 'success', msg: resMsg }));
94 
      mutate({ ...slide, completed: 1 });
 87 
      mutate({ ...slide, completed: 1 });
95 
    } catch (error) {
 88 
    } catch (error) {
96 
      addNotification({ style: "danger", msg: error.message });
 89 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
97 
    } finally {
 90 
    } finally {
98 
      setDisplayFile(false);
 91 
      setDisplayFile(false);
99 
    }
 92 
    }
100 
  };
 93 
  };
101 
 
 94 
 
102 
  const renderFile = (type = "video") => {
 95 
  const renderFile = (type = 'video') => {
103 
    switch (type) {
 96 
    switch (type) {
104 
      case "video": {
 - 
 
105 
        return (
 - 
 
106 
          <>
 97 
      case 'video': {
107 
            {displayFile ? (
 - 
 
108 
              <video controls controlsList="nodownload" onEnded={markCompleted}>
 98 
        return (
109 
                <source src={slide?.file} />
 99 
          <>
110 
              </video>
 100 
            {displayFile ? (
111 
            ) : (
 101 
              <video controls controlsList='nodownload' onEnded={markCompleted}>
112 
              <>
 102 
                <source src={slide?.file} />
113 
                <img src={slide?.background} alt={slide?.name} />
 103 
              </video>
114 
                <Button
 104 
            ) : (
Línea 115... Línea 105...
115 
                  color="primary"
 105 
              <>
116 
                  onClick={() => setDisplayFile(!displayFile)}
 106 
                <img src={slide?.background} alt={slide?.name} />
117 
                >
 107 
                <Button color='primary' onClick={() => setDisplayFile(!displayFile)}>
Línea 118... Línea 108...
118 
                  {FILE_TYPE_LABELS[slide?.type]}
 108 
                  {FILE_TYPE_LABELS[slide?.type]}
119 
                </Button>
 109 
                </Button>
120 
              </>
 110 
              </>
121 
            )}
 111 
            )}
122 
          </>
 - 
 
123 
        );
 - 
 
124 
      }
 - 
 
125 
 
 - 
 
126 
      case "image": {
 112 
          </>
127 
        return <img src={slide?.file} alt={slide?.name} />;
 - 
 
128 
      }
 113 
        );
129 
 
 114 
      }
130 
      case "audio": {
 115 
 
131 
        return (
 - 
 
132 
          <>
 - 
 
133 
            {displayFile ? (
 116 
      case 'image': {
134 
              <audio
 - 
 
135 
                controls
 117 
        return <img src={slide?.file} alt={slide?.name} />;
136 
                src={slide?.file}
 118 
      }
137 
                alt={slide?.name}
 119 
 
138 
                onEnded={markCompleted}
 120 
      case 'audio': {
139 
              />
 121 
        return (
140 
            ) : (
 122 
          <>
141 
              <>
 123 
            {displayFile ? (
Línea 142... Línea 124...
142 
                <img src={slide?.background} alt={slide?.name} />
 124 
              <audio controls src={slide?.file} alt={slide?.name} onEnded={markCompleted} />
143 
                <Button
 125 
            ) : (
144 
                  color="primary"
 126 
              <>
Línea 145... Línea 127...
145 
                  onClick={() => setDisplayFile(!displayFile)}
 127 
                <img src={slide?.background} alt={slide?.name} />
146 
                >
 128 
                <Button color='primary' onClick={() => setDisplayFile(!displayFile)}>
147 
                  {FILE_TYPE_LABELS[slide?.type]}
 129 
                  {FILE_TYPE_LABELS[slide?.type]}
148 
                </Button>
 130 
                </Button>
149 
              </>
 131 
              </>
150 
            )}
 132 
            )}
151 
          </>
 133 
          </>
Línea 152... Línea 134...
152 
        );
 134 
        );
153 
      }
 135 
      }
154 
 
 136 
 
155 
      case "text": {
 137 
      case 'text': {
156 
        return parse(slide?.description);
 138 
        return parse(slide?.description);
157 
      }
 139 
      }
158 
 
 140 
 
159 
      case "document": {
 141 
      case 'document': {
160 
        return (
 142 
        return (
161 
          <a href={slide?.file} target="_blank" rel="noreferrer">
 143 
          <a href={slide?.file} target='_blank' rel='noreferrer'>
162 
            <img className="pdf" src="/images/extension/pdf.png" alt="pdf" />
 - 
 
163 
          </a>
 - 
 
164 
        );
 144 
            <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
165 
      }
 - 
 
166 
 
 145 
          </a>
167 
      default:
 146 
        );
168 
        return (
 147 
      }
169 
          <>
 148 
 
170 
            {displayFile ? (
 149 
      default:
Línea 190... Línea 169...
190 
  if (isLoading) {
 169 
  if (isLoading) {
191 
    return <Spinner />;
 170 
    return <Spinner />;
192 
  }
 171 
  }
Línea 193... Línea 172...
193 
 
 172 
 
- 
 
 173 
  return (
194 
  return (
 174 
    <>
195 
    <MicrolearningLayout title={slide?.name}>
 175 
      <PageHeader title={slide?.name} goBack />
196 
      <Slide>
 176 
      <Slide>
197 
        {slide?.completed && !displayFile ? (
 - 
 
198 
          <CheckCircle color="success" />
 - 
 
199 
        ) : null}
 177 
        {slide?.completed && !displayFile ? <CheckCircle color='success' /> : null}
200 
        {renderFile(slide?.type)}
 178 
        {renderFile(slide?.type)}
Línea 201... Línea 179...
201 
      </Slide>
 179 
      </Slide>
202 
 
 180 
 
203 
      <Button
 181 
      <Button
204 
        color="primary"
 182 
        color='primary'
205 
        disabled={slide?.completed}
 183 
        disabled={slide?.completed}
206 
        onClick={() => markCompleted()}
 184 
        onClick={() => markCompleted()}
207 
        sx={{ width: "100%", mt: 2 }}
 185 
        sx={{ width: '100%', mt: 2 }}
208 
      >
 186 
      >
209 
        Marcar como completado
 187 
        Marcar como completado
210 
      </Button>
 188 
      </Button>
211 
    </MicrolearningLayout>
 189 
    </>
212 
  );
 - 
 
213 
};
 - 
 
214 
 
 - 
 
215 
const mapDispatchToProps = {
 - 
 
216 
  addNotification: (notification) => addNotification(notification),
 - 
 
217 
};
 -