Start of dropdown question type, ref #340

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2020-06-16 04:14:28 +02:00
parent b7e9448cf0
commit eec04a351c
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
5 changed files with 401 additions and 10 deletions

View File

@ -52,7 +52,8 @@ class Question extends Entity {
'short',
'long',
'multiple',
'multiple_unique'
'multiple_unique',
'dropdown'
];
public function __construct() {

View File

@ -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);
}

View File

@ -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>

View File

@ -69,6 +69,7 @@
:answer="answer"
:index="index"
:is-unique="isUnique"
:is-dropdown="false"
:max-option-length="maxStringLengths.optionText"
@add="addNewEntry"
@delete="deleteOption"

View File

@ -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!'),
},