client-web/src/components/ClientSidebarMenu.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>