zammad/app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/TicketDetailViewHeader.vue

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

<script setup lang="ts">
import { toRef } from 'vue'

import CommonUserAvatar from '#shared/components/CommonUserAvatar/CommonUserAvatar.vue'
import type {
  TicketById,
  TicketLiveAppUser,
} from '#shared/entities/ticket/types.ts'
import { useSessionStore } from '#shared/stores/session.ts'

import CommonLoader from '#mobile/components/CommonLoader/CommonLoader.vue'
import LayoutHeader from '#mobile/components/layout/LayoutHeader.vue'
import { useDialog } from '#mobile/composables/useDialog.ts'

interface Props {
  ticket?: TicketById
  liveUserList?: TicketLiveAppUser[]
  loadingTicket?: boolean
  refetchingTicket: boolean
}

const props = defineProps<Props>()
const session = useSessionStore()

const viewersDialog = useDialog({
  name: 'ticket-viewers-dialog',
  component: () => import('./TicketViewersDialog.vue'),
})

const actionsDialog = useDialog({
  name: 'ticket-header-actions-dialog',
  component: () => import('./TicketActionsDialog.vue'),
})

const showViewers = () => {
  return viewersDialog.open({
    name: viewersDialog.name,
    liveUsers: toRef(props, 'liveUserList'),
  })
}

const showActions = () => {
  if (!props.ticket) return

  actionsDialog.open({
    name: actionsDialog.name,
    ticket: toRef(props, 'ticket'),
  })
}
</script>

<template>
  <LayoutHeader
    class="bg-gray-600/90"
    :refetch="refetchingTicket || loadingTicket"
    :back-ignore="[`/tickets/${ticket?.internalId}/information`]"
    back-url="/"
  >
    <div
      class="flex flex-1 flex-col items-center justify-center text-center text-sm leading-4"
      data-test-id="header-content"
    >
      <div class="font-bold">
        {{ ticket && `#${ticket.number}` }}
      </div>
      <div class="text-gray">
        {{
          ticket && $t('created %s', i18n.relativeDateTime(ticket.createdAt))
        }}
      </div>
    </div>

    <template #after>
      <CommonLoader data-test-id="loader-header" :loading="loadingTicket">
        <button
          v-if="liveUserList?.length"
          class="flex ltr:mr-0.5 rtl:ml-0.5"
          data-test-id="viewers-counter"
          type="button"
          :aria-label="$t('Show ticket viewers')"
          @click="showViewers()"
        >
          <CommonUserAvatar
            class="z-10"
            :entity="liveUserList[0].user"
            personal
            size="xs"
          />
          <div
            v-if="liveUserList.length - 1"
            class="z-0 flex h-6 w-6 select-none items-center justify-center rounded-full bg-white/80 text-xs text-black ltr:-translate-x-2 rtl:translate-x-2"
            role="img"
            :aria-label="$t('Ticket has %s viewers', liveUserList.length)"
          >
            +{{ liveUserList.length - 1 }}
          </div>
        </button>
        <button
          v-if="session.hasPermission('ticket.agent')"
          type="button"
          :aria-label="$t('Show ticket actions')"
          @click="showActions()"
        >
          <CommonIcon name="more" size="base" decorative />
        </button>
      </CommonLoader>
    </template>
  </LayoutHeader>
</template>