JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrated MobileNavigation component to use SFC composition api

Browse Source 
Migrated component to use SFC composition api.
Fixed some router code usage in DashboardArea.
Fixed billing Detailed history router usage.
Fixed VBanner console error.

Change-Id: I372f870185a00334895c62d504e2aed44f8f5b9d
This commit is contained in:
Vitalii 2023-03-17 17:53:09 +02:00 committed by Storj Robot
parent 01f0e602b4
commit 6a99e3df31
4 changed files with 255 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/satellite/src/components/account/billing/depositAndBillingHistory/DetailedHistory.vue
View File

@ -32,7 +32,7 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import PaymentsItem from '@/components/account/billing/depositAndBillingHistory/PaymentsItem.vue';
import SortingHeader from '@/components/account/billing/depositAndBillingHistory/SortingHeader.vue';
@ -44,18 +44,16 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const store = useStore();
const notify = useNotify();
const router = useRouter();
const nativeRoute = useRoute();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const isDataFetching = ref<boolean>(true);
const route = reactive(nativeRoute);
/**
* Indicates if current route is billing history page.
*/
const isBillingHistory = computed((): boolean => {
return route.name === RouteConfig.BillingHistory.name;
return router.currentRoute.name === RouteConfig.BillingHistory.name;
});
/**

10
web/satellite/src/components/common/VBanner.vue
View File

@ -17,7 +17,7 @@
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { onMounted, onUnmounted, ref, watch } from 'vue';
import InfoIcon from '@/../static/images/notifications/info.svg';
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
@ -35,7 +35,7 @@ const props = withDefaults(defineProps<{
const isShown = ref<boolean>(true);
const bannerWidth = ref<number>(0);
let resizeObserver = reactive<ResizeObserver>();
const resizeObserver = ref<ResizeObserver>();
function closeClicked(): void {
isShown.value = false;
@ -49,11 +49,11 @@ function onBannerResize(): void {
}
function setResizable(): void {
resizeObserver?.observe(props.dashboardRef);
resizeObserver.value?.observe(props.dashboardRef);
}
onMounted((): void => {
resizeObserver = new ResizeObserver(onBannerResize);
resizeObserver.value = new ResizeObserver(onBannerResize);
if (props.dashboardRef) {
setResizable();
@ -62,7 +62,7 @@ onMounted((): void => {
});
onUnmounted((): void => {
resizeObserver?.unobserve(props.dashboardRef);
resizeObserver.value?.unobserve(props.dashboardRef);
});
watch(() => props.dashboardRef, () => {

425
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -158,9 +158,8 @@
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script setup lang="ts">
import { computed, ref } from 'vue';
import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -181,11 +180,10 @@ import { MetaUtils } from '@/utils/meta';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
import ProjectSelection from '@/components/navigation/ProjectSelection.vue';
import AccountArea from '@/components/navigation/AccountArea.vue';
import VLoader from '@/components/common/VLoader.vue';
import CrossIcon from '@/../static/images/common/closeCross.svg';
@ -212,304 +210,271 @@ import TierBadgeFree from '@/../static/images/navigation/tierBadgeFree.svg';
import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
import UsersIcon from '@/../static/images/navigation/users.svg';
// @vue/component
@Component({
components: {
ResourcesLinks,
QuickStartLinks,
ProjectSelection,
AccountArea,
LogoIcon,
DashboardIcon,
AccessGrantsIcon,
UsersIcon,
BillingIcon,
BucketsIcon,
ResourcesIcon,
QuickStartIcon,
ArrowIcon,
CheckmarkIcon,
ProjectIcon,
ManageIcon,
PassphraseIcon,
CreateProjectIcon,
VLoader,
CrossIcon,
MenuIcon,
InfoIcon,
SatelliteIcon,
AccountIcon,
SettingsIcon,
LogoutIcon,
TierBadgeFree,
TierBadgePro,
},
})
export default class MobileNavigation extends Vue {
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
private readonly auth: AuthHttpApi = new AuthHttpApi();
private FIRST_PAGE = 1;
public isResourcesDropdownShown = false;
public isQuickStartDropdownShown = false;
public isProjectDropdownShown = false;
public isAccountDropdownShown = false;
public isOpened = false;
public isLoading = false;
public navigation: NavigationLink[] = [
const FIRST_PAGE = 1;
const navigation: NavigationLink[] = [
RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
RouteConfig.Buckets.withIcon(BucketsIcon),
RouteConfig.AccessGrants.withIcon(AccessGrantsIcon),
RouteConfig.Users.withIcon(UsersIcon),
];
];
/**
* Redirects to project dashboard.
*/
public onLogoClick(): void {
if (this.isAllProjectsDashboard) {
this.$router.push(RouteConfig.AllProjectsDashboard.path);
return;
}
const store = useStore();
const router = useRouter();
const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi();
if (this.$route.name === RouteConfig.ProjectDashboard.name) {
return;
}
const isResourcesDropdownShown = ref<boolean>(false);
const isQuickStartDropdownShown = ref<boolean>(false);
const isProjectDropdownShown = ref<boolean>(false);
const isAccountDropdownShown = ref<boolean>(false);
const isOpened = ref<boolean>(false);
const isLoading = ref<boolean>(false);
this.$router.push(RouteConfig.ProjectDashboard.path);
}
public onNavClick(path: string): void {
this.trackClickEvent(path);
this.isOpened = false;
}
/**
* Toggles navigation content visibility.
*/
public toggleNavigation(): void {
this.isOpened = !this.isOpened;
}
/**
* Toggles resources dropdown visibility.
*/
public toggleResourcesDropdown(): void {
this.isResourcesDropdownShown = !this.isResourcesDropdownShown;
}
/**
* Toggles quick start dropdown visibility.
*/
public toggleQuickStartDropdown(): void {
this.isQuickStartDropdownShown = !this.isQuickStartDropdownShown;
}
/**
* Toggles projects dropdown visibility.
*/
public toggleProjectDropdown(): void {
this.isProjectDropdownShown = !this.isProjectDropdownShown;
}
/**
* Toggles account dropdown visibility.
*/
public toggleAccountDropdown(): void {
this.isAccountDropdownShown = !this.isAccountDropdownShown;
window.scrollTo(0, document.querySelector('.navigation-area__container__wrap')?.scrollHeight || 0);
}
/**
/**
* Indicates if all projects dashboard should be used.
*/
public get isAllProjectsDashboard(): boolean {
return this.$store.state.appStateModule.isAllProjectsDashboard;
}
const isAllProjectsDashboard = computed((): boolean => {
return store.state.appStateModule.isAllProjectsDashboard;
});
/**
/**
* Returns projects list from store.
*/
public get projects(): Project[] {
return this.$store.getters.projectsWithoutSelected;
}
const projects = computed((): Project[] => {
return store.getters.projectsWithoutSelected;
});
/**
* Sends new path click event to segment.
*/
public trackClickEvent(path: string): void {
this.analytics.pageVisit(path);
}
/**
* Toggles manage passphrase modal shown.
*/
public onManagePassphraseClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
}
/**
/**
* Indicates if current route is objects view.
*/
private get isBucketsView(): boolean {
const currentRoute = this.$route.path;
const isBucketsView = computed((): boolean => {
return router.currentRoute.path.includes(RouteConfig.BucketsManagement.path);
});
return currentRoute.includes(RouteConfig.BucketsManagement.path);
}
/**
/**
* Returns selected project from store.
*/
public get selectedProject(): Project {
return this.$store.getters.selectedProject;
const selectedProject = computed((): Project => {
return store.getters.selectedProject;
});
/**
* Returns satellite name from store.
*/
const satellite = computed((): boolean => {
return store.state.appStateModule.satelliteName;
});
/**
* Returns user entity from store.
*/
const user = computed((): User => {
return store.getters.user;
});
/**
* Redirects to project dashboard.
*/
function onLogoClick(): void {
if (isAllProjectsDashboard.value) {
router.push(RouteConfig.AllProjectsDashboard.path);
return;
}
public async onProjectClick(): Promise<void> {
this.toggleProjectDropdown();
if (router.currentRoute.name === RouteConfig.ProjectDashboard.name) {
return;
}
if (this.isLoading || !this.isProjectDropdownShown) return;
router.push(RouteConfig.ProjectDashboard.path);
}
this.isLoading = true;
function onNavClick(path: string): void {
trackClickEvent(path);
isOpened.value = false;
}
/**
* Toggles navigation content visibility.
*/
function toggleNavigation(): void {
isOpened.value = !isOpened.value;
}
/**
* Toggles resources dropdown visibility.
*/
function toggleResourcesDropdown(): void {
isResourcesDropdownShown.value = !isResourcesDropdownShown.value;
}
/**
* Toggles quick start dropdown visibility.
*/
function toggleQuickStartDropdown(): void {
isQuickStartDropdownShown.value = !isQuickStartDropdownShown.value;
}
/**
* Toggles projects dropdown visibility.
*/
function toggleProjectDropdown(): void {
isProjectDropdownShown.value = !isProjectDropdownShown.value;
}
/**
* Toggles account dropdown visibility.
*/
function toggleAccountDropdown(): void {
isAccountDropdownShown.value = !isAccountDropdownShown.value;
window.scrollTo(0, document.querySelector('.navigation-area__container__wrap')?.scrollHeight || 0);
}
/**
* Sends new path click event to segment.
*/
function trackClickEvent(path: string): void {
analytics.pageVisit(path);
}
/**
* Toggles manage passphrase modal shown.
*/
function onManagePassphraseClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
}
async function onProjectClick(): Promise<void> {
toggleProjectDropdown();
if (isLoading.value || !isProjectDropdownShown.value) return;
isLoading.value = true;
try {
await this.$store.dispatch(PROJECTS_ACTIONS.FETCH);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
await store.dispatch(PROJECTS_ACTIONS.FETCH);
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
} catch (error) {
await this.$notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
await notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
} finally {
this.isLoading = false;
}
isLoading.value = false;
}
}
/**
/**
* Fetches all project related information.
* @param projectID
*/
public async onProjectSelected(projectID: string): Promise<void> {
await this.analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
async function onProjectSelected(projectID: string): Promise<void> {
await analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
await store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
LocalData.setSelectedProjectId(projectID);
await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
this.isProjectDropdownShown = false;
await store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
if (this.isBucketsView) {
await this.$store.dispatch(OBJECTS_ACTIONS.CLEAR);
this.analytics.pageVisit(RouteConfig.Buckets.path);
await this.$router.push(RouteConfig.Buckets.path).catch(() => {return; });
isProjectDropdownShown.value = false;
if (isBucketsView.value) {
await store.dispatch(OBJECTS_ACTIONS.CLEAR);
analytics.pageVisit(RouteConfig.Buckets.path);
await router.push(RouteConfig.Buckets.path).catch(() => {return; });
}
try {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
await store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE);
await store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE);
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
} catch (error) {
await this.$notify.error(`Unable to select project. ${error.message}`, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
}
await notify.error(`Unable to select project. ${error.message}`, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
}
}
/**
/**
* Route to projects list page.
*/
public onProjectsLinkClick(): void {
if (this.$route.name !== RouteConfig.ProjectsList.name) {
this.analytics.pageVisit(RouteConfig.ProjectsList.path);
this.analytics.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED);
this.$router.push(RouteConfig.ProjectsList.path);
function onProjectsLinkClick(): void {
if (router.currentRoute.name !== RouteConfig.ProjectsList.name) {
analytics.pageVisit(RouteConfig.ProjectsList.path);
analytics.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED);
router.push(RouteConfig.ProjectsList.path);
}
this.isProjectDropdownShown = false;
}
isProjectDropdownShown.value = false;
}
/**
/**
* Route to create project page.
*/
public onCreateLinkClick(): void {
if (this.$route.name !== RouteConfig.CreateProject.name) {
this.analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
function onCreateLinkClick(): void {
if (router.currentRoute.name !== RouteConfig.CreateProject.name) {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = this.$store.getters.user;
const ownProjectsCount: number = this.$store.getters.projectsCount;
const user: User = store.getters.user;
const ownProjectsCount: number = store.getters.projectsCount;
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
} else {
this.analytics.pageVisit(RouteConfig.CreateProject.path);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
analytics.pageVisit(RouteConfig.CreateProject.path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
}
this.isProjectDropdownShown = false;
}
isProjectDropdownShown.value = false;
}
/**
/**
* Navigates user to billing page.
*/
public navigateToBilling(): void {
this.isOpened = false;
if (this.$route.path.includes(RouteConfig.Billing.path)) return;
function navigateToBilling(): void {
isOpened.value = false;
if (router.currentRoute.path.includes(RouteConfig.Billing.path)) return;
let link = RouteConfig.Account.with(RouteConfig.Billing);
if (MetaUtils.getMetaContent('new-billing-screen') === 'true') {
link = link.with(RouteConfig.BillingOverview);
}
this.$router.push(link.path);
this.analytics.pageVisit(link.path);
}
router.push(link.path);
analytics.pageVisit(link.path);
}
/**
/**
* Navigates user to account settings page.
*/
public navigateToSettings(): void {
this.isOpened = false;
this.analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path);
this.$router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;});
}
function navigateToSettings(): void {
isOpened.value = false;
analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path);
router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;});
}
/**
/**
* Logouts user and navigates to login page.
*/
public async onLogout(): Promise<void> {
this.analytics.pageVisit(RouteConfig.Login.path);
await this.$router.push(RouteConfig.Login.path);
async function onLogout(): Promise<void> {
analytics.pageVisit(RouteConfig.Login.path);
await router.push(RouteConfig.Login.path);
await Promise.all([
this.$store.dispatch(PM_ACTIONS.CLEAR),
this.$store.dispatch(PROJECTS_ACTIONS.CLEAR),
this.$store.dispatch(USER_ACTIONS.CLEAR),
this.$store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
this.$store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
this.$store.dispatch(BUCKET_ACTIONS.CLEAR),
this.$store.dispatch(OBJECTS_ACTIONS.CLEAR),
this.$store.dispatch(APP_STATE_ACTIONS.CLEAR),
this.$store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
this.$store.dispatch(AB_TESTING_ACTIONS.RESET),
this.$store.dispatch('files/clear'),
store.dispatch(PM_ACTIONS.CLEAR),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
store.dispatch(USER_ACTIONS.CLEAR),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
store.dispatch(AB_TESTING_ACTIONS.RESET),
store.dispatch('files/clear'),
]);
try {
this.analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await this.auth.logout();
analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
await auth.logout();
} catch (error) {
await this.$notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
}
}
/**
* Returns satellite name from store.
*/
public get satellite(): boolean {
return this.$store.state.appStateModule.satelliteName;
}
/**
* Returns user entity from store.
*/
public get user(): User {
return this.$store.getters.user;
await notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
}
}
</script>

8
web/satellite/src/views/DashboardArea.vue
View File

@ -296,14 +296,14 @@ const joinedWhileAgo = computed((): boolean => {
* Indicates if current route is projects list page.
*/
const isProjectListPage = computed((): boolean => {
return router.history.current?.name === RouteConfig.ProjectsList.name;
return router.currentRoute.name === RouteConfig.ProjectsList.name;
});
/**
* Indicates if current route is onboarding tour.
*/
const isOnboardingTour = computed((): boolean => {
return router.history.current?.path.includes(RouteConfig.OnboardingTour.path);
return router.currentRoute.path.includes(RouteConfig.OnboardingTour.path);
});
/**
@ -339,14 +339,14 @@ const isBillingNotificationShown = computed((): boolean => {
* Indicates if current route is create project page.
*/
const isCreateProjectPage = computed((): boolean => {
return router.history.current?.name === RouteConfig.CreateProject.name;
return router.currentRoute.name === RouteConfig.CreateProject.name;
});
/**
* Indicates if current route is the dashboard page.
*/
const isDashboardPage = computed((): boolean => {
return router.history.current?.name === RouteConfig.ProjectDashboard.name;
return router.currentRoute.name === RouteConfig.ProjectDashboard.name;
});
/**