Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3023 | Rev 3079 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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