feat(ui): ticket: move status up (frappe#1547)

techmaxsolucoes · Sep 4, 2023 · b8f740d · b8f740d
1 parent b870908
commit b8f740d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 17 deletions.
diff --git a/desk/src/pages/ticket/TicketAgentActions.vue b/desk/src/pages/ticket/TicketAgentActions.vue
@@ -30,6 +30,25 @@
         />
       </template>
     </Autocomplete>
+    <Dropdown
+      :options="
+        ticketStatusStore.options.map((o) => ({
+          label: o,
+          value: o,
+          onClick: () => setValue.submit({ field: 'status', value: o }),
+        }))
+      "
+    >
+      <Button
+        :label="ticket.data.status"
+        :theme="ticketStatusStore.colorMap[ticket.data.status]"
+        variant="subtle"
+      >
+        <template #suffix>
+          <Icon icon="lucide:chevron-down" />
+        </template>
+      </Button>
+    </Dropdown>
     <Button
       v-for="a in actions.data?.slice(0, 1)"
       :key="a.name"
@@ -75,12 +94,14 @@ import { Icon } from "@iconify/vue";
 import { emitter } from "@/emitter";
 import { createToast } from "@/utils";
 import { useAgentStore } from "@/stores/agent";
+import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { useUserStore } from "@/stores/user";
 import { useError } from "@/composables/error";
 import { ITicket } from "./symbols";
 
 const ticket = inject(ITicket);
 const agentStore = useAgentStore();
+const ticketStatusStore = useTicketStatusStore();
 const userStore = useUserStore();
 const data = computed(() => ticket.data);
 const assignedTo = computed(() => {
@@ -139,6 +160,25 @@ const actions = createListResource({
   },
 });
 
+const setValue = createResource({
+  url: "frappe.client.set_value",
+  auto: false,
+  makeParams: (params) => ({
+    doctype: "HD Ticket",
+    name: data.value.name,
+    fieldname: params.field,
+    value: params.value,
+  }),
+  onSuccess: () => {
+    emitter.emit("update:ticket");
+    createToast({
+      title: "Ticket updated",
+      icon: "check",
+      iconClasses: "text-green-600",
+    });
+  },
+});
+
 /**
  * Wrapper function for eval. Can be used with `.call()`. Helps in
  * forcing context

diff --git a/desk/src/pages/ticket/TicketDetails.vue b/desk/src/pages/ticket/TicketDetails.vue
@@ -116,11 +116,11 @@ import { computed, inject } from "vue";
 import { createResource, Autocomplete, Tooltip } from "frappe-ui";
 import { dayjs } from "@/dayjs";
 import { emitter } from "@/emitter";
+import { createToast } from "@/utils";
 import { useTeamStore } from "@/stores/team";
 import { useTicketPriorityStore } from "@/stores/ticketPriority";
-import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { useTicketTypeStore } from "@/stores/ticketType";
-import { createToast } from "@/utils";
+import { useError } from "@/composables/error";
 import { StarRating, UniInput } from "@/components";
 import TicketSidebarHeader from "./TicketSidebarHeader.vue";
 import { ITicket } from "./symbols";
@@ -134,11 +134,6 @@ const options = computed(() => [
     label: "Ticket type",
     store: useTicketTypeStore(),
   },
-  {
-    field: "status",
-    label: "Status",
-    store: useTicketStatusStore(),
-  },
   {
     field: "priority",
     label: "Priority",
@@ -169,14 +164,7 @@ function update(fieldname: string, value: string) {
         iconClasses: "text-green-600",
       });
     },
-    onError: (err) => {
-      createToast({
-        title: "Error updating ticket",
-        text: err.messages?.[0],
-        icon: "x",
-        iconClasses: "text-red-600",
-      });
-    },
+    onError: useError(),
   });
 }
 </script>

diff --git a/desk/src/stores/ticketStatus.ts b/desk/src/stores/ticketStatus.ts
@@ -11,9 +11,9 @@ export const useTicketStatusStore = defineStore("ticketStatus", () => {
   );
   const colorMap = {
     Open: "red",
-    Replied: "orange",
+    Replied: "blue",
     Resolved: "green",
-    Closed: "blue",
+    Closed: "gray",
   };
   const stateActive = ["Open", "Replied"];
   const stateInactive = ["Resolved", "Closed"];