From dee0c5be2dbd76d2ac7e5e96f5e510ccdc019b7d Mon Sep 17 00:00:00 2001
From: Sumit Bhanushali <sumit.bhanushali63@gmail.com>
Date: Mon, 22 Apr 2024 15:31:43 +0530
Subject: [PATCH] fix: reverted store setup for ticketagent

---
 .../components/ticket/TicketAgentFields.vue   |  13 +-
 .../components/ticket/TicketAgentSidebar.vue  |   9 +-
 desk/src/pages/TicketAgent2.vue               | 180 +++++++++++++++---
 desk/src/stores/ticketAgent.ts                | 177 -----------------
 4 files changed, 164 insertions(+), 215 deletions(-)
 delete mode 100644 desk/src/stores/ticketAgent.ts

diff --git a/desk/src/components/ticket/TicketAgentFields.vue b/desk/src/components/ticket/TicketAgentFields.vue
index 902541f51..5fb792437 100644
--- a/desk/src/components/ticket/TicketAgentFields.vue
+++ b/desk/src/components/ticket/TicketAgentFields.vue
@@ -32,14 +32,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, defineEmits } from "vue";
 import { Autocomplete } from "@/components";
 import { useTeamStore } from "@/stores/team";
 import { useTicketPriorityStore } from "@/stores/ticketPriority";
 import { useTicketTypeStore } from "@/stores/ticketType";
-import { useTicketAgentStore } from "@/stores/ticketAgent";
 import UniInput2 from "@/components/UniInput2.vue";
 
