feat(ui): align web shell and landing with logistics style
This commit is contained in:
Ruslan Bakiev
@@ -1,347 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
const isHomePage = computed(() => route.path === localePath('/'))
|
||||
const isCatalogSection = computed(() => route.path.startsWith(localePath('/catalog')))
|
||||
const isClientArea = computed(() => route.path.startsWith(localePath('/clientarea')))
|
||||
|
||||
const contentClass = computed(() => {
|
||||
if (isCatalogSection.value || isHomePage.value) {
|
||||
return 'flex-1 flex flex-col min-h-0'
|
||||
}
|
||||
return 'flex-1 flex flex-col min-h-0 px-3 lg:px-6'
|
||||
})
|
||||
|
||||
const mainStyle = computed(() => {
|
||||
if (isCatalogSection.value || isHomePage.value) return { paddingTop: '0' }
|
||||
if (isClientArea.value) return { paddingTop: '116px', paddingBottom: '96px' }
|
||||
return { paddingTop: '132px', paddingBottom: '96px' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col manager-logistics-shell">
|
||||
<AiChatSidebar
|
||||
:open="isChatOpen"
|
||||
:width="chatWidth"
|
||||
@close="isChatOpen = false"
|
||||
/>
|
||||
<div class="min-h-screen flex flex-col bg-base-100 text-base-content">
|
||||
<AppHeader />
|
||||
|
||||
<div class="flex-1 flex flex-col" :style="contentStyle">
|
||||
<!-- Fixed Header Container -->
|
||||
<div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
|
||||
<div class="header-glass-backdrop" aria-hidden="true" />
|
||||
|
||||
<!-- MainNavigation -->
|
||||
<MainNavigation
|
||||
class="relative z-10"
|
||||
:height="100"
|
||||
:collapse-progress="isHomePage ? 0 : 1"
|
||||
:hero-scroll-y="isHomePage ? heroScrollY : 0"
|
||||
:hero-base-height="isHomePage ? heroBaseHeight : 0"
|
||||
:session-checked="sessionChecked"
|
||||
:logged-in="isLoggedIn"
|
||||
:user-avatar-svg="userAvatarSvg"
|
||||
:user-name="userName"
|
||||
:user-initials="userInitials"
|
||||
:theme="theme"
|
||||
:user-data="userData"
|
||||
:is-seller="isSeller"
|
||||
:has-multiple-roles="hasMultipleRoles"
|
||||
:current-role="currentRole"
|
||||
:active-tokens="activeTokens"
|
||||
:available-chips="availableChips"
|
||||
:select-mode="selectMode"
|
||||
:search-query="searchQuery"
|
||||
:catalog-mode="catalogMode"
|
||||
:product-label="productLabel ?? undefined"
|
||||
:hub-label="hubLabel ?? undefined"
|
||||
:quantity="quantity"
|
||||
:can-search="canSearch"
|
||||
:show-mode-toggle="true"
|
||||
:show-active-mode="isCatalogSection"
|
||||
:is-collapsed="isHomePage ? false : (isCatalogSection || isClientArea)"
|
||||
:is-home-page="isHomePage"
|
||||
:is-client-area="isClientArea"
|
||||
:chat-open="isChatOpen"
|
||||
@toggle-theme="toggleTheme"
|
||||
@toggle-chat="isChatOpen = !isChatOpen"
|
||||
@set-catalog-mode="setCatalogMode"
|
||||
@sign-out="onClickSignOut"
|
||||
@sign-in="signIn()"
|
||||
@switch-team="switchToTeam"
|
||||
@switch-role="switchToRole"
|
||||
@start-select="startSelect"
|
||||
@cancel-select="cancelSelect"
|
||||
@edit-token="editFilter"
|
||||
@remove-token="removeFilter"
|
||||
@update:search-query="searchQuery = $event"
|
||||
@update-quantity="setQuantity"
|
||||
@search="onSearch"
|
||||
/>
|
||||
|
||||
<!-- Sub Navigation (section-specific tabs) - only for non-catalog/non-home/non-clientarea sections -->
|
||||
<SubNavigation
|
||||
v-if="!isHomePage && !isCatalogSection && !isClientArea"
|
||||
:section="currentSection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Page content - padding-top compensates for fixed header -->
|
||||
<main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6" :style="mainStyle">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
<main :class="contentClass" :style="mainStyle">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
|
||||
const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const localePath = useLocalePath()
|
||||
const { locale, locales } = useI18n()
|
||||
const switchLocalePath = useSwitchLocalePath()
|
||||
|
||||
const isChatOpen = useState('ai-chat-open', () => false)
|
||||
const chatWidth = computed(() => (isChatOpen.value ? 'clamp(240px, 15vw, 360px)' : '0px'))
|
||||
const contentStyle = computed(() => ({
|
||||
marginLeft: isChatOpen.value ? chatWidth.value : '0px',
|
||||
width: isChatOpen.value ? `calc(100% - ${chatWidth.value})` : '100%',
|
||||
transition: 'margin-left 250ms ease, width 250ms ease'
|
||||
}))
|
||||
|
||||
// Catalog search state
|
||||
const {
|
||||
selectMode,
|
||||
searchQuery,
|
||||
activeTokens,
|
||||
availableChips,
|
||||
startSelect,
|
||||
cancelSelect,
|
||||
removeFilter,
|
||||
editFilter,
|
||||
setQuantity,
|
||||
catalogMode,
|
||||
setCatalogMode,
|
||||
productLabel,
|
||||
hubLabel,
|
||||
quantity,
|
||||
canSearch
|
||||
} = useCatalogSearch()
|
||||
|
||||
// Collapsible header for catalog pages
|
||||
const { headerOffset, isCollapsed } = useScrollCollapse(100)
|
||||
|
||||
// Hero scroll for home page
|
||||
const {
|
||||
scrollY: heroScrollY,
|
||||
heroBaseHeight,
|
||||
} = useHeroScroll()
|
||||
|
||||
// Theme state
|
||||
const theme = useState<'silk' | 'night'>('theme', () => 'silk')
|
||||
|
||||
// User data state (shared across layouts)
|
||||
interface SelectedLocation {
|
||||
type: string
|
||||
uuid: string
|
||||
name: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
|
||||
const userData = useState<{
|
||||
id?: string
|
||||
firstName?: string
|
||||
lastName?: string
|
||||
avatarId?: string
|
||||
activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: SelectedLocation | null }
|
||||
activeTeamId?: string
|
||||
teams?: Array<{ id?: string; name?: string; logtoOrgId?: string; teamType?: string }>
|
||||
} | null>('me', () => null)
|
||||
|
||||
const sessionChecked = ref(false)
|
||||
const userAvatarSvg = useState('user-avatar-svg', () => '')
|
||||
const lastAvatarSeed = useState('user-avatar-seed', () => '')
|
||||
|
||||
const isSeller = computed(() => {
|
||||
return userData.value?.activeTeam?.teamType === 'SELLER'
|
||||
})
|
||||
|
||||
// Role switching support
|
||||
const buyerTeam = computed(() =>
|
||||
userData.value?.teams?.find(t => t?.teamType === 'BUYER')
|
||||
)
|
||||
const sellerTeam = computed(() =>
|
||||
userData.value?.teams?.find(t => t?.teamType === 'SELLER')
|
||||
)
|
||||
const hasBuyerTeam = computed(() => !!buyerTeam.value)
|
||||
const hasSellerTeam = computed(() => !!sellerTeam.value)
|
||||
const hasMultipleRoles = computed(() => hasBuyerTeam.value && hasSellerTeam.value)
|
||||
const currentRole = computed(() =>
|
||||
userData.value?.activeTeam?.teamType || 'BUYER'
|
||||
)
|
||||
|
||||
const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)
|
||||
|
||||
const userName = computed(() => {
|
||||
return userData.value?.firstName || 'User'
|
||||
})
|
||||
|
||||
const userInitials = computed(() => {
|
||||
const first = userData.value?.firstName?.charAt(0) || ''
|
||||
const last = userData.value?.lastName?.charAt(0) || ''
|
||||
if (first || last) return (first + last).toUpperCase()
|
||||
return '?'
|
||||
})
|
||||
|
||||
// Determine current section from route
|
||||
const currentSection = computed(() => {
|
||||
const path = route.path
|
||||
if (path.startsWith('/catalog') || path === '/') return 'catalog'
|
||||
if (path.includes('/clientarea/offers')) return 'seller'
|
||||
if (path.includes('/clientarea/orders') || path.includes('/clientarea/addresses') || path.includes('/clientarea/billing')) return 'orders'
|
||||
if (path.includes('/clientarea')) return 'settings'
|
||||
return 'catalog'
|
||||
})
|
||||
|
||||
// Home page detection
|
||||
const isHomePage = computed(() => {
|
||||
return route.path === '/' || route.path === '/en' || route.path === '/ru'
|
||||
})
|
||||
|
||||
// Catalog section detection (unified search, no SubNav needed)
|
||||
const isCatalogSection = computed(() => {
|
||||
return route.path.startsWith('/catalog') ||
|
||||
route.path.startsWith('/en/catalog') ||
|
||||
route.path.startsWith('/ru/catalog')
|
||||
})
|
||||
|
||||
// Client area detection (cabinet tabs in MainNavigation, no SubNav needed)
|
||||
const isClientArea = computed(() => {
|
||||
return route.path.includes('/clientarea')
|
||||
})
|
||||
|
||||
// Collapsible header logic - only for pages with SubNav
|
||||
const hasSubNav = computed(() => !isHomePage.value && !isCatalogSection.value && !isClientArea.value)
|
||||
const canCollapse = computed(() => hasSubNav.value)
|
||||
const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)
|
||||
|
||||
// Header container style - transform for SubNav pages
|
||||
const headerContainerStyle = computed(() => {
|
||||
if (hasSubNav.value) {
|
||||
// SubNav pages: slide up on scroll
|
||||
return { transform: `translateY(${headerOffset.value}px)` }
|
||||
}
|
||||
return {}
|
||||
})
|
||||
|
||||
|
||||
// Main content padding-top to compensate for fixed header
|
||||
const mainStyle = computed(() => {
|
||||
if (isCatalogSection.value) return { paddingTop: '0' }
|
||||
if (isHomePage.value) return { paddingTop: '0' }
|
||||
if (isClientArea.value) return { paddingTop: '116px' } // Header only, no SubNav
|
||||
return { paddingTop: '154px' }
|
||||
})
|
||||
|
||||
// Provide collapsed state to child components (CatalogPage needs it for map positioning)
|
||||
provide('headerCollapsed', isHeaderCollapsed)
|
||||
|
||||
// Avatar generation
|
||||
const generateUserAvatar = async (seed: string) => {
|
||||
if (!seed) return
|
||||
try {
|
||||
const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
|
||||
if (response.ok) {
|
||||
userAvatarSvg.value = await response.text()
|
||||
lastAvatarSeed.value = seed
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error generating avatar:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const { setActiveTeam } = useActiveTeam()
|
||||
const { mutate } = useGraphQL()
|
||||
const locationStore = useLocationStore()
|
||||
|
||||
const syncUserUi = async () => {
|
||||
if (!userData.value) {
|
||||
locationStore.clear()
|
||||
return
|
||||
}
|
||||
|
||||
if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
|
||||
setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
|
||||
}
|
||||
|
||||
const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'
|
||||
|
||||
if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
|
||||
userAvatarSvg.value = ''
|
||||
await generateUserAvatar(seed)
|
||||
}
|
||||
|
||||
locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
|
||||
}
|
||||
|
||||
watch(userData, () => {
|
||||
void syncUserUi()
|
||||
}, { immediate: true })
|
||||
|
||||
// Check session
|
||||
await fetchSession().catch(() => {})
|
||||
sessionChecked.value = true
|
||||
|
||||
const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string; teamType?: string }) => {
|
||||
if (!team?.id) return
|
||||
|
||||
try {
|
||||
const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
|
||||
const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')
|
||||
|
||||
if (result.switchTeam?.user && userData.value) {
|
||||
userData.value.activeTeam = team as typeof userData.value.activeTeam
|
||||
userData.value.activeTeamId = team.id
|
||||
if (team.logtoOrgId) {
|
||||
setActiveTeam(team.id, team.logtoOrgId)
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to switch team:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const switchToRole = async (role: 'BUYER' | 'SELLER') => {
|
||||
const targetTeam = role === 'SELLER' ? sellerTeam.value : buyerTeam.value
|
||||
if (targetTeam?.id) {
|
||||
await switchToTeam(targetTeam)
|
||||
// Redirect to appropriate page when in client area
|
||||
if (isClientArea.value) {
|
||||
const targetPath = role === 'SELLER'
|
||||
? '/clientarea/offers'
|
||||
: '/clientarea/orders'
|
||||
await navigateTo(localePath(targetPath))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onClickSignOut = () => {
|
||||
signOut(siteUrl)
|
||||
}
|
||||
|
||||
const applyTheme = (value: 'silk' | 'night') => {
|
||||
if (import.meta.client) {
|
||||
document.documentElement.setAttribute('data-theme', value)
|
||||
localStorage.setItem('theme', value)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const stored = import.meta.client ? localStorage.getItem('theme') : null
|
||||
if (stored === 'night' || stored === 'silk') {
|
||||
theme.value = stored as 'silk' | 'night'
|
||||
}
|
||||
applyTheme(theme.value)
|
||||
})
|
||||
|
||||
watch(theme, (value) => applyTheme(value))
|
||||
|
||||
const toggleTheme = () => {
|
||||
theme.value = theme.value === 'night' ? 'silk' : 'night'
|
||||
}
|
||||
|
||||
// Search handler for Quote mode - triggers search via shared state
|
||||
const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
|
||||
const onSearch = () => {
|
||||
// Navigate to catalog page if not there
|
||||
if (!route.path.includes('/catalog')) {
|
||||
router.push({ path: localePath('/catalog'), query: { ...route.query, mode: 'quote', select: 'product' } })
|
||||
}
|
||||
// Trigger search by incrementing the counter (page watches this)
|
||||
searchTrigger.value++
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user