From e65caad1f35ac67d4efed1ec0a925270f2100608 Mon Sep 17 00:00:00 2001 From: Kristaps Fabians Geikins Date: Wed, 7 Feb 2024 14:30:52 +0200 Subject: [PATCH] feat(fe2): /profile route for user profile edit [WBX-66] (#2015) * feat(fe2): /profile route for profile edit dialog * making dialogs render in SSR --- .../components/header/NavUserMenu.vue | 15 +++++++++- .../project/page/stats-block/Settings.vue | 7 ++--- .../frontend-2/lib/common/helpers/route.ts | 1 + packages/frontend-2/pages/index.vue | 3 +- packages/ui-components/package.json | 2 +- yarn.lock | 30 +++++++++++++++---- 6 files changed, 45 insertions(+), 13 deletions(-) diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue index 9f785cd416..2f3f34984c 100644 --- a/packages/frontend-2/components/header/NavUserMenu.vue +++ b/packages/frontend-2/components/header/NavUserMenu.vue @@ -148,6 +148,7 @@ import { useAuthManager } from '~~/lib/auth/composables/auth' import { useTheme, AppTheme } from '~~/lib/core/composables/theme' import { useServerInfo } from '~/lib/core/composables/server' import type { RouteLocationRaw } from 'vue-router' +import { homeRoute, profileRoute } from '~/lib/common/helpers/route' defineProps<{ loginUrl?: RouteLocationRaw @@ -158,14 +159,15 @@ const { activeUser, isGuest } = useActiveUser() const { isDarkTheme, setTheme } = useTheme() const { serverInfo } = useServerInfo() const router = useRouter() +const route = useRoute() const showInviteDialog = ref(false) const showProfileEditDialog = ref(false) const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon)) const version = computed(() => serverInfo.value?.version) - const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin) +const isProfileRoute = computed(() => route.path === profileRoute) const toggleInviteDialog = () => { showInviteDialog.value = true @@ -186,4 +188,15 @@ const goToConnectors = () => { const goToServerManagement = () => { router.push('/server-management') } + +watch( + isProfileRoute, + (newVal, oldVal) => { + if (newVal && !oldVal) { + showProfileEditDialog.value = true + void router.replace({ path: homeRoute, force: true }) // in-place replace + } + }, + { immediate: true } +) diff --git a/packages/frontend-2/components/project/page/stats-block/Settings.vue b/packages/frontend-2/components/project/page/stats-block/Settings.vue index b7d784b381..aad81240c8 100644 --- a/packages/frontend-2/components/project/page/stats-block/Settings.vue +++ b/packages/frontend-2/components/project/page/stats-block/Settings.vue @@ -102,16 +102,13 @@ const onButtonClick = () => { dialogOpen.value = true } -onMounted(() => { - readDialogStateFromQuery() -}) - watch( () => route.query.settings, (newSettings, oldSettings) => { if (newSettings !== oldSettings) { readDialogStateFromQuery() } - } + }, + { immediate: true } ) diff --git a/packages/frontend-2/lib/common/helpers/route.ts b/packages/frontend-2/lib/common/helpers/route.ts index c8ff728432..02bd3c80ab 100644 --- a/packages/frontend-2/lib/common/helpers/route.ts +++ b/packages/frontend-2/lib/common/helpers/route.ts @@ -2,6 +2,7 @@ import type { LocationQueryRaw } from 'vue-router' import { serializeHashState } from '~~/lib/common/composables/url' import { ViewerHashStateKeys } from '~~/lib/viewer/composables/setup/urlHashState' +export const profileRoute = '/profile' export const authBlockedDueToVerificationRoute = '/error-email-verify' export const homeRoute = '/' export const loginRoute = '/authn/login' diff --git a/packages/frontend-2/pages/index.vue b/packages/frontend-2/pages/index.vue index 97828778b8..88c83677eb 100644 --- a/packages/frontend-2/pages/index.vue +++ b/packages/frontend-2/pages/index.vue @@ -14,7 +14,8 @@ useHead({ }) definePageMeta({ - middleware: ['dashboard-redirect'] + middleware: ['dashboard-redirect'], + alias: '/profile' }) const { isLoggedIn } = useActiveUser() diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index df773016f7..11188b6627 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -38,7 +38,7 @@ "vue": "^3.3.0" }, "dependencies": { - "@headlessui/vue": "^1.7.13", + "@headlessui/vue": "^1.7.18", "@heroicons/vue": "^2.0.12", "@speckle/shared": "workspace:^", "@vueuse/core": "^9.13.0", diff --git a/yarn.lock b/yarn.lock index da2495281e..7e0e6cfd16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9994,12 +9994,14 @@ __metadata: languageName: node linkType: hard -"@headlessui/vue@npm:^1.7.13": - version: 1.7.13 - resolution: "@headlessui/vue@npm:1.7.13" +"@headlessui/vue@npm:^1.7.13, @headlessui/vue@npm:^1.7.18": + version: 1.7.18 + resolution: "@headlessui/vue@npm:1.7.18" + dependencies: + "@tanstack/vue-virtual": ^3.0.0-beta.60 peerDependencies: vue: ^3.2.0 - checksum: a8b68aec6003c1b0f298a5cca8aa1e37063322be000f0d730b6fc8580b78cccb22ac11fc3fabc5bea40998ed9cfc127328ee3519d803eda8a206b4d344338ab0 + checksum: aecbc3710de70748227ecd64699c34410bbd8c516b0f2d577bbdcde76ca4dcd31ca404500b817b53d4e8498f286e0b6525bb83bb28904b2e2bef6a2df328414b languageName: node linkType: hard @@ -14285,7 +14287,7 @@ __metadata: dependencies: "@babel/preset-env": ^7.21.5 "@babel/preset-react": ^7.18.6 - "@headlessui/vue": ^1.7.13 + "@headlessui/vue": ^1.7.18 "@heroicons/vue": ^2.0.12 "@rollup/plugin-typescript": ^11.1.0 "@speckle/shared": "workspace:^" @@ -15866,6 +15868,24 @@ __metadata: languageName: node linkType: hard +"@tanstack/virtual-core@npm:3.0.0": + version: 3.0.0 + resolution: "@tanstack/virtual-core@npm:3.0.0" + checksum: 7283d50fc7b7a56608c37a8e94a93b85890ff7e39c6281633a19c4d6f6f4fbf25f8418f1eec302a008a8746a0d1d0cd00630137b55e6cf019818d68af8ed16b6 + languageName: node + linkType: hard + +"@tanstack/vue-virtual@npm:^3.0.0-beta.60": + version: 3.0.4 + resolution: "@tanstack/vue-virtual@npm:3.0.4" + dependencies: + "@tanstack/virtual-core": 3.0.0 + peerDependencies: + vue: ^2.7.0 || ^3.0.0 + checksum: 9bae7a7f210154f27e379722d4e5777fbc7dcecd379cd1e88b7fe815c0066cabc3cf3235cdf4b708ca99c926c26cd0602704344ae4e22670a1ec78e1e2324bc4 + languageName: node + linkType: hard + "@testing-library/dom@npm:^8.5.0": version: 8.19.0 resolution: "@testing-library/dom@npm:8.19.0"