From 021d55226b339dd917d1c8f18669fd53b4cce714 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 14 Feb 2022 10:38:55 +0100
Subject: [PATCH] fix: feedback

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 src/components/card/AttachmentsTab.vue |  6 ++-
 src/components/card/CardModal.vue      | 55 +++++++++++++++-----------
 src/components/card/DueDateTab.vue     | 23 +++++++++--
 src/components/card/MembersTab.vue     | 16 +++++++-
 src/components/card/ProjectTab.vue     |  8 +++-
 src/components/card/TagsTab.vue        | 10 ++++-
 6 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/src/components/card/AttachmentsTab.vue b/src/components/card/AttachmentsTab.vue
index 7a941ef0d..abdd3d416 100644
--- a/src/components/card/AttachmentsTab.vue
+++ b/src/components/card/AttachmentsTab.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="section-details">
+	<div v-if="activeTab === 'attachment'" class="section-details">
 		<AttachmentList
 			:card-id="card.id"
 			:removable="true"
@@ -18,6 +18,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		activeTab: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
diff --git a/src/components/card/CardModal.vue b/src/components/card/CardModal.vue
index cb7edf90b..996b270e1 100644
--- a/src/components/card/CardModal.vue
+++ b/src/components/card/CardModal.vue
@@ -21,56 +21,61 @@
   -->
 
 <template>
-	<div class="container">
+	<div v-if="currentCard" class="container">
 		<div class="top">
 			<h1 class="top-title">
-				Example task 3
+				{{ currentCard.title }}
 			</h1>
 			<p class="top-modified">
-				Modified: 2 days go. Created 3 days ago
+				{{ t('deck', 'Modified') }}: {{ currentCard.lastModified | fromNow }}. {{ t('deck', 'Created') }} {{ currentCard.createdAt | fromNow }}
 			</p>
 		</div>
 		<div class="tabs">
-			<div class="tab members" :class="{active: activeTab === 'default'}" @click="activeTab = 'default'">
+			<div class="tab members" :class="{active: activeTab === 'members'}" @click="activeTab = 'members'">
 				<i class="icon-user icon" />
-				Members
+				{{ t('deck', 'Members') }}
 			</div>
-			<div class="tab tags" :class="{active: activeTab === 'default'}" @click="activeTab = 'default'">
+			<div class="tab tags" :class="{active: activeTab === 'tags'}" @click="activeTab = 'tags'">
 				<i class="icon icon-tag" />
-				Tags
+				{{ t('deck', 'Tags') }}
 			</div>
-			<div class="tab due-date" :class="{active: activeTab === 'default'}" @click="activeTab = 'default'">
+			<div class="tab due-date" :class="{active: activeTab === 'duedate'}" @click="activeTab = 'duedate'">
 				<i class="icon icon-calendar-dark" />
-				Due date
+				{{ t('deck', 'Due date') }}
 			</div>
 			<div class="tab project" :class="{active: activeTab === 'project'}" @click="activeTab = 'project'">
 				<i class="icon icon-deck" />
-				Project
+				{{ t('deck', 'Project') }}
 			</div>
 			<div class="tab attachments" :class="{active: activeTab === 'attachment'}" @click="activeTab = 'attachment'">
 				<i class="icon-attach icon icon-attach-dark" />
-				Attachments
+				{{ t('deck', 'Attachments') }}
 			</div>
 		</div>
 		<div class="content">
 			<div class="content-tabs">
-				<MembersTab v-if="activeTab === 'default'"
+				<MembersTab
 					:card="currentCard"
-					@click="activeTab = 'default'"
+					:active-tab="activeTab"
+					@click="activeTab = 'members'"
 					@active-tab="changeActiveTab" />
-				<TagsTab v-if="activeTab === 'default'"
+				<TagsTab
+					:active-tab="activeTab"
 					:card="currentCard"
-					@click="activeTab = 'default'"
+					@click="activeTab = 'tags'"
 					@active-tab="changeActiveTab" />
-				<DueDateTab v-if="activeTab === 'default'"
+				<DueDateTab
+					:active-tab="activeTab"
 					:card="currentCard"
-					@click="activeTab = 'default'"
+					@click="activeTab = 'duedate'"
 					@active-tab="changeActiveTab" />
-				<ProjectTab v-if="activeTab === 'project'"
+				<ProjectTab
+					:active-tab="activeTab"
 					:card="currentCard"
 					@click="activeTab = 'project'"
 					@active-tab="changeActiveTab" />
-				<AttachmentsTab v-if="activeTab === 'attachment'"
+				<AttachmentsTab
+					:active-tab="activeTab"
 					:card="currentCard"
 					@click="activeTab = 'attachment'"
 					@active-tab="changeActiveTab" />
@@ -79,7 +84,7 @@
 		</div>
 		<div class="activities">
 			<h2 class="activities-title">
-				<div class="icon-flash-black" /> Activity
+				<div class="icon-activity" /> {{ t('deck', 'Activity') }}
 			</h2>
 			<div class="comments">
 				<Avatar :user="currentUser.uid" />
@@ -117,6 +122,7 @@ import ProjectTab from './ProjectTab.vue'
 import AttachmentsTab from './AttachmentsTab.vue'
 import CommentForm from './CommentForm'
 import CommentItem from './CommentItem'
+import moment from '@nextcloud/moment'
 
 const capabilities = window.OC.getCapabilities()
 
@@ -133,6 +139,11 @@ export default {
 		CommentForm,
 		CommentItem,
 	},
+	filters: {
+		fromNow(value) {
+			return moment.unix(value).fromNow()
+		},
+	},
 	mixins: [relativeDate],
 	props: {
 		id: {
@@ -158,7 +169,7 @@ export default {
 			hasActivity: capabilities && capabilities.activity,
 			currentUser: getCurrentUser(),
 			comment: '',
-			activeTab: 'default',
+			activeTab: null,
 		}
 	},
 	computed: {
@@ -278,7 +289,7 @@ export default {
 	align-items: flex-start;
 }
 
-.icon-flash-black {
+.icon-activity {
 	background-image: url(../../../img/flash-black.svg);
 	width: 15px;
 	height: 15px;
diff --git a/src/components/card/DueDateTab.vue b/src/components/card/DueDateTab.vue
index 536c80db8..b70a54da0 100644
--- a/src/components/card/DueDateTab.vue
+++ b/src/components/card/DueDateTab.vue
@@ -1,6 +1,8 @@
 <template>
-	<div v-if="copiedCard" class="section-details">
-		<div @click="$emit('active-tab', 'default')">
+	<div v-if="activeTab === 'duedate' || (copiedCard && copiedCard.duedate)"
+		v-show="!['project', 'attachment'].includes(activeTab)"
+		class="section-details">
+		<div @click="$emit('active-tab', 'duedate')">
 			<DatetimePicker v-model="duedate"
 				:placeholder="t('deck', 'Set a due date')"
 				type="datetime"
@@ -39,6 +41,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		activeTab: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -152,6 +158,17 @@ export default {
 .section-details {
 	margin-right: 5px;
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
+}
+</style>
+
+<style>
+.section-details .mx-input {
+	height: 36px !important;
+	margin: 0;
+}
+
+.section-details .action-item {
+	height: 30px !important;
 }
 </style>
diff --git a/src/components/card/MembersTab.vue b/src/components/card/MembersTab.vue
index 3f61eb831..c8676bf5d 100644
--- a/src/components/card/MembersTab.vue
+++ b/src/components/card/MembersTab.vue
@@ -1,5 +1,7 @@
 <template>
-	<div class="section-details">
+	<div v-show="!['project', 'attachment'].includes(activeTab)"
+		v-if="activeTab === 'members' || (assignedUsers && assignedUsers.length > 0)"
+		class="section-details">
 		<div v-if="showSelelectMembers" @mouseleave="showSelelectMembers = false">
 			<Multiselect v-if="canEdit"
 				v-model="assignedUsers"
@@ -63,6 +65,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		activeTab: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -161,7 +167,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .select-member-btn {
 	box-sizing: border-box;
 	display: flex;
@@ -182,3 +188,9 @@ export default {
 	align-items: center;
 }
 </style>
+
+<style>
+.members .multiselect__tags{
+	height: 34px !important;
+}
+</style>
diff --git a/src/components/card/ProjectTab.vue b/src/components/card/ProjectTab.vue
index 58680d5f8..79777fa7d 100644
--- a/src/components/card/ProjectTab.vue
+++ b/src/components/card/ProjectTab.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="section-details">
-		<div class="section-wrapper" @click="$emit('active-tab', 'default')">
+	<div v-if="activeTab === 'project'" class="section-details">
+		<div class="section-wrapper" @click="$emit('active-tab', 'project')">
 			<CollectionList v-if="card.id"
 				:id="`${card.id}`"
 				:name="card.title"
@@ -19,6 +19,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		activeTab: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
diff --git a/src/components/card/TagsTab.vue b/src/components/card/TagsTab.vue
index 0d9215f2b..b716c3e58 100644
--- a/src/components/card/TagsTab.vue
+++ b/src/components/card/TagsTab.vue
@@ -1,5 +1,7 @@
 <template>
-	<div class="section-details">
+	<div v-show="!['project', 'attachment'].includes(activeTab)"
+		v-if="activeTab === 'tags' || card.labels.length > 0"
+		class="section-details">
 		<div v-if="showSelelectTags || card.labels.length <= 0" @mouseleave="showSelelectTags = false">
 			<Multiselect v-model="assignedLabels"
 				:multiple="true"
@@ -51,6 +53,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		activeTab: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -74,7 +80,7 @@ export default {
 	methods: {
 		add() {
 			this.showSelelectTags = true
-			this.$emit('active-tab', 'default')
+			this.$emit('active-tab', 'tags')
 		},
 		async initialize() {
 			if (!this.card) {