attachents in details view

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

src/components/card/AttachmentList.vue

@@ -21,10 +21,16 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
+	<div>
-		<button class="icon-upload" @click="clickAddNewAttachmment()">
+		<h5>
+			{{ t('deck', 'Attachments') }}
+			<Actions>
+				<ActionButton icon="icon-upload" @click="clickAddNewAttachmment()">
 					{{ t('deck', 'Upload attachment') }}
-		</button>
+				</ActionButton>
+			</Actions>
+		</h5>
+		<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
 			<input ref="localAttachments"
 				type="file"
 				style="display: none;"
@@ -73,6 +79,7 @@
 				</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