From c203362600e1912c4675db3d677a8054ee92e71c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 27 Mar 2020 16:12:01 +0100
Subject: [PATCH 01/17] Create/Edit layout and title/desc header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/views/Create.vue | 169 ++++++++++++++++++++++---------------------
 1 file changed, 86 insertions(+), 83 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 42b2e28..6449dda 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -27,60 +27,62 @@
 
 <template>
 	<AppContent>
-		<div class="workbench">
-			<div>
-				<h2>{{ t('forms', 'Form description') }}</h2>
+		<header>
+			<label class="hidden-visually" for="form-title">{{ t('forms', 'Title') }}</label>
+			<input
+				id="form-title"
+				v-model="form.form.title"
+				:minlength="0"
+				:placeholder="t('forms', 'Title')"
+				:required="true"
+				type="text">
+			<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
+			<textarea
+				id="form-desc"
+				ref="description"
+				v-model="form.form.description"
+				:placeholder="t('forms', 'Description')"
+				@keydown="autoSizeDescription" />
+		</header>
 
-				<label>{{ t('forms', 'Title') }}</label>
-				<input id="formTitle"
-					v-model="form.form.title"
-					:class="{ error: titleEmpty }"
-					type="text">
-
-				<label>{{ t('forms', 'Description') }}</label>
-				<textarea id="formDesc" v-model="form.form.description" style="resize: vertical; width: 100%;" />
+		<section>
+			<div id="quiz-form-selector-text">
+				<!--shows inputs for question types: drop down box to select the type, text box for question, and button to add-->
+				<label for="ans-type">Answer Type: </label>
+				<select v-model="selected">
+					<option value="" disabled>
+						Select
+					</option>
+					<option v-for="type in questionTypes" :key="type.value" :value="type.value">
+						{{ type.text }}
+					</option>
+				</select>
+				<input
+					v-model="newQuestion"
+					:placeholder=" t('forms', 'Add Question') "
+					maxlength="2048"
+					@keyup.enter="addQuestion()">
+				<button id="questButton"
+					@click="addQuestion()">
+					{{ t('forms', 'Add Question') }}
+				</button>
 			</div>
-
-			<div>
-				<h2>{{ t('forms', 'Make a Form') }}</h2>
-				<div id="quiz-form-selector-text">
-					<!--shows inputs for question types: drop down box to select the type, text box for question, and button to add-->
-					<label for="ans-type">Answer Type: </label>
-					<select v-model="selected">
-						<option value="" disabled>
-							Select
-						</option>
-						<option v-for="type in questionTypes" :key="type.value" :value="type.value">
-							{{ type.text }}
-						</option>
-					</select>
-					<input
-						v-model="newQuestion"
-						:placeholder=" t('forms', 'Add Question') "
-						maxlength="2048"
-						@keyup.enter="addQuestion()">
-					<button id="questButton"
-						@click="addQuestion()">
-						{{ t('forms', 'Add Question') }}
-					</button>
-				</div>
-				<!--Transition group to list the already added questions (in the form of quizFormItems)-->
-				<transitionGroup
-					id="form-list"
-					name="list"
-					tag="ul"
-					class="form-table">
-					<QuizFormItem
-						v-for="(question, index) in form.questions"
-						:key="question.id"
-						:question="question"
-						:type="question.type"
-						@addOption="addOption"
-						@deleteOption="deleteOption"
-						@deleteQuestion="deleteQuestion(question, index)" />
-				</transitionGroup>
-			</div>
-		</div>
+			<!--Transition group to list the already added questions (in the form of quizFormItems)-->
+			<transitionGroup
+				id="form-list"
+				name="list"
+				tag="ul"
+				class="form-table">
+				<QuizFormItem
+					v-for="(question, index) in form.questions"
+					:key="question.id"
+					:question="question"
+					:type="question.type"
+					@addOption="addOption"
+					@deleteOption="deleteOption"
+					@deleteQuestion="deleteQuestion(question, index)" />
+			</transitionGroup>
+		</section>
 	</AppContent>
 </template>
 
@@ -115,7 +117,6 @@ export default {
 			nextQuestionId: 1,
 			writingForm: false,
 			loadingForm: true,
-			titleEmpty: false,
 			selected: '',
 			uniqueQuestionText: false,
 			uniqueOptionText: false,
@@ -273,6 +274,12 @@ export default {
 			})
 		},
 
+		autoSizeDescription() {
+			const textarea = this.$refs.description
+			textarea.style.cssText = 'height:auto; padding:0'
+			textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
+		},
+
 		debounceWriteForm: debounce(function() {
 			this.writeForm()
 		}, 200),
@@ -312,40 +319,36 @@ export default {
 
 <style lang="scss">
 #app-content {
-	input.hasTimepicker {
-		width: 75px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	header,
+	section {
+		width: 100%;
+		max-width: 900px;
 	}
-}
 
-.warning {
-	color: var(--color-error);
-	font-weight: bold;
-}
-
-.forms-content {
-	display: flex;
-	padding-top: 45px;
-	flex-grow: 1;
-}
-
-input[type="text"] {
-	display: block;
-	width: 100%;
-}
-
-.workbench {
-	display: flex;
-	flex-grow: 1;
-	flex-wrap: wrap;
-	overflow-x: hidden;
-
-	> div {
-		min-width: 245px;
-		max-width: 540px;
+	header {
 		display: flex;
 		flex-direction: column;
-		flex-grow: 1;
-		padding: 8px;
+		margin: 44px;
+
+		#form-title,
+		#form-desc {
+			width: 100%;
+			border: none;
+			margin: 10px; // aerate the header
+			padding: 0; // makes alignment and desc height calc easier
+		}
+		#form-title {
+			font-size: 2em;
+		}
+		#form-desc {
+			min-height: 60px;
+			max-height: 200px;
+			padding-left: 2px; // align with title (compensate font size diff)
+			resize: none
+		}
 	}
 }
 

From 1d76b7e854c736910f213448945223ef8eb88439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 27 Mar 2020 16:54:17 +0100
Subject: [PATCH 02/17] Topbar & sidebar toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 package.json              |  1 +
 src/components/TopBar.vue | 69 +++++++++++++++++++++++++++++++++++++++
 src/views/Create.vue      | 30 +++++++++++++++++
 src/views/Sidebar.vue     | 21 +++++++++++-
 4 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TopBar.vue

diff --git a/package.json b/package.json
index e97a47e..d362b9f 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
 		"@nextcloud/auth": "^1.2.3",
 		"@nextcloud/axios": "^1.3.2",
 		"@nextcloud/dialogs": "^1.2.2",
+		"@nextcloud/event-bus": "^1.1.3",
 		"@nextcloud/l10n": "^1.2.3",
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^1.0.2",
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
new file mode 100644
index 0000000..b6a83a8
--- /dev/null
+++ b/src/components/TopBar.vue
@@ -0,0 +1,69 @@
+<!--
+  - @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/>.
+  -
+  -
+  - UPDATE: Adds Quiz option and takes the input:
+  - is yet to store input of quizzes and cannot represtent them
+  - requires quizFormItem.vue (should be added to svn)
+  -->
+<template>
+	<div class="top-bar" role="toolbar">
+		<slot />
+	</div>
+</template>
+<script>
+export default {
+	name: 'TopBar',
+}
+</script>
+
+<style lang="scss" scoped>
+.top-bar {
+	position: absolute;
+	z-index: 10;
+	top: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	height: 60px;
+	padding: 0 6px;
+
+	button {
+		cursor: pointer;
+		&:not(.primary) {
+			width: 44px;
+			height: 44px;
+			background-color: transparent;
+			border: none;
+			&:hover, a:active, a:focus {
+				background-color: var(--color-background-darker);
+			}
+		}
+
+		> span {
+			cursor: pointer;
+			opacity: 1;
+			background-size: 16px;
+		}
+	}
+}
+
+</style>
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 6449dda..7fce597 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -27,6 +27,18 @@
 
 <template>
 	<AppContent>
+		<!-- Show results & sidebar button -->
+		<TopBar>
+			<button class="primary" @click="showResults">
+				<span class="icon-forms-white" role="img" />
+				{{ t('forms', 'Show results') }}
+			</button>
+			<button v-tooltip="t('forms', 'Toggle settings')" @click="toggleSidebar">
+				<span class="icon-settings" role="img" />
+			</button>
+		</TopBar>
+
+		<!-- Forms title & description-->
 		<header>
 			<label class="hidden-visually" for="form-title">{{ t('forms', 'Title') }}</label>
 			<input
@@ -90,12 +102,14 @@
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
+import { emit } from '@nextcloud/event-bus'
 import debounce from 'debounce'
 
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import QuizFormItem from '../components/quizFormItem'
+import TopBar from '../components/TopBar'
 
 import ViewsMixin from '../mixins/ViewsMixin'
 
@@ -104,6 +118,7 @@ export default {
 	components: {
 		AppContent,
 		QuizFormItem,
+		TopBar,
 	},
 
 	mixins: [ViewsMixin],
@@ -313,6 +328,21 @@ export default {
 					})
 			}
 		},
+
+		/**
+		 * Topbar methods
+		 */
+		showResults() {
+			this.$router.push({
+				name: 'results',
+				params: {
+					hash: this.form.event.hash,
+				},
+			})
+		},
+		toggleSidebar() {
+			emit('toggleSidebar')
+		},
 	},
 }
 </script>
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index 7afde47..ab10960 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -21,7 +21,7 @@
  -->
 
 <template>
-	<AppSidebar :title="form.form.title">
+	<AppSidebar v-show="opened" :title="form.form.title" @close="onClose">
 		<div class="configBox ">
 			<label class="title icon-settings">
 				{{ t('forms', 'Form configurations') }}
@@ -109,6 +109,7 @@
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
 import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
 import moment from '@nextcloud/moment'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import ShareDiv from '../components/shareDiv'
 import ViewsMixin from '../mixins/ViewsMixin'
@@ -125,6 +126,7 @@ export default {
 
 	data() {
 		return {
+			opened: true,
 			lang: '',
 			locale: '',
 			longDateFormat: '',
@@ -182,6 +184,13 @@ export default {
 		moment.locale(this.locale)
 		this.longDateFormat = moment.localeData().longDateFormat('L')
 		this.dateTimeFormat = moment.localeData().longDateFormat('L') + ' ' + moment.localeData().longDateFormat('LT')
+
+		// Watch for Sidebar toggle
+		subscribe('toggleSidebar', this.onToggle)
+	},
+
+	beforeDestroy() {
+		unsubscribe('toggleSidebar')
 	},
 
 	methods: {
@@ -196,6 +205,16 @@ export default {
 		removeShare(item) {
 			this.form.shares.splice(this.form.shares.indexOf(item), 1)
 		},
+
+		/**
+		 * Sidebar state methods
+		 */
+		onClose() {
+			this.opened = false
+		},
+		onToggle() {
+			this.opened = !this.opened
+		},
 	},
 }
 </script>

From ed950c3c9b83ad8d79d54e5716f92150d09a899b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 27 Mar 2020 18:30:38 +0100
Subject: [PATCH 03/17] New answer menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 css/icons.scss                         |  3 +
 img/answer-checkbox.svg                |  4 ++
 img/answer-long.svg                    | 86 ++++++++++++++++++++++++++
 img/answer-short.svg                   | 68 ++++++++++++++++++++
 src/components/EmptyContent.vue        |  3 +
 src/models/{Form.js => AnswerTypes.js} | 57 ++++++++---------
 src/views/Create.vue                   | 63 ++++++++++++++-----
 7 files changed, 236 insertions(+), 48 deletions(-)
 create mode 100644 img/answer-checkbox.svg
 create mode 100644 img/answer-long.svg
 create mode 100644 img/answer-short.svg
 rename src/models/{Form.js => AnswerTypes.js} (62%)

diff --git a/css/icons.scss b/css/icons.scss
index a799705..b5b9b20 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -2,6 +2,9 @@
 // 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);
 
 .icon-yes {
 	@include icon-color('checkmark', 'actions', $color-success, 1, true);
diff --git a/img/answer-checkbox.svg b/img/answer-checkbox.svg
new file mode 100644
index 0000000..181c78b
--- /dev/null
+++ b/img/answer-checkbox.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
+  <path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M2.43 2a.43.43 0 00-.43.43V4.3l.86.86V2.86h8.73l.86-.86H2.43zM14 5.86l-.86.86v6.42H2.86v-2.6L2 9.68v3.9a.43.43 0 00.43.42h11.14a.43.43 0 00.43-.43v-7.7z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" paint-order="markers fill stroke"/>
+  <path d="M6.09 12.5L1.14 7.55l1.41-1.41L6.1 9.67l6.34-6.38 1.44 1.43z"/>
+</svg>
diff --git a/img/answer-long.svg b/img/answer-long.svg
new file mode 100644
index 0000000..e69e7ca
--- /dev/null
+++ b/img/answer-long.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="answer-long.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2520"
+     inkscape:window-height="1353"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="20.279588"
+     inkscape:cx="8.6803276"
+     inkscape:cy="2.7931198"
+     inkscape:window-x="20"
+     inkscape:window-y="67"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     id="rect822"
+     width="12.000001"
+     height="1.9999999"
+     x="2"
+     y="2"
+     rx="1.3877789e-16"
+     ry="1.3877788e-16" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     id="rect822-3"
+     width="6.0000005"
+     height="1.9999999"
+     x="2"
+     y="11"
+     rx="1.3877789e-16"
+     ry="1.3877788e-16" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     id="rect822-6"
+     width="12.000001"
+     height="1.9999999"
+     x="2"
+     y="5"
+     rx="1.3877789e-16"
+     ry="1.3877788e-16" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     id="rect822-6-7"
+     width="12.000001"
+     height="1.9999999"
+     x="2"
+     y="8"
+     rx="1.3877789e-16"
+     ry="1.3877788e-16" />
+</svg>
diff --git a/img/answer-short.svg b/img/answer-short.svg
new file mode 100644
index 0000000..1f056aa
--- /dev/null
+++ b/img/answer-short.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="answer-short.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2520"
+     inkscape:window-height="1353"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="20.279588"
+     inkscape:cx="8.6803276"
+     inkscape:cy="2.7931198"
+     inkscape:window-x="20"
+     inkscape:window-y="67"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     id="rect822"
+     width="12.000001"
+     height="1.9999999"
+     x="2"
+     y="5"
+     rx="1.3877789e-16"
+     ry="1.3877788e-16" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+     id="rect822-3"
+     width="6.0000005"
+     height="1.9999999"
+     x="2"
+     y="8"
+     rx="1.3877789e-16"
+     ry="1.3877788e-16" />
+</svg>
diff --git a/src/components/EmptyContent.vue b/src/components/EmptyContent.vue
index 7047d18..c9e788b 100644
--- a/src/components/EmptyContent.vue
+++ b/src/components/EmptyContent.vue
@@ -46,6 +46,9 @@ export default {
 <style lang="scss">
 .emptycontent {
 	margin-top: 20vh;
+	button {
+		margin: 3px;
+	}
 }
 
 </style>
diff --git a/src/models/Form.js b/src/models/AnswerTypes.js
similarity index 62%
rename from src/models/Form.js
rename to src/models/AnswerTypes.js
index 943e760..cdfdb06 100644
--- a/src/models/Form.js
+++ b/src/models/AnswerTypes.js
@@ -20,34 +20,29 @@
  *
  */
 
-export default class {
-
-	#data
-
-	/**
-	 * Construct the form
-	 * @param {Object} data the form data
-	 */
-	constructor(data) {
-		// Id check
-		if (!('id' in data && typeof data.id === 'number')) {
-			throw new Error('A new form must at least contain a valid id')
-		}
-
-		// Hash check
-		if (!('hash' in data && typeof data.id === 'string')) {
-			throw new Error('A new form must at least contain a valid hash')
-		}
-
-		this.#data = data
-	}
-
-	get id() {
-		return this.#data.id
-	}
-
-	get hash() {
-		return this.#data.hash
-	}
-
-}
+export default [
+	{
+		label: t('forms', 'Multiple choice'),
+		value: 'radiogroup',
+		icon: 'icon-forms',
+	},
+	{
+		label: t('forms', 'Checkboxes'),
+		value: 'checkbox',
+		icon: 'icon-answer-checkbox',
+	},
+	{
+		label: t('forms', 'Short answer'),
+		value: 'text',
+		icon: 'icon-answer-short',
+	},
+	{
+		label: t('forms', 'Long text'),
+		value: 'comment',
+		icon: 'icon-answer-long',
+	},
+	// {
+	// label: 'Drop Down',
+	// value: 'dropdown',
+	// },
+]
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 7fce597..dd2cf60 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -47,6 +47,7 @@
 				:minlength="0"
 				:placeholder="t('forms', 'Title')"
 				:required="true"
+				autofocus
 				type="text">
 			<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
 			<textarea
@@ -58,6 +59,17 @@
 		</header>
 
 		<section>
+			<!-- Add new questions toolbar -->
+			<!-- <div class="question-toolbar" role="toolbar">
+				<button v-for="type in answerTypes"
+					:key="type.label"
+					class="question-toolbar__question"
+					@click="addQuestion">
+					<span class="question-toolbar__icon" :class="type.icon" />
+					{{ type.label }}
+				</button>
+			</div> -->
+
 			<div id="quiz-form-selector-text">
 				<!--shows inputs for question types: drop down box to select the type, text box for question, and button to add-->
 				<label for="ans-type">Answer Type: </label>
@@ -79,8 +91,20 @@
 					{{ t('forms', 'Add Question') }}
 				</button>
 			</div>
-			<!--Transition group to list the already added questions (in the form of quizFormItems)-->
+
+			<!-- No questions -->
+			<EmptyContent v-if="form.questions.length === 0">
+				{{ t('forms', 'This form does not have any questions') }}
+				<template #desc>
+					<button class="primary" @click="openQuestionMenu">
+						{{ t('forms', 'Add a new one') }}
+					</button>
+				</template>
+			</EmptyContent>
+
+			<!-- Questions list -->
 			<transitionGroup
+				v-else
 				id="form-list"
 				name="list"
 				tag="ul"
@@ -103,11 +127,15 @@ import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
 import { emit } from '@nextcloud/event-bus'
+import { showError } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import { showError, showSuccess } from '@nextcloud/dialogs'
 
+import answerTypes from '../models/AnswerTypes'
+import EmptyContent from '../components/EmptyContent'
 import QuizFormItem from '../components/quizFormItem'
 import TopBar from '../components/TopBar'
 
@@ -116,7 +144,10 @@ import ViewsMixin from '../mixins/ViewsMixin'
 export default {
 	name: 'Create',
 	components: {
+		ActionButton,
+		Actions,
 		AppContent,
+		EmptyContent,
 		QuizFormItem,
 		TopBar,
 	},
@@ -143,14 +174,11 @@ export default {
 				{ text: 'Long Response', value: 'comment' },
 				{ text: 'Drop Down', value: 'dropdown' },
 			],
+			answerTypes,
 		}
 	},
 
 	computed: {
-		langShort() {
-			return this.lang.split('-')[0]
-		},
-
 		title() {
 			if (this.form.form.title === '') {
 				return t('forms', 'Create new form')
@@ -169,11 +197,6 @@ export default {
 				return t('forms', 'Done')
 			}
 		},
-
-		localeData() {
-			return moment.localeData(moment.locale(this.locale))
-		},
-
 	},
 
 	watch: {
@@ -191,12 +214,7 @@ export default {
 	},
 
 	created() {
-		if (this.$route.name === 'create') {
-			// TODO: manage this from Forms.vue, request a new form to the server
-			this.form.form.owner = OC.getCurrentUser().uid
-			this.loadingForm = false
-		} else if (this.$route.name === 'edit') {
-			// TODO: fetch & update form?
+		if (this.$route.name === 'edit') {
 			this.form.mode = 'edit'
 		} else if (this.$route.name === 'clone') {
 			// TODO: CLONE
@@ -343,6 +361,13 @@ export default {
 		toggleSidebar() {
 			emit('toggleSidebar')
 		},
+
+		/**
+		 * Add question methods
+		 */
+		openQuestionMenu() {
+			this.$refs.questionMenu.opened = true
+		},
 	},
 }
 </script>
@@ -380,6 +405,10 @@ export default {
 			resize: none
 		}
 	}
+
+	section {
+		position: relative;
+	}
 }
 
 /* Transitions for inserting and removing list items */

From 2a14697a062dfea33bc136205426ec7d765b4ecb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Sat, 28 Mar 2020 10:44:13 +0100
Subject: [PATCH 04/17] Cleanup answers svg
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 img/answer-checkbox.svg |  2 +-
 img/answer-long.svg     | 90 +++--------------------------------------
 img/answer-short.svg    | 70 ++------------------------------
 3 files changed, 9 insertions(+), 153 deletions(-)

diff --git a/img/answer-checkbox.svg b/img/answer-checkbox.svg
index 181c78b..32ee6ef 100644
--- a/img/answer-checkbox.svg
+++ b/img/answer-checkbox.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
-  <path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M2.43 2a.43.43 0 00-.43.43V4.3l.86.86V2.86h8.73l.86-.86H2.43zM14 5.86l-.86.86v6.42H2.86v-2.6L2 9.68v3.9a.43.43 0 00.43.42h11.14a.43.43 0 00.43-.43v-7.7z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" paint-order="markers fill stroke"/>
+  <path d="M2.43 2a.43.43 0 00-.43.43V4.3l.86.86v-2.3h8.73l.86-.86H2.43zM14 5.86l-.86.86v6.42H2.86v-2.6L2 9.68v3.9a.43.43 0 00.43.42h11.14a.43.43 0 00.43-.43v-7.7z"/>
   <path d="M6.09 12.5L1.14 7.55l1.41-1.41L6.1 9.67l6.34-6.38 1.44 1.43z"/>
 </svg>
diff --git a/img/answer-long.svg b/img/answer-long.svg
index e69e7ca..8303e29 100644
--- a/img/answer-long.svg
+++ b/img/answer-long.svg
@@ -1,86 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="16"
-   height="16"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="answer-long.svg"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14">
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2520"
-     inkscape:window-height="1353"
-     id="namedview8"
-     showgrid="false"
-     inkscape:zoom="20.279588"
-     inkscape:cx="8.6803276"
-     inkscape:cy="2.7931198"
-     inkscape:window-x="20"
-     inkscape:window-y="67"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg6" />
-  <rect
-     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
-     id="rect822"
-     width="12.000001"
-     height="1.9999999"
-     x="2"
-     y="2"
-     rx="1.3877789e-16"
-     ry="1.3877788e-16" />
-  <rect
-     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
-     id="rect822-3"
-     width="6.0000005"
-     height="1.9999999"
-     x="2"
-     y="11"
-     rx="1.3877789e-16"
-     ry="1.3877788e-16" />
-  <rect
-     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
-     id="rect822-6"
-     width="12.000001"
-     height="1.9999999"
-     x="2"
-     y="5"
-     rx="1.3877789e-16"
-     ry="1.3877788e-16" />
-  <rect
-     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
-     id="rect822-6-7"
-     width="12.000001"
-     height="1.9999999"
-     x="2"
-     y="8"
-     rx="1.3877789e-16"
-     ry="1.3877788e-16" />
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <rect width="12" height="2" x="2" y="2" rx="0" ry="0" paint-order="markers stroke fill"/>
+  <rect width="6" height="2" x="2" y="11" rx="0" ry="0" paint-order="markers stroke fill"/>
+  <rect width="12" height="2" x="2" y="5" rx="0" ry="0" paint-order="markers stroke fill"/>
+  <rect width="12" height="2" x="2" y="8" rx="0" ry="0" paint-order="markers stroke fill"/>
 </svg>
diff --git a/img/answer-short.svg b/img/answer-short.svg
index 1f056aa..f47c301 100644
--- a/img/answer-short.svg
+++ b/img/answer-short.svg
@@ -1,68 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="16"
-   height="16"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="answer-short.svg"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14">
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2520"
-     inkscape:window-height="1353"
-     id="namedview8"
-     showgrid="false"
-     inkscape:zoom="20.279588"
-     inkscape:cx="8.6803276"
-     inkscape:cy="2.7931198"
-     inkscape:window-x="20"
-     inkscape:window-y="67"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg6" />
-  <rect
-     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
-     id="rect822"
-     width="12.000001"
-     height="1.9999999"
-     x="2"
-     y="5"
-     rx="1.3877789e-16"
-     ry="1.3877788e-16" />
-  <rect
-     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
-     id="rect822-3"
-     width="6.0000005"
-     height="1.9999999"
-     x="2"
-     y="8"
-     rx="1.3877789e-16"
-     ry="1.3877788e-16" />
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <rect width="12" height="2" x="2" y="5" rx="0" ry="0" paint-order="markers stroke fill"/>
+  <rect width="6" height="2" x="2" y="8" rx="0" ry="0" paint-order="markers stroke fill"/>
 </svg>

From 0961fbfdd78e0ec8029e484d7bca0d99f1be178a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 31 Mar 2020 18:20:55 +0200
Subject: [PATCH 05/17] New question ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 .editorconfig                                 |  22 +-
 babel.config.js                               |  11 +-
 css/forms.scss                                |   9 +-
 css/icons.scss                                |   2 +
 img/answer-checkbox.svg                       |   3 +-
 img/answer-multiple.svg                       |   3 +
 img/drag-handle.svg                           |   3 +
 lib/Controller/PageController.php             |  10 +-
 package-lock.json                             |  36 +-
 package.json                                  |   7 +-
 src/components/EmptyContent.vue               |  28 +-
 src/components/Questions/Question.vue         | 144 +++++
 src/components/Questions/QuestionLong.vue     |  91 ++++
 src/components/Questions/QuestionMultiple.vue | 203 +++++++
 src/components/Questions/QuestionShort.vue    |  70 +++
 src/components/TopBar.vue                     |  13 +-
 src/components/_base-CloudDiv.vue             |  67 ---
 src/components/_base-Controls.vue             | 114 ----
 src/components/_base-LoadingOverlay.vue       |  31 --
 src/components/formListItem.vue               | 495 ------------------
 src/mixins/QuestionMixin.js                   |  54 ++
 src/models/AnswerTypes.js                     |   2 +-
 src/utils/GenRandomId.js                      |  31 ++
 src/views/Create.vue                          | 210 ++++++--
 src/views/Results.vue                         |   5 +-
 25 files changed, 853 insertions(+), 811 deletions(-)
 create mode 100644 img/answer-multiple.svg
 create mode 100644 img/drag-handle.svg
 create mode 100644 src/components/Questions/Question.vue
 create mode 100644 src/components/Questions/QuestionLong.vue
 create mode 100644 src/components/Questions/QuestionMultiple.vue
 create mode 100644 src/components/Questions/QuestionShort.vue
 delete mode 100644 src/components/_base-CloudDiv.vue
 delete mode 100644 src/components/_base-Controls.vue
 delete mode 100644 src/components/_base-LoadingOverlay.vue
 delete mode 100644 src/components/formListItem.vue
 create mode 100644 src/mixins/QuestionMixin.js
 create mode 100644 src/utils/GenRandomId.js

diff --git a/.editorconfig b/.editorconfig
index 059cd56..0689e41 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,25 +1,9 @@
-# EditorConfig is awesome: http://EditorConfig.org
-
-# top-most EditorConfig file
 root = true
 
-# Unix-style newlines with a newline ending every file
 [*]
-end_of_line = lf
-insert_final_newline = true
-
-# Set default charset
 charset = utf-8
-
-# 4 space tab indentation
 indent_style = tab
 indent_size = 4
-
-# Line length form NC coding guidelines
-trim_trailing_whitespace = true
-max_line_length = 80
-
-# 2 space indentation for .yml files
-[.*.yml]
-indent_style = space
-indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index fb0cc3b..ff18494 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,8 +2,11 @@ module.exports = {
 	plugins: ['@babel/plugin-syntax-dynamic-import'],
 	presets: [
 		[
-			'@babel/preset-env'
-		]
-	]
+			'@babel/preset-env',
+			{
+				corejs: 3,
+				useBuiltIns: 'entry',
+			},
+		],
+	],
 }
-
diff --git a/css/forms.scss b/css/forms.scss
index 93649ee..a9dedc5 100644
--- a/css/forms.scss
+++ b/css/forms.scss
@@ -20,4 +20,11 @@
  *
  */
 
-@import 'icons'
+// Various variables used by this app
+:root {
+	--header-height: $header-height;
+	--top-bar-height: 60px;
+}
+
+@import 'variables';
+@import 'icons';
diff --git a/css/icons.scss b/css/icons.scss
index b5b9b20..9c651ba 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -5,6 +5,8 @@
 @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', 1);
+@include icon-black-white('drag-handle', 'forms', 1);
 
 .icon-yes {
 	@include icon-color('checkmark', 'actions', $color-success, 1, true);
diff --git a/img/answer-checkbox.svg b/img/answer-checkbox.svg
index 32ee6ef..ccf0a48 100644
--- a/img/answer-checkbox.svg
+++ b/img/answer-checkbox.svg
@@ -1,4 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
-  <path d="M2.43 2a.43.43 0 00-.43.43V4.3l.86.86v-2.3h8.73l.86-.86H2.43zM14 5.86l-.86.86v6.42H2.86v-2.6L2 9.68v3.9a.43.43 0 00.43.42h11.14a.43.43 0 00.43-.43v-7.7z"/>
-  <path d="M6.09 12.5L1.14 7.55l1.41-1.41L6.1 9.67l6.34-6.38 1.44 1.43z"/>
+  <path d="M1.5 1c-.277 0-.5.223-.5.5v13c0 .277.223.5.5.5h13c.277 0 .5-.223.5-.5v-13c0-.277-.223-.5-.5-.5h-13zm10.756 3L13.5 5.242 6.773 12 2.5 7.701l1.217-1.226L6.783 9.54 12.256 4z"/>
 </svg>
diff --git a/img/answer-multiple.svg b/img/answer-multiple.svg
new file mode 100644
index 0000000..6b95854
--- /dev/null
+++ b/img/answer-multiple.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <path d="M2 3v2h2V3zM6 3v2h8V3zM2 7v2h2V7zM6 7v2h8V7zM2 11v2h2v-2zM6 11v2h8v-2z"/>
+</svg>
diff --git a/img/drag-handle.svg b/img/drag-handle.svg
new file mode 100644
index 0000000..c062d7d
--- /dev/null
+++ b/img/drag-handle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.7 10.7" width="16" height="16">
+  <path d="M1.34 3.34h8.02v1.34H1.34zM1.34 6.02h8.02v1.34H1.34z"/>
+</svg>
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index 31a1d5d..8962e40 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -107,7 +107,7 @@ class PageController extends Controller {
 	 */
 	public function index(): TemplateResponse {
 		Util::addScript($this->appName, 'forms');
-		Util::addStyle($this->appName, 'icons');
+		Util::addStyle($this->appName, 'forms');
 		return new TemplateResponse($this->appName, 'main');
 	}
 
@@ -119,7 +119,7 @@ class PageController extends Controller {
 	 */
 	public function createForm(): TemplateResponse {
 		Util::addScript($this->appName, 'forms');
-		Util::addStyle($this->appName, 'icons');
+		Util::addStyle($this->appName, 'forms');
 		return new TemplateResponse($this->appName, 'main');
 	}
 
@@ -131,7 +131,7 @@ class PageController extends Controller {
 	 */
 	public function cloneForm(): TemplateResponse {
 		Util::addScript($this->appName, 'forms');
-		Util::addStyle($this->appName, 'icons');
+		Util::addStyle($this->appName, 'forms');
 		return new TemplateResponse($this->appName, 'main');
 	}
 
@@ -143,7 +143,7 @@ class PageController extends Controller {
 	 */
 	public function editForm(): TemplateResponse {
 		Util::addScript($this->appName, 'forms');
-		Util::addStyle($this->appName, 'icons');
+		Util::addStyle($this->appName, 'forms');
 		return new TemplateResponse($this->appName, 'main');
 	}
 
@@ -155,7 +155,7 @@ class PageController extends Controller {
 	 */
 	public function getResult(): TemplateResponse {
 		Util::addScript($this->appName, 'forms');
-		Util::addStyle($this->appName, 'icons');
+		Util::addStyle($this->appName, 'forms');
 		return new TemplateResponse($this->appName, 'main');
 	}
 
diff --git a/package-lock.json b/package-lock.json
index 2dcc466..68590fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1658,9 +1658,15 @@
 					}
 				},
 				"core-js": {
+<<<<<<< HEAD
 					"version": "3.6.4",
 					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
 					"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
+=======
+					"version": "3.6.1",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.1.tgz",
+					"integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ=="
+>>>>>>> f89f534... fixup! New question ui
 				}
 			}
 		},
@@ -3469,9 +3475,15 @@
 			"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
 		},
 		"core-js": {
+<<<<<<< HEAD
 			"version": "3.6.5",
 			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
 			"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+=======
+			"version": "3.6.4",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
+			"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
+>>>>>>> f89f534... fixup! New question ui
 		},
 		"core-js-compat": {
 			"version": "3.6.5",
@@ -3591,6 +3603,11 @@
 				"randomfill": "^1.0.3"
 			}
 		},
+		"crypto-js": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
+			"integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
+		},
 		"css-loader": {
 			"version": "3.5.2",
 			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.2.tgz",
@@ -9374,9 +9391,9 @@
 			}
 		},
 		"regenerator-runtime": {
-			"version": "0.13.3",
-			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-			"integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+			"version": "0.13.5",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+			"integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
 		},
 		"regenerator-transform": {
 			"version": "0.14.4",
@@ -10001,6 +10018,11 @@
 				}
 			}
 		},
+		"sortablejs": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+			"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+		},
 		"source-list-map": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -11866,6 +11888,14 @@
 				"date-format-parse": "^0.2.5"
 			}
 		},
+		"vuedraggable": {
+			"version": "2.23.2",
+			"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
+			"integrity": "sha512-PgHCjUpxEAEZJq36ys49HfQmXglattf/7ofOzUrW2/rRdG7tu6fK84ir14t1jYv4kdXewTEa2ieKEAhhEMdwkQ==",
+			"requires": {
+				"sortablejs": "^1.10.1"
+			}
+		},
 		"watchpack": {
 			"version": "1.6.1",
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
diff --git a/package.json b/package.json
index d362b9f..9496808 100644
--- a/package.json
+++ b/package.json
@@ -77,11 +77,16 @@
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^1.0.2",
 		"@nextcloud/vue": "^1.5.0",
+		"core-js": "^3.6.4",
+		"crypto-js": "^4.0.0",
 		"debounce": "^1.2.0",
 		"json2csv": "5.0.0",
+		"regenerator-runtime": "^0.13.5",
+		"v-click-outside": "^3.0.1",
 		"vue": "^2.6.11",
 		"vue-clipboard2": "^0.3.1",
-		"vue-router": "^3.1.6"
+		"vue-router": "^3.1.6",
+		"vuedraggable": "^2.23.2"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
diff --git a/src/components/EmptyContent.vue b/src/components/EmptyContent.vue
index c9e788b..b85f1ca 100644
--- a/src/components/EmptyContent.vue
+++ b/src/components/EmptyContent.vue
@@ -21,9 +21,11 @@
   -->
 
 <template>
-	<div class="emptycontent" role="note">
-		<div :class="icon" role="img" />
-		<h2><slot /></h2>
+	<div class="empty-content" role="note">
+		<div class="empty-content__icon" :class="icon" role="img" />
+		<h2 class="empty-content__title">
+			<slot />
+		</h2>
 		<p v-show="$slots.desc">
 			<slot name="desc" />
 		</p>
@@ -44,10 +46,24 @@ export default {
 </script>
 
 <style lang="scss">
-.emptycontent {
+.empty-content {
 	margin-top: 20vh;
-	button {
-		margin: 3px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	&__icon {
+		width: 64px;
+		height: 64px;
+		margin: 0 auto 15px;
+		opacity: .4;
+		background-size: 64px;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+
+	&__title {
+		margin-bottom: 10px;
 	}
 }
 
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
new file mode 100644
index 0000000..dd2fd98
--- /dev/null
+++ b/src/components/Questions/Question.vue
@@ -0,0 +1,144 @@
+<!--
+  - @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>
+	<li v-click-outside="disableEdit"
+		:class="{ 'question--edit': edit }"
+		class="question"
+		@click="enableEdit">
+		<!-- TODO: implement arrow key mapping to reorder question -->
+		<div class="question__drag-handle icon-drag-handle"
+			:aria-label="t('forms', 'Drag to re-order the questions')" />
+		<input v-if="edit"
+			:value="title"
+			class="question__title"
+			type="text"
+			minlength="1"
+			maxlength="256"
+			@input="onInput">
+		<h3 v-else class="question__title" v-text="title" />
+		<slot />
+	</li>
+</template>
+
+<script>
+import { directive as ClickOutside } from 'v-click-outside'
+
+export default {
+	name: 'Question',
+
+	directives: {
+		ClickOutside,
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		edit: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	methods: {
+		onInput({ target }) {
+			this.$emit('update:title', target.value)
+		},
+
+		/**
+		 * Enable the edit mode
+		 */
+		enableEdit() {
+			this.$emit('update:edit', true)
+		},
+
+		/**
+		 * Disable the edit mode
+		 */
+		disableEdit() {
+			this.$emit('update:edit', false)
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.question {
+	position: relative;
+	display: flex;
+	align-items: stretch;
+	flex-direction: column;
+	justify-content: stretch;
+	margin-bottom: 22px;
+	padding-left: 44px;
+	user-select: none;
+	background-color: var(--color-main-background);
+
+	> * {
+		cursor: pointer;
+	}
+
+	&__drag-handle {
+		position: absolute;
+		left: 0;
+		width: 44px;
+		height: 100%;
+		cursor: grab;
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&__title,
+	&__content {
+		flex: 1 1 100%;
+		max-width: 100%;
+		margin: 20px;
+		padding: 0;
+	}
+
+	// Using type to have a higher order than the input styling of server
+	&__title,
+	&__title[type=text] {
+		flex: 1 1 100%;
+		width: auto;
+		max-width: calc(100% - 44px);
+		min-height: 22px;
+		margin: 20px;
+		margin-bottom: 0;
+		padding: 0;
+		padding-bottom: 6px;
+		color: var(--color-text-light);
+		border: 0;
+		border-radius: 0;
+		font-size: 16px;
+		line-height: 22px;
+	}
+
+	&__title[type=text] {
+		border-bottom: 1px dotted var(--color-border-dark);
+	}
+}
+
+</style>
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
new file mode 100644
index 0000000..97362c0
--- /dev/null
+++ b/src/components/Questions/QuestionLong.vue
@@ -0,0 +1,91 @@
+<!--
+  - @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 :title="title" :edit.sync="edit" @update:title="onTitleChange">
+		<div class="question__content">
+			<!-- TODO: properly choose max length -->
+			<textarea ref="textarea"
+				:aria-label="t('forms', 'A long answer for the question “{title}”', { title })"
+				:placeholder="t('forms', 'Long answer text')"
+				:readonly="edit"
+				:value="values[0]"
+				class="question__text"
+				maxlength="1024"
+				minlength="1"
+				@input="onInput"
+				@keydown="autoSizeText" />
+		</div>
+	</Question>
+</template>
+
+<script>
+import QuestionMixin from '../../mixins/QuestionMixin'
+
+export default {
+	name: 'QuestionLong',
+
+	mixins: [QuestionMixin],
+
+	data() {
+		return {
+			height: 1,
+		}
+	},
+
+	mounted() {
+		this.autoSizeText()
+	},
+
+	methods: {
+		onInput() {
+			const textarea = this.$refs.textarea
+			this.$emit('update:values', [textarea.value])
+			this.autoSizeText()
+		},
+		autoSizeText() {
+			const textarea = this.$refs.textarea
+			textarea.style.cssText = 'height:auto; padding:0'
+			textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+// Using type to have a higher order than the input styling of server
+.question__text {
+	// make sure height calculations are correct
+	box-sizing: content-box !important;
+	width: 100%;
+	min-width: 100%;
+	max-width: 100%;
+	min-height: 44px;
+	max-height: 10rem;
+	margin: 0;
+	padding: 6px 0;
+	border: 0;
+	border-bottom: 1px dotted var(--color-border-dark);
+	border-radius: 0;
+}
+
+</style>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
new file mode 100644
index 0000000..0c24a79
--- /dev/null
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -0,0 +1,203 @@
+<!--
+  - @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 :title="title" :edit.sync="edit" @update:title="onTitleChange">
+		<ul class="question__content">
+			<template v-for="(answer, index) in values">
+				<li :key="index" class="question__item">
+					<input :id="`${id}-check-${index}`"
+						ref="checkbox"
+						:checked="false"
+						:readonly="true"
+						type="checkbox"
+						class="checkbox question__checkbox">
+					<label v-if="!edit"
+						ref="label"
+						:for="`${id}-check-${index}`"
+						class="question__label">{{ answer }}</label>
+					<!-- TODO: properly choose max length -->
+					<input v-else
+						ref="input"
+						:aria-label="t('forms', 'An answer for checkbox {index}', { index: index + 1 })"
+						:placeholder="t('forms', 'Answer for checkbox {index}', { index: index + 1 })"
+						:value="answer"
+						class="question__input"
+						maxlength="256"
+						minlength="1"
+						type="text"
+						@input="onInput(index)"
+						@keydown.enter.prevent="addNewEntry"
+						@keydown.delete="deleteEntry($event, index)">
+
+					<!-- Delete answer -->
+					<Actions v-if="edit">
+						<ActionButton icon="icon-close" @click="deleteEntry($event, index)">
+							{{ t('forms', 'Delete answer') }}
+						</ActionButton>
+					</Actions>
+				</li>
+			</template>
+			<li v-if="edit && !isLastEmpty" class="question__item">
+				<!-- TODO: properly choose max length -->
+				<input
+					:aria-label="t('forms', 'Add a new checkbox')"
+					:placeholder="t('forms', 'Add a new checkbox')"
+					class="question__input"
+					maxlength="256"
+					minlength="1"
+					type="text"
+					@click="addNewEntry">
+			</li>
+		</ul>
+	</Question>
+</template>
+
+<script>
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+
+import QuestionMixin from '../../mixins/QuestionMixin'
+import GenRandomId from '../../utils/GenRandomId'
+
+export default {
+	name: 'QuestionMultiple',
+
+	components: {
+		Actions,
+		ActionButton,
+	},
+
+	mixins: [QuestionMixin],
+
+	data() {
+		return {
+			id: GenRandomId(),
+		}
+	},
+
+	computed: {
+		isLastEmpty() {
+			const value = this.values[this.values.length - 1]
+			return value && value.trim().length === 0
+		},
+	},
+
+	watch: {
+		edit(edit) {
+			if (!edit) {
+				// Filter and update questions
+				this.$emit('update:values', this.values.filter(answer => !!answer))
+			}
+		},
+	},
+
+	methods: {
+		onInput(index) {
+			// Update values
+			const input = this.$refs.input[index]
+			const values = this.values.slice()
+			values[index] = input.value
+
+			// Update question
+			this.$emit('update:values', values)
+		},
+
+		addNewEntry() {
+			// Add entry
+			const values = this.values.slice()
+			values.push('')
+
+			// Update question
+			this.$emit('update:values', values)
+
+			this.$nextTick(() => {
+				this.focusIndex(values.length - 1)
+			})
+		},
+
+		deleteEntry(e, index) {
+			const input = this.$refs.input[index]
+
+			if (input.value.length === 0) {
+				// Dismiss delete action
+				e.preventDefault()
+
+				// Remove entry
+				const values = this.values.slice()
+				values.splice(index, 1)
+
+				// Update question
+				this.$emit('update:values', values)
+
+				this.$nextTick(() => {
+					 this.focusNext(index)
+				})
+			}
+		},
+
+		/**
+		 * Focus the input matching the index
+		 *
+		 * @param {Number} index the value index
+		 */
+		focusIndex(index) {
+			const input = this.$refs.input[index]
+			if (input) {
+				 input.focus()
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.question__content {
+	display: flex;
+	flex-direction: column;
+}
+
+.question__item {
+	display: inline-flex;
+	align-items: center;
+	height: 44px;
+
+	.question__label {
+		flex: 1 1 100%;
+		&::before {
+			margin: 14px !important;
+		}
+	}
+}
+
+// Using type to have a higher order than the input styling of server
+.question__input[type=text] {
+	width: 100%;
+	min-height: 44px;
+	margin: 0;
+	padding: 6px 0;
+	border: 0;
+	border-bottom: 1px dotted var(--color-border-dark);
+	border-radius: 0;
+}
+
+</style>
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
new file mode 100644
index 0000000..7798c6e
--- /dev/null
+++ b/src/components/Questions/QuestionShort.vue
@@ -0,0 +1,70 @@
+<!--
+  - @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 :title="title" :edit.sync="edit" @update:title="onTitleChange">
+		<div class="question__content">
+			<!-- TODO: properly choose max length -->
+			<input ref="input"
+				:aria-label="t('forms', 'A short answer for the question “{title}”', { title })"
+				:placeholder="t('forms', 'Short answer text')"
+				:readonly="edit"
+				:value="values[0]"
+				class="question__input"
+				maxlength="256"
+				minlength="1"
+				type="text"
+				@input="onInput">
+		</div>
+	</Question>
+</template>
+
+<script>
+import QuestionMixin from '../../mixins/QuestionMixin'
+
+export default {
+	name: 'QuestionShort',
+
+	mixins: [QuestionMixin],
+
+	methods: {
+		onInput() {
+			const input = this.$refs.input
+			this.$emit('update:values', [input.value])
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+// Using type to have a higher order than the input styling of server
+.question__input[type=text] {
+	width: 100%;
+	min-height: 44px;
+	margin: 0;
+	padding: 6px 0;
+	border: 0;
+	border-bottom: 1px dotted var(--color-border-dark);
+	border-radius: 0;
+}
+
+</style>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index b6a83a8..0176139 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -35,15 +35,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$top-bar-height: 60px;
+
 .top-bar {
-	position: absolute;
+	position: sticky;
 	z-index: 10;
-	top: 0;
-	right: 0;
+	top: var(--header-height);
 	display: flex;
 	align-items: center;
+	align-self: flex-end;
 	justify-content: flex-end;
-	height: 60px;
+	height: var(--top-bar-height);
+	margin-top: calc(var(--top-bar-height) * -1);
 	padding: 0 6px;
 
 	button {
@@ -51,8 +54,8 @@ export default {
 		&:not(.primary) {
 			width: 44px;
 			height: 44px;
-			background-color: transparent;
 			border: none;
+			background-color: transparent;
 			&:hover, a:active, a:focus {
 				background-color: var(--color-background-darker);
 			}
diff --git a/src/components/_base-CloudDiv.vue b/src/components/_base-CloudDiv.vue
deleted file mode 100644
index 103903f..0000000
--- a/src/components/_base-CloudDiv.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @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/>.
-  -
-  -->
-
-/* global Vue, oc_userconfig */
-<template>
-	<div class="cloud">
-		<span v-if="options.expired" class="expired">
-			{{ t('forms', 'Expired') }}
-		</span>
-		<span v-if="options.expires" class="open">
-			{{ t('forms', 'Expires %n', 1, expirationDate) }}
-		</span>
-		<span v-else class="open">
-			{{ t('forms', 'Expires never') }}
-		</span>
-
-		<span class="information">
-			{{ options.access }}
-		</span>
-		<span v-if="options.isAnonymous" class="information">
-			{{ t('forms', 'Anonymous form') }}
-		</span>
-	</div>
-</template>
-
-<script>
-import moment from '@nextcloud/moment'
-
-export default {
-	props: {
-		options: {
-			type: Object,
-			default: undefined,
-		},
-
-	},
-
-	computed: {
-		expirationDate() {
-			const date = moment(this.options.expirationDate, moment.localeData().longDateFormat('L')).fromNow()
-			return date
-		},
-	},
-}
-</script>
-
-<style scoped>
-</style>
diff --git a/src/components/_base-Controls.vue b/src/components/_base-Controls.vue
deleted file mode 100644
index 6633585..0000000
--- a/src/components/_base-Controls.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @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>
-	<div class="controls">
-		<div class="breadcrumb">
-			<button class="button btn primary" @click="helpPage">
-				{{ "Help" }}
-			</button>
-			<div class="crumb svg crumbhome">
-				<router-link :to="{ name: 'list'}" class="icon-home">
-					Home
-				</router-link>
-			</div>
-			<div v-show="intitle ===''" class="crumb svg last">
-				<span v-text="intitle" />
-			</div>
-			<div class="action">
-				<slot />
-			</div>
-		</div>
-		<slot name="after" class="after" />
-	</div>
-</template>
-
-<script>
-export default {
-
-	props: {
-		intitle: {
-			type: String,
-			default: undefined,
-		},
-	},
-	data() {
-		return {
-			imagePath: OC.imagePath('core', 'places/home.svg'),
-		}
-	},
-	methods: {
-		helpPage() {
-			window.open('https://github.com/nextcloud/forms/blob/master/Forms_Support.md')
-		},
-	},
-}
-</script>
-
-<style lang="scss">
-
-.controls {
-    display: flex;
-	position: fixed;
-    border-bottom: 1px solid var(--color-border);
-    background: var(--color-main-background);
-    width: 100%;
-    height: 45px;
-    z-index: 1001;
-
-	.action {
-		order: 999;
-	}
-
-	.button, button {
-		box-sizing: border-box;
-		display: inline-block;
-		display: flex;
-		height: 36px;
-		padding: 9px;
-		align-items: center;
-		justify-content: center;
-		margin-left: 7px;
-		&.symbol {
-			width: 36px;
-		}
-		&.primary {
-			background: var(--color-primary);
-			color: var(--color-primary-text);
-		}
-	}
-
-    .breadcrumb {
-		flex-grow: 1;
-        overflow: hidden;
-        min-width: 35px;
-        // div.crumb:last-child {
-        //     flex-shrink: 1;
-        //     overflow: hidden;
-        //     > span {
-        //         flex-shrink: 1;
-        //         text-overflow: ellipsis;
-        //     }
-        // }
-    }
-}
-</style>
diff --git a/src/components/_base-LoadingOverlay.vue b/src/components/_base-LoadingOverlay.vue
deleted file mode 100644
index dcc982b..0000000
--- a/src/components/_base-LoadingOverlay.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-	<div class="loading-overlay">
-		<span class="icon-loading" />
-	</div>
-</template>
-
-<style lang="scss">
-.loading-overlay {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    opacity: 0.9;
-    z-index: 1001;
-    .icon-loading {
-        position: fixed;
-        left: 50%;
-        top: 50%;
-        margin-left: -35px;
-        margin-top: -10px;
-        &::after {
-            border: 10px solid var(--color-loading-light);
-            border-top-color: var(--color-primary-element);
-            height: 70px;
-            width: 70px;
-        }
-    }
-}
-</style>
diff --git a/src/components/formListItem.vue b/src/components/formListItem.vue
deleted file mode 100644
index bf38855..0000000
--- a/src/components/formListItem.vue
+++ /dev/null
@@ -1,495 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  - @author Natalie Gilbert
-  - @author Nick Gallo
-  -
-  - @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>
-	<div v-if="header" class="wrapper group-master table-row table-header">
-		<div class="wrapper group-1">
-			<div class="wrapper group-1-1">
-				<div class="name">
-					{{ t('forms', 'Title') }}
-				</div>
-			</div>
-		</div>
-		<div class="wrapper group-2">
-			<div class="wrapper-group-2-5">
-				<div class="deletetwo">
-					{{ t('forms',"Delete form") }}
-				</div>
-			</div>
-			<div class="wrapper-group-2-5">
-				<div class="copyL">
-					{{ t('forms', "Copy link") }}
-				</div>
-			</div>
-			<div class="wrapper-group-2-5">
-				<div class="result">
-					{{ t('forms', "View results") }}
-				</div>
-			</div>
-			<div class="wrapper group-2-1">
-				<div class="access">
-					{{ t('forms', 'Access') }}
-				</div>
-			</div>
-			<div class="owner">
-				{{ t('forms', 'Owner') }}
-			</div>
-			<div class="wrapper group-2-2">
-				<div class="created">
-					{{ t('forms', 'Created') }}
-				</div>
-				<div class="expiry">
-					{{ t('forms', 'Expires') }}
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div v-else class="wrapper table-row table-body group-master">
-		<div class="wrapper group-1">
-			<div>
-				<img class="icontwo">
-			</div>
-			<div class="symbol icon-voted" />
-			<a :href="submitUrl" class="wrapper group-1-1">
-				<div class="name">
-					{{ form.form.title }}
-				</div>
-				<div class="description">
-					{{ form.form.description }}
-				</div>
-			</a>
-		</div>
-		<div class="wrapper group-2">
-			<div class="wrapper group-2-8">
-				<a class="icon icon-delete svg delete-form" @click="deleteForm" />
-				<span class="hidden-visually">
-					{{ t('forms', 'Delete form') }}
-				</span>
-			</div>
-			<div class="wrapper group-2-9">
-				<a class="icon icon-clippy svg delete-form" @click="copyLink" />
-				<span class="hidden-visually">
-					{{ t('forms', 'Copy link') }}
-				</span>
-			</div>
-			<div class="list-results wrapper">
-				<a class="icon icon-toggle svg delete-form" @click="viewResults" />
-				<span class="hidden-visually">
-					{{ t('forms', 'View results') }}
-				</span>
-			</div>
-
-			<div class="wrapper group-2-1">
-				<div v-tooltip="accessType" class="thumbnail access" :class="form.form.access">
-					{{ accessType }}
-				</div>
-			</div>
-			<div class="owner">
-				<UserDiv :user-id="form.form.ownerId" :display-name="form.form.ownerDisplayName" />
-			</div>
-			<div class="wrapper group-2-2">
-				<div class="created ">
-					{{ timeSpanCreated }}
-				</div>
-				<div class="expiry" :class="{ expired : form.form.expired }">
-					{{ timeSpanExpiration }}
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import moment from '@nextcloud/moment'
-import UserDiv from '../components/_base-UserDiv'
-
-export default {
-	components: {
-		UserDiv,
-	},
-	props: {
-		header: {
-			type: Boolean,
-			default: false,
-		},
-		form: {
-			type: Object,
-			default: undefined,
-		},
-	},
-
-	data() {
-		return {
-			openedMenu: false,
-			hostName: this.$route.query.page,
-		}
-
-	},
-
-	computed: {
-		accessType() {
-			if (this.form.form.access === 'public') {
-				return t('forms', 'Public access')
-			} else if (this.form.form.access === 'select') {
-				return t('forms', 'Only shared')
-			} else if (this.form.form.access === 'registered') {
-				return t('forms', 'Registered users only')
-			} else if (this.form.form.access === 'hidden') {
-				return t('forms', 'Hidden form')
-			} else {
-				return ''
-			}
-		},
-
-		timeSpanCreated() {
-			return moment(this.form.form.created, 'YYYY-MM-DD HH:mm')
-		},
-
-		timeSpanExpiration() {
-			if (this.form.form.expires) {
-				return moment(this.form.form.expirationDate)
-			} else {
-				return t('forms', 'never')
-			}
-		},
-
-		countShares() {
-			return this.form.shares.length
-		},
-
-		submitUrl() {
-			return OC.generateUrl('apps/forms/form/') + this.form.form.hash
-		},
-
-	},
-
-	methods: {
-		toggleMenu() {
-			this.openedMenu = !this.openedMenu
-		},
-
-		hideMenu() {
-			this.openedMenu = false
-		},
-
-		copyLink() {
-			// this.$emit('copyLink')
-			this.$copyText(window.location.origin + this.submitUrl).then(
-				function(e) {
-					OC.Notification.showTemporary(t('forms', 'Link copied to clipboard'))
-				},
-				function(e) {
-					OC.Notification.showTemporary(t('forms', 'Error, while copying link to clipboard'))
-				}
-			)
-			this.hideMenu()
-		},
-
-		deleteForm() {
-			this.$emit('deleteForm')
-		},
-
-		viewResults() {
-			this.$emit('viewResults')
-		},
-	},
-}
-</script>
-
-<style lang="scss">
-$row-padding: 15px;
-$table-padding: 4px;
-
-$date-width: 130px;
-$participants-width: 95px;
-$group-2-2-width: max($date-width, $participants-width);
-
-$owner-width: 140px;
-$access-width: 44px;
-$group-2-1-width: max($access-width, $date-width);
-$group-2-width: $owner-width + $group-2-1-width + $group-2-2-width;
-
-$action-width: 44px;
-$thumbnail-width: 44px;
-$thumbnail-icon-width: 32px;
-$name-width: 150px;
-$description-width: 150px;
-$group-1-1-width: max($name-width, $description-width);
-$group-1-width: $thumbnail-width + $group-1-1-width + $action-width;
-
-$group-master-width: max($group-1-width, $group-2-width);
-
-$mediabreak-1: ($group-1-width + $owner-width + $access-width + $date-width + $date-width + $participants-width + $row-padding * 2);
-$mediabreak-2: ($group-1-width + $group-2-width + $row-padding * 2);
-$mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2-width) + $row-padding *2 ;
-
-.table-row {
-	width: 100%;
-	padding-left:  $row-padding;
-	padding-right: $row-padding;
-
-	line-height: 2em;
-	transition: background-color 0.3s ease;
-	background-color: var(--color-main-background);
-	min-height: 4em;
-	border-bottom: 1px solid var(--color-border);
-
-	&.table-header {
-		.name, .description {
-			padding-left: ($thumbnail-width + $table-padding *2);
-		}
-		.owner {
-			padding-left: 6px;
-		}
-	}
-
-	&.table-body {
-		&:hover, &:focus, &:active, &.mouseOver {
-			transition: background-color 0.3s ease;
-			background-color: var(--color-background-dark);
-		}
-		.icon-more {
-			right: 14px;
-			opacity: 0.3;
-			cursor: pointer;
-			height: 44px;
-			width: 44px;
-		}
-
-		.symbol {
-			padding: 2px;
-		}
-
-	}
-
-	&.table-header {
-		opacity: 0.5;
-	}
-}
-
-.wrapper {
-	display: flex;
-	align-items: center;
-	position: relative;
-	flex-grow: 0;
-}
-
-.name {
-	width: $name-width;
-}
-
-.description {
-	width: $description-width;
-	opacity: 0.5;
-}
-
-.name, .description {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.actions {
-	width: $action-width;
-	position: relative;
-	overflow: initial;
-}
-
-.result {
-  width: 60px;
-	padding-right: 15px;
-}
-
-.deletetwo {
-  width: 60px;
-	padding-right: 15px;
-}
-.copyL {
-	width: 60px;
-	padding-right: 15px;
-}
-
-.access {
-	width: $access-width;
-}
-
-.owner {
-	width: $owner-width;
-}
-
-.created {
-	width: $date-width;
-}
-
-.expiry {
-	width: $date-width;
-	&.expired {
-		color: red;
-	}
-}
-
-.delete-form {
-  padding-right:70px;
-}
-
-.list-results {
-	width: 65px;
-}
-
-.group-1, .group-1-1 {
-	flex-grow: 1;
-}
-
-.group-1-1 {
-	flex-direction: column;
-	width: $group-1-1-width;
-	> div {
-		width: 100%;
-	}
-}
-
-@media all and (max-width: ($mediabreak-1) ) {
-	.group-1 {
-		width: $group-1-width;
-	}
-	.group-2-1, .group-2-2 {
-		flex-direction: column;
-	}
-
-	.created {
-		width: $group-2-1-width;;
-	}
-	.expiry, .participants {
-		width: $group-2-2-width;;
-	}
-}
-
-@media all and (max-width: ($mediabreak-2) ) {
-	.table-row {
-		padding: 0;
-	}
-
-	.group-2-1 {
-		display: none;
-	}
-}
-
-@media all and (max-width: ($mediabreak-3) ) {
-	.group-2 {
-		display: none;
-	}
-}
-
-.icontwo {
-  width: 44px;
-  height: 44px;
-  padding-right: 4px;
-  font-size: 0;
-  background-color: var(--color-text-light);
-  mask-image: var(--icon-organization-000) no-repeat 50% 50%;
-  -webkit-mask: var(--icon-organization-000) no-repeat 50% 50%;
-  mask-size: 16px;
-}
-
-.thumbnail {
-    width: 44px;
-    height: 44px;
-    padding-right: 4px;
-    font-size: 0;
-    background-color: var(--color-text-light);
-    &.dateForm {
-        mask-image: var(--icon-calendar-000) no-repeat 50% 50%;
-        -webkit-mask: var(--icon-calendar-000) no-repeat 50% 50%;
-        mask-size: 16px;
-    }
-    &.textForm {
-        mask-image: var(--icon-organization-000) no-repeat 50% 50%;
-        -webkit-mask: var(--icon-organization-000) no-repeat 50% 50%;
-        mask-size: 16px;
-    }
-    &.expired {
-        background-color: var(--color-background-darker);
-    }
-    &.access {
-        display: inherit;
-        &.hidden {
-            mask-image: var(--icon-password-000) no-repeat 50% 50%;
-            -webkit-mask: var(--icon-password-000) no-repeat 50% 50%;
-            mask-size: 16px;
-        }
-        &.public {
-            mask-image: var(--icon-link-000) no-repeat 50% 50%;
-            -webkit-mask: var(--icon-link-000) no-repeat 50% 50%;
-            mask-size: 16px;
-        }
-        &.select {
-            mask-image: var(--icon-share-000) no-repeat 50% 50%;
-            -webkit-mask: var(--icon-share-000) no-repeat 50% 50%;
-            mask-size: 16px;
-        }
-        &.registered {
-            mask-image: var(--icon-group-000) no-repeat 50% 50%;
-            -webkit-mask: var(--icon-group-000) no-repeat 50% 50%;
-            mask-size: 16px;
-        }
-
-    }
-}
-
-.icon-voted {
-    background-image: var(--icon-checkmark-fff);
-}
-
-.app-navigation-entry-utils-counter {
-    padding-right: 0 !important;
-    overflow: hidden;
-    text-align: right;
-    font-size: 9pt;
-    line-height: 44px;
-    padding: 0 12px;
-    // min-width: 25px;
-    &.highlighted {
-        padding: 0;
-        text-align: center;
-        span {
-            padding: 2px 5px;
-            border-radius: 10px;
-            background-color: var(--color-primary);
-            color: var(--color-primary-text);
-        }
-    }
-}
-
-.symbol.icon-voted {
-    position: absolute;
-    left: 11px;
-    top: 16px;
-    background-size: 0;
-    min-width: 8px;
-    min-height: 8px;
-    background-color: var(--color-success);
-    border-radius: 50%;
-}
-</style>
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
new file mode 100644
index 0000000..ded955a
--- /dev/null
+++ b/src/mixins/QuestionMixin.js
@@ -0,0 +1,54 @@
+/**
+ * @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/>.
+ */
+import Question from '../components/Questions/Question'
+
+export default {
+	inheritAttrs: false,
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		values: {
+			type: Array,
+			required: true,
+		},
+	},
+
+	components: {
+		Question,
+	},
+
+	data() {
+		return {
+			edit: false,
+		}
+	},
+
+	methods: {
+		onTitleChange(title) {
+			this.$emit('update:title', title)
+		},
+		onValuesChange(values) {
+			this.$emit('update:values', values)
+		},
+	},
+}
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index cdfdb06..9d356de 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -24,7 +24,7 @@ export default [
 	{
 		label: t('forms', 'Multiple choice'),
 		value: 'radiogroup',
-		icon: 'icon-forms',
+		icon: 'icon-answer-multiple',
 	},
 	{
 		label: t('forms', 'Checkboxes'),
diff --git a/src/utils/GenRandomId.js b/src/utils/GenRandomId.js
new file mode 100644
index 0000000..aa0d6fc
--- /dev/null
+++ b/src/utils/GenRandomId.js
@@ -0,0 +1,31 @@
+
+/**
+ * @copyright Copyright (c) 2018 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/>.
+ *
+ */
+
+const GenRandomId = (length) => {
+	return Math.random()
+		.toString(36)
+		.replace(/[^a-z]+/g, '')
+		.substr(0, length || 5)
+}
+
+export default GenRandomId
diff --git a/src/views/Create.vue b/src/views/Create.vue
index dd2cf60..9f27cf2 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -3,6 +3,7 @@
   -
   - @author René Gieling <github@dartcafe.de>
   - @author Nick Gallo
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -33,7 +34,9 @@
 				<span class="icon-forms-white" role="img" />
 				{{ t('forms', 'Show results') }}
 			</button>
-			<button v-tooltip="t('forms', 'Toggle settings')" @click="toggleSidebar">
+			<button v-tooltip="t('forms', 'Toggle settings')"
+				:aria-label="t('forms', 'Toggle settings')"
+				@click="toggleSidebar">
 				<span class="icon-settings" role="img" />
 			</button>
 		</TopBar>
@@ -48,30 +51,37 @@
 				:placeholder="t('forms', 'Title')"
 				:required="true"
 				autofocus
-				type="text">
+				type="text"
+				@click="selectIfUnchanged">
 			<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
 			<textarea
 				id="form-desc"
 				ref="description"
 				v-model="form.form.description"
 				:placeholder="t('forms', 'Description')"
+				@change="autoSizeDescription"
 				@keydown="autoSizeDescription" />
 		</header>
 
 		<section>
 			<!-- Add new questions toolbar -->
-			<!-- <div class="question-toolbar" role="toolbar">
-				<button v-for="type in answerTypes"
-					:key="type.label"
-					class="question-toolbar__question"
-					@click="addQuestion">
-					<span class="question-toolbar__icon" :class="type.icon" />
-					{{ type.label }}
-				</button>
-			</div> -->
+			<div class="question-toolbar" role="toolbar">
+				<Actions ref="questionMenu"
+					v-tooltip="t('forms', 'Add a question to this form')"
+					:aria-label="t('forms', 'Add a question to this form')"
+					:open.sync="questionMenuOpened"
+					default-icon="icon-add-white">
+					<ActionButton v-for="type in answerTypes"
+						:key="type.label"
+						class="question-toolbar__question"
+						:icon="type.icon"
+						@click="addQuestion">
+						{{ type.label }}
+					</ActionButton>
+				</Actions>
+			</div>
 
-			<div id="quiz-form-selector-text">
-				<!--shows inputs for question types: drop down box to select the type, text box for question, and button to add-->
+			<!-- <div id="quiz-form-selector-text">
 				<label for="ans-type">Answer Type: </label>
 				<select v-model="selected">
 					<option value="" disabled>
@@ -90,20 +100,21 @@
 					@click="addQuestion()">
 					{{ t('forms', 'Add Question') }}
 				</button>
-			</div>
+			</div> -->
 
 			<!-- No questions -->
 			<EmptyContent v-if="form.questions.length === 0">
 				{{ t('forms', 'This form does not have any questions') }}
 				<template #desc>
-					<button class="primary" @click="openQuestionMenu">
+					<button class="empty-content__button primary" @click="openQuestionMenu">
+						<span class="icon-add-white" />
 						{{ t('forms', 'Add a new one') }}
 					</button>
 				</template>
 			</EmptyContent>
 
 			<!-- Questions list -->
-			<transitionGroup
+			<!-- <transitionGroup
 				v-else
 				id="form-list"
 				name="list"
@@ -117,18 +128,29 @@
 					@addOption="addOption"
 					@deleteOption="deleteOption"
 					@deleteQuestion="deleteQuestion(question, index)" />
-			</transitionGroup>
+			</transitionGroup> -->
+
+			<Draggable v-model="questions"
+				:animation="200"
+				tag="ul"
+				@start="dragging = true"
+				@end="dragging = false">
+				<Questions :is="question.type"
+					v-for="question in questions"
+					:key="question.id"
+					v-bind.sync="question" />
+			</Draggable>
 		</section>
 	</AppContent>
 </template>
 
 <script>
-import { generateUrl } from '@nextcloud/router'
-import axios from '@nextcloud/axios'
-import moment from '@nextcloud/moment'
 import { emit } from '@nextcloud/event-bus'
-import { showError } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
 import debounce from 'debounce'
+import Draggable from 'vuedraggable'
 
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
@@ -136,9 +158,12 @@ import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 
 import answerTypes from '../models/AnswerTypes'
 import EmptyContent from '../components/EmptyContent'
+import Question from '../components/Questions/Question'
+import QuestionLong from '../components/Questions/QuestionLong'
+import QuestionShort from '../components/Questions/QuestionShort'
+import QuestionMultiple from '../components/Questions/QuestionMultiple'
 import QuizFormItem from '../components/quizFormItem'
 import TopBar from '../components/TopBar'
-
 import ViewsMixin from '../mixins/ViewsMixin'
 
 export default {
@@ -147,7 +172,12 @@ export default {
 		ActionButton,
 		Actions,
 		AppContent,
+		Draggable,
 		EmptyContent,
+		Question,
+		QuestionLong,
+		QuestionShort,
+		QuestionMultiple,
 		QuizFormItem,
 		TopBar,
 	},
@@ -156,6 +186,7 @@ export default {
 
 	data() {
 		return {
+			questionMenuOpened: false,
 			placeholder: '',
 			newOption: '',
 			newQuestion: '',
@@ -167,14 +198,28 @@ export default {
 			uniqueQuestionText: false,
 			uniqueOptionText: false,
 			allHaveOpt: false,
-			questionTypes: [
-				{ text: 'Radio Buttons', value: 'radiogroup' },
-				{ text: 'Checkboxes', value: 'checkbox' },
-				{ text: 'Short Response', value: 'text' },
-				{ text: 'Long Response', value: 'comment' },
-				{ text: 'Drop Down', value: 'dropdown' },
-			],
 			answerTypes,
+			questions: [
+				{
+					id: 1,
+					type: QuestionShort,
+					title: 'How old are you ?',
+					values: ['I\'m 48 years old'],
+				},
+				{
+					id: 2,
+					type: QuestionLong,
+					title: 'Your latest best memory ?',
+					values: ['One day I was at the beach.\nIt was fun. The sun was shinning.\nThe water was warm'],
+				},
+				{
+					id: 3,
+					type: QuestionMultiple,
+					title: 'Choose an answer ?',
+					values: ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4'],
+				},
+			],
+			dragging: false,
 		}
 	},
 
@@ -197,6 +242,7 @@ export default {
 				return t('forms', 'Done')
 			}
 		},
+
 	},
 
 	watch: {
@@ -221,6 +267,10 @@ export default {
 		}
 	},
 
+	mounted() {
+		this.autoSizeDescription()
+	},
+
 	methods: {
 
 		switchSidebar() {
@@ -252,10 +302,10 @@ export default {
 						order: respData.order,
 						text: this.newQuestion,
 						type: this.selected,
-						options: [],
+						answers: [],
 					})
 				}
-				this.newQuestion = ''
+				this.newQuizQuestion = ''
 			}
 		},
 
@@ -366,7 +416,21 @@ export default {
 		 * Add question methods
 		 */
 		openQuestionMenu() {
-			this.$refs.questionMenu.opened = true
+			// TODO: fix the vue components to allow external click triggers without
+			// conflicting with the click outside directive
+			setTimeout(() => {
+				this.questionMenuOpened = true
+			}, 100)
+		},
+
+		/**
+		 * Select the text in the input if it is still set to 'New form'
+		 * @param {Event} e the click event
+		 */
+		selectIfUnchanged(e) {
+			if (e.target && e.target.value === t('forms', 'New form')) {
+				e.target.select()
+			}
 		},
 	},
 }
@@ -375,14 +439,16 @@ export default {
 <style lang="scss">
 #app-content {
 	display: flex;
-	flex-direction: column;
 	align-items: center;
+	flex-direction: column;
+
 	header,
 	section {
 		width: 100%;
 		max-width: 900px;
 	}
 
+	// Title & description header
 	header {
 		display: flex;
 		flex-direction: column;
@@ -391,30 +457,69 @@ export default {
 		#form-title,
 		#form-desc {
 			width: 100%;
-			border: none;
 			margin: 10px; // aerate the header
 			padding: 0; // makes alignment and desc height calc easier
+			border: none;
 		}
 		#form-title {
 			font-size: 2em;
 		}
 		#form-desc {
+			// make sure height calculations are correct
+			box-sizing: content-box !important;
 			min-height: 60px;
 			max-height: 200px;
 			padding-left: 2px; // align with title (compensate font size diff)
-			resize: none
+			resize: none;
 		}
 	}
 
+	.empty-content__button {
+		margin: 5px;
+		> span {
+			margin-right: 5px;
+			cursor: pointer;
+			opacity: 1;
+		}
+	}
+
+	// Questions container
 	section {
 		position: relative;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 250px;
+
+		.question-toolbar {
+			position: sticky;
+			z-index: 50;
+			top: var(--header-height);
+			display: flex;
+			align-items: center;
+			align-self: flex-end;
+			width: 44px;
+			height: var(--top-bar-height);
+			// make sure this doesn't take any space and appear floating
+			margin-top: -44px;
+			.icon-add-white {
+				opacity: 1;
+				border-radius: 50%;
+				// TODO: standardize on components
+				background-color: var(--color-primary-element);
+				&:hover,
+				&:focus,
+				&:active {
+					background-color: var(--color-primary-element-light) !important;
+				}
+			}
+		}
 	}
 }
 
 /* Transitions for inserting and removing list items */
 .list-enter-active,
 .list-leave-active {
-	transition: all 0.5s ease;
+	transition: all .5s ease;
 }
 
 .list-enter,
@@ -423,9 +528,8 @@ export default {
 }
 
 .list-move {
-	transition: transform 0.5s;
+	transition: transform .5s;
 }
-/*  */
 
 #form-item-selector-text {
 	> input {
@@ -436,38 +540,37 @@ export default {
 .form-table {
 	> li {
 		display: flex;
-		align-items: baseline;
-		padding-left: 8px;
-		padding-right: 8px;
-		line-height: 24px;
-		min-height: 24px;
-		border-bottom: 1px solid var(--color-border);
 		overflow: hidden;
+		align-items: baseline;
+		min-height: 24px;
+		padding-right: 8px;
+		padding-left: 8px;
 		white-space: nowrap;
+		border-bottom: 1px solid var(--color-border);
+		line-height: 24px;
 
 		&:active,
 		&:hover {
-			transition: var(--background-dark) 0.3s ease;
+			transition: var(--background-dark) .3s ease;
 			background-color: var(--color-background-dark); //$hover-color;
-
 		}
 
 		> div {
 			display: flex;
 			flex-grow: 1;
-			font-size: 1.2em;
-			opacity: 0.7;
-			white-space: normal;
 			padding-right: 4px;
+			white-space: normal;
+			opacity: .7;
+			font-size: 1.2em;
 			&.avatar {
 				flex-grow: 0;
 			}
 		}
 
 		> div:nth-last-child(1) {
-			justify-content: center;
 			flex-grow: 0;
 			flex-shrink: 0;
+			justify-content: center;
 		}
 	}
 }
@@ -493,13 +596,14 @@ button {
 }
 
 #shiftDates {
-	background-repeat: no-repeat;
-	background-position: 10px center;
 	min-width: 16px;
 	min-height: 16px;
+	margin: 0;
 	padding: 10px;
 	padding-left: 34px;
 	text-align: left;
-	margin: 0;
+	background-repeat: no-repeat;
+	background-position: 10px center;
 }
+
 </style>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 7bcbefb..2941f87 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -33,7 +33,7 @@
 		<div v-for="sum in stats" :key="sum">
 			{{ sum }}
 		</div>
-		<div id="app-content">
+		<div id="app-content" :class="{'icon-loading': loading}">
 			<transition-group
 				name="list"
 				tag="div"
@@ -48,7 +48,6 @@
 					:answer="answer"
 					@viewResults="viewFormResults(index, form.form, 'results')" />
 			</transition-group>
-			<LoadingOverlay v-if="loading" />
 			<modal-dialog />
 		</div>
 	</AppContent>
@@ -58,7 +57,6 @@
 import ResultItem from '../components/resultItem'
 import json2csvParser from 'json2csv'
 import axios from '@nextcloud/axios'
-import LoadingOverlay from '../components/_base-LoadingOverlay'
 import ViewsMixin from '../mixins/ViewsMixin'
 import { generateUrl } from '@nextcloud/router'
 
@@ -69,7 +67,6 @@ export default {
 	components: {
 		AppContent,
 		ResultItem,
-		LoadingOverlay,
 	},
 
 	mixins: [ViewsMixin],

From 7aa3f7ace0184c367acb786ca4e891e7f158bace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 10 Apr 2020 15:50:39 +0200
Subject: [PATCH 06/17] New proper types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 appinfo/routes.php                                 | 14 +++++++-------
 lib/Controller/ApiController.php                   |  7 ++++++-
 lib/Db/Question.php                                |  7 +++++++
 ...300.php => Version010200Date20200323141300.php} | 13 +++++++++++--
 4 files changed, 31 insertions(+), 10 deletions(-)
 rename lib/Migration/{Version010200Date2020323141300.php => Version010200Date20200323141300.php} (97%)

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 0373f2a..1000169 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -27,9 +27,9 @@ return [
 
 		// Before /{hash} to avoid conflict
 		['name' => 'page#createForm', 'url' => '/new', 'verb' => 'GET'],
-		['name' => 'page#editForm', 'url' => '/{hash}/edit/', 'verb' => 'GET'],
-		['name' => 'page#cloneForm', 'url' => '/{hash}/clone/', 'verb' => 'GET'],
-		['name' => 'page#getResult', 'url' => '/{hash}/results/', 'verb' => 'GET'],
+		['name' => 'page#editForm', 'url' => '/{hash}/edit', 'verb' => 'GET'],
+		['name' => 'page#cloneForm', 'url' => '/{hash}/clone', 'verb' => 'GET'],
+		['name' => 'page#getResult', 'url' => '/{hash}/results', 'verb' => 'GET'],
 
 		['name' => 'page#goto_form', 'url' => '/{hash}', 'verb' => 'GET'],
 		['name' => 'page#insert_submission', 'url' => '/insert/submission', 'verb' => 'POST'],
@@ -39,11 +39,11 @@ return [
 		['name' => 'api#getForm', 'url' => 'api/v1/form/{id}', 'verb' => 'GET'],
 		['name' => 'api#updateForm', 'url' => 'api/v1/form/update/', 'verb' => 'POST'],
 		['name' => 'api#deleteForm', 'url' => 'api/v1/form/{id}', 'verb' => 'DELETE'],
-		['name' => 'api#updateQuestion', 'url' => 'api/v1/question/update/', 'verb' => 'POST'],
-		['name' => 'api#reorderQuestions', 'url' => 'api/v1/question/reorder/', 'verb' => 'POST'],
-		['name' => 'api#newQuestion', 'url' => 'api/v1/question/', 'verb' => 'POST'],
+		['name' => 'api#updateQuestion', 'url' => 'api/v1/question/update', 'verb' => 'POST'],
+		['name' => 'api#reorderQuestions', 'url' => 'api/v1/question/reorder', 'verb' => 'POST'],
+		['name' => 'api#newQuestion', 'url' => 'api/v1/question', 'verb' => 'POST'],
 		['name' => 'api#deleteQuestion', 'url' => 'api/v1/question/{id}', 'verb' => 'DELETE'],
-		['name' => 'api#newOption', 'url' => 'api/v1/option/', 'verb' => 'POST'],
+		['name' => 'api#newOption', 'url' => 'api/v1/option', 'verb' => 'POST'],
 		['name' => 'api#deleteOption', 'url' => 'api/v1/option/{id}', 'verb' => 'DELETE'],
 		['name' => 'api#getSubmissions', 'url' => 'api/v1/submissions/{hash}', 'verb' => 'GET'],
 
diff --git a/lib/Controller/ApiController.php b/lib/Controller/ApiController.php
index 9dd61c9..4bf44b1 100644
--- a/lib/Controller/ApiController.php
+++ b/lib/Controller/ApiController.php
@@ -256,11 +256,16 @@ class ApiController extends Controller {
 			'text' => $text,
 		]);
 
+		if (array_search($type, Question::TYPES) === false) {
+			$this->logger->debug('Invalid type');
+			return new Http\JSONResponse(['message' => 'Invalid type'], Http::STATUS_BAD_REQUEST);
+		}
+		
 		try {
 			$form = $this->formMapper->findById($formId);
 		} catch (IMapperException $e) {
 			$this->logger->debug('Could not find form');
-			return new Http\JSONResponse([], Http::STATUS_BAD_REQUEST);
+			return new Http\JSONResponse(['message' => 'Could not find form'], Http::STATUS_BAD_REQUEST);
 		}
 
 		if ($form->getOwnerId() !== $this->userId) {
diff --git a/lib/Db/Question.php b/lib/Db/Question.php
index 426db1f..25f5199 100644
--- a/lib/Db/Question.php
+++ b/lib/Db/Question.php
@@ -43,6 +43,13 @@ class Question extends Entity {
 	protected $mandatory;
 	protected $text;
 
+	const TYPES = [
+		'short',
+		'long',
+		'multiple',
+		'multiple_unique'
+	];
+
 	public function __construct() {
 		$this->addType('formId', 'integer');
 		$this->addType('order', 'integer');
diff --git a/lib/Migration/Version010200Date2020323141300.php b/lib/Migration/Version010200Date20200323141300.php
similarity index 97%
rename from lib/Migration/Version010200Date2020323141300.php
rename to lib/Migration/Version010200Date20200323141300.php
index cc738b5..461b68c 100644
--- a/lib/Migration/Version010200Date2020323141300.php
+++ b/lib/Migration/Version010200Date20200323141300.php
@@ -39,7 +39,7 @@ use \DateTime;
  * Installation class for the forms app.
  * Initial db creation
  */
-class Version010200Date2020323141300 extends SimpleMigrationStep {
+class Version010200Date20200323141300 extends SimpleMigrationStep {
 
 	/** @var IDBConnection */
 	protected $connection;
@@ -47,6 +47,15 @@ class Version010200Date2020323141300 extends SimpleMigrationStep {
 	/** @var IConfig */
 	protected $config;
 
+	/** Map of questionTypes to change */
+	private $questionTypeMap = [
+		'radiogroup' => 'multiple_unique',
+		'checkbox' => 'multiple',
+		'text' => 'short',
+		'comment' => 'long',
+		'dropdown' => 'multiple_unique'
+	];
+
 	/**
 	 * @param IDBConnection $connection
 	 * @param IConfig $config
@@ -257,7 +266,7 @@ class Version010200Date2020323141300 extends SimpleMigrationStep {
 				->values([
 					'form_id' => $qb_restore->createNamedParameter($id_mapping['events'][$question['form_id']]['newId'], IQueryBuilder::PARAM_INT),
 					'order' => $qb_restore->createNamedParameter($id_mapping['events'][$question['form_id']]['nextQuestionOrder']++, IQueryBuilder::PARAM_INT),
-					'type' => $qb_restore->createNamedParameter($question['form_question_type'], IQueryBuilder::PARAM_STR),
+					'type' => $qb_restore->createNamedParameter($this->questionTypeMap[$question['form_question_type']], IQueryBuilder::PARAM_STR),
 					'text' => $qb_restore->createNamedParameter($question['form_question_text'], IQueryBuilder::PARAM_STR)
 				]);
 				$qb_restore->execute();

From df69a7a4a35fbd02d267c801e0dd19c3c6f53aae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 10 Apr 2020 17:35:40 +0200
Subject: [PATCH 07/17] Multiple uniques & aria
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 lib/Controller/ApiController.php              |  13 +-
 .../Version010200Date20200323141300.php       |   3 +-
 package-lock.json                             |  90 ++----
 src/Forms.vue                                 |  17 +-
 src/components/Questions/Question.vue         | 103 ++++--
 src/components/Questions/QuestionLong.vue     |   6 +-
 src/components/Questions/QuestionMultiple.vue |  74 ++++-
 src/components/Questions/QuestionShort.vue    |   6 +-
 src/components/sideBarClose.vue               |  48 ---
 src/mixins/QuestionMixin.js                   |  37 +++
 src/mixins/ViewsMixin.js                      |   7 +-
 src/models/AnswerTypes.js                     |  49 +--
 src/utils/FormsUtils.js                       |   2 +-
 src/views/Create.vue                          | 297 +++++++-----------
 src/views/Sidebar.vue                         |  22 +-
 15 files changed, 399 insertions(+), 375 deletions(-)
 delete mode 100644 src/components/sideBarClose.vue

diff --git a/lib/Controller/ApiController.php b/lib/Controller/ApiController.php
index 4bf44b1..52acbdc 100644
--- a/lib/Controller/ApiController.php
+++ b/lib/Controller/ApiController.php
@@ -95,7 +95,7 @@ class ApiController extends Controller {
 
 		} catch (DoesNotExistException $e) {
 			//handle silently
-		}finally{
+		} finally {
 			return $optionList;
 		}
 	}
@@ -119,6 +119,7 @@ class ApiController extends Controller {
 
 	/**
 	 * @NoAdminRequired
+	 *
 	 * Read Form-List only with necessary information for Listing.
 	 */
 	public function getForms(): Http\JSONResponse {
@@ -150,7 +151,7 @@ class ApiController extends Controller {
 		}
 
 		$result = $form->read();
-		$result['questions'] = getQuestions();
+		$result['questions'] = $this->getQuestions($id);
 
 		return new Http\JSONResponse($result);
 	}
@@ -241,7 +242,7 @@ class ApiController extends Controller {
 		// Delete Submissions(incl. Answers), Questions(incl. Options) and Form.
 		$this->submissionMapper->deleteByForm($id);
 		$this->questionMapper->deleteByForm($id);
-		$this->formMapper->delete($formToDelete);
+		$this->formMapper->delete($form);
 
 		return new Http\JSONResponse($id);
 	}
@@ -291,10 +292,8 @@ class ApiController extends Controller {
 
 		$question = $this->questionMapper->insert($question);
 
-		$response = [
-			'id' => $question->getId(),
-			'order' => $question->getOrder()
-		];
+		$response = $question->read();
+		$response['options'] = [];
 
 		return new Http\JSONResponse($response);
 	}
diff --git a/lib/Migration/Version010200Date20200323141300.php b/lib/Migration/Version010200Date20200323141300.php
index 461b68c..15cca03 100644
--- a/lib/Migration/Version010200Date20200323141300.php
+++ b/lib/Migration/Version010200Date20200323141300.php
@@ -107,6 +107,7 @@ class Version010200Date20200323141300 extends SimpleMigrationStep {
 			]);
 			$table->addColumn('expires_timestamp', Type::INTEGER, [
 				'notnull' => false,
+				'default' => 0,
 				'comment' => 'unix-timestamp',
 			]);
 			$table->addColumn('is_anonymous', Type::BOOLEAN, [
@@ -140,7 +141,7 @@ class Version010200Date20200323141300 extends SimpleMigrationStep {
 			]);
 			$table->addColumn('mandatory', Type::BOOLEAN, [
 				'notnull' => true,
-				'default' => 1,
+				'default' => 0,
 			]);
 			$table->addColumn('text', Type::STRING, [
 				'notnull' => true,
diff --git a/package-lock.json b/package-lock.json
index 68590fd..21e96ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1415,11 +1415,11 @@
 			}
 		},
 		"@babel/runtime": {
-			"version": "7.8.4",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
-			"integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+			"version": "7.9.2",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
+			"integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
 			"requires": {
-				"regenerator-runtime": "^0.13.2"
+				"regenerator-runtime": "^0.13.4"
 			}
 		},
 		"@babel/template": {
@@ -1518,13 +1518,6 @@
 			"requires": {
 				"@nextcloud/event-bus": "^1.1.3",
 				"core-js": "^3.6.4"
-			},
-			"dependencies": {
-				"core-js": {
-					"version": "3.6.5",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
-					"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
-				}
 			}
 		},
 		"@nextcloud/axios": {
@@ -1586,9 +1579,9 @@
 			}
 		},
 		"@nextcloud/event-bus": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.1.4.tgz",
-			"integrity": "sha512-It27KzmUaSQ7w22nHFwOn8XgeVG0HYYOSNG9gs4UkP5VqcZ16m4ydt3GkMpWcyFec4OUjJc+yf7omRc3pNxsSw==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.1.3.tgz",
+			"integrity": "sha512-/f3OMh9Tu3bn17sCc1Sb5AaC/fjegP9bjFmlsPDFNcCAHrKKM5B2X+2eUDF2osLirYaBjVqypBmD87zyiE0WjQ==",
 			"requires": {
 				"@types/semver": "^6.2.1",
 				"core-js": "^3.6.2",
@@ -1596,9 +1589,9 @@
 			},
 			"dependencies": {
 				"core-js": {
-					"version": "3.6.5",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
-					"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+					"version": "3.6.4",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
+					"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
 				},
 				"semver": {
 					"version": "6.3.0",
@@ -1614,16 +1607,6 @@
 			"requires": {
 				"core-js": "^3.6.4",
 				"node-gettext": "^3.0.0"
-			},
-			"dependencies": {
-				"node-gettext": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/node-gettext/-/node-gettext-3.0.0.tgz",
-					"integrity": "sha512-/VRYibXmVoN6tnSAY2JWhNRhWYJ8Cd844jrZU/DwLVoI4vBI6ceYbd8i42sYZ9uOgDH3S7vslIKOWV/ZrT2YBA==",
-					"requires": {
-						"lodash.get": "^4.4.2"
-					}
-				}
 			}
 		},
 		"@nextcloud/moment": {
@@ -1657,16 +1640,13 @@
 						}
 					}
 				},
-				"core-js": {
-<<<<<<< HEAD
-					"version": "3.6.4",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
-					"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
-=======
-					"version": "3.6.1",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.1.tgz",
-					"integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ=="
->>>>>>> f89f534... fixup! New question ui
+				"node-gettext": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/node-gettext/-/node-gettext-2.1.0.tgz",
+					"integrity": "sha512-vsHImHl+Py0vB7M2UXcFEJ5NJ3950gcja45YclBFtYxYeZiqdfQdcu+G9s4L7jpRFSh/J/7VoS3upR4JM1nS+g==",
+					"requires": {
+						"lodash.get": "^4.4.2"
+					}
 				}
 			}
 		},
@@ -2873,14 +2853,14 @@
 			},
 			"dependencies": {
 				"caniuse-lite": {
-					"version": "1.0.30001040",
-					"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001040.tgz",
-					"integrity": "sha512-Ep0tEPeI5wCvmJNrXjE3etgfI+lkl1fTDU6Y3ZH1mhrjkPlVI9W4pcKbMo+BQLpEWKVYYp2EmYaRsqpPC3k7lQ=="
+					"version": "1.0.30001042",
+					"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001042.tgz",
+					"integrity": "sha512-igMQ4dlqnf4tWv0xjaaE02op9AJ2oQzXKjWf4EuAHFN694Uo9/EfPVIPJcmn2WkU9RqozCxx5e2KPcVClHDbDw=="
 				},
 				"electron-to-chromium": {
-					"version": "1.3.403",
-					"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.403.tgz",
-					"integrity": "sha512-JaoxV4RzdBAZOnsF4dAlZ2ijJW72MbqO5lNfOBHUWiBQl3Rwe+mk2RCUMrRI3rSClLJ8HSNQNqcry12H+0ZjFw=="
+					"version": "1.3.412",
+					"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.412.tgz",
+					"integrity": "sha512-4bVdSeJScR8fT7ERveLWbxemY5uXEHVseqMRyORosiKcTUSGtVwBkV8uLjXCqoFLeImA57Z9hbz3TOid01U4Hw=="
 				}
 			}
 		},
@@ -3475,15 +3455,9 @@
 			"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
 		},
 		"core-js": {
-<<<<<<< HEAD
-			"version": "3.6.5",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
-			"integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
-=======
 			"version": "3.6.4",
 			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
 			"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
->>>>>>> f89f534... fixup! New question ui
 		},
 		"core-js-compat": {
 			"version": "3.6.5",
@@ -3658,12 +3632,6 @@
 						"supports-color": "^6.1.0"
 					}
 				},
-				"postcss-value-parser": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
-					"integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
-					"dev": true
-				},
 				"schema-utils": {
 					"version": "2.6.5",
 					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
@@ -7835,9 +7803,9 @@
 			"dev": true
 		},
 		"node-gettext": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/node-gettext/-/node-gettext-2.0.0.tgz",
-			"integrity": "sha1-8dwSN83FRvUVk9o0AwS4vrpbhSU=",
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/node-gettext/-/node-gettext-3.0.0.tgz",
+			"integrity": "sha512-/VRYibXmVoN6tnSAY2JWhNRhWYJ8Cd844jrZU/DwLVoI4vBI6ceYbd8i42sYZ9uOgDH3S7vslIKOWV/ZrT2YBA==",
 			"requires": {
 				"lodash.get": "^4.4.2"
 			}
@@ -8824,9 +8792,9 @@
 			}
 		},
 		"postcss-value-parser": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
-			"integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
+			"integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
 			"dev": true
 		},
 		"prelude-ls": {
diff --git a/src/Forms.vue b/src/Forms.vue
index e77c025..ceb5b6e 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -52,7 +52,7 @@
 
 		<!-- No errors show router content -->
 		<template v-else>
-			<router-view :form="selectedForm" />
+			<router-view :form.sync="selectedForm" />
 			<router-view :form="selectedForm" name="sidebar" />
 		</template>
 	</Content>
@@ -105,9 +105,16 @@ export default {
 			return this.$route.params.hash
 		},
 
-		selectedForm() {
-			// TODO: replace with form.hash
-			return this.forms.find(form => form.form.hash === this.hash)
+		selectedForm: {
+			get() {
+				return this.forms.find(form => form.hash === this.hash)
+			},
+			set(form) {
+				const index = this.forms.findIndex(search => search.hash === this.hash)
+				if (index > -1) {
+					this.$set(this.forms, index, form)
+				}
+			},
 		},
 	},
 
@@ -141,7 +148,7 @@ export default {
 				const response = await axios.post(generateUrl('/apps/forms/api/v1/form'))
 				const newForm = response.data
 				this.forms.push(newForm)
-				this.$router.push({ name: 'edit', params: { hash: newForm.form.hash } })
+				this.$router.push({ name: 'edit', params: { hash: newForm.hash } })
 			} catch (error) {
 				showError(t('forms', 'Unable to create a new form'))
 				console.error(error)
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index dd2fd98..567b534 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -23,25 +23,43 @@
 <template>
 	<li v-click-outside="disableEdit"
 		:class="{ 'question--edit': edit }"
+		:aria-label="t('forms', 'Question number {index}', {index})"
 		class="question"
 		@click="enableEdit">
+		<!-- Drag handle -->
 		<!-- TODO: implement arrow key mapping to reorder question -->
 		<div class="question__drag-handle icon-drag-handle"
 			:aria-label="t('forms', 'Drag to re-order the questions')" />
-		<input v-if="edit"
-			:value="title"
-			class="question__title"
-			type="text"
-			minlength="1"
-			maxlength="256"
-			@input="onInput">
-		<h3 v-else class="question__title" v-text="title" />
+
+		<!-- Header -->
+		<div class="question__header">
+			<input v-if="edit"
+				:placeholder="t('forms', 'Enter a title for this question')"
+				:aria-label="t('forms', 'The title of the question number {index}', {index})"
+				:value="title"
+				class="question__header-title"
+				type="text"
+				minlength="1"
+				maxlength="256"
+				required
+				@input="onInput">
+			<h3 v-else class="question__header-title" v-text="title" />
+			<Actions class="question__header-menu" :force-menu="true">
+				<ActionButton icon="icon-delete" @click="onDelete">
+					{{ t('forms', 'Delete question') }}
+				</ActionButton>
+			</Actions>
+		</div>
+
+		<!-- Question content -->
 		<slot />
 	</li>
 </template>
 
 <script>
 import { directive as ClickOutside } from 'v-click-outside'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 
 export default {
 	name: 'Question',
@@ -50,7 +68,20 @@ export default {
 		ClickOutside,
 	},
 
+	components: {
+		Actions,
+		ActionButton,
+	},
+
 	props: {
+		id: {
+			type: Number,
+			required: true,
+		},
+		index: {
+			type: Number,
+			required: true,
+		},
 		title: {
 			type: String,
 			required: true,
@@ -79,11 +110,18 @@ export default {
 		disableEdit() {
 			this.$emit('update:edit', false)
 		},
+
+		/**
+		 * Delete this question
+		 */
+		onDelete() {
+			this.$emit('delete', this.id)
+		},
 	},
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .question {
 	position: relative;
 	display: flex;
@@ -92,6 +130,8 @@ export default {
 	justify-content: stretch;
 	margin-bottom: 22px;
 	padding-left: 44px;
+	// room for the new question menu
+	padding-right: 44px;
 	user-select: none;
 	background-color: var(--color-main-background);
 
@@ -118,26 +158,41 @@ export default {
 		padding: 0;
 	}
 
-	// Using type to have a higher order than the input styling of server
-	&__title,
-	&__title[type=text] {
+	&__header {
+		display: flex;
+		align-items: center;
 		flex: 1 1 100%;
+		justify-content: space-between;
 		width: auto;
-		max-width: calc(100% - 44px);
-		min-height: 22px;
 		margin: 20px;
 		margin-bottom: 0;
-		padding: 0;
-		padding-bottom: 6px;
-		color: var(--color-text-light);
-		border: 0;
-		border-radius: 0;
-		font-size: 16px;
-		line-height: 22px;
-	}
 
-	&__title[type=text] {
-		border-bottom: 1px dotted var(--color-border-dark);
+		// Using type to have a higher order than the input styling of server
+		&-title,
+		&-title[type=text] {
+			flex: 1 1 100%;
+			min-height: 22px;
+			margin: 0;
+			padding: 0;
+			padding-bottom: 6px;
+			color: var(--color-text-light);
+			border: 0;
+			border-bottom: 1px dotted transparent;
+			border-radius: 0;
+			font-size: 16px;
+			line-height: 22px;
+		}
+
+		&-title[type=text] {
+			border-bottom-color: var(--color-border-dark);
+		}
+
+		&-menu.action-item {
+			position: sticky;
+			top: var(--header-height);
+			// above other actions
+			z-index: 50;
+		}
 	}
 }
 
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 97362c0..98c6c04 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -21,7 +21,11 @@
   -->
 
 <template>
-	<Question :title="title" :edit.sync="edit" @update:title="onTitleChange">
+	<Question
+		v-bind.sync="$attrs"
+		:title="title"
+		:edit.sync="edit"
+		@update:title="onTitleChange">
 		<div class="question__content">
 			<!-- TODO: properly choose max length -->
 			<textarea ref="textarea"
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 0c24a79..2b32113 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -21,25 +21,38 @@
   -->
 
 <template>
-	<Question :title="title" :edit.sync="edit" @update:title="onTitleChange">
-		<ul class="question__content">
-			<template v-for="(answer, index) in values">
+	<Question
+		v-bind.sync="$attrs"
+		:title="title"
+		:edit.sync="edit"
+		@update:title="onTitleChange">
+		<ul class="question__content" :role="isUnique ? 'radiogroup' : ''">
+			<template v-for="(answer, index) in options">
 				<li :key="index" class="question__item">
-					<input :id="`${id}-check-${index}`"
+					<!-- Answer radio/checkbox + label -->
+					<!-- TODO: migrate to radio/checkbox component once ready -->
+					<input :id="`${id}-answer-${index}`"
 						ref="checkbox"
-						:checked="false"
+						:aria-checked="isChecked(index)"
+						:checked="isChecked(index)"
+						:class="{
+							'radio question__radio': isUnique,
+							'checkbox question__checkbox': !isUnique,
+						}"
+						:name="`${id}-answer`"
 						:readonly="true"
-						type="checkbox"
-						class="checkbox question__checkbox">
+						:type="isUnique ? 'radio' : 'checkbox'">
 					<label v-if="!edit"
 						ref="label"
-						:for="`${id}-check-${index}`"
+						:for="`${id}-answer-${index}`"
 						class="question__label">{{ answer }}</label>
+
+					<!-- Answer text input edit -->
 					<!-- TODO: properly choose max length -->
 					<input v-else
 						ref="input"
-						:aria-label="t('forms', 'An answer for checkbox {index}', { index: index + 1 })"
-						:placeholder="t('forms', 'Answer for checkbox {index}', { index: index + 1 })"
+						:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
+						:placeholder="t('forms', 'Answer number {index}', { index: index + 1 })"
 						:value="answer"
 						class="question__input"
 						maxlength="256"
@@ -60,8 +73,8 @@
 			<li v-if="edit && !isLastEmpty" class="question__item">
 				<!-- TODO: properly choose max length -->
 				<input
-					:aria-label="t('forms', 'Add a new checkbox')"
-					:placeholder="t('forms', 'Add a new checkbox')"
+					:aria-label="t('forms', 'Add a new answer')"
+					:placeholder="t('forms', 'Add a new answer')"
 					class="question__input"
 					maxlength="256"
 					minlength="1"
@@ -79,6 +92,9 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import QuestionMixin from '../../mixins/QuestionMixin'
 import GenRandomId from '../../utils/GenRandomId'
 
+// Implementations docs
+// https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html
+// https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/checkbox/checkbox-2.html
 export default {
 	name: 'QuestionMultiple',
 
@@ -100,6 +116,10 @@ export default {
 			const value = this.values[this.values.length - 1]
 			return value && value.trim().length === 0
 		},
+
+		isUnique() {
+			return this.model.unique === true
+		},
 	},
 
 	watch: {
@@ -112,6 +132,25 @@ export default {
 	},
 
 	methods: {
+
+		/**
+		 * Is the provided index checked
+		 * @param {number} index the option index
+		 * @returns {boolean}
+		 */
+		isChecked(index) {
+			// TODO implement based on answers
+			return false
+		},
+
+		/**
+		 * Update the values
+		 * @param {Array} values values to change
+		 */
+		updateValues(values) {
+			this.$emit('update:values', this.isUnique ? [values[0]] : values)
+		},
+
 		onInput(index) {
 			// Update values
 			const input = this.$refs.input[index]
@@ -119,7 +158,7 @@ export default {
 			values[index] = input.value
 
 			// Update question
-			this.$emit('update:values', values)
+			this.updateValues(values)
 		},
 
 		addNewEntry() {
@@ -128,7 +167,7 @@ export default {
 			values.push('')
 
 			// Update question
-			this.$emit('update:values', values)
+			this.updateValues(values)
 
 			this.$nextTick(() => {
 				this.focusIndex(values.length - 1)
@@ -147,7 +186,7 @@ export default {
 				values.splice(index, 1)
 
 				// Update question
-				this.$emit('update:values', values)
+				this.updateValues(values)
 
 				this.$nextTick(() => {
 					 this.focusNext(index)
@@ -187,6 +226,11 @@ export default {
 			margin: 14px !important;
 		}
 	}
+
+	// make sure to respect readonly on radio/checkbox
+	input[readonly] {
+		pointer-events: none;
+	}
 }
 
 // Using type to have a higher order than the input styling of server
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 7798c6e..60c85a0 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -21,7 +21,11 @@
   -->
 
 <template>
-	<Question :title="title" :edit.sync="edit" @update:title="onTitleChange">
+	<Question
+		v-bind.sync="$attrs"
+		:title="title"
+		:edit.sync="edit"
+		@update:title="onTitleChange">
 		<div class="question__content">
 			<!-- TODO: properly choose max length -->
 			<input ref="input"
diff --git a/src/components/sideBarClose.vue b/src/components/sideBarClose.vue
deleted file mode 100644
index 5dd4f14..0000000
--- a/src/components/sideBarClose.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @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>
-	<div class="close flex-row">
-		<a id="closeDetails"
-			:title="closeDetailLabel"
-			:alt="closeDetailLabelAlt"
-			class="close icon-close has-tooltip-bottom"
-			href="#"
-			@:click="hideSidebar" />
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			closeDetailLabel: t('Close details'),
-			closeDetailLabelAlt: t('Close'),
-		}
-	},
-	methods: {
-		hideSidebar() {
-			OC.Apps.hideAppSidebar()
-		},
-	},
-}
-</script>
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index ded955a..c46ceb9 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -23,12 +23,37 @@ import Question from '../components/Questions/Question'
 export default {
 	inheritAttrs: false,
 	props: {
+		/**
+		 * The question title
+		 */
 		title: {
 			type: String,
 			required: true,
 		},
+
+		/**
+		 * The user answers
+		 */
 		values: {
 			type: Array,
+			default() {
+				return []
+			},
+		},
+
+		/**
+		 * The question list of answers
+		 */
+		options: {
+			type: Array,
+			required: true,
+		},
+
+		/**
+		 * Answer type model object
+		 */
+		model: {
+			type: Object,
 			required: true,
 		},
 	},
@@ -39,14 +64,26 @@ export default {
 
 	data() {
 		return {
+			// Do we display this question in edit or fill mode
 			edit: false,
 		}
 	},
 
 	methods: {
+		/**
+		 * Forward the title change to the parent
+		 *
+		 * @param {string} title the title
+		 */
 		onTitleChange(title) {
 			this.$emit('update:title', title)
 		},
+
+		/**
+		 * Forward the answer(s) change to the parent
+		 *
+		 * @param {Array} values the array of answers
+		 */
 		onValuesChange(values) {
 			this.$emit('update:values', values)
 		},
diff --git a/src/mixins/ViewsMixin.js b/src/mixins/ViewsMixin.js
index 3a03924..b112269 100644
--- a/src/mixins/ViewsMixin.js
+++ b/src/mixins/ViewsMixin.js
@@ -21,14 +21,9 @@
 
 export default {
 	props: {
-		hash: {
-			type: String,
-			default: null,
-		},
 		form: {
 			type: Object,
-			// TODO: use default Form object ?
-			default: {},
+			required: true,
 		},
 	},
 }
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index 9d356de..e880b32 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -20,29 +20,42 @@
  *
  */
 
-export default [
-	{
-		label: t('forms', 'Multiple choice'),
-		value: 'radiogroup',
+import QuestionLong from '../components/Questions/QuestionLong'
+import QuestionShort from '../components/Questions/QuestionShort'
+import QuestionMultiple from '../components/Questions/QuestionMultiple'
+
+/**
+ * @typedef {Object} AnswerTypes
+ * @property {string} multiple_unique
+ * @property {string} multiple
+ * @property {string} short
+ * @property {string} long
+ */
+export default {
+
+	multiple_unique: {
+		component: QuestionMultiple,
 		icon: 'icon-answer-multiple',
+		label: t('forms', 'Multiple choice'),
+		unique: true,
 	},
-	{
-		label: t('forms', 'Checkboxes'),
-		value: 'checkbox',
+
+	multiple: {
+		component: QuestionMultiple,
 		icon: 'icon-answer-checkbox',
+		label: t('forms', 'Checkboxes'),
 	},
-	{
-		label: t('forms', 'Short answer'),
-		value: 'text',
+
+	short: {
+		component: QuestionShort,
 		icon: 'icon-answer-short',
+		label: t('forms', 'Short answer'),
 	},
-	{
-		label: t('forms', 'Long text'),
-		value: 'comment',
+
+	long: {
+		component: QuestionLong,
 		icon: 'icon-answer-long',
+		label: t('forms', 'Long text'),
 	},
-	// {
-	// label: 'Drop Down',
-	// value: 'dropdown',
-	// },
-]
+
+}
diff --git a/src/utils/FormsUtils.js b/src/utils/FormsUtils.js
index 487875b..d8ccc7c 100644
--- a/src/utils/FormsUtils.js
+++ b/src/utils/FormsUtils.js
@@ -27,7 +27,7 @@
  */
 const formatForm = function(form) {
 	// clone form
-	const newForm = Object.assign({}, form, form.form)
+	const newForm = Object.assign({}, form)
 
 	// cleanup
 	delete newForm.event
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 9f27cf2..6536c03 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -27,7 +27,13 @@
   -->
 
 <template>
-	<AppContent>
+	<AppContent v-if="loadingForm">
+		<EmptyContent icon="icon-loading">
+			{{ t('forms', 'Loading form “{title}”', { title: form.title }) }}
+		</EmptyContent>
+	</AppContent>
+
+	<AppContent v-else>
 		<!-- Show results & sidebar button -->
 		<TopBar>
 			<button class="primary" @click="showResults">
@@ -46,7 +52,7 @@
 			<label class="hidden-visually" for="form-title">{{ t('forms', 'Title') }}</label>
 			<input
 				id="form-title"
-				v-model="form.form.title"
+				v-model="form.title"
 				:minlength="0"
 				:placeholder="t('forms', 'Title')"
 				:required="true"
@@ -57,7 +63,7 @@
 			<textarea
 				id="form-desc"
 				ref="description"
-				v-model="form.form.description"
+				v-model="form.description"
 				:placeholder="t('forms', 'Description')"
 				@change="autoSizeDescription"
 				@keydown="autoSizeDescription" />
@@ -70,40 +76,20 @@
 					v-tooltip="t('forms', 'Add a question to this form')"
 					:aria-label="t('forms', 'Add a question to this form')"
 					:open.sync="questionMenuOpened"
-					default-icon="icon-add-white">
-					<ActionButton v-for="type in answerTypes"
-						:key="type.label"
+					:default-icon="loadingQuestions ? 'icon-loading-small' : 'icon-add-white'">
+					<ActionButton v-for="(answer, type) in answerTypes"
+						:key="answer.label"
+						:disabled="loadingQuestions"
+						:icon="answer.icon"
 						class="question-toolbar__question"
-						:icon="type.icon"
-						@click="addQuestion">
-						{{ type.label }}
+						@click="addQuestion(type)">
+						{{ answer.label }}
 					</ActionButton>
 				</Actions>
 			</div>
 
-			<!-- <div id="quiz-form-selector-text">
-				<label for="ans-type">Answer Type: </label>
-				<select v-model="selected">
-					<option value="" disabled>
-						Select
-					</option>
-					<option v-for="type in questionTypes" :key="type.value" :value="type.value">
-						{{ type.text }}
-					</option>
-				</select>
-				<input
-					v-model="newQuestion"
-					:placeholder=" t('forms', 'Add Question') "
-					maxlength="2048"
-					@keyup.enter="addQuestion()">
-				<button id="questButton"
-					@click="addQuestion()">
-					{{ t('forms', 'Add Question') }}
-				</button>
-			</div> -->
-
 			<!-- No questions -->
-			<EmptyContent v-if="form.questions.length === 0">
+			<EmptyContent v-if="hasQuestions">
 				{{ t('forms', 'This form does not have any questions') }}
 				<template #desc>
 					<button class="empty-content__button primary" @click="openQuestionMenu">
@@ -129,17 +115,21 @@
 					@deleteOption="deleteOption"
 					@deleteQuestion="deleteQuestion(question, index)" />
 			</transitionGroup> -->
-
-			<Draggable v-model="questions"
-				:animation="200"
-				tag="ul"
-				@start="dragging = true"
-				@end="dragging = false">
-				<Questions :is="question.type"
-					v-for="question in questions"
-					:key="question.id"
-					v-bind.sync="question" />
-			</Draggable>
+			<form @submit.prevent="onSubmit">
+				<Draggable v-model="questions"
+					:animation="200"
+					tag="ul"
+					@start="dragging = true"
+					@end="dragging = false">
+					<Questions :is="answerTypes[question.type].component"
+						v-for="(question, index) in questions"
+						:key="question.id"
+						:model="answerTypes[question.type]"
+						:index="index + 1"
+						v-bind.sync="question"
+						@delete="deleteQuestion" />
+				</Draggable>
+			</form>
 		</section>
 	</AppContent>
 </template>
@@ -166,6 +156,8 @@ import QuizFormItem from '../components/quizFormItem'
 import TopBar from '../components/TopBar'
 import ViewsMixin from '../mixins/ViewsMixin'
 
+window.axios = axios
+
 export default {
 	name: 'Create',
 	components: {
@@ -187,36 +179,32 @@ export default {
 	data() {
 		return {
 			questionMenuOpened: false,
-			placeholder: '',
-			newOption: '',
-			newQuestion: '',
-			nextOptionId: 1,
-			nextQuestionId: 1,
-			writingForm: false,
-			loadingForm: true,
-			selected: '',
-			uniqueQuestionText: false,
-			uniqueOptionText: false,
-			allHaveOpt: false,
 			answerTypes,
+			loadingForm: true,
+			loadingQuestions: false,
+			errorForm: false,
 			questions: [
 				{
 					id: 1,
-					type: QuestionShort,
+					type: 'short',
 					title: 'How old are you ?',
-					values: ['I\'m 48 years old'],
 				},
 				{
 					id: 2,
-					type: QuestionLong,
+					type: 'long',
 					title: 'Your latest best memory ?',
-					values: ['One day I was at the beach.\nIt was fun. The sun was shinning.\nThe water was warm'],
 				},
 				{
 					id: 3,
-					type: QuestionMultiple,
+					type: 'multiple',
 					title: 'Choose an answer ?',
-					values: ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4'],
+					options: ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4'],
+				},
+				{
+					id: 4,
+					type: 'multiple_unique',
+					title: 'Choose an answer ?',
+					options: ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4'],
 				},
 			],
 			dragging: false,
@@ -225,32 +213,18 @@ export default {
 
 	computed: {
 		title() {
-			if (this.form.form.title === '') {
+			if (this.form.title === '') {
 				return t('forms', 'Create new form')
 			} else {
-				return this.form.form.title
-
+				return this.form.title
 			}
 		},
-
-		saveButtonTitle() {
-			if (this.writingForm) {
-				return t('forms', 'Writing form')
-			} else if (this.form.mode === 'edit') {
-				return t('forms', 'Update form')
-			} else {
-				return t('forms', 'Done')
-			}
+		hasQuestions() {
+			return this.form.questions && this.form.questions.length === 0
 		},
-
 	},
 
 	watch: {
-		title() {
-			// only used when the title changes after page load
-			document.title = t('forms', 'Forms') + ' - ' + this.title
-		},
-
 		form: {
 			deep: true,
 			handler: function() {
@@ -259,53 +233,68 @@ export default {
 		},
 	},
 
-	created() {
-		if (this.$route.name === 'edit') {
-			this.form.mode = 'edit'
-		} else if (this.$route.name === 'clone') {
-			// TODO: CLONE
-		}
+	beforeMount() {
+		this.fetchFullForm(this.form.id)
 	},
 
-	mounted() {
+	updated() {
 		this.autoSizeDescription()
 	},
 
 	methods: {
+		/**
+		 * Fetch the full form data and update parent
+		 *
+		 * @param {number} id the unique form hash
+		 */
+		async fetchFullForm(id) {
+			this.loadingForm = true
+			console.debug('Loading form', id)
 
-		switchSidebar() {
-			this.sidebar = !this.sidebar
+			try {
+				const form = await axios.get(generateUrl('/apps/forms/api/v1/form/{id}', { id }))
+				this.$emit('update:form', form.data)
+			} catch (error) {
+				console.error(error)
+				this.errorForm = true
+			} finally {
+				this.loadingForm = false
+			}
 		},
 
-		checkQuestionText() {
-			this.uniqueQuestionText = true
-			this.form.questions.forEach(q => {
-				if (q.text === this.newQuestion) {
-					this.uniqueQuestionText = false
-				}
-			})
+		onSubmit() {
+			this.saveForm()
 		},
 
-		async addQuestion() {
-			this.checkQuestionText()
-			if (this.selected === '') {
-				showError(t('forms', 'Select a question type!'), { duration: 3000 })
-			} else if (!this.uniqueQuestionText) {
-				showError(t('forms', 'Cannot have the same question!'))
-			} else {
-				if (this.newQuestion !== null & this.newQuestion !== '' & (/\S/.test(this.newQuestion))) {
-					const response = await axios.post(generateUrl('/apps/forms/api/v1/question/'), { formId: this.form.id, type: this.selected, text: this.newQuestion })
-					const respData = response.data
+		/**
+		 * Add a new question to the current form
+		 *
+		 * @param {string} type the question type, see AnswerTypes
+		 */
+		async addQuestion(type) {
+			const text = t('forms', 'New question')
+			this.loadingQuestions = true
 
-					this.form.questions.push({
-						id: respData.id,
-						order: respData.order,
-						text: this.newQuestion,
-						type: this.selected,
-						answers: [],
-					})
-				}
-				this.newQuizQuestion = ''
+			try {
+				const response = await axios.post(generateUrl('/apps/forms/api/v1/question'), {
+					formId: this.form.id,
+					type,
+					text,
+				})
+				const question = response.data
+
+				// Add newly created question
+				this.form.questions.push(Object.assign({
+					text,
+					type,
+					answers: [],
+				}, question))
+
+			} catch (error) {
+				console.error(error)
+				showError(t('forms', 'There was an error while adding the new question'))
+			} finally {
+				this.loadingQuestions = false
 			}
 		},
 
@@ -315,31 +304,14 @@ export default {
 			this.form.questions.splice(index, 1)
 		},
 
-		checkOptionText(item, question) {
-			this.uniqueOptionText = true
-			question.options.forEach(o => {
-				if (o.text === item.newOption) {
-					this.uniqueOptionText = false
-				}
-			})
-		},
-
 		async addOption(item, question) {
-			this.checkOptionText(item, question)
-			if (!this.uniqueOptionText) {
-				showError(t('forms', 'Two options cannot be the same!'), { duration: 3000 })
-			} else {
-				if (item.newOption !== null & item.newOption !== '' & (/\S/.test(item.newOption))) {
-					const response = await axios.post(generateUrl('/apps/forms/api/v1/option/'), { formId: this.form.id, questionId: question.id, text: item.newOption })
-					const optionId = response.data
+			const response = await axios.post(generateUrl('/apps/forms/api/v1/option/'), { formId: this.form.id, questionId: question.id, text: item.newOption })
+			const optionId = response.data
 
-					question.options.push({
-						id: optionId,
-						text: item.newOption,
-					})
-				}
-				item.newOption = ''
-			}
+			question.options.push({
+				id: optionId,
+				text: item.newOption,
+			})
 		},
 
 		async deleteOption(question, option, index) {
@@ -348,52 +320,25 @@ export default {
 			question.options.splice(index, 1)
 		},
 
-		checkAllHaveOpt() {
-			this.allHaveOpt = true
-			this.form.questions.forEach(q => {
-				if (q.type !== 'text' && q.type !== 'comment' && q.options.length === 0) {
-					this.allHaveOpt = false
-				}
-			})
-		},
-
 		autoSizeDescription() {
 			const textarea = this.$refs.description
-			textarea.style.cssText = 'height:auto; padding:0'
-			textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
+			if (textarea) {
+				textarea.style.cssText = 'height:auto; padding:0'
+				textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
+			}
 		},
 
-		debounceWriteForm: debounce(function() {
-			this.writeForm()
+		debounceSaveForm: debounce(function() {
+			this.saveForm()
 		}, 200),
 
-		writeForm() {
-			this.checkAllHaveOpt()
-			if (this.form.form.title.length === 0 | !(/\S/.test(this.form.form.title))) {
-				this.titleEmpty = true
-				showError(t('forms', 'Title must not be empty!'), { duration: 3000 })
-			} else if (!this.allHaveOpt) {
-				showError(t('forms', 'All questions need answers!'), { duration: 3000 })
-			} else if (this.form.form.expires & this.form.form.expirationDate === '') {
-				showError(t('forms', 'Need to pick an expiration date!'), { duration: 3000 })
-			} else {
-				this.writingForm = true
-				this.titleEmpty = false
-
-				axios.post(OC.generateUrl('apps/forms/write/form'), this.form)
-					.then((response) => {
-						this.form.mode = 'edit'
-						this.form.form.hash = response.data.hash
-						this.form.form.id = response.data.id
-						this.writingForm = false
-						showSuccess(t('forms', '%n successfully saved', 1, this.form.form.title), { duration: 3000 })
-					}, (error) => {
-						this.form.form.hash = ''
-						this.writingForm = false
-						showError(t('forms', 'Error on saving form, see console'))
-						/* eslint-disable-next-line no-console */
-						console.log(error.response)
-					})
+		async saveForm() {
+			try {
+				await axios.post(OC.generateUrl('apps/forms/write/form'), this.form)
+				showSuccess(t('forms', '%n successfully saved', 1, this.form.title), { duration: 3000 })
+			} catch (error) {
+				showError(t('forms', 'Error on saving form, see console'))
+				console.error(error)
 			}
 		},
 
@@ -437,7 +382,7 @@ export default {
 </script>
 
 <style lang="scss">
-#app-content {
+.app-content {
 	display: flex;
 	align-items: center;
 	flex-direction: column;
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index ab10960..e2cd5b5 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -21,14 +21,14 @@
  -->
 
 <template>
-	<AppSidebar v-show="opened" :title="form.form.title" @close="onClose">
+	<AppSidebar v-show="opened" :title="form.title" @close="onClose">
 		<div class="configBox ">
 			<label class="title icon-settings">
 				{{ t('forms', 'Form configurations') }}
 			</label>
 
 			<input id="isAnonymous"
-				v-model="form.form.isAnonymous"
+				v-model="form.isAnonymous"
 
 				type="checkbox"
 				class="checkbox">
@@ -37,8 +37,8 @@
 			</label>
 
 			<input id="submitOnce"
-				v-model="form.form.submitOnce"
-				:disabled="form.form.access.type === 'public' || form.form.isAnonymous"
+				v-model="form.submitOnce"
+				:disabled="form.access.type === 'public' || form.isAnonymous"
 				type="checkbox"
 				class="checkbox">
 			<label for="submitOnce" class="title">
@@ -46,7 +46,7 @@
 			</label>
 
 			<input id="expires"
-				v-model="form.form.expires"
+				v-model="form.expires"
 
 				type="checkbox"
 				class="checkbox">
@@ -54,9 +54,9 @@
 				{{ t('forms', 'Expires') }}
 			</label>
 
-			<DatetimePicker v-show="form.form.expires"
+			<DatetimePicker v-show="form.expires"
 				id="expiresDatetimePicker"
-				v-model="form.form.expiresTimestamp"
+				v-model="form.expiresTimestamp"
 				v-bind="expirationDatePicker" />
 		</div>
 
@@ -66,7 +66,7 @@
 			</label>
 
 			<input id="registered"
-				v-model="form.form.access.type"
+				v-model="form.access.type"
 				type="radio"
 				value="registered"
 				class="radio">
@@ -76,7 +76,7 @@
 			</label>
 
 			<input id="public"
-				v-model="form.form.access.type"
+				v-model="form.access.type"
 				type="radio"
 				value="public"
 				class="radio">
@@ -86,7 +86,7 @@
 			</label>
 
 			<input id="selected"
-				v-model="form.form.access.type"
+				v-model="form.access.type"
 				type="radio"
 				value="selected"
 				class="radio">
@@ -96,7 +96,7 @@
 			</label>
 		</div>
 
-		<ShareDiv v-show="form.form.access.type === 'selected'"
+		<ShareDiv v-show="form.access.type === 'selected'"
 			:active-shares="form.shares"
 			:placeholder="t('forms', 'Name of user or group')"
 			:hide-names="true"

From 2cd445d201f4e4e62b8c94d73ed59087fca20495 Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Mon, 20 Apr 2020 13:51:48 +0200
Subject: [PATCH 08/17] Clean Expires

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 lib/Controller/ApiController.php              |  2 +-
 lib/Controller/PageController.php             |  9 +-
 lib/Db/Form.php                               | 25 +----
 .../Version010200Date20200323141300.php       |  4 +-
 src/components/AppNavigationForm.vue          |  3 +-
 src/components/Questions/Question.vue         | 10 +-
 src/components/Questions/QuestionLong.vue     |  7 +-
 src/components/Questions/QuestionMultiple.vue |  9 +-
 src/components/Questions/QuestionShort.vue    |  7 +-
 src/mixins/QuestionMixin.js                   | 15 ++-
 src/views/Create.vue                          | 98 +++++++++----------
 src/views/Sidebar.vue                         | 38 +++----
 12 files changed, 106 insertions(+), 121 deletions(-)

diff --git a/lib/Controller/ApiController.php b/lib/Controller/ApiController.php
index 52acbdc..e0332b7 100644
--- a/lib/Controller/ApiController.php
+++ b/lib/Controller/ApiController.php
@@ -131,7 +131,7 @@ class ApiController extends Controller {
 				'id' => $form->getId(),
 				'hash' => $form->getHash(),
 				'title' => $form->getTitle(),
-				'expired' => $form->getExpired(),
+				'expires' => $form->getExpires(),
 			];
 		}
 
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index 8962e40..9028145 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -173,13 +173,8 @@ class PageController extends Controller {
 			return new TemplateResponse('forms', 'no.acc.tmpl', []);
 		}
 
-		if ($form->getExpiresTimestamp() === 0) {
-			$expired = false;
-		} else {
-			$expired = time() > $form->getExpiresTimestamp();
-		}
-
-		if ($expired) {
+		// If form expired, return Expired-Template
+		if ( ($form->getExpires() !== 0) && (time() > $form->getExpires()) ) {
 			return new TemplateResponse('forms', 'expired.tmpl');
 		}
 
diff --git a/lib/Db/Form.php b/lib/Db/Form.php
index 82fd931..9941bee 100644
--- a/lib/Db/Form.php
+++ b/lib/Db/Form.php
@@ -41,8 +41,8 @@ use OCP\AppFramework\Db\Entity;
  * @method void setAccess(array $value)
  * @method integer getCreated()
  * @method void setCreated(integer $value)
- * @method integer getExpiresTimestamp()
- * @method void setExpiresTimestamp(integer $value)
+ * @method integer getExpires()
+ * @method void setExpires(integer $value)
  * @method integer getIsAnonymous()
  * @method void setIsAnonymous(bool $value)
  * @method integer getSubmitOnce()
@@ -56,7 +56,7 @@ class Form extends Entity {
 	protected $ownerId;
 	protected $accessJson;
 	protected $created;
-	protected $expiresTimestamp;
+	protected $expires;
 	protected $isAnonymous;
 	protected $submitOnce;
 
@@ -65,7 +65,7 @@ class Form extends Entity {
 	 */
 	public function __construct() {
 		$this->addType('created', 'integer');
-		$this->addType('expiresTimestamp', 'integer');
+		$this->addType('expires', 'integer');
 		$this->addType('isAnonymous', 'bool');
 		$this->addType('submitOnce', 'bool');
 	}
@@ -80,20 +80,6 @@ class Form extends Entity {
 		$this->setAccessJson(json_encode($access));
 	}
 
-	// Get virtual column expires. Set should only be done by setExpiresTimestamp().
-	public function getExpires(): bool {
-		return (bool) $this->getExpiresTimestamp();
-	}
-
-	// Get virtual column expired. Set should only be done by setExpiresTimestamp().
-	public function getExpired(): bool {
-		if ($this->getExpires()) {
-			return time() > $this->getExpiresTimestamp();
-		}
-		// else - does not expire
-		return false;
-	}
-
 	// Read full form
 	public function read() {
 		return [
@@ -102,12 +88,9 @@ class Form extends Entity {
 			'title' => $this->getTitle(),
 			'description' => $this->getDescription(),
 			'ownerId' => $this->getOwnerId(),
-			'ownerDisplayName' => \OC_User::getDisplayName($this->getOwnerId()),
 			'created' => $this->getCreated(),
 			'access' => $this->getAccess(),
 			'expires' => $this->getExpires(),
-			'expired' => $this->getExpired(),
-			'expiresTimestamp' => $this->getExpiresTimestamp(),
 			'isAnonymous' => $this->getIsAnonymous(),
 			'submitOnce' => $this->getSubmitOnce()
 		];
diff --git a/lib/Migration/Version010200Date20200323141300.php b/lib/Migration/Version010200Date20200323141300.php
index 15cca03..e236b02 100644
--- a/lib/Migration/Version010200Date20200323141300.php
+++ b/lib/Migration/Version010200Date20200323141300.php
@@ -105,7 +105,7 @@ class Version010200Date20200323141300 extends SimpleMigrationStep {
 				'notnull' => false,
 				'comment' => 'unix-timestamp',
 			]);
-			$table->addColumn('expires_timestamp', Type::INTEGER, [
+			$table->addColumn('expires', Type::INTEGER, [
 				'notnull' => false,
 				'default' => 0,
 				'comment' => 'unix-timestamp',
@@ -237,7 +237,7 @@ class Version010200Date20200323141300 extends SimpleMigrationStep {
 						'owner_id' => $qb_restore->createNamedParameter($event['owner'], IQueryBuilder::PARAM_STR),
 						'access_json' => $qb_restore->createNamedParameter($newAccessJSON, IQueryBuilder::PARAM_STR),
 						'created' => $qb_restore->createNamedParameter($this->convertDateTime($event['created']), IQueryBuilder::PARAM_INT),
-						'expires_timestamp' => $qb_restore->createNamedParameter($this->convertDateTime($event['expire']), IQueryBuilder::PARAM_INT),
+						'expires' => $qb_restore->createNamedParameter($this->convertDateTime($event['expire']), IQueryBuilder::PARAM_INT),
 						'is_anonymous' => $qb_restore->createNamedParameter($event['is_anonymous'], IQueryBuilder::PARAM_BOOL),
 						'submit_once' => $qb_restore->createNamedParameter($event['unique'], IQueryBuilder::PARAM_BOOL)
 					]);
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 5b57bf7..988993f 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -66,6 +66,7 @@ import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
 import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import axios from '@nextcloud/axios'
+import moment from '@nextcloud/moment'
 import Vue from 'vue'
 import VueClipboard from 'vue-clipboard2'
 
@@ -106,7 +107,7 @@ export default {
 		 */
 		bulletColor() {
 			const style = getComputedStyle(document.body)
-			if (this.form.expired) {
+			if (this.form.expires && moment().unix() > this.form.expires) {
 				return style.getPropertyValue('--color-error').slice(-6)
 			}
 			return style.getPropertyValue('--color-success').slice(-6)
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 567b534..6fde335 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -36,14 +36,14 @@
 			<input v-if="edit"
 				:placeholder="t('forms', 'Enter a title for this question')"
 				:aria-label="t('forms', 'The title of the question number {index}', {index})"
-				:value="title"
+				:value="text"
 				class="question__header-title"
 				type="text"
 				minlength="1"
 				maxlength="256"
 				required
 				@input="onInput">
-			<h3 v-else class="question__header-title" v-text="title" />
+			<h3 v-else class="question__header-title" v-text="text" />
 			<Actions class="question__header-menu" :force-menu="true">
 				<ActionButton icon="icon-delete" @click="onDelete">
 					{{ t('forms', 'Delete question') }}
@@ -82,7 +82,7 @@ export default {
 			type: Number,
 			required: true,
 		},
-		title: {
+		text: {
 			type: String,
 			required: true,
 		},
@@ -94,7 +94,7 @@ export default {
 
 	methods: {
 		onInput({ target }) {
-			this.$emit('update:title', target.value)
+			this.$emit('update:text', target.value)
 		},
 
 		/**
@@ -115,7 +115,7 @@ export default {
 		 * Delete this question
 		 */
 		onDelete() {
-			this.$emit('delete', this.id)
+			this.$emit('delete')
 		},
 	},
 }
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 98c6c04..fa582c5 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -23,13 +23,14 @@
 <template>
 	<Question
 		v-bind.sync="$attrs"
-		:title="title"
+		:text="text"
 		:edit.sync="edit"
-		@update:title="onTitleChange">
+		@delete="onDelete"
+		@update:text="onTitleChange">
 		<div class="question__content">
 			<!-- TODO: properly choose max length -->
 			<textarea ref="textarea"
-				:aria-label="t('forms', 'A long answer for the question “{title}”', { title })"
+				:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
 				:placeholder="t('forms', 'Long answer text')"
 				:readonly="edit"
 				:value="values[0]"
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 2b32113..66a3ef6 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -23,9 +23,10 @@
 <template>
 	<Question
 		v-bind.sync="$attrs"
-		:title="title"
+		:text="text"
 		:edit.sync="edit"
-		@update:title="onTitleChange">
+		@delete="onDelete"
+		@update:text="onTitleChange">
 		<ul class="question__content" :role="isUnique ? 'radiogroup' : ''">
 			<template v-for="(answer, index) in options">
 				<li :key="index" class="question__item">
@@ -45,7 +46,7 @@
 					<label v-if="!edit"
 						ref="label"
 						:for="`${id}-answer-${index}`"
-						class="question__label">{{ answer }}</label>
+						class="question__label">{{ answer.text }}</label>
 
 					<!-- Answer text input edit -->
 					<!-- TODO: properly choose max length -->
@@ -53,7 +54,7 @@
 						ref="input"
 						:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
 						:placeholder="t('forms', 'Answer number {index}', { index: index + 1 })"
-						:value="answer"
+						:value="answer.text"
 						class="question__input"
 						maxlength="256"
 						minlength="1"
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 60c85a0..100b872 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -23,13 +23,14 @@
 <template>
 	<Question
 		v-bind.sync="$attrs"
-		:title="title"
+		:text="text"
 		:edit.sync="edit"
-		@update:title="onTitleChange">
+		@delete="onDelete"
+		@update:text="onTitleChange">
 		<div class="question__content">
 			<!-- TODO: properly choose max length -->
 			<input ref="input"
-				:aria-label="t('forms', 'A short answer for the question “{title}”', { title })"
+				:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
 				:placeholder="t('forms', 'Short answer text')"
 				:readonly="edit"
 				:value="values[0]"
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index c46ceb9..504200e 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -26,7 +26,7 @@ export default {
 		/**
 		 * The question title
 		 */
-		title: {
+		text: {
 			type: String,
 			required: true,
 		},
@@ -73,10 +73,10 @@ export default {
 		/**
 		 * Forward the title change to the parent
 		 *
-		 * @param {string} title the title
+		 * @param {string} text the title
 		 */
-		onTitleChange(title) {
-			this.$emit('update:title', title)
+		onTitleChange(text) {
+			this.$emit('update:text', text)
 		},
 
 		/**
@@ -87,5 +87,12 @@ export default {
 		onValuesChange(values) {
 			this.$emit('update:values', values)
 		},
+
+		/**
+		 * Delete this question
+		 */
+		onDelete() {
+			this.$emit('delete')
+		},
 	},
 }
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 6536c03..f5de89e 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -100,34 +100,19 @@
 			</EmptyContent>
 
 			<!-- Questions list -->
-			<!-- <transitionGroup
-				v-else
-				id="form-list"
-				name="list"
-				tag="ul"
-				class="form-table">
-				<QuizFormItem
-					v-for="(question, index) in form.questions"
-					:key="question.id"
-					:question="question"
-					:type="question.type"
-					@addOption="addOption"
-					@deleteOption="deleteOption"
-					@deleteQuestion="deleteQuestion(question, index)" />
-			</transitionGroup> -->
 			<form @submit.prevent="onSubmit">
-				<Draggable v-model="questions"
+				<Draggable v-model="form.questions"
 					:animation="200"
 					tag="ul"
 					@start="dragging = true"
 					@end="dragging = false">
 					<Questions :is="answerTypes[question.type].component"
-						v-for="(question, index) in questions"
+						v-for="(question, index) in form.questions"
 						:key="question.id"
 						:model="answerTypes[question.type]"
 						:index="index + 1"
 						v-bind.sync="question"
-						@delete="deleteQuestion" />
+						@delete="deleteQuestion(question)" />
 				</Draggable>
 			</form>
 		</section>
@@ -183,30 +168,6 @@ export default {
 			loadingForm: true,
 			loadingQuestions: false,
 			errorForm: false,
-			questions: [
-				{
-					id: 1,
-					type: 'short',
-					title: 'How old are you ?',
-				},
-				{
-					id: 2,
-					type: 'long',
-					title: 'Your latest best memory ?',
-				},
-				{
-					id: 3,
-					type: 'multiple',
-					title: 'Choose an answer ?',
-					options: ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4'],
-				},
-				{
-					id: 4,
-					type: 'multiple_unique',
-					title: 'Choose an answer ?',
-					options: ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4'],
-				},
-			],
 			dragging: false,
 		}
 	},
@@ -227,8 +188,12 @@ export default {
 	watch: {
 		form: {
 			deep: true,
-			handler: function() {
-				this.debounceWriteForm()
+			handler: function(newForm, oldForm) {
+				if (newForm.hash === oldForm.hash) {
+					this.debounceSaveForm()
+				} else {
+					this.fetchFullForm(newForm.id)
+				}
 			},
 		},
 	},
@@ -262,7 +227,7 @@ export default {
 			}
 		},
 
-		onSubmit() {
+		onSubmit(e) {
 			this.saveForm()
 		},
 
@@ -298,10 +263,26 @@ export default {
 			}
 		},
 
-		async deleteQuestion(question, index) {
-			await axios.delete(generateUrl('/apps/forms/api/v1/question/{id}', { id: question.id }))
-			// TODO catch Error
-			this.form.questions.splice(index, 1)
+		/**
+		 * Delete a question
+		 * @param {Object} question the question to delete
+		 * @param {number} question.id the question id to delete
+		 */
+		async deleteQuestion(question) {
+			console.info(question)
+			const id = question.id
+			this.loadingQuestions = true
+
+			try {
+				await axios.delete(generateUrl('/apps/forms/api/v1/question/{id}', { id }))
+				const index = this.form.questions.findIndex(search => search.id === id)
+				this.form.questions.splice(index, 1)
+			} catch (error) {
+				console.error(error)
+				showError(t('forms', 'There was an error while removing the question'))
+			} finally {
+				this.loadingQuestions = false
+			}
 		},
 
 		async addOption(item, question) {
@@ -320,6 +301,9 @@ export default {
 			question.options.splice(index, 1)
 		},
 
+		/**
+		 * Auto adjust the description height based on lines number
+		 */
 		autoSizeDescription() {
 			const textarea = this.$refs.description
 			if (textarea) {
@@ -328,14 +312,17 @@ export default {
 			}
 		},
 
+		/**
+		 * Forms saving handlers
+		 */
 		debounceSaveForm: debounce(function() {
 			this.saveForm()
 		}, 200),
 
 		async saveForm() {
 			try {
-				await axios.post(OC.generateUrl('apps/forms/write/form'), this.form)
-				showSuccess(t('forms', '%n successfully saved', 1, this.form.title), { duration: 3000 })
+				// TODO: add loading status feedback ?
+				await axios.post(OC.generateUrl('/apps/forms/write/form'), this.form)
 			} catch (error) {
 				showError(t('forms', 'Error on saving form, see console'))
 				console.error(error)
@@ -365,7 +352,10 @@ export default {
 			// conflicting with the click outside directive
 			setTimeout(() => {
 				this.questionMenuOpened = true
-			}, 100)
+				this.$nextTick(() => {
+					this.$refs.questionMenu.focusFirstAction()
+				})
+			}, 10)
 		},
 
 		/**
@@ -437,7 +427,8 @@ export default {
 
 		.question-toolbar {
 			position: sticky;
-			z-index: 50;
+			// Above other menus
+			z-index: 55;
 			top: var(--header-height);
 			display: flex;
 			align-items: center;
@@ -446,6 +437,7 @@ export default {
 			height: var(--top-bar-height);
 			// make sure this doesn't take any space and appear floating
 			margin-top: -44px;
+
 			.icon-add-white {
 				opacity: 1;
 				border-radius: 50%;
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index e2cd5b5..49cddd0 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -46,7 +46,7 @@
 			</label>
 
 			<input id="expires"
-				v-model="form.expires"
+				v-model="formExpires"
 
 				type="checkbox"
 				class="checkbox">
@@ -54,9 +54,9 @@
 				{{ t('forms', 'Expires') }}
 			</label>
 
-			<DatetimePicker v-show="form.expires"
+			<DatetimePicker v-show="formExpires"
 				id="expiresDatetimePicker"
-				v-model="form.expiresTimestamp"
+				v-model="form.expires"
 				v-bind="expirationDatePicker" />
 		</div>
 
@@ -131,6 +131,7 @@ export default {
 			locale: '',
 			longDateFormat: '',
 			dateTimeFormat: '',
+			formExpires: false,
 		}
 	},
 
@@ -151,21 +152,17 @@ export default {
 				},
 			}
 		},
+	},
 
-		optionDatePicker() {
-			return {
-				editable: false,
-				minuteStep: 1,
-				type: 'datetime',
-				format: moment.localeData().longDateFormat('L') + ' ' + moment.localeData().longDateFormat('LT'),
-				lang: this.lang.split('-')[0],
-				placeholder: t('forms', 'Click to add a date'),
-				timePickerOptions: {
-					start: '00:00',
-					step: '00:30',
-					end: '23:30',
-				},
-			}
+	watch: {
+		formExpires: {
+			handler: function() {
+				if (!this.formExpires) {
+					this.form.expires = 0
+				} else {
+					this.form.expires = moment().unix() + 3600 // Expires in one hour.
+				}
+			},
 		},
 	},
 
@@ -185,6 +182,13 @@ export default {
 		this.longDateFormat = moment.localeData().longDateFormat('L')
 		this.dateTimeFormat = moment.localeData().longDateFormat('L') + ' ' + moment.localeData().longDateFormat('LT')
 
+		// Compute current formExpires for checkbox
+		if (this.form.expires) {
+			this.formExpires = true
+		} else {
+			this.formExpires = false
+		}
+
 		// Watch for Sidebar toggle
 		subscribe('toggleSidebar', this.onToggle)
 	},

From ebf66d7e829ce216b97e69c707b292e634e16b8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 21 Apr 2020 18:03:43 +0200
Subject: [PATCH 09/17] Fix forms change saving & add question scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 appinfo/routes.php          | 24 ++++++-------
 src/Forms.vue               |  8 +----
 src/mixins/QuestionMixin.js | 14 ++++++++
 src/mixins/ViewsMixin.js    |  4 +++
 src/router.js               |  8 ++---
 src/utils/FormsUtils.js     | 37 --------------------
 src/views/Create.vue        | 69 +++++++++++++++++++------------------
 7 files changed, 70 insertions(+), 94 deletions(-)
 delete mode 100644 src/utils/FormsUtils.js

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 1000169..1f04c27 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -34,18 +34,18 @@ return [
 		['name' => 'page#goto_form', 'url' => '/{hash}', 'verb' => 'GET'],
 		['name' => 'page#insert_submission', 'url' => '/insert/submission', 'verb' => 'POST'],
 
-		['name' => 'api#getForms', 'url' => 'api/v1/forms', 'verb' => 'GET'],
-		['name' => 'api#newForm', 'url' => 'api/v1/form', 'verb' => 'POST'],
-		['name' => 'api#getForm', 'url' => 'api/v1/form/{id}', 'verb' => 'GET'],
-		['name' => 'api#updateForm', 'url' => 'api/v1/form/update/', 'verb' => 'POST'],
-		['name' => 'api#deleteForm', 'url' => 'api/v1/form/{id}', 'verb' => 'DELETE'],
-		['name' => 'api#updateQuestion', 'url' => 'api/v1/question/update', 'verb' => 'POST'],
-		['name' => 'api#reorderQuestions', 'url' => 'api/v1/question/reorder', 'verb' => 'POST'],
-		['name' => 'api#newQuestion', 'url' => 'api/v1/question', 'verb' => 'POST'],
-		['name' => 'api#deleteQuestion', 'url' => 'api/v1/question/{id}', 'verb' => 'DELETE'],
-		['name' => 'api#newOption', 'url' => 'api/v1/option', 'verb' => 'POST'],
-		['name' => 'api#deleteOption', 'url' => 'api/v1/option/{id}', 'verb' => 'DELETE'],
-		['name' => 'api#getSubmissions', 'url' => 'api/v1/submissions/{hash}', 'verb' => 'GET'],
+		['name' => 'api#getForms', 'url' => '/api/v1/forms', 'verb' => 'GET'],
+		['name' => 'api#newForm', 'url' => '/api/v1/form', 'verb' => 'POST'],
+		['name' => 'api#getForm', 'url' => '/api/v1/form/{id}', 'verb' => 'GET'],
+		['name' => 'api#updateForm', 'url' => '/api/v1/form/update/', 'verb' => 'POST'],
+		['name' => 'api#deleteForm', 'url' => '/api/v1/form/{id}', 'verb' => 'DELETE'],
+		['name' => 'api#updateQuestion', 'url' => '/api/v1/question/update', 'verb' => 'POST'],
+		['name' => 'api#reorderQuestions', 'url' => '/api/v1/question/reorder', 'verb' => 'POST'],
+		['name' => 'api#newQuestion', 'url' => '/api/v1/question', 'verb' => 'POST'],
+		['name' => 'api#deleteQuestion', 'url' => '/api/v1/question/{id}', 'verb' => 'DELETE'],
+		['name' => 'api#newOption', 'url' => '/api/v1/option', 'verb' => 'POST'],
+		['name' => 'api#deleteOption', 'url' => '/api/v1/option/{id}', 'verb' => 'DELETE'],
+		['name' => 'api#getSubmissions', 'url' => '/api/v1/submissions/{hash}', 'verb' => 'GET'],
 
 		['name' => 'system#get_site_users_and_groups', 'url' => '/get/siteusers', 'verb' => 'POST'],
 	]
diff --git a/src/Forms.vue b/src/Forms.vue
index ceb5b6e..d02ac3d 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -25,7 +25,7 @@
 	<Content app-name="forms">
 		<AppNavigation>
 			<AppNavigationNew button-class="icon-add" :text="t('forms', 'New form')" @click="onNewForm" />
-			<AppNavigationForm v-for="form in formattedForms"
+			<AppNavigationForm v-for="form in forms"
 				:key="form.id"
 				:form="form"
 				@delete="onDeleteForm" />
@@ -71,8 +71,6 @@ import Content from '@nextcloud/vue/dist/Components/Content'
 import AppNavigationForm from './components/AppNavigationForm'
 import EmptyContent from './components/EmptyContent'
 
-import { formatForm } from './utils/FormsUtils'
-
 export default {
 	name: 'Forms',
 
@@ -97,10 +95,6 @@ export default {
 			return this.forms && this.forms.length === 0
 		},
 
-		formattedForms() {
-			return this.forms.map(formatForm)
-		},
-
 		hash() {
 			return this.$route.params.hash
 		},
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index 504200e..4056d30 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -94,5 +94,19 @@ export default {
 		onDelete() {
 			this.$emit('delete')
 		},
+
+		/**
+		 * Focus the first focusable element
+		 */
+		focus() {
+			this.edit = true
+			this.$el.scrollIntoView({ behavior: 'smooth' })
+			this.$nextTick(() => {
+				const title = this.$el.querySelector('.question__header-title')
+				if (title) {
+					title.select()
+				}
+			})
+		},
 	},
 }
diff --git a/src/mixins/ViewsMixin.js b/src/mixins/ViewsMixin.js
index b112269..0354c2e 100644
--- a/src/mixins/ViewsMixin.js
+++ b/src/mixins/ViewsMixin.js
@@ -21,6 +21,10 @@
 
 export default {
 	props: {
+		hash: {
+			type: String,
+			default: '',
+		},
 		form: {
 			type: Object,
 			required: true,
diff --git a/src/router.js b/src/router.js
index de954d1..39b6af0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -56,7 +56,7 @@ export default new Router({
 		{
 			path: '/:hash',
 			name: 'fill',
-			props: true,
+			props: { default: true },
 		},
 		{
 			path: '/:hash/edit',
@@ -65,13 +65,13 @@ export default new Router({
 				sidebar: Sidebar,
 			},
 			name: 'edit',
-			props: true,
+			props: { default: true },
 		},
 		{
 			path: '/:hash/results',
 			component: Results,
 			name: 'results',
-			props: true,
+			props: { default: true },
 		},
 		{
 			path: '/:hash/clone',
@@ -80,7 +80,7 @@ export default new Router({
 				sidebar: Sidebar,
 			},
 			name: 'clone',
-			props: true,
+			props: { default: true },
 		},
 	],
 })
diff --git a/src/utils/FormsUtils.js b/src/utils/FormsUtils.js
deleted file mode 100644
index d8ccc7c..0000000
--- a/src/utils/FormsUtils.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * @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/>.
- */
-
-/**
- * Format a form object prior to forms v2.0
- *
- * @param {Object} form the form raw object
- * @returns {Object} properly formatted form object
- */
-const formatForm = function(form) {
-	// clone form
-	const newForm = Object.assign({}, form)
-
-	// cleanup
-	delete newForm.event
-	return newForm
-}
-
-export { formatForm }
diff --git a/src/views/Create.vue b/src/views/Create.vue
index f5de89e..a254696 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -27,7 +27,7 @@
   -->
 
 <template>
-	<AppContent v-if="loadingForm">
+	<AppContent v-if="isLoadingForm">
 		<EmptyContent icon="icon-loading">
 			{{ t('forms', 'Loading form “{title}”', { title: form.title }) }}
 		</EmptyContent>
@@ -76,10 +76,11 @@
 					v-tooltip="t('forms', 'Add a question to this form')"
 					:aria-label="t('forms', 'Add a question to this form')"
 					:open.sync="questionMenuOpened"
-					:default-icon="loadingQuestions ? 'icon-loading-small' : 'icon-add-white'">
+					:default-icon="isLoadingQuestions ? 'icon-loading-small' : 'icon-add-white'">
 					<ActionButton v-for="(answer, type) in answerTypes"
 						:key="answer.label"
-						:disabled="loadingQuestions"
+						:close-after-click="true"
+						:disabled="isLoadingQuestions"
 						:icon="answer.icon"
 						class="question-toolbar__question"
 						@click="addQuestion(type)">
@@ -104,9 +105,10 @@
 				<Draggable v-model="form.questions"
 					:animation="200"
 					tag="ul"
-					@start="dragging = true"
-					@end="dragging = false">
-					<Questions :is="answerTypes[question.type].component"
+					@start="isDragging = true"
+					@end="isDragging = false">
+					<Questions ref="questions"
+						:is="answerTypes[question.type].component"
 						v-for="(question, index) in form.questions"
 						:key="question.id"
 						:model="answerTypes[question.type]"
@@ -165,10 +167,13 @@ export default {
 		return {
 			questionMenuOpened: false,
 			answerTypes,
-			loadingForm: true,
-			loadingQuestions: false,
+
+			// Various states
+			isLoadingForm: true,
+			isLoadingQuestions: false,
 			errorForm: false,
-			dragging: false,
+
+			isDragging: false,
 		}
 	},
 
@@ -186,15 +191,10 @@ export default {
 	},
 
 	watch: {
-		form: {
-			deep: true,
-			handler: function(newForm, oldForm) {
-				if (newForm.hash === oldForm.hash) {
-					this.debounceSaveForm()
-				} else {
-					this.fetchFullForm(newForm.id)
-				}
-			},
+		// Fetch full form on change
+		hash() {
+			// TODO: cancel previous request if not done
+			this.fetchFullForm(this.form.id)
 		},
 	},
 
@@ -213,7 +213,7 @@ export default {
 		 * @param {number} id the unique form hash
 		 */
 		async fetchFullForm(id) {
-			this.loadingForm = true
+			this.isLoadingForm = true
 			console.debug('Loading form', id)
 
 			try {
@@ -223,14 +223,10 @@ export default {
 				console.error(error)
 				this.errorForm = true
 			} finally {
-				this.loadingForm = false
+				this.isLoadingForm = false
 			}
 		},
 
-		onSubmit(e) {
-			this.saveForm()
-		},
-
 		/**
 		 * Add a new question to the current form
 		 *
@@ -238,7 +234,7 @@ export default {
 		 */
 		async addQuestion(type) {
 			const text = t('forms', 'New question')
-			this.loadingQuestions = true
+			this.isLoadingQuestions = true
 
 			try {
 				const response = await axios.post(generateUrl('/apps/forms/api/v1/question'), {
@@ -255,23 +251,28 @@ export default {
 					answers: [],
 				}, question))
 
+				// Focus newly added question
+				this.$nextTick(() => {
+					const lastQuestion = this.$refs.questions[this.$refs.questions.length - 1]
+					lastQuestion.focus()
+				})
+
 			} catch (error) {
 				console.error(error)
 				showError(t('forms', 'There was an error while adding the new question'))
 			} finally {
-				this.loadingQuestions = false
+				this.isLoadingQuestions = false
 			}
 		},
 
 		/**
 		 * Delete a question
+		 *
 		 * @param {Object} question the question to delete
 		 * @param {number} question.id the question id to delete
 		 */
-		async deleteQuestion(question) {
-			console.info(question)
-			const id = question.id
-			this.loadingQuestions = true
+		async deleteQuestion({ id }) {
+			this.isLoadingQuestions = true
 
 			try {
 				await axios.delete(generateUrl('/apps/forms/api/v1/question/{id}', { id }))
@@ -281,7 +282,7 @@ export default {
 				console.error(error)
 				showError(t('forms', 'There was an error while removing the question'))
 			} finally {
-				this.loadingQuestions = false
+				this.isLoadingQuestions = false
 			}
 		},
 
@@ -313,16 +314,16 @@ export default {
 		},
 
 		/**
-		 * Forms saving handlers
+		 * Save form on submit
 		 */
-		debounceSaveForm: debounce(function() {
+		onSubmit: debounce(function() {
 			this.saveForm()
 		}, 200),
 
 		async saveForm() {
 			try {
 				// TODO: add loading status feedback ?
-				await axios.post(OC.generateUrl('/apps/forms/write/form'), this.form)
+				await axios.post(OC.generateUrl('/apps/forms/update/form'), this.form)
 			} catch (error) {
 				showError(t('forms', 'Error on saving form, see console'))
 				console.error(error)

From 6c8c17fcfc959b9275a91f957d112ce1783ea96a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 21 Apr 2020 18:04:37 +0200
Subject: [PATCH 10/17] Fix show results
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/views/Create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index a254696..d0c06f1 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -337,7 +337,7 @@ export default {
 			this.$router.push({
 				name: 'results',
 				params: {
-					hash: this.form.event.hash,
+					hash: this.form.hash,
 				},
 			})
 		},

From 56d16fce4d12a833985063bfb1d325c9196bb2ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 21 Apr 2020 18:23:28 +0200
Subject: [PATCH 11/17] Drag & drop reorder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 lib/Controller/ApiController.php |   2 +-
 src/views/Create.vue             | 184 +++++++++++++++++--------------
 2 files changed, 104 insertions(+), 82 deletions(-)

diff --git a/lib/Controller/ApiController.php b/lib/Controller/ApiController.php
index e0332b7..b9a8381 100644
--- a/lib/Controller/ApiController.php
+++ b/lib/Controller/ApiController.php
@@ -302,7 +302,7 @@ class ApiController extends Controller {
 	 * @NoAdminRequired
 	 * Updates the Order of all Questions of a Form.
 	 * @param int $formId Id of the form to reorder
-	 * @param int $newOrder Array of Question-Ids in new order.
+	 * @param int[] $newOrder Array of Question-Ids in new order.
 	 */
 	public function reorderQuestions(int $formId, array $newOrder): Http\JSONResponse {
 		$this->logger->debug('Reordering Questions on Form {formId} as Question-Ids {newOrder}', [
diff --git a/src/views/Create.vue b/src/views/Create.vue
index d0c06f1..62af8ac 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -105,6 +105,7 @@
 				<Draggable v-model="form.questions"
 					:animation="200"
 					tag="ul"
+					@change="onQuestionOrderChange"
 					@start="isDragging = true"
 					@end="isDragging = false">
 					<Questions ref="questions"
@@ -323,9 +324,9 @@ export default {
 		async saveForm() {
 			try {
 				// TODO: add loading status feedback ?
-				await axios.post(OC.generateUrl('/apps/forms/update/form'), this.form)
+				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/update'), this.form)
 			} catch (error) {
-				showError(t('forms', 'Error on saving form, see console'))
+				showError(t('forms', 'Error while saving form'))
 				console.error(error)
 			}
 		},
@@ -368,6 +369,27 @@ export default {
 				e.target.select()
 			}
 		},
+
+		/**
+		 * Reorder questions on dragEnd
+		 */
+		async onQuestionOrderChange() {
+			this.isLoadingQuestions = true
+			const newOrder = this.form.questions.map(question => question.id)
+			console.info(newOrder);
+
+			try {
+				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/reorder'), {
+					formId: this.form.id,
+					newOrder,
+				})
+			} catch (error) {
+				showError(t('forms', 'Error while saving form'))
+				console.error(error)
+			} finally {
+				this.isLoadingQuestions = false
+			}
+		},
 	},
 }
 </script>
@@ -454,94 +476,94 @@ export default {
 	}
 }
 
-/* Transitions for inserting and removing list items */
-.list-enter-active,
-.list-leave-active {
-	transition: all .5s ease;
-}
+// /* Transitions for inserting and removing list items */
+// .list-enter-active,
+// .list-leave-active {
+// 	transition: all .5s ease;
+// }
 
-.list-enter,
-.list-leave-to {
-	opacity: 0;
-}
+// .list-enter,
+// .list-leave-to {
+// 	opacity: 0;
+// }
 
-.list-move {
-	transition: transform .5s;
-}
+// .list-move {
+// 	transition: transform .5s;
+// }
 
-#form-item-selector-text {
-	> input {
-		width: 100%;
-	}
-}
+// #form-item-selector-text {
+// 	> input {
+// 		width: 100%;
+// 	}
+// }
 
-.form-table {
-	> li {
-		display: flex;
-		overflow: hidden;
-		align-items: baseline;
-		min-height: 24px;
-		padding-right: 8px;
-		padding-left: 8px;
-		white-space: nowrap;
-		border-bottom: 1px solid var(--color-border);
-		line-height: 24px;
+// .form-table {
+// 	> li {
+// 		display: flex;
+// 		overflow: hidden;
+// 		align-items: baseline;
+// 		min-height: 24px;
+// 		padding-right: 8px;
+// 		padding-left: 8px;
+// 		white-space: nowrap;
+// 		border-bottom: 1px solid var(--color-border);
+// 		line-height: 24px;
 
-		&:active,
-		&:hover {
-			transition: var(--background-dark) .3s ease;
-			background-color: var(--color-background-dark); //$hover-color;
-		}
+// 		&:active,
+// 		&:hover {
+// 			transition: var(--background-dark) .3s ease;
+// 			background-color: var(--color-background-dark); //$hover-color;
+// 		}
 
-		> div {
-			display: flex;
-			flex-grow: 1;
-			padding-right: 4px;
-			white-space: normal;
-			opacity: .7;
-			font-size: 1.2em;
-			&.avatar {
-				flex-grow: 0;
-			}
-		}
+// 		> div {
+// 			display: flex;
+// 			flex-grow: 1;
+// 			padding-right: 4px;
+// 			white-space: normal;
+// 			opacity: .7;
+// 			font-size: 1.2em;
+// 			&.avatar {
+// 				flex-grow: 0;
+// 			}
+// 		}
 
-		> div:nth-last-child(1) {
-			flex-grow: 0;
-			flex-shrink: 0;
-			justify-content: center;
-		}
-	}
-}
+// 		> div:nth-last-child(1) {
+// 			flex-grow: 0;
+// 			flex-shrink: 0;
+// 			justify-content: center;
+// 		}
+// 	}
+// }
 
-button {
-	&.button-inline {
-		border: 0;
-		background-color: transparent;
-	}
-}
+// button {
+// 	&.button-inline {
+// 		border: 0;
+// 		background-color: transparent;
+// 	}
+// }
 
-.tab {
-	display: flex;
-	flex-wrap: wrap;
-}
-.selectUnit {
-	display: flex;
-	align-items: center;
-	flex-wrap: nowrap;
-	> label {
-		padding-right: 4px;
-	}
-}
+// .tab {
+// 	display: flex;
+// 	flex-wrap: wrap;
+// }
+// .selectUnit {
+// 	display: flex;
+// 	align-items: center;
+// 	flex-wrap: nowrap;
+// 	> label {
+// 		padding-right: 4px;
+// 	}
+// }
 
-#shiftDates {
-	min-width: 16px;
-	min-height: 16px;
-	margin: 0;
-	padding: 10px;
-	padding-left: 34px;
-	text-align: left;
-	background-repeat: no-repeat;
-	background-position: 10px center;
-}
+// #shiftDates {
+// 	min-width: 16px;
+// 	min-height: 16px;
+// 	margin: 0;
+// 	padding: 10px;
+// 	padding-left: 34px;
+// 	text-align: left;
+// 	background-repeat: no-repeat;
+// 	background-position: 10px center;
+// }
 
 </style>

From ba7befb55b8b411a9e7a5e8856b6c16699d9d875 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 21 Apr 2020 18:39:05 +0200
Subject: [PATCH 12/17] Reordering & cleanup + title/desc save
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 lib/Controller/ApiController.php |   2 +
 src/views/Create.vue             | 129 +++++++++++++++----------------
 2 files changed, 66 insertions(+), 65 deletions(-)

diff --git a/lib/Controller/ApiController.php b/lib/Controller/ApiController.php
index b9a8381..cba80b6 100644
--- a/lib/Controller/ApiController.php
+++ b/lib/Controller/ApiController.php
@@ -187,7 +187,9 @@ class ApiController extends Controller {
 
 	/**
 	 * @NoAdminRequired
+	 *
 	 * Writes the given key-value pairs into Database.
+	 *
 	 * @param int $id FormId of form to update
 	 * @param array $keyValuePairs Array of key=>value pairs to update.
 	 */
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 62af8ac..924bbaf 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -58,6 +58,7 @@
 				:required="true"
 				autofocus
 				type="text"
+				@change="onTitleChange"
 				@click="selectIfUnchanged">
 			<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
 			<textarea
@@ -65,7 +66,7 @@
 				ref="description"
 				v-model="form.description"
 				:placeholder="t('forms', 'Description')"
-				@change="autoSizeDescription"
+				@change="onDescChange"
 				@keydown="autoSizeDescription" />
 		</header>
 
@@ -228,6 +229,38 @@ export default {
 			}
 		},
 
+		/**
+		 * Save form on submit
+		 */
+		onSubmit: debounce(function() {
+			this.saveForm()
+		}, 200),
+
+		async saveFormProperty(key) {
+			try {
+				// TODO: add loading status feedback ?
+				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/update'), {
+					id: this.form.id,
+					keyValuePairs: {
+						[key]: this.form[key],
+					},
+				})
+			} catch (error) {
+				showError(t('forms', 'Error while saving form'))
+				console.error(error)
+			}
+		},
+
+		/**
+		 * Title & description save methods
+		 */
+		onTitleChange: debounce(function() {
+			this.saveFormProperty('title')
+		}, 200),
+		onDescChange: debounce(function() {
+			this.saveFormProperty('description')
+		}, 200),
+
 		/**
 		 * Add a new question to the current form
 		 *
@@ -287,50 +320,40 @@ export default {
 			}
 		},
 
-		async addOption(item, question) {
-			const response = await axios.post(generateUrl('/apps/forms/api/v1/option/'), { formId: this.form.id, questionId: question.id, text: item.newOption })
-			const optionId = response.data
-
-			question.options.push({
-				id: optionId,
-				text: item.newOption,
-			})
-		},
-
-		async deleteOption(question, option, index) {
-			await axios.delete(generateUrl('/apps/forms/api/v1/option/{id}', { id: option.id }))
-			// TODO catch errors
-			question.options.splice(index, 1)
-		},
-
 		/**
-		 * Auto adjust the description height based on lines number
+		 * Reorder questions on dragEnd
 		 */
-		autoSizeDescription() {
-			const textarea = this.$refs.description
-			if (textarea) {
-				textarea.style.cssText = 'height:auto; padding:0'
-				textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
-			}
-		},
+		async onQuestionOrderChange() {
+			this.isLoadingQuestions = true
+			const newOrder = this.form.questions.map(question => question.id)
 
-		/**
-		 * Save form on submit
-		 */
-		onSubmit: debounce(function() {
-			this.saveForm()
-		}, 200),
-
-		async saveForm() {
 			try {
-				// TODO: add loading status feedback ?
-				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/update'), this.form)
+				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/reorder'), {
+					formId: this.form.id,
+					newOrder,
+				})
 			} catch (error) {
 				showError(t('forms', 'Error while saving form'))
 				console.error(error)
+			} finally {
+				this.isLoadingQuestions = false
 			}
 		},
 
+		/**
+		 * Add question methods
+		 */
+		openQuestionMenu() {
+			// TODO: fix the vue components to allow external click triggers without
+			// conflicting with the click outside directive
+			setTimeout(() => {
+				this.questionMenuOpened = true
+				this.$nextTick(() => {
+					this.$refs.questionMenu.focusFirstAction()
+				})
+			}, 10)
+		},
+
 		/**
 		 * Topbar methods
 		 */
@@ -346,20 +369,6 @@ export default {
 			emit('toggleSidebar')
 		},
 
-		/**
-		 * Add question methods
-		 */
-		openQuestionMenu() {
-			// TODO: fix the vue components to allow external click triggers without
-			// conflicting with the click outside directive
-			setTimeout(() => {
-				this.questionMenuOpened = true
-				this.$nextTick(() => {
-					this.$refs.questionMenu.focusFirstAction()
-				})
-			}, 10)
-		},
-
 		/**
 		 * Select the text in the input if it is still set to 'New form'
 		 * @param {Event} e the click event
@@ -371,23 +380,13 @@ export default {
 		},
 
 		/**
-		 * Reorder questions on dragEnd
+		 * Auto adjust the description height based on lines number
 		 */
-		async onQuestionOrderChange() {
-			this.isLoadingQuestions = true
-			const newOrder = this.form.questions.map(question => question.id)
-			console.info(newOrder);
-
-			try {
-				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/reorder'), {
-					formId: this.form.id,
-					newOrder,
-				})
-			} catch (error) {
-				showError(t('forms', 'Error while saving form'))
-				console.error(error)
-			} finally {
-				this.isLoadingQuestions = false
+		autoSizeDescription() {
+			const textarea = this.$refs.description
+			if (textarea) {
+				textarea.style.cssText = 'height:auto; padding:0'
+				textarea.style.cssText = `height: ${textarea.scrollHeight + 20}px`
 			}
 		},
 	},

From 0038a6d4b036d4139c4e045f9f2f68e256e7776b Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Tue, 21 Apr 2020 20:33:19 +0200
Subject: [PATCH 13/17] Fix Build-Errors

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/views/Create.vue | 165 ++++++++++++++++++++++---------------------
 1 file changed, 83 insertions(+), 82 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 924bbaf..8397e2b 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -109,9 +109,10 @@
 					@change="onQuestionOrderChange"
 					@start="isDragging = true"
 					@end="isDragging = false">
-					<Questions ref="questions"
+					<Questions
 						:is="answerTypes[question.type].component"
 						v-for="(question, index) in form.questions"
+						ref="questions"
 						:key="question.id"
 						:model="answerTypes[question.type]"
 						:index="index + 1"
@@ -126,7 +127,7 @@
 <script>
 import { emit } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
-import { showError, showSuccess } from '@nextcloud/dialogs'
+import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import Draggable from 'vuedraggable'
@@ -394,7 +395,7 @@ export default {
 </script>
 
 <style lang="scss">
-.app-content {
+#app-content {
 	display: flex;
 	align-items: center;
 	flex-direction: column;
@@ -475,94 +476,94 @@ export default {
 	}
 }
 
-// /* Transitions for inserting and removing list items */
-// .list-enter-active,
-// .list-leave-active {
-// 	transition: all .5s ease;
-// }
+/* Transitions for inserting and removing list items */
+/*.list-enter-active,
+.list-leave-active {
+	transition: all .5s ease;
+}
 
-// .list-enter,
-// .list-leave-to {
-// 	opacity: 0;
-// }
+.list-enter,
+.list-leave-to {
+	opacity: 0;
+}
 
-// .list-move {
-// 	transition: transform .5s;
-// }
+.list-move {
+	transition: transform .5s;
+}
 
-// #form-item-selector-text {
-// 	> input {
-// 		width: 100%;
-// 	}
-// }
+#form-item-selector-text {
+	> input {
+		width: 100%;
+	}
+}
 
-// .form-table {
-// 	> li {
-// 		display: flex;
-// 		overflow: hidden;
-// 		align-items: baseline;
-// 		min-height: 24px;
-// 		padding-right: 8px;
-// 		padding-left: 8px;
-// 		white-space: nowrap;
-// 		border-bottom: 1px solid var(--color-border);
-// 		line-height: 24px;
+.form-table {
+	> li {
+		display: flex;
+		overflow: hidden;
+		align-items: baseline;
+		min-height: 24px;
+		padding-right: 8px;
+		padding-left: 8px;
+		white-space: nowrap;
+		border-bottom: 1px solid var(--color-border);
+		line-height: 24px;
 
-// 		&:active,
-// 		&:hover {
-// 			transition: var(--background-dark) .3s ease;
-// 			background-color: var(--color-background-dark); //$hover-color;
-// 		}
+		&:active,
+		&:hover {
+			transition: var(--background-dark) .3s ease;
+			background-color: var(--color-background-dark); //$hover-color;
+		}
 
-// 		> div {
-// 			display: flex;
-// 			flex-grow: 1;
-// 			padding-right: 4px;
-// 			white-space: normal;
-// 			opacity: .7;
-// 			font-size: 1.2em;
-// 			&.avatar {
-// 				flex-grow: 0;
-// 			}
-// 		}
+		> div {
+			display: flex;
+			flex-grow: 1;
+			padding-right: 4px;
+			white-space: normal;
+			opacity: .7;
+			font-size: 1.2em;
+			&.avatar {
+				flex-grow: 0;
+			}
+		}
 
-// 		> div:nth-last-child(1) {
-// 			flex-grow: 0;
-// 			flex-shrink: 0;
-// 			justify-content: center;
-// 		}
-// 	}
-// }
+		> div:nth-last-child(1) {
+			flex-grow: 0;
+			flex-shrink: 0;
+			justify-content: center;
+		}
+	}
+}
 
-// button {
-// 	&.button-inline {
-// 		border: 0;
-// 		background-color: transparent;
-// 	}
-// }
+button {
+	&.button-inline {
+		border: 0;
+		background-color: transparent;
+	}
+}
 
-// .tab {
-// 	display: flex;
-// 	flex-wrap: wrap;
-// }
-// .selectUnit {
-// 	display: flex;
-// 	align-items: center;
-// 	flex-wrap: nowrap;
-// 	> label {
-// 		padding-right: 4px;
-// 	}
-// }
+.tab {
+	display: flex;
+	flex-wrap: wrap;
+}
+.selectUnit {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	> label {
+		padding-right: 4px;
+	}
+}
 
-// #shiftDates {
-// 	min-width: 16px;
-// 	min-height: 16px;
-// 	margin: 0;
-// 	padding: 10px;
-// 	padding-left: 34px;
-// 	text-align: left;
-// 	background-repeat: no-repeat;
-// 	background-position: 10px center;
-// }
+#shiftDates {
+	min-width: 16px;
+	min-height: 16px;
+	margin: 0;
+	padding: 10px;
+	padding-left: 34px;
+	text-align: left;
+	background-repeat: no-repeat;
+	background-position: 10px center;
+} */
 
 </style>

From d0897441eb210f8dc5c94b373fc5f3a5385840d5 Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Tue, 21 Apr 2020 20:33:41 +0200
Subject: [PATCH 14/17] Fix Save Form

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 appinfo/routes.php   | 4 ++--
 src/views/Create.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 1f04c27..0c186a7 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -35,9 +35,9 @@ return [
 		['name' => 'page#insert_submission', 'url' => '/insert/submission', 'verb' => 'POST'],
 
 		['name' => 'api#getForms', 'url' => '/api/v1/forms', 'verb' => 'GET'],
-		['name' => 'api#newForm', 'url' => '/api/v1/form', 'verb' => 'POST'],
 		['name' => 'api#getForm', 'url' => '/api/v1/form/{id}', 'verb' => 'GET'],
-		['name' => 'api#updateForm', 'url' => '/api/v1/form/update/', 'verb' => 'POST'],
+		['name' => 'api#updateForm', 'url' => '/api/v1/form/update', 'verb' => 'POST'],
+		['name' => 'api#newForm', 'url' => '/api/v1/form', 'verb' => 'POST'],
 		['name' => 'api#deleteForm', 'url' => '/api/v1/form/{id}', 'verb' => 'DELETE'],
 		['name' => 'api#updateQuestion', 'url' => '/api/v1/question/update', 'verb' => 'POST'],
 		['name' => 'api#reorderQuestions', 'url' => '/api/v1/question/reorder', 'verb' => 'POST'],
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 8397e2b..a84da46 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -240,7 +240,7 @@ export default {
 		async saveFormProperty(key) {
 			try {
 				// TODO: add loading status feedback ?
-				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/update'), {
+				await axios.post(generateUrl('/apps/forms/api/v1/form/update'), {
 					id: this.form.id,
 					keyValuePairs: {
 						[key]: this.form[key],
@@ -329,7 +329,7 @@ export default {
 			const newOrder = this.form.questions.map(question => question.id)
 
 			try {
-				await axios.post(OC.generateUrl('/apps/forms/api/v1/question/reorder'), {
+				await axios.post(generateUrl('/apps/forms/api/v1/question/reorder'), {
 					formId: this.form.id,
 					newOrder,
 				})

From c6855b9fdfaf27ad216ffb2a1c73fe4ea6edf95b Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Tue, 21 Apr 2020 22:40:06 +0200
Subject: [PATCH 15/17] Save Form Properties

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/mixins/ViewsMixin.js | 21 +++++++++++++++++++++
 src/views/Create.vue     | 15 ---------------
 src/views/Sidebar.vue    | 35 +++++++++++++++++++++++++++++------
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/mixins/ViewsMixin.js b/src/mixins/ViewsMixin.js
index 0354c2e..440a688 100644
--- a/src/mixins/ViewsMixin.js
+++ b/src/mixins/ViewsMixin.js
@@ -19,6 +19,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
+
 export default {
 	props: {
 		hash: {
@@ -30,4 +34,21 @@ export default {
 			required: true,
 		},
 	},
+
+	methods: {
+		async saveFormProperty(key) {
+			try {
+				// TODO: add loading status feedback ?
+				await axios.post(generateUrl('/apps/forms/api/v1/form/update/'), {
+					id: this.form.id,
+					keyValuePairs: {
+						[key]: this.form[key],
+					},
+				})
+			} catch (error) {
+				showError(t('forms', 'Error while saving form'))
+				console.error(error)
+			}
+		},
+	},
 }
diff --git a/src/views/Create.vue b/src/views/Create.vue
index a84da46..4ea0c5d 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -237,21 +237,6 @@ export default {
 			this.saveForm()
 		}, 200),
 
-		async saveFormProperty(key) {
-			try {
-				// TODO: add loading status feedback ?
-				await axios.post(generateUrl('/apps/forms/api/v1/form/update'), {
-					id: this.form.id,
-					keyValuePairs: {
-						[key]: this.form[key],
-					},
-				})
-			} catch (error) {
-				showError(t('forms', 'Error while saving form'))
-				console.error(error)
-			}
-		},
-
 		/**
 		 * Title & description save methods
 		 */
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index 49cddd0..a206f4a 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -31,7 +31,8 @@
 				v-model="form.isAnonymous"
 
 				type="checkbox"
-				class="checkbox">
+				class="checkbox"
+				@change="onAnonChange">
 			<label for="isAnonymous" class="title">
 				{{ t('forms', 'Anonymous form') }}
 			</label>
@@ -40,7 +41,8 @@
 				v-model="form.submitOnce"
 				:disabled="form.access.type === 'public' || form.isAnonymous"
 				type="checkbox"
-				class="checkbox">
+				class="checkbox"
+				@change="onSubmOnceChange">
 			<label for="submitOnce" class="title">
 				<span>{{ t('forms', 'Only allow one submission per user') }}</span>
 			</label>
@@ -57,7 +59,8 @@
 			<DatetimePicker v-show="formExpires"
 				id="expiresDatetimePicker"
 				v-model="form.expires"
-				v-bind="expirationDatePicker" />
+				v-bind="expirationDatePicker"
+				@change="onExpiresChange" />
 		</div>
 
 		<div class="configBox">
@@ -69,7 +72,8 @@
 				v-model="form.access.type"
 				type="radio"
 				value="registered"
-				class="radio">
+				class="radio"
+				@change="onAccessChange">
 			<label for="registered" class="title">
 				<div class="title icon-group" />
 				<span>{{ t('forms', 'Registered users only') }}</span>
@@ -79,7 +83,8 @@
 				v-model="form.access.type"
 				type="radio"
 				value="public"
-				class="radio">
+				class="radio"
+				@change="onAccessChange">
 			<label for="public" class="title">
 				<div class="title icon-link" />
 				<span>{{ t('forms', 'Public access') }}</span>
@@ -89,7 +94,8 @@
 				v-model="form.access.type"
 				type="radio"
 				value="selected"
-				class="radio">
+				class="radio"
+				@change="onAccessChange">
 			<label for="selected" class="title">
 				<div class="title icon-shared" />
 				<span>{{ t('forms', 'Only shared') }}</span>
@@ -159,6 +165,7 @@ export default {
 			handler: function() {
 				if (!this.formExpires) {
 					this.form.expires = 0
+					this.onExpiresChange()
 				} else {
 					this.form.expires = moment().unix() + 3600 // Expires in one hour.
 				}
@@ -219,6 +226,22 @@ export default {
 		onToggle() {
 			this.opened = !this.opened
 		},
+
+		/**
+		 * Save Form-Properties
+		 */
+		onAnonChange() {
+			this.saveFormProperty('isAnonymous')
+		},
+		onSubmOnceChange() {
+			this.saveFormProperty('submitOnce')
+		},
+		onAccessChange() {
+			this.saveFormProperty('access')
+		},
+		onExpiresChange() {
+			this.saveFormProperty('expires')
+		},
 	},
 }
 </script>

From 50594f0a01449feb5f0dff5bb9fe4c9b58a192f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Wed, 22 Apr 2020 17:57:31 +0200
Subject: [PATCH 16/17] Option management
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 appinfo/routes.php                            |  11 +-
 lib/Controller/ApiController.php              |  52 ++++-
 package-lock.json                             |  30 ++-
 package.json                                  |   2 +
 src/components/Questions/AnswerInput.vue      | 182 ++++++++++++++++++
 src/components/Questions/QuestionMultiple.vue | 170 ++++++++--------
 src/mixins/ViewsMixin.js                      |   2 +-
 src/utils/CancelableRequest.js                |  57 ++++++
 src/views/Create.vue                          | 145 +++-----------
 9 files changed, 440 insertions(+), 211 deletions(-)
 create mode 100644 src/components/Questions/AnswerInput.vue
 create mode 100644 src/utils/CancelableRequest.js

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 0c186a7..eaeb20d 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -34,17 +34,24 @@ return [
 		['name' => 'page#goto_form', 'url' => '/{hash}', 'verb' => 'GET'],
 		['name' => 'page#insert_submission', 'url' => '/insert/submission', 'verb' => 'POST'],
 
+		// Forms
 		['name' => 'api#getForms', 'url' => '/api/v1/forms', 'verb' => 'GET'],
+		['name' => 'api#newForm', 'url' => '/api/v1/form', 'verb' => 'POST'],
 		['name' => 'api#getForm', 'url' => '/api/v1/form/{id}', 'verb' => 'GET'],
 		['name' => 'api#updateForm', 'url' => '/api/v1/form/update', 'verb' => 'POST'],
-		['name' => 'api#newForm', 'url' => '/api/v1/form', 'verb' => 'POST'],
 		['name' => 'api#deleteForm', 'url' => '/api/v1/form/{id}', 'verb' => 'DELETE'],
+
+		// Questions
+		['name' => 'api#newQuestion', 'url' => '/api/v1/question', 'verb' => 'POST'],
 		['name' => 'api#updateQuestion', 'url' => '/api/v1/question/update', 'verb' => 'POST'],
 		['name' => 'api#reorderQuestions', 'url' => '/api/v1/question/reorder', 'verb' => 'POST'],
-		['name' => 'api#newQuestion', 'url' => '/api/v1/question', 'verb' => 'POST'],
 		['name' => 'api#deleteQuestion', 'url' => '/api/v1/question/{id}', 'verb' => 'DELETE'],
+
+		// Answers
 		['name' => 'api#newOption', 'url' => '/api/v1/option', 'verb' => 'POST'],
+		['name' => 'api#updateOption', 'url' => '/api/v1/option/update', 'verb' => 'POST'],
 		['name' => 'api#deleteOption', 'url' => '/api/v1/option/{id}', 'verb' => 'DELETE'],
+
 		['name' => 'api#getSubmissions', 'url' => '/api/v1/submissions/{hash}', 'verb' => 'GET'],
 
 		['name' => 'system#get_site_users_and_groups', 'url' => '/get/siteusers', 'verb' => 'POST'],
diff --git a/lib/Controller/ApiController.php b/lib/Controller/ApiController.php
index cba80b6..be8b82d 100644
--- a/lib/Controller/ApiController.php
+++ b/lib/Controller/ApiController.php
@@ -473,16 +473,15 @@ class ApiController extends Controller {
 	/**
 	 * @NoAdminRequired
 	 */
-	public function newOption(int $formId, int $questionId, string $text): Http\JSONResponse {
-		$this->logger->debug('Adding new option: formId: {formId}, questionId: {questionId}, text: {text}', [
-			'formId' => $formId,
+	public function newOption(int $questionId, string $text): Http\JSONResponse {
+		$this->logger->debug('Adding new option: questionId: {questionId}, text: {text}', [
 			'questionId' => $questionId,
 			'text' => $text,
 		]);
 
 		try {
-			$form = $this->formMapper->findById($formId);
 			$question = $this->questionMapper->findById($questionId);
+			$form = $this->formMapper->findById($question->getFormId());
 		} catch (IMapperException $e) {
 			$this->logger->debug('Could not find form or question so option can\'t be added');
 			return new Http\JSONResponse([], Http::STATUS_BAD_REQUEST);
@@ -493,11 +492,6 @@ class ApiController extends Controller {
 			return new Http\JSONResponse([], Http::STATUS_FORBIDDEN);
 		}
 
-		if ($question->getFormId() !== $formId) {
-			$this->logger->debug('This question is not part of the current form');
-			return new Http\JSONResponse([], Http::STATUS_FORBIDDEN);
-		}
-
 		$option = new Option();
 
 		$option->setQuestionId($questionId);
@@ -505,6 +499,45 @@ class ApiController extends Controller {
 
 		$option = $this->optionMapper->insert($option);
 
+		return new Http\JSONResponse([
+			'id' => $option->getId()
+		]);
+	}
+
+	/**
+	 * @NoAdminRequired
+	 * Writes the given key-value pairs into Database.
+
+	 * @param int $id OptionId of option to update
+	 * @param array $keyValuePairs Array of key=>value pairs to update.
+	 */
+	public function updateOption(int $id, array $keyValuePairs): Http\JSONResponse {
+		$this->logger->debug('Updating option: option: {id}, values: {keyValuePairs}', [
+			'id' => $id,
+			'keyValuePairs' => $keyValuePairs
+		]);
+
+		try {
+			$option = $this->optionMapper->findById($id);
+			$question = $this->questionMapper->findById($option->getQuestionId());
+			$form = $this->formMapper->findById($question->getFormId());
+		} catch (IMapperException $e) {
+			$this->logger->debug('Could not find option, question or form');
+			return new Http\JSONResponse(['message' => 'Could not find option, question or form'], Http::STATUS_BAD_REQUEST);
+		}
+
+		if ($form->getOwnerId() !== $this->userId) {
+			$this->logger->debug('This form is not owned by the current user');
+			return new Http\JSONResponse([], Http::STATUS_FORBIDDEN);
+		}
+
+		// Create OptionEntity with given Params & Id.
+		$option = Option::fromParams($keyValuePairs);
+		$option->setId($id);
+
+		// Update changed Columns in Db.
+		$this->optionMapper->update($option);
+
 		return new Http\JSONResponse($option->getId());
 	}
 
@@ -532,7 +565,6 @@ class ApiController extends Controller {
 
 		$this->optionMapper->delete($option);
 
-		//TODO useful response
 		return new Http\JSONResponse($id);
 	}
 
diff --git a/package-lock.json b/package-lock.json
index 21e96ad..c5d0632 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4623,6 +4623,11 @@
 			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
 			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
 		},
+		"eventemitter3": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
+			"integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg=="
+		},
 		"events": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@@ -8209,6 +8214,11 @@
 				"os-tmpdir": "^1.0.0"
 			}
 		},
+		"p-debounce": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/p-debounce/-/p-debounce-2.1.0.tgz",
+			"integrity": "sha512-M9bMt62TTnozdZhqFgs+V7XD2MnuKCaz+7fZdlu2/T7xruI3uIE5CicQ0vx1hV7HIUYF0jF+4/R1AgfOkl74Qw=="
+		},
 		"p-defer": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -8218,8 +8228,7 @@
 		"p-finally": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-			"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-			"dev": true
+			"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
 		},
 		"p-is-promise": {
 			"version": "2.1.0",
@@ -8245,6 +8254,23 @@
 				"p-limit": "^2.0.0"
 			}
 		},
+		"p-queue": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.3.0.tgz",
+			"integrity": "sha512-fg5dJlFpd5+3CgG3/0ogpVZUeJbjiyXFg0nu53hrOYsybqSiDyxyOpad0Rm6tAiGjgztAwkyvhlYHC53OiAJOA==",
+			"requires": {
+				"eventemitter3": "^4.0.0",
+				"p-timeout": "^3.1.0"
+			}
+		},
+		"p-timeout": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+			"integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+			"requires": {
+				"p-finally": "^1.0.0"
+			}
+		},
 		"p-try": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
diff --git a/package.json b/package.json
index 9496808..174e955 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,8 @@
 		"crypto-js": "^4.0.0",
 		"debounce": "^1.2.0",
 		"json2csv": "5.0.0",
+		"p-debounce": "^2.1.0",
+		"p-queue": "^6.3.0",
 		"regenerator-runtime": "^0.13.5",
 		"v-click-outside": "^3.0.1",
 		"vue": "^2.6.11",
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
new file mode 100644
index 0000000..424e74b
--- /dev/null
+++ b/src/components/Questions/AnswerInput.vue
@@ -0,0 +1,182 @@
+<template>
+	<li class="question__item">
+		<!-- TODO: properly choose max length -->
+		<input
+			ref="input"
+			:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
+			:placeholder="t('forms', 'Answer number {index}', { index: index + 1 })"
+			:value="answer.text"
+			class="question__input"
+			maxlength="256"
+			minlength="1"
+			type="text"
+			@input="onInput"
+			@keydown.delete="deleteEntry"
+			@keydown.enter.prevent="addNewEntry">
+
+		<!-- Delete answer -->
+		<Actions>
+			<ActionButton icon="icon-close" @click="deleteEntry">
+				{{ t('forms', 'Delete answer') }}
+			</ActionButton>
+		</Actions>
+	</li>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+import pDebounce from 'p-debounce'
+import PQueue from 'p-queue'
+
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+
+export default {
+	name: 'AnswerInput',
+
+	components: {
+		Actions,
+		ActionButton,
+	},
+
+	props: {
+		answer: {
+			type: Object,
+			required: true,
+		},
+		index: {
+			type: Number,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			queue: new PQueue({ concurrency: 1 }),
+		}
+	},
+
+	methods: {
+		/**
+		 * Focus the input
+		 */
+		focus() {
+			this.$refs.input.focus()
+		},
+
+		/**
+		 * Option changed, processing the data
+		 */
+		async onInput() {
+			// clone answer
+			const answer = Object.assign({}, this.answer)
+			answer.text = this.$refs.input.value
+
+			if (this.answer.local) {
+
+				// Dispatched for creation. Marked as synced
+				this.answer.local = false
+				const newAnswer = await this.debounceCreateAnswer(answer)
+				this.$emit('update:answer', answer.id, newAnswer)
+			} else {
+				this.debounceUpdateAnswer(answer)
+				this.$emit('update:answer', answer.id, answer)
+			}
+		},
+
+		/**
+		 * Request a new answer
+		 */
+		addNewEntry() {
+			this.$emit('add')
+		},
+
+		/**
+		 * Emit a delete request for this answer
+		 * when pressing the delete key on an empty input
+		 *
+		 * @param {Event} e the event
+		 */
+		async deleteEntry(e) {
+			if (e.type !== 'click' && this.$refs.input.value.length !== 0) {
+				return
+			}
+
+			// Dismiss delete key action
+			e.preventDefault()
+			const answer = Object.assign({}, this.answer)
+			const index = this.index
+
+			if (!answer.local) {
+				// let's not await, deleting in background
+				axios.delete(generateUrl('/apps/forms/api/v1/option/{id}', { id: this.answer.id }))
+					.catch(error => {
+						showError(t('forms', 'There was an issue deleting this option'))
+						console.error(error)
+						// restore option
+						this.$emit('restore', answer, index)
+					})
+			}
+
+			this.$emit('delete', answer.id, index)
+		},
+
+		/**
+		 * Create an unsynced answer to the server
+		 *
+		 * @param {Object} answer the answer to sync
+		 * @returns {Object} answer
+		 */
+		async createAnswer(answer) {
+			try {
+				const response = await axios.post(generateUrl('/apps/forms/api/v1/option'), {
+					questionId: answer.question_id,
+					text: answer.text,
+				})
+
+				// Was synced once, this is now up to date with the server
+				delete answer.local
+				return Object.assign({}, answer, response.data)
+			} catch (error) {
+				showError(t('forms', 'Error while saving the answer'))
+				console.error(error)
+			}
+
+			return answer
+		},
+		debounceCreateAnswer: pDebounce(function(answer) {
+			return this.queue.add(() => this.createAnswer(answer))
+		}, 100),
+
+		/**
+		 * Save to the server, only do it after 500ms
+		 * of no change
+		 *
+		 * @param {Object} answer the answer to sync
+		 */
+		async updateAnswer(answer) {
+			try {
+				await axios.post(generateUrl('/apps/forms/api/v1/option/update'), {
+					id: this.answer.id,
+					keyValuePairs: {
+						text: answer.text,
+					},
+				})
+				console.debug('Updated answer', answer)
+			} catch (error) {
+				showError(t('forms', 'Error while saving the answer'))
+				console.error(error)
+			}
+		},
+		debounceUpdateAnswer: pDebounce(function(answer) {
+			return this.queue.add(() => this.updateAnswer(answer))
+		}, 500),
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 66a3ef6..05306e2 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -22,6 +22,7 @@
 
 <template>
 	<Question
+		:id="id"
 		v-bind.sync="$attrs"
 		:text="text"
 		:edit.sync="edit"
@@ -29,13 +30,13 @@
 		@update:text="onTitleChange">
 		<ul class="question__content" :role="isUnique ? 'radiogroup' : ''">
 			<template v-for="(answer, index) in options">
-				<li :key="index" class="question__item">
+				<li v-if="!edit" :key="answer.id" class="question__item">
 					<!-- Answer radio/checkbox + label -->
-					<!-- TODO: migrate to radio/checkbox component once ready -->
-					<input :id="`${id}-answer-${index}`"
+					<!-- TODO: migrate to radio/checkbox component once available -->
+					<input :id="`${id}-answer-${answer.id}`"
 						ref="checkbox"
-						:aria-checked="isChecked(index)"
-						:checked="isChecked(index)"
+						:aria-checked="isChecked(answer.id)"
+						:checked="isChecked(answer.id)"
 						:class="{
 							'radio question__radio': isUnique,
 							'checkbox question__checkbox': !isUnique,
@@ -45,33 +46,23 @@
 						:type="isUnique ? 'radio' : 'checkbox'">
 					<label v-if="!edit"
 						ref="label"
-						:for="`${id}-answer-${index}`"
+						:for="`${id}-answer-${answer.id}`"
 						class="question__label">{{ answer.text }}</label>
-
-					<!-- Answer text input edit -->
-					<!-- TODO: properly choose max length -->
-					<input v-else
-						ref="input"
-						:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
-						:placeholder="t('forms', 'Answer number {index}', { index: index + 1 })"
-						:value="answer.text"
-						class="question__input"
-						maxlength="256"
-						minlength="1"
-						type="text"
-						@input="onInput(index)"
-						@keydown.enter.prevent="addNewEntry"
-						@keydown.delete="deleteEntry($event, index)">
-
-					<!-- Delete answer -->
-					<Actions v-if="edit">
-						<ActionButton icon="icon-close" @click="deleteEntry($event, index)">
-							{{ t('forms', 'Delete answer') }}
-						</ActionButton>
-					</Actions>
 				</li>
+
+				<!-- Answer text input edit -->
+				<AnswerInput v-else
+					:key="index /* using index to keep the same vnode after new answer creation */"
+					ref="input"
+					:answer="answer"
+					:index="index"
+					@add="addNewEntry"
+					@delete="deleteAnswer"
+					@update:answer="updateAnswer"
+					@restore="restoreAnswer" />
 			</template>
-			<li v-if="edit && !isLastEmpty" class="question__item">
+
+			<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
 				<!-- TODO: properly choose max length -->
 				<input
 					:aria-label="t('forms', 'Add a new answer')"
@@ -87,9 +78,7 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-
+import AnswerInput from './AnswerInput'
 import QuestionMixin from '../../mixins/QuestionMixin'
 import GenRandomId from '../../utils/GenRandomId'
 
@@ -100,34 +89,38 @@ export default {
 	name: 'QuestionMultiple',
 
 	components: {
-		Actions,
-		ActionButton,
+		AnswerInput,
 	},
 
 	mixins: [QuestionMixin],
 
-	data() {
-		return {
-			id: GenRandomId(),
-		}
+	props: {
+		id: {
+			type: Number,
+			required: true,
+		},
 	},
 
 	computed: {
 		isLastEmpty() {
-			const value = this.values[this.values.length - 1]
-			return value && value.trim().length === 0
+			const value = this.options[this.options.length - 1]
+			return value?.text?.trim().length === 0
 		},
 
 		isUnique() {
 			return this.model.unique === true
 		},
+
+		hasNoAnswer() {
+			return this.options.length === 0
+		},
 	},
 
 	watch: {
 		edit(edit) {
 			if (!edit) {
-				// Filter and update questions
-				this.$emit('update:values', this.values.filter(answer => !!answer))
+				// Filter out empty options and update question
+				this.$emit('update:options', this.options.filter(answer => !!answer.text))
 			}
 		},
 	},
@@ -145,54 +138,80 @@ export default {
 		},
 
 		/**
-		 * Update the values
-		 * @param {Array} values values to change
+		 * Update the options
+		 * @param {Array} options options to change
 		 */
-		updateValues(values) {
-			this.$emit('update:values', this.isUnique ? [values[0]] : values)
+		updateOptions(options) {
+			this.$emit('update:options', options)
 		},
 
-		onInput(index) {
-			// Update values
-			const input = this.$refs.input[index]
-			const values = this.values.slice()
-			values[index] = input.value
+		/**
+		 * 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
 
-			// Update question
-			this.updateValues(values)
+			this.updateOptions(options)
 		},
 
+		/**
+		 * Add a new empty answer locally
+		 */
 		addNewEntry() {
-			// Add entry
-			const values = this.values.slice()
-			values.push('')
+			// Add local entry
+			const options = this.options.slice()
+			options.push({
+				id: GenRandomId(),
+				question_id: this.id,
+				text: '',
+				local: true,
+			})
 
 			// Update question
-			this.updateValues(values)
+			this.updateOptions(options)
 
 			this.$nextTick(() => {
-				this.focusIndex(values.length - 1)
+				this.focusIndex(options.length - 1)
 			})
 		},
 
-		deleteEntry(e, index) {
-			const input = this.$refs.input[index]
+		/**
+		 * Restore an answer locally
+		 *
+		 * @param {Object} answer the answer
+		 * @param {number} index the answer index in this.options
+		 */
+		restoreAnswer(answer, index) {
+			const options = this.options.slice()
+			options.splice(index, 0, answer)
 
-			if (input.value.length === 0) {
-				// Dismiss delete action
-				e.preventDefault()
+			this.updateOptions(options)
+			this.focusIndex(index)
+		},
 
-				// Remove entry
-				const values = this.values.slice()
-				values.splice(index, 1)
+		/**
+		 * Delete an answer locally
+		 *
+		 * @param {number} id the answer is
+		 * @param {number} index the answer index in this.options
+		 */
+		deleteAnswer(id, index) {
+			// Remove entry
+			const options = this.options.slice()
+			const optionIndex = options.findIndex(option => option.id === id)
+			options.splice(optionIndex, 1)
 
-				// Update question
-				this.updateValues(values)
+			// Update question
+			this.updateOptions(options)
 
-				this.$nextTick(() => {
-					 this.focusNext(index)
-				})
-			}
+			this.$nextTick(() => {
+				this.focusIndex(index + 1)
+			})
 		},
 
 		/**
@@ -201,9 +220,10 @@ export default {
 		 * @param {Number} index the value index
 		 */
 		focusIndex(index) {
-			const input = this.$refs.input[index]
-			if (input) {
-				 input.focus()
+			const inputs = this.$refs.input
+			if (inputs && inputs[index]) {
+				const input = inputs[index]
+				input.focus()
 			}
 		},
 	},
diff --git a/src/mixins/ViewsMixin.js b/src/mixins/ViewsMixin.js
index 440a688..ae79459 100644
--- a/src/mixins/ViewsMixin.js
+++ b/src/mixins/ViewsMixin.js
@@ -39,7 +39,7 @@ export default {
 		async saveFormProperty(key) {
 			try {
 				// TODO: add loading status feedback ?
-				await axios.post(generateUrl('/apps/forms/api/v1/form/update/'), {
+				await axios.post(generateUrl('/apps/forms/api/v1/form/update'), {
 					id: this.form.id,
 					keyValuePairs: {
 						[key]: this.form[key],
diff --git a/src/utils/CancelableRequest.js b/src/utils/CancelableRequest.js
new file mode 100644
index 0000000..e2f79e6
--- /dev/null
+++ b/src/utils/CancelableRequest.js
@@ -0,0 +1,57 @@
+/**
+ * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ * @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/>.
+ *
+ */
+
+import axios from '@nextcloud/axios'
+
+/**
+ * Creates a cancelable axios 'request object'.
+ *
+ * @param {function} request the axios promise request
+ * @returns {Object}
+ */
+const CancelableRequest = function(request) {
+	/**
+	 * Generate an axios cancel token
+	 */
+	const CancelToken = axios.CancelToken
+	const source = CancelToken.source()
+
+	/**
+	 * Execute the request
+	 *
+	 * @param {string} url the url to send the request to
+	 * @param {Object} [options] optional config for the request
+	 */
+	const fetch = async function(url, options) {
+		return request(
+			url,
+			Object.assign({ cancelToken: source.token }, { options })
+		)
+	}
+	return {
+		request: fetch,
+		cancel: source.cancel,
+	}
+}
+
+export default CancelableRequest
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 4ea0c5d..8999935 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -58,16 +58,17 @@
 				:required="true"
 				autofocus
 				type="text"
-				@change="onTitleChange"
-				@click="selectIfUnchanged">
+				@click="selectIfUnchanged"
+				@keyup="onTitleChange">
 			<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
 			<textarea
 				id="form-desc"
 				ref="description"
 				v-model="form.description"
 				:placeholder="t('forms', 'Description')"
-				@change="onDescChange"
-				@keydown="autoSizeDescription" />
+				@change="autoSizeDescription"
+				@keydown="autoSizeDescription"
+				@keyup="onDescChange" />
 		</header>
 
 		<section>
@@ -102,24 +103,22 @@
 			</EmptyContent>
 
 			<!-- Questions list -->
-			<form @submit.prevent="onSubmit">
-				<Draggable v-model="form.questions"
-					:animation="200"
-					tag="ul"
-					@change="onQuestionOrderChange"
-					@start="isDragging = true"
-					@end="isDragging = false">
-					<Questions
-						:is="answerTypes[question.type].component"
-						v-for="(question, index) in form.questions"
-						ref="questions"
-						:key="question.id"
-						:model="answerTypes[question.type]"
-						:index="index + 1"
-						v-bind.sync="question"
-						@delete="deleteQuestion(question)" />
-				</Draggable>
-			</form>
+			<Draggable v-model="form.questions"
+				:animation="200"
+				tag="ul"
+				@change="onQuestionOrderChange"
+				@start="isDragging = true"
+				@end="isDragging = false">
+				<Questions
+					:is="answerTypes[question.type].component"
+					v-for="(question, index) in form.questions"
+					ref="questions"
+					:key="question.id"
+					:model="answerTypes[question.type]"
+					:index="index + 1"
+					v-bind.sync="question"
+					@delete="deleteQuestion(question)" />
+			</Draggable>
 		</section>
 	</AppContent>
 </template>
@@ -230,13 +229,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Save form on submit
-		 */
-		onSubmit: debounce(function() {
-			this.saveForm()
-		}, 200),
-
 		/**
 		 * Title & description save methods
 		 */
@@ -380,7 +372,9 @@ export default {
 </script>
 
 <style lang="scss">
-#app-content {
+// Replace with new vue components release
+#app-content,
+#app-content-vue {
 	display: flex;
 	align-items: center;
 	flex-direction: column;
@@ -460,95 +454,4 @@ export default {
 		}
 	}
 }
-
-/* Transitions for inserting and removing list items */
-/*.list-enter-active,
-.list-leave-active {
-	transition: all .5s ease;
-}
-
-.list-enter,
-.list-leave-to {
-	opacity: 0;
-}
-
-.list-move {
-	transition: transform .5s;
-}
-
-#form-item-selector-text {
-	> input {
-		width: 100%;
-	}
-}
-
-.form-table {
-	> li {
-		display: flex;
-		overflow: hidden;
-		align-items: baseline;
-		min-height: 24px;
-		padding-right: 8px;
-		padding-left: 8px;
-		white-space: nowrap;
-		border-bottom: 1px solid var(--color-border);
-		line-height: 24px;
-
-		&:active,
-		&:hover {
-			transition: var(--background-dark) .3s ease;
-			background-color: var(--color-background-dark); //$hover-color;
-		}
-
-		> div {
-			display: flex;
-			flex-grow: 1;
-			padding-right: 4px;
-			white-space: normal;
-			opacity: .7;
-			font-size: 1.2em;
-			&.avatar {
-				flex-grow: 0;
-			}
-		}
-
-		> div:nth-last-child(1) {
-			flex-grow: 0;
-			flex-shrink: 0;
-			justify-content: center;
-		}
-	}
-}
-
-button {
-	&.button-inline {
-		border: 0;
-		background-color: transparent;
-	}
-}
-
-.tab {
-	display: flex;
-	flex-wrap: wrap;
-}
-.selectUnit {
-	display: flex;
-	align-items: center;
-	flex-wrap: nowrap;
-	> label {
-		padding-right: 4px;
-	}
-}
-
-#shiftDates {
-	min-width: 16px;
-	min-height: 16px;
-	margin: 0;
-	padding: 10px;
-	padding-left: 34px;
-	text-align: left;
-	background-repeat: no-repeat;
-	background-position: 10px center;
-} */
-
 </style>

From 491941a3e8b23b48cfbda0329154709a5e7c870a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Mon, 27 Apr 2020 18:27:51 +0200
Subject: [PATCH 17/17] Properly update question
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/Questions/AnswerInput.vue |  1 +
 src/components/Questions/Question.vue    | 27 +++++++++++++++++++++++-
 src/mixins/QuestionMixin.js              |  1 +
 src/utils/GenRandomId.js                 |  2 +-
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 424e74b..143d7a7 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -135,6 +135,7 @@ export default {
 					questionId: answer.question_id,
 					text: answer.text,
 				})
+				console.debug('Created answer', answer)
 
 				// Was synced once, this is now up to date with the server
 				delete answer.local
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 6fde335..b188195 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -42,7 +42,8 @@
 				minlength="1"
 				maxlength="256"
 				required
-				@input="onInput">
+				@input="onInput"
+				@keyup="onTitleChange">
 			<h3 v-else class="question__header-title" v-text="text" />
 			<Actions class="question__header-menu" :force-menu="true">
 				<ActionButton icon="icon-delete" @click="onDelete">
@@ -57,7 +58,12 @@
 </template>
 
 <script>
+import axios from '@nextcloud/axios'
+import debounce from 'debounce'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
 import { directive as ClickOutside } from 'v-click-outside'
+
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 
@@ -117,6 +123,25 @@ export default {
 		onDelete() {
 			this.$emit('delete')
 		},
+
+		onTitleChange: debounce(function() {
+			this.saveQuestionProperty('text')
+		}, 200),
+
+		async saveQuestionProperty(key) {
+			try {
+				// TODO: add loading status feedback ?
+				await axios.post(generateUrl('/apps/forms/api/v1/question/update'), {
+					id: this.id,
+					keyValuePairs: {
+						[key]: this[key],
+					},
+				})
+			} catch (error) {
+				showError(t('forms', 'Error while saving question'))
+				console.error(error)
+			}
+		},
 	},
 }
 </script>
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index 4056d30..27a73de 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -23,6 +23,7 @@ import Question from '../components/Questions/Question'
 export default {
 	inheritAttrs: false,
 	props: {
+
 		/**
 		 * The question title
 		 */
diff --git a/src/utils/GenRandomId.js b/src/utils/GenRandomId.js
index aa0d6fc..275735e 100644
--- a/src/utils/GenRandomId.js
+++ b/src/utils/GenRandomId.js
@@ -1,6 +1,6 @@
 
 /**
- * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
  *
  * @author John Molakvoæ <skjnldsv@protonmail.com>
  *