feature/remove-attachment-upload-mixin (#724)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/724
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>

src/components/tasks/mixins/attachmentUpload.js

@@ -1,39 +0,0 @@
-import AttachmentModel from '../../../models/attachment'
-import AttachmentService from '../../../services/attachment'
-import {generateAttachmentUrl} from '@/helpers/generateAttachmentUrl'
-
-export default {
-	methods: {
-		attachmentUpload(file, onSuccess) {
-			const files = [file]
-
-			const attachmentService = new AttachmentService()
-
-			this.createAttachment(attachmentService, files, onSuccess)
-		},
-		createAttachment(attachmentService, files, onSuccess = () => {}) {
-			const attachmentModel = new AttachmentModel({taskId: this.taskId})
-			attachmentService.create(attachmentModel, files)
-				.then(r => {
-					console.debug(`Uploaded attachments for task ${this.taskId}, response was`, r)
-					if (r.success !== null) {
-						r.success.forEach(a => {
-							this.$store.dispatch('tasks/addTaskAttachment', {
-								taskId: this.taskId,
-								attachment: a,
-							})
-							onSuccess(generateAttachmentUrl(this.taskId, a.id))
-						})
-					}
-					if (r.errors !== null) {
-						r.errors.forEach(m => {
-							this.error(m)
-						})
-					}
-				})
-				.catch(e => {
-					this.error(e)
-				})
-		},
-	},
-}

src/components/tasks/partials/attachments.vue

@@ -138,19 +138,16 @@
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
-import attachmentUpload from '@/components/tasks/mixins/attachmentUpload'
-import {generateAttachmentUrl} from '@/helpers/generateAttachmentUrl'
 import {mapState} from 'vuex'
 import copy from 'copy-to-clipboard'
 
+import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
+
 export default {
 	name: 'attachments',
 	components: {
 		User,
 	},
-	mixins: [
-		attachmentUpload,
-	],
 	data() {
 		return {
 			attachmentService: AttachmentService,
@@ -221,7 +218,7 @@ export default {
 			this.uploadFiles(this.$refs.files.files)
 		},
 		uploadFiles(files) {
-			this.createAttachment(this.attachmentService, files)
+			uploadFiles(this.attachmentService, this.taskId, files)
 		},
 		deleteAttachment() {
 			this.attachmentService

src/components/tasks/partials/comments.vue

@@ -151,9 +151,9 @@
 <script>
 import TaskCommentService from '../../../services/taskComment'
 import TaskCommentModel from '../../../models/taskComment'
-import attachmentUpload from '../mixins/attachmentUpload'
 import LoadingComponent from '../../misc/loading'
 import ErrorComponent from '../../misc/error'
+import { uploadFile } from '@/helpers/attachments'
 
 export default {
 	name: 'comments',
@@ -165,7 +165,6 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	mixins: [attachmentUpload],
 	props: {
 		taskId: {
 			type: Number,
@@ -222,6 +221,10 @@ export default {
 		},
 	},
 	methods: {
+		attachmentUpload(...args) {
+			return uploadFile(this.taskId, ...args)
+		},
+
 		loadComments() {
 			this.taskCommentService
 				.getAll({taskId: this.taskId})

src/helpers/attachments.ts

@@ -0,0 +1,36 @@
+import AttachmentModel from '@/models/attachment'
+import FileModel from '@/models/file'
+
+import AttachmentService from '@/services/attachment'
+import { store } from '@/store'
+
+export function uploadFile(taskId: number, file: FileModel, onSuccess: () => Function) {
+	const attachmentService = new AttachmentService()
+	const files = [file]
+
+	return uploadFiles(attachmentService, taskId, files, onSuccess)
+}
+
+export function uploadFiles(attachmentService: AttachmentService, taskId: number, files: FileModel[], onSuccess : Function = () => {}) {
+	const attachmentModel = new AttachmentModel({taskId})
+	attachmentService.create(attachmentModel, files)
+		.then(r => {
+			console.debug(`Uploaded attachments for task ${taskId}, response was`, r)
+			if (r.success !== null) {
+				r.success.forEach((attachment: AttachmentModel) => {
+					store.dispatch('tasks/addTaskAttachment', {
+						taskId,
+						attachment,
+					})
+					onSuccess(generateAttachmentUrl(taskId, attachment.id))
+				})
+			}
+			if (r.errors !== null) {
+				throw Error(r.errors)
+			}
+		})
+}
+
+export function generateAttachmentUrl(taskId: number, attachmentId: number) : any {
+	return `${window.API_URL}/tasks/${taskId}/attachments/${attachmentId}`
+}

src/helpers/generateAttachmentUrl.js

@@ -1,3 +0,0 @@
-export const generateAttachmentUrl = (taskId, attachmentId) => {
-	return `${window.API_URL}/tasks/${taskId}/attachments/${attachmentId}`
-}

src/store/modules/tasks.js

@@ -58,12 +58,11 @@ export default {
 		// This is an action to be able to commit other mutations
 		addTaskAttachment(ctx, {taskId, attachment}) {
 			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
-			if (t.task === null) {
-				ctx.commit('attachments/add', attachment, {root: true})
-				return
+			if (t.task !== null) {
+				const newTask = { ...t }
+				newTask.task.attachments.push(attachment)
+				ctx.commit('kanban/setTaskInBucketByIndex', newTask, {root: true})
 			}
-			t.task.attachments.push(attachment)
-			ctx.commit('kanban/setTaskInBucketByIndex', t, {root: true})
 			ctx.commit('attachments/add', attachment, {root: true})
 		},
 		addAssignee(ctx, {user, taskId}) {

src/views/tasks/TaskDetailView.vue

@@ -436,13 +436,14 @@ import Comments from '../../components/tasks/partials/comments'
 import ListSearch from '../../components/tasks/partials/listSearch'
 import description from '@/components/tasks/partials/description.vue'
 import ColorPicker from '../../components/input/colorPicker'
-import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
 import heading from '@/components/tasks/partials/heading.vue'
 import Datepicker from '@/components/input/datepicker.vue'
 import {playPop} from '@/helpers/playPop'
 import TaskSubscription from '@/components/misc/subscription.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 
+import {uploadFile} from '@/helpers/attachments'
+
 export default {
 	name: 'TaskDetailView',
 	components: {
@@ -462,9 +463,6 @@ export default {
 		description,
 		heading,
 	},
-	mixins: [
-		attachmentUpload,
-	],
 	data() {
 		return {
 			taskId: Number(this.$route.params.id),
@@ -552,6 +550,10 @@ export default {
 		},
 	},
 	methods: {
+		attachmentUpload(...args) {
+			return uploadFile(this.taskId, ...args)
+		},
+
 		loadTask() {
 			this.taskId = Number(this.$route.params.id)
 			this.taskService.get({id: this.taskId})