some overall changes

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/components/board/Board.vue

@@ -26,7 +26,8 @@
 		<div v-if="board" class="board">
 			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
 				<draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
-					<h3>{{ stack.title }}
+					<stack :stack="stack" />
+					<!-- <h3>{{ stack.title }}
 						<button v-tooltip="t('deck', 'Delete')" class="icon-delete"
 							@click="deleteStack(stack)" />
 					</h3>
@@ -41,7 +42,7 @@
 							<span class="hidden-visually">Add card</span>
 						</div>
 					</div>
-
+ -->
 				</draggable>
 			</container>
 		</div>
@@ -58,15 +59,17 @@
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState } from 'vuex'
 import Controls from '../Controls'
-import CardItem from '../cards/CardItem'
+/* import CardItem from '../cards/CardItem' */
+import Stack from './Stack'
 
 export default {
 	name: 'Board',
 	components: {
-		CardItem,
+		/* CardItem, */
 		Controls,
 		Container,
-		Draggable
+		Draggable,
+		Stack
 	},
 	inject: [
 		'boardApi'
@@ -88,10 +91,10 @@ export default {
 		}),
 		stacksByBoard() {
 			return this.$store.getters.stacksByBoard(this.board.id)
-		},
-		cardsByStack() {
-			return (id) => this.$store.getters.cardsByStack(id)
 		}
+		/* cardsByStack() {
+			return (id) => this.$store.getters.cardsByStack(id)
+		} */
 	},
 	watch: {
 		'$route': 'fetchData'
@@ -112,14 +115,14 @@ export default {
 		onDropStack({ removedIndex, addedIndex }) {
 			this.$store.dispatch('orderStack', { stack: this.stacksByBoard[removedIndex], removedIndex, addedIndex })
 		},
-		onDropCard({ removedIndex, addedIndex }) {
+		/* onDropCard({ removedIndex, addedIndex }) {
 
-		},
-		payloadForCard(stackId) {
+		}, */
+		/* payloadForCard(stackId) {
 			return index => {
 				return this.cardsByStack(stackId)[index]
 			}
-		},
+		}, */
 		createStack() {
 			let newStack = {
 				title: 'FooBar',
@@ -127,10 +130,10 @@ export default {
 				order: this.stacksByBoard().length
 			}
 			this.$store.dispatch('createStack', newStack)
-		},
-		deleteStack(stack) {
-			this.$store.dispatch('deleteStack', stack)
 		}
+		/* deleteStack(stack) {
+			this.$store.dispatch('deleteStack', stack)
+		} */
 	}
 }
 </script>
@@ -151,6 +154,7 @@ export default {
 		padding-top: 0;
 	}
 
+	/*
 	.smooth-dnd-container.vertical {
 		display: flex;
 		flex-direction: column;
@@ -162,6 +166,6 @@ export default {
 
 	.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
 		height: auto;
-	}
+	} */
 
 </style>

src/components/board/Stack.vue

@@ -22,96 +22,76 @@
 
 <template>
 	<div>
-		<Controls :board="board" />
-		<div v-if="board" class="board">
-			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
-				<draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
-					<h3>{{ stack.title }}
-						<button v-tooltip="t('deck', 'Delete')" class="icon-delete"
-							@click="deleteStack(stack)" />
-					</h3>
-					<container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
-						<draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
-							<card-item v-if="card" :id="card.id" />
-						</draggable>
-					</container>
-					<div class="card create">
-						<div title="Add card">
-							<i class="icon icon-add" />
-							<span class="hidden-visually">Add card</span>
-						</div>
-					</div>
 
-				</draggable>
-			</container>
-		</div>
-		<div v-else class="emptycontent">
-			<div class="icon icon-deck" />
-			<h2>{{ t('deck', 'Board not found') }}</h2>
-			<p />
+		<h3 v-if="!editing" @click="startEditing(stack)">{{ stack.title }}
+			<button v-tooltip="t('deck', 'Delete')" class="icon-delete"
+				@click="deleteStack(stack)" />
+		</h3>
+
+		<transition name="fade" mode="out-in">
+			<div id="card-add">
+				<form v-if="editing">
+					<input v-model="copiedStack.title" type="text" autofocus>
+					<input type="button" class="icon-confirm" @click="finishedEdit(stack)">
+				</form>
+			</div>
+		</transition>
+
+		<container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
+			<draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
+				<card-item v-if="card" :id="card.id" />
+			</draggable>
+		</container>
+
+		<div id="card-add">
+			<form>
+				<label for="new-stack-input-main" class="hidden-visually">Add a new card</label>
+				<input id="new-stack-input-main" v-model="newCardTitle" type="text"
+					class="no-close"
+					placeholder="Add a new card">
+				<input class="icon-confirm" type="button" title="Submit"
+					@click="clickAddCard()">
+			</form>
 		</div>
+
 	</div>
 </template>
 
 <script>
 
 import { Container, Draggable } from 'vue-smooth-dnd'
-import { mapState } from 'vuex'
-import Controls from '../Controls'
 import CardItem from '../cards/CardItem'
+import { mapState } from 'vuex'
 
 export default {
-	name: 'Board',
+	name: 'Stack',
 	components: {
 		CardItem,
-		Controls,
 		Container,
 		Draggable
 	},
-	inject: [
-		'boardApi'
-	],
+
 	props: {
-		id: {
-			type: Number,
-			default: null
+		stack: {
+			type: Object,
+			default: undefined
 		}
 	},
-	data: function() {
+	data() {
 		return {
-			loading: true
+			editing: false,
+			copiedStack: '',
+			newCardTitle: ''
 		}
 	},
 	computed: {
-		...mapState({
-			board: state => state.currentBoard
-		}),
-		stacksByBoard() {
-			return this.$store.getters.stacksByBoard(this.board.id)
-		},
 		cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
 		}
 	},
-	watch: {
-		'$route': 'fetchData'
-	},
-	created() {
-		this.fetchData()
-	},
+
 	methods: {
-		fetchData() {
-			this.boardApi.loadById(this.id)
-				.then((board) => {
-					this.$store.dispatch('setCurrentBoard', board)
-					this.$store.dispatch('loadStacks', board)
-					this.loading = false
-					this.$store.state.labels = board.labels
-				})
-		},
-		onDropStack({ removedIndex, addedIndex }) {
-			this.$store.dispatch('orderStack', { stack: this.stacksByBoard[removedIndex], removedIndex, addedIndex })
-		},
+
 		onDropCard({ removedIndex, addedIndex }) {
 
 		},
@@ -120,16 +100,26 @@ export default {
 				return this.cardsByStack(stackId)[index]
 			}
 		},
-		createStack() {
-			let newStack = {
-				title: 'FooBar',
-				boardId: this.id,
-				order: this.stacksByBoard().length
-			}
-			this.$store.dispatch('createStack', newStack)
-		},
 		deleteStack(stack) {
 			this.$store.dispatch('deleteStack', stack)
+		},
+		startEditing(stack) {
+			this.copiedStack = Object.assign({}, stack)
+			this.editing = true
+		},
+		finishedEdit(stack) {
+			if (this.copiedStack.title !== stack.title) {
+				this.$store.dispatch('updateStack', this.copiedStack)
+			}
+			this.editing = false
+		},
+		clickAddCard() {
+			let newCard = {
+				title: this.newCardTitle,
+				stackId: this.stack.id,
+				boardId: this.stack.boardId
+			}
+			this.$store.dispatch('addCard', newCard)
 		}
 	}
 }
@@ -137,14 +127,9 @@ export default {
 
 <style lang="scss" scoped>
 
-	$board-spacing: 15px;
 	$stack-spacing: 10px;
 	$stack-width: 300px;
 
-	.board {
-		margin-left: $board-spacing;
-	}
-
 	.stack {
 		width: $stack-width;
 		padding: $stack-spacing;
@@ -164,4 +149,8 @@ export default {
 		height: auto;
 	}
 
+	#card-add form {
+			display: flex;
+		}
+
 </style>

src/components/card/CardSidebar.vue

@@ -30,12 +30,12 @@
 		<AppSidebarTab name="Description" icon="icon-description">
 			this is the description tab
 		</AppSidebarTab>
-		<AppSidebarTab name="Timeline" icon="icon-activity">
-			this is the activity tab
-		</AppSidebarTab>
 		<AppSidebarTab name="Attachments" icon="icon-files-dark">
 			this is the files tab
 		</AppSidebarTab>
+		<AppSidebarTab name="Timeline" icon="icon-activity">
+			this is the activity tab
+		</AppSidebarTab>
 	</app-sidebar>
 </template>
 

src/components/cards/CardItem.vue

@@ -96,11 +96,21 @@ export default {
 		},
 		visibilityPopover() {
 			return [
+				{
+					action: () => {},
+					icon: 'icon-archive-dark',
+					text: t('deck', 'Assign to me')
+				},
 				{
 					action: () => {},
 					icon: 'icon-archive-dark',
 					text: t('deck', 'Archive card')
 				},
+				{
+					action: () => {},
+					icon: 'icon-delete-dark',
+					text: t('deck', 'Delete card')
+				},
 				{
 					action: () => {},
 					icon: 'icon-settings-dark',

src/services/CardApi.js

@@ -0,0 +1,47 @@
+/*
+ * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @author Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import axios from 'nextcloud-axios'
+
+export class CardApi {
+
+	url(url) {
+		url = `/apps/deck${url}`
+		return OC.generateUrl(url)
+	}
+
+	addCard(card) {
+		return axios.post(this.url(`/cards`), card)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+}

src/store/card.js

@@ -21,6 +21,9 @@
  */
 
 import Vue from 'vue'
+import { CardApi } from './../services/CardApi'
+
+const apiClient = new CardApi()
 
 export default {
 	state: {
@@ -36,15 +39,22 @@ export default {
 	},
 	mutations: {
 		addCard(state, card) {
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			state.cards.push(card)
+			/* let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
 				let existingCard = state.cards.find(_card => _card.id === card.id)
 				Vue.set(state.cards, existingIndex, Object.assign({}, existingCard, card))
 			} else {
 				state.cards.push(card)
-			}
+			} */
 		}
 	},
 	actions: {
+		addCard({ commit }, card) {
+			apiClient.addCard(card)
+				.then((createdCard) => {
+					commit('addCard', createdCard)
+				})
+		}
 	}
 }

src/store/stack.js

@@ -54,13 +54,15 @@ export default {
 		},
 		deleteStack(state, stack) {
 			let existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
-			console.log(existingIndex)
 			if (existingIndex !== -1) {
 				state.stacks.splice(existingIndex, 1)
 			}
 		},
 		updateStack(state, stack) {
-
+			let existingIndex = state.stacks.findIndex(_stack => _stack.id === stack.id)
+			if (existingIndex !== -1) {
+				state.stacks[existingIndex] = stack
+			}
 		}
 	},
 	actions: {