Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3654
Línea 1... Línea 1...
1 
import React, { useMemo } from "react";
 1 
import React, { useMemo } from 'react';
2 
import { Controller, useForm } from "react-hook-form";
 2 
import { Controller, useForm } from 'react-hook-form';
3 
import {
 - 
 
4 
  FormControlLabel,
 - 
 
5 
  Radio,
 - 
 
6 
  RadioGroup,
 - 
 
7 
  styled,
 - 
 
8 
  Typography,
 - 
 
9 
} from "@mui/material";
 3 
import { FormControlLabel, Radio, RadioGroup, styled, Typography } from '@mui/material';
10 
import { Public, LockClock } from "@mui/icons-material";
 4 
import { Public, LockClock } from '@mui/icons-material';
11 
 
 5 
 
12 
import { axios } from "@utils";
 6 
import { axios } from '@utils';
13 
import { getTimeDiff } from "@utils/dates";
 7 
import { getTimeDiff } from '@utils/dates';
14 
import { updateFeed } from "@store/feed/feed.actions";
 8 
import { updateFeed } from '@store/feed/feed.actions';
15 
import { addNotification } from "@store/notification/notification.actions";
 9 
import { addNotification } from '@store/notification/notification.actions';
Línea 16... Línea -...
16 
 
 - 
 
17 
import Widget from "@components/UI/Widget";
 10 
 
Línea 18... Línea 11...
18 
import FormErrorFeedback from "@components/UI/form/FormErrorFeedback";
 11 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
19 
 
 12 
 
20 
const AnswerContainer = styled("div")`
 13 
const AnswerContainer = styled('div')`
21 
  display: flex;
 14 
  display: flex;
22 
  align-items: center;
 15 
  align-items: center;
23 
  gap: 0.5rem;
 16 
  gap: 0.5rem;
Línea 35... Línea 28...
35 
  }
 28 
  }
36 
`;
 29 
`;
Línea 37... Línea 30...
37 
 
 30 
 
