From efd6e9f64be7b153b48cd97fce0ed85e36cbb267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 7 Mar 2020 10:56:29 +0100
Subject: [PATCH] Add loading indicator and autofocus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/Controls.vue    |  1 +
 src/components/board/Stack.vue | 43 +++++++++++++++++++++++-----------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 3b5dab0a1..a4fc75653 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -36,6 +36,7 @@
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add new list') }}</label>
 					<input id="new-stack-input-main"
 						v-model="newStackTitle"
+						v-focus
 						type="text"
 						class="no-close"
 						:placeholder="t('deck', 'List name')"
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index cb53980d1..41688cff7 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -51,17 +51,22 @@
 			</Actions>
 		</div>
 
-		<form v-if="showAddCard" class="stack--card-add" @submit.prevent="clickAddCard()">
+		<form v-if="showAddCard"
+			class="stack--card-add"
+			:class="{ 'icon-loading-small': stateCardCreating }"
+			@submit.prevent="clickAddCard()">
 			<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
 			<input id="new-stack-input-main"
 				v-model="newCardTitle"
 				v-focus
 				type="text"
 				class="no-close"
+				:disabled="stateCardCreating"
 				placeholder="Add a new card"
 				required>
 
-			<input class="icon-confirm"
+			<input v-show="!stateCardCreating"
+				class="icon-confirm"
 				type="submit"
 				value="">
 		</form>
@@ -108,6 +113,7 @@ export default {
 			copiedStack: '',
 			newCardTitle: '',
 			showAddCard: false,
+			stateCardCreating: false,
 		}
 	},
 	computed: {
@@ -160,15 +166,21 @@ export default {
 			}
 			this.editing = false
 		},
-		clickAddCard() {
-			const newCard = {
-				title: this.newCardTitle,
-				stackId: this.stack.id,
-				boardId: this.stack.boardId,
+		async clickAddCard() {
+			this.stateCardCreating = true
+			try {
+				await this.$store.dispatch('addCard', {
+					title: this.newCardTitle,
+					stackId: this.stack.id,
+					boardId: this.stack.boardId,
+				})
+				this.newCardTitle = ''
+				this.showAddCard = false
+			} catch (e) {
+				OCP.Toast.error('Could not create card: ' + e.response.data.message)
+			} finally {
+				this.stateCardCreating = false
 			}
-			this.$store.dispatch('addCard', newCard)
-			this.newCardTitle = ''
-			this.showAddCard = false
 		},
 	},
 }
@@ -209,11 +221,14 @@ export default {
 
 	.stack--card-add {
 		display: flex;
-		margin-left: 3px;
-		margin-right: 3px;
-		box-shadow: 0 0 3px #aaa;
+		margin-bottom: 10px;
+		box-shadow: 0 0 3px var(--color-box-shadow);
 		border-radius: 3px;
-		margin-bottom: 15px;
+
+		&.icon-loading-small:after,
+		&.icon-loading-small-dark:after {
+			margin-left: calc(50% - 25px);
+		}
 
 		input[type=text] {
 			flex-grow: 1;