attach files in description

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

src/components/card/AttachmentList.vue

@@ -21,54 +21,87 @@
   -->
 
 <template>
-	<div class="attachment-list">
-		<ul>
-			<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>
+	<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">
+		<div class="attachment-list">
+			<ul>
+				<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>
 
-					<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
-						{{ t('deck', 'Restore Attachment') }}
-					</ActionButton>
-				</Actions>
-			</li>
-		</ul>
-	</div>
+				<div class="attachment-list">
+					<ul>
+						<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>
+				</div>
+			</ul>
+		</div>
+	</AttachmentDragAndDrop>
 </template>
 
 <script>
 import { Actions, ActionButton } from '@nextcloud/vue'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import relativeDate from '../../mixins/relativeDate'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
+import { mapState } from 'vuex'
+import { loadState } from '@nextcloud/initial-state'
+import attachmentUpload from '../../mixins/attachmentUpload'
+const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 export default {
 	name: 'AttachmentList',
 	components: {
 		Actions,
 		ActionButton,
+		AttachmentDragAndDrop,
 	},
-	mixins: [relativeDate],
+	mixins: [relativeDate, attachmentUpload],
+
 	props: {
 		cardId: {
 			type: Number,
@@ -83,6 +116,15 @@ export default {
 			required: false,
 		},
 	},
+	data() {
+		return {
+			modalShow: false,
+			file: '',
+			overwriteAttachment: null,
+			isDraggingOver: false,
+			maxUploadSize: maxUploadSizeState,
+		}
+	},
 	computed: {
 		attachments() {
 			return [...this.$store.getters.attachmentsByCard(this.cardId)].sort((a, b) => b.id - a.id)
@@ -102,14 +144,45 @@ export default {
 		formattedFileSize() {
 			return (filesize) => formatFileSize(filesize)
 		},
+		...mapState({
+			currentBoard: state => state.currentBoard,
+		}),
+		isReadOnly() {
+			return !this.$store.getters.canEdit
+		},
+		dropHintText() {
+			if (this.isReadOnly) {
+				return t('deck', 'This board is read only')
+			} else {
+				return t('deck', 'Drop your files to upload')
+			}
+		},
 	},
-	watch: {
-
+	created() {
+		this.$store.dispatch('fetchAttachments', this.cardId)
+	},
+	methods: {
+		handleUploadFile(event) {
+			const files = event.target.files ?? []
+			for (const file of files) {
+				this.onLocalAttachmentSelected(file)
+			}
+			event.target.value = ''
+		},
+		clickAddNewAttachmment() {
+			this.$refs.localAttachments.click()
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+
+	.icon-upload {
+		padding-left: 35px;
+		background-position: 10px center;
+	}
+
 	.attachment-list {
 		&.selector {
 			padding: 10px;