Refactor/pinia migration card store

src/CardMoveDialog.vue

@@ -38,8 +38,9 @@ import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { mapGetters } from 'vuex'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { useStackStore } from './stores/stack.js'
+import { useCardStore } from './stores/card.js'
 
 export default {
 	name: 'CardMoveDialog',
@@ -79,6 +80,11 @@ export default {
 		unsubscribe('deck:card:show-move-dialog', this.openModal)
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			moveCardInStore: 'moveCard',
+			addNewCardInStore: 'addNewCard',
+			cloneCardInStore: 'cloneCard',
+		}),
 		openModal(card) {
 			this.card = card
 			this.selectedStack = this.stackById(this.card.stackId)
@@ -98,14 +104,14 @@ export default {
 		async moveCard() {
 			this.copiedCard = Object.assign({}, this.card)
 			this.copiedCard.stackId = this.selectedStack.id
-			this.$store.dispatch('moveCard', { card: this.copiedCard, oldBoardId: this.selectedBoard.id })
+			await this.moveCardInStore({ card: this.copiedCard, oldBoardId: this.selectedBoard.id })
 			if (parseInt(this.selectedBoard.id) === parseInt(this.selectedStack.boardId)) {
-				await this.$store.commit('addNewCard', { ...this.copiedCard })
+				this.addNewCardInStore({ ...this.copiedCard })
 			}
 			this.modalShow = false
 		},
 		async cloneCard() {
-			this.$store.dispatch('cloneCard', { cardId: this.card.id, targetStackId: this.selectedStack.id })
+			await this.cloneCardInStore({ cardId: this.card.id, targetStackId: this.selectedStack.id })
 			this.modalShow = false
 		},
 	},

src/components/board/Board.vue

@@ -100,6 +100,7 @@ import { createSession } from '../../sessions.js'
 import CardSidebar from '../card/CardSidebar.vue'
 import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../../stores/stack.js'
+import { useCardStore } from '../../stores/card.js'
 export default {
 	name: 'Board',
 	components: {
@@ -139,6 +140,7 @@ export default {
 	},
 	computed: {
 		...mapState(useStackStore, ['stacksByBoard']),
+		...mapState(useCardStore, ['cardById']),
 		...mapStateVuex({
 			isFullApp: state => state.isFullApp,
 			board: state => state.currentBoard,
@@ -192,10 +194,10 @@ export default {
 
 				const routeCardId = this.$route?.params?.cardId ? parseInt(this.$route.params.cardId) : null
 				// If an archived card is requested, and we cannot find it in the current we load the archived stacks instead
-				if (routeCardId && !this.$store.getters.cardById(routeCardId)) {
+				if (routeCardId && !this.cardById(routeCardId)) {
 					await this.loadArchivedStacks(this.id)
 
-					if (this.$store.getters.cardById(routeCardId)) {
+					if (this.cardById(routeCardId)) {
 						this.$store.commit('toggleShowArchived', true)
 					}
 				}

src/components/board/GanttView.vue

@@ -60,12 +60,14 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 import Gantt from 'frappe-gantt'
 import 'frappe-gantt/dist/frappe-gantt.css' // eslint-disable-line
 import { NcButton, NcEmptyContent } from '@nextcloud/vue'
 import ChartGanttIcon from 'vue-material-design-icons/ChartGantt.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import { useCardStore } from '../../stores/card.js'
 
 const STACK_COLORS = [
 	'#0082c9', '#4caf50', '#ff9800', '#e91e63',
@@ -198,7 +200,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['cardsByStack', 'canEdit']),
+		...mapGetters(['canEdit']),
+		...mapState(useCardStore, ['cardsByStack']),
 		partitionedCards() {
 			const undatedCards = []
 			const ganttTasks = []
@@ -294,6 +297,9 @@ export default {
 		this.ganttInstance = null
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			updateCardDatesInStore: 'updateCardDates',
+		}),
 		cardToGanttTask(card, stackIndex) {
 			let start = card.startdate ? new Date(card.startdate) : null
 			let end = card.duedate ? new Date(card.duedate) : null
@@ -371,7 +377,7 @@ export default {
 			this.fitColumnsToWidth()
 		},
 		async updateTaskDate(task, start, end) {
-			await this.$store.dispatch('updateCardDates', {
+			await this.updateCardDatesInStore({
 				...task._card,
 				startdate: new Date(start).toISOString(),
 				duedate: new Date(end).toISOString(),

src/components/board/Stack.vue

@@ -149,7 +149,8 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import { mapGetters, mapState } from 'vuex'
+import { mapGetters, mapState as mapStateVuex } from 'vuex'
+import { mapState, mapActions } from 'pinia'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
@@ -160,9 +161,9 @@ 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'
 import { useStackStore } from '../../stores/stack.js'
+import { useCardStore } from '../../stores/card.js'
 
 export default {
 	name: 'Stack',
@@ -212,11 +213,14 @@ export default {
 			'canEdit',
 			'isArchived',
 		]),
-		...mapState({
+		...mapStateVuex({
 			showArchived: state => state.showArchived,
 		}),
+		...mapState(useCardStore, {
+			cardsByStackGetter: 'cardsByStack',
+		}),
 		cardsByStack() {
-			return this.$store.getters.cardsByStack(this.stack.id).filter((card) => {
+			return this.cardsByStackGetter(this.stack.id).filter((card) => {
 				if (this.showArchived) {
 					return card.archived
 				}
@@ -257,6 +261,11 @@ export default {
 	methods: {
 		...mapActions(useTrashbinStore, ['stackUndoDelete']),
 		...mapActions(useStackStore, ['setDoneStack', 'deleteStack', 'updateStack']),
+		...mapActions(useCardStore, {
+			reorderCardInStore: 'reorderCard',
+			archiveUnarchiveCardInStore: 'archiveUnarchiveCard',
+			addCardInStore: 'addCard',
+		}),
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
 			// so we have to ignore it
@@ -276,12 +285,12 @@ export default {
 					card.stackId = stackId
 					card.order = addedIndex
 					console.debug('move card to stack', card.stackId, card.order)
-					await this.$store.dispatch('reorderCard', card)
+					await this.reorderCardInStore(card)
 				}
 				if (addedIndex !== null && removedIndex !== null) {
 					card.order = addedIndex
 					console.debug('move card in stack', card.stackId, card.order)
-					await this.$store.dispatch('reorderCard', card)
+					await this.reorderCardInStore(card)
 				}
 			}
 		},
@@ -302,11 +311,10 @@ export default {
 			showUndo(t('deck', 'List deleted'), () => this.stackUndoDelete(stack))
 		},
 		setArchivedToAllCardsFromStack(stack, isArchived) {
-
 			this.stackTransfer.total = this.cardsByStack.length
 			this.cardsByStack.forEach((card, index) => {
 				this.stackTransfer.current = index
-				this.$store.dispatch('archiveUnarchiveCard', { ...card, archived: isArchived })
+				this.archiveUnarchiveCardInStore({ ...card, archived: isArchived })
 			})
 			this.modalArchivAllCardsShow = false
 		},
@@ -331,7 +339,7 @@ export default {
 			this.stateCardCreating = true
 			try {
 				this.animate = true
-				const newCard = await this.$store.dispatch('addCard', {
+				const newCard = await this.addCardInStore({
 					title: this.newCardTitle,
 					stackId: this.stack.id,
 					boardId: this.stack.boardId,

src/components/card/CardSidebar.vue

@@ -101,6 +101,8 @@ import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
 import CardMenuEntries from '../cards/CardMenuEntries.vue'
+import { mapActions, mapState } from 'pinia'
+import { useCardStore } from '../../stores/card.js'
 
 const capabilities = getCapabilities()
 
@@ -151,14 +153,15 @@ export default {
 		}
 	},
 	computed: {
+		...mapState(useCardStore, ['cardById']),
 		...mapStateVuex({
 			isFullApp: (state) => state.isFullApp,
 			currentBoard: (state) => state.currentBoard,
 			hasCardSaveError: (state) => state.hasCardSaveError,
 		}),
 		...mapGetters(['canEdit', 'assignables']),
 		currentCard() {
-			return this.$store.getters.cardById(this.id)
+			return this.cardById(this.id)
 		},
 		cardOwnerDisplayName() {
 			return this.currentCard.owner?.displayname ?? this.currentCard.owner?.uid ?? this.currentCard.owner ?? null
@@ -216,6 +219,9 @@ export default {
 		},
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			updateCardTitleInStore: 'updateCardTitle',
+		}),
 		focusHeader() {
 			this.$nextTick(() => {
 				this.$refs?.cardSidebar.$el.querySelector('.app-sidebar-header__mainname')?.focus()
@@ -227,7 +233,7 @@ export default {
 				return
 			}
 			this.isEditingTitle = false
-			this.$store.dispatch('updateCardTitle', {
+			this.updateCardTitleInStore({
 				...this.currentCard,
 				title: this.titleEditing,
 			})

src/components/card/CardSidebarTabDetails.vue

@@ -48,6 +48,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import { mapActions } from 'pinia'
 import moment from '@nextcloud/moment'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -63,6 +64,7 @@ import DueDateSelector from './DueDateSelector.vue'
 import StartDateSelector from './StartDateSelector.vue'
 import { debounce } from 'lodash'
 import DependentCardsSelector from './DependentCardsSelector.vue'
+import { useCardStore } from '../../stores/card.js'
 
 export default {
 	name: 'CardSidebarTabDetails',
@@ -116,6 +118,16 @@ export default {
 		this.initialize()
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			assignCardToUserInStore: 'assignCardToUser',
+			removeUserFromCardInStore: 'removeUserFromCard',
+			updateCardDueInStore: 'updateCardDue',
+			updateCardStartDateInStore: 'updateCardStartDate',
+			addLabelInStore: 'addLabel',
+			removeLabelInStore: 'removeLabel',
+			assignDependentCardInStore: 'assignDependentCard',
+			removeDependentCardInStore: 'removeDependentCard',
+		}),
 		async descriptionChanged(newDesc) {
 			if (newDesc === this.copiedCard.description) {
 				return
@@ -133,7 +145,7 @@ export default {
 		},
 
 		assignUserToCard(user) {
-			this.$store.dispatch('assignCardToUser', {
+			this.assignCardToUserInStore({
 				card: this.copiedCard,
 				assignee: {
 					userId: user.uid,
@@ -143,7 +155,7 @@ export default {
 		},
 
 		removeUserFromCard(user) {
-			this.$store.dispatch('removeUserFromCard', {
+			this.removeUserFromCardInStore({
 				card: this.copiedCard,
 				assignee: {
 					userId: user.uid,
@@ -153,7 +165,7 @@ export default {
 		},
 
 		updateCardDue(val) {
-			this.$store.dispatch('updateCardDue', {
+			this.updateCardDueInStore({
 				...this.copiedCard,
 				duedate: val ? (new Date(val)).toISOString() : null,
 			})
@@ -164,7 +176,7 @@ export default {
 		}, 500, { leading: true }),
 
 		updateCardStartDate(val) {
-			this.$store.dispatch('updateCardStartDate', {
+			this.updateCardStartDateInStore({
 				...this.copiedCard,
 				startdate: val ? (new Date(val)).toISOString() : null,
 			})
@@ -181,7 +193,7 @@ export default {
 				labelId: newLabel.id,
 				boardId: this.copiedCard.boardId,
 			}
-			this.$store.dispatch('addLabel', data)
+			this.addLabelInStore(data)
 		},
 
 		async addLabelToBoardAndCard(name) {
@@ -206,7 +218,7 @@ export default {
 				card: this.copiedCard,
 				labelId: removedLabel.id,
 			}
-			this.$store.dispatch('removeLabel', data)
+			this.removeLabelInStore(data)
 		},
 		assignDependentCard(dependentCard) {
 			if (!dependentCard?.id) {
@@ -221,7 +233,7 @@ export default {
 				this.copiedCard.dependentCards.push(dependentCard.id)
 			}
 
-			this.$store.dispatch('assignDependentCard', {
+			this.assignDependentCardInStore({
 				card: this.copiedCard,
 				dependentCard,
 			})
@@ -236,7 +248,7 @@ export default {
 				this.copiedCard.dependentCards = this.copiedCard.dependentCards.filter((id) => id !== dependentCardId)
 			}
 
-			this.$store.dispatch('removeDependentCard', {
+			this.removeDependentCardInStore({
 				card: this.copiedCard,
 				dependentCardId,
 			})