stack add and remove

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

src/components/Controls.vue

@@ -40,9 +40,11 @@
 			<div id="stack-add">
 				<form>
 					<label for="new-stack-input-main" class="hidden-visually">Add a new stack</label>
-					<input id="new-stack-input-main" type="text" class="no-close"
+					<input id="new-stack-input-main" v-model="newStackTitle" type="text"
+						class="no-close"
 						placeholder="Add a new stack">
-					<input class="icon-confirm" type="button" title="Submit">
+					<input class="icon-confirm" type="button" title="Submit"
+						@click="clickAddNewStack()">
 				</form>
 			</div>
 			<div class="board-action-buttons">
@@ -68,6 +70,12 @@ export default {
 			default: null
 		}
 	},
+	data() {
+		return {
+			newStackTitle: '',
+			stack: ''
+		}
+	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode
@@ -82,6 +90,12 @@ export default {
 		},
 		toggleCompactMode() {
 			this.$store.dispatch('toggleCompactMode')
+		},
+		clickAddNewStack() {
+			this.stack = { title: this.newStackTitle }
+			this.$store.dispatch('createStack', this.stack)
+			this.newStackTitle = ''
+			this.stack = null
 		}
 	}
 }

src/components/board/Board.vue

@@ -26,7 +26,10 @@
 		<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 }}</h3>
+					<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" />
@@ -103,7 +106,6 @@ export default {
 					this.$store.dispatch('setCurrentBoard', board)
 					this.$store.dispatch('loadStacks', board)
 					this.loading = false
-					console.log(board)
 					this.$store.state.labels = board.labels
 				})
 		},
@@ -125,6 +127,9 @@ export default {
 				order: this.stacksByBoard().length
 			}
 			this.$store.dispatch('createStack', newStack)
+		},
+		deleteStack(stack) {
+			this.$store.dispatch('deleteStack', stack)
 		}
 	}
 }

src/components/board/DeletedTabSidebard.vue

@@ -1,6 +1,26 @@
 <template>
 	<div>
-		deleted
+		<h3>{{ t('deck', 'Deleted stacks') }}</h3>
+		<ul>
+			<!-- <li ng-repeat="deletedStack in stackservice.deleted">
+				<span class="icon icon-deck"></span>
+				<span class="title">{{deletedStack.title}}</span>
+				<span class="live-relative-timestamp" data-timestamp="{{ deletedStack.deletedAt*1000  }}">{{deletedStack.deletedAt | relativeDateFilter }}</span>
+				<a ng-click="stackUndoDelete(deletedStack)"><span class="icon icon-history"></span></a>
+			</li> -->
+		</ul>
+
+		<h3>{{ t('deck', 'Deleted cards') }}</h3>
+		<ul>
+			<!-- <li ng-repeat="deletedCard in cardservice.deleted">
+				<span class="icon icon-deck"></span>
+				<span class="title">{{deletedCard.title}} ({{stackservice.tryAllThenDeleted(deletedCard.stackId).title}})</span>
+				<span class="live-relative-timestamp" data-timestamp="{{ deletedCard.deletedAt*1000  }}">{{deletedCard.deletedAt | relativeDateFilter }}</span>
+				<a ng-click="cardOrCardAndStackUndoDelete(deletedCard)">
+					<span class="icon icon-history"></span>
+				</a>
+			</li> -->
+		</ul>
 	</div>
 </template>
 
@@ -24,3 +44,21 @@ export default {
 
 }
 </script>
+
+<style scoped lang="scss">
+	ul {
+		display: flex;
+		flex-direction: row;
+
+		* {
+			flex-basis: 44px;
+		}
+
+		.title {
+			flex-grow: 2;
+		}
+		.live-relative-timestamp {
+			flex-grow: 1;
+		}
+	}
+</style>

src/components/board/Stack.vue

