Fix updating attachments and computed properties

Signed-off-by: Julius Härtl <jus@bitgrid.net>

package-lock.json

@@ -5648,7 +5648,8 @@
 				},
 				"kind-of": {
 					"version": "6.0.2",
-					"resolved": ""
+					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+					"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
 				}
 			}
 		},
@@ -16683,7 +16684,8 @@
 				},
 				"kind-of": {
 					"version": "6.0.2",
-					"resolved": ""
+					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+					"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
 				}
 			}
 		},

src/components/card/CardSidebarTabAttachments.vue

@@ -23,7 +23,7 @@
 <template>
 	<div>
 		<button class="icon-upload" @click="clickAddNewAttachmment()">
-			{{ t('deck', 'Upload attachment') }}
+			{{ t('settings', 'Upload attachment') }}
 		</button>
 		<input ref="localAttachments"
 			type="file"
@@ -59,22 +59,20 @@
 			</ul>
 		</div>
 
-		<Modal v-if="modalShow" title="File already exists" @close="modalShow=false">
+		<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') }}
-					{{ file.name }}
-					{{ t('deck', 'already exists.') }}
+					{{ 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', 'Yes') }}
+					{{ t('deck', 'Overwrite file') }}
 				</button>
 				<button @click="modalShow=false">
-					{{ t('deck', 'No') }}
+					{{ t('deck', 'Keep existing file') }}
 				</button>
 			</div>
 		</Modal>
@@ -115,7 +113,24 @@ export default {
 		formattedFileSize() {
 			return (filesize) => formatFileSize(filesize)
 		},
-
+		mimetypeForAttachment() {
+			return (attachment) => {
+				const url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype)
+				const styles = {
+					'background-image': `url("${url}")`,
+				}
+				return styles
+			}
+		},
+		attachmentUrl() {
+			return (attachment) => OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
+		},
+	},
+	watch: {
+		'card': {
+			handler() {
+			},
+		},
 	},
 	created: function() {
 		this.$store.dispatch('fetchAttachments', this.card.id)
@@ -124,22 +139,23 @@ export default {
 		clickAddNewAttachmment() {
 			this.$refs.localAttachments.click()
 		},
-		async onLocalAttachmentSelected(e) {
+		async onLocalAttachmentSelected(event) {
 			const bodyFormData = new FormData()
 			bodyFormData.append('cardId', this.card.id)
 			bodyFormData.append('type', 'deck_file')
-			bodyFormData.append('file', e.target.files[0])
-			this.file = e.target.files[0]
+			bodyFormData.append('file', event.target.files[0])
+			this.file = event.target.files[0]
 			try {
 				await this.$store.dispatch('createAttachment', { cardId: this.card.id, formData: bodyFormData })
-			} catch (e) {
-				if (e.response.data.status === 409) {
-					this.overwriteAttachment = e.response.data.data
+			} catch (err) {
+				if (err.response.data.status === 409) {
+					this.overwriteAttachment = err.response.data.data
 					this.modalShow = true
 				} else {
-					showError(e.response.data.message)
+					showError(err.response.data.message)
 				}
 			}
+			event.target.value = ''
 		},
 		deleteAttachment(attachment) {
 			this.$store.dispatch('deleteAttachment', attachment)
@@ -147,16 +163,6 @@ export default {
 		restoreAttachment(attachment) {
 			this.$store.dispatch('restoreAttachment', attachment)
 		},
-		mimetypeForAttachment(attachment) {
-			const url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype)
-			const styles = {
-				'background-image': `url("${url}")`,
-			}
-			return styles
-		},
-		attachmentUrl(attachment) {
-			return OC.generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
-		},
 		overrideAttachment() {
 			const bodyFormData = new FormData()
 			bodyFormData.append('cardId', this.card.id)
@@ -175,6 +181,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+	.icon-upload {
+		padding-left: 20px;
+		background-position: left center;
+	}
+
 	.modal__content {
 		width: 25vw;
 		min-width: 250px;

src/store/attachment.js

@@ -41,7 +41,7 @@ export default {
 	mutations: {
 		createAttachment(state, { cardId, attachment }) {
 			if (typeof state.attachments[cardId] === 'undefined') {
-				Vue.set(state.attachments, cardId, attachment)
+				Vue.set(state.attachments, cardId, [attachment])
 			} else {
 				state.attachments[cardId].push(attachment)
 			}
@@ -56,13 +56,15 @@ export default {
 		},
 
 		updateAttachment(state, { cardId, attachment }) {
-			Vue.set(state.attachments, cardId, attachment)
+			const existingIndex = state.attachments[attachment.cardId].findIndex(a => a.id === attachment.id)
+			if (existingIndex !== -1) {
+				Vue.set(state.attachments[cardId], existingIndex, attachment)
+			}
 		},
 
 		deleteAttachment(state, deletedAttachment) {
 			const existingIndex = state.attachments[deletedAttachment.cardId].findIndex(a => a.id === deletedAttachment.id)
 			if (existingIndex !== -1) {
-				// state.attachments[deletedAttachment.cardId].splice(existingIndex, 1)
 				state.attachments[deletedAttachment.cardId][existingIndex].deletedAt = -1
 			}
 		},