introduce first pinia stores

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

Author: grnd-alt

package-lock.json

@@ -54,6 +54,7 @@
     "markdown-it-task-checkbox": "^1.0.6",
     "moment": "^2.30.1",
     "p-queue": "^8.0.1",
+    "pinia": "^2.3.1",
     "url-search-params-polyfill": "^8.2.5",
     "vue": "^2.7.15",
     "vue-at": "^2.5.1",

package.json

@@ -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/card/CardSidebar.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.js'
 
 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/cards/CardMenuEntries.vue

@@ -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/main.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,
@@ -385,6 +383,7 @@ export default function storeFactory() {
 			 *
 			 * @param commit.commit
 			 * @param commit
+			 * @param commit.state
 			 * @param board The board to update.
 			 * @return {Promise<void>}
 			 */

src/store/actions.js

@@ -0,0 +1,18 @@
+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)
+			},
+		},
+	})