introduce pinia first stores

Signed-off-by: grnd-alt <git@belakkaf.net>

Author: grnd-alt

src/App.vue

@@ -30,7 +30,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { storeToRefs } from 'pinia'
+import { useBoardStore } from './stores/board.js'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
 import { NcModal, NcContent, NcAppContent, isMobile } from '@nextcloud/vue'
@@ -57,6 +58,17 @@ export default {
 			boardApi,
 		}
 	},
+	setup() {
+		const boardStore = useBoardStore()
+		const { navShown, sidebarShown: sidebarShownState, currentBoard } = storeToRefs(boardStore)
+
+		return {
+			boardStore,
+			navShown,
+			sidebarShownState,
+			currentBoard,
+		}
+	},
 	data() {
 		return {
 			addButton: {
@@ -77,11 +89,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			navShown: state => state.navShown,
-			sidebarShownState: state => state.sidebarShown,
-			currentBoard: state => state.currentBoard,
-		}),
 		// TODO: properly handle sidebar showing for route subview and board sidebar
 		sidebarRouterView() {
 			// console.log(this.$route)
@@ -92,19 +99,19 @@ export default {
 		},
 		cardDetailsInModal: {
 			get() {
-				return this.$store.getters.config('cardDetailsInModal')
+				return this.boardStore.getConfig('cardDetailsInModal')
 			},
 			set(newValue) {
-				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
+				this.boardStore.setConfig({ cardDetailsInModal: newValue })
 			},
 		},
 	},
 	created() {
 		const initialState = loadState('deck', 'initialBoards', null)
 		if (initialState !== null) {
-			this.$store.dispatch('loadBoards')
+			this.boardStore.loadBoards()
 		}
-		this.$store.dispatch('loadSharees')
+		this.boardStore.loadSharees()
 	},
 	mounted() {
 		// Redirect to cleaner URL (without /index.php) if RewriteBase is enabled
@@ -115,7 +122,7 @@ export default {
 		emit('toggle-navigation', { open: !this.isMobile && this.navShown, _initial: true })
 		this.$nextTick(() => {
 			subscribe('navigation-toggled', (navState) => {
-				this.$store.dispatch('toggleNav', navState.open)
+				this.boardStore.toggleNav(navState.open)
 			})
 		})
 	},

src/components/card/CardSidebar.vue

@@ -149,7 +149,7 @@ export default {
 			currentBoard: (state) => state.currentBoard,
 			hasCardSaveError: (state) => state.hasCardSaveError,
 		}),
-		...mapGetters(['canEdit', 'assignables', 'cardActions', 'stackById']),
+		...mapGetters(['canEdit', 'assignables', 'stackById']),
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
 		},

src/components/cards/CardMenuEntries.vue

@@ -73,6 +73,7 @@ import { showUndo } from '@nextcloud/dialogs'
 
 import '@nextcloud/dialogs/style.css'
 import { emit } from '@nextcloud/event-bus'
+import { useActionsStore } from '../../stores/actions'
 
 export default {
 	name: 'CardMenuEntries',
@@ -88,6 +89,12 @@ export default {
 		},
 	},
 	emits: ['edit-title'],
