From 38dc7945dda1fe5d8d8a475bc554e8c65052c973 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Tue, 16 Jul 2019 14:17:51 +0200
Subject: [PATCH] new functions

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/board/DeletedTabSidebard.vue |   8 +-
 src/components/board/Stack.vue              |   2 +-
 src/components/card/CardSidebar.vue         | 102 +++++++++++++++++++-
 src/components/cards/CardBadges.vue         |   9 +-
 src/components/cards/CardItem.vue           |  10 +-
 src/services/CardApi.js                     |  17 +++-
 src/store/card.js                           |  20 +++-
 src/store/main.js                           |   2 +-
 8 files changed, 141 insertions(+), 29 deletions(-)

diff --git a/src/components/board/DeletedTabSidebard.vue b/src/components/board/DeletedTabSidebard.vue
index f4a2e74b7..7d3d84d7c 100644
--- a/src/components/board/DeletedTabSidebard.vue
+++ b/src/components/board/DeletedTabSidebard.vue
@@ -12,7 +12,6 @@
 		</ul>
 
 		<h3>{{ t('deck', 'Deleted cards') }}</h3>
-		
 		<ul>
 			<!-- <li ng-repeat="deletedCard in cardservice.deleted">
 				<span class="icon icon-deck"></span>
@@ -48,12 +47,7 @@ export default {
 		...mapState({
 			deletedStacks: state => state.deletedStacks
 			// deletedCards: state => state.deletedCards
-		}),
-
-		deletedCards() {
-			console.log(store.state.deletedCards)
-			return store.state.deletedCards
-		}
+		})
 
 	},
 	created() {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index a595cb0eb..be95cde34 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -120,7 +120,7 @@ export default {
 				boardId: this.stack.boardId
 			}
 			this.$store.dispatch('addCard', newCard)
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 82967ccfa..5267ffa4d 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -22,13 +22,37 @@
 
 <template>
 	<app-sidebar v-if="currentCard != null"
-		:actions="[]"
+		:actions="toolbarActions"
 		:title="currentCard.title"
 		:subtitle="subtitle"
 		@close="closeSidebar">
 		<template #action />
+		<AppSidebarTab name="Details" icon="icon-home">
+
+			<p>Tags</p>
+			<multiselect v-model="addedLabelToCard" :options="currentBoard.labels" label="label"
+				@input="clickaddLabelToCard">
+				<template #option="scope">
+					{{ scope.option.title }}
+				</template>
+			</multiselect>
+
+			<p>Assign to user</p>
+			<multiselect v-model="addAclToCard" :options="unallocatedSharees" label="label"
+				@input="clickAddAclToCard" @search-change="asyncFind">
+				<template #option="scope">
+					{{ scope.option.label }}
+				</template>
+			</multiselect>
+
+			<p>Due to</p>
+
+			<DatetimePicker />
+
+		</AppSidebarTab>
 		<AppSidebarTab name="Description" icon="icon-description">
-			{{ currentCard.description }}
+			<textarea v-model="copiedCard.description" type="text" autofocus />
+			<input type="button" class="icon-confirm" @click="saveDesc()">
 		</AppSidebarTab>
 		<AppSidebarTab name="Attachments" icon="icon-files-dark">
 			{{ currentCard.attachments }}
@@ -40,33 +64,101 @@
 </template>
 
 <script>
-import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
+import { AppSidebar, AppSidebarTab, Multiselect, DatetimePicker } from 'nextcloud-vue'
 import { mapState } from 'vuex'
 
 export default {
 	name: 'CardSidebar',
 	components: {
 		AppSidebar,
-		AppSidebarTab
+		AppSidebarTab,
+		Multiselect,
+		DatetimePicker
 	},
 	data() {
 		return {
+			addAclToCard: null,
+			addedLabelToCard: null,
+			isLoading: false,
+			copiedCard: null
 		}
 	},
 	computed: {
 		...mapState({
-			currentCard: state => state.currentCard
+			currentCard: state => state.currentCard,
+			currentBoard: state => state.currentBoard,
+			sharees: 'sharees'
 		}),
 		subtitle() {
 			let lastModified = this.currentCard.lastModified
 			let createdAt = this.currentCard.createdAt
 
 			return t('deck', 'Modified') + ': ' + lastModified + ' ' + t('deck', 'Created') + ': ' + createdAt
+		},
+		unallocatedSharees() {
+
+			return this.sharees
+
+			/* return this.sharees.filter((sharee) => {
+				return Object.values(this.board.acl).findIndex((acl) => {
+					return acl.participant.uid === sharee.value.shareWith
+				})
+			}) */
+		},
+		toolbarActions() {
+			return [
+				{
+					action: () => {
+
+					},
+					icon: 'icon-archive-dark',
+					text: t('deck', 'Assign to me')
+				},
+				{
+					action: () => {
+
+					},
+					icon: 'icon-archive',
+					text: t('deck', (this.showArchived ? 'Unarchive card' : 'Archive card'))
+				}
+			]
+		}
+	},
+	watch: {
+		currentCard() {
+			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
 		}
 	},
 	methods: {
+		saveDesc() {
+			this.$store.dispatch('updateCard', this.copiedCard)
+		},
+		asyncFind(query) {
+			this.isLoading = true
+			this.$store.dispatch('loadSharees').then(response => {
+				this.isLoading = false
+			})
+		},
 		closeSidebar() {
 			this.$router.push({ name: 'board' })
+		},
+		clickAddAclToCard() {
+			/* this.addAclForAPI = {
+				type: 0,
+				participant: this.addAcl.value.shareWith,
+				permissionEdit: false,
+				permissionShare: false,
+				permissionManage: false
+			}
+			this.$store.dispatch('addAclToCurrentBoard', this.addAclForAPI) */
+		},
+		clickaddLabelToCard() {
+			this.copiedCard.labels.push(this.addedLabelToCard)
+			let data = {
+				cardId: this.copiedCard.id,
+				labelId: this.addedLabelToCard.id
+			}
+			this.$store.dispatch('assignLabel', data)
 		}
 	}
 }
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 3bfd8121b..9317706e1 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -22,9 +22,9 @@
 
 <template>
 	<div class="badges">
-		<div v-if="true" class="card-files icon icon-files-dark" />
-		<div v-if="true" class="card-comments icon icon-comment" />
-		<div v-if="true" :class="{'icon-calendar': true, 'icon-calendar-dark': false}" class="due icon now">
+		<div v-if="card.attechments" class="card-files icon icon-files-dark" />
+		<div v-if="card.description" class="card-comments icon icon-comment" />
+		<div v-if="card.duedate" :class="{'icon-calendar': true, 'icon-calendar-dark': false}" class="due icon now">
 			<span>Now</span>
 		</div>
 		<div v-if="true" class="card-tasks icon icon-checkmark">
@@ -50,6 +50,9 @@ export default {
 	computed: {
 		compactMode() {
 			return false
+		},
+		card() {
+			return this.$store.getters.cardById(this.id)
 		}
 	}
 }
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index d717b956e..70e4f3e53 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -34,10 +34,10 @@
 			</transition>
 		</div>
 		<ul class="labels">
-			<li v-for="label in labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
+			<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">
-			<card-badges />
+			<card-badges :id="id" />
 		</div>
 	</div>
 </template>
@@ -82,12 +82,6 @@ export default {
 		menu() {
 			return []
 		},
-		labels() {
-			return [
-				{ id: 1, title: 'ToDo', color: 'aa0000' },
-				{ id: 2, title: 'Done', color: '33ff33' }
-			]
-		},
 		labelStyle() {
 			return (label) => {
 				return {
diff --git a/src/services/CardApi.js b/src/services/CardApi.js
index acd71f4ff..910411b56 100644
--- a/src/services/CardApi.js
+++ b/src/services/CardApi.js
@@ -75,7 +75,7 @@ export class CardApi {
 	}
 
 	assignUser(card) {
-		return axios.post(this.url(`/cards/${card.id}/assignUser`), card.newUserUid)
+		return axios.post(this.url(`/cards/${card.id}/assign`), card.newUserUid)
 			.then(
 				(response) => {
 					return Promise.resolve(response.data)
@@ -119,4 +119,19 @@ export class CardApi {
 			})
 	}
 
+	assignLabelToCard(data) {
+		return axios.post(this.url(`/cards/${data.cardId}/label/${data.labelId}`))
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 }
diff --git a/src/store/card.js b/src/store/card.js
index 64fa31713..4746e73ba 100644
--- a/src/store/card.js
+++ b/src/store/card.js
@@ -64,10 +64,18 @@ export default {
 		},
 		assignCardToMe(state, card) {
 			console.log(card)
-			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-			if (existingIndex !== -1) {
+			// let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			/* if (existingIndex !== -1) {
 
-			}
+			} */
+		},
+		updateCard(state, card) {
+			// console.log(card)
+			// new card is not returned!
+			// let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			/* if (existingIndex !== -1) {
+				state.cards[existingIndex] = card
+			} */
 		}
 	},
 	actions: {
@@ -105,6 +113,12 @@ export default {
 				.then((card) => {
 					commit('assignCardToMe', card)
 				})
+		},
+		assignLabel({ commit }, data) {
+			apiClient.assignLabelToCard(data)
+				.then((card) => {
+					commit('updateCard', card)
+				})
 		}
 	}
 }
diff --git a/src/store/main.js b/src/store/main.js
index 9304566d6..534a61e85 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -262,7 +262,7 @@ export default new Vuex.Store({
 			params.append('itemType', 0)
 			params.append('itemType', 1)
 			axios.get(OC.linkToOCS('apps/files_sharing/api/v1') + 'sharees', { params }).then((response) => {
-				//commit('setSharees', response.data.ocs.data.users)
+				// commit('setSharees', response.data.ocs.data.users)
 				commit('setSharees', response.data.ocs.data)
 			})
 		},