Add frontend for assigning groups to cards

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

src/components/cards/AvatarList.vue

@@ -22,13 +22,31 @@
 
 <template>
 	<div class="avatars">
-		<div class="avatar-list" @click.stop="popoverVisible=!popoverVisible">
-			<div v-if="popover.length > 0" class="avatardiv icon-more" />
-			<Avatar v-for="user in firstUsers"
-				:key="user.id"
-				:url="avatarUrl(user)"
-				:disable-tooltip="true"
-				:size="32" />
+		<div class="avatar-list" @click.stop="togglePopover">
+			<div v-if="popover.length > 0">
+				<div class="avatardiv icon-more" />
+			</div>
+			<div v-for="user in firstUsers" :key="user.id">
+				<Avatar v-if="user.type === 0"
+					:user="user.participant.uid"
+					:display-name="user.participant.displayname"
+					:disable-menu="true"
+					:size="32" />
+				<Avatar v-if="user.type === 1"
+					:user="user.participant.primaryKey"
+					:display-name="user.participant.primaryKey"
+					:tooltip-message="user.participant.primaryKey + ' ' + t('deck', '(group)')"
+					:is-no-user="true"
+					:disable-="true"
+					:size="32" />
+				<Avatar v-if="user.type === 7"
+					:user="user.participant.primaryKey"
+					:display-name="user.participant.primaryKey"
+					:tooltip-message="user.participant.primaryKey + ' ' + t('deck', '(circle)')"
+					:is-no-user="true"
+					:disable-="true"
+					:size="32" />
+			</div>
 		</div>
 
 		<div v-show="popoverVisible" class="popovermenu menu-right">
@@ -69,8 +87,11 @@ export default {
 			return this.users.slice(0, 3)
 		},
 		avatarUrl() {
-			return (session) => {
-				const user = session.participant.displayname
+			return (assignable) => {
+				if (assignable.type === 1) {
+					return 'icon-group'
+				}
+				const user = assignable.participant.primaryKey
 				const size = 32
 				const avatarUrl = OC.generateUrl('/avatar/{user}/{size}',
 					{
@@ -81,7 +102,7 @@ export default {
 			}
 		},
 		popover() {
-			if (!this.users || this.users.length < 0) {
+			if (!this.users || this.users.length === 0) {
 				return []
 			}
 			return [
@@ -89,19 +110,25 @@ export default {
 					return {
 						href: '#',
 						icon: this.avatarUrl(session),
-						text: session.participant.displayname,
+						text: session.participant.displayname + (session.type === 1 ? ' ' + t('deck', '(group)') : ''),
 					}
 				}),
 			]
 		},
-
+	},
+	methods: {
+		togglePopover() {
+			if (this.popover.length > 0) {
+				this.popoverVisible = !this.popoverVisible
+			}
+		},
 	},
 }
 </script>
 
 <style scoped lang="scss">
 	.avatars {
-		margin: 0;
+		margin-top: 5px;
 		position: relative;
 		flex-grow: 1;
 		/deep/ .popovermenu {
@@ -118,14 +145,12 @@ export default {
 	.avatar-list {
 		float: right;
 		display: inline-flex;
+		padding-right: 8px;
 		flex-direction: row-reverse;
 		.avatardiv,
 		/deep/ .avatardiv {
 			width: 36px;
 			height: 36px;
-			margin-right: -8px;
-			border: 2px solid var(--color-main-background);
-			background-color: var(--color-main-background) !important;
 			box-sizing: content-box !important;
 			&.icon-more {
 				width: 32px;
@@ -134,6 +159,13 @@ export default {
 				background-color: var(--color-background-dark) !important;
 				cursor: pointer;
 			}
+			& {
+				margin-right: -12px;
+				transition: margin-right 0.2s ease-in-out;
+			}
+		}
+		&:hover div:nth-child(n+2) /deep/ .avatardiv {
+			margin-right: 1px;
 		}
 	}
 	.popovermenu {

src/components/cards/CardBadges.vue

@@ -97,19 +97,21 @@ export default {
 <style lang="scss" scoped>
 	.badges {
 		display: flex;
+		width: 100%;
 		flex-grow: 1;
 
 		.icon {
 			opacity: 0.5;
 			padding: 12px 14px;
-			margin-right: 10px;
+			padding-right: 4px;
+			margin-right: 5px;
 			background-position: left;
 			background-size: 16px;
 			span {
 				margin-left: 18px;
 			}
-			&.icon-filetype-text {
-				opacity: 1;
+			&.icon-edit {
+				opacity: 0.5;
 			}
 		}
 	}
@@ -124,6 +126,7 @@ export default {
 		display: flex;
 		align-items: center;
 		opacity: .5;
+		flex-shrink: 1;
 
 		.icon {
 			background-size: contain;
@@ -145,6 +148,9 @@ export default {
 
 		span {
 			margin-left: 20px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
 		}
 	}
 </style>

src/components/cards/CardItem.vue

@@ -196,8 +196,13 @@ export default {
 		},
 		assignCardToMe() {
 			this.copiedCard = Object.assign({}, this.card)
-			this.copiedCard.newUserUid = this.card.owner.uid
-			this.$store.dispatch('assignCardToUser', this.copiedCard)
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: OC.getCurrentUser().uid,
+					type: 0,
+				},
+			})
 		},
 		async loadStacksFromBoard(board) {
 			try {
@@ -234,6 +239,7 @@ export default {
 	}
 
 	.card {
+		transition: box-shadow 0.1s ease-in-out;
 		box-shadow: 0 0 2px 0 var(--color-box-shadow);
 		border-radius: 3px;
 		font-size: 100%;