feat: add members tab

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/card/CardModal.vue

@@ -31,7 +31,7 @@
 			</p>
 		</div>
 		<div class="tabs">
-			<div class="tab members">
+			<div class="tab members" :class="{active: 'members'}">
 				<i class="icon-user icon" />
 				Members
 			</div>
@@ -53,14 +53,8 @@
 			</div>
 		</div>
 		<div class="content">
-			<div class="description">
+			<MembersTab :card="currentCard" />
-				<h2>Description</h2>
+			<Description :key="currentCard.id" :card="currentCard" @change="descriptionChanged" />
-				<p>Write a description</p>
-			</div>
-			<div class="edit-btns">
-				<ActionButton icon="icon-info" class="action-btn" />
-				<ActionButton icon="icon-rename" class="action-btn" />
-			</div>
 		</div>
 		<div class="activities">
 			<h2 class="activities-title">
@@ -83,18 +77,20 @@
 </template>
 
 <script>
-import { ActionButton, Avatar } from '@nextcloud/vue'
+import { Avatar } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
 import relativeDate from '../../mixins/relativeDate'
 import { showError } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
+import MembersTab from './MembersTab.vue'
+import Description from './Description.vue'
 
 const capabilities = window.OC.getCapabilities()
 
 export default {
 	name: 'CardModal',
-	components: { Avatar, ActionButton },
+	components: { Avatar, MembersTab, Description },
 	mixins: [relativeDate],
 	props: {
 		id: {
@@ -119,6 +115,7 @@ export default {
 			hasActivity: capabilities && capabilities.activity,
 			currentUser: getCurrentUser(),
 			comment: '',
+			activeTab: 'members',
 		}
 	},
 	computed: {
@@ -154,6 +151,9 @@ export default {
 		},
 	},
 	methods: {
+		descriptionChanged(newDesc) {
+			this.copiedCard.description = newDesc
+		},
 		handleUpdateTitleEditable(value) {
 			this.titleEditable = value
 			if (value) {
@@ -187,29 +187,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.icon-flash-black{
+.icon-flash-black {
 	background-image: url(../../../img/flash-black.svg);
 	width: 15px;
 	height: 15px;
 	margin-right: 5px;
 }
 
-.icon-plus{
+.icon-plus {
 	background-image: url(../../../img/plus.svg);
 	width: 15px;
 	height: 15px;
 	margin-right: 5px;
 }
 
-.log-item{
+.log-item {
 	display: flex;
 	justify-content: flex-start;
 	line-height: 45px;
 	align-items: center;
 }
 
-.activities{
+.activities {
-	&-title{
+	&-title {
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
@@ -219,33 +219,33 @@ export default {
 	margin-top: 100px;
 }
 
-.comment{
+.comment {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	&-input{
+	&-input {
 		width: 100%;
 		margin-left: 10px;
 	}
 }
 
-.container{
+.container {
 	padding: 20px;
 }
 
-.top{
+.top {
-	&-title{
+	&-title {
 		color: black;
 		font-size: 20px;
 		font-weight: bold;
 	}
-	&-modified{
+	&-modified {
 		color: #767676;
 		line-height: 40px;
 	}
 }
 
-.tabs{
+.tabs {
 	margin-top: 20px;
 	margin-bottom: 20px;
 	display: flex;
@@ -253,7 +253,7 @@ export default {
 	grid-gap: 30px;
 }
 
-.tab{
+.tab {
 	cursor: pointer;
 	font-weight: bold;
 	background-color: #ededed;
@@ -271,17 +271,23 @@ export default {
 	width: 100px;
 }
 
-.action-btn{
+.action-btn {
 	list-style: none;
 }
 
-.content{
+.edit-btns {
-	display: flex;
-	justify-content: space-between;
-}
-
-.edit-btns{
 	display: flex;
 	align-items: center;
 }
+
+.description {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 30px;
+}
+
+.active {
+	color: #409eff;
+	background-color: #ecf5ff;
+}
 </style>

src/components/card/Description.vue

@@ -282,7 +282,9 @@ h5 {
 	border-bottom: 1px solid var(--color-border);
 	margin-top: 20px;
 	margin-bottom: 5px;
-	color: var(--color-text-maxcontrast);
+	color: var(--color-main-text);
+	font-weight: bold;
+	font-size: 20px;
 
 	.icon-info {
 		display: inline-block;

src/components/card/MembersTab.vue

@@ -0,0 +1,179 @@
+<template>
+	<div class="section-details">
+		<div v-if="showSelelectMembers" @mouseleave="showSelelectMembers = false">
+			<Multiselect v-if="canEdit"
+				v-model="assignedUsers"
+				:multiple="true"
+				:options="formatedAssignables"
+				:user-select="true"
+				:auto-limit="false"
+				:placeholder="t('deck', 'Assign a user to this card…')"
+				label="displayname"
+				track-by="multiselectKey"
+				@select="assignUserToCard"
+				@remove="removeUserFromCard">
+				<template #tag="scope">
+					<div class="avatarlist--inline">
+						<Avatar :user="scope.option.uid"
+							:display-name="scope.option.displayname"
+							:size="24"
+							:is-no-user="scope.option.isNoUser"
+							:disable-menu="true" />
+					</div>
+				</template>
+			</Multiselect>
+			<div v-else class="avatar-list--readonly">
+				<Avatar v-for="option in assignedUsers"
+					:key="option.primaryKey"
+					:user="option.uid"
+					:display-name="option.displayname"
+					:is-no-user="option.isNoUser"
+					:size="32" />
+			</div>
+		</div>
+		<template v-else>
+			<div class="members" @click="showSelelectMembers = true">
+				<Avatar v-for="option in assignedUsers"
+					:key="option.primaryKey"
+					:user="option.uid"
+					:display-name="option.displayname"
+					:is-no-user="option.isNoUser"
+					:size="32" />
+				<div class="button new select-member-btn">
+					<span class="icon icon-add" />
+					<span class="hidden-visually"></span>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script>
+import { Multiselect, Avatar } from '@nextcloud/vue'
+import { mapState, mapGetters } from 'vuex'
+
+export default {
+	name: 'MembersTab',
+	components: {
+		Multiselect,
+		Avatar,
+	},
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			assignedUsers: null,
+			copiedCard: null,
+			showSelelectMembers: false,
+		}
+	},
+	computed: {
+		...mapState({
+			currentBoard: state => state.currentBoard,
+		}),
+		...mapGetters(['canEdit', 'assignables']),
+		formatedAssignables() {
+			return this.assignables.map(item => {
+				const assignable = {
+					...item,
+					user: item.primaryKey,
+					displayName: item.displayname,
+					icon: 'icon-user',
+					isNoUser: false,
+					multiselectKey: item.type + ':' + item.uid,
+				}
+
+				if (item.type === 1) {
+					assignable.icon = 'icon-group'
+					assignable.isNoUser = true
+				}
+				if (item.type === 7) {
+					assignable.icon = 'icon-circles'
+					assignable.isNoUser = true
+				}
+
+				return assignable
+			})
+		},
+	},
+	watch: {
+		card() {
+			this.initialize()
+		},
+	},
+	mounted() {
+		this.initialize()
+	},
+	methods: {
+		removeUserFromCard(user) {
+			this.$store.dispatch('removeUserFromCard', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
+		},
+		addLabelToCard(newLabel) {
+			this.copiedCard.labels.push(newLabel)
+			const data = {
+				card: this.copiedCard,
+				labelId: newLabel.id,
+			}
+			this.$store.dispatch('addLabel', data)
+		},
+		assignUserToCard(user) {
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
+		},
+		async initialize() {
+			if (!this.card) {
+				return
+			}
+
+			this.copiedCard = JSON.parse(JSON.stringify(this.card))
+			this.assignedLabels = [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+
+			if (this.card.assignedUsers && this.card.assignedUsers.length > 0) {
+				this.assignedUsers = this.card.assignedUsers.map((item) => ({
+					...item.participant,
+					isNoUser: item.participant.type !== 0,
+					multiselectKey: item.participant.type + ':' + item.participant.primaryKey,
+				}))
+			} else {
+				this.assignedUsers = []
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.select-member-btn {
+	box-sizing: border-box;
+	display: flex;
+	height: 32px;
+	width: 32px;
+	padding: 9px;
+	align-items: center;
+	justify-content: center;
+}
+
+.section-details {
+	width: 100%;
+}
+
+.members {
+	display: flex;
+	align-items: center;
+}
+</style>