[7839] Data Farm > Applications 4 - remaining vue + loaders

frontend/src/composables/useActiveApplication.ts

@@ -0,0 +1,27 @@
+import { useRouter } from 'vue-router'
+
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
+import type { ApplicationSummary } from '@/types'
+
+export function useActiveApplication () {
+    const router = useRouter()
+    const applicationsStore = useDataFarmApplicationsStore()
+
+    async function loadActiveApplication (id: string): Promise<ApplicationSummary | null> {
+        if (!id) return null
+        try {
+            return await applicationsStore.loadActiveApplication(id)
+        } catch {
+            const current = router.currentRoute.value
+            router.push({
+                name: 'page-not-found',
+                params: { pathMatch: current.path.substring(1).split('/') },
+                query: current.query,
+                hash: current.hash
+            })
+            return null
+        }
+    }
+
+    return { loadActiveApplication }
+}

frontend/src/layouts/Page.vue

@@ -1,11 +1,18 @@
 <template>
-    <slot name="header" />
-    <main :class="mainClasses">
-        <slot name="default" />
-    </main>
+    <div v-if="!pageLoader" class="flex flex-col flex-1 w-full min-h-0">
+        <slot name="header" />
+        <main :class="mainClasses">
+            <slot name="default" />
+        </main>
+    </div>
+    <ff-loading v-else :message="pageLoaderMessage" />
 </template>
 
 <script>
+import { mapState } from 'pinia'
+
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
+
 export default {
     name: 'PageLayout',
     props: {
@@ -15,6 +22,7 @@ export default {
         }
     },
     computed: {
+        ...mapState(useUxLoadingStore, ['pageLoader', 'pageLoaderMessage']),
         mainClasses () {
             const classes = ['flex-1', 'overflow-auto', 'h-full', 'w-full', 'flex', 'flex-col']
             if (!this.noPadding && !this.hasRouteDeclaredNoPadding) {

frontend/src/pages/application/CreateInstanceMultiStep.vue

@@ -30,7 +30,7 @@
         <ff-loading v-if="isLoading" />
 
         <MultiStepInstanceForm
-            v-else
+            v-else-if="application"
             ref="multiStepForm" :application="application" @instance-created="onInstanceCreated"
             @previous-step-state-changed="form.previousButtonState = $event"
             @next-step-state-changed="form.nextButtonState = $event"
@@ -40,24 +40,30 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
 import MultiStepInstanceForm from '../../components/multi-step-forms/instance/MultiStepInstanceForm.vue'
 
 import { getTeamProperty } from '../../composables/TeamProperties.js'
-import applicationMixin from '../../mixins/Application.js'
+
+import { useActiveApplication } from '../../composables/useActiveApplication'
 
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     name: 'ApplicationCreateInstance',
     components: {
         MultiStepInstanceForm
     },
-    mixins: [applicationMixin],
     inheritAttrs: false,
     emits: ['application-updated'],
+    setup () {
+        const { loadActiveApplication } = useActiveApplication()
+
+        return { loadActiveApplication }
+    },
     data () {
         return {
             loading: false,
@@ -74,8 +80,9 @@ export default {
     computed: {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
+        ...mapState(useDataFarmApplicationsStore, { application: 'activeApplication', applicationHydrated: 'applicationHydrated' }),
         isLoading () {
-            return this.loading || !this.team
+            return this.loading || !this.team || !this.applicationHydrated
         }
     },
     async created () {
@@ -107,9 +114,13 @@ export default {
             })
         }
 
-        await this.updateApplication()
+        await this.loadActiveApplication(this.$route.params.id)
+    },
+    beforeUnmount () {
+        this.clearActiveApplication()
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['clearActiveApplication']),
         async onInstanceCreated () {
             await useContextStore().refreshTeam()
 

frontend/src/pages/application/createInstance.vue

@@ -4,7 +4,7 @@
             <ff-page-header title="Instances">
                 <template #custom-breadcrumbs>
                     <ff-nav-breadcrumb v-if="team" :to="{name: 'team-applications', params: {team_slug: team.slug}}">Applications</ff-nav-breadcrumb>
-                    <ff-nav-breadcrumb v-if="team" :to="{name: 'Application', params: {id: application.id}}">
+                    <ff-nav-breadcrumb v-if="team && application" :to="{name: 'Application', params: {id: application.id}}">
                         {{ application.name }}
                     </ff-nav-breadcrumb>
                     <ff-nav-breadcrumb>
@@ -36,23 +36,23 @@
 
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/20/solid/index.js'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
 import instanceApi from '../../api/instances.js'
 
-import applicationMixin from '../../mixins/Application.js'
+import { useActiveApplication } from '../../composables/useActiveApplication'
 import Alerts from '../../services/alerts.js'
 import InstanceForm from '../instance/components/InstanceForm.vue'
 
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     name: 'ApplicationCreateInstance',
     components: {
         InstanceForm
     },
-    mixins: [applicationMixin],
     inheritAttrs: false,
     props: {
         sourceInstanceId: {
@@ -61,6 +61,11 @@ export default {
         }
     },
     emits: ['application-updated'],
+    setup () {
+        const { loadActiveApplication } = useActiveApplication()
+
+        return { loadActiveApplication }
+    },
     data () {
         return {
             icons: {
@@ -78,12 +83,13 @@ export default {
     computed: {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
+        ...mapState(useDataFarmApplicationsStore, { application: 'activeApplication', applicationHydrated: 'applicationHydrated' }),
         isLoading () {
-            return this.loading || !this.team
+            return this.loading || !this.team || !this.applicationHydrated
         }
     },
     async created () {
-        await this.updateApplication()
+        await this.loadActiveApplication(this.$route.params.id)
 
         if (this.sourceInstanceId) {
             instanceApi.getInstance(this.sourceInstanceId).then(instance => {
@@ -96,7 +102,11 @@ export default {
     async mounted () {
         this.mounted = true
     },
+    beforeUnmount () {
+        this.clearActiveApplication()
+    },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['clearActiveApplication']),
         async handleFormSubmit (formData, copyParts) {
             this.loading = true