From cd9feb6d09180da4b0ad661beffd8cee88e38012 Mon Sep 17 00:00:00 2001 From: Wilfred Asomani Date: Tue, 27 Jun 2023 13:39:57 +0000 Subject: [PATCH] web/satellite: split projects by whether user owns them This change groups the list of projects in ProjectSelection.vue into those owned by the current user and those that are not. Issue: https://github.com/storj/storj/issues/5972 Change-Id: I20f4e68f84e4ece230afa53e7e7eed507da625af --- .../navigation/MobileNavigation.vue | 124 ++++++++++++++---- .../navigation/ProjectSelection.vue | 124 +++++++++++++++--- 2 files changed, 206 insertions(+), 42 deletions(-) diff --git a/web/satellite/src/components/navigation/MobileNavigation.vue b/web/satellite/src/components/navigation/MobileNavigation.vue index cb51366cf..955456033 100644 --- a/web/satellite/src/components/navigation/MobileNavigation.vue +++ b/web/satellite/src/components/navigation/MobileNavigation.vue @@ -27,24 +27,59 @@
-
-
-
- +

Project Settings

@@ -272,10 +307,19 @@ const isAllProjectsDashboard = computed((): boolean => { }); /** - * Returns projects list from store. + * Returns user's own projects. */ -const projects = computed((): Project[] => { - return projectsStore.projectsWithoutSelected; +const ownProjects = computed((): Project[] => { + const projects = projectsStore.projects.filter((p) => p.ownerId === usersStore.state.user.id); + return projects.sort(compareProjects); +}); + +/** + * Returns projects the user is invited to. + */ +const sharedProjects = computed((): Project[] => { + const projects = projectsStore.projects.filter((p) => p.ownerId !== usersStore.state.user.id); + return projects.sort(compareProjects); }); /** @@ -306,6 +350,15 @@ const user = computed((): User => { return usersStore.state.user; }); +/** + * This comparator is used to sort projects by isSelected. + */ +function compareProjects(a: Project, b: Project) { + if (a.isSelected) return -1; + if (b.isSelected) return 1; + return 0; +} + /** * Redirects to project dashboard. */ @@ -492,10 +545,7 @@ function navigateToBilling(): void { isOpened.value = false; if (route.path.includes(RouteConfig.Billing.path)) return; - let link = RouteConfig.Account.with(RouteConfig.Billing); - if (configStore.state.config.newBillingScreen) { - link = link.with(RouteConfig.BillingOverview); - } + const link = RouteConfig.Account.with(RouteConfig.Billing.with(RouteConfig.BillingOverview)); router.push(link.path); analytics.pageVisit(link.path); } @@ -754,6 +804,36 @@ async function onLogout(): Promise { border-radius: 8px 8px 0 0; } + &__section-head { + display: flex; + align-items: center; + gap: 24px; + height: 48px; + box-sizing: border-box; + padding: 8px 32px; + + &.shared { + border-top: 1px solid var(--c-grey-2); + } + + &__tag { + border: 1px solid var(--c-purple-2); + border-radius: 24px; + padding: 2px 8px; + text-align: center; + font-size: 12px; + font-weight: 600; + line-height: 18px; + color: var(--c-purple-4); + background: var(--c-white); + + &.shared { + border: 1px solid var(--c-yellow-2); + color: var(--c-yellow-5); + } + } + } + &__items { overflow-y: auto; background-color: #fff; diff --git a/web/satellite/src/components/navigation/ProjectSelection.vue b/web/satellite/src/components/navigation/ProjectSelection.vue index 404383199..3049a38ae 100644 --- a/web/satellite/src/components/navigation/ProjectSelection.vue +++ b/web/satellite/src/components/navigation/ProjectSelection.vue @@ -23,25 +23,61 @@
-
-
-
- + + +

Project Settings

@@ -153,10 +189,19 @@ const isDropdownShown = computed((): boolean => { }); /** - * Returns projects list from store. + * Returns user's own projects. */ -const projects = computed((): Project[] => { - return projectsStore.projectsWithoutSelected; +const ownProjects = computed((): Project[] => { + const projects = projectsStore.projects.filter((p) => p.ownerId === userStore.state.user.id); + return projects.sort(compareProjects); +}); + +/** + * Returns projects the user is invited to. + */ +const sharedProjects = computed((): Project[] => { + const projects = projectsStore.projects.filter((p) => p.ownerId !== userStore.state.user.id); + return projects.sort(compareProjects); }); /** @@ -173,6 +218,15 @@ const isBucketsView = computed((): boolean => { return route.path.includes(RouteConfig.Buckets.path); }); +/** + * This comparator is used to sort projects by isSelected. + */ +function compareProjects(a: Project, b: Project) { + if (a.isSelected) return -1; + if (b.isSelected) return 1; + return 0; +} + /** * Fetches projects related information and than toggles selection popup. */ @@ -428,6 +482,36 @@ function onCreateLinkClick(): void { border-radius: 8px 8px 0 0; } + &__section-head { + display: flex; + align-items: center; + gap: 24px; + height: 48px; + box-sizing: border-box; + padding: 8px 16px; + + &.shared { + border-top: 1px solid var(--c-grey-2); + } + + &__tag { + border: 1px solid var(--c-purple-2); + border-radius: 24px; + padding: 2px 8px; + text-align: center; + font-size: 12px; + font-weight: 600; + line-height: 18px; + color: var(--c-purple-4); + background: var(--c-white); + + &.shared { + border: 1px solid var(--c-yellow-2); + color: var(--c-yellow-5); + } + } + } + &__items { overflow-y: auto; max-height: 250px; @@ -446,7 +530,7 @@ function onCreateLinkClick(): void { &__unselected { font-size: 14px; line-height: 20px; - color: #1b2533; + color: var(--c-grey-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;