started listview

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

package-lock.json

@@ -7505,7 +7505,7 @@
 			"dependencies": {
 				"minimist": {
 					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+					"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
 					"integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
 					"dev": true
 				}
@@ -10776,7 +10776,7 @@
 		},
 		"minimist": {
 			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+			"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
 			"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
 		},
 		"minimist-options": {
@@ -10836,7 +10836,7 @@
 			"dependencies": {
 				"minimist": {
 					"version": "0.0.8",
-					"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+					"resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
 					"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
 				}
 			}
@@ -11410,7 +11410,7 @@
 			"dependencies": {
 				"minimist": {
 					"version": "0.0.10",
-					"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+					"resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
 					"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
 					"dev": true
 				},

src/components/Controls.vue

@@ -53,6 +53,8 @@
 					@click="toggleShowArchived" />
 				<button :class="[(compactMode ? 'icon-toggle-compact-collapsed' : 'icon-toggle-compact-expanded')]" title="Toggle compact mode" class="icon"
 					@click="toggleCompactMode" />
+				<button :class="[(listMode ? 'icon-deck' : 'icon-menu')]" title="Toggle view" class="icon"
+					@click="toggleListMode" />
 				<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings-dark"
 					tag="button" />
 			</div>
@@ -81,7 +83,8 @@ export default {
 	},
 	computed: {
 		...mapState({
-			compactMode: state => state.compactMode
+			compactMode: state => state.compactMode,
+			listMode: state => state.listMode
 		}),
 		archivStyle() {
 
@@ -101,6 +104,9 @@ export default {
 		toggleCompactMode() {
 			this.$store.dispatch('toggleCompactMode')
 		},
+		toggleListMode() {
+			this.$store.dispatch('toggleListMode')
+		},
 		toggleShowArchived() {
 			this.$store.dispatch('toggleShowArchived')
 			this.showArchived = !this.showArchived

src/components/board/Board.vue

@@ -24,8 +24,8 @@
 	<div>
 		<Controls :board="board" />
 		<div v-if="board" class="board">
-			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
+			<container lock-axix="y" :orientation="getOrientation" @drop="onDropStack">
-				<draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
+				<draggable v-for="stack in stacksByBoard" :key="stack.id" :class="[(listMode ? 'stack-list' : 'stack')]">
 					<stack :stack="stack" />
 				</draggable>
 			</container>
@@ -70,10 +70,17 @@ export default {
 	computed: {
 		...mapState({
 			board: state => state.currentBoard,
-			showArchived: state => state.showArchived
+			showArchived: state => state.showArchived,
+			listMode: state => state.listMode
 		}),
 		stacksByBoard() {
 			return this.$store.getters.stacksByBoard(this.board.id)
+		},
+		getOrientation() {
+			if (this.listMode) {
+				return 'vertical'
+			}
+			return 'horizontal'
 		}
 		/* cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
@@ -136,14 +143,20 @@ export default {
 
 	$board-spacing: 15px;
 	$stack-spacing: 10px;
-	$stack-width: 300px;
 
 	.board {
 		margin-left: $board-spacing;
 	}
 
 	.stack {
-		width: $stack-width;
+		width: 300px;
+		padding: $stack-spacing;
+		padding-top: 0;
+	}
+
+	.stack-list {
+		width: 80%;
+		margin: auto;
 		padding: $stack-spacing;
 		padding-top: 0;
 	}

src/components/board/Stack.vue

@@ -22,7 +22,7 @@
   -->
 
 <template>
-	<div class="stack">
+	<div :class="[(listMode ? 'stack-list' : 'stack')]">
 		<div class="stack--header">
 			<transition name="fade" mode="out-in">
 				<h3 v-if="!editing" @click="startEditing(stack)">{{ stack.title }}</h3>
@@ -39,7 +39,12 @@
 
 		<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" />
+				<template v-if="listMode">
+					<list-item v-if="card" :id="card.id" />
+				</template>
+				<template v-else>
+					<card-item v-if="card" :id="card.id" />
+				</template>
 			</draggable>
 		</container>
 
@@ -62,7 +67,9 @@
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { Actions } from 'nextcloud-vue/dist/Components/Actions'
 import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
+import { mapState } from 'vuex'
 import CardItem from '../cards/CardItem'
+import ListItem from '../cards/ListItem'
 
 export default {
 	name: 'Stack',
@@ -70,6 +77,7 @@ export default {
 		Actions,
 		ActionButton,
 		CardItem,
+		ListItem,
 		Container,
 		Draggable
 	},
@@ -88,6 +96,9 @@ export default {
 		}
 	},
 	computed: {
+		...mapState({
+			listMode: state => state.listMode
+		}),
 		cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
 		}
@@ -147,10 +158,15 @@ export default {
 <style lang="scss" scoped>
 
 	$stack-spacing: 10px;
-	$stack-width: 300px;
 
 	.stack {
-		width: $stack-width;
+		width: 300px;
+		padding: $stack-spacing;
+		padding-top: 0;
+	}
+
+	.stack-list {
+		width: 80%;
 		padding: $stack-spacing;
 		padding-top: 0;
 	}

src/components/cards/ListItem.vue

@@ -0,0 +1,323 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Gary Kim <gary@garykim.dev>
+  -
+  - @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 :class="{'compact': compactMode, 'current-card': currentCard}" tag="div" class="card"
+		@click.self="openCard">
+		<div class="card-upper">
+			<h3 v-if="showArchived">{{ card.title }}</h3>
+			<h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3>
+			<h3 v-else>&nbsp;</h3>
+			<form v-click-outside="cancelEdit" v-if="editing" @keyup.esc="cancelEdit"
+				@submit.prevent="finishedEdit(card)">
+				<input v-model="copiedCard.title" type="text" autofocus>
+				<input type="button" class="icon-confirm" @click="finishedEdit(card)">
+			</form>
+
+			<Actions v-if="!editing" @click.stop.prevent>
+				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton>
+				<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton>
+				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton>
+				<ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton>
+				<ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton>
+			</Actions>
+
+			<modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
+				<div class="modal__content">
+					<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
+						label="title"
+						@select="loadStacksFromBoard" />
+					<Multiselect :placeholder="t('deck', 'Select a stack')" v-model="selectedStack" :options="stacksFromBoard"
+						label="title" />
+
+					<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">{{ t('deck', 'Move card') }}</button>
+					<button @click="modalShow=false">{{ t('deck', 'Cancel') }}</button>
+
+				</div>
+			</modal>
+		</div>
+		<ul class="labels" @click="openCard">
+			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
+		</ul>
+		<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
+			<card-badges :id="id" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { Modal } from 'nextcloud-vue/dist/Components/Modal'
+import { Actions } from 'nextcloud-vue/dist/Components/Actions'
+import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
+import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
+import ClickOutside from 'vue-click-outside'
+import { mapState } from 'vuex'
+import axios from 'nextcloud-axios'
+
+import CardBadges from './CardBadges'
+import LabelTag from './LabelTag'
+import Color from '../../mixins/color'
+
+export default {
+	name: 'ListItem',
+	components: { Modal, CardBadges, LabelTag, Actions, ActionButton, Multiselect },
+	directives: {
+		ClickOutside
+	},
+	mixins: [Color],
+	props: {
+		id: {
+			type: Number,
+			default: null
+		}
+	},
+	data() {
+		return {
+			menuOpened: false,
+			editing: false,
+			copiedCard: '',
+			modalShow: false,
+			selectedBoard: '',
+			selectedStack: '',
+			stacksFromBoard: []
+		}
+	},
+	computed: {
+		...mapState({
+			compactMode: state => state.compactMode,
+			showArchived: state => state.showArchived,
+			currentBoard: state => state.currentBoard
+		}),
+		card() {
+			return this.$store.getters.cardById(this.id)
+		},
+		boards() {
+			return this.$store.getters.boards.filter(board => {
+				return board.id !== this.currentBoard.id
+			})
+		},
+		menu() {
+			return []
+		},
+		labelStyle() {
+			return (label) => {
+				return {
+					backgroundColor: '#' + label.color,
+					color: this.textColor(label.color)
+				}
+			}
+		},
+		currentCard() {
+			return this.$route.params.cardId === this.id
+		},
+		isBoardAndStackChoosen() {
+			if (this.selectedBoard === '' || this.selectedStack === '') {
+				return false
+			}
+			return true
+		}
+	},
+	methods: {
+		openCard() {
+			this.$router.push({ name: 'card', params: { cardId: this.id } })
+		},
+		togglePopoverMenu() {
+			this.menuOpened = !this.menuOpened
+		},
+		hidePopoverMenu() {
+			this.menuOpened = false
+		},
+		startEditing(card) {
+			this.copiedCard = Object.assign({}, card)
+			this.editing = true
+		},
+		finishedEdit(card) {
+			if (this.copiedCard.title !== card.title) {
+				this.$store.dispatch('updateCard', this.copiedCard)
+			}
+			this.editing = false
+		},
+		cancelEdit() {
+			this.editing = false
+		},
+		deleteCard() {
+			this.$store.dispatch('deleteCard', this.card)
+		},
+		archiveUnarchiveCard() {
+			this.copiedCard = Object.assign({}, this.card)
+			this.copiedCard.archived = !this.copiedCard.archived
+			this.$store.dispatch('archiveUnarchiveCard', this.copiedCard)
+		},
+		assignCardToMe() {
+			this.copiedCard = Object.assign({}, this.card)
+			this.copiedCard.newUserUid = this.card.owner.uid
+			this.$store.dispatch('assignCardToUser', this.copiedCard)
+		},
+		async loadStacksFromBoard(board) {
+			try {
+				let url = OC.generateUrl('/apps/deck/stacks/' + board.id)
+				let response = await axios.get(url)
+				this.stacksFromBoard = response.data
+			} catch (err) {
+				return err
+			}
+		},
+		moveCard() {
+			this.copiedCard = Object.assign({}, this.card)
+			this.copiedCard.stackId = this.selectedStack.id
+			this.$store.dispatch('moveCard', this.copiedCard)
+			this.modalShow = false
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	$card-spacing: 20px;
+	$card-padding: 15px;
+
+	.fade-enter-active, .fade-leave-active {
+		transition: opacity .125s;
+	}
+	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+		opacity: 0;
+	}
+
+	.card {
+		box-shadow: 0 0 3px 0 var(--color-box-shadow);
+		border-radius: 3px;
+		font-size: 100%;
+		background-color: var(--color-main-background);
+		margin-bottom: $card-spacing;
+		&.current {
+			box-shadow: 0 0 3px 1px var(--color-box-shadow);
+		}
+
+		.card-upper {
+			display: flex;
+			form {
+				display: flex;
+				padding: 5px 7px;
+				position: absolute;
+				width: 100%;
+				input[type=text] {
+					flex-grow: 1;
+				}
+
+			}
+			h3 {
+				margin: $card-padding;
+				flex-grow: 1;
+				font-size: 100%;
+				cursor: text;
+				overflow-x: hidden;
+				word-wrap: break-word;
+			}
+		}
+
+		.labels {
+			flex-grow: 1;
+			flex-shrink: 1;
+			min-width: 0;
+			display: flex;
+			flex-direction: row;
+			margin-left: $card-padding;
+			margin-right: $card-padding;
+			margin-top: -5px;
+
+			li {
+				flex-grow: 0;
+				flex-shrink: 1;
+				display: flex;
+				flex-direction: row;
+				overflow: hidden;
+				padding: 1px 3px;
+				border-radius: 3px;
+				font-size: 85%;
+				margin-right: 3px;
+				margin-bottom: 3px;
+
+				&:hover {
+					overflow: unset;
+				}
+
+				span {
+					flex-grow: 0;
+					flex-shrink: 1;
+					min-width: 0;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+		}
+
+		.card-controls {
+			display: flex;
+			margin-left: $card-padding;
+			margin-right: $card-padding;
+			& > div {
+				display: flex;
+				height: 44px;
+			}
+		}
+
+		&.current-card {
+			box-shadow: 0 0 6px 0 var(--color-box-shadow);
+		}
+	}
+
+	.compact {
+		padding-bottom: $card-padding;
+		.labels {
+			height: 6px;
+			margin-top: -10px;
+			margin-bottom: 3px;
+		}
+		.labels li {
+			width: 30px;
+			height: 6px;
+			font-size: 0;
+			color: transparent;
+		}
+	}
+
+	.modal__content {
+		width: 25vw;
+		min-width: 250px;
+		height: 120px;
+		text-align: center;
+		margin: 20px 20px 60px 20px;
+
+		.multiselect {
+			margin-bottom: 10px;
+		}
+	}
+
+	.modal__content button {
+		float: right;
+	}
+</style>

src/store/main.js

@@ -48,6 +48,7 @@ export default new Vuex.Store({
 		showArchived: false,
 		navShown: true,
 		compactMode: false,
+		listMode: true,
 		sidebarShown: false,
 		currentBoard: null,
 		currentCard: null,
@@ -148,6 +149,9 @@ export default new Vuex.Store({
 		toggleCompactMode(state) {
 			state.compactMode = !state.compactMode
 		},
+		toggleListMode(state) {
+			state.listMode = !state.listMode
+		},
 		setBoards(state, boards) {
 			state.boards = boards
 		},
@@ -352,6 +356,9 @@ export default new Vuex.Store({
 		toggleCompactMode({ commit }) {
 			commit('toggleCompactMode')
 		},
+		toggleListMode({ commit }) {
+			commit('toggleListMode')
+		},
 		setCurrentBoard({ commit }, board) {
 			commit('setCurrentBoard', board)
 		},