Glass nav fix + team/profile pages with CatalogPage layout
All checks were successful
Build Docker Image / build (push) Successful in 4m20s
All checks were successful
Build Docker Image / build (push) Successful in 4m20s
- Fix glass nav on clientarea pages (add isClientArea to is-collapsed) - Rewrite team page using CatalogPage with glass panel - Rewrite profile page using CatalogPage with glass panel
This commit is contained in:
Ruslan Bakiev
@@ -1,76 +1,105 @@
|
||||
<template>
|
||||
<Section variant="plain" paddingY="md">
|
||||
<Stack gap="6">
|
||||
<PageHeader
|
||||
:title="$t('dashboard.profile')"
|
||||
:actions="[{ label: t('clientProfile.actions.debugTokens'), icon: 'lucide:bug', to: localePath('/clientarea/profile/debug-tokens') }]"
|
||||
/>
|
||||
<CatalogPage
|
||||
:items="[]"
|
||||
:loading="isLoading"
|
||||
:use-server-clustering="false"
|
||||
map-id="profile-map"
|
||||
point-color="#10b981"
|
||||
:show-panel="true"
|
||||
panel-width="w-96"
|
||||
:hide-view-toggle="true"
|
||||
>
|
||||
<template #panel>
|
||||
<!-- Error state -->
|
||||
<div v-if="hasError" class="p-4">
|
||||
<div class="bg-error/20 border border-error/30 rounded-lg p-4">
|
||||
<div class="font-semibold text-white mb-2">{{ $t('common.error') }}</div>
|
||||
<div class="text-sm text-white/70">{{ error }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Alert v-if="hasError" variant="error">
|
||||
<Stack gap="1">
|
||||
<Heading :level="4" weight="semibold">{{ $t('common.error') }}</Heading>
|
||||
<Text tone="muted">{{ error }}</Text>
|
||||
</Stack>
|
||||
</Alert>
|
||||
<template v-else>
|
||||
<!-- Panel header -->
|
||||
<div class="p-4 border-b border-white/10 flex-shrink-0">
|
||||
<div class="flex items-center gap-3">
|
||||
<UserAvatar
|
||||
:userId="userData?.id ?? undefined"
|
||||
:firstName="userData?.firstName ?? undefined"
|
||||
:lastName="userData?.lastName ?? undefined"
|
||||
:avatarId="userData?.avatarId ?? undefined"
|
||||
size="md"
|
||||
@avatar-changed="handleAvatarChange"
|
||||
/>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-semibold text-white truncate">
|
||||
{{ userData?.firstName || '' }} {{ userData?.lastName || '' }}
|
||||
</div>
|
||||
<div class="text-xs text-white/50">{{ $t('dashboard.profile') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Stack v-if="isLoading" align="center" justify="center" gap="3">
|
||||
<Spinner />
|
||||
<Text tone="muted">{{ t('clientProfile.states.loading') }}</Text>
|
||||
</Stack>
|
||||
<!-- Profile form -->
|
||||
<div class="flex-1 overflow-y-auto p-4">
|
||||
<form class="space-y-4" @submit.prevent="updateProfile">
|
||||
<!-- First name -->
|
||||
<div>
|
||||
<label class="block text-xs text-white/50 mb-1">{{ $t('profile.first_name') }}</label>
|
||||
<input
|
||||
v-model="profileForm.firstName"
|
||||
type="text"
|
||||
:placeholder="$t('profile.first_name_placeholder')"
|
||||
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<Card padding="lg">
|
||||
<Grid :cols="1" :lg="3" :gap="8">
|
||||
<GridItem :lg="2">
|
||||
<Stack gap="4">
|
||||
<form @submit.prevent="updateProfile">
|
||||
<Stack gap="4">
|
||||
<Input
|
||||
v-model="profileForm.firstName"
|
||||
type="text"
|
||||
:label="$t('profile.first_name')"
|
||||
:placeholder="$t('profile.first_name_placeholder')"
|
||||
/>
|
||||
<Input
|
||||
v-model="profileForm.lastName"
|
||||
type="text"
|
||||
:label="$t('profile.last_name')"
|
||||
:placeholder="$t('profile.last_name_placeholder')"
|
||||
/>
|
||||
<Input
|
||||
v-model="profileForm.phone"
|
||||
type="tel"
|
||||
:label="$t('profile.phone')"
|
||||
:placeholder="$t('profile.phone_placeholder')"
|
||||
/>
|
||||
<Button type="submit" :full-width="true" :disabled="isUpdating">
|
||||
<template v-if="isUpdating">{{ $t('profile.saving') }}...</template>
|
||||
<template v-else>{{ $t('profile.save') }}</template>
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
<!-- Last name -->
|
||||
<div>
|
||||
<label class="block text-xs text-white/50 mb-1">{{ $t('profile.last_name') }}</label>
|
||||
<input
|
||||
v-model="profileForm.lastName"
|
||||
type="text"
|
||||
:placeholder="$t('profile.last_name_placeholder')"
|
||||
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<GridItem>
|
||||
<Stack gap="6" align="center">
|
||||
<Stack gap="3" align="center">
|
||||
<Heading :level="3">{{ $t('profile.avatar') }}</Heading>
|
||||
<UserAvatar
|
||||
:userId="userData?.id ?? undefined"
|
||||
:firstName="userData?.firstName ?? undefined"
|
||||
:lastName="userData?.lastName ?? undefined"
|
||||
:avatarId="userData?.avatarId ?? undefined"
|
||||
@avatar-changed="handleAvatarChange"
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</Card>
|
||||
</template>
|
||||
</Stack>
|
||||
</Section>
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-xs text-white/50 mb-1">{{ $t('profile.phone') }}</label>
|
||||
<input
|
||||
v-model="profileForm.phone"
|
||||
type="tel"
|
||||
:placeholder="$t('profile.phone_placeholder')"
|
||||
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Save button -->
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm w-full bg-primary border-primary text-primary-content hover:bg-primary/80"
|
||||
:disabled="isUpdating"
|
||||
>
|
||||
<template v-if="isUpdating">{{ $t('profile.saving') }}...</template>
|
||||
<template v-else>{{ $t('profile.save') }}</template>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Debug tokens link -->
|
||||
<div class="mt-6 pt-4 border-t border-white/10">
|
||||
<NuxtLink
|
||||
:to="localePath('/clientarea/profile/debug-tokens')"
|
||||
class="flex items-center gap-2 text-sm text-white/50 hover:text-white transition-colors"
|
||||
>
|
||||
<Icon name="lucide:bug" size="14" />
|
||||
{{ t('clientProfile.actions.debugTokens') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -159,7 +188,6 @@ const updateProfile = async () => {
|
||||
|
||||
const handleAvatarChange = async (newAvatarId?: string) => {
|
||||
if (!newAvatarId) return
|
||||
// Only stage avatar change; will be saved on form submit
|
||||
avatarDraftId.value = newAvatarId
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user