refactor(pinia): move attachmentStore to pinia

src/components/card/AttachmentList.vue

@@ -94,10 +94,12 @@ import relativeDate from '../../mixins/relativeDate.js'
 import { formatFileSize } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl, generateOcsUrl, generateRemoteUrl } from '@nextcloud/router'
-import { mapState, mapActions } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
+import { mapState, mapActions } from 'pinia'
 import { loadState } from '@nextcloud/initial-state'
 import attachmentUpload from '../../mixins/attachmentUpload.js'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { useAttachmentStore } from '../../stores/attachment.js'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
 
 const picker = getFilePickerBuilder(t('deck', 'File to share'))
@@ -147,7 +149,7 @@ export default {
 		},
 		attachments() {
 			// FIXME sort propertly by last modified / deleted at
-			return [...this.$store.getters.attachmentsByCard(this.cardId)].filter(attachment => attachment.deletedAt >= 0).sort((a, b) => b.id - a.id)
+			return [...this.attachmentsByCard(this.cardId)].filter(attachment => attachment.deletedAt >= 0).sort((a, b) => b.id - a.id)
 		},
 		mimetypeForAttachment() {
 			return (attachment) => {
@@ -176,9 +178,12 @@ export default {
 		formattedFileSize() {
 			return (filesize) => formatFileSize(filesize)
 		},
-		...mapState({
+		...mapStateVuex({
 			currentBoard: state => state.currentBoard,
 		}),
+		...mapState(useAttachmentStore, [
+			'attachmentsByCard',
+		]),
 		isReadOnly() {
 			return !this.$store.getters.canEdit
 		},
@@ -210,8 +215,9 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions([
+		...mapActions(useAttachmentStore, [
 			'fetchAttachments',
+			'unshareAttachment',
 		]),
 		handleUploadFile(event) {
 			const files = event.target.files ?? []
@@ -240,9 +246,6 @@ export default {
 					})
 				})
 		},
-		unshareAttachment(attachment) {
-			this.$store.dispatch('unshareAttachment', attachment)
-		},
 		clickAddNewAttachmment() {
 			this.$refs.localAttachments.click()
 		},

src/components/card/CardSidebarTabAttachments.vue

@@ -11,7 +11,9 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia'
 import AttachmentList from './AttachmentList.vue'
+import { useAttachmentStore } from '../../stores/attachment.js'
 export default {
 	name: 'CardSidebarTabAttachments',
 	components: {
@@ -24,12 +26,10 @@ export default {
 		},
 	},
 	methods: {
-		deleteAttachment(attachment) {
-			this.$store.dispatch('deleteAttachment', attachment)
-		},
-		restoreAttachment(attachment) {
-			this.$store.dispatch('restoreAttachment', attachment)
-		},
+		...mapActions(useAttachmentStore, [
+			'deleteAttachment',
+			'restoreAttachment',
+		]),
 	},
 }
 </script>

src/components/cards/CardCover.vue

@@ -12,8 +12,9 @@
 	</div>
 </template>
 <script>
-import { mapActions } from 'vuex'
+import { mapActions } from 'pinia'
 import { generateUrl } from '@nextcloud/router'
+import { useAttachmentStore } from '../../stores/attachment.js'
 export default {
 	name: 'CardCover',
 	props: {
@@ -61,7 +62,7 @@ export default {
 		},
 	},
 	methods: {
-		...mapActions([
+		...mapActions(useAttachmentStore, [
 			'fetchAttachments',
 		]),
 	},

src/mixins/attachmentUpload.js

@@ -6,6 +6,8 @@ import { showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 // eslint-disable-next-line import/no-unresolved
 import PQueue from 'p-queue'
+import { mapActions } from 'pinia'
+import { useAttachmentStore } from '../stores/attachment.js'
 
 const queue = new PQueue({ concurrency: 2 })
 
@@ -33,7 +35,7 @@ export default {
 			bodyFormData.append('file', file)
 			await queue.add(async () => {
 				try {
-					await this.$store.dispatch('createAttachment', {
+					await this.createAttachment({
 						cardId: this.cardId,
 						formData: bodyFormData,
 						onUploadProgress: (e) => {
@@ -54,13 +56,17 @@ export default {
 			})
 
 		},
+		...mapActions(useAttachmentStore, [
+			'createAttachment',
+			'updateAttachment',
+		]),
 
 		overrideAttachment() {
 			const bodyFormData = new FormData()
 			bodyFormData.append('cardId', this.cardId)
 			bodyFormData.append('type', 'deck_file')
 			bodyFormData.append('file', this.file)
-			this.$store.dispatch('updateAttachment', {
+			this.updateAttachment({
 				cardId: this.cardId,
 				attachment: this.overwriteAttachment,
 				formData: bodyFormData,

src/store/main.js

@@ -13,7 +13,6 @@ import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { BoardApi } from '../services/BoardApi.js'
 import stackModuleFactory from './stack.js'
 import cardModuleFactory from './card.js'
-import attachment from './attachment.js'
 Vue.use(Vuex)
 
 const apiClient = new BoardApi()
@@ -33,7 +32,6 @@ export default function storeFactory() {
 		modules: {
 			stack: stackModuleFactory(),
 			card: cardModuleFactory(),
-			attachment,
 		},
 		strict: debug,
 		state: {

src/stores/attachment.js

@@ -0,0 +1,78 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import Vue from 'vue'
+import { AttachmentApi } from '../services/AttachmentApi.js'
+
+const apiClient = new AttachmentApi()
+
+export const useAttachmentStore = defineStore('attachment', {
+	state: () => ({
+		attachments: {},
+	}),
+	getters: {
+		attachmentsByCard: (state) => (cardId) => {
+			if (typeof state.attachments[cardId] === 'undefined') {
+				return []
+			}
+			return state.attachments[cardId]
+		},
+	},
+	actions: {
+		async createAttachment({ cardId, formData, onUploadProgress }) {
+			const boardId = this.$vuex.state.currentBoard.id
+			const attachment = await apiClient.createAttachment({ cardId, formData, onUploadProgress, boardId })
+			if (typeof this.attachments[cardId] === 'undefined') {
+				Vue.set(this.attachments, cardId, [attachment])
+			} else {
+				this.attachments[cardId].push(attachment)
+			}
+			this.$vuex.commit('cardSetAttachmentCount', { cardId })
+		},
+		async fetchAttachments(cardId) {
+			const boardId = this.$vuex.state.currentBoard.id
+			const attachments = await apiClient.fetchAttachments(cardId, boardId)
+			Vue.set(this.attachments, cardId, attachments)
+			this.$vuex.commit('cardSetAttachmentCount', { cardId, count: attachments.length })
+		},
+		async updateAttachment({ cardId, attachment, formData }) {
+			const boardId = this.$vuex.state.currentBoard.id
+			const result = await apiClient.updateAttachment({ cardId, attachment, formData, boardId })
+			const existingIndex = this.attachments[attachment.cardId].findIndex(a => a.id === attachment.id && a.type === attachment.type)
+			if (existingIndex !== -1) {
+				Vue.set(this.attachments[cardId], existingIndex, result)
+			}
+		},
+		async deleteAttachment(attachment) {
+			const boardId = this.$vuex.state.currentBoard.id
+			await apiClient.deleteAttachment(attachment, boardId)
+			const existingIndex = this.attachments[attachment.cardId].findIndex(a => a.id === attachment.id && a.type === attachment.type)
+			if (existingIndex !== -1) {
+				Vue.set(this.attachments[attachment.cardId][existingIndex], 'deletedAt', Date.now() / 1000 | 0)
+			}
+			this.$vuex.commit('cardDecreaseAttachmentCount', { cardId: attachment.cardId })
+		},
+		async unshareAttachment(attachment) {
+			const boardId = this.$vuex.state.currentBoard.id
+			await apiClient.deleteAttachment(attachment, boardId)
+			const existingIndex = this.attachments[attachment.cardId].findIndex(a => a.id === attachment.id && a.type === attachment.type)
+			if (existingIndex !== -1) {
+				Vue.set(this.attachments[attachment.cardId][existingIndex], 'deletedAt', -1)
+			}
+			this.$vuex.commit('cardDecreaseAttachmentCount', { cardId: attachment.cardId })
+		},
+		async restoreAttachment(attachment) {
+			const boardId = this.$vuex.state.currentBoard.id
+			const restoredAttachment = await apiClient.restoreAttachment(attachment, boardId)
+			const existingIndex = this.attachments[restoredAttachment.cardId].findIndex(a => a.id === restoredAttachment.id && a.type === restoredAttachment.type)
+			if (existingIndex !== -1) {
+				Vue.set(this.attachments[restoredAttachment.cardId][existingIndex], 'deletedAt', 0)
+			}
+			this.$vuex.commit('cardIncreaseAttachmentCount', attachment.cardId)
+		},
+	},
+
+})