85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
import ClientSidebarMenuNode from '@/components/ClientSidebarMenuNode.vue'
|
|
import {
|
|
clientNavigation,
|
|
filterNavigationByPermissions,
|
|
getNavigationParentKeys,
|
|
} from '@/navigation/clientNavigation'
|
|
import { useAuthStore } from '@/modules/auth/public'
|
|
import { useCustomsPendingStore } from '@/modules/first-leg/public'
|
|
|
|
const props = defineProps<{
|
|
activePath: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
navigate: [path: string]
|
|
}>()
|
|
const auth = useAuthStore()
|
|
const customsPending = useCustomsPendingStore()
|
|
const badges = computed(() => ({ 'first-leg-customs-documents': { count: customsPending.count, error: customsPending.error } }))
|
|
watch(() => auth.isAuthenticated && auth.hasPermission('order:first-leg:customs-list') ? auth.user?.id ?? '' : '', scope => {
|
|
customsPending.setScope(scope)
|
|
if (scope) void customsPending.refresh()
|
|
}, { immediate: true, flush: 'sync' })
|
|
function refreshCustomsPending() {
|
|
if (document.visibilityState === 'visible') void customsPending.refresh()
|
|
}
|
|
let refreshTimer: ReturnType<typeof setInterval> | undefined
|
|
onMounted(() => {
|
|
refreshTimer = setInterval(refreshCustomsPending, 60_000)
|
|
window.addEventListener('focus', refreshCustomsPending)
|
|
document.addEventListener('visibilitychange', refreshCustomsPending)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
clearInterval(refreshTimer)
|
|
window.removeEventListener('focus', refreshCustomsPending)
|
|
document.removeEventListener('visibilitychange', refreshCustomsPending)
|
|
customsPending.setScope('')
|
|
})
|
|
|
|
const visibleNavigation = computed(() => filterNavigationByPermissions(clientNavigation, auth.permissionCodes))
|
|
|
|
const activeParentKeys = computed(() => new Set(getNavigationParentKeys(visibleNavigation.value, props.activePath)))
|
|
const openedKeys = ref<ReadonlySet<string>>(new Set(activeParentKeys.value))
|
|
// Expand the order group by default so the three customer order shortcuts are visible.
|
|
openedKeys.value = new Set([...openedKeys.value, 'order-center'])
|
|
|
|
function handleToggle(key: string) {
|
|
const next = new Set(openedKeys.value)
|
|
if (next.has(key)) next.delete(key)
|
|
else next.add(key)
|
|
openedKeys.value = next
|
|
}
|
|
|
|
watch(
|
|
() => props.activePath,
|
|
() => {
|
|
openedKeys.value = new Set([...openedKeys.value, ...activeParentKeys.value])
|
|
},
|
|
{ flush: 'sync' },
|
|
)
|
|
|
|
function handleSelect(path: string) {
|
|
emit('navigate', path)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ul class="client-nav-menu">
|
|
<ClientSidebarMenuNode
|
|
v-for="node in visibleNavigation"
|
|
:key="node.key"
|
|
:node="node"
|
|
:badges="badges"
|
|
:active-path="activePath"
|
|
:opened-keys="openedKeys"
|
|
:active-parent-keys="activeParentKeys"
|
|
:level="0"
|
|
@navigate="handleSelect"
|
|
@toggle="handleToggle"
|
|
/>
|
|
</ul>
|
|
</template>
|