From ce41400a228da5863321fe2616a461b60c5b230d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Tue, 12 May 2020 09:02:37 +0200
Subject: [PATCH] add stack button on empty board
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 src/components/board/Board.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index ca2896193..b6feec977 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -23,6 +23,26 @@
 <template>
 	<div class="board-wrapper">
 		<Controls :board="board" />
+
+		<EmptyContent v-if="stacksByBoard.length === 0" icon="icon-pause">
+			No lists, add one
+			<template #desc>
+				<form @submit.prevent="addNewStack()">
+					<input id="new-stack-input-main"
+						v-model="newStackTitle"
+						v-focus
+						type="text"
+						class="no-close"
+						:placeholder="t('deck', 'List name')"
+						required>
+					<input v-tooltip="t('deck', 'Add new list')"
+						class="icon-confirm"
+						type="submit"
+						value="">
+				</form>
+			</template>
+		</EmptyContent>
+
 		<transition name="fade" mode="out-in">
 			<div v-if="loading" key="loading" class="emptycontent">
 				<div class="icon icon-loading" />
@@ -54,6 +74,7 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls'
 import Stack from './Stack'
+import { EmptyContent } from '@nextcloud/vue'
 
 export default {
 	name: 'Board',
@@ -62,6 +83,7 @@ export default {
 		Container,
 		Draggable,
 		Stack,
+		EmptyContent,
 	},
 	inject: [
 		'boardApi',
@@ -75,6 +97,7 @@ export default {
 	data() {
 		return {
 			loading: true,
+			newStackTitle: '',
 		}
 	},
 	computed: {
@@ -117,11 +140,10 @@ export default {
 			this.$store.dispatch('orderStack', { stack: this.stacksByBoard[removedIndex], removedIndex, addedIndex })
 		},
 
-		createStack() {
+		addNewStack() {
 			const newStack = {
-				title: 'FooBar',
+				title: this.newStackTitle,
 				boardId: this.id,
-				order: this.stacksByBoard().length,
 			}
 			this.$store.dispatch('createStack', newStack)
 		},