From a07f5b7d1cb2099d8d369fd925685ef171911070 Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Thu, 14 May 2020 15:23:26 +0200
Subject: [PATCH] Delete empty options from Db

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/components/Questions/AnswerInput.vue      | 15 +---
 src/components/Questions/QuestionMultiple.vue | 68 +++++++++++++++----
 2 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 6e28b9c..c7fc60d 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -114,21 +114,8 @@ export default {
 
 			// 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)
+			this.$emit('delete', this.answer.id)
 		},
 
 		/**
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index b433942..2184490 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -61,9 +61,8 @@
 					:index="index"
 					:max-option-length="maxStringLengths.optionText"
 					@add="addNewEntry"
-					@delete="deleteAnswer"
-					@update:answer="updateAnswer"
-					@restore="restoreAnswer" />
+					@delete="deleteOption"
+					@update:answer="updateAnswer" />
 			</template>
 
 			<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
@@ -81,6 +80,10 @@
 </template>
 
 <script>
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
+
 import AnswerInput from './AnswerInput'
 import QuestionMixin from '../../mixins/QuestionMixin'
 import GenRandomId from '../../utils/GenRandomId'
@@ -118,9 +121,18 @@ export default {
 
 	watch: {
 		edit(edit) {
+			// When leaving edit mode, filter and delete empty options
 			if (!edit) {
-				// Filter out empty options and update question
-				this.$emit('update:options', this.options.filter(answer => !!answer.text))
+				const options = this.options.filter(option => {
+					if (!option.text) {
+						this.deleteOptionFromDatabase(option)
+						return false
+					}
+					return true
+				})
+
+				// update parent
+				this.updateOptions(options)
 			}
 		},
 	},
@@ -224,39 +236,65 @@ export default {
 		},
 
 		/**
-		 * Restore an answer locally
+		 * Restore an option locally
 		 *
-		 * @param {Object} answer the answer
-		 * @param {number} index the answer index in this.options
+		 * @param {Object} option the option
+		 * @param {number} index the options index in this.options
 		 */
-		restoreAnswer(answer, index) {
+		restoreOption(option, index) {
 			const options = this.options.slice()
-			options.splice(index, 0, answer)
+			options.splice(index, 0, option)
 
 			this.updateOptions(options)
 			this.focusIndex(index)
 		},
 
 		/**
-		 * Delete an answer locally
+		 * Delete an option
 		 *
-		 * @param {number} id the answer is
-		 * @param {number} index the answer index in this.options
+		 * @param {number} id the options id
 		 */
-		deleteAnswer(id, index) {
+		deleteOption(id) {
 			// Remove entry
 			const options = this.options.slice()
 			const optionIndex = options.findIndex(option => option.id === id)
+			const option = Object.assign({}, this.options[optionIndex])
+
+			// delete locally
 			options.splice(optionIndex, 1)
 
+			// delete from Db
+			this.deleteOptionFromDatabase(option)
+
 			// Update question
 			this.updateOptions(options)
 
 			this.$nextTick(() => {
-				this.focusIndex(index + 1)
+				this.focusIndex(optionIndex)
 			})
 		},
 
+		/**
+		 * Delete the option from Db in background.
+		 * Restore option if delete not possible
+		 *
+		 * @param {Object} option The option to delete
+		 */
+		deleteOptionFromDatabase(option) {
+			const optionIndex = this.options.findIndex(opt => opt.id === option.id)
+
+			if (!option.local) {
+				// let's not await, deleting in background
+				axios.delete(generateUrl('/apps/forms/api/v1/option/{id}', { id: option.id }))
+					.catch(error => {
+						showError(t('forms', 'There was an issue deleting this option'))
+						console.error(error)
+						// restore option
+						this.restoreOption(option, optionIndex)
+					})
+			}
+		},
+
 		/**
 		 * Focus the input matching the index
 		 *