Merge pull request #1579 from nextcloud/bugfix/card-store-cleanup

Card store cleanup

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')"

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;

src/components/card/CardSidebar.vue

@@ -227,6 +227,8 @@ export default {
 
 				if (this.currentCard.assignedUsers.length > 0) {
 					this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
+				} else {
+					this.assignedUsers = []
 				}
 
 				this.desc = this.currentCard.description

src/components/cards/CardItem.vue

@@ -178,7 +178,7 @@ export default {
 		},
 		finishedEdit(card) {
 			if (this.copiedCard.title !== card.title) {
-				this.$store.dispatch('updateCard', this.copiedCard)
+				this.$store.dispatch('updateCardTitle', this.copiedCard)
 			}
 			this.editing = false
 		},

src/main.js

@@ -53,6 +53,14 @@ Vue.directive('focus', {
 	},
 })
 
+Vue.config.errorHandler = (err, vm, info) => {
+	if (err.response && err.response.data.message) {
+		const errorMessage = t('deck', 'Something went wrong')
+		OCP.Toast.error(`${errorMessage}: ${err.response.data.status} ${err.response.data.message}`)
+	}
+	throw err
+}
+
 /* eslint-disable-next-line no-new */
 new Vue({
 	el: '#content',

src/store/card.js

@@ -119,12 +119,6 @@ export default {
 				}
 			}
 		},
-		updateTitle(state, card) {
-			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-			if (existingIndex !== -1) {
-				state.cards[existingIndex].title = card.title
-			}
-		},
 		assignCardToUser(state, user) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === user.cardId)
 			if (existingIndex !== -1) {
@@ -140,44 +134,25 @@ export default {
 				}
 			}
 		},
-		updateCardDesc(state, card) {
+		updateCardProperty(state, { card, property }) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
-				state.cards[existingIndex].description = card.description
-			}
-		},
-		updateCardDue(state, card) {
-			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-			if (existingIndex !== -1) {
-				state.cards[existingIndex].duedate = card.duedate
-			}
-		},
-		updateCardLabels(state, card) {
-			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-			if (existingIndex !== -1) {
-				const existingCard = state.cards.find(_card => _card.id === card.id)
-				existingCard.labels = card.labels
+				Vue.set(state.cards[existingIndex], property, card[property])
 			}
 		},
 	},
 	actions: {
-		addCard({ commit }, card) {
-			apiClient.addCard(card)
-				.then((createdCard) => {
-					commit('addCard', createdCard)
-				})
+		async addCard({ commit }, card) {
+			const createdCard = await apiClient.addCard(card)
+			commit('addCard', createdCard)
 		},
-		updateCard({ commit }, card) {
-			apiClient.updateCard(card)
-				.then((updatedCard) => {
-					commit('updateTitle', updatedCard)
-				})
+		async updateCardTitle({ commit }, card) {
+			const updatedCard = await apiClient.updateCard(card)
+			commit('updateCardProperty', { property: 'title', card: updatedCard })
 		},
-		moveCard({ commit }, card) {
-			apiClient.updateCard(card)
-				.then((updatedCard) => {
-					commit('deleteCard', updatedCard)
-				})
+		async moveCard({ commit }, card) {
+			const updatedCard = await apiClient.updateCard(card)
+			commit('deleteCard', updatedCard)
 		},
 		async reorderCard({ commit, getters }, card) {
 			let i = 0
@@ -196,66 +171,47 @@ export default {
 
 			const cards = await apiClient.reorderCard(card)
 			await commit('updateCardsReorder', Object.values(cards))
-
 		},
-		deleteCard({ commit }, card) {
-			apiClient.deleteCard(card.id)
-				.then((card) => {
-					commit('deleteCard', card)
-				})
+		async deleteCard({ commit }, card) {
+			await apiClient.deleteCard(card.id)
+			commit('deleteCard', card)
 		},
-		archiveUnarchiveCard({ commit }, card) {
+		async archiveUnarchiveCard({ commit }, card) {
 			let call = 'archiveCard'
 			if (card.archived === false) {
 				call = 'unArchiveCard'
 			}
 
-			apiClient[call](card)
-				.then((card) => {
-					commit('deleteCard', card)
-				})
+			const updatedCard = await apiClient[call](card)
+			commit('deleteCard', updatedCard)
 		},
-		assignCardToUser({ commit }, card) {
-			apiClient.assignUser(card)
-				.then((user) => {
-					commit('assignCardToUser', user)
-				})
+		async assignCardToUser({ commit }, card) {
+			const user = await apiClient.assignUser(card)
+			commit('assignCardToUser', user)
 		},
-		removeUserFromCard({ commit }, card) {
-			apiClient.removeUser(card)
-				.then((user) => {
-					commit('removeUserFromCard', user)
-				})
+		async removeUserFromCard({ commit }, card) {
+			const user = await apiClient.removeUser(card)
+			commit('removeUserFromCard', user)
 		},
-		addLabel({ commit }, data) {
-			apiClient.assignLabelToCard(data)
-				.then(() => {
-					commit('updateCardLabels', data.card)
-				})
+		async addLabel({ commit }, data) {
+			await apiClient.assignLabelToCard(data)
+			commit('updateCardProperty', { property: 'labels', card: data.card })
 		},
-		removeLabel({ commit }, data) {
-			apiClient.removeLabelFromCard(data)
-				.then(() => {
-					commit('updateCardLabels', data.card)
-				})
+		async removeLabel({ commit }, data) {
+			await apiClient.removeLabelFromCard(data)
+			commit('updateCardProperty', { property: 'labels', card: data.card })
 		},
-		cardUndoDelete({ commit }, card) {
-			apiClient.updateCard(card)
-				.then((card) => {
-					commit('addCard', card)
-				})
+		async cardUndoDelete({ commit }, card) {
+			const updatedCard = await apiClient.updateCard(card)
+			commit('addCard', updatedCard)
 		},
-		updateCardDesc({ commit }, card) {
-			apiClient.updateCard(card)
-				.then((updatedCard) => {
-					commit('updateCardDesc', updatedCard)
-				})
+		async updateCardDesc({ commit }, card) {
+			const updatedCard = await apiClient.updateCard(card)
+			commit('updateCardProperty', { property: 'description', card: updatedCard })
 		},
-		updateCardDue({ commit }, card) {
-			apiClient.updateCard(card)
-				.then((card) => {
-					commit('updateCardDue', card)
-				})
+		async updateCardDue({ commit }, card) {
+			const updatedCard = apiClient.updateCard(card)
+			commit('updateCardProperty', { property: 'duedate', card: updatedCard })
 		},
 	},
 }