feat: improve tabs behavior & style

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

src/components/card/AttachmentsTab.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="activeTab === 'attachment'" class="section-details">
+	<div v-if="activeTabs.includes('attachment')" class="section-details">
 		<AttachmentList
 			:card-id="card.id"
 			:removable="true"
@@ -18,9 +18,9 @@ export default {
 			type: Object,
 			default: null,
 		},
-		activeTab: {
+		activeTabs: {
-			type: String,
+			type: Array,
-			default: null,
+			default: () => [],
 		},
 	},
 	data() {

src/components/card/CardModal.vue

@@ -31,23 +31,23 @@
 			</p>
 		</div>
 		<div class="tabs">
-			<div class="tab members" :class="{active: activeTab === 'members'}" @click="activeTab = 'members'">
+			<div class="tab members" :class="{active: activeTabs.includes('members')}" @click="changeActiveTab('members')">
 				<i class="icon-user icon" />
 				{{ t('deck', 'Members') }}
 			</div>
-			<div class="tab tags" :class="{active: activeTab === 'tags'}" @click="activeTab = 'tags'">
+			<div class="tab tags" :class="{active: activeTabs.includes('tags')}" @click="changeActiveTab('tags')">
 				<i class="icon icon-tag" />
 				{{ t('deck', 'Tags') }}
 			</div>
-			<div class="tab due-date" :class="{active: activeTab === 'duedate'}" @click="activeTab = 'duedate'">
+			<div class="tab due-date" :class="{active: activeTabs.includes('duedate')}" @click="changeActiveTab('duedate')">
 				<i class="icon icon-calendar-dark" />
 				{{ t('deck', 'Due date') }}
 			</div>
-			<div class="tab project" :class="{active: activeTab === 'project'}" @click="activeTab = 'project'">
+			<div class="tab project" :class="{active: activeTabs.includes('project')}" @click="changeActiveTab('project')">
 				<i class="icon icon-deck" />
 				{{ t('deck', 'Project') }}
 			</div>
-			<div class="tab attachments" :class="{active: activeTab === 'attachment'}" @click="activeTab = 'attachment'">
+			<div class="tab attachments" :class="{active: activeTabs.includes('attachment')}" @click="changeActiveTab('attachment')">
 				<i class="icon-attach icon icon-attach-dark" />
 				{{ t('deck', 'Attachments') }}
 			</div>
@@ -56,28 +56,36 @@
 			<div class="content-tabs">
 				<MembersTab
 					:card="currentCard"
-					:active-tab="activeTab"
+					:active-tabs="activeTabs"
-					@click="activeTab = 'members'"
+					:current-tab="currentTab"
-					@active-tab="changeActiveTab" />
+					@click="activeTabs.push('members')"
+					@active-tab="changeActiveTab"
+					@remove-active-tab="removeActiveTab" />
 				<TagsTab
-					:active-tab="activeTab"
+					:active-tabs="activeTabs"
 					:card="currentCard"
-					@click="activeTab = 'tags'"
+					:current-tab="currentTab"
-					@active-tab="changeActiveTab" />
+					@click="activeTabs.push('tags')"
+					@active-tab="changeActiveTab"
+					@remove-active-tab="removeActiveTab" />
 				<DueDateTab
-					:active-tab="activeTab"
+					:active-tabs="activeTabs"
 					:card="currentCard"
-					@click="activeTab = 'duedate'"
+					:current-tab="currentTab"
-					@active-tab="changeActiveTab" />
+					@click="activeTabs.push('duedate')"
+					@active-tab="changeActiveTab"
+					@remove-active-tab="removeActiveTab" />
 				<ProjectTab
-					:active-tab="activeTab"
+					:active-tabs="activeTabs"
 					:card="currentCard"
-					@click="activeTab = 'project'"
+					:current-tab="currentTab"
+					@click="activeTabs.push('project')"
 					@active-tab="changeActiveTab" />
 				<AttachmentsTab
-					:active-tab="activeTab"
+					:active-tabs="activeTabs"
 					:card="currentCard"
-					@click="activeTab = 'attachment'"
+					:current-tab="currentTab"
+					@click="activeTabs.push('attachment')"
 					@active-tab="changeActiveTab" />
 			</div>
 			<Description :key="currentCard.id" :card="currentCard" @change="descriptionChanged" />
@@ -86,29 +94,17 @@
 			<h2 class="activities-title">
 				<div class="icon-activity" /> {{ t('deck', 'Activity') }}
 			</h2>
-			<div class="comments">
+			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
-				<Avatar :user="currentUser.uid" />
+			<ActivityList v-if="hasActivity"
-				<CommentForm v-model="newComment" @submit="createComment" />
+				filter="deck"
-			</div>
+				:object-id="currentBoard.id"
-			<div class="activities-logs">
+				object-type="deck"
-				<CommentItem v-if="replyTo"
+				type="deck" />
-					:comment="replyTo"
-					:reply="true"
-					:preview="true"
-					@cancel="cancelReply" />
-				<ul v-if="getCommentsForCard(currentCard.id).length > 0" id="commentsFeed">
-					<CommentItem v-for="cmt in getCommentsForCard(currentCard.id)"
-						:key="cmt.id"
-						:comment="cmt"
-						@doReload="loadComments" />
-				</ul>
-			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import { Avatar } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
 import relativeDate from '../../mixins/relativeDate'
@@ -120,24 +116,23 @@ import DueDateTab from './DueDateTab.vue'
 import Description from './Description.vue'
 import ProjectTab from './ProjectTab.vue'
 import AttachmentsTab from './AttachmentsTab.vue'
-import CommentForm from './CommentForm'
+import CardSidebarTabComments from './CardSidebarTabComments'
-import CommentItem from './CommentItem'
 import moment from '@nextcloud/moment'
+import ActivityList from '../ActivityList'
 
 const capabilities = window.OC.getCapabilities()
 
 export default {
 	name: 'CardModal',
 	components: {
-		Avatar,
 		MembersTab,
 		Description,
 		TagsTab,
 		DueDateTab,
 		ProjectTab,
 		AttachmentsTab,
-		CommentForm,
+		CardSidebarTabComments,
-		CommentItem,
+		ActivityList,
 	},
 	filters: {
 		fromNow(value) {
@@ -169,7 +164,8 @@ export default {
 			hasActivity: capabilities && capabilities.activity,
 			currentUser: getCurrentUser(),
 			comment: '',
-			activeTab: null,
+			currentTab: null,
+			activeTabs: [],
 		}
 	},
 	computed: {
@@ -276,7 +272,20 @@ export default {
 		},
 
 		changeActiveTab(tab) {
-			this.activeTab = tab
+			this.currentTab = tab
+			this.activeTabs = this.activeTabs.filter((item) => !['project', 'attachment'].includes(item))
+
+			if (!this.activeTabs.includes(tab)) {
+				this.activeTabs.push(tab)
+			}
+
+		},
+
+		removeActiveTab(tab) {
+			const index = this.activeTabs.indexOf(tab)
+			if (index > -1) {
+				this.activeTabs = this.activeTabs.splice(index, 1)
+			}
 		},
 	},
 }

src/components/card/DueDateTab.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="activeTab === 'duedate' || (copiedCard && copiedCard.duedate)"
+	<div v-if="activeTabs.includes('duedate') || (copiedCard && copiedCard.duedate)"
-		v-show="!['project', 'attachment'].includes(activeTab)"
+		v-show="!['project', 'attachment'].includes(currentTab)"
 		class="section-details">
 		<div @click="$emit('active-tab', 'duedate')">
 			<DatetimePicker v-model="duedate"
@@ -20,7 +20,6 @@
 		</Actions>
 	</div>
 </template>
-
 <script>
 import { DatetimePicker, Actions, ActionButton } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
@@ -41,9 +40,13 @@ export default {
 			type: Object,
 			default: null,
 		},
-		activeTab: {
+		activeTabs: {
+			type: Array,
+			default: () => [],
+		},
+		currentTab: {
 			type: String,
-			default: null,
+			default: '',
 		},
 	},
 	data() {
@@ -133,10 +136,20 @@ export default {
 	watch: {
 		card() {
 			this.initialize()
+			if (this.copiedCard.duedate) {
+				this.$emit('active-tab', 'duedate')
+			} else {
+				this.$emit('remove-active-tab', 'duedate')
+			}
 		},
 	},
 	mounted() {
 		this.initialize()
+		if (this.copiedCard.duedate) {
+			this.$emit('active-tab', 'duedate')
+		} else {
+			this.$emit('remove-active-tab', 'duedate')
+		}
 	},
 	methods: {
 		async initialize() {
@@ -155,7 +168,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.section-details {
+.section-details{
 	margin-right: 5px;
 	display: flex;
 	align-items: flex-start;
@@ -163,7 +176,7 @@ export default {
 </style>
 
 <style>
-.section-details .mx-input {
+.section-details .mx-input{
 	height: 36px !important;
 	margin: 0;
 }

src/components/card/MembersTab.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-show="!['project', 'attachment'].includes(activeTab)"
+	<div v-if="activeTabs.includes('members') || (assignedUsers && assignedUsers.length > 0)"
-		v-if="activeTab === 'members' || (assignedUsers && assignedUsers.length > 0)"
+		v-show="!['project', 'attachment'].includes(currentTab)"
 		class="section-details">
 		<div v-if="showSelelectMembers" @mouseleave="showSelelectMembers = false">
 			<Multiselect v-if="canEdit"
@@ -65,9 +65,13 @@ export default {
 			type: Object,
 			default: null,
 		},
-		activeTab: {
+		activeTabs: {
+			type: Array,
+			default: () => [],
+		},
+		currentTab: {
 			type: String,
-			default: null,
+			default: '',
 		},
 	},
 	data() {
@@ -110,6 +114,13 @@ export default {
 		card() {
 			this.initialize()
 		},
+		assignedUsers(value) {
+			if (value.length > 0) {
+				this.$emit('active-tab', 'members')
+			} else {
+				this.$emit('remove-active-tab', 'members')
+			}
+		},
 	},
 	mounted() {
 		this.initialize()
@@ -172,8 +183,8 @@ export default {
 	box-sizing: border-box;
 	display: flex;
 	height: 32px;
-	width: 32px;
+	width: 34px;
-	padding: 9px;
+	padding: 5px 9px;
 	align-items: center;
 	justify-content: center;
 	margin-left: 5px;

src/components/card/ProjectTab.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="activeTab === 'project'" class="section-details">
+	<div v-if="activeTabs.includes('project')" class="section-details">
-		<div class="section-wrapper" @click="$emit('active-tab', 'project')">
+		<div class="section-wrapper">
 			<CollectionList v-if="card.id"
 				:id="`${card.id}`"
 				:name="card.title"
@@ -19,21 +19,11 @@ export default {
 			type: Object,
 			default: null,
 		},
-		activeTab: {
+		activeTabs: {
-			type: String,
+			type: Array,
-			default: null,
+			default: () => [],
 		},
 	},
-	data() {
-		return {
-		}
-	},
-	computed: {
-	},
-	mounted() {
-	},
-	methods: {
-	},
 }
 </script>
 

src/components/card/TagsTab.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-show="!['project', 'attachment'].includes(activeTab)"
+	<div v-if="activeTabs.includes('tags') || card.labels.length > 0"
-		v-if="activeTab === 'tags' || card.labels.length > 0"
+		v-show="!['project', 'attachment'].includes(currentTab)"
 		class="section-details">
 		<div v-if="showSelelectTags || card.labels.length <= 0" @mouseleave="showSelelectTags = false">
 			<Multiselect v-model="assignedLabels"
@@ -53,9 +53,13 @@ export default {
 			type: Object,
 			default: null,
 		},
-		activeTab: {
+		activeTabs: {
+			type: Array,
+			default: () => [],
+		},
+		currentTab: {
 			type: String,
-			default: null,
+			default: '',
 		},
 	},
 	data() {
@@ -74,8 +78,20 @@ export default {
 			return [...this.currentBoard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
 	},
+	watch: {
+		card(value) {
+			if (value.labels.length > 0) {
+				this.$emit('active-tab', 'tags')
+			} else {
+				this.$emit('remove-active-tab', 'tags')
+			}
+		},
+	},
 	mounted() {
 		this.initialize()
+		if (this.card.labels.length > 0) {
+			this.$emit('active-tab', 'tags')
+		}
 	},
 	methods: {
 		add() {
@@ -140,11 +156,11 @@ export default {
 
 .select-tag {
 	height: 32px;
-	width: 32px;
+  width: 34px;
-	padding: 5px 7px;
+  padding: 5px 8px;
 }
 
-.tag {
+.tag{
 	padding: 0px 5px;
 	border-radius: 15px;
 }