Add archive board

src/components/DeckAppNav.vue

@@ -71,7 +71,8 @@ const addButton = {
 			const title = submitEvent.currentTarget.childNodes[0].value
 			store.dispatch('createBoard', {
 				title: title,
-				color: '#000000'
+				hashedColor: '#000000',
+				color: '000000'
 			})
 			addButton.classes = []
 		},
@@ -99,7 +100,7 @@ export default {
 			return {
 				loading: this.loading,
 				items: defaultCategories
-					.concat(this.$store.getters.boards.map(boardToMenuItem))
+					.concat(this.$store.getters.noneArchivedBoards.map(boardToMenuItem))
 					.concat([this.addButton])
 			}
 		}

src/helpers/boardToMenuItem.js

@@ -20,32 +20,37 @@
  *
  */
 
-const boardActions = [
-	{
-		action: () => {
+import store from './../store/main'
+
+function boardActions(board) {
+	return [
+		{
+			action: () => {
+			},
+			icon: 'icon-edit',
+			text: t('deck', 'Edit board')
 		},
-		icon: 'icon-edit',
-		text: t('deck', 'Edit board')
-	},
-	{
-		action: () => {
+		{
+			action: function() {
+				store.dispatch('archiveBoard', board)
+			},
+			icon: 'icon-archive',
+			text: t('deck', 'Archive board')
 		},
-		icon: 'icon-archive',
-		text: t('deck', 'Archive board')
-	},
-	{
-		action: () => {
+		{
+			action: () => {
+			},
+			icon: 'icon-delete',
+			text: t('deck', 'Delete board')
 		},
-		icon: 'icon-delete',
-		text: t('deck', 'Delete board')
-	},
-	{
-		action: () => {
-		},
-		icon: 'icon-settings',
-		text: t('deck', 'Board details')
-	}
-]
+		{
+			action: () => {
+			},
+			icon: 'icon-settings',
+			text: t('deck', 'Board details')
+		}
+	]
+}
 
 /**
  * Maps an API board to a menu item.
@@ -64,7 +69,8 @@ export const boardToMenuItem = board => {
 			params: { id: board.id }
 		},
 		utils: {
-			actions: boardActions
-		}
+			actions: boardActions(board)
+		},
+		board: board
 	}
 }

src/main.js

@@ -28,6 +28,14 @@ import { translate, translatePlural } from 'nextcloud-server/dist/l10n'
 import { generateFilePath } from 'nextcloud-server/dist/router'
 import VTooltip from 'v-tooltip'
 
+/**
+ * Board model
+ *
+ * @typedef {Object} Board
+ * @property {String} title
+ * @property {boolean} archived
+ */
+
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken)
 // eslint-disable-next-line

src/services/BoardApi.js

@@ -32,15 +32,36 @@ export class BoardApi {
 		return OC.generateUrl(url)
 	}
 
+	/**
+	 * Updates a board.
+	 *
+	 * @param {Board} board
+	 * @return Promise
+	 */
+	updateBoard(board) {
+		return axios.put(this.url(`/boards/${board.id}`), board)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 	/**
 	 * Creates a new board.
 	 *
-	 * @param {{String title, String color}} boardData The board data with title and color in hex format, e.g. "#ff0000"
+	 * @param {{String title, String color, String hashedColor}} boardData The board data to send.
+	 * 															 hashedColor is the color in hex format, e.g. "#ff0000"
+	 * 															 color is the same color without the "#"
 	 * @return Promise
 	 */
 	createBoard(boardData) {
-		boardData.color = boardData.color.substr(1)
-
 		return axios.post(this.url('/boards'), boardData)
 			.then(
 				(response) => {

src/store/main.js

@@ -50,10 +50,15 @@ export default new Vuex.Store({
 		boards: state => {
 			return state.boards
 		},
+		noneArchivedBoards: state => {
+			return state.boards.filter(board => {
+				return board.archived === false
+			})
+		},
 		filteredBoards: state => {
 			// filters the boards depending on the active filter
 			const boards = state.boards.filter(board => {
-				return state.boardFilter === BOARD_FILTERS.ALL
+				return (state.boardFilter === BOARD_FILTERS.ALL && board.archived === false)
 					|| (state.boardFilter === BOARD_FILTERS.ARCHIVED && board.archived === true)
 					|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
 			})
@@ -62,7 +67,15 @@ export default new Vuex.Store({
 	},
 	mutations: {
 		addBoard(state, board) {
-			state.boards.push(board)
+			const indexExisting = state.boards.findIndex((b) => {
+				return board.id === b.id
+			})
+
+			if (indexExisting > -1) {
+				Vue.set(state.boards, indexExisting, board)
+			} else {
+				state.boards.push(board)
+			}
 		},
 		toggleNav(state) {
 			state.navShown = !state.navShown
@@ -81,6 +94,19 @@ export default new Vuex.Store({
 		}
 	},
 	actions: {
+		/**
+		 * @param commit
+		 * @param state
+		 * @param {Board} board
+		 */
+		archiveBoard({ commit }, board) {
+			const boardCopy = JSON.parse(JSON.stringify(board))
+			boardCopy.archived = true
+			apiClient.updateBoard(boardCopy)
+				.then((board) => {
+					commit('addBoard', board)
+				})
+		},
 		createBoard({ commit }, boardData) {
 			apiClient.createBoard(boardData)
 				.then((board) => {