342 lines
11 KiB
Vue
342 lines
11 KiB
Vue
<template>
|
|
<div class="min-h-screen flex flex-col bg-base-300">
|
|
<!-- Fixed Header Container -->
|
|
<div class="fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
|
|
<!-- Animated background for home page -->
|
|
<HeroBackground v-if="isHomePage" :collapse-progress="collapseProgress" />
|
|
|
|
<!-- MainNavigation - dynamic height on home page -->
|
|
<MainNavigation
|
|
class="relative z-10"
|
|
:height="isHomePage ? heroHeight : 100"
|
|
:collapse-progress="isHomePage ? collapseProgress : 1"
|
|
: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 ? heroIsCollapsed : (isCatalogSection || isClientArea)"
|
|
:is-home-page="isHomePage"
|
|
:is-client-area="isClientArea"
|
|
@toggle-theme="toggleTheme"
|
|
@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"
|
|
>
|
|
<!-- Hero content for home page -->
|
|
<template v-if="isHomePage && collapseProgress < 1" #hero>
|
|
<h1
|
|
class="text-3xl lg:text-4xl font-bold text-white mb-4"
|
|
:style="{ opacity: 1 - collapseProgress }"
|
|
>
|
|
{{ $t('hero.tagline', 'Make trade easy') }}
|
|
</h1>
|
|
</template>
|
|
</MainNavigation>
|
|
|
|
<!-- 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>
|
|
</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()
|
|
|
|
// 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 {
|
|
heroHeight,
|
|
heroBaseHeight,
|
|
collapseProgress,
|
|
isCollapsed: heroIsCollapsed,
|
|
collapsedHeight
|
|
} = useHeroScroll()
|
|
|
|
// Theme state
|
|
const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')
|
|
|
|
// 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: `${heroBaseHeight.value}px` }
|
|
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: 'cupcake' | '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 === 'cupcake') {
|
|
theme.value = stored as 'cupcake' | 'night'
|
|
}
|
|
applyTheme(theme.value)
|
|
})
|
|
|
|
watch(theme, (value) => applyTheme(value))
|
|
|
|
const toggleTheme = () => {
|
|
theme.value = theme.value === 'night' ? 'cupcake' : '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' } })
|
|
}
|
|
// Trigger search by incrementing the counter (page watches this)
|
|
searchTrigger.value++
|
|
}
|
|
</script>
|