attachents in details view

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/components/card/AttachmentList.vue

@@ -21,58 +21,65 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
-		<button class="icon-upload" @click="clickAddNewAttachmment()">
-			{{ t('deck', 'Upload attachment') }}
-		</button>
-		<input ref="localAttachments"
-			type="file"
-			style="display: none;"
-			multiple
-			@change="handleUploadFile">
-		<ul class="attachment-list">
-			<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
-				<a class="fileicon" :style="mimetypeForAttachment('none')" />
-				<div class="details">
-					<a>
-						<div class="filename">
-							<span class="basename">{{ attachment.name }}</span>
-						</div>
-						<progress :value="attachment.progress" max="100" />
-					</a>
-				</div>
-			</li>
-			<li v-for="attachment in attachments"
-				:key="attachment.id"
-				class="attachment">
-				<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
-				<div class="details">
-					<a :href="attachmentUrl(attachment)" target="_blank">
-						<div class="filename">
-							<span class="basename">{{ attachment.data }}</span>
-						</div>
-						<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
-						<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
-						<span class="filedate">{{ attachment.createdBy }}</span>
-					</a>
-				</div>
-				<Actions v-if="selectable">
-					<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
-						{{ t('deck', 'Add this attachment') }}
-					</ActionButton>
-				</Actions>
-				<Actions v-if="removable">
-					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
-						{{ t('deck', 'Delete Attachment') }}
-					</ActionButton>
+	<div>
+		<h5>
+			{{ t('deck', 'Attachments') }}
+			<Actions>
+				<ActionButton icon="icon-upload" @click="clickAddNewAttachmment()">
+					{{ t('deck', 'Upload attachment') }}
+				</ActionButton>
+			</Actions>
+		</h5>
+		<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
+			<input ref="localAttachments"
+				type="file"
+				style="display: none;"
+				multiple
+				@change="handleUploadFile">
+			<ul class="attachment-list">
+				<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
+					<a class="fileicon" :style="mimetypeForAttachment('none')" />
+					<div class="details">
+						<a>
+							<div class="filename">
+								<span class="basename">{{ attachment.name }}</span>
+							</div>
+							<progress :value="attachment.progress" max="100" />
+						</a>
+					</div>
+				</li>
+				<li v-for="attachment in attachments"
+					:key="attachment.id"
+					class="attachment">
+					<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
+					<div class="details">
+						<a :href="attachmentUrl(attachment)" target="_blank">
+							<div class="filename">
+								<span class="basename">{{ attachment.data }}</span>
+							</div>
+							<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
+							<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
+							<span class="filedate">{{ attachment.createdBy }}</span>
+						</a>
+					</div>
+					<Actions v-if="selectable">
+						<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
+							{{ t('deck', 'Add this attachment') }}
+						</ActionButton>
+					</Actions>
+					<Actions v-if="removable">
+						<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
+							{{ t('deck', 'Delete Attachment') }}
+						</ActionButton>
 
-					<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
-						{{ t('deck', 'Restore Attachment') }}
-					</ActionButton>
-				</Actions>
-			</li>
-		</ul>
-	</AttachmentDragAndDrop>
+						<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
+							{{ t('deck', 'Restore Attachment') }}
+						</ActionButton>
+					</Actions>
+				</li>
+			</ul>
+		</AttachmentDragAndDrop>
+	</div>
 </template>
 
 <script>
@@ -171,6 +178,21 @@ export default {
 
 <style lang="scss" scoped>
 
+	h5 {
+	border-bottom: 1px solid var(--color-border);
+	margin-top: 20px;
+	margin-bottom: 5px;
+	color: var(--color-text-maxcontrast);
+
+	.icon-upload {
+		background-size: 16px;
+		float: right;
+		margin-top: -14px;
+		opacity: .7;
+	}
+
+}
+
 	.icon-upload {
 		padding-left: 35px;
 		background-position: 10px center;

src/components/card/CardSidebar.vue

@@ -46,13 +46,6 @@
 			<CardSidebarTabDetails :card="currentCard" />
 		</AppSidebarTab>
 
-		<AppSidebarTab id="attachments"
-			:order="1"
-			:name="t('deck', 'Attachments')"
-			icon="icon-attach">
-			<CardSidebarTabAttachments :card="currentCard" />
-		</AppSidebarTab>
-
 		<AppSidebarTab
 			id="comments"
 			:order="2"
@@ -75,7 +68,6 @@
 import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
 import CardSidebarTabDetails from './CardSidebarTabDetails'
-import CardSidebarTabAttachments from './CardSidebarTabAttachments'
 import CardSidebarTabComments from './CardSidebarTabComments'
 import CardSidebarTabActivity from './CardSidebarTabActivity'
 import relativeDate from '../../mixins/relativeDate'
@@ -90,7 +82,6 @@ export default {
 		AppSidebar,
 		AppSidebarTab,
 		ActionButton,
-		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
 		CardSidebarTabDetails,

src/components/card/CardSidebarTabDetails.vue

@@ -117,6 +117,12 @@
 				type="deck-card" />
 		</div>
 
+		<AttachmentList
+			:card-id="card.id"
+			:removable="true"
+			@deleteAttachment="deleteAttachment"
+			@restoreAttachment="restoreAttachment" />
+
 		<Description :key="card.id" :card="card" />
 	</div>
 </template>
@@ -125,7 +131,7 @@
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
 import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
-
+import AttachmentList from './AttachmentList'
 import { CollectionList } from 'nextcloud-vue-collections'
 import Color from '../../mixins/color'
 import {
@@ -146,6 +152,7 @@ export default {
 		ActionButton,
 		Avatar,
 		CollectionList,
+		AttachmentList,
 	},
 	mixins: [Color],
 	props: {
@@ -234,6 +241,12 @@ export default {
 		this.initialize()
 	},
 	methods: {
+		deleteAttachment(attachment) {
+			this.$store.dispatch('deleteAttachment', attachment)
+		},
+		restoreAttachment(attachment) {
+			this.$store.dispatch('restoreAttachment', attachment)
+		},
 		async initialize() {
 			if (!this.card) {
 				return