From 59827e0f69e61eb8ba5439f06e633c853db703aa Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Thu, 29 Aug 2019 09:15:30 +0200
Subject: [PATCH 1/3] label multi shows color, sharing shows avatars

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/board/SharingTabSidebard.vue |  6 +++++-
 src/components/card/CardSidebar.vue         | 14 ++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/board/SharingTabSidebard.vue b/src/components/board/SharingTabSidebard.vue
index 3a4990b48..9e99c844b 100644
--- a/src/components/board/SharingTabSidebard.vue
+++ b/src/components/board/SharingTabSidebard.vue
@@ -3,7 +3,8 @@
 		<multiselect v-model="addAcl" :options="unallocatedSharees" label="label"
 			@input="clickAddAcl" @search-change="asyncFind">
 			<template #option="scope">
-				{{ scope.option.label }}
+				<avatar :user="scope.option.value.shareWith" />
+				<span class="avatarLabel">{{ scope.option.label }} </span>
 			</template>
 		</multiselect>
 
@@ -129,4 +130,7 @@ export default {
 		padding: 12px 9px;
 		flex-grow: 1;
 	}
+	.avatarLabel {
+		padding: 6px
+	}
 </style>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 96e806b81..68f4e6d34 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -36,7 +36,7 @@
 						:taggable="true" label="title"
 						track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard">
 						<template #option="scope">
-							<span>{{ scope.option.title }}</span>
+							<div :style="{ color: '#' + scope.option.color}">{{ scope.option.title }}</div>
 						</template>
 					</multiselect>
 				</div>
@@ -50,7 +50,8 @@
 						track-by="primaryKey"
 						@select="assignUserToCard" @remove="removeUserFromCard">
 						<template #option="scope">
-							{{ scope.option.displayname }}
+							<avatar :user="scope.option.primaryKey" />
+							<span class="avatarLabel">{{ scope.option.displayname }} </span>
 						</template>
 					</multiselect>
 				</div>
@@ -86,7 +87,7 @@
 </template>
 
 <script>
-import { AppSidebar, AppSidebarTab, Multiselect, DatetimePicker } from 'nextcloud-vue'
+import { AppSidebar, AppSidebarTab, Multiselect, DatetimePicker, Avatar } from 'nextcloud-vue'
 import { mapState } from 'vuex'
 import VueEasymde from 'vue-easymde'
 import { Actions } from 'nextcloud-vue/dist/Components/Actions'
@@ -103,7 +104,8 @@ export default {
 		DatetimePicker,
 		VueEasymde,
 		Actions,
-		ActionButton
+		ActionButton,
+		Avatar
 	},
 	props: {
 		id: {
@@ -317,4 +319,8 @@ export default {
 		}
 	}
 
+	.avatarLabel {
+		padding: 6px
+	}
+
 </style>

From 90d6923fb6a8423a8cd711a3d47ac19abb16755f Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Thu, 29 Aug 2019 11:56:56 +0200
Subject: [PATCH 2/3] added the avatarselectoption

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/board/SharingTabSidebard.vue | 24 +++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/board/SharingTabSidebard.vue b/src/components/board/SharingTabSidebard.vue
index 9e99c844b..0d087b364 100644
--- a/src/components/board/SharingTabSidebard.vue
+++ b/src/components/board/SharingTabSidebard.vue
@@ -1,12 +1,21 @@
 <template>
 	<div>
-		<multiselect v-model="addAcl" :options="unallocatedSharees" label="label"
+		<!-- <multiselect v-model="addAcl" :options="unallocatedSharees" label="label"
 			@input="clickAddAcl" @search-change="asyncFind">
 			<template #option="scope">
 				<avatar :user="scope.option.value.shareWith" />
 				<span class="avatarLabel">{{ scope.option.label }} </span>
 			</template>
-		</multiselect>
+		</multiselect> -->
+
+		<multiselect
+			v-model="addAcl"
+			:options="formatedSharees"
+			:user-select="true"
+			label="displayName"
+			track-by="user"
+			@input="clickAddAcl"
+			@search-change="asyncFind" />
 
 		<ul
 			id="shareWithList"
@@ -72,6 +81,17 @@ export default {
 		...mapGetters({
 			sharees: 'sharees'
 		}),
+		formatedSharees() {
+			return this.unallocatedSharees.map(item => {
+				return {
+					user: item.label,
+					displayName: item.label,
+					// desc: 'desc',
+					icon: item.value.shareType === 1 ? 'icon-group' : 'icon-user',
+					isNoUser: item.value.shareType === 1
+				}
+			})
+		},
 		unallocatedSharees() {
 			return this.sharees.filter((sharee) => {
 				return Object.values(this.board.acl).findIndex((acl) => {

From 2ad66ca76e3671e1f8ab16afa89fc9daf917627f Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Thu, 29 Aug 2019 12:33:44 +0200
Subject: [PATCH 3/3] impl Julius review topics

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/board/SharingTabSidebard.vue | 26 +++++++++++----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/board/SharingTabSidebard.vue b/src/components/board/SharingTabSidebard.vue
index 0d087b364..2ca5be29c 100644
--- a/src/components/board/SharingTabSidebard.vue
+++ b/src/components/board/SharingTabSidebard.vue
@@ -1,13 +1,5 @@
 <template>
 	<div>
-		<!-- <multiselect v-model="addAcl" :options="unallocatedSharees" label="label"
-			@input="clickAddAcl" @search-change="asyncFind">
-			<template #option="scope">
-				<avatar :user="scope.option.value.shareWith" />
-				<span class="avatarLabel">{{ scope.option.label }} </span>
-			</template>
-		</multiselect> -->
-
 		<multiselect
 			v-model="addAcl"
 			:options="formatedSharees"
@@ -83,13 +75,23 @@ export default {
 		}),
 		formatedSharees() {
 			return this.unallocatedSharees.map(item => {
-				return {
+
+				let sharee = {
 					user: item.label,
 					displayName: item.label,
-					// desc: 'desc',
-					icon: item.value.shareType === 1 ? 'icon-group' : 'icon-user',
-					isNoUser: item.value.shareType === 1
+					icon: 'icon-user'
 				}
+
+				if (item.value.shareType === 1) {
+					sharee.icon = 'icon-group'
+					sharee.isNoUser = true
+				}
+				if (item.value.shareType === 7) {
+					sharee.icon = 'icon-circle'
+					sharee.isNoUser = true
+				}
+
+				return sharee
 			})
 		},
 		unallocatedSharees() {