Add add board functionality

src/components/DeckAppNav.vue

@@ -29,6 +29,7 @@
 import { AppNavigation } from 'nextcloud-vue'
 import { translate as t } from 'nextcloud-server/dist/l10n'
 import { boardToMenuItem } from './../helpers/boardToMenuItem'
+import store from './../store/main'
 
 const defaultCategories = [
 	{
@@ -66,7 +67,13 @@ const addButton = {
 	text: t('deck', 'Create new board'),
 	edit: {
 		text: t('deck', 'new board'),
-		action: () => {
+		action: (submitEvent) => {
+			const title = submitEvent.currentTarget.childNodes[0].value
+			store.dispatch('createBoard', {
+				title: title,
+				color: '#000000'
+			})
+			addButton.classes = []
 		},
 		reset: () => {
 		}

src/services/BoardApi.js

@@ -32,6 +32,29 @@ export class BoardApi {
 		return OC.generateUrl(url)
 	}
 
+	/**
+	 * Creates a new board.
+	 *
+	 * @param {{String title, String color}} boardData The board data with title and color in hex format, e.g. "#ff0000"
+	 * @return Promise
+	 */
+	createBoard(boardData) {
+		boardData.color = boardData.color.substr(1)
+
+		return axios.post(this.url('/boards'), boardData)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 	loadBoards() {
 		return axios.get(this.url('/boards'))
 			.then(

src/store/main.js

@@ -23,9 +23,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { boardToMenuItem } from './../helpers/boardToMenuItem'
+import { BoardApi } from './../services/BoardApi'
 
 Vue.use(Vuex)
 
+const apiClient = new BoardApi()
 const debug = process.env.NODE_ENV !== 'production'
 
 export const BOARD_FILTERS = {
@@ -59,6 +61,9 @@ export default new Vuex.Store({
 		}
 	},
 	mutations: {
+		addBoard(state, board) {
+			state.boards.push(board)
+		},
 		toggleNav(state) {
 			state.navShown = !state.navShown
 		},
@@ -76,6 +81,12 @@ export default new Vuex.Store({
 		}
 	},
 	actions: {
+		createBoard({ commit }, boardData) {
+			apiClient.createBoard(boardData)
+				.then((board) => {
+					commit('addBoard', board)
+				})
+		},
 		setBoards({ commit }, boards) {
 			commit('setBoards', boards)
 		},