Insert Submission, new API

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

src/components/Questions/QuestionMultiple.vue

@@ -43,7 +43,8 @@
 						}"
 						:name="`${id}-answer`"
 						:required="true /* TODO: implement required option */"
-						:type="isUnique ? 'radio' : 'checkbox'">
+						:type="isUnique ? 'radio' : 'checkbox'"
+						@change="onChange($event, answer.id)">
 					<label v-if="!edit"
 						ref="label"
 						:for="`${id}-answer-${answer.id}`"
@@ -126,6 +127,26 @@ export default {
 	},
 
 	methods: {
+		onChange(event, answerId) {
+			const isChecked = event.target.checked === true
+			let values = this.values.slice()
+
+			// Radio
+			if (this.isUnique) {
+				this.$emit('update:values', [answerId])
+				return
+			}
+
+			// Checkbox
+			if (isChecked) {
+				values.push(answerId)
+			} else {
+				values = values.filter(id => id !== answerId)
+			}
+
+			// Emit values and remove duplicates
+			this.$emit('update:values', [...new Set(values)])
+		},
 
 		/**
 		 * Is the provided index checked

src/views/Create.vue

@@ -392,7 +392,7 @@ export default {
 			font-size: 2em;
 			font-weight: bold;
 			padding-left: 14px; // align with description (compensate font size diff)
-			overflow: hidden;
+			overflow-x: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}

src/views/Submit.vue

@@ -44,9 +44,14 @@
 						:read-only="true"
 						:model="answerTypes[question.type]"
 						:index="index + 1"
-						v-bind="question" />
+						v-bind="question"
+						:values.sync="answers[question.id]" />
 				</ul>
-				<input class="primary" type="submit" :value="t('forms', 'Submit')" :aria-label="t('forms', 'Submit form')">
+				<input class="primary"
+					type="submit"
+					:value="t('forms', 'Submit')"
+					:disabled="loading"
+					:aria-label="t('forms', 'Submit form')">
 			</form>
 		</AppContent>
 	</Content>
@@ -54,12 +59,14 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
-
-import answerTypes from '../models/AnswerTypes'
-
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import Content from '@nextcloud/vue/dist/Components/Content'
 
+import answerTypes from '../models/AnswerTypes'
+
 import Question from '../components/Questions/Question'
 import QuestionLong from '../components/Questions/QuestionLong'
 import QuestionShort from '../components/Questions/QuestionShort'
@@ -81,6 +88,9 @@ export default {
 		return {
 			form: loadState('forms', 'form'),
 			answerTypes,
+			answers: {},
+			loading: false,
+			success: false,
 		}
 	},
 
@@ -102,8 +112,24 @@ export default {
 	},
 
 	methods: {
-		onSubmit(e) {
-			console.info(e)
+		/**
+		 * Submit the form after the browser validated it 🚀
+		 */
+		async onSubmit() {
+			this.loading = true
+
+			try {
+				await axios.post(generateUrl('/apps/forms/api/v1/submissions/insert'), {
+					formId: this.form.id,
+					answers: this.answers,
+				})
+				this.success = true
+			} catch (error) {
+				console.error(error)
+				showError(t('forms', 'There was an error submitting the form'))
+			} finally {
+				this.loading = false
+			}
 		},
 	},