/
Default.vue
97 lines (81 loc) · 2.75 KB
/
Default.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-app>
<div v-if="isLoading" class="d-flex align-center justify-center w-100 h-100">
<v-progress-circular color="primary" indeterminate size="64" />
</div>
<template v-else>
<default-bar show-nav-drawer-button />
<ProjectNav v-if="appStore.state.isNavigationDrawerShown" />
<default-view />
</template>
</v-app>
</template>
<script setup lang="ts">
import { onBeforeMount, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { VApp, VProgressCircular } from 'vuetify/components';
import DefaultBar from './AppBar.vue';
import ProjectNav from './ProjectNav.vue';
import DefaultView from './View.vue';
import { RouteConfig } from '@/types/router';
import { Project } from '@/types/projects';
import { useBillingStore } from '@/store/modules/billingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAppStore } from '@poc/store/appStore';
const router = useRouter();
const route = useRoute();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const projectsStore = useProjectsStore();
const appStore = useAppStore();
const isLoading = ref<boolean>(true);
/**
* Selects the project with the given ID, redirecting to the
* all projects dashboard if no such project exists.
*/
async function selectProject(projectId: string): Promise<void> {
isLoading.value = true;
let projects: Project[];
try {
projects = await projectsStore.getProjects();
} catch (_) {
router.push('/projects');
return;
}
if (!projects.some(p => p.id === projectId)) {
router.push('/projects');
return;
}
projectsStore.selectProject(projectId);
isLoading.value = false;
}
watch(() => route.params.projectId, async newId => selectProject(newId as string));
/**
* Lifecycle hook after initial render.
* Pre fetches user`s and project information.
*/
onBeforeMount(async () => {
try {
await Promise.all([
usersStore.getUser(),
abTestingStore.fetchValues(),
usersStore.getSettings(),
]);
} catch (error) {
setTimeout(async () => await router.push(RouteConfig.Login.path), 1000);
return;
}
try {
await billingStore.setupAccount();
} catch (error) { /* empty */ }
try {
await billingStore.getCreditCards();
} catch (error) { /* empty */ }
selectProject(route.params.projectId as string);
});
</script>