[6942] Pinia Task 13 - account-team

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'
         },

frontend/src/components/blueprints/BlueprintTile.vue

@@ -63,8 +63,8 @@
 <script>
 import { CheckCircleIcon, PlusIcon } from '@heroicons/vue/outline'
 import { SearchIcon } from '@heroicons/vue/solid'
+import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
-import { mapState } from 'vuex'
 
 import ProjectIcon from '../../components/icons/Projects.js'
 import { useNavigationHelper } from '../../composables/NavigationHelper.js'
@@ -73,6 +73,8 @@ import FfDialog from '../../ui-components/components/DialogBox.vue'
 import FormRow from '../FormRow.vue'
 import AssetDetailDialog from '../dialogs/AssetDetailDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'BlueprintTile',
     components: {
@@ -134,7 +136,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         categoryClass () {
             // to lower case and strip spaces
             return this.blueprint?.category.toLowerCase().replace(/\s/g, '-')

frontend/src/components/dialogs/BlueprintSelectorDialog.vue

@@ -29,10 +29,12 @@
 </template>
 <script>
 import FlowRenderer from '@flowfuse/flow-renderer'
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import BlueprintSelection from '../../pages/instance/Blueprints/BlueprintSelection.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+
 export default {
     name: 'BlueprintSelectorDialog',
     components: { BlueprintSelection },
@@ -59,7 +61,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['blueprints', 'defaultBlueprint'])
+        ...mapState(useAccountStore, ['blueprints', 'defaultBlueprint'])
     },
     watch: {
         currentBlueprint (val) {

frontend/src/components/dialogs/EditApplicationPermissionsDialog.vue

@@ -17,14 +17,16 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapState } from 'vuex'
 
 import teamApi from '../../api/team.js'
 import { capitalize } from '../../composables/strings/String.js'
 import alerts from '../../services/alerts.js'
 import { RoleNames, Roles } from '../../utils/roles.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default defineComponent({
     name: 'EditApplicationPermissionsDialog',
     emits: ['user-updated'],
@@ -38,7 +40,7 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         options () {
             return Object.keys(RoleNames)
                 .filter(key => key.toString() !== '99')

frontend/src/components/drawers/navigation/MainNav.vue

@@ -34,6 +34,7 @@ import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import NavItem from '../../NavItem.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxNavigationStore } from '@/stores/ux-navigation.js'
 
@@ -43,7 +44,8 @@ export default {
     emits: ['option-selected'],
     computed: {
         ...mapState(useUxNavigationStore, ['mainNav', 'mainNavContext']),
-        ...mapVuexState('account', ['team', 'features', 'notifications']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         ...mapGetters('account', ['requiresBilling']),
         nearestMetaMenu () {
             if (this.$route?.meta?.menu) {

frontend/src/components/drawers/notifications/NotificationsDrawer.vue

@@ -74,9 +74,8 @@
 
 <script>
 import { XIcon } from '@heroicons/vue/solid'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters, mapActions as mapVuexActions } from 'vuex'
 
 import userAPI from '../../../api/user.js'
 
@@ -86,6 +85,7 @@ import GenericNotification from '../../notifications/Generic.vue'
 import TeamInvitationAcceptedNotification from '../../notifications/invitations/Accepted.vue'
 import TeamInvitationReceivedNotification from '../../notifications/invitations/Received.vue'
 
+import { useAccountStore } from '@/stores/account.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -101,7 +101,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['notifications']),
+        ...mapState(useAccountStore, ['notifications']),
         canSelectAll () {
             return this.filteredNotifications.length !== this.selections.length
         },
@@ -126,7 +126,7 @@ export default {
     },
     methods: {
         ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
-        ...mapVuexActions('account', ['setNotifications']),
+        ...mapActions(useAccountStore, ['setNotifications']),
         closeDrawer () {
             this.closeRightDrawer()
         },