opendesk

1<template>
2  <div class="flex flex-col overflow-y-auto">
3    <LayoutHeader>
4      <template #left-header>
5        <Breadcrumbs :items="breadcrumbs" />
6      </template>
7      <template #right-header>
8        <CustomActions v-if="customActions.length" :actions="customActions" />
9      </template>
10    </LayoutHeader>
11    <div class="mx-auto w-full max-w-4xl px-5 pt-6">
12      <NewTicketForm
13        :template="templateId || 'Default'"
14        :initial-subject="String(route.query.subject ?? '')"
15        is-agent
16        :date-format="dateFormat"
17        :time-format="timeFormat"
18        :dialog="$dialog"
19        @actions="customActions = $event"
20        @created="openTicket"
21      />
22    </div>
23  </div>
24</template>
25
26<script setup lang="ts">
27import { LayoutHeader } from "@/components";
28// The portal's own; Studio only finds custom components under studio/.
29import CustomActions from "../../../../studio/opendesk/components/header/CustomActions.vue";
30import NewTicketForm from "../../../../studio/opendesk/components/ticket/NewTicketForm.vue";
31import { useAuthStore } from "@/stores/auth";
32import { globalStore } from "@/stores/globalStore";
33import { capture } from "@/telemetry";
34import { __ } from "@/translation";
35import { useOnboarding } from "@framework/ui";
36import { Breadcrumbs, usePageMeta } from "frappe-ui";
37import { onMounted, ref } from "vue";
38import { useRoute, useRouter } from "vue-router";
39
40defineProps<{ templateId?: string }>();
41
42const route = useRoute();
43const router = useRouter();
44const { updateOnboardingStep } = useOnboarding("opendesk") ?? {};
45const { isManager, userId: userID } = useAuthStore();
46const customActions = ref([]);
47const { $dialog } = globalStore();
48const dateFormat = window.date_format?.toUpperCase();
49const timeFormat = window.time_format;
50
51function openTicket(ticket: { name: string }) {
52  router.push({ name: "TicketAgent", params: { ticketId: ticket.name } });
53  if (isManager) {
54    updateOnboardingStep?.("create_first_ticket", true, false, () =>
55      localStorage.setItem("firstTicket", ticket.name)
56    );
57  }
58}
59
60const breadcrumbs = [
61  { label: __("Tickets"), route: { name: "TicketsAgent" } },
62  { label: __("New Ticket"), route: { name: "TicketAgentNew" } },
63];
64
65usePageMeta(() => ({ title: __("New Ticket") }));
66
67onMounted(() => capture("new_ticket_page", { data: { user: userID } }));
68</script>
69