Merge pull request #8130 from nextcloud/refactor/pinia-migration-trashbinStore

refactor(pinia): refactor trashbin store to pinia

Author: grnd-alt

src/components/board/DeletedTabSidebar.vue

@@ -14,7 +14,7 @@
 				</div>
 				<button :title="t('settings', 'Undo')"
 					class="app-navigation-entry-deleted-button icon-history"
-					@click="stackUndoDelete(deletedStack)" />
+					@click="stackUndoDeleteLocal(deletedStack)" />
 			</li>
 		</ul>
 
@@ -28,14 +28,15 @@
 				</div>
 				<button :title="t('settings', 'Undo')"
 					class="app-navigation-entry-deleted-button icon-history"
-					@click="cardUndoDelete(deletedCard)" />
+					@click="cardUndoDeleteLocal(deletedCard)" />
 			</li>
 		</ul>
 	</div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { useTrashbinStore } from '../../stores/trashbin.js'
 import relativeDate from '../../mixins/relativeDate.js'
 
 export default {
@@ -55,30 +56,30 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			deletedStacks: state => [...state.trashbin.deletedStacks].sort((a, b) => (a.deletedAt > b.deletedAt) ? -1 : 1),
-			deletedCards: state => [...state.trashbin.deletedCards].sort((a, b) => (a.deletedAt > b.deletedAt) ? -1 : 1),
+		...mapState(useTrashbinStore, {
+			deletedStacks: state => [...state.deletedStacks].sort((a, b) => (a.deletedAt > b.deletedAt) ? -1 : 1),
+			deletedCards: state => [...state.deletedCards].sort((a, b) => (a.deletedAt > b.deletedAt) ? -1 : 1),
 		}),
-
 	},
 	created() {
 		this.getData()
 	},
 	methods: {
+		...mapActions(useTrashbinStore, ['fetchDeletedItems', 'stackUndoDelete', 'cardUndoDelete']),
 		async getData() {
 			this.isLoading = true
-			await this.$store.dispatch('fetchDeletedItems', this.board.id)
+			this.fetchDeletedItems(this.board.id)
 			this.isLoading = false
 		},
-		stackUndoDelete(deletedStack) {
+		stackUndoDeleteLocal(deletedStack) {
 			const copiedDeletedStack = Object.assign({}, deletedStack)
 			copiedDeletedStack.deletedAt = 0
-			this.$store.dispatch('stackUndoDelete', copiedDeletedStack)
+			this.stackUndoDelete(copiedDeletedStack)
 		},
-		cardUndoDelete(deletedCard) {
+		cardUndoDeleteLocal(deletedCard) {
 			const copiedDeletedCard = Object.assign({}, deletedCard)
 			copiedDeletedCard.deletedAt = 0
-			this.$store.dispatch('cardUndoDelete', copiedDeletedCard)
+			this.cardUndoDelete(copiedDeletedCard)
 		},
 	},
 }

src/components/board/Stack.vue

@@ -160,6 +160,8 @@ import { showError, showUndo } from '@nextcloud/dialogs'
 import CardItem from '../cards/CardItem.vue'
 
 import '@nextcloud/dialogs/style.css'
+import { mapActions } from 'pinia'
+import { useTrashbinStore } from '../../stores/trashbin.js'
 
 export default {
 	name: 'Stack',
@@ -252,6 +254,7 @@ export default {
 	},
 
 	methods: {
+		...mapActions(useTrashbinStore, ['stackUndoDelete']),
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
 			// so we have to ignore it
@@ -294,7 +297,7 @@ export default {
 		},
 		deleteStack(stack) {
 			this.$store.dispatch('deleteStack', stack)
-			showUndo(t('deck', 'List deleted'), () => this.$store.dispatch('stackUndoDelete', stack))
+			showUndo(t('deck', 'List deleted'), () => this.stackUndoDelete(stack))
 		},
 		setArchivedToAllCardsFromStack(stack, isArchived) {
 

src/components/cards/CardMenuEntries.vue

@@ -98,6 +98,7 @@ import { showUndo } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import { emit } from '@nextcloud/event-bus'
 import { useActionsStore } from '../../stores/actions.js'
+import { useTrashbinStore } from '../../stores/trashbin.js'
 
 export default {
 	name: 'CardMenuEntries',
@@ -188,7 +189,7 @@ export default {
 		deleteCard() {
 			this.$store.dispatch('deleteCard', this.card)
 			const undoCard = { ...this.card, deletedAt: 0 }
-			showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', undoCard))
+			showUndo(t('deck', 'Card deleted'), () => useTrashbinStore().cardUndoDelete(undoCard))
 			if (this.$router.currentRoute.name === 'card') {
 				this.$router.push({ name: 'board' })
 			}

src/main.js

@@ -45,6 +45,7 @@ Vue.config.errorHandler = (err, vm, info) => {
 
 const pinia = createPinia()
 Vue.use(PiniaVuePlugin)
+pinia.use(() => ({ $vuex: store }))
 
 /* eslint-disable-next-line no-new */
 new Vue({

src/store/card.js

@@ -6,6 +6,7 @@
 import { CardApi } from './../services/CardApi.js'
 import moment from 'moment'
 import Vue from 'vue'
+import { useTrashbinStore } from '../stores/trashbin.js'
 
 const apiClient = new CardApi()
 
@@ -323,7 +324,7 @@ export default function cardModuleFactory() {
 			async deleteCard({ commit }, card) {
 				await apiClient.deleteCard(card.id)
 				commit('deleteCard', card)
-				commit('moveCardToTrash', card)
+				useTrashbinStore().moveCardToTrash(card)
 			},
 			async archiveUnarchiveCard({ commit }, card) {
 				let call = 'archiveCard'

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 trashbin from './trashbin.js'
 import attachment from './attachment.js'
 import overview from './overview.js'
 Vue.use(Vuex)
@@ -35,7 +34,6 @@ export default function storeFactory() {
 		modules: {
 			stack: stackModuleFactory(),
 			card: cardModuleFactory(),
-			trashbin,
 			attachment,
 			overview,
 		},

src/store/stack.js

@@ -6,6 +6,7 @@
 import Vue from 'vue'
 import { StackApi } from './../services/StackApi.js'
 import applyOrderToArray from './../helpers/applyOrderToArray.js'
+import { useTrashbinStore } from '../stores/trashbin.js'
 
 const apiClient = new StackApi()
 
@@ -108,7 +109,7 @@ export default function stackModuleFactory() {
 				apiClient.deleteStack(stack.id, stack.boardId)
 					.then((stack) => {
 						commit('deleteStack', stack)
-						commit('moveStackToTrash', stack)
+						useTrashbinStore().moveStackToTrash(stack)
 					})
 			},
 			updateStack({ commit }, stack) {

src/store/trashbin.js

@@ -0,0 +1,70 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import { StackApi } from '../services/StackApi.js'
+import { CardApi } from '../services/CardApi.js'
+
+const stackApi = new StackApi()
+const cardApi = new CardApi()
+
+export const useTrashbinStore = defineStore('trashbin', {
+	state: () => ({
+		deletedStacks: [],
+		deletedCards: [],
+	}),
+	actions: {
+		setDeletedStacks(delStacks) {
+			this.deletedStacks = []
+			if (delStacks.length > 0) {
+				this.deletedStacks = delStacks
+			}
+		},
+		moveStackToTrash(stack) {
+			stack.deletedAt = Math.floor(Date.now() / 1000)
+			this.deletedStacks.push(stack)
+		},
+		removeStackFromTrash(stack) {
+			const existingIndex = this.deletedStacks.findIndex(_stack => _stack.id === stack.id)
+			if (existingIndex !== -1) {
+				this.deletedStacks.splice(existingIndex, 1)
+			}
+		},
+		setDeletedCards(delCards) {
+			this.deletedCards = []
+			this.deletedCards = delCards
+		},
+		moveCardToTrash(card) {
+			card.deletedAt = Math.floor(Date.now() / 1000)
+			this.deletedCards.push(card)
+		},
+		removeCardFromTrash(card) {
+			const existingIndex = this.deletedCards.findIndex(_card => _card.id === card.id)
+			if (existingIndex !== -1) {
+				this.deletedCards.splice(existingIndex, 1)
+			}
+		},
+		fetchDeletedItems(boardId) {
+			stackApi.deletedStacks(boardId).then((deletedStacks) => {
+				this.setDeletedStacks(deletedStacks)
+			})
+			cardApi.deletedCards(boardId).then((deletedCards) => {
+				this.setDeletedCards(deletedCards)
+			})
+		},
+		stackUndoDelete(stack) {
+			stackApi.updateStack(stack).then((restoredStack) => {
+				this.$vuex.commit('addStack', restoredStack)
+				this.removeStackFromTrash(restoredStack)
+			})
+		},
+		cardUndoDelete(card) {
+			cardApi.updateCard(card).then((restoredCard) => {
+				this.removeCardFromTrash(restoredCard)
+				this.$vuex.commit('addCard', restoredCard)
+			})
+		},
+	},
+})