Merge pull request #1610 from nextcloud/enh/attachment-dad-cards

new mixin and component

package-lock.json

@@ -12604,7 +12604,7 @@
 		},
 		"mkdirp": {
 			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+			"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
 			"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
 			"dev": true,
 			"requires": {
@@ -13212,7 +13212,7 @@
 		},
 		"os-homedir": {
 			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+			"resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
 			"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
 			"dev": true
 		},
@@ -13229,7 +13229,7 @@
 		},
 		"os-tmpdir": {
 			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+			"resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
 			"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
 			"dev": true
 		},
@@ -13409,7 +13409,7 @@
 		},
 		"path-is-absolute": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
 		},
 		"path-key": {
@@ -16325,7 +16325,7 @@
 		},
 		"string_decoder": {
 			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+			"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
 			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
 			"requires": {
 				"safe-buffer": "~5.1.0"

src/components/AttachmentDragAndDrop.vue

@@ -0,0 +1,217 @@
+<!--
+  - @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+  -
+  - @author Jakob Röhrl <jakob.roehrl@web.de>
+  -
+  - @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 class="attachments-drag-zone"
+		@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
+		@dragleave.prevent="isDraggingOver && (isDraggingOver = false)"
+		@drop.prevent="handleDropFiles">
+		<slot />
+		<transition name="fade" mode="out-in">
+			<div
+				v-show="isDraggingOver"
+				class="dragover">
+				<div class="drop-hint">
+					<div
+						class="drop-hint__icon"
+						:class="{
+							'icon-upload' : !isReadOnly,
+							'icon-error' : isReadOnly}" />
+					<h2
+						class="drop-hint__text">
+						{{ dropHintText }}
+					</h2>
+				</div>
+			</div>
+		</transition>
+
+		<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
+			<div class="modal__content">
+				<h2>{{ t('deck', 'File already exists') }}</h2>
+				<p>
+					{{ t('deck', 'A file with the name {filename} already exists.', {filename: file.name}) }}
+				</p>
+				<p>
+					{{ t('deck', 'Do you want to overwrite it?') }}
+				</p>
+				<button class="primary" @click="overrideAttachment">
+					{{ t('deck', 'Overwrite file') }}
+				</button>
+				<button @click="modalShow=false">
+					{{ t('deck', 'Keep existing file') }}
+				</button>
+			</div>
+		</Modal>
+	</div>
+</template>
+
+<script>
+import { Modal } from '@nextcloud/vue'
+import attachmentUpload from '../mixins/attachmentUpload'
+import { loadState } from '@nextcloud/initial-state'
+const maxUploadSizeState = loadState('deck', 'maxUploadSize')
+
+export default {
+	name: 'AttachmentDragAndDrop',
+	components: { Modal },
+	mixins: [ attachmentUpload ],
+	props: {
+		cardId: {
+			type: Number,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			modalShow: false,
+			file: '',
+			overwriteAttachment: null,
+			isDraggingOver: false,
+			maxUploadSize: maxUploadSizeState,
+		}
+	},
+	computed: {
+		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')
+			}
+		},
+	},
+	methods: {
+		dragEnter() {
+
+		},
+		dragLeave() {
+
+		},
+		handleDropFiles(event) {
+			this.isDraggingOver = false
+			if (this.isReadOnly) {
+				return
+			}
+			this.onLocalAttachmentSelected(event.dataTransfer.files[0])
+			event.dataTransfer.value = ''
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+
+	.attachments-drag-zone {
+		flex-grow: 1;
+		position: relative;
+	}
+
+	.dragover {
+		position: absolute;
+		background: var(--color-primary-light);
+		z-index: 11;
+		display: flex;
+		border-radius: var(--border-radius);
+		opacity: .9;
+		margin: auto;
+
+		.drop-hint {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+
+			&__icon {
+				background-size: 32px;
+				background-position: center center;
+				height: 48px;
+				margin-bottom: 16px;
+			}
+
+			&__text {
+				line-height: 125%;
+				text-align: center;
+			}
+		}
+	}
+
+	.drop-upload--sidebar .dragover {
+		top: 20%;
+		left: 10%;
+		width: 80%;
+		height: 60%;
+		box-shadow: 0px 0px 36px var(--color-box-shadow);
+	}
+
+	.drop-upload--card .dragover {
+		border: 0;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+
+		h2 {
+			font-size: 13px;
+			margin: 0;
+		}
+
+		.drop-hint__icon {
+			margin: 0;
+			background-size: 16px;
+			height: 16px;
+		}
+	}
+
+	.fade {
+		&-enter {
+			opacity: 0;
+		}
+		&-enter-to {
+			opacity: .9;
+		}
+		&-leave {
+			opacity: .9;
+		}
+		&-leave-to {
+			opacity: 0;
+		}
+		&-enter-active,
+		&-leave-active {
+			transition: opacity 150ms ease-in-out;
+		}
+	}
+
+	.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;
+	}
+</style>

src/components/card/CardSidebarTabAttachments.vue

@@ -21,10 +21,7 @@
   -->
 
 <template>
-	<div class="attachments-drag-zone"
+	<AttachmentDragAndDrop :card-id="card.id" class="drop-upload--sidebar">
-		@dragover.prevent="!isDraggingOver && (isDraggingOver = true)"
-		@dragleave.prevent="isDraggingOver && (isDraggingOver = false)"
-		@drop.prevent="handleDropFiles">
 		<button class="icon-upload" @click="clickAddNewAttachmment()">
 			{{ t('settings', 'Upload attachment') }}
 		</button>
@@ -38,7 +35,7 @@
 					:key="attachment.id"
 					class="attachment"
 					style="display: flex;">
-					<a class="fileicon" :style="mimetypeForAttachment(attachment)" :href="attachmentUrl(attachment)" />
+					<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
 					<div class="details">
 						<a :href="attachmentUrl(attachment)" target="_blank">
 							<div class="filename">
@@ -61,52 +58,17 @@
 				</li>
 			</ul>
 		</div>
-
+	</AttachmentDragAndDrop>
-		<transition name="fade" mode="out-in">
-			<div
-				v-show="isDraggingOver"
-				class="dragover">
-				<div class="drop-hint">
-					<div
-						class="drop-hint__icon"
-						:class="{
-							'icon-upload' : !isReadOnly,
-							'icon-error' : isReadOnly}" />
-					<h2
-						class="drop-hint__text">
-						{{ dropHintText }}
-					</h2>
-				</div>
-			</div>
-		</transition>
-
-		<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
-			<div class="modal__content">
-				<h2>{{ t('deck', 'File already exists') }}</h2>
-				<p>
-					{{ t('deck', 'A file with the name {filename} already exists.', {filename: file.name}) }}
-				</p>
-				<p>
-					{{ t('deck', 'Do you want to overwrite it?') }}
-				</p>
-				<button class="primary" @click="overrideAttachment">
-					{{ t('deck', 'Overwrite file') }}
-				</button>
-				<button @click="modalShow=false">
-					{{ t('deck', 'Keep existing file') }}
-				</button>
-			</div>
-		</Modal>
-	</div>
 </template>
 
 <script>
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { Actions, ActionButton } from '@nextcloud/vue'
-import { showError } from '@nextcloud/dialogs'
 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'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 export default {
