From eec04a351c96df8e27d7a0a9b47db0ab0b7d283a Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 16 Jun 2020 04:14:28 +0200
Subject: [PATCH 1/3] Start of dropdown question type, ref #340

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 lib/Db/Question.php                           |   3 +-
 src/components/Questions/AnswerInput.vue      |  15 +-
 src/components/Questions/QuestionDropdown.vue | 362 ++++++++++++++++++
 src/components/Questions/QuestionMultiple.vue |   1 +
 src/models/AnswerTypes.js                     |  30 +-
 5 files changed, 401 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Questions/QuestionDropdown.vue

diff --git a/lib/Db/Question.php b/lib/Db/Question.php
index 090d320..26549d0 100644
--- a/lib/Db/Question.php
+++ b/lib/Db/Question.php
@@ -52,7 +52,8 @@ class Question extends Entity {
 		'short',
 		'long',
 		'multiple',
-		'multiple_unique'
+		'multiple_unique',
+		'dropdown'
 	];
 
 	public function __construct() {
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index d9aacb3..ef1abb8 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -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);
 		}
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
new file mode 100644
index 0000000..46caa67
--- /dev/null
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -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>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 423d682..82cc0f6 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -69,6 +69,7 @@
 					:answer="answer"
 					:index="index"
 					:is-unique="isUnique"
+					:is-dropdown="false"
 					:max-option-length="maxStringLengths.optionText"
 					@add="addNewEntry"
 					@delete="deleteOption"
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index 999a857..1eec0a0 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -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!'),
 	},
 

From 7bba1f067ff2b3842775a3eab4448388d22ef6d4 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 25 Jun 2020 19:54:45 +0200
Subject: [PATCH 2/3] Add icon for dropdown question type

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 css/icons.scss            | 7 ++++---
 img/answer-dropdown.svg   | 1 +
 src/models/AnswerTypes.js | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)
 create mode 100644 img/answer-dropdown.svg

diff --git a/css/icons.scss b/css/icons.scss
index 42b034e..4aa373b 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -20,14 +20,15 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
- 
+
 // Icon definitions
 @include icon-black-white('forms', 'forms', 3);
 @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-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);
 
 .icon-yes {
diff --git a/img/answer-dropdown.svg b/img/answer-dropdown.svg
new file mode 100644
index 0000000..942aa21
--- /dev/null
+++ b/img/answer-dropdown.svg
@@ -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>
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index 1eec0a0..f8b4631 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -73,7 +73,7 @@ export default {
 
 	dropdown: {
 		component: QuestionDropdown,
-		icon: 'icon-triangle-s',
+		icon: 'icon-answer-dropdown',
 		label: t('forms', 'Dropdown'),
 		validate: question => question.options.length > 0,
 

From f23678ffd0256109a7d1ac8cdc761fa7a871f5cf Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 25 Jun 2020 19:54:53 +0200
Subject: [PATCH 3/3] Fix display of select dropdown and adjust to Forms text

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 src/components/Questions/QuestionDropdown.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 46caa67..3a855a1 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -359,4 +359,11 @@ export default {
 	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>