Merge pull request #461 from nextcloud/enhancement/question-dropdown
This commit is contained in:
commit
93da2f552d
|
@ -20,14 +20,15 @@
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Icon definitions
|
// Icon definitions
|
||||||
@include icon-black-white('forms', 'forms', 3);
|
@include icon-black-white('forms', 'forms', 3);
|
||||||
@include icon-black-white('clone', 'forms', 1);
|
@include icon-black-white('clone', 'forms', 1);
|
||||||
@include icon-black-white('answer-short', 'forms', 1);
|
|
||||||
@include icon-black-white('answer-long', 'forms', 1);
|
|
||||||
@include icon-black-white('answer-checkbox', 'forms', 1);
|
@include icon-black-white('answer-checkbox', 'forms', 1);
|
||||||
@include icon-black-white('answer-multiple', 'forms', 2);
|
@include icon-black-white('answer-multiple', 'forms', 2);
|
||||||
|
@include icon-black-white('answer-dropdown', 'forms', 1);
|
||||||
|
@include icon-black-white('answer-short', 'forms', 1);
|
||||||
|
@include icon-black-white('answer-long', 'forms', 1);
|
||||||
@include icon-black-white('drag-handle', 'forms', 1);
|
@include icon-black-white('drag-handle', 'forms', 1);
|
||||||
|
|
||||||
.icon-yes {
|
.icon-yes {
|
||||||
|
|
1
img/answer-dropdown.svg
Normal file
1
img/answer-dropdown.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg width="16px" height="16px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m8 1c-3.866 0-7 3.134-7 7 0 3.866 3.134 7 7 7 3.866 0 7-3.134 7-7 0-3.866-3.134-7-7-7zm-4 5 8 0.0058594-4 3.9941-4-4z"/></svg>
|
After Width: | Height: | Size: 217 B |
|
@ -52,7 +52,8 @@ class Question extends Entity {
|
||||||
'short',
|
'short',
|
||||||
'long',
|
'long',
|
||||||
'multiple',
|
'multiple',
|
||||||
'multiple_unique'
|
'multiple_unique',
|
||||||
|
'dropdown'
|
||||||
];
|
];
|
||||||
|
|
||||||
public function __construct() {
|
public function __construct() {
|
||||||
|
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<li class="question__item">
|
<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
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
|
:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
|
||||||
|
@ -54,6 +58,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
isDropdown: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
maxOptionLength: {
|
maxOptionLength: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -204,6 +212,11 @@ export default {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Do not show pseudo-icon for dropdowns
|
||||||
|
&--dropdown {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--color-primary-element);
|
border-color: var(--color-primary-element);
|
||||||
}
|
}
|
||||||
|
|
369
src/components/Questions/QuestionDropdown.vue
Normal file
369
src/components/Questions/QuestionDropdown.vue
Normal file
|
@ -0,0 +1,369 @@
|
||||||
|
<!--
|
||||||
|
- @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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix display of select dropdown and adjust to Forms text
|
||||||
|
select.question__content {
|
||||||
|
height: 44px;
|
||||||
|
padding: 12px 0 12px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -69,6 +69,7 @@
|
||||||
:answer="answer"
|
:answer="answer"
|
||||||
:index="index"
|
:index="index"
|
||||||
:is-unique="isUnique"
|
:is-unique="isUnique"
|
||||||
|
:is-dropdown="false"
|
||||||
:max-option-length="maxStringLengths.optionText"
|
:max-option-length="maxStringLengths.optionText"
|
||||||
@add="addNewEntry"
|
@add="addNewEntry"
|
||||||
@delete="deleteOption"
|
@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 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
|
* @typedef {Object} AnswerTypes
|
||||||
* @property {string} multiple_unique
|
|
||||||
* @property {string} multiple
|
* @property {string} multiple
|
||||||
|
* @property {string} multiple_unique
|
||||||
|
* @property {string} dropdown
|
||||||
* @property {string} short
|
* @property {string} short
|
||||||
* @property {string} long
|
* @property {string} long
|
||||||
*/
|
*/
|
||||||
|
@ -46,6 +48,16 @@ export default {
|
||||||
* @prop warningInvalid The warning users see in edit mode, if the question is invalid.
|
* @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: {
|
multiple_unique: {
|
||||||
component: QuestionMultiple,
|
component: QuestionMultiple,
|
||||||
icon: 'icon-answer-multiple',
|
icon: 'icon-answer-multiple',
|
||||||
|
@ -59,13 +71,15 @@ export default {
|
||||||
unique: true,
|
unique: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
multiple: {
|
dropdown: {
|
||||||
component: QuestionMultiple,
|
component: QuestionDropdown,
|
||||||
icon: 'icon-answer-checkbox',
|
icon: 'icon-answer-dropdown',
|
||||||
label: t('forms', 'Checkboxes'),
|
label: t('forms', 'Dropdown'),
|
||||||
validate: question => question.options.length > 0,
|
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!'),
|
warningInvalid: t('forms', 'This question needs a title and at least one answer!'),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue