From 859e3494e5a2febf21daba2aaaf014a6ffa8e925 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 4 Nov 2020 17:42:46 +0100
Subject: [PATCH] Move details and description to dedicated component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/card/CardSidebar.vue           | 567 +-----------------
 src/components/card/CardSidebarTabDetails.vue | 379 ++++++++++++
 src/components/card/Description.vue           | 292 +++++++++
 3 files changed, 681 insertions(+), 557 deletions(-)
 create mode 100644 src/components/card/CardSidebarTabDetails.vue
 create mode 100644 src/components/card/Description.vue

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 0da380adc..d57de2704 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppSidebar v-if="currentBoard && currentCard && copiedCard"
+	<AppSidebar v-if="currentBoard && currentCard"
 		:title="title"
 		:subtitle="subtitle"
 		:title-editable="titleEditable"
@@ -43,135 +43,7 @@
 			:order="0"
 			:name="t('deck', 'Details')"
 			icon="icon-home">
-			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
-					<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
-				</div>
-				<div class="section-details">
-					<Multiselect v-model="assignedLabels"
-						:multiple="true"
-						:disabled="!canEdit"
-						:options="labelsSorted"
-						:placeholder="t('deck', 'Assign a tag to this card…')"
-						:taggable="true"
-						label="title"
-						track-by="id"
-						@select="addLabelToCard"
-						@remove="removeLabelFromCard">
-						<template #option="scope">
-							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
-								{{ scope.option.title }}
-							</div>
-						</template>
-						<template #tag="scope">
-							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
-								{{ scope.option.title }}
-							</div>
-						</template>
-					</Multiselect>
-				</div>
-			</div>
-
-			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group">
-					<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
-				</div>
-				<div class="section-details">
-					<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>
-			</div>
-
-			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark">
-					<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
-				</div>
-				<div class="section-details">
-					<DatetimePicker v-model="duedate"
-						:placeholder="t('deck', 'Set a due date')"
-						type="datetime"
-						:minute-step="5"
-						:show-second="false"
-						:lang="lang"
-						:format="format"
-						:disabled="saving || !canEdit"
-						confirm />
-					<Actions v-if="canEdit">
-						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
-							{{ t('deck', 'Remove due date') }}
-						</ActionButton>
-					</Actions>
-				</div>
-			</div>
-
-			<div class="section-wrapper">
-				<CollectionList v-if="currentCard.id"
-					:id="`${currentCard.id}`"
-					:name="currentCard.title"
-					type="deck-card" />
-			</div>
-
-			<h5>
-				{{ t('deck', 'Description') }}
-				<span v-if="copiedCard.descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
-				<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
-				<a v-tooltip="t('deck', 'Formatting help')"
-					href="https://deck.readthedocs.io/en/latest/Markdown/"
-					target="_blank"
-					class="icon icon-info" />
-				<Actions v-if="canEdit">
-					<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
-						{{ t('deck', 'Edit description') }}
-					</ActionButton>
-					<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
-						{{ t('deck', 'View description') }}
-					</ActionButton>
-				</Actions>
-				<Actions v-if="canEdit">
-					<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
-						{{ t('deck', 'Add Attachment') }}
-					</ActionButton>
-				</Actions>
-			</h5>
-
-			<div v-if="!descriptionEditing"
-				id="description-preview"
-				@click="clickedPreview"
-				v-html="renderedDescription" />
-			<VueEasymde v-else
-				:key="copiedCard.id"
-				ref="markdownEditor"
-				v-model="copiedCard.description"
-				:configs="mdeConfig"
-				@input="updateDescription"
-				@blur="saveDescription" />
+			<CardSidebarTabDetails :card="currentCard" />
 		</AppSidebarTab>
 
 		<AppSidebarTab id="attachments"
@@ -196,45 +68,19 @@
 			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
 		</AppSidebarTab>
-		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
-			<div class="modal__content">
-				<h3>{{ t('deck', 'Choose attachment') }}</h3>
-				<AttachmentList
-					:card-id="currentCard.id"
-					:selectable="true"
-					@selectAttachment="addAttachment" />
-			</div>
-		</Modal>
 	</AppSidebar>
 </template>
 
 <script>
