-
Notifications
You must be signed in to change notification settings - Fork 117
Expand file tree
/
Copy pathAnswerTypes.js
More file actions
278 lines (244 loc) Β· 9.52 KB
/
AnswerTypes.js
File metadata and controls
278 lines (244 loc) Β· 9.52 KB
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
/**
* SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import IconArrowDownDropCircleOutline from 'vue-material-design-icons/ArrowDownDropCircleOutline.vue'
import IconCalendar from 'vue-material-design-icons/CalendarOutline.vue'
import IconCheckboxOutline from 'vue-material-design-icons/CheckboxOutline.vue'
import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue'
import IconFile from 'vue-material-design-icons/FileOutline.vue'
import IconFormatSection from 'vue-material-design-icons/FormatSection.vue'
import IconGrid from 'vue-material-design-icons/Grid.vue'
import IconNumeric from 'vue-material-design-icons/Numeric.vue'
import IconRadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'
import IconTextLong from 'vue-material-design-icons/TextLong.vue'
import IconTextShort from 'vue-material-design-icons/TextShort.vue'
import IconLinearScale from '../components/Icons/IconLinearScale.vue'
import IconPalette from '../components/Icons/IconPalette.vue'
import QuestionColor from '../components/Questions/QuestionColor.vue'
import QuestionDate from '../components/Questions/QuestionDate.vue'
import QuestionDropdown from '../components/Questions/QuestionDropdown.vue'
import QuestionFile from '../components/Questions/QuestionFile.vue'
import QuestionGrid from '../components/Questions/QuestionGrid.vue'
import QuestionLinearScale from '../components/Questions/QuestionLinearScale.vue'
import QuestionLong from '../components/Questions/QuestionLong.vue'
import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
import QuestionSection from '../components/Questions/QuestionSection.vue'
import QuestionShort from '../components/Questions/QuestionShort.vue'
import { OptionType } from './Constants.ts'
/**
* @typedef {object} AnswerTypes
* @property {string} multiple Checkbox Answer
* @property {string} multiple_unique Radio buttons Answer
* @property {string} dropdown Dropdown Answer
* @property {string} short Short Text Answer
* @property {string} long Long Text Answer
* @property {string} date Date Answer
* @property {string} datetime Date and Time Answer
* @property {string} time Time Answer
* @property {string} linearscale Linear Scale Answer
* @property {string} color Color Answer
*/
export default {
/**
* !! Keep in SYNC with lib/Constants.php for props that are necessary on php !!
* Specifying Question-Models in a common place
* Further type-specific parameters are possible.
*
* @property {object} component The vue-component this answer-type relies on
* @property {string} icon The icon corresponding to this answer-type
* @property {string} label The answer-type label, that users will see as answer-type.
* @property {boolean} predefined SYNC This AnswerType has/needs predefined Options.
* @property {Function} validate *optional* Define conditions where this question is not ok
* @property {string} titlePlaceholder The placeholder users see as empty question-title in edit-mode
* @property {string} createPlaceholder *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field
* @property {string} createPlaceholderRange *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field for date fields that use a date range
* @property {string} submitPlaceholder *optional* The placeholder that is visible in submit-mode, to indicate a form input-field
* @property {string} submitPlaceholderRange *optional* The placeholder that is visible in submit-mode, to indicate a form input-field for date fields that use a date range
* @property {string} warningInvalid The warning users see in edit mode, if the question is invalid.
*/
multiple: {
component: QuestionMultiple,
icon: IconCheckboxOutline,
label: t('forms', 'Checkboxes'),
predefined: true,
validate: (question) => question.options.length > 0,
titlePlaceholder: t('forms', 'Checkbox question title'),
createPlaceholder: t('forms', 'People can submit a different answer'),
submitPlaceholder: t('forms', 'Enter your answer'),
warningInvalid: t(
'forms',
'This question needs a title and at least one answer!',
),
},
multiple_unique: {
component: QuestionMultiple,
icon: IconRadioboxMarked,
label: t('forms', 'Radio buttons'),
predefined: true,
validate: (question) => question.options.length > 0,
titlePlaceholder: t('forms', 'Radio buttons question title'),
createPlaceholder: t('forms', 'People can submit a different answer'),
submitPlaceholder: t('forms', 'Enter your answer'),
warningInvalid: t(
'forms',
'This question needs a title and at least one answer!',
),
// Using the same vue-component as multiple, this specifies that the component renders as multiple_unique.
unique: true,
},
dropdown: {
component: QuestionDropdown,
icon: IconArrowDownDropCircleOutline,
label: t('forms', 'Dropdown'),
predefined: true,
validate: (question) => question.options.length > 0,
titlePlaceholder: t('forms', 'Dropdown question title'),
createPlaceholder: t('forms', 'People can pick one option'),
submitPlaceholder: t('forms', 'Pick an option'),
warningInvalid: t(
'forms',
'This question needs a title and at least one answer!',
),
},
file: {
component: QuestionFile,
icon: IconFile,
label: t('forms', 'File'),
predefined: false,
titlePlaceholder: t('forms', 'File question title'),
warningInvalid: t('forms', 'This question needs a title!'),
},
grid: {
component: QuestionGrid,
icon: IconGrid,
label: t('forms', 'Grid'),
predefined: false,
subtypes: {
radio: {
icon: IconRadioboxMarked,
label: t('forms', 'Radio buttons'),
extraSettings: {
questionType: 'radio',
},
},
checkbox: {
icon: IconCheckboxOutline,
label: t('forms', 'Checkboxes'),
extraSettings: {
questionType: 'checkbox',
},
},
number: {
icon: IconNumeric,
label: t('forms', 'Number'),
extraSettings: {
questionType: 'number',
},
},
},
validate: (question) => {
return (
question.options.filter(
(option) => option.optionType === OptionType.Column,
).length > 0
&& question.options.filter(
(option) => option.optionType === OptionType.Row,
).length > 0
)
},
titlePlaceholder: t('forms', 'Grid question title'),
warningInvalid: t('forms', 'This question needs a title!'),
createPlaceholder: t('forms', 'People can submit a grid answer'),
submitPlaceholder: t('forms', 'Enter your answer'),
},
short: {
component: QuestionShort,
icon: IconTextShort,
label: t('forms', 'Short answer'),
predefined: false,
titlePlaceholder: t('forms', 'Short answer question title'),
createPlaceholder: t('forms', 'People can enter a short answer'),
submitPlaceholder: t('forms', 'Enter your answer'),
warningInvalid: t('forms', 'This question needs a title!'),
},
long: {
component: QuestionLong,
icon: IconTextLong,
label: t('forms', 'Long text'),
predefined: false,
titlePlaceholder: t('forms', 'Long text question title'),
createPlaceholder: t('forms', 'People can enter a long text'),
submitPlaceholder: t('forms', 'Enter your answer'),
warningInvalid: t('forms', 'This question needs a title!'),
},
date: {
component: QuestionDate,
icon: IconCalendar,
label: t('forms', 'Date'),
predefined: false,
titlePlaceholder: t('forms', 'Date question title'),
createPlaceholder: t('forms', 'People can pick a date'),
createPlaceholderRange: t('forms', 'People can pick a date range'),
submitPlaceholder: t('forms', 'Pick a date'),
submitPlaceholderRange: t('forms', 'Pick a date range'),
warningInvalid: t('forms', 'This question needs a title!'),
pickerType: 'date',
storageFormat: 'YYYY-MM-DD',
momentFormat: 'L',
},
datetime: {
component: QuestionDate,
icon: IconClockOutline,
label: t('forms', 'Datetime'),
predefined: false,
titlePlaceholder: t('forms', 'Datetime question title'),
createPlaceholder: t('forms', 'People can pick a date and time'),
submitPlaceholder: t('forms', 'Pick a date and time'),
warningInvalid: t('forms', 'This question needs a title!'),
pickerType: 'datetime',
storageFormat: 'YYYY-MM-DD HH:mm',
momentFormat: 'LLL',
},
time: {
component: QuestionDate,
icon: IconClockOutline,
label: t('forms', 'Time'),
predefined: false,
titlePlaceholder: t('forms', 'Time question title'),
createPlaceholder: t('forms', 'People can pick a time'),
createPlaceholderRange: t('forms', 'People can pick a time range'),
submitPlaceholder: t('forms', 'Pick a time'),
submitPlaceholderRange: t('forms', 'Pick a time range'),
warningInvalid: t('forms', 'This question needs a title!'),
pickerType: 'time',
storageFormat: 'HH:mm',
momentFormat: 'LT',
},
linearscale: {
component: QuestionLinearScale,
icon: IconLinearScale,
label: t('forms', 'Linear scale'),
predefined: true,
titlePlaceholder: t('forms', 'Linear scale question title'),
warningInvalid: t('forms', 'This question needs a title!'),
},
color: {
component: QuestionColor,
icon: IconPalette,
label: t('forms', 'Color'),
predefined: false,
titlePlaceholder: t('forms', 'Color question title'),
createPlaceholder: t('forms', 'People can pick a color'),
submitPlaceholder: t('forms', 'Pick a color'),
warningInvalid: t('forms', 'This question needs a title!'),
},
section: {
component: QuestionSection,
icon: IconFormatSection,
label: t('forms', 'Section'),
predefined: false,
titlePlaceholder: t('forms', 'Section title'),
warningInvalid: t('forms', 'This section needs a title!'),
},
}