Start of dropdown question type, ref #340
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
b7e9448cf0
commit
eec04a351c
|
@ -52,7 +52,8 @@ class Question extends Entity {
|
|||
'short',
|
||||
'long',
|
||||
'multiple',
|
||||
'multiple_unique'
|
||||
'multiple_unique',
|
||||
'dropdown'
|
||||
];
|
||||
|
||||
public function __construct() {
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<li class="question__item">
|
||||
<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
|
||||
<div class="question__item__pseudoInput"
|
||||
:class="{
|
||||
'question__item__pseudoInput--unique':isUnique,
|
||||
'question__item__pseudoInput--dropdown':isDropdown
|
||||
}" />
|
||||
<input
|
||||
ref="input"
|
||||
:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
|
||||
|
@ -54,6 +58,10 @@ export default {
|
|||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
isDropdown: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
maxOptionLength: {
|
||||
type: Number,
|
||||
required: true,
|
||||
|
@ -204,6 +212,11 @@ export default {
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Do not show pseudo-icon for dropdowns
|
||||
&--dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary-element);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,362 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
-
|
||||
- @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<Question
|
||||
v-bind.sync="$attrs"
|
||||
:text="text"
|
||||
:mandatory="mandatory"
|
||||
:edit.sync="edit"
|
||||
:read-only="readOnly"
|
||||
:max-question-length="maxStringLengths.questionText"
|
||||
:title-placeholder="answerType.titlePlaceholder"
|
||||
:warning-invalid="answerType.warningInvalid"
|
||||
:content-valid="contentValid"
|
||||
:shift-drag-handle="shiftDragHandle"
|
||||
@update:text="onTitleChange"
|
||||
@update:mandatory="onMandatoryChange"
|
||||
@delete="onDelete">
|
||||
<select v-if="!edit"
|
||||
:id="text"
|
||||
:name="text"
|
||||
:multiple="isMultiple"
|
||||
:required="mandatory"
|
||||
class="question__content">
|
||||
<option value="">
|
||||
{{ selectOptionPlaceholder }}
|
||||
</option>
|
||||
<option v-for="answer in options"
|
||||
:key="answer.id"
|
||||
:value="answer.id">
|
||||
{{ answer.text }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<ol v-if="edit" class="question__content">
|
||||
<!-- Answer text input edit -->
|
||||
<AnswerInput v-for="(answer, index) in options"
|
||||
:key="index /* using index to keep the same vnode after new answer creation */"
|
||||
ref="input"
|
||||
:answer="answer"
|
||||
:index="index"
|
||||
:is-unique="!isMultiple"
|
||||
:is-dropdown="true"
|
||||
:max-option-length="maxStringLengths.optionText"
|
||||
@add="addNewEntry"
|
||||
@delete="deleteOption"
|
||||
@update:answer="updateAnswer" />
|
||||
|
||||
<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
|
||||
<input
|
||||
:aria-label="t('forms', 'Add a new answer')"
|
||||
:placeholder="t('forms', 'Add a new answer')"
|
||||
class="question__input"
|
||||
:maxlength="maxStringLengths.optionText"
|
||||
minlength="1"
|
||||
type="text"
|
||||
@click="addNewEntry"
|
||||
@focus="addNewEntry">
|
||||
</li>
|
||||
</ol>
|
||||
</Question>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import axios from '@nextcloud/axios'
|
||||
|
||||
import AnswerInput from './AnswerInput'
|
||||
import QuestionMixin from '../../mixins/QuestionMixin'
|
||||
import GenRandomId from '../../utils/GenRandomId'
|
||||
|
||||
export default {
|
||||
name: 'QuestionDropdown',
|
||||
|
||||
components: {
|
||||
AnswerInput,
|
||||
},
|
||||
|
||||
mixins: [QuestionMixin],
|
||||
|
||||
computed: {
|
||||
selectOptionPlaceholder() {
|
||||
if (this.readOnly) {
|
||||
return this.answerType.submitPlaceholder
|
||||
}
|
||||
return this.answerType.createPlaceholder
|
||||
},
|
||||
|
||||
contentValid() {
|
||||
return this.answerType.validate(this)
|
||||
},
|
||||
|
||||
isLastEmpty() {
|
||||
const value = this.options[this.options.length - 1]
|
||||
return value?.text?.trim().length === 0
|
||||
},
|
||||
|
||||
isMultiple() {
|
||||
// This can be extended if we want to include support for <select multiple>
|
||||
return false
|
||||
},
|
||||
|
||||
hasNoAnswer() {
|
||||
return this.options.length === 0
|
||||
},
|
||||
|
||||
areNoneChecked() {
|
||||
return this.values.length === 0
|
||||
},
|
||||
|
||||
shiftDragHandle() {
|
||||
return this.edit && this.options.length !== 0 && !this.isLastEmpty
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
edit(edit) {
|
||||
// When leaving edit mode, filter and delete empty options
|
||||
if (!edit) {
|
||||
const options = this.options.filter(option => {
|
||||
if (!option.text) {
|
||||
this.deleteOptionFromDatabase(option)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
// update parent
|
||||
this.updateOptions(options)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(event, answerId) {
|
||||
const isChecked = event.target.checked === true
|
||||
let values = this.values.slice()
|
||||
|
||||
// Simple select
|
||||
if (!this.isMultiple) {
|
||||
this.$emit('update:values', [answerId])
|
||||
return
|
||||
}
|
||||
|
||||
// Select with multiple
|
||||
if (isChecked) {
|
||||
values.push(answerId)
|
||||
} else {
|
||||
values = values.filter(id => id !== answerId)
|
||||
}
|
||||
|
||||
// Emit values and remove duplicates
|
||||
this.$emit('update:values', [...new Set(values)])
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the provided answer checked ?
|
||||
* @param {number} id the answer id
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isChecked(id) {
|
||||
return this.values.indexOf(id) > -1
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the provided answer required ?
|
||||
* This is needed for checkboxes as html5
|
||||
* doesn't allow to require at least ONE checked.
|
||||
* So we require the one that are checked or all
|
||||
* if none are checked yet.
|
||||
* @param {number} id the answer id
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isRequired(id) {
|
||||
// false, if question not mandatory
|
||||
if (!this.mandatory) {
|
||||
return false
|
||||
}
|
||||
|
||||
// true for simple select
|
||||
if (!this.isMultiple) {
|
||||
return true
|
||||
}
|
||||
|
||||
// For checkboxes, only required if no other is checked
|
||||
return this.areNoneChecked
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the options
|
||||
* @param {Array} options options to change
|
||||
*/
|
||||
updateOptions(options) {
|
||||
this.$emit('update:options', options)
|
||||
},
|
||||
|
||||
/**
|
||||
* Update an existing answer locally
|
||||
*
|
||||
* @param {string|number} id the answer id
|
||||
* @param {Object} answer the answer to update
|
||||
*/
|
||||
updateAnswer(id, answer) {
|
||||
const options = this.options.slice()
|
||||
const answerIndex = options.findIndex(option => option.id === id)
|
||||
options[answerIndex] = answer
|
||||
|
||||
this.updateOptions(options)
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a new empty answer locally
|
||||
*/
|
||||
addNewEntry() {
|
||||
// If entering from non-edit-mode (possible by click), activate edit-mode
|
||||
this.edit = true
|
||||
|
||||
// Add local entry
|
||||
const options = this.options.slice()
|
||||
options.push({
|
||||
id: GenRandomId(),
|
||||
question_id: this.id,
|
||||
text: '',
|
||||
local: true,
|
||||
})
|
||||
|
||||
// Update question
|
||||
this.updateOptions(options)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.focusIndex(options.length - 1)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Restore an option locally
|
||||
*
|
||||
* @param {Object} option the option
|
||||
* @param {number} index the options index in this.options
|
||||
*/
|
||||
restoreOption(option, index) {
|
||||
const options = this.options.slice()
|
||||
options.splice(index, 0, option)
|
||||
|
||||
this.updateOptions(options)
|
||||
this.focusIndex(index)
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete an option
|
||||
*
|
||||
* @param {number} id the options id
|
||||
*/
|
||||
deleteOption(id) {
|
||||
const options = this.options.slice()
|
||||
const optionIndex = options.findIndex(option => option.id === id)
|
||||
|
||||
if (options.length === 1) {
|
||||
// Clear Text, but don't remove. Will be removed, when leaving edit-mode
|
||||
options[0].text = ''
|
||||
} else {
|
||||
// Remove entry
|
||||
const option = Object.assign({}, this.options[optionIndex])
|
||||
|
||||
// delete locally
|
||||
options.splice(optionIndex, 1)
|
||||
|
||||
// delete from Db
|
||||
this.deleteOptionFromDatabase(option)
|
||||
}
|
||||
|
||||
// Update question
|
||||
this.updateOptions(options)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.focusIndex(optionIndex - 1)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete the option from Db in background.
|
||||
* Restore option if delete not possible
|
||||
*
|
||||
* @param {Object} option The option to delete
|
||||
*/
|
||||
deleteOptionFromDatabase(option) {
|
||||
const optionIndex = this.options.findIndex(opt => opt.id === option.id)
|
||||
|
||||
if (!option.local) {
|
||||
// let's not await, deleting in background
|
||||
axios.delete(generateUrl('/apps/forms/api/v1/option/{id}', { id: option.id }))
|
||||
.catch(error => {
|
||||
showError(t('forms', 'There was an issue deleting this option'))
|
||||
console.error(error)
|
||||
// restore option
|
||||
this.restoreOption(option, optionIndex)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Focus the input matching the index
|
||||
*
|
||||
* @param {Number} index the value index
|
||||
*/
|
||||
focusIndex(index) {
|
||||
const inputs = this.$refs.input
|
||||
if (inputs && inputs[index]) {
|
||||
const input = inputs[index]
|
||||
input.focus()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.question__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.question__item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
// Using type to have a higher order than the input styling of server
|
||||
.question__input[type=text] {
|
||||
width: 100%;
|
||||
// Height 34px + 1px Border
|
||||
min-height: 35px;
|
||||
margin: 0;
|
||||
padding: 0 0;
|
||||
border: 0;
|
||||
border-bottom: 1px dotted var(--color-border-dark);
|
||||
border-radius: 0;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
|
@ -69,6 +69,7 @@
|
|||
:answer="answer"
|
||||
:index="index"
|
||||
:is-unique="isUnique"
|
||||
:is-dropdown="false"
|
||||
:max-option-length="maxStringLengths.optionText"
|
||||
@add="addNewEntry"
|
||||
@delete="deleteOption"
|
||||
|
|
|
@ -20,14 +20,16 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import QuestionLong from '../components/Questions/QuestionLong'
|
||||
import QuestionShort from '../components/Questions/QuestionShort'
|
||||
import QuestionMultiple from '../components/Questions/QuestionMultiple'
|
||||
import QuestionDropdown from '../components/Questions/QuestionDropdown'
|
||||
import QuestionShort from '../components/Questions/QuestionShort'
|
||||
import QuestionLong from '../components/Questions/QuestionLong'
|
||||
|
||||
/**
|
||||
* @typedef {Object} AnswerTypes
|
||||
* @property {string} multiple_unique
|
||||
* @property {string} multiple
|
||||
* @property {string} multiple_unique
|
||||
* @property {string} dropdown
|
||||
* @property {string} short
|
||||
* @property {string} long
|
||||
*/
|
||||
|
@ -46,6 +48,16 @@ export default {
|
|||
* @prop warningInvalid The warning users see in edit mode, if the question is invalid.
|
||||
*/
|
||||
|
||||
multiple: {
|
||||
component: QuestionMultiple,
|
||||
icon: 'icon-answer-checkbox',
|
||||
label: t('forms', 'Checkboxes'),
|
||||
validate: question => question.options.length > 0,
|
||||
|
||||
titlePlaceholder: t('forms', 'Checkbox question title'),
|
||||
warningInvalid: t('forms', 'This question needs a title and at least one answer!'),
|
||||
},
|
||||
|
||||
multiple_unique: {
|
||||
component: QuestionMultiple,
|
||||
icon: 'icon-answer-multiple',
|
||||
|
@ -59,13 +71,15 @@ export default {
|
|||
unique: true,
|
||||
},
|
||||
|
||||
multiple: {
|
||||
component: QuestionMultiple,
|
||||
icon: 'icon-answer-checkbox',
|
||||
label: t('forms', 'Checkboxes'),
|
||||
dropdown: {
|
||||
component: QuestionDropdown,
|
||||
icon: 'icon-triangle-s',
|
||||
label: t('forms', 'Dropdown'),
|
||||
validate: question => question.options.length > 0,
|
||||
|
||||
titlePlaceholder: t('forms', 'Checkbox question title'),
|
||||
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!'),
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue