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] 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 */