in component outsourced

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

src/components/card/AttachmentList.vue

@@ -37,11 +37,20 @@
 						<span class="filedate">{{ attachment.createdBy }}</span>
 					</a>
 				</div>
-				<Actions>
+				<Actions v-if="selectable">
-					<ActionButton icon="icon-confirm" @click="addAttachment(attachment)">
+					<ActionButton icon="icon-confirm" @click="this.$emit('selectAttachment', attachment)">
 						{{ t('deck', 'Add this attachment') }}
 					</ActionButton>
 				</Actions>
+				<Actions v-if="removable">
+					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
+						{{ t('deck', 'Delete Attachment') }}
+					</ActionButton>
+
+					<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
+						{{ t('deck', 'Restore Attachment') }}
+					</ActionButton>
+				</Actions>
 			</li>
 		</ul>
 	</div>
@@ -64,6 +73,18 @@ export default {
 			type: Number,
 			required: true,
 		},
+		editor: {
+			type: Object,
+			required: false,
+		},
+		selectable: {
+			type: Boolean,
+			required: false,
+		},
+		removable: {
+			type: Boolean,
+			required: false,
+		},
 	},
 	data() {
 		return {
@@ -94,7 +115,22 @@ export default {
 
 	},
 	methods: {
-
+		addAttachment(attachment) {
+			const descString = this.editor.easymde.value()
+			let embed = ''
+			if (attachment.extendedData.mimetype.includes('image')) {
+				embed = '!'
+			}
+			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
+			this.editor.easymde.value(descString + '\n' + attachmentString)
+			this.modalShow = false
+		},
+		deleteAttachment(attachment) {
+			this.$store.dispatch('deleteAttachment', attachment)
+		},
+		restoreAttachment(attachment) {
+			this.$store.dispatch('restoreAttachment', attachment)
+		},
 	},
 }
 </script>

src/components/card/CardSidebar.vue

@@ -183,7 +183,11 @@
 						{{ t('deck', 'Cancel') }}
 					</ActionButton>
 				</Actions> -->
-				<AttachmentList :card-id="currentCard.id" />
+				<AttachmentList
+					:card-id="currentCard.id"
+					:selectable="true"
+					:editor="$refs.markdownEditor"
+					@selectAttachment="addAttachment" />
 			</div>
 		</Modal>
 	</AppSidebar>
@@ -372,6 +376,7 @@ export default {
 			this.modalShow = true
 		},
 		addAttachment(attachment) {
+			console.log('hier')
 			const descString = this.$refs.markdownEditor.easymde.value()
 			let embed = ''
 			if (attachment.extendedData.mimetype.includes('image')) {
@@ -606,88 +611,4 @@ export default {
 		margin: 40px 3px 3px 0;
 	}
 
-	.attachment-list {
-		&.selector {
-			padding: 10px;
-			position: absolute;
-			width: 30%;
-			max-width: 500px;
-			min-width: 200px;
-			max-height: 50%;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			background-color: #eee;
-			z-index: 2;
-			border-radius: 3px;
-			box-shadow: 0 0 3px darkgray;
-			overflow: scroll;
-		}
-		h3.attachment-selector {
-			margin: 0 0 10px;
-			padding: 0;
-			.icon-close {
-				display: inline-block;
-				float: right;
-			}
-		}
-
-		li.attachment {
-			display: flex;
-			padding: 3px;
-			min-height: 44px;
-
-			&.deleted {
-				opacity: .5;
-			}
-
-			.fileicon {
-				display: inline-block;
-				min-width: 32px;
-				width: 32px;
-				height: 32px;
-				background-size: contain;
-			}
-			.details {
-				flex-grow: 1;
-				flex-shrink: 1;
-				min-width: 0;
-				flex-basis: 50%;
-				line-height: 110%;
-				padding: 2px;
-			}
-			.filename {
-				width: 70%;
-				display: flex;
-				.basename {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					padding-bottom: 2px;
-				}
-				.extension {
-					opacity: 0.7;
-				}
-			}
-			.filesize, .filedate {
-				font-size: 90%;
-				color: darkgray;
-			}
-			.app-popover-menu-utils {
-				position: relative;
-				right: -10px;
-				button {
-					height: 32px;
-					width: 42px;
-				}
-			}
-			button.icon-history {
-				width: 44px;
-			}
-			progress {
-				margin-top: 3px;
-			}
-		}
-	}
-
 </style>

src/components/card/CardSidebarTabAttachments.vue

@@ -43,53 +43,28 @@
 						</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>
-						<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="deleteAttachment(attachment)">
-							{{ t('deck', 'Delete Attachment') }}
-						</ActionButton>
 
-						<ActionButton v-else icon="icon-history" @click="restoreAttachment(attachment)">
+				<AttachmentList :card-id="card.id" :removable="true" />
-							{{ t('deck', 'Restore Attachment') }}
-						</ActionButton>
-					</Actions>
-				</li>
 			</ul>
 		</div>
 	</AttachmentDragAndDrop>
 </template>
 
 <script>
-import { Actions, ActionButton } from '@nextcloud/vue'
-import { formatFileSize } from '@nextcloud/files'
-import relativeDate from '../../mixins/relativeDate'
 import { mapState } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import attachmentUpload from '../../mixins/attachmentUpload'
+import AttachmentList from './AttachmentList'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 export default {
 	name: 'CardSidebarTabAttachments',
 	components: {
-		Actions,
-		ActionButton,
 		AttachmentDragAndDrop,
+		AttachmentList,
 	},
-	mixins: [ relativeDate, attachmentUpload ],
+	mixins: [ attachmentUpload ],
 	props: {
 		card: {
 			type: Object,
@@ -122,9 +97,6 @@ export default {
 		attachments() {
 			return [...this.$store.getters.attachmentsByCard(this.card.id)].sort((a, b) => b.id - a.id)
 		},
-		formattedFileSize() {
-			return (filesize) => formatFileSize(filesize)
-		},
 		mimetypeForAttachment() {
 			return (mimetype) => {
 				const url = OC.MimeType.getIconUrl(mimetype)
@@ -134,9 +106,6 @@ export default {
 				return styles
 			}
 		},
-		attachmentUrl() {
-			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
-		},
 		cardId() {
 			return this.card.id
 		},
@@ -156,12 +125,6 @@ export default {
 			this.$refs.localAttachments.click()
 		},
 
-		deleteAttachment(attachment) {
-			this.$store.dispatch('deleteAttachment', attachment)
-		},
-		restoreAttachment(attachment) {
-			this.$store.dispatch('restoreAttachment', attachment)
-		},
 	},
 }
 </script>
@@ -172,19 +135,6 @@ export default {
 		background-position: 10px center;
 	}
 
-	.modal__content {
-		width: 25vw;
-		min-width: 250px;
-		height: 120px;
-		text-align: center;
-		margin: 20px 20px 60px 20px;
-	}
-
-	.modal__content button {
-		float: right;
-		margin: 40px 3px 3px 0;
-	}
-
 	.attachment-list {
 		&.selector {
 			padding: 10px;