zammad/app/frontend/apps/desktop/pages/ticket-overviews/views/TicketOverviews.vue

<!-- Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/ -->

<script setup lang="ts">
import { until } from '@vueuse/core'
import { computed } from 'vue'

import LayoutContent from '#desktop/components/layout/LayoutContent.vue'
import LayoutSidebar from '#desktop/components/layout/LayoutSidebar.vue'
import TicketList from '#desktop/pages/ticket-overviews/components/TicketList.vue'
import TicketOverviewsEmptyText from '#desktop/pages/ticket-overviews/components/TicketOverviewsEmptyText.vue'
import TicketOverviewsSidebar from '#desktop/pages/ticket-overviews/components/TicketOverviewsSidebar.vue'
import { useTicketOverviews } from '#desktop/pages/ticket-overviews/composables/useTicketOverviews.ts'

interface Props {
  overviewLink: string
}

const props = defineProps<Props>()

defineOptions({
  async beforeRouteEnter(to, _, next) {
    const {
      overviews,
      overviewsLoading,
      setPreviousTicketOverviewLink,
      previousTicketOverviewLink,
      overviewsByLink,
    } = useTicketOverviews()

    await until(() => overviewsLoading.value).toBe(false)

    const overviewLink = to.params.overviewLink as string

    if (overviewLink in overviewsByLink.value || overviews.value.length === 0) {
      setPreviousTicketOverviewLink(overviewLink || '')
      return next()
    }

    const nextOverviewLink =
      previousTicketOverviewLink.value || overviews.value[0].link
    setPreviousTicketOverviewLink(nextOverviewLink)

    next({
      name: 'TicketOverview',
      params: { overviewLink: nextOverviewLink },
    })
  },
  beforeRouteUpdate(to, _, next) {
    const {
      previousTicketOverviewLink,
      overviews,
      setPreviousTicketOverviewLink,
    } = useTicketOverviews()

    if (to.params.overviewLink) {
      setPreviousTicketOverviewLink(to.params.overviewLink as string)
      return next()
    }

    const nextOverviewLink =
      previousTicketOverviewLink.value || overviews.value[0].link
    setPreviousTicketOverviewLink(nextOverviewLink)

    next({
      name: 'TicketOverview',
      params: { overviewLink: nextOverviewLink },
    })
  },
})

const { overviewsByLink, hasOverviews, overviewsTicketCountById } =
  useTicketOverviews()

const currentOverview = computed(
  () => overviewsByLink.value[props.overviewLink],
)

const breadcrumbItems = computed(() => [
  {
    label: __('Overviews'),
    route: '/tickets/view',
  },
  {
    label: currentOverview.value?.name,
    count: overviewsTicketCountById.value[currentOverview.value?.id],
  },
])
</script>

<template>
  <div class="h-full" :class="{ 'grid grid-cols-[260px_1fr]': hasOverviews }">
    <LayoutSidebar
      v-if="hasOverviews"
      id="ticket-overviews"
      :aria-label="$t('second level navigation sidebar')"
      background-variant="secondary"
      name="overviews"
    >
      <TicketOverviewsSidebar />
    </LayoutSidebar>

    <LayoutContent
      class="relative"
      :breadcrumb-items="currentOverview ? breadcrumbItems : undefined"
      no-scrollable
      content-padding
    >
      <!-- TODO: should we add a key to the TicketList, that we have it "fresh" for every overview => otherwise we need some watch/reset logic on switch -->
      <TicketList
        v-if="currentOverview"
        class="px-4 pb-4"
        :overview-id="currentOverview.id"
        :headers="currentOverview.viewColumnsRaw"
        :order-by="currentOverview.orderBy"
        :order-direction="currentOverview.orderDirection"
        :group-by="currentOverview.groupBy || undefined"
      />
      <TicketOverviewsEmptyText
        v-else
        :title="$t('No Overviews')"
        :text="
          $t(
            'Currently, no overviews are assigned to your roles. Please contact your administrator.',
          )
        "
        icon="exclamation-triangle"
      />
    </LayoutContent>
  </div>
</template>