Merge pull request #6952 from FlowFuse/6942-pinia-task-13-account-team

[6942] Pinia Task 13 - account-team

Author: cstns

frontend/src/App.vue

@@ -104,7 +104,7 @@ export default {
         ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
         ...mapState(useAccountAuthStore, ['user']),
         ...mapState(useUxLoadingStore, ['appLoader', 'offline']),
-        ...mapVuexState('account', ['team', 'settings']),
+        ...mapVuexState('account', ['settings']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },

frontend/src/components/DevicesBrowser.vue

@@ -348,7 +348,7 @@ import { CogIcon, PlusSmIcon } from '@heroicons/vue/solid'
 
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import deviceApi from '../api/devices.js'
 import teamApi from '../api/team.js'
@@ -386,6 +386,7 @@ import DevicesStatusBar from './charts/DeviceStatusBar.vue'
 import AddDeviceToGroupDialog from './dialogs/device-group-management/AddDeviceToGroupDialog.vue'
 import RemoveDeviceFromGroupDialog from './dialogs/device-group-management/RemoveDeviceFromGroupDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -461,7 +462,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['team']),
         ...mapGetters('account', ['featuresCheck']),
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxToursStore, ['tours']),
@@ -615,7 +616,7 @@ export default {
         if (this.deviceCountDeltaSincePageLoad !== 0) {
             // Trigger a refresh of team info to resync following device
             // changes
-            await this.$store.dispatch('account/refreshTeam')
+            await useContextStore().refreshTeam()
         }
     },
     methods: {

frontend/src/components/NotificationsButton.vue

@@ -11,19 +11,18 @@
 import { MailIcon } from '@heroicons/vue/outline'
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters } from 'vuex'
 
 import NotificationsDrawer from './drawers/notifications/NotificationsDrawer.vue'
 
+import { useAccountStore } from '@/stores/account.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
     name: 'NotificationsButton',
     components: { MailIcon },
     computed: {
         ...mapState(useUxDrawersStore, ['rightDrawer']),
-        ...mapGetters('account', ['hasNotifications']),
-        ...mapGetters('account', ['unreadNotificationsCount']),
+        ...mapState(useAccountStore, ['hasNotifications', 'unreadNotificationsCount']),
         notificationsCount: function () {
             // Return null if count = 0 so we don't show a 0 in the pill
             if (!this.unreadNotificationsCount) {

frontend/src/components/PageHeader.vue

@@ -104,7 +104,7 @@
 import { AcademicCapIcon, AdjustmentsIcon, CogIcon, CursorClickIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, XIcon } from '@heroicons/vue/solid'
 import { mapActions, mapState } from 'pinia'
 import { ref } from 'vue'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
@@ -120,6 +120,8 @@ import TeamSelection from './TeamSelection.vue'
 import GlobalSearch from './global-search/GlobalSearch.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -132,8 +134,9 @@ export default {
         },
         ...mapState(useUxDrawersStore, ['leftDrawer', 'hiddenLeftDrawer']),
         ...mapState(useAccountAuthStore, ['user']),
-        ...mapVuexState('account', ['team', 'teams']),
-        ...mapGetters('account', ['notifications', 'hasAvailableTeams', 'defaultUserTeam', 'canCreateTeam', 'isTrialAccount', 'featuresCheck']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams', 'notifications', 'hasAvailableTeams', 'defaultUserTeam']),
+        ...mapGetters('account', ['canCreateTeam', 'featuresCheck']),
         navigationOptions () {
             return [
                 {

frontend/src/components/TeamSelection.vue

@@ -42,12 +42,16 @@ import {
     ListboxOption
 } from '@headlessui/vue'
 import { PlusIcon, UserAddIcon } from '@heroicons/vue/solid'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
 import NavItem from './NavItem.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'FFTeamSelection',
     emits: ['option-selected'],
@@ -61,8 +65,10 @@ export default {
         return { PlusIcon, UserAddIcon, hasPermission }
     },
     computed: {
-        ...mapState('account', ['team', 'teams', 'settings']),
-        ...mapGetters('account', ['hasAvailableTeams', 'canCreateTeam']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams', 'hasAvailableTeams']),
+        ...mapVuexState('account', ['settings']),
+        ...mapGetters('account', ['canCreateTeam']),
         teamOptions () {
             return [
                 ...this.teams.map(team => {
@@ -101,7 +107,7 @@ export default {
     methods: {
         selectTeam (team) {
             if (team) {
-                this.$store.dispatch('account/setTeam', team.slug)
+                useAccountStore().setTeam(team.slug)
                     .then(() => this.$router.push({
                         name: 'Team',
                         params: {

frontend/src/components/TeamTypeTile.vue

@@ -31,11 +31,11 @@
 
 <script>
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import { useHubspotHelper } from '../composables/Hubspot.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 
 export default {
     name: 'TeamTypeTile',
@@ -59,7 +59,7 @@ export default {
         return { talkToSalesCalendarModal }
     },
     computed: {
-        ...mapVuexState('account', ['teams']),
+        ...mapState(useAccountStore, ['teams']),
         ...mapState(useAccountAuthStore, ['user']),
         pricing: function () {
             const billingDescriptionKey = this.billingInterval === 'year' ? 'yrDescription' : 'description'

frontend/src/components/banners/FeatureUnavailableToTeam.vue

@@ -26,7 +26,9 @@
 <script>
 import { SparklesIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'FeatureUnavailableToTeam',
@@ -49,7 +51,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         upgradePath () {
             return { name: 'TeamChangeType', params: { team_slug: this.team.slug } }
         }

frontend/src/components/banners/SubscriptionExpired.vue

@@ -28,10 +28,12 @@
 
 <script>
 import { ChevronRightIcon, ExclamationCircleIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import usePermissions from '../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'SubscriptionExpired',
     components: {
@@ -44,7 +46,7 @@ export default {
         return { hasPermission }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         billingPath () {
             return '/team/' + this.team.slug + '/billing'
         },

frontend/src/components/banners/TeamSuspended.vue

@@ -13,15 +13,17 @@
 
 <script>
 import { ExclamationCircleIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'TeamSuspended',
     components: {
         ExclamationCircleIcon
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     }
 }
 </script>

frontend/src/components/banners/TeamTrial.vue

@@ -38,10 +38,12 @@
 <script>
 import { ChevronRightIcon, ExclamationCircleIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import usePermissions from '../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamTrialBanner',
     components: {
@@ -54,7 +56,7 @@ export default {
         return { hasPermission }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['team']),
         billingPath () {
             return '/team/' + this.team.slug + '/settings/change-type'
         },