@@ -114,9 +76,9 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
-		Modal,
+		AttachmentDragAndDrop,
 	},
-	mixins: [ relativeDate ],
+	mixins: [ relativeDate, attachmentUpload ],
 	props: {
 		card: {
 			type: Object,
@@ -153,8 +115,8 @@ export default {
 			return (filesize) => formatFileSize(filesize)
 		},
 		mimetypeForAttachment() {
-			return (attachment) => {
+			return (mimetype) => {
-				const url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype)
+				const url = OC.MimeType.getIconUrl(mimetype)
 				const styles = {
 					'background-image': `url("${url}")`,
 				}
@@ -164,6 +126,9 @@ export default {
 		attachmentUrl() {
 			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
 		},
+		cardId() {
+			return this.card.id
+		},
 	},
 	created: function() {
 		this.$store.dispatch('fetchAttachments', this.card.id)
@@ -190,102 +155,18 @@ export default {
 		clickAddNewAttachmment() {
 			this.$refs.localAttachments.click()
 		},
-		async onLocalAttachmentSelected(file) {
-			if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
-				showError(
-					t('deck', `Failed to upload {name}`, { name: file.name }) + ' - '
-						+ t('deck', 'Maximum file size of {size} exceeded', { size: formatFileSize(this.maxUploadSize) })
-				)
-				event.target.value = ''
-				return
-			}
 
-			const bodyFormData = new FormData()
-			bodyFormData.append('cardId', this.card.id)
-			bodyFormData.append('type', 'deck_file')
-			bodyFormData.append('file', file)
-			try {
-				await this.$store.dispatch('createAttachment', { cardId: this.card.id, formData: bodyFormData })
-			} catch (err) {
-				if (err.response.data.status === 409) {
-					this.overwriteAttachment = err.response.data.data
-					this.modalShow = true
-				} else {
-					showError(err.response.data.message)
-				}
-			}
-		},
 		deleteAttachment(attachment) {
 			this.$store.dispatch('deleteAttachment', attachment)
 		},
 		restoreAttachment(attachment) {
 			this.$store.dispatch('restoreAttachment', attachment)
 		},
-		overrideAttachment() {
-			const bodyFormData = new FormData()
-			bodyFormData.append('cardId', this.card.id)
-			bodyFormData.append('type', 'deck_file')
-			bodyFormData.append('file', this.file)
-			this.$store.dispatch('updateAttachment', {
-				cardId: this.card.id,
-				attachmentId: this.overwriteAttachment.id,
-				formData: bodyFormData,
-			})
-
-			this.modalShow = false
-		},
 	},
 }
 </script>
 
 <style scoped lang="scss">
-
-	.attachments-drag-zone {
-		flex-grow: 1;
-	}
-
-	.dragover {
-		position: absolute;
-		top: 20%;
-		left: 10%;
-		width: 80%;
-		height: 60%;
-		background: var(--color-primary-light);
-		z-index: 11;
-		display: flex;
-		box-shadow: 0px 0px 36px var(--color-box-shadow);
-		border-radius: var(--border-radius);
-		opacity: .9;
-	}
-
-	.drop-hint {
-		margin: auto;
-		&__icon {
-			background-size: 48px;
-			height: 48px;
-			margin-bottom: 16px;
-		}
-	}
-
-	.fade {
-		&-enter {
-			opacity: 0;
-		}
-		&-enter-to {
-			opacity: .9;
-		}
-		&-leave {
-			opacity: .9;
-		}
-		&-leave-to {
-			opacity: 0;
-		}
-		&-enter-active,
-		&-leave-active {
-			transition: opacity 150ms ease-in-out;
-		}
-	}
-
 	.icon-upload {
 		padding-left: 35px;
 		background-position: 10px center;

src/components/cards/CardItem.vue

@@ -25,6 +25,7 @@
   -->
 
 <template>
+	<AttachmentDragAndDrop :card-id="id" class="drop-upload--card">
 		<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
 			tag="div"
 			class="card"
@@ -94,6 +95,7 @@
 				<CardBadges :id="id" />
 			</div>
 		</div>
+	</AttachmentDragAndDrop>
 </template>
 
 <script>
@@ -105,10 +107,11 @@ import axios from '@nextcloud/axios'
 import CardBadges from './CardBadges'
 import Color from '../../mixins/color'
 import labelStyle from '../../mixins/labelStyle'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 
 export default {
 	name: 'CardItem',
-	components: { Modal, CardBadges, Actions, ActionButton, Multiselect },
+	components: { Modal, CardBadges, Actions, ActionButton, Multiselect, AttachmentDragAndDrop },
 	directives: {
 		ClickOutside,
 	},

src/mixins/attachmentUpload.js

@@ -0,0 +1,68 @@
+/*
+ * @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @author Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @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/>.
+ *
+ */
+import { showError } from '@nextcloud/dialogs'
+import { formatFileSize } from '@nextcloud/files'
+
+export default {
+	methods: {
+		async onLocalAttachmentSelected(file) {
+			if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
+				showError(
+					t('deck', `Failed to upload {name}`, { name: file.name }) + ' - '
+						+ t('deck', 'Maximum file size of {size} exceeded', { size: formatFileSize(this.maxUploadSize) })
+				)
+				event.target.value = ''
+				return
+			}
+
+			const bodyFormData = new FormData()
+			bodyFormData.append('cardId', this.cardId)
+			bodyFormData.append('type', 'deck_file')
+			bodyFormData.append('file', file)
+			try {
+				await this.$store.dispatch('createAttachment', { cardId: this.cardId, formData: bodyFormData })
+			} catch (err) {
+				if (err.response.data.status === 409) {
+					this.overwriteAttachment = err.response.data.data
+					this.modalShow = true
+				} else {
+					showError(err.response.data.message)
+				}
+			}
+		},
+
+		overrideAttachment() {
+			const bodyFormData = new FormData()
+			bodyFormData.append('cardId', this.cardId)
+			bodyFormData.append('type', 'deck_file')
+			bodyFormData.append('file', this.file)
+			this.$store.dispatch('updateAttachment', {
+				cardId: this.cardId,
+				attachmentId: this.overwriteAttachment.id,
+				formData: bodyFormData,
+			})
+
+			this.modalShow = false
+		},
+
+	},
+}

src/store/card.js

@@ -143,15 +143,13 @@ export default {
 		cardIncreaseAttachmentCount(state, cardId) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {
-				const existingCard = state.cards.find(_card => _card.id === cardId)
+				Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount + 1)
-				Vue.set(state.cards, existingCard.attachmentCount, existingCard.attachmentCount++)
 			}
 		},
 		cardDecreaseAttachmentCount(state, cardId) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {
-				const existingCard = state.cards.find(_card => _card.id === cardId)
+				Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount - 1)
-				Vue.set(state.cards, existingCard.attachmentCount, existingCard.attachmentCount--)
 			}
 		},
 	},