Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3016 Rev 3017
Línea 1... Línea 1...
1 
import React, { useEffect, useMemo, useRef, useState } from 'react'
 1 
import React from 'react'
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
3 
import { styled } from '@mui/material'
 3 
import { styled, Typography } from '@mui/material'
4 
import { Public, LockClock } from '@mui/icons-material'
 4 
import { Public, LockClock } from '@mui/icons-material'
Línea 5... Línea 5...
5 
 
 5 
 
6 
import { axios } from '@utils'
 6 
import { axios } from '@utils'
7 
import { updateFeed } from '@store/feed/feed.actions'
 7 
import { updateFeed } from '@store/feed/feed.actions'
Línea 8... Línea 8...
8 
import { addNotification } from '@store/notification/notification.actions'
 8 
import { addNotification } from '@store/notification/notification.actions'
- 
 
 9 
 
Línea 9... Línea 10...
9 
 
 10 
import styles from './survey.module.scss'
10 
import styles from './survey.module.scss'
 11 
import Widget from '@components/UI/Widget'
11 
 
 12 
 
12 
const RadioButton = styled('div')`
 13 
const RadioButton = styled('div')`
Línea 50... Línea 51...
50 
  right: 1rem;
 51 
  right: 1rem;
51 
  color: var(--font-color) !important;
 52 
  color: var(--font-color) !important;
52 
  font-weight: 600;
 53 
  font-weight: 600;
53 
`
 54 
`
Línea 54... Línea 55...
54 
 
 55 
 
55 
const SurveyForm = (props) => {
 - 
 
56 
  const {
 56 
const SurveyForm = ({
57 
    active = 0,
 57 
  active = false,
58 
    question = '¿Cómo consideras el ambiente laboral?',
 58 
  question = '¿Cómo consideras el ambiente laboral?',
59 
    answers = ['Excelente', 'Regular', null, null, null],
 59 
  answers = [],
60 
    votes = [null, null, null, null, null],
 60 
  votes = [],
61 
    time = 0,
 61 
  time = 0,
62 
    voteUrl = '/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94',
 62 
  voteUrl = '/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94',
63 
    resultType = 'pu',
 - 
 
64 
    voted = 0
 63 
  resultType = 'pu'
65 
  } = props
 - 
 
66 
  const [remainingTime, setRemainingTime] = useState('00:00:00')
 - 
 
67 
  const [isActive, setIsActive] = useState(true)
 - 
 
68 
  const timeRef = useRef(time)
 - 
 
69 
 
 64 
}) => {
Línea 70... Línea -...
70 
  const { register, handleSubmit } = useForm()
 - 
 
71 
 
 - 
 
72 
  console.log(props)
 - 
 
73 
 
 - 
 
74 
  const totalVotes = useMemo(
 - 
 
75 
    () =>
 - 
 
76 
      votes.reduce((curr, next) => {
 - 
 
77 
        if (!next) return curr
 - 
 
78 
        return curr + next
 - 
 
79 
      }, 0),
 - 
 
80 
    [votes]
 - 
 
81 
  )
 65 
  const { register, handleSubmit } = useForm()
82 
 
 - 
 
83 
  const sendVote = handleSubmit(({ vote }) => {
 - 
 
84 
    setIsActive(false)
 66 
 
85 
 
 67 
  const sendVote = handleSubmit(({ vote }) => {
Línea 86... Línea 68...
86 
    const formData = new FormData()
 68 
    const formData = new FormData()
87 
    formData.append('vote', vote)
 69 
    formData.append('vote', vote)
Línea 101... Línea 83...
101 
 
 83 
 
102 
        updateFeed({ feed: data, uuid: data.feed_uuid })
 84 
        updateFeed({ feed: data, uuid: data.feed_uuid })
103 
        addNotification({ style: 'success', msg: 'Voto emitido con exito' })
 85 
        addNotification({ style: 'success', msg: 'Voto emitido con exito' })
104 
      })
 86 
      })
105 
      .catch((err) => {
 - 
 
106 
        setIsActive(true)
 87 
      .catch((err) => {
107 
        addNotification({ style: 'danger', msg: err.message })
 88 
        addNotification({ style: 'danger', msg: err.message })
108 
      })
 89 
      })
Línea 109... Línea 90...
109 
  })
 90 
  })
110 
 
 91 
 