@@ -0,0 +1,167 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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/>.
+  -
+  -->
+
+<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 />
+		</div>
+	</div>
+</template>
+
+<script>
+
+import { Container, Draggable } from 'vue-smooth-dnd'
+import { mapState } from 'vuex'
+import Controls from '../Controls'
+import CardItem from '../cards/CardItem'
+
+export default {
+	name: 'Board',
+	components: {
+		CardItem,
+		Controls,
+		Container,
+		Draggable
+	},
+	inject: [
+		'boardApi'
+	],
+	props: {
+		id: {
+			type: Number,
+			default: null
+		}
+	},
+	data: function() {
+		return {
+			loading: true
+		}
+	},
+	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 }) {
+
+		},
+		payloadForCard(stackId) {
+			return index => {
+				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)
+		}
+	}
+}
+</script>
+
+<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;
+		padding-top: 0;
+	}
+
+	.smooth-dnd-container.vertical {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
+		overflow: initial;
+	}
+
+	.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
+		height: auto;
+	}
+
+</style>

src/components/board/TagsTabSidebard.vue

@@ -117,7 +117,7 @@ export default {
 			this.addLabel = true
 		},
 		clickAddLabel() {
-			this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)
+			this.$store.dispatch('createStack', this.addLabelObj)
 			this.addLabel = false
 			this.addLabelObj = null
 		}

src/components/cards/CardItem.vue

@@ -28,7 +28,7 @@
 			<transition name="fade" mode="out-in">
 				<form v-if="editing">
 					<input :value="card.title" type="text" autofocus>
-					<input type="button" class="icon-confirm" @click.stop="editing=false">
+					<input type="button" class="icon-confirm" @click="clickTitleEditSave">
 				</form>
 				<action v-if="!editing" :actions="visibilityPopover" @click.stop="" />
 			</transition>
@@ -121,6 +121,10 @@ export default {
 		},
 		startEditing() {
 			this.editing = true
+		},
+		clickTitleEditSave() {
+
+			this.editing = false
 		}
 	}
 }

src/services/StackApi.js

@@ -78,4 +78,34 @@ export class StackApi {
 			})
 	}
 
+	deleteStack(stackId) {
+		return axios.delete(this.url(`/stacks/${stackId}`))
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+	updateStack(stack) {
+		return axios.put(this.url(`/stacks/${stack.id}`), { stack })
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 }

src/store/main.js

@@ -169,10 +169,8 @@ export default new Vuex.Store({
 		},
 
 		// acl mutators
-		addAclToCurrentBoard(state, acl) {
-			console.log(state.currentBoard)
-			let id = acl.participant.uid
-			state.currentBoard.acl[id] = acl
+		addAclToCurrentBoard(state, createdAcl) {
+			state.currentBoard.acl[createdAcl.id] = createdAcl
 			console.log(state.currentBoard)
 		},
 		updateAclFromCurrentBoard(state, acl) {
@@ -293,11 +291,11 @@ export default new Vuex.Store({
 		},
 
 		// acl actions
-		addAclToCurrentBoard({ commit }, acl) {
-			acl.boardId = this.state.currentBoard.id
-			apiClient.addAcl(acl)
-				.then((acl) => {
-					commit('addAclToCurrentBoard', acl)
+		addAclToCurrentBoard({ commit }, newAcl) {
+			newAcl.boardId = this.state.currentBoard.id
+			apiClient.addAcl(newAcl)
+				.then((returnAcl) => {
+					commit('addAclToCurrentBoard', returnAcl)
 				})
 		},
 		updateAclFromCurrentBoard({ commit }, acl) {

src/store/stack.js

@@ -51,6 +51,16 @@ export default {
 			for (let i = 0; i < newOrder.length; i++) {
 				newOrder[i].order = parseInt(i)
 			}
+		},
+		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) {
+
 		}
 	},
 	actions: {
@@ -77,9 +87,22 @@ export default {
 				})
 		},
 		createStack({ commit }, stack) {
+			stack.boardId = this.state.currentBoard.id
 			apiClient.createStack(stack)
+				.then((createdStack) => {
+					commit('addStack', createdStack)
+				})
+		},
+		deleteStack({ commit }, stack) {
+			apiClient.deleteStack(stack.id)
 				.then((stack) => {
-					commit('addStack', stack)
+					commit('deleteStack', stack)
+				})
+		},
+		updateStack({ commit }, stack) {
+			apiClient.updateStack(stack)
+				.then((stack) => {
+					commit('updateStack', stack)
 				})
 		}
 	}