38 
const SurveyForm = ({
 31 
const SurveyForm = ({
39 
  active = false,
 32 
  active = false,
40 
  question = "¿Cómo consideras el ambiente laboral?",
 33 
  question = '¿Cómo consideras el ambiente laboral?',
41 
  answers = [],
 34 
  answers = [],
42 
  votes = [],
 35 
  votes = [],
43 
  time = 0,
 36 
  time = 0,
44 
  voteUrl = "/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94",
 37 
  voteUrl = '/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94',
45 
  resultType = "pu",
 38 
  resultType = 'pu'
46 
}) => {
 39 
}) => {
47 
  const totalVotes = useMemo(
 40 
  const totalVotes = useMemo(
48 
    () =>
 41 
    () =>
49 
      votes.reduce((acc, cur) => {
 42 
      votes.reduce((acc, cur) => {
Línea 56... Línea 49...
56 
 
 49 
 
Línea 57... Línea 50...
57 
  const { control, handleSubmit } = useForm();
 50 
  const { control, handleSubmit } = useForm();
58 
 
 51 
 
59 
  const sendVote = handleSubmit(({ vote }) => {
 52 
  const sendVote = handleSubmit(({ vote }) => {
Línea 60... Línea 53...
60 
    const formData = new FormData();
 53 
    const formData = new FormData();
61 
    formData.append("vote", vote);
 54 
    formData.append('vote', vote);
62 
 
 55 
 
63 
    axios
 56 
    axios
Línea 64... Línea 57...
64 
      .post(voteUrl, formData)
 57 
      .post(voteUrl, formData)
65 
      .then((response) => {
 58 
      .then((response) => {
66 
        const { success, data } = response.data;
 - 
 
67 
 
 - 
 
68 
        if (!success) {
 59 
        const { success, data } = response.data;
69 
          const errorMessage =
 60 
 
70 
            typeof data === "string"
 61 
        if (!success) {
Línea 71... Línea 62...
71 
              ? data
 62 
          const errorMessage =
72 
              : "Error interno, por favor intente mas tarde.";
 63 
            typeof data === 'string' ? data : 'Error interno, por favor intente mas tarde.';
73 
          throw new Error(errorMessage);
 64 
          throw new Error(errorMessage);
74 
        }
 65 
        }
75 
 
 66 
 
76 
        updateFeed({ feed: data, uuid: data.feed_uuid });
 67 
        updateFeed({ feed: data, uuid: data.feed_uuid });
77 
        addNotification({ style: "success", msg: "Voto emitido con exito" });
 68 
        addNotification({ style: 'success', msg: 'Voto emitido con exito' });
Línea 78... Línea 69...
78 
      })
 69 
      })
79 
      .catch((err) => {
 70 
      .catch((err) => {
80 
        addNotification({ style: "danger", msg: err.message });
 71 
        addNotification({ style: 'danger', msg: err.message });
Línea 81... Línea 72...
81 
      });
 72 
      });
82 
  });
 73 
  });
83 
 
 - 
 
84 
  function getPorcentage(n, total) {
 74 
 
85 
    return (n / total) * 100;
 75 
  function getPorcentage(n, total) {
86 
  }
 76 
    return (n / total) * 100;
87 
 
 77 
  }
88 
  return (
 78 
 
89 
    <Widget>
 79 
  return (
90 
      <Widget.Body>
 80 
    <>
91 
        <Typography variant="h3">{question}</Typography>
 81 
      <Typography variant='h3'>{question}</Typography>
92 
 
 82 
 
93 
        {resultType === "pu" ? (
 83 
      {resultType === 'pu' ? (
94 
          <Typography
 84 
        <Typography
95 
            variant="overline"
 85 
          variant='overline'
96 
            title="El número de votos es visible para todos los usuarios"
 86 
          title='El número de votos es visible para todos los usuarios'
97 
            sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
 87 
          sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
98 
          >
 88 
        >
99 
            <Public sx={{ fontSize: "1.3rem" }} /> Público
 89 
          <Public sx={{ fontSize: '1.3rem' }} /> Público
100 
          </Typography>
 90 
        </Typography>
101 
        ) : (
 91 
      ) : (
102 
          <Typography
 92 
        <Typography
103 
            variant="overline"
 93 
          variant='overline'
104 
            title="Los resultados de la votación son privados"
 94 
          title='Los resultados de la votación son privados'
105 
            sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
 95 
          sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
106 
          >
 96 
        >
107 
            <LockClock sx={{ fontSize: "1.3rem" }} /> Privado
 97 
          <LockClock sx={{ fontSize: '1.3rem' }} /> Privado
108 
          </Typography>
 98 
        </Typography>
109 
        )}
 99 
      )}
110 
 
 100 
 
111 
        <form onChange={sendVote}>
 101 
      <form onChange={sendVote}>
112 
          <Controller
 102 
        <Controller
113 
            name="vote"
 103 
          name='vote'
114 
            control={control}
 104 
          control={control}
115 
            rules={{ required: "Por favor seleccione una opción" }}
 105 
          rules={{ required: 'Por favor seleccione una opción' }}
116 
            defaultValue=""
 106 
          defaultValue=''
117 
            disabled={!active}
 107 
          disabled={!active}
118 
            render={({ field, fieldState: { error } }) => (
 108 
          render={({ field, fieldState: { error } }) => (
119 
              <>
 109 
            <>
120 
                <RadioGroup {...field}>
 110 
              <RadioGroup {...field}>
121 
                  {answers.map((answer, index) => {
 111 
                {answers.map((answer, index) => {
122 
                    if (answer === null) return null;
 112 
                  if (answer === null) return null;
123 
 
 113 
 
124 
                    return (
 114 
                  return (
125 
                      <AnswerContainer
 115 
                    <AnswerContainer
126 
                        key={answer}
 116 
                      key={answer}
127 
                        sx={{
 117 
                      sx={{
128 
                          "::before": {
 118 
                        '::before': {
129 
                            content: "",
 - 
 
130 
                            position: "absolute",
 119 
                          content: '',
131 
                            left: 0,
 - 
 
132 
                            top: 0,
 120 
                          position: 'absolute',
133 
                            height: "100%",
 121 
                          left: 0,
134 
                            backgroundColor: "#0002",
 122 
                          top: 0,
135 
                            zIndex: 4,
 123 
                          height: '100%',
136 
                            width: totalVotes
 124 
                          backgroundColor: '#0002',
137 
                              ? `${getPorcentage(votes[index], totalVotes)}%`
 125 
                          zIndex: 4,
138 
                              : 0,
 126 
                          width: totalVotes ? `${getPorcentage(votes[index], totalVotes)}%` : 0
139 
                          },
 127 
                        }
140 
                        }}
 128 
                      }}
141 
                      >
 129 
                    >
142 
                        <FormControlLabel
 130 
                      <FormControlLabel
143 
                          value={index + 1}
 131 
                        value={index + 1}
144 
                          control={<Radio sx={{ padding: 0 }} />}
 132 
                        control={<Radio sx={{ padding: 0 }} />}
145 
                          label={answer}
 133 
                        label={answer}
146 
                          sx={{ margin: 0, gap: 1 }}
 134 
                        sx={{ margin: 0, gap: 1 }}
147 
                          disabled={field.disabled}
 135 
                        disabled={field.disabled}
148 
                        />
 136 
                      />
149 
 
 137 
 
150 
                        {totalVotes ? (
 138 
                      {totalVotes ? (
151 
                          <Typography variant="overline">
 139 
                        <Typography variant='overline'>
152 
                            {getPorcentage(votes[index], totalVotes)}%
 - 
 
153 
                          </Typography>
 140 
                          {getPorcentage(votes[index], totalVotes)}%
154 
                        ) : null}
 - 
 
155 
                      </AnswerContainer>
 141 
                        </Typography>
156 
                    );
 - 
 
157 
                  })}
 - 
 
158 
                </RadioGroup>
 - 
 
159 
                {error && (
 - 
 
160 
                  <FormErrorFeedback>{error.message}</FormErrorFeedback>
 - 
 
161 
                )}
 - 
 
162 
              </>
 - 
 
163 
            )}
 - 
 
164 
          />
 - 
 
165 
 
 - 
 
166 
          <Typography variant="overline">
 - 
 
167 
            Tiempo restante: {timeRemaining}
 142 
                      ) : null}
168 
          </Typography>
 143 
                    </AnswerContainer>
- 
 
 144 
                  );
- 
 
 145 
                })}
- 
 
 146 
              </RadioGroup>
- 
 
 147 
              {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}
169 
 
 148 
            </>
170 
          {!active && (
 149 
          )}
171 
            <Typography variant="overline">
 150 
        />
172 
              El formulario ya ha finalizado
 151 
 
Línea 173... Línea 152...
173 
            </Typography>
 152 
        <Typography variant='overline'>Tiempo restante: {timeRemaining}</Typography>