aboutsummaryrefslogtreecommitdiff
path: root/src/components/poll/poll_form.js
blob: a2070155377eaaf090ace8b8f9af612b892c4de5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import * as DateUtils from 'src/services/date_utils/date_utils.js'
import { uniq } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import Select from '../select/select.vue'
import {
  faTimes,
  faPlus
} from '@fortawesome/free-solid-svg-icons'

library.add(
  faTimes,
  faPlus
)

export default {
  components: {
    Select
  },
  name: 'PollForm',
  props: ['visible'],
  data: () => ({
    pollType: 'single',
    options: ['', ''],
    expiryAmount: 10,
    expiryUnit: 'minutes'
  }),
  computed: {
    pollLimits () {
      return this.$store.state.instance.pollLimits
    },
    maxOptions () {
      return this.pollLimits.max_options
    },
    maxLength () {
      return this.pollLimits.max_option_chars
    },
    expiryUnits () {
      const allUnits = ['minutes', 'hours', 'days']
      const expiry = this.convertExpiryFromUnit
      return allUnits.filter(
        unit => this.pollLimits.max_expiration >= expiry(unit, 1)
      )
    },
    minExpirationInCurrentUnit () {
      return Math.ceil(
        this.convertExpiryToUnit(
          this.expiryUnit,
          this.pollLimits.min_expiration
        )
      )
    },
    maxExpirationInCurrentUnit () {
      return Math.floor(
        this.convertExpiryToUnit(
          this.expiryUnit,
          this.pollLimits.max_expiration
        )
      )
    }
  },
  methods: {
    clear () {
      this.pollType = 'single'
      this.options = ['', '']
      this.expiryAmount = 10
      this.expiryUnit = 'minutes'
    },
    nextOption (index) {
      const element = this.$el.querySelector(`#poll-${index + 1}`)
      if (element) {
        element.focus()
      } else {
        // Try adding an option and try focusing on it
        const addedOption = this.addOption()
        if (addedOption) {
          this.$nextTick(function () {
            this.nextOption(index)
          })
        }
      }
    },
    addOption () {
      if (this.options.length < this.maxOptions) {
        this.options.push('')
        return true
      }
      return false
    },
    deleteOption (index, event) {
      if (this.options.length > 2) {
        this.options.splice(index, 1)
        this.updatePollToParent()
      }
    },
    convertExpiryToUnit (unit, amount) {
      // Note: we want seconds and not milliseconds
      return DateUtils.secondsToUnit(unit, amount)
    },
    convertExpiryFromUnit (unit, amount) {
      return DateUtils.unitToSeconds(unit, amount)
    },
    expiryAmountChange () {
      this.expiryAmount =
        Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
      this.expiryAmount =
        Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
      this.updatePollToParent()
    },
    updatePollToParent () {
      const expiresIn = this.convertExpiryFromUnit(
        this.expiryUnit,
        this.expiryAmount
      )

      const options = uniq(this.options.filter(option => option !== ''))
      if (options.length < 2) {
        this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
        return
      }
      this.$emit('update-poll', {
        options,
        multiple: this.pollType === 'multiple',
        expiresIn
      })
    }
  }
}