Rewrite team/profile/orders pages with bottom sheet (not side panel)
All checks were successful
Build Docker Image / build (push) Successful in 4m9s
All checks were successful
Build Docker Image / build (push) Successful in 4m9s
- All three pages now use CatalogPage + bottom sheet from bottom (70vh) - Glass style: bg-black/40 backdrop-blur-xl rounded-t-2xl - Drag handle at top - Two-column grid layout for team/profile - Orders list with search and filter - Map visible in background
This commit is contained in:
Ruslan Bakiev
@@ -1,105 +1,135 @@
|
||||
<template>
|
||||
<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>
|
||||
<CatalogPage
|
||||
:items="[]"
|
||||
:loading="false"
|
||||
:use-server-clustering="false"
|
||||
map-id="profile-map"
|
||||
point-color="#10b981"
|
||||
:show-panel="false"
|
||||
:hide-view-toggle="true"
|
||||
/>
|
||||
|
||||
<!-- Bottom Sheet -->
|
||||
<div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
|
||||
<!-- Glass sheet -->
|
||||
<div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
|
||||
<!-- Drag handle -->
|
||||
<div class="flex justify-center py-2">
|
||||
<div class="w-12 h-1.5 bg-white/30 rounded-full" />
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="px-6 pb-4 border-b border-white/10">
|
||||
<!-- Error state -->
|
||||
<div v-if="hasError" 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>
|
||||
|
||||
<!-- Profile header -->
|
||||
<template v-else>
|
||||
<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="lg"
|
||||
@avatar-changed="handleAvatarChange"
|
||||
/>
|
||||
<div>
|
||||
<div class="font-bold text-lg text-white">
|
||||
{{ userData?.firstName || '' }} {{ userData?.lastName || '' }}
|
||||
</div>
|
||||
<div class="text-xs text-white/50">{{ $t('dashboard.profile') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable content -->
|
||||
<div v-if="!hasError" class="overflow-y-auto h-[calc(70vh-120px)] px-6 py-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- Profile form -->
|
||||
<div class="bg-white/5 rounded-xl p-4 border border-white/10">
|
||||
<div class="font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Icon name="lucide:user" size="18" />
|
||||
{{ $t('profile.personal_info', 'Personal Information') }}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="bg-white/5 rounded-xl p-4 border border-white/10">
|
||||
<div class="font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Icon name="lucide:settings" size="18" />
|
||||
{{ $t('profile.settings', 'Settings') }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<!-- Debug tokens link -->
|
||||
<NuxtLink
|
||||
:to="localePath('/clientarea/profile/debug-tokens')"
|
||||
class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<Icon name="lucide:bug" size="18" class="text-white/50" />
|
||||
<div>
|
||||
<div class="text-sm text-white">{{ t('clientProfile.actions.debugTokens') }}</div>
|
||||
<div class="text-xs text-white/50">{{ t('clientProfile.actions.debugTokensDesc', 'View authentication tokens') }}</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user