+const emit = defineEmits(["update"]);
+
 const props = defineProps({
   ticket: {
     type: Object,
@@ -68,12 +69,6 @@ const options = computed(() => {
 });
 
 function update(field, value) {
-  //   ticket.update(field, value);
-  useTicketAgentStore().updateTicket(field, value);
-  createToast({
-    title: "Ticket updated",
-    icon: "check",
-    iconClasses: "text-green-600",
-  });
+  emit("update", { field, value });
 }
 </script>
diff --git a/desk/src/components/ticket/TicketAgentSidebar.vue b/desk/src/components/ticket/TicketAgentSidebar.vue
index a38cda373..f480e5380 100644
--- a/desk/src/components/ticket/TicketAgentSidebar.vue
+++ b/desk/src/components/ticket/TicketAgentSidebar.vue
@@ -16,7 +16,7 @@
       :resolution-by="ticket.resolution_by"
       :source="ticket.via_customer_portal ? 'Portal' : 'Mail'"
     />
-    <TicketAgentFields :ticket="ticket" />
+    <TicketAgentFields :ticket="ticket" @update="update" />
     <div v-if="ticket.feedback_rating" class="px-6 py-3 text-gray-600">
       <div class="flex">
         <div class="w-[106px] pb-1.5 text-sm">Feedback</div>
@@ -35,6 +35,7 @@
 </template>
 
 <script setup lang="ts">
+import { defineEmits } from "vue";
 import { StarRating } from "@/components";
 import TicketAgentDetails from "./TicketAgentDetails.vue";
 import TicketAgentCustomer from "./TicketAgentCustomer.vue";
@@ -46,4 +47,10 @@ const props = defineProps({
     required: true,
   },
 });
+
+const emit = defineEmits(["update"]);
+
+function update(val) {
+  emit("update", val);
+}
 </script>
diff --git a/desk/src/pages/TicketAgent2.vue b/desk/src/pages/TicketAgent2.vue
index 03c37e710..95b991227 100644
--- a/desk/src/pages/TicketAgent2.vue
+++ b/desk/src/pages/TicketAgent2.vue
@@ -5,12 +5,10 @@
         <Breadcrumbs :items="breadcrumbs" />
       </template>
       <template #right-header>
-        <div v-if="ticketAgentStore.assignees.length">
-          <component
-            :is="ticketAgentStore.assignees.length == 1 ? 'Button' : 'div'"
-          >
+        <div v-if="ticket.data.assignees.length">
+          <component :is="ticket.data.assignees.length == 1 ? 'Button' : 'div'">
             <MultipleAvatar
-              :avatars="ticketAgentStore.assignees"
+              :avatars="ticket.data.assignees"
               @click="showAssignmentModal = true"
             />
           </component>
@@ -48,28 +46,31 @@
         >
           <span class="text-lg font-semibold">Activity</span>
           <Switch
-            v-model="ticketAgentStore.showFullActivity"
+            v-model="showFullActivity"
             size="sm"
             label="Show all activity"
           />
         </div>
-        <TicketAgentActivities :activities="ticketAgentStore.activities" />
+        <TicketAgentActivities :activities="activities" />
         <CommunicationArea
-          v-model:content="ticketAgentStore.emailContent"
+          v-model="ticket.data"
           :to-emails="[ticket.data.raised_by]"
           :cc-emails="[]"
           :bcc-emails="[]"
         />
       </div>
-      <TicketAgentSidebar :ticket="ticket.data" />
+      <TicketAgentSidebar
+        :ticket="ticket.data"
+        @update="({ field, value }) => updateTicket(field, value)"
+      />
     </div>
     <AssignmentModal
       v-if="ticket.data"
       v-model="showAssignmentModal"
-      :assignees="ticketAgentStore.assignees"
+      :assignees="ticket.data.assignees"
       @update="
         (data) => {
-          ticketAgentStore.updateAssignees(data);
+          updateAssignees(data);
           // TODO: what if error? / async
           showAssignmentModal = false;
         }
@@ -80,8 +81,7 @@
 
 <script setup lang="ts">
 import { computed, ref, h } from "vue";
-import { useStorage } from "@vueuse/core";
-import { Breadcrumbs, Dropdown, Switch } from "frappe-ui";
+import { Breadcrumbs, Dropdown, Switch, createResource, call } from "frappe-ui";
 
 import {
   LayoutHeader,
@@ -93,10 +93,11 @@ import { TicketAgentActivities, TicketAgentSidebar } from "@/components/ticket";
 import { IndicatorIcon } from "@/components/icons";
 
 import { useTicketStatusStore } from "@/stores/ticketStatus";
-import { useTicketAgentStore } from "@/stores/ticketAgent";
+import { useUserStore } from "@/stores/user";
+import { createToast } from "@/utils";
 
 const ticketStatusStore = useTicketStatusStore();
-const ticketAgentStore = useTicketAgentStore();
+const { getUser } = useUserStore();
 
 const props = defineProps({
   ticketId: {
@@ -105,19 +106,25 @@ const props = defineProps({
   },
 });
 
-const newEmail = useStorage("emailBoxContent", "");
-const newComment = useStorage("commentBoxContent", "");
-
-const commentEmpty = computed(() => {
-  return !newComment.value || newComment.value === "<p></p>";
-});
-
-const emailEmpty = computed(() => {
-  return !newEmail.value || newEmail.value === "<p></p>";
-});
-
+const showFullActivity = ref(true);
 const showAssignmentModal = ref(false);
-const ticket = computed(() => ticketAgentStore.getTicket(props.ticketId));
+const ticket = createResource({
+  url: "helpdesk.helpdesk.doctype.hd_ticket.api.get_one",
+  cache: ["Ticket", props.ticketId],
+  auto: true,
+  params: {
+    name: props.ticketId,
+  },
+  transform: (data) => {
+    data.assignees = JSON.parse(data._assign).map((assignee) => {
+      return {
+        name: assignee,
+        image: getUser(assignee).user_image,
+        label: getUser(assignee).full_name,
+      };
+    });
+  },
+});
 
 const breadcrumbs = computed(() => {
   let items = [{ label: "Tickets", route: { name: "TicketsAgent" } }];
@@ -133,11 +140,128 @@ const dropdownOptions = computed(() =>
   ticketStatusStore.options.map((o) => ({
     label: o,
     value: o,
-    onClick: () => ticketAgentStore.updateTicket("status", o),
+    onClick: () => updateTicket("status", o),
     icon: () =>
       h(IndicatorIcon, {
         class: ticketStatusStore.colorMap[o],
       }),
   }))
 );
+
+const activities = computed(() => {
+  const emailProps = ticket.data.communications.map((email) => {
+    return {
+      type: "email",
+      key: email.creation,
+      sender: { name: email.user.email, full_name: email.user.name },
+      to: email.recipients,
+      cc: email.cc,
+      bcc: email.bcc,
+      creation: email.creation,
+      subject: email.subject,
+      attachments: email.attachments,
+      content: email.content,
+    };
+  });
+
+  const commentProps = ticket.data.comments.map((comment) => {
+    return {
+      type: "comment",
+      key: comment.creation,
+      commenter: comment.user.name,
+      creation: comment.creation,
+      content: comment.content,
+    };
+  });
+
+  if (!showFullActivity.value) {
+    return [...emailProps, ...commentProps].sort(
+      (a, b) => new Date(a.creation) - new Date(b.creation)
+    );
+  }
+
+  const historyProps = [...ticket.data.history, ...ticket.data.views].map(
+    (h) => {
+      return {
+        type: "history",
+        key: h.creation,
+        content: h.action ? h.action : "viewed this",
+        creation: h.creation,
+        user: h.user.name + " ",
+      };
+    }
+  );
+
+  const sorted = [...emailProps, ...commentProps, ...historyProps].sort(
+    (a, b) => new Date(a.creation) - new Date(b.creation)
+  );
+
+  const data = [];
+  let i = 0;
+
+  while (i < sorted.length) {
+    const currentActivity = sorted[i];
+    if (currentActivity.type === "history") {
+      currentActivity.relatedActivities = [];
+      for (let j = i + 1; j < sorted.length; j++) {
+        const nextActivity = sorted[j];
+        if (nextActivity.type === "history") {
+          currentActivity.relatedActivities.push(nextActivity);
+        } else {
+          data.push(currentActivity);
+          i = j - 1;
+          break;
+        }
+      }
+    } else {
+      data.push(currentActivity);
+    }
+    i++;
+  }
+
+  return data;
+});
+
+function updateAssignees({ assigneesToRemove, newAssignees }) {
+  for (const a of assigneesToRemove) {
+    call("frappe.desk.form.assign_to.remove", {
+      doctype: "HD Ticket",
+      name: props.ticketId,
+      assign_to: a,
+    });
+  }
+
+  if (newAssignees.length) {
+    call("frappe.desk.form.assign_to.add", {
+      doctype: "HD Ticket",
+      name: props.ticketId,
+      assign_to: newAssignees,
+    });
+  }
+
+  ticket.reload();
+
+  //TODO: promise.all, await, multiple assignees?
+}
+
+function updateTicket(fieldname: string, value: string) {
+  createResource({
+    url: "frappe.client.set_value",
+    params: {
+      doctype: "HD Ticket",
+      name: props.ticketId,
+      fieldname,
+      value,
+    },
+    auto: true,
+    onSuccess: () => {
+      ticket.reload();
+      createToast({
+        title: "Ticket updated",
+        icon: "check",
+        iconClasses: "text-green-600",
+      });
+    },
+  });
+}
 </script>
diff --git a/desk/src/stores/ticketAgent.ts b/desk/src/stores/ticketAgent.ts
deleted file mode 100644
index 4cdd8295f..000000000
--- a/desk/src/stores/ticketAgent.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import { createResource, call } from "frappe-ui";
-import { createToast } from "@/utils";
-import { useUserStore } from "./user";
-
-export const useTicketAgentStore = defineStore("ticketAgent", () => {
-  const { getUser } = useUserStore();
-
-  let _ticketId;
-  let _ticket;
-  const showFullActivity = ref(true);
-
-  const _assignees = ref([]);
-  const assignees = computed({
-    get() {
-      return _assignees.value;
-    },
-    set(newValue) {
-      _assignees.value = newValue;
-    },
-  });
-
-  function updateAssignees({ assigneesToRemove, newAssignees }) {
-    for (const a of assigneesToRemove) {
-      call("frappe.desk.form.assign_to.remove", {
-        doctype: "HD Ticket",
-        name: _ticketId,
-        assign_to: a,
-      });
-    }
-
-    if (newAssignees.length) {
-      call("frappe.desk.form.assign_to.add", {
-        doctype: "HD Ticket",
-        name: _ticketId,
-        assign_to: newAssignees,
-      });
-    }
-
-    _ticket.reload();
-
-    //TODO: promise.all, await, multiple assignees?
-  }
-
-  function getTicket(ticketId) {
-    _ticket = createResource({
-      url: "helpdesk.helpdesk.doctype.hd_ticket.api.get_one",
-      cache: ["Ticket", ticketId],
-      auto: true,
-      params: {
-        name: ticketId,
-      },
-      onSuccess: (data) => {
-        _ticketId = ticketId;
-
-        assignees.value = JSON.parse(data._assign).map((assignee) => {
-          return {
-            name: assignee,
-            image: getUser(assignee).user_image,
-            label: getUser(assignee).full_name,
-          };
-        });
-      },
-    });
-
-    return _ticket;
-  }
-
-  function updateTicket(fieldname: string, value: string) {
-    createResource({
-      url: "frappe.client.set_value",
-      params: {
-        doctype: "HD Ticket",
-        name: _ticketId,
-        fieldname,
-        value,
-      },
-      auto: true,
-      onSuccess: () => {
-        _ticket.reload();
-        createToast({
-          title: "Ticket updated",
-          icon: "check",
-          iconClasses: "text-green-600",
-        });
-      },
-    });
-  }
-
-  const activities = computed(() => {
-    const emailProps = _ticket.data.communications.map((email) => {
-      return {
-        type: "email",
-        key: email.creation,
-        sender: { name: email.user.email, full_name: email.user.name },
-        to: email.recipients,
-        cc: email.cc,
-        bcc: email.bcc,
-        creation: email.creation,
-        subject: email.subject,
-        attachments: email.attachments,
-        content: email.content,
-      };
-    });
-
-    const commentProps = _ticket.data.comments.map((comment) => {
-      return {
-        type: "comment",
-        key: comment.creation,
-        commenter: comment.user.name,
-        creation: comment.creation,
-        content: comment.content,
-      };
-    });
-
-    if (!showFullActivity.value) {
-      return [...emailProps, ...commentProps].sort(
-        (a, b) => new Date(a.creation) - new Date(b.creation)
-      );
-    }
-
-    const historyProps = [..._ticket.data.history, ..._ticket.data.views].map(
-      (h) => {
-        return {
-          type: "history",
-          key: h.creation,
-          content: h.action ? h.action : "viewed this",
-          creation: h.creation,
-          user: h.user.name + " ",
-        };
-      }
-    );
-
-    const sorted = [...emailProps, ...commentProps, ...historyProps].sort(
-      (a, b) => new Date(a.creation) - new Date(b.creation)
-    );
-
-    const data = [];
-    let i = 0;
-
-    while (i < sorted.length) {
-      const currentActivity = sorted[i];
-      if (currentActivity.type === "history") {
-        currentActivity.relatedActivities = [];
-        for (let j = i + 1; j < sorted.length; j++) {
-          const nextActivity = sorted[j];
-          if (nextActivity.type === "history") {
-            currentActivity.relatedActivities.push(nextActivity);
-          } else {
-            data.push(currentActivity);
-            i = j - 1;
-            break;
-          }
-        }
-      } else {
-        data.push(currentActivity);
-      }
-      i++;
-    }
-
-    return data;
-  });
-
-  // Communication
-  const emailContent = ref("");
-
-  return {
-    updateAssignees,
-    assignees,
-    getTicket,
-    updateTicket,
-    activities,
-    showFullActivity,
-    emailContent,
-  };
-});