-import { Avatar, Actions, ActionButton, Multiselect, AppSidebar, AppSidebarTab, DatetimePicker, Modal } from '@nextcloud/vue'
+import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
-import Color from '../../mixins/color'
-import { CollectionList } from 'nextcloud-vue-collections'
+import CardSidebarTabDetails from './CardSidebarTabDetails'
 import CardSidebarTabAttachments from './CardSidebarTabAttachments'
 import CardSidebarTabComments from './CardSidebarTabComments'
 import CardSidebarTabActivity from './CardSidebarTabActivity'
-import MarkdownIt from 'markdown-it'
-import MarkdownItTaskLists from 'markdown-it-task-lists'
-import { formatFileSize } from '@nextcloud/files'
 import relativeDate from '../../mixins/relativeDate'
-import AttachmentList from './AttachmentList'
-import { generateUrl } from '@nextcloud/router'
-import {
-	getLocale,
-	getDayNamesMin,
-	getFirstDay,
-	getMonthNamesShort,
-} from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
-import { showError } from '@nextcloud/dialogs'
 
-const markdownIt = new MarkdownIt({
-	linkify: true,
-})
-markdownIt.use(MarkdownItTaskLists, { enabled: true, label: true, labelAfter: true })
+import { showError } from '@nextcloud/dialogs'
 
 const capabilities = window.OC.getCapabilities()
 
@@ -243,20 +89,13 @@ export default {
 	components: {
 		AppSidebar,
 		AppSidebarTab,
-		Multiselect,
-		DatetimePicker,
-		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
-		Actions,
 		ActionButton,
-		Avatar,
-		CollectionList,
 		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
-		Modal,
-		AttachmentList,
+		CardSidebarTabDetails,
 	},
-	mixins: [Color, relativeDate],
+	mixins: [relativeDate],
 	props: {
 		id: {
 			type: Number,
@@ -265,42 +104,9 @@ export default {
 	},
 	data() {
 		return {
-			assignedUsers: null,
-			addedLabelToCard: null,
-			copiedCard: null,
-			assignedLabels: null,
-			locale: getLocale(),
-
-			saving: false,
-			markdownIt: null,
 			titleEditable: false,
 			titleEditing: '',
-			descriptionEditing: false,
-			mdeConfig: {
-				autoDownloadFontAwesome: false,
-				spellChecker: false,
-				autofocus: true,
-				autosave: { enabled: false, uniqueId: 'unique' },
-				toolbar: false,
-			},
-			descriptionSaveTimeout: null,
-			descriptionSaving: false,
 			hasActivity: capabilities && capabilities.activity,
-			modalShow: false,
-			lang: {
-				days: getDayNamesMin(),
-				months: getMonthNamesShort(),
-				formatLocale: {
-					firstDayOfWeek: getFirstDay() === 0 ? 7 : getFirstDay(),
-				},
-				placeholder: {
-					date: t('deck', 'Select Date'),
-				},
-			},
-			format: {
-				stringify: this.stringify,
-				parse: this.parse,
-			},
 		}
 	},
 	computed: {
@@ -312,166 +118,14 @@ export default {
 		title() {
 			return this.titleEditable ? this.titleEditing : this.currentCard.title
 		},
-		attachments() {
-			return [...this.$store.getters.attachmentsByCard(this.id)].sort((a, b) => b.id - a.id)
-		},
-		mimetypeForAttachment() {
-			return (mimetype) => {
-				const url = OC.MimeType.getIconUrl(mimetype)
-				const styles = {
-					'background-image': `url("${url}")`,
-				}
-				return styles
-			}
-		},
-		attachmentUrl() {
-			return (attachment) => generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
-		},
-		formattedFileSize() {
-			return (filesize) => formatFileSize(filesize)
-		},
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
 		},
 		subtitle() {
 			return t('deck', 'Modified') + ': ' + this.relativeDate(this.currentCard.lastModified * 1000) + ' ' + t('deck', 'Created') + ': ' + this.relativeDate(this.currentCard.createdAt * 1000)
 		},
-		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
-			})
-		},
-		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
-			},
-		},
-		renderedDescription() {
-			return markdownIt.render(this.copiedCard.description || '')
-		},
-		labelsSorted() {
-			return [...this.currentBoard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
-		},
-	},
-	watch: {
-		currentCard() {
-			this.initialize()
-		},
-	},
-	mounted() {
-		this.initialize()
 	},
 	methods: {
-		async initialize() {
-			if (!this.currentCard) {
-				return
-			}
-
-			if (this.copiedCard) {
-				await this.saveDescription()
-			}
-
-			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
-			this.assignedLabels = [...this.currentCard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
-
-			if (this.currentCard.assignedUsers && this.currentCard.assignedUsers.length > 0) {
-				this.assignedUsers = this.currentCard.assignedUsers.map((item) => ({
-					...item.participant,
-					isNoUser: item.participant.type !== 0,
-					multiselectKey: item.participant.type + ':' + item.participant.primaryKey,
-				}))
-			} else {
-				this.assignedUsers = []
-			}
-
-			this.desc = this.currentCard.description
-		},
-		showEditor() {
-			if (!this.canEdit) {
-				return
-			}
-			this.descriptionEditing = true
-		},
-		hideEditor() {
-			this.descriptionEditing = false
-		},
-		showAttachmentModal() {
-			this.modalShow = true
-		},
-		addAttachment(attachment) {
-			const descString = this.$refs.markdownEditor.easymde.value()
-			let embed = ''
-			if (attachment.extendedData.mimetype.includes('image')) {
-				embed = '!'
-			}
-			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
-			this.$refs.markdownEditor.easymde.value(descString + '\n' + attachmentString)
-			this.modalShow = false
-		},
-		clickedPreview(e) {
-			if (e.target.getAttribute('type') === 'checkbox') {
-				const clickedIndex = [...document.querySelector('#description-preview').querySelectorAll('input')].findIndex((li) => li.id === e.target.id)
-				const reg = /\[(X|\s|_|-)\]/ig
-				let nth = 0
-				const updatedDescription = this.copiedCard.description.replace(reg, (match, i, original) => {
-					let result = match
-					if ('' + nth++ === '' + clickedIndex) {
-						if (match.match(/^\[\s\]/i)) {
-							result = match.replace(/\[\s\]/i, '[x]')
-						}
-						if (match.match(/^\[x\]/i)) {
-							result = match.replace(/\[x\]/i, '[ ]')
-						}
-						return result
-					}
-					return match
-				})
-				this.$set(this.copiedCard, 'description', updatedDescription)
-				this.$store.dispatch('updateCardDesc', this.copiedCard)
-			}
-		},
-		setDue() {
-			this.$store.dispatch('updateCardDue', this.copiedCard)
-		},
-		removeDue() {
-			this.copiedCard.duedate = null
-			this.$store.dispatch('updateCardDue', this.copiedCard)
-		},
-		async saveDescription() {
-			if (!Object.prototype.hasOwnProperty.call(this.copiedCard, 'descriptionLastEdit') || this.descriptionSaving) {
-				return
-			}
-			this.descriptionSaving = true
-			await this.$store.dispatch('updateCardDesc', this.copiedCard)
-			delete this.copiedCard.descriptionLastEdit
-			this.descriptionSaving = false
-		},
 		handleUpdateTitleEditable(value) {
 			this.titleEditable = value
 			if (value) {
@@ -486,72 +140,14 @@ export default {
 				showError(t('deck', 'The title cannot be empty.'))
 				return
 			}
-			this.$set(this.copiedCard, 'title', this.titleEditing)
 			this.titleEditable = false
-			this.$store.dispatch('updateCardTitle', this.copiedCard)
-		},
-		updateDescription() {
-			this.copiedCard.descriptionLastEdit = Date.now()
-			clearTimeout(this.descriptionSaveTimeout)
-			this.descriptionSaveTimeout = setTimeout(async() => {
-				 await this.saveDescription()
-			}, 2500)
+			this.$store.dispatch('updateCardTitle', { ...this.currentCard, title: this.titleEditing })
 		},
 
 		closeSidebar() {
 			this.$router.push({ name: 'board' })
 		},
 
-		assignUserToCard(user) {
-			this.$store.dispatch('assignCardToUser', {
-				card: this.copiedCard,
-				assignee: {
-					userId: user.uid,
-					type: user.type,
-				},
-			})
-		},
-
-		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)
-		},
-
-		removeLabelFromCard(removedLabel) {
-
-			const removeIndex = this.copiedCard.labels.findIndex((label) => {
-				return label.id === removedLabel.id
-			})
-			if (removeIndex !== -1) {
-				this.copiedCard.labels.splice(removeIndex, 1)
-			}
-
-			const data = {
-				card: this.copiedCard,
-				labelId: removedLabel.id,
-			}
-			this.$store.dispatch('removeLabel', data)
-		},
-		stringify(date) {
-			return moment(date).locale(this.locale).format('LLL')
-		},
-		parse(value) {
-			return moment(value).toDate()
-		},
 		showModal() {
 			this.$store.dispatch('setCardDetailsInModal', true)
 		},
@@ -559,27 +155,6 @@ export default {
 }
 </script>
 
-<style>
-	@import '~easymde/dist/easymde.min.css';
-
-	.vue-easymde, .CodeMirror {
-		border: none;
-		margin: 0;
-		padding: 0;
-		background-color: var(--color-main-background);
-		color: var(--color-main-text);
-	}
-
-	.editor-preview,
-	.editor-statusbar {
-		display: none;
-	}
-
-	#app-sidebar .app-sidebar-header__desc h4 {
-		font-size: 12px !important;
-	}
-</style>
-
 <style lang="scss" scoped>
 
 	// FIXME: Obivously we should at some point not randomly reuse the sidebar component
@@ -612,6 +187,8 @@ export default {
 
 			section {
 				min-height: auto;
+				display: flex;
+				flex-direction: column;
 			}
 
 			#emptycontent, .emptycontent {
@@ -620,128 +197,4 @@ export default {
 		}
 	}
 
-	h5 {
-		border-bottom: 1px solid var(--color-border);
-		margin-top: 20px;
-		margin-bottom: 5px;
-		color: var(--color-text-maxcontrast);
-
-		.icon-info {
-			display: inline-block;
-			width: 32px;
-			height: 16px;
-			float: right;
-			opacity: .7;
-		}
-
-		.icon-attach {
-			background-size: 16px;
-			float: right;
-			margin-top: -14px;
-			opacity: .7;
-		}
-
-		.icon-toggle, .icon-rename {
-			float: right;
-			margin-top: -14px;
-		}
-	}
-
-	aside::v-deep section {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.section-wrapper {
-		display: flex;
-		max-width: 100%;
-		margin-top: 10px;
-
-		.section-label {
-			background-position: 0px center;
-			width: 28px;
-			margin-left: 9px;
-			flex-shrink: 0;
-		}
-
-		.section-details {
-			flex-grow: 1;
-
-			button.action-item--single {
-				margin-top: -6px;
-			}
-		}
-	}
-
-	.tag {
-		flex-grow: 0;
-		flex-shrink: 1;
-		overflow: hidden;
-		padding: 0px 5px;
-		border-radius: 15px;
-		font-size: 85%;
-		margin-right: 3px;
-	}
-
-	.avatarLabel {
-		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;
-	}
-
-	#description-preview {
-		min-height: 100px;
-
-		&::v-deep {
-			@import './../../css/markdown';
-		}
-
-		&::v-deep input {
-			min-height: auto;
-		}
-
-		&::v-deep a {
-			text-decoration: underline;
-		}
-	}
-
-	.modal__content {
-		width: 25vw;
-		min-width: 250px;
-		min-height: 120px;
-		margin: 20px;
-		padding-bottom: 20px;
-		display: flex;
-		flex-direction: column;
-
-		&::v-deep .attachment-list {
-			flex-shrink: 1;
-			overflow: scroll;
-			max-height: 50vh;
-		}
-	}
-
 </style>
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
new file mode 100644
index 000000000..898f60c89
--- /dev/null
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -0,0 +1,379 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div v-if="copiedCard">
+		<div class="section-wrapper">
+			<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
+				<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
+			</div>
+			<div class="section-details">
+				<Multiselect v-model="assignedLabels"
+					:multiple="true"
+					:disabled="!canEdit"
+					:options="labelsSorted"
+					:placeholder="t('deck', 'Assign a tag to this card…')"
+					:taggable="true"
+					label="title"
+					track-by="id"
+					@select="addLabelToCard"
+					@remove="removeLabelFromCard">
+					<template #option="scope">
+						<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
+							{{ scope.option.title }}
+						</div>
+					</template>
+					<template #tag="scope">
+						<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
+							{{ scope.option.title }}
+						</div>
+					</template>
+				</Multiselect>
+			</div>
+		</div>
+
+		<div class="section-wrapper">
+			<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group">
+				<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
+			</div>
+			<div class="section-details">
+				<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>
+		</div>
+
+		<div class="section-wrapper">
+			<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark">
+				<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
+			</div>
+			<div class="section-details">
+				<DatetimePicker v-model="duedate"
+					:placeholder="t('deck', 'Set a due date')"
+					type="datetime"
+					:minute-step="5"
+					:show-second="false"
+					:lang="lang"
+					:formatter="format"
+					:disabled="saving || !canEdit"
+					confirm />
+				<Actions v-if="canEdit">
+					<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
+						{{ t('deck', 'Remove due date') }}
+					</ActionButton>
+				</Actions>
+			</div>
+		</div>
+
+		<div class="section-wrapper">
+			<CollectionList v-if="card.id"
+				:id="`${card.id}`"
+				:name="card.title"
+				type="deck-card" />
+		</div>
+
+		<Description :card="card" />
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import moment from '@nextcloud/moment'
+import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
+
+import { CollectionList } from 'nextcloud-vue-collections'
+import Color from '../../mixins/color'
+import {
+	getLocale,
+	getDayNamesMin,
+	getFirstDay,
+	getMonthNamesShort,
+} from '@nextcloud/l10n'
+import Description from './Description'
+
+export default {
+	name: 'CardSidebarTabDetails',
+	components: {
+		Description,
+		Multiselect,
+		DatetimePicker,
+		Actions,
+		ActionButton,
+		Avatar,
+		CollectionList,
+	},
+	mixins: [Color],
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			saving: false,
+			assignedUsers: null,
+			addedLabelToCard: null,
+			copiedCard: null,
+			assignedLabels: null,
+			locale: getLocale(),
+			lang: {
+				days: getDayNamesMin(),
+				months: getMonthNamesShort(),
+				formatLocale: {
+					firstDayOfWeek: getFirstDay() === 0 ? 7 : getFirstDay(),
+				},
+				placeholder: {
+					date: t('deck', 'Select Date'),
+				},
+			},
+			format: {
+				stringify: this.stringify,
+				parse: this.parse,
+			},
+		}
+	},
+	computed: {
+		...mapState({
+			currentBoard: state => state.currentBoard,
+			cardDetailsInModal: state => state.cardDetailsInModal,
+		}),
+		...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
+			})
+		},
+		duedate: {
+			get() {
+				return this.card.duedate ? new Date(this.card.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
+			},
+		},
+
+		labelsSorted() {
+			return [...this.currentBoard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
+	},
+	watch: {
+		card() {
+			this.initialize()
+		},
+	},
+	mounted() {
+		this.initialize()
+	},
+	methods: {
+		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 = []
+			}
+		},
+
+		setDue() {
+			this.$store.dispatch('updateCardDue', this.copiedCard)
+		},
+		removeDue() {
+			this.copiedCard.duedate = null
+			this.$store.dispatch('updateCardDue', this.copiedCard)
+		},
+
+		assignUserToCard(user) {
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
+		},
+
+		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)
+		},
+
+		removeLabelFromCard(removedLabel) {
+
+			const removeIndex = this.copiedCard.labels.findIndex((label) => {
+				return label.id === removedLabel.id
+			})
+			if (removeIndex !== -1) {
+				this.copiedCard.labels.splice(removeIndex, 1)
+			}
+
+			const data = {
+				card: this.copiedCard,
+				labelId: removedLabel.id,
+			}
+			this.$store.dispatch('removeLabel', data)
+		},
+		stringify(date) {
+			return moment(date).locale(this.locale).format('LLL')
+		},
+		parse(value) {
+			return moment(value).toDate()
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+
+.section-wrapper {
+	display: flex;
+	max-width: 100%;
+	margin-top: 10px;
+
+	.section-label {
+		background-position: 0px center;
+		width: 28px;
+		margin-left: 9px;
+		flex-shrink: 0;
+	}
+
+	.section-details {
+		flex-grow: 1;
+
+		button.action-item--single {
+			margin-top: -6px;
+		}
+	}
+}
+
+.tag {
+	flex-grow: 0;
+	flex-shrink: 1;
+	overflow: hidden;
+	padding: 0px 5px;
+	border-radius: 15px;
+	font-size: 85%;
+	margin-right: 3px;
+}
+
+.avatarLabel {
+	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>
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
new file mode 100644
index 000000000..ceab646da
--- /dev/null
+++ b/src/components/card/Description.vue
@@ -0,0 +1,292 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div>
+		<h5>
+			{{ t('deck', 'Description') }}
+			<span v-if="descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
+			<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
+			<a v-tooltip="t('deck', 'Formatting help')"
+				href="https://deck.readthedocs.io/en/latest/Markdown/"
+				target="_blank"
+				class="icon icon-info" />
+			<Actions v-if="canEdit">
+				<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
+					{{ t('deck', 'Edit description') }}
+				</ActionButton>
+				<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
+					{{ t('deck', 'View description') }}
+				</ActionButton>
+			</Actions>
+			<Actions v-if="canEdit">
+				<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
+					{{ t('deck', 'Add Attachment') }}
+				</ActionButton>
+			</Actions>
+		</h5>
+
+		<div v-if="!descriptionEditing"
+			id="description-preview"
+			@click="clickedPreview"
+			v-html="renderedDescription" />
+		<VueEasymde v-else
+			:key="card.id"
+			ref="markdownEditor"
+			v-model="description"
+			:configs="mdeConfig"
+			@input="updateDescription"
+			@blur="saveDescription" />
+
+		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
+			<div class="modal__content">
+				<h3>{{ t('deck', 'Choose attachment') }}</h3>
+				<AttachmentList
+					:card-id="card.id"
+					:selectable="true"
+					@selectAttachment="addAttachment" />
+			</div>
+		</Modal>
+	</div>
+</template>
+
+<script>
+import MarkdownIt from 'markdown-it'
+import MarkdownItTaskLists from 'markdown-it-task-lists'
+import AttachmentList from './AttachmentList'
+import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { formatFileSize } from '@nextcloud/files'
+import { generateUrl } from '@nextcloud/router'
+import { mapState, mapGetters } from 'vuex'
+
+const markdownIt = new MarkdownIt({
+	linkify: true,
+})
+markdownIt.use(MarkdownItTaskLists, { enabled: true, label: true, labelAfter: true })
+
+export default {
+	name: 'Description',
+	components: {
+		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
+		Actions,
+		ActionButton,
+		Modal,
+		AttachmentList,
+	},
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			description: '',
+			markdownIt: null,
+			descriptionEditing: false,
+			mdeConfig: {
+				autoDownloadFontAwesome: false,
+				spellChecker: false,
+				autofocus: true,
+				autosave: { enabled: false, uniqueId: 'unique' },
+				toolbar: false,
+			},
+			descriptionSaveTimeout: null,
+			descriptionSaving: false,
+			descriptionLastEdit: 0,
+			modalShow: false,
+		}
+	},
+	computed: {
+		...mapState({
+			currentBoard: state => state.currentBoard,
+			cardDetailsInModal: state => state.cardDetailsInModal,
+		}),
+		...mapGetters(['canEdit']),
+		attachments() {
+			return [...this.$store.getters.attachmentsByCard(this.id)].sort((a, b) => b.id - a.id)
+		},
+		mimetypeForAttachment() {
+			return (mimetype) => {
+				const url = OC.MimeType.getIconUrl(mimetype)
+				const styles = {
+					'background-image': `url("${url}")`,
+				}
+				return styles
+			}
+		},
+		attachmentUrl() {
+			return (attachment) => generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
+		},
+		formattedFileSize() {
+			return (filesize) => formatFileSize(filesize)
+		},
+		renderedDescription() {
+			return markdownIt.render(this.card.description || '')
+		},
+	},
+	methods: {
+		showEditor() {
+			if (!this.canEdit) {
+				return
+			}
+			this.descriptionEditing = true
+			this.description = this.card.description
+		},
+		hideEditor() {
+			this.descriptionEditing = false
+		},
+		showAttachmentModal() {
+			this.modalShow = true
+		},
+		addAttachment(attachment) {
+			const descString = this.$refs.markdownEditor.easymde.value()
+			let embed = ''
+			if (attachment.extendedData.mimetype.includes('image')) {
+				embed = '!'
+			}
+			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
+			this.$refs.markdownEditor.easymde.value(descString + '\n' + attachmentString)
+			this.modalShow = false
+		},
+		clickedPreview(e) {
+			if (e.target.getAttribute('type') === 'checkbox') {
+				const clickedIndex = [...document.querySelector('#description-preview').querySelectorAll('input')].findIndex((li) => li.id === e.target.id)
+				const reg = /\[(X|\s|_|-)\]/ig
+				let nth = 0
+				const updatedDescription = this.description.replace(reg, (match, i, original) => {
+					let result = match
+					if ('' + nth++ === '' + clickedIndex) {
+						if (match.match(/^\[\s\]/i)) {
+							result = match.replace(/\[\s\]/i, '[x]')
+						}
+						if (match.match(/^\[x\]/i)) {
+							result = match.replace(/\[x\]/i, '[ ]')
+						}
+						return result
+					}
+					return match
+				})
+				this.$store.dispatch('updateCardDesc', { ...this.card, description: updatedDescription })
+			}
+		},
+		async saveDescription() {
+			if (this.descriptionLastEdit === 0 || this.descriptionSaving) {
+				return
+			}
+			this.descriptionSaving = true
+			await this.$store.dispatch('updateCardDesc', { ...this.card, description: this.description })
+			this.descriptionLastEdit = 0
+			this.descriptionSaving = false
+		},
+		updateDescription() {
+			this.descriptionLastEdit = Date.now()
+			clearTimeout(this.descriptionSaveTimeout)
+			this.descriptionSaveTimeout = setTimeout(async() => {
+				await this.saveDescription()
+			}, 2500)
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+
+.modal__content {
+	width: 25vw;
+	min-width: 250px;
+	min-height: 120px;
+	margin: 20px;
+	padding-bottom: 20px;
+	display: flex;
+	flex-direction: column;
+
+	&::v-deep .attachment-list {
+		flex-shrink: 1;
+		overflow: scroll;
+		max-height: 50vh;
+	}
+}
+
+#description-preview {
+	min-height: 100px;
+
+	&::v-deep {
+		@import './../../css/markdown';
+	}
+
+	&::v-deep input {
+		min-height: auto;
+	}
+
+	&::v-deep a {
+		text-decoration: underline;
+	}
+}
+
+h5 {
+	border-bottom: 1px solid var(--color-border);
+	margin-top: 20px;
+	margin-bottom: 5px;
+	color: var(--color-text-maxcontrast);
+
+	.icon-info {
+		display: inline-block;
+		width: 32px;
+		height: 16px;
+		float: right;
+		opacity: .7;
+	}
+
+	.icon-attach {
+		background-size: 16px;
+		float: right;
+		margin-top: -14px;
+		opacity: .7;
+	}
+
+	.icon-toggle, .icon-rename {
+		float: right;
+		margin-top: -14px;
+	}
+}
+
+</style>
+<style>
+@import '~easymde/dist/easymde.min.css';
+
+.vue-easymde, .CodeMirror {
+	border: none;
+	margin: 0;
+	padding: 0;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.editor-preview,
+.editor-statusbar {
+	display: none;
+}
+
+#app-sidebar .app-sidebar-header__desc h4 {
+	font-size: 12px !important;
+}
+</style>