fix: ticket composable

Author: RitvikSardana

desk/src/pages/ticket/TicketCustomer.vue

@@ -67,49 +67,46 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, provide, ref } from "vue";
 import { createResource, Button, Breadcrumbs, confirmDialog } from "frappe-ui";
+import { useConfigStore } from "@/stores/config";
 import { Icon } from "@iconify/vue";
 import { useError } from "@/composables/error";
-import TicketConversation from "./TicketConversation.vue";
-import TicketCustomerTemplateFields from "./TicketCustomerTemplateFields.vue";
-import TicketFeedback from "./TicketFeedback.vue";
-import TicketTextEditor from "./TicketTextEditor.vue";
 import { ITicket } from "./symbols";
 import { useRouter } from "vue-router";
 import { createToast, isContentEmpty, setupCustomActions } from "@/utils";
 import { socket } from "@/socket";
 import { LayoutHeader } from "@/components";
-import TicketCustomerSidebar from "@/components/ticket/TicketCustomerSidebar.vue";
 import { useScreenSize } from "@/composables/screen";
-import { useConfigStore } from "@/stores/config";
+import TicketConversation from "./TicketConversation.vue";
+import TicketCustomerTemplateFields from "./TicketCustomerTemplateFields.vue";
+import TicketTextEditor from "./TicketTextEditor.vue";
+import TicketFeedback from "./TicketFeedback.vue";
+import TicketCustomerSidebar from "@/components/ticket/TicketCustomerSidebar.vue";
+import { useTicket } from "./data";
 interface P {
   ticketId: string;
 }
 const router = useRouter();
 
 const props = defineProps<P>();
-const ticket = createResource({
-  url: "helpdesk.helpdesk.doctype.hd_ticket.api.get_one",
-  cache: ["Ticket", props.ticketId],
-  auto: true,
-  params: {
-    name: props.ticketId,
-    is_customer_portal: true,
+const ticket = useTicket(
+  props.ticketId,
+  true,
+  null,
+  (data) => {
+    setupCustomActions(data, {
+      doc: data,
+      updateField,
+    });
   },
-  onError: () => {
+  () => {
     createToast({
       title: "Ticket not found",
       icon: "x",
       iconClasses: "text-red-600",
     });
     router.replace("/my-tickets");
-  },
-  onSuccess: (data) => {
-    setupCustomActions(data, {
-      doc: data,
-      updateField,
-    });
-  },
-});
+  }
+);
 provide(ITicket, ticket);
 const editor = ref(null);
 const placeholder = "Type a message";

desk/src/pages/ticket/data.ts

@@ -1,65 +1,30 @@
-import { Ref, reactive, ref } from "vue";
-import { defineStore } from "pinia";
 import { createResource } from "frappe-ui";
-import { emitter } from "@/emitter";
 import { Resource, Ticket } from "@/types";
 
-const ticket: Ref<Resource<Ticket>> = ref(null);
-export function useTicket(id?: number | string) {
-  if (!ticket.value && id) {
-    const t = createResource({
-      url: "helpdesk.helpdesk.doctype.hd_ticket.api.get_one",
-      params: {
-        name: id,
-      },
-      auto: true,
-    });
-    ticket.value = t;
-  }
-  return ticket;
-}
-
-export const useTicketStore = defineStore("ticket", () => {
-  const sidebar = reactive({
-    isExpanded: true,
-  });
-  const editor = reactive({
-    type: "Comment",
-    isExpanded: false,
-    content: "",
-    attachments: [],
-    cc: [],
-    bcc: [],
-    isCcVisible: false,
-    isBccVisible: false,
-    tiptap: null,
-    clean: () => {
-      editor.type = "Comment";
-      editor.isExpanded = false;
-      editor.content = "";
-      editor.attachments = [];
-      editor.cc = [];
-      editor.bcc = [];
-      editor.isCcVisible = false;
-      editor.isBccVisible = false;
-      sidebar.isExpanded = true;
+export function useTicket(
+  id?: number | string,
+  isCustomerPortal: boolean = false,
+  transformCB?: (data: any) => any,
+  successCB?: (data: any) => any,
+  errorCB?: (err: any) => any
+): Resource<Ticket> {
+  const t = createResource({
+    url: "helpdesk.helpdesk.doctype.hd_ticket.api.get_one",
+    cache: ["Ticket", id],
+    params: {
+      name: id,
+      is_customer_portal: isCustomerPortal,
+    },
+    auto: true,
+    transform: (data) => {
+      transformCB && transformCB(data);
+    },
+    onSuccess: (data) => {
+      successCB && successCB(data);
+    },
+    onError: (err) => {
+      errorCB && errorCB(err);
     },
   });
-
-  function scrollTo(id: string) {
-    const e = document.getElementById(id);
-    e.scrollIntoView({ behavior: "smooth" });
-  }
-
-  function $reset() {
-    editor.clean();
-  }
-
-  emitter.on("ticket:focus", (id: string) => scrollTo(id));
-
-  return {
-    $reset,
-    editor,
-    sidebar,
-  };
-});
+  return t;
+}

desk/src/types.ts

@@ -100,6 +100,7 @@ export interface Ticket {
   history: Activity[];
   template: Template;
   views: ViewLog[];
+  _customActions: Function[];
 }
 
 export interface DocField {