Initial commit from monorepo
This commit is contained in:
Ruslan Bakiev
194
app/layouts/default.vue
Normal file
194
app/layouts/default.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="drawer lg:drawer-open">
|
||||
<input id="main-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen" />
|
||||
|
||||
<!-- Main content area -->
|
||||
<div class="drawer-content flex flex-col bg-base-200" :class="$slots.sidebar ? 'h-screen' : 'min-h-screen'">
|
||||
<!-- TopBar -->
|
||||
<TopBar
|
||||
:session-checked="sessionChecked"
|
||||
:logged-in="isLoggedIn"
|
||||
:novu-subscriber-id="novuSubscriberId"
|
||||
:user-avatar-svg="userAvatarSvg"
|
||||
:user-name="userName"
|
||||
:user-initials="userInitials"
|
||||
:theme="theme"
|
||||
@toggle-theme="toggleTheme"
|
||||
@toggle-sidebar="drawerOpen = !drawerOpen"
|
||||
@sign-out="onClickSignOut"
|
||||
@sign-in="signIn()"
|
||||
/>
|
||||
|
||||
<!-- Page content -->
|
||||
<main class="flex-1 flex flex-col min-h-0" :class="$slots.sidebar ? '' : 'p-4 lg:p-6'">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Footer (hide when custom sidebar is used, e.g. map page) -->
|
||||
<FooterPublic v-if="!$slots.sidebar" />
|
||||
</div>
|
||||
|
||||
<!-- Sidebar drawer -->
|
||||
<div class="drawer-side z-50">
|
||||
<label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
<slot name="sidebar">
|
||||
<Sidebar
|
||||
:user-data="userData"
|
||||
:is-seller="isSeller"
|
||||
:logged-in="isLoggedIn"
|
||||
@switch-team="switchToTeam"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</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 drawerOpen = ref(false)
|
||||
// Theme: use CSS default when not set, switch to DaisyUI "night" for dark
|
||||
const theme = useState<'default' | 'night'>('theme', () => 'default')
|
||||
const userData = useState<{
|
||||
id?: string
|
||||
firstName?: string
|
||||
lastName?: string
|
||||
avatarId?: string
|
||||
activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string }
|
||||
activeTeamId?: string
|
||||
teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
|
||||
} | null>('me', () => null)
|
||||
const sessionChecked = ref(false)
|
||||
const userAvatarSvg = useState('user-avatar-svg', () => '')
|
||||
const lastAvatarSeed = useState('user-avatar-seed', () => '')
|
||||
const novuSubscriberId = useState('novu-subscriber-id', () => '')
|
||||
|
||||
const isSeller = computed(() => {
|
||||
return userData.value?.activeTeam?.teamType === 'SELLER'
|
||||
})
|
||||
|
||||
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 '?'
|
||||
})
|
||||
|
||||
// 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 computeNovuSubscriber = () => {
|
||||
const uuid = userData.value?.id
|
||||
if (uuid) return uuid
|
||||
return ''
|
||||
}
|
||||
|
||||
const { setActiveTeam } = useActiveTeam()
|
||||
const { mutate } = useGraphQL()
|
||||
const locationStore = useLocationStore()
|
||||
|
||||
const syncUserUi = async () => {
|
||||
if (!userData.value) {
|
||||
novuSubscriberId.value = ''
|
||||
locationStore.clear()
|
||||
return
|
||||
}
|
||||
|
||||
if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
|
||||
setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
|
||||
}
|
||||
|
||||
novuSubscriberId.value = computeNovuSubscriber()
|
||||
|
||||
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 (SSR + client navigation)
|
||||
await fetchSession().catch(() => {})
|
||||
sessionChecked.value = true
|
||||
|
||||
const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: 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 onClickSignOut = () => {
|
||||
signOut(siteUrl)
|
||||
}
|
||||
|
||||
const applyTheme = (value: 'default' | 'night') => {
|
||||
if (process.client) {
|
||||
if (value === 'default') {
|
||||
document.documentElement.removeAttribute('data-theme')
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', value)
|
||||
}
|
||||
localStorage.setItem('theme', value)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const stored = process.client ? localStorage.getItem('theme') : null
|
||||
if (stored === 'night' || stored === 'default') {
|
||||
theme.value = stored
|
||||
}
|
||||
applyTheme(theme.value)
|
||||
})
|
||||
|
||||
watch(theme, (value) => applyTheme(value))
|
||||
|
||||
const toggleTheme = () => {
|
||||
theme.value = theme.value === 'night' ? 'default' : 'night'
|
||||
}
|
||||
|
||||
// Close drawer on route change (mobile)
|
||||
const route = useRoute()
|
||||
watch(() => route.path, () => {
|
||||
drawerOpen.value = false
|
||||
})
|
||||
</script>
|
||||
121
app/layouts/map.vue
Normal file
121
app/layouts/map.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="drawer lg:drawer-open">
|
||||
<input id="main-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen" />
|
||||
|
||||
<!-- Main content area -->
|
||||
<div class="drawer-content flex flex-col h-screen bg-base-200">
|
||||
<!-- TopBar -->
|
||||
<TopBar
|
||||
:session-checked="sessionChecked"
|
||||
:logged-in="isLoggedIn"
|
||||
:novu-subscriber-id="novuSubscriberId"
|
||||
:user-avatar-svg="userAvatarSvg"
|
||||
:user-name="userName"
|
||||
:user-initials="userInitials"
|
||||
@toggle-sidebar="drawerOpen = !drawerOpen"
|
||||
@sign-out="onClickSignOut"
|
||||
@sign-in="signIn()"
|
||||
/>
|
||||
|
||||
<!-- Page content - full height for map -->
|
||||
<main class="flex-1 flex flex-col min-h-0">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar drawer -->
|
||||
<div class="drawer-side z-50">
|
||||
<label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
<slot name="sidebar" />
|
||||
</div>
|
||||
</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 drawerOpen = ref(false)
|
||||
const userData = useState<{
|
||||
id?: string
|
||||
firstName?: string
|
||||
lastName?: string
|
||||
avatarId?: string
|
||||
activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string }
|
||||
activeTeamId?: string
|
||||
teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
|
||||
} | null>('me', () => null)
|
||||
const sessionChecked = ref(false)
|
||||
const userAvatarSvg = useState('user-avatar-svg', () => '')
|
||||
const novuSubscriberId = useState('novu-subscriber-id', () => '')
|
||||
|
||||
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 '?'
|
||||
})
|
||||
|
||||
// Avatar generation
|
||||
const generateUserAvatar = async () => {
|
||||
const seed = userData.value?.avatarId || userData.value?.id || userData.value?.firstName || 'default'
|
||||
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()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error generating avatar:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const computeNovuSubscriber = () => {
|
||||
const uuid = userData.value?.id
|
||||
if (uuid) return uuid
|
||||
return ''
|
||||
}
|
||||
|
||||
const { setActiveTeam } = useActiveTeam()
|
||||
|
||||
const syncUserUi = async () => {
|
||||
if (!userData.value) {
|
||||
novuSubscriberId.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
|
||||
setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
|
||||
}
|
||||
|
||||
novuSubscriberId.value = computeNovuSubscriber()
|
||||
|
||||
if (!userAvatarSvg.value) {
|
||||
await generateUserAvatar()
|
||||
}
|
||||
}
|
||||
|
||||
watch(userData, () => {
|
||||
void syncUserUi()
|
||||
}, { immediate: true })
|
||||
|
||||
// Check session (SSR + client navigation)
|
||||
await fetchSession().catch(() => {})
|
||||
sessionChecked.value = true
|
||||
|
||||
const onClickSignOut = () => {
|
||||
signOut(siteUrl)
|
||||
}
|
||||
|
||||
// Close drawer on route change (mobile)
|
||||
const route = useRoute()
|
||||
watch(() => route.path, () => {
|
||||
drawerOpen.value = false
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user