Add frontend for assigning groups to cards

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/card/CardSidebar.vue

@@ -64,20 +64,34 @@
 					<span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span>
 				</div>
 				<div class="section-details">
-					<Multiselect v-model="assignedUsers"
-						:disabled="!canEdit"
+					<!-- FIXME: model not wokring due to id -->
+					<Multiselect v-if="canEdit"
+						v-model="assignedUsers"
 						:multiple="true"
-						:options="assignableUsers"
+						:options="formatedAssignables"
+						:user-select="true"
+						:auto-limit="false"
 						:placeholder="t('deck', 'Assign a user to this card…')"
 						label="displayname"
 						track-by="primaryKey"
 						@select="assignUserToCard"
 						@remove="removeUserFromCard">
-						<template #option="scope">
-							<Avatar :user="scope.option.primaryKey" />
-							<span class="avatarLabel">{{ scope.option.displayname }} </span>
+						<template #tag="scope">
+							<div class="avatarlist--inline">
+								<Avatar :user="scope.option.primaryKey"
+									:display-name="scope.option.displayname"
+									:size="24"
+									:disable-menu="true" />
+							</div>
 						</template>
 					</Multiselect>
+					<div v-else class="avatar-list--readonly">
+						<Avatar v-for="option in currentCard.assignedUsers"
+							:key="option.id"
+							:user="option.participant.primaryKey"
+							:display-name="option.participant.displayname"
+							:size="32" />
+					</div>
 				</div>
 			</div>
 
@@ -86,14 +100,11 @@
 					<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
 				</div>
 				<div class="section-details">
-					<DatetimePicker v-model="copiedCard.duedate"
+					<DatetimePicker v-model="duedate"
 						:placeholder="t('deck', 'Set a due date')"
 						type="datetime"
-						lang="en"
-						:disabled="!canEdit"
-						format="YYYY-MM-DD HH:mm"
-						confirm
-						@change="setDue()" />
+						:disabled="saving || !canEdit"
+						confirm />
 					<Actions v-if="canEdit">
 						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
 							{{ t('deck', 'Remove due date') }}
@@ -189,11 +200,12 @@ export default {
 			copiedCard: null,
 			allLabels: null,
 			desc: null,
+			saving: false,
 			mdeConfig: {
 				autoDownloadFontAwesome: false,
 				spellChecker: false,
 				autofocus: true,
-				autosave: { enabled: true, uniqueId: 'unique' },
+				autosave: { enabled: false, uniqueId: 'unique' },
 				toolbar: false,
 			},
 			lastModifiedRelative: null,
@@ -205,15 +217,49 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
-			assignableUsers: state => state.assignableUsers,
 		}),
-		...mapGetters(['canEdit']),
+		...mapGetters(['canEdit', 'assignables']),
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
 		},
 		subtitle() {
 			return t('deck', 'Modified') + ': ' + this.lastModifiedRelative + ' ' + t('deck', 'Created') + ': ' + this.lastCreatedRemative
 		},
+		formatedAssignables() {
+			return this.assignables.map(item => {
+				const assignable = {
+					...item,
+					user: item.primaryKey,
+					displayName: item.displayname,
+					icon: 'icon-user',
+					isNoUser: false,
+				}
+
+				if (item.type === 1) {
+					assignable.icon = 'icon-group'
+					assignable.isNoUser = true
+				}
+				if (item.type === 7) {
+					assignable.icon = 'icon-circles'
+					assignable.isNoUser = true
+				}
+
+				return assignable
+			})
+		},
+		duedate: {
+			get() {
+				return this.currentCard.duedate ? new Date(this.currentCard.duedate) : null
+			},
+			async set(val) {
+				this.saving = true
+				await this.$store.dispatch('updateCardDue', {
+					...this.copiedCard,
+					duedate: val ? (new Date(val)).toISOString() : null,
+				})
+				this.saving = false
+			},
+		},
 	},
 	watch: {
 		'currentCard': {
@@ -235,10 +281,6 @@ export default {
 				this.updateRelativeTimestamps()
 			},
 		},
-
-		'copiedCard.description': function() {
-			this.saveDesc()
-		},
 	},
 	created() {
 		setInterval(this.updateRelativeTimestamps, 10000)
@@ -267,13 +309,23 @@ export default {
 		},
 
 		assignUserToCard(user) {
-			this.copiedCard.newUserUid = user.uid
-			this.$store.dispatch('assignCardToUser', this.copiedCard)
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
 		},
 
 		removeUserFromCard(user) {
-			this.copiedCard.removeUserUid = user.uid
-			this.$store.dispatch('removeUserFromCard', this.copiedCard)
+			this.$store.dispatch('removeUserFromCard', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
 		},
 
 		addLabelToCard(newLabel) {
@@ -376,4 +428,28 @@ export default {
 		padding: 6px
 	}
 
+	.section-details::v-deep .multiselect__tags-wrap {
+		flex-wrap: wrap;
+	}
+
+	.avatar-list--readonly .avatardiv {
+		margin-right: 3px;
+	}
+
+	.avatarlist--inline {
+		display: flex;
+		align-items: center;
+		margin-right: 3px;
+		.avatarLabel {
+			padding: 0;
+		}
+	}
+
+	.multiselect::v-deep .multiselect__tags-wrap {
+		z-index: 2;
+	}
+
+	.multiselect.multiselect--active::v-deep .multiselect__tags-wrap {
+		z-index: 0;
+	}
 </style>

src/components/card/CardSidebarTabComments.vue

@@ -1,9 +1,9 @@
 <template>
 	<div>
 		<div class="comment--header">
-			<Avatar :user="card.owner.uid" />
+			<Avatar :user="currentUser.uid" />
 			<span class="has-tooltip username">
-				{{ card.owner.displayname }}
+				{{ currentUser.displayName }}
 			</span>
 		</div>
 
@@ -54,6 +54,7 @@ export default {
 		return {
 			newComment: '',
 			isLoading: false,
+			currentUser: OC.getCurrentUser(),
 		}
 	},
 	computed: {