fix: reverted store setup for ticketagent

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>

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>

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>