+	setup() {
+		const actionsStore = useActionsStore()
+		return {
+			cardActions: actionsStore.cardActions,
+		}
+	},
 	data() {
 		return {
 			modalShow: false,
@@ -100,7 +107,6 @@ export default {
 		...mapGetters([
 			'isArchived',
 			'boards',
-			'cardActions',
 			'stackById',
 			'boardById',
 		]),

src/components/navigation/AppNavigation.vue

@@ -64,7 +64,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
 import { NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
@@ -81,6 +80,8 @@ import AppNavigationImportBoard from './AppNavigationImportBoard.vue'
 import DeckAppSettings from '../DeckAppSettings.vue'
 import IconCog from 'vue-material-design-icons/CogOutline.vue'
 import { getCurrentUser } from '@nextcloud/auth'
+import { useBoardStore } from '../../stores/board'
+import { storeToRefs } from 'pinia'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -110,6 +111,17 @@ export default {
 			default: false,
 		},
 	},
+	setup() {
+		const boardStore = useBoardStore()
+		const { noneArchivedBoards, archivedBoards, sharedBoards } = storeToRefs(boardStore)
+
+		return {
+			boardStore,
+			noneArchivedBoards,
+			archivedBoards,
+			sharedBoards,
+		}
+	},
 	data() {
 		return {
 			opened: false,
@@ -122,36 +134,31 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
-			'noneArchivedBoards',
-			'archivedBoards',
-			'sharedBoards',
-		]),
 		isAdmin() {
 			return !!getCurrentUser()?.isAdmin
 		},
 		cardDetailsInModal: {
 			get() {
-				return this.$store.getters.config('cardDetailsInModal')
+				return this.boardStore.cardDetailsInModal
 			},
 			set(newValue) {
-				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
+				this.boardStore.setConfig({ key: 'cardDetailsInModal', value: newValue })
 			},
 		},
 		cardIdBadge: {
 			get() {
-				return this.$store.getters.config('cardIdBadge')
+				return this.boardStore.cardIdBadge
 			},
 			set(newValue) {
-				this.$store.dispatch('setConfig', { cardIdBadge: newValue })
+				this.boardStore.setConfig({ key: 'cardIdBadge', value: newValue })
 			},
 		},
 		configCalendar: {
 			get() {
-				return this.$store.getters.config('calendar')
+				return this.boardStore.configCalendar
 			},
 			set(newValue) {
-				this.$store.dispatch('setConfig', { calendar: newValue })
+				this.boardStore.setConfig({ key: 'calendar', value: newValue })
 			},
 		},
 	},

src/components/navigation/AppNavigationAddBoard.vue

@@ -45,6 +45,7 @@
 import { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import { useBoardStore } from '../../stores/board'
 
 /**
  *
@@ -62,6 +63,12 @@ export default {
 	components: { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField, CheckIcon, CloseIcon },
 	directives: {},
 	props: {},
+	setup () {
+		const boardStore = useBoardStore()
+		return {
+			boardStore,
+		}
+	},
 	data() {
 		return {
 			value: '',
@@ -81,7 +88,7 @@ export default {
 		async createBoard(e) {
 			this.loading = true
 			const title = this.value.trim()
-			await this.$store.dispatch('createBoard', {
+			await this.boardStore.createBoard({
 				title,
 				color: this.color.substring(1),
 			})

src/main.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import Vue from 'vue'
+import { pinia } from './stores/index.js'
 import App from './App.vue'
 import router from './router.js'
 import storeFactory from './store/main.js'
@@ -14,6 +15,7 @@ import ClickOutside from 'vue-click-outside'
 import './shared-init.js'
 import './models/index.js'
 import { initSessions } from './sessions.js'
+import { useActionsStore } from './stores/actions.js'
 
 // the server snap.js conflicts with vertical scrolling so we disable it
 document.body.setAttribute('data-snap-ignore', 'true')
@@ -48,6 +50,7 @@ new Vue({
 	name: 'Deck',
 	router,
 	store,
+	pinia,
 	data() {
 		return {
 			time: Date.now(),
@@ -115,5 +118,6 @@ window.OCA.Deck.registerCardAction = ({ label, callback, icon }) => {
 		callback,
 		icon,
 	}
-	store.dispatch('addCardAction', cardAction)
+	const actionsStore = useActionsStore()
+	actionsStore.addCardAction(cardAction)
 }

src/store/actions.js

@@ -11,7 +11,6 @@ import Vuex from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { BoardApi } from '../services/BoardApi.js'
-import actions from './actions.js'
 import stackModuleFactory from './stack.js'
 import cardModuleFactory from './card.js'
 import comment from './comment.js'
@@ -35,7 +34,6 @@ export const BOARD_FILTERS = {
 export default function storeFactory() {
 	return new Vuex.Store({
 		modules: {
-			actions,
 			stack: stackModuleFactory(),
 			card: cardModuleFactory(),
 			comment,

src/store/main.js

@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+
+
+export const useActionsStore = defineStore('actions',
+	{
+	state: () => ({
+		actions: {
+			card: [],
+		}
+	}),
+	getters: {
+		cardActions: (state) => state.actions.card,
+	},
+	actions: {
+		async addCardAction(action) {
+			this.actions.card.push(action)
+		},
+	},
+})
+