refactor(pinia): move board logic to boardStore

src/App.vue

@@ -30,14 +30,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
 import { NcModal, NcContent, NcAppContent, isMobile } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import CardMoveDialog from './CardMoveDialog.vue'
+import { useBoardStore } from './stores/board.js'
+import { mapState } from 'pinia'
 
 const boardApi = new BoardApi()
 
@@ -77,10 +79,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
+		...mapState(useBoardStore, ['currentBoard']),
+		...mapStateVuex({
 			navShown: state => state.navShown,
 			sidebarShownState: state => state.sidebarShown,
-			currentBoard: state => state.currentBoard,
 		}),
 		// TODO: properly handle sidebar showing for route subview and board sidebar
 		sidebarRouterView() {
@@ -102,7 +104,7 @@ export default {
 	created() {
 		const initialState = loadState('deck', 'initialBoards', null)
 		if (initialState !== null) {
-			this.$store.dispatch('loadBoards')
+			useBoardStore().loadBoards()
 		}
 		this.$store.dispatch('loadSharees')
 	},

src/CardMoveDialog.vue

@@ -37,10 +37,10 @@ import { NcDialog, NcSelect, NcButton } from '@nextcloud/vue'
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { mapGetters } from 'vuex'
 import { mapActions, mapState } from 'pinia'
 import { useStackStore } from './stores/stack.js'
 import { useCardStore } from './stores/card.js'
+import { useBoardStore } from './stores/board.js'
 
 export default {
 	name: 'CardMoveDialog',
@@ -55,10 +55,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['boardById']),
 		...mapState(useStackStore, ['stackById']),
+		...mapState(useBoardStore, ['boardById', 'boards']),
 		activeBoards() {
-			return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
+			return this.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
 		},
 		isBoardAndStackChoosen() {
 			return !(this.selectedBoard === '' || this.selectedStack === '')

src/components/AttachmentDragAndDrop.vue

@@ -48,6 +48,8 @@
 import { NcModal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload.js'
 import { loadState } from '@nextcloud/initial-state'
+import { mapState } from 'pinia'
+import { useBoardStore } from '../stores/board.js'
 
 const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
 
@@ -71,8 +73,9 @@ export default {
 		}
 	},
 	computed: {
+		...mapState(useBoardStore, ['canEdit']),
 		isReadOnly() {
-			return !this.$store.getters.canEdit
+			return !this.canEdit
 		},
 		dropHintText() {
 			if (this.isReadOnly) {

src/components/Controls.vue

@@ -249,7 +249,7 @@
 						{{ t('deck', 'Gantt view') }}
 					</NcActionButton>
 					<NcActionSeparator />
-					<NcActionButton @click="toggleShowArchived">
+					<NcActionButton @click="() => toggleShowArchived()">
 						<template #icon>
 							<ArchiveIcon :size="20" decorative />
 						</template>
@@ -285,7 +285,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcActions, NcActionButton, NcActionSeparator, NcAvatar, NcButton, NcPopover, NcModal, NcTextField } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
@@ -302,8 +302,9 @@ import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
 import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
 import { getCurrentUser } from '@nextcloud/auth'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../stores/stack.js'
+import { useBoardStore } from '../stores/board.js'
 
 export default {
 	name: 'Controls',
@@ -368,17 +369,18 @@ export default {
 	},
 
 	computed: {
-		...mapGetters([
+		...mapState(useBoardStore, [
 			'canEdit',
 			'canManage',
 			'viewMode',
+			'showArchived',
 		]),
-		...mapState({
+		...mapStateVuex({
 			isFullApp: state => state.isFullApp,
+			navShown: state => state.navShown,
 			compactMode: state => state.compactMode,
 			showCardCover: state => state.showCardCover,
 			searchQuery: state => state.searchQuery,
-			showArchived: state => state.showArchived,
 		}),
 		detailsRoute() {
 			return {
@@ -422,26 +424,27 @@ export default {
 		this.setPageTitle('')
 	},
 	methods: {
+		...mapActions(useBoardStore, { setViewMode: 'setViewMode', toggleShowArchived: 'toggleShowArchived', setFilterInStore: 'setFilterInStore' }),
 		...mapActions(useStackStore, ['createStack']),
 		beforeSetFilter(e) {
 			if (this.filter.due === e.target.value) {
 				this.filter.due = ''
-				this.$store.dispatch('setFilter', { ...this.filter })
+				this.setFilterInStore({ ...this.filter })
 			}
 			if (e.target.value === 'unassigned') {
 				this.filter.users = []
-				this.$store.dispatch('setFilter', { ...this.filter })
+				this.setFilterInStore({ ...this.filter })
 			} else {
 				this.filter.completed = 'both'
-				this.$store.dispatch('setFilter', { ...this.filter })
+				this.setFilterInStore({ ...this.filter })
 			}
-			this.$store.dispatch('setFilter', { ...this.filter })
+			this.setFilterInStore({ ...this.filter })
 		},
 		setFilter() {
 			if (this.filter.users.length > 0) {
 				this.filter.unassigned = false
 			}
-			this.$nextTick(() => this.$store.dispatch('setFilter', { ...this.filter }))
+			this.$nextTick(() => this.setFilterInStore({ ...this.filter }))
 		},
 		setSearchQuery(value) {
 			this.$store.commit('setSearchQuery', value)
@@ -450,20 +453,14 @@ export default {
 			this.$store.commit('setSearchQuery', '')
 		},
 		toggleNav() {
-			this.$store.dispatch('toggleNav')
+			this.$store.dispatch('toggleNav', !this.navShown)
 		},
 		toggleCompactMode() {
 			this.$store.dispatch('toggleCompactMode')
 		},
 		toggleShowCardCover() {
 			this.$store.dispatch('toggleShowCardCover')
 		},
-		setViewMode(mode) {
-			this.$store.dispatch('setViewMode', mode)
-		},
-		toggleShowArchived() {
-			this.$store.dispatch('toggleShowArchived')
-		},
 		addNewStack() {
 			this.stack = { title: this.newStackTitle }
 			this.createStack(this.stack)
@@ -486,7 +483,7 @@ export default {
 		},
 		clearFilter() {
 			const filterReset = { tags: [], users: [], due: '', unassigned: false, completed: 'both' }
-			this.$store.dispatch('setFilter', { ...filterReset })
+			this.setFilterInStore({ ...filterReset })
 			this.filter = filterReset
 		},
 		clickShowAddCardModel() {

src/components/KeyboardShortcuts.vue

@@ -19,10 +19,11 @@
 <script>
 import DueDateSelector from './card/DueDateSelector.vue'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import TagSelector from './card/TagSelector.vue'
 import AssignmentSelector from './card/AssignmentSelector.vue'
 import CardItem from './cards/CardItem.vue'
+import { useBoardStore } from '../stores/board.js'
 
 export default {
 	name: 'KeyboardShortcuts',
@@ -41,8 +42,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			board: state => state.currentBoard,
+		...mapState(useBoardStore, {
+			board: 'currentBoard',
 		}),
 	},
 	created() {

src/components/board/Board.vue

@@ -90,7 +90,7 @@
 
 <script>
 import { Container, Draggable } from 'vue-smooth-dnd'
-import { mapState as mapStateVuex, mapGetters } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
@@ -104,6 +104,7 @@ import CardSidebar from '../card/CardSidebar.vue'
 import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../../stores/stack.js'
 import { useCardStore } from '../../stores/card.js'
+import { useBoardStore } from '../../stores/board.js'
 export default {
 	name: 'Board',
 	components: {
@@ -144,16 +145,16 @@ export default {
 	computed: {
 		...mapState(useStackStore, ['stacksByBoard']),
 		...mapState(useCardStore, ['cardById']),
+		...mapState(useBoardStore, {
+			board: 'currentBoard',
+			showArchived: 'showArchived',
+			canEdit: 'canEdit',
+			canManage: 'canManage',
+			viewMode: 'viewMode',
+		}),
 		...mapStateVuex({
 			isFullApp: state => state.isFullApp,
-			board: state => state.currentBoard,
-			showArchived: state => state.showArchived,
 		}),
-		...mapGetters([
-			'canEdit',
-			'canManage',
-			'viewMode',
-		]),
 		stacks() {
 			return this.board?.id ? this.stacksByBoard(this.board.id) : []
 		},
@@ -194,11 +195,12 @@ export default {
 		this.session?.close()
 	},
 	methods: {
+		...mapActions(useBoardStore, ['loadBoardById', 'toggleShowArchived']),
 		...mapActions(useStackStore, ['loadStacks', 'loadArchivedStacks', 'createStack', 'orderStack']),
 		async fetchData() {
 			this.loading = true
 			try {
-				await this.$store.dispatch('loadBoardById', this.id)
+				await this.loadBoardById(this.id)
 				await this.loadStacks(this.id)
 
 				const routeCardId = this.$route?.params?.cardId ? parseInt(this.$route.params.cardId) : null
@@ -207,7 +209,7 @@ export default {
 					await this.loadArchivedStacks(this.id)
 
 					if (this.cardById(routeCardId)) {
-						this.$store.commit('toggleShowArchived', true)
+						this.toggleShowArchived(true)
 					}
 				}
 

src/components/board/BoardSidebar.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 import SharingTabSidebar from './SharingTabSidebar.vue'
 import TagsTabSidebar from './TagsTabSidebar.vue'
 import DeletedTabSidebar from './DeletedTabSidebar.vue'
@@ -59,6 +59,7 @@ import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 import SharingIcon from 'vue-material-design-icons/ShareVariantOutline.vue'
 import TagsIcon from 'vue-material-design-icons/TagMultipleOutline.vue'
 import TrashIcon from 'vue-material-design-icons/TrashCanOutline.vue'
+import { useBoardStore } from '../../stores/board.js'
 const capabilities = window.OC.getCapabilities()
 
 export default {
@@ -87,11 +88,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			board: state => state.currentBoard,
-			labels: state => state.labels,
+		...mapState(useBoardStore, {
+			board: 'currentBoard',
+			canEdit: 'canEdit',
 		}),
-		...mapGetters(['canEdit']),
 	},
 	methods: {
 		closeSidebar() {

src/components/board/GanttView.vue

@@ -59,7 +59,6 @@
 </template>
 
 <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
@@ -68,6 +67,7 @@ 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'
+import { useBoardStore } from '../../stores/board.js'
 
 const STACK_COLORS = [
 	'#0082c9', '#4caf50', '#ff9800', '#e91e63',
@@ -200,7 +200,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['canEdit']),
+		...mapState(useBoardStore, ['canEdit']),
 		...mapState(useCardStore, ['cardsByStack']),
 		partitionedCards() {
 			const undatedCards = []