Merge branch 'master' into enh/card-search

src/store/card.js

@@ -60,7 +60,16 @@ export default {
 		updateCard(state, card) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
-				Vue.set(state.cards, existingIndex, card)
+				Vue.set(state.cards, existingIndex, Object.assign({}, state.cards[existingIndex], card))
+			}
+		},
+		updateCardsReorder(state, cards) {
+			for (const newCard of cards) {
+				const existingIndex = state.cards.findIndex(_card => _card.id === newCard.id)
+				if (existingIndex !== -1) {
+					const newCardObject = Object.assign({}, state.cards[existingIndex], { id: newCard.id, order: newCard.order, stackId: newCard.stackId })
+					Vue.set(state.cards, existingIndex, newCardObject)
+				}
 			}
 		},
 		updateTitle(state, card) {
@@ -123,17 +132,24 @@ export default {
 					commit('deleteCard', updatedCard)
 				})
 		},
-		reorderCard({ commit }, card) {
-			commit('updateCard', card)
-			// TODO iterate over cards in stacks and increase order state from cards >= card.order
-			// the current flickering issue is caused by two cards with the same order that will get the corret setting once
-			// the reordering has been persisted
-			apiClient.reorderCard(card)
-				.then((cards) => {
-					Object.values(cards).forEach((newCard) =>
-						commit('updateCard', newCard)
-					)
-				})
+		async reorderCard({ commit, getters }, card) {
+			let i = 0
+			for (const c of getters.cardsByStack(card.stackId)) {
+				if (c.id === card.id) {
+					await commit('updateCardsReorder', [card])
+				}
+				if (i === card.order) {
+					i++
+				}
+				if (c.id !== card.id) {
+					await commit('updateCardsReorder', [{ ...c, order: i++ }])
+				}
+			}
+			await commit('updateCardsReorder', [card])
+
+			const cards = await apiClient.reorderCard(card)
+			await commit('updateCardsReorder', Object.values(cards))
+
 		},
 		deleteCard({ commit }, card) {
 			apiClient.deleteCard(card.id)

src/store/comment.js

@@ -21,73 +21,104 @@
  */
 
 import { CommentApi } from '../services/CommentApi'
-import xmlToTagList from '../helpers/xml'
 import Vue from 'vue'
 
 const apiClient = new CommentApi()
 
+const COMMENT_FETCH_LIMIT = 10
+
 export default {
 	state: {
 		comments: {},
 	},
+	getters: {
+		getCommentsForCard: (state) => (id) => {
+			if (state.comments[id]) {
+				return [...state.comments[id].comments].sort((a, b) => b.id - a.id)
+			}
+			return []
+		},
+		hasMoreComments: (state) => (cardId) => {
+			return state.comments[cardId] && state.comments[cardId].hasMore
+		},
+	},
 	mutations: {
-		addComments(state, commentObj) {
-			if (state.comments[commentObj.cardId] === undefined) {
-				Vue.set(state.comments, commentObj.cardId, commentObj.comments)
+		endReached(state, { cardId }) {
+			if (state.comments[cardId]) {
+				state.comments[cardId].hasMore = false
+			}
+		},
+		addComments(state, { comments, cardId }) {
+			if (state.comments[cardId] === undefined) {
+				Vue.set(state.comments, cardId, {
+					hasMore: comments.length > 0,
+					comments,
+				})
 			} else {
-				// FIXME append comments once incremental fetching is implemented
-				// state.comments[commentObj.cardId].push(...commentObj.comments)
-				Vue.set(state.comments, commentObj.cardId, commentObj.comments)
+				const newComments = comments.filter((comment) => {
+					return state.comments[cardId].comments.findIndex((item) => item.id === comment.id) === -1
+				})
+				state.comments[cardId].comments.push(...newComments)
 			}
 		},
-		createComment(state, newComment) {
-			if (state.comments[newComment.cardId] === undefined) {
-				state.comments[newComment.cardId] = []
-			}
-			state.comments[newComment.cardId].push(newComment)
-		},
-		updateComment(state, comment) {
-			const existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
+		updateComment(state, { cardId, comment }) {
+			const existingIndex = state.comments[cardId].comments.findIndex(c => c.id === comment.id)
 			if (existingIndex !== -1) {
-				state.comments[comment.cardId][existingIndex].message = comment.comment
+				Object.assign(state.comments[cardId].comments[existingIndex], comment)
 			}
 		},
 		deleteComment(state, comment) {
-			const existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
+			const existingIndex = state.comments[comment.cardId].comments.findIndex(_comment => _comment.id === comment.id)
 			if (existingIndex !== -1) {
-				state.comments[comment.cardId].splice(existingIndex, 1)
+				state.comments[comment.cardId].comments.splice(existingIndex, 1)
 			}
 		},
+		markCommentsAsRead(state, cardId) {
+			state.comments[cardId].comments.forEach(_comment => {
+				Vue.set(_comment, 'isUnread', false)
+			})
+		},
 	},
 	actions: {
-		listComments({ commit }, card) {
-			apiClient.listComments(card)
-				.then((comments) => {
-					const commentsJson = xmlToTagList(comments)
-					const returnObj = {
-						cardId: card.id,
-						comments: commentsJson,
-					}
-					commit('addComments', returnObj)
-				})
+		async fetchComments({ commit }, { cardId, offset }) {
+			const comments = await apiClient.loadComments({
+				cardId,
+				limit: COMMENT_FETCH_LIMIT,
+				offset: offset || 0,
+			})
+
+			commit('addComments', {
+				cardId,
+				comments,
+			})
+
+			if (comments.length < COMMENT_FETCH_LIMIT) {
+				commit('endReached', { cardId })
+
+			}
 		},
-		createComment({ commit }, newComment) {
-			apiClient.createComment(newComment)
-				.then((newComment) => {
-					commit('createComment', newComment)
-				})
+		async fetchMore({ commit, dispatch, getters }, { cardId }) {
+			// fetch newer comments first
+			await dispatch('fetchComments', { cardId })
+			await dispatch('fetchComments', { cardId, offset: getters.getCommentsForCard(cardId).length })
+
 		},
-		deleteComment({ commit }, data) {
-			apiClient.deleteComment(data)
-				.then((retVal) => {
-					commit('deleteComment', data)
-				})
+		async createComment({ commit, dispatch }, { cardId, comment }) {
+			await apiClient.createComment({ cardId, comment })
+			await dispatch('fetchComments', { cardId })
 		},
-		updateComment({ commit }, data) {
-			apiClient.updateComment(data)
-				.then((retVal) => {
-					commit('updateComment', data)
-				})
+		async deleteComment({ commit }, data) {
+			await apiClient.deleteComment(data)
+			commit('deleteComment', data)
+		},
+		async updateComment({ commit }, data) {
+			await apiClient.updateComment(data)
+			const commentData = await apiClient.fetchComment(data)
+			await commit('updateComment', { cardId: data.cardId, comment: commentData[0] })
+		},
+		async markCommentsAsRead({ commit }, cardId) {
+			await apiClient.markCommentsAsRead(cardId)
+			await commit('markCommentsAsRead', cardId)
 		},
 	},
 }

src/store/main.js

@@ -117,12 +117,9 @@ export default new Vuex.Store({
 		toggleShowArchived(state) {
 			state.showArchived = !state.showArchived
 		},
-		/**
+		/*
 		 * Adds or replaces a board in the store.
 		 * Matches a board by it's id.
-		 *
-		 * @param state
-		 * @param board
 		 */
 		addBoard(state, board) {
 			const indexExisting = state.boards.findIndex((b) => {
@@ -148,11 +145,8 @@ export default new Vuex.Store({
 			}
 		},
 
-		/**
+		/*
 		 * Removes the board from the store.
-		 *
-		 * @param state
-		 * @param board
 		 */
 		removeBoard(state, board) {
 			state.boards = state.boards.filter((b) => {
@@ -214,7 +208,6 @@ export default new Vuex.Store({
 			}
 		},
 		updateLabelFromCurrentBoard(state, newLabel) {
-
 			const labelToUpdate = state.currentBoard.labels.find((l) => {
 				return newLabel.id === l.id
 			})
@@ -271,6 +264,7 @@ export default new Vuex.Store({
 		toggleShowArchived({ commit }) {
 			commit('toggleShowArchived')
 		},
+
 		/**
 		 * @param commit
 		 * @param state