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