111 
  function getTimeDiff(segundos) {
 - 
 
112 
    const currentDate = new Date()
 92 
  console.log({
113 
    const futureDate = new Date(currentDate.getTime() + segundos * 1000)
 - 
 
114 
    const diff = futureDate - currentDate
 - 
 
115 
 
 - 
 
116 
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
 - 
 
117 
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
 - 
 
118 
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
 - 
 
119 
 
 93 
    active,
120 
    return `${addZero(days)}d ${addZero(hours)}h ${addZero(minutes)}m`
 - 
 
121 
  }
 94 
    question,
122 
 
 - 
 
123 
  function addZero(unit) {
 95 
    answers,
124 
    return String(unit).padStart(2, '0')
 - 
 
125 
  }
 96 
    votes,
126 
 
 97 
    time,
127 
  function getPorcentage(n, total) {
 98 
    voteUrl,
128 
    return (n / total) * 100
 - 
 
129 
  }
 - 
 
130 
 
 - 
 
131 
  useEffect(() => {
 - 
 
Línea 132... Línea 99...
132 
    setIsActive(!!active)
 99 
    resultType
- 
 
 100 
  })
133 
  }, [active])
 101 
 
134 
 
 102 
  return (
- 
 
 103 
    <Widget>
135 
  return (
 104 
      <Widget.Body>
136 
    <form onChange={sendVote} className={styles.survey_form}>
 105 
        <Typography variant='h3'>{question}</Typography>
137 
      <h3>{question}</h3>
 106 
 
138 
      {resultType === 'pu' && (
 107 
        {resultType === 'pu' ? (
139 
        <span
 108 
          <Typography
140 
          className='mb-2'
 109 
            variant='overline'
141 
          title='El número de votos es visible para todos los usuarios'
 110 
            title='El número de votos es visible para todos los usuarios'
142 
        >
 111 
          >
143 
          <Public /> Público
 - 
 
144 
        </span>
 112 
            <Public /> Público
145 
      )}
 113 
          </Typography>
146 
      {resultType === 'pr' && (
 114 
        ) : (
147 
        <span
 115 
          <Typography
148 
          className='mb-2'
 116 
            variant='overline'
149 
          title='Los resultados de la votación son privados'
 117 
            title='Los resultados de la votación son privados'
150 
        >
 118 
          >
- 
 
 119 
            <LockClock /> Privado
- 
 
 120 
          </Typography>
151 
          <LockClock /> Privado
 121 
        )}
152 
        </span>
 122 
 
153 
      )}
 123 
        <form onChange={sendVote} className={styles.survey_form}>
154 
      {answers.map((answer, index) => {
 124 
          {answers.map((answer, index) => {
155 
        if (answer === null) return null
 125 
            if (answer === null) return null
156 
 
 126 
 
157 
        return (
 127 
            return (
158 
          <RadioButton key={answer}>
 128 
              <RadioButton key={answer}>
159 
            <input
 129 
                <input
160 
              type='radio'
 130 
                  type='radio'
161 
              name='vote'
 131 
                  name='vote'
162 
              ref={register({ required: true })}
 132 
                  ref={register({ required: true })}
163 
              value={index + 1}
 133 
                  value={index + 1}
164 
            />
 134 
                />
165 
            <label htmlFor={`vote-${index + 1}`}>{answer}</label>
 135 
                <label htmlFor={`vote-${index + 1}`}>{answer}</label>
166 
            {/*  {!!totalVotes && (
 136 
                {/*  {!!totalVotes && (
167 
              <span className='mb-0'>
 137 
              <span className='mb-0'>
168 
                {getPorcentage(votes[index], totalVotes)}%
 138 
                {getPorcentage(votes[index], totalVotes)}%
169 
              </span>
 139 
              </span>
170 
            )} */}
 140 
            )} */}
171 
          </RadioButton>
 141 
              </RadioButton>
172 
        )
 142 
            )
173 
      })}
 143 
          })}
- 
 
 144 
          <span>Tiempo restante: </span>
- 
 
 145 
          {!active && <VoteTag>El formulario ya ha finalizado</VoteTag>}
174 
      <span>Tiempo restante: </span>
 146 
        </form>
175 
      {!isActive && <VoteTag>Tu voto ya fue emitido</VoteTag>}
 147 
      </Widget.Body>
Línea 176... Línea 148...
176 
    </form>
 148 
    </Widget>