Merge pull request #8128 from nextcloud/refactor/pinia-migration-dashboardStore

refactor(pinia): migrate dashboard store

Author: grnd-alt

src/init-dashboard.js

@@ -17,58 +17,59 @@ const getAsyncImports = async () => {
 	}
 
 	const { default: Vue } = await import('vue')
+	const { createPinia, PiniaVuePlugin } = await import('pinia')
 	const { default: Vuex } = await import('vuex')
-	const { default: dashboard } = await import('./store/dashboard.js')
 
 	Vue.prototype.t = t
 	Vue.prototype.n = n
 	Vue.prototype.OC = OC
+	const pinia = createPinia()
+	Vue.use(PiniaVuePlugin)
 	Vue.use(Vuex)
-
 	const store = new Vuex.Store({
-		modules: {
-			dashboard,
-		},
 		strict: debug,
 	})
 
 	_imports = {
-		store, Vue,
+		pinia, Vue, store,
 	}
 
 	return _imports
 }
 
 document.addEventListener('DOMContentLoaded', () => {
 	OCA.Dashboard.register('deck', async (el) => {
-		const { Vue, store } = await getAsyncImports()
+		const { Vue, pinia, store } = await getAsyncImports()
 		const { default: DashboardUpcoming } = await import('./views/DashboardUpcoming.vue')
 
 		const View = Vue.extend(DashboardUpcoming)
 		const vm = new View({
 			propsData: {},
+			pinia,
 			store,
 		}).$mount(el)
 		return vm
 	})
 
 	OCA.Dashboard.register('deckToday', async (el) => {
-		const { Vue, store } = await getAsyncImports()
+		const { Vue, pinia, store } = await getAsyncImports()
 		const { default: DashboardToday } = await import('./views/DashboardToday.vue')
 		const View = Vue.extend(DashboardToday)
 		const vm = new View({
 			propsData: {},
+			pinia,
 			store,
 		}).$mount(el)
 		return vm
 	})
 
 	OCA.Dashboard.register('deckTomorrow', async (el) => {
-		const { Vue, store } = await getAsyncImports()
+		const { Vue, pinia, store } = await getAsyncImports()
 		const { default: DashboardTomorrow } = await import('./views/DashboardTomorrow.vue')
 		const View = Vue.extend(DashboardTomorrow)
 		const vm = new View({
 			propsData: {},
+			pinia,
 			store,
 		}).$mount(el)
 		return vm

src/store/dashboard.js

@@ -0,0 +1,21 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import { OverviewApi } from '../services/OverviewApi.js'
+
+const apiClient = new OverviewApi()
+
+export const useDashboardStore = defineStore('dashboard', {
+	state: () => ({
+		assignedCards: [],
+	}),
+	actions: {
+		async loadUpcoming() {
+			const upcommingCards = await apiClient.get('upcoming')
+			this.assignedCards = upcommingCards
+		},
+	},
+})

src/stores/dashboard.js

@@ -20,9 +20,10 @@
 
 <script>
 import { NcDashboardWidget } from '@nextcloud/vue'
-import { mapGetters } from 'vuex'
 import Card from '../components/dashboard/Card.vue'
 import { generateUrl } from '@nextcloud/router'
+import { useDashboardStore } from '../stores/dashboard.js'
+import { mapActions, mapState } from 'pinia'
 
 export default {
 	name: 'DashboardToday',
@@ -36,11 +37,9 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
-			'assignedCardsDashboard',
-		]),
+		...mapState(useDashboardStore, ['assignedCards']),
 		cards() {
-			const list = [...this.assignedCardsDashboard.today || []]
+			const list = [...this.assignedCards.today || []]
 			list.sort((a, b) => {
 				return (new Date(a.duedate)).getTime() - (new Date(b.duedate)).getTime()
 			})
@@ -52,10 +51,13 @@ export default {
 	},
 	beforeMount() {
 		this.loading = true
-		this.$store.dispatch('loadUpcoming').then(() => {
+		this.loadUpcoming().then(() => {
 			this.loading = false
 		})
 	},
+	methods: {
+		...mapActions(useDashboardStore, ['loadUpcoming']),
+	},
 }
 </script>
 

src/views/DashboardToday.vue

@@ -20,9 +20,10 @@
 
 <script>
 import { NcDashboardWidget } from '@nextcloud/vue'
-import { mapGetters } from 'vuex'
 import Card from '../components/dashboard/Card.vue'
 import { generateUrl } from '@nextcloud/router'
+import { useDashboardStore } from '../stores/dashboard.js'
+import { mapActions, mapState } from 'pinia'
 
 export default {
 	name: 'DashboardTomorrow',
@@ -36,11 +37,9 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
-			'assignedCardsDashboard',
-		]),
+		...mapState(useDashboardStore, ['assignedCards']),
 		cards() {
-			const list = [...this.assignedCardsDashboard.tomorrow || []]
+			const list = [...this.assignedCards.tomorrow || []]
 			list.sort((a, b) => {
 				return (new Date(a.duedate)).getTime() - (new Date(b.duedate)).getTime()
 			})
@@ -52,10 +51,13 @@ export default {
 	},
 	beforeMount() {
 		this.loading = true
-		this.$store.dispatch('loadUpcoming').then(() => {
+		this.loadUpcoming().then(() => {
 			this.loading = false
 		})
 	},
+	methods: {
+		...mapActions(useDashboardStore, ['loadUpcoming']),
+	},
 }
 </script>
 

src/views/DashboardTomorrow.vue

@@ -33,10 +33,11 @@
 <script>
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import { NcButton, NcDashboardWidget, NcModal } from '@nextcloud/vue'
-import { mapGetters } from 'vuex'
 import Card from '../components/dashboard/Card.vue'
 import { generateUrl } from '@nextcloud/router'
 import CreateNewCardCustomPicker from './CreateNewCardCustomPicker.vue'
+import { useDashboardStore } from '../stores/dashboard.js'
+import { mapActions, mapState } from 'pinia'
 
 export default {
 	name: 'DashboardUpcoming',
@@ -55,11 +56,9 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
-			'assignedCardsDashboard',
-		]),
+		...mapState(useDashboardStore, ['assignedCards']),
 		cards() {
-			const list = Object.values(this.assignedCardsDashboard).flat()
+			const list = Object.values(this.assignedCards).flat()
 				.filter((card) => {
 					return card.duedate !== null
 				})
@@ -74,11 +73,12 @@ export default {
 	},
 	beforeMount() {
 		this.loading = true
-		this.$store.dispatch('loadUpcoming').then(() => {
+		this.loadUpcoming().then(() => {
 			this.loading = false
 		})
 	},
 	methods: {
+		...mapActions(useDashboardStore, ['loadUpcoming']),
 		toggleAddCardModel() {
 			this.showAddCardModal = !this.showAddCardModal
 		},