feat: added assignee column

desk/src/components/MultipleAvatar.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    v-if="avatars?.length"
+    class="mr-1.5 flex cursor-pointer items-center"
+    :class="[
+      avatars?.length > 1 ? 'flex-row-reverse' : 'truncate [&>div]:truncate',
+    ]"
+  >
+    <Tooltip
+      v-if="avatars?.length == 1"
+      :text="avatars[0].name"
+      class="flex items-center gap-2 text-base"
+    >
+      <Avatar
+        shape="circle"
+        :image="avatars[0].image"
+        :label="avatars[0].label"
+        size="sm"
+      />
+      <div class="truncate">{{ avatars[0].label }}</div>
+    </Tooltip>
+    <Tooltip
+      v-for="avatar in reverseAvatars"
+      v-else
+      :key="avatar.name"
+      :text="avatar.name"
+    >
+      <Avatar
+        class="-mr-1.5 ring-2 ring-white transition hover:z-10 hover:scale-110"
+        shape="circle"
+        :image="avatar.image"
+        :label="avatar.label"
+        :size="size"
+      />
+    </Tooltip>
+  </div>
+</template>
+<script setup lang="ts">
+import { Avatar, Tooltip } from "frappe-ui";
+import { computed } from "vue";
+
+const props = defineProps({
+  avatars: {
+    type: Array,
+    default: [],
+  },
+  size: {
+    type: String,
+    default: "md",
+  },
+});
+const reverseAvatars = computed(() => props.avatars.reverse());
+</script>

desk/src/components/index.ts

@@ -19,3 +19,4 @@ export { default as ViewControls } from "./ViewControls.vue";
 export { default as Filter } from "./Filter.vue";
 export { default as LayoutHeader } from "./LayoutHeader.vue";
 export { default as Sort } from "./Sort.vue";
+export { default as MultipleAvatar } from "./MultipleAvatar.vue";

desk/src/pages/tickets/TicketsAgent2.vue

@@ -39,6 +39,8 @@ import { useStorage } from "@vueuse/core";
 import { createResource, Breadcrumbs } from "frappe-ui";
 import TicketsAgentList2 from "./TicketsAgentList2.vue";
 import { ViewControls, LayoutHeader } from "@/components";
+import { useUserStore } from "@/stores/user";
+const { getUser } = useUserStore();
 
 const breadcrumbs = [{ label: "Tickets", route: { name: "TicketsAgent2" } }];
 let storage = useStorage("tickets_agent", {
@@ -51,7 +53,7 @@ let storage = useStorage("tickets_agent", {
 let columns = ref([]);
 let rows = ref([]);
 let rowCount = ref(0);
-let totalCount  = ref(0);
+let totalCount = ref(0);
 
 let filtersToApply = storage.value.filtersToApply;
 let filters = ref(storage.value.filters);
@@ -73,6 +75,13 @@ const tickets = createResource({
   transform(data) {
     data.data.forEach((row) => {
       row.name = row.name.toString();
+      let _user = getUser(JSON.parse(row._assign)[0]);
+
+      row._assign = {
+        name: _user.name,
+        label: _user.full_name,
+        image: _user.user_image,
+      };
     });
   },
   onSuccess(data) {

desk/src/pages/tickets/TicketsAgentList2.vue

@@ -83,6 +83,9 @@
               variant="outline"
             />
           </div>
+          <div v-if="column.key === '_assign'">
+            <MultipleAvatar :avatars="[item]" />
+          </div>
           <div v-if="column.key === 'creation'">
             {{ dayjs(item).fromNow() }}
           </div>
@@ -111,6 +114,7 @@ import {
   ListHeader,
   ListFooter,
 } from "frappe-ui";
+import { MultipleAvatar } from "@/components";
 import { dayjs } from "@/dayjs";
 import { ref } from "vue";
 

desk/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
+import { useUserStore } from "@/stores/user";
 import { init as initTelemetry } from "@/telemetry";
 import { AuthPages } from "./auth";
 import { CustomerPages } from "./customer";
@@ -214,10 +215,12 @@ export const router = createRouter({
 router.beforeEach(async (to) => {
   const isAuthRoute = AUTH_ROUTES.includes(to.name);
   const authStore = useAuthStore();
+  const usersStore = useUserStore();
 
   try {
     await initTelemetry();
     await authStore.init();
+    await usersStore.init();
 
     if ((to.meta.agent && !authStore.hasDeskAccess) || isAuthRoute) {
       router.replace({ name: WEBSITE_ROOT });

desk/src/stores/user.ts

@@ -0,0 +1,51 @@
+import { defineStore } from "pinia";
+import { createResource } from "frappe-ui";
+import { useAuthStore } from "./auth";
+import { reactive } from "vue";
+import { router } from "@/router";
+
+export const useUserStore = defineStore("user", () => {
+  const auth = useAuthStore();
+  const usersByName = reactive({});
+
+  const users = createResource({
+    url: "helpdesk.api.session.get_users",
+    cache: "Users",
+    initialData: [],
+    transform(users) {
+      for (const user of users) {
+        usersByName[user.name] = user;
+      }
+      return users;
+    },
+    onError(error) {
+      if (error && error.exc_type === "AuthenticationError") {
+        router.push("/login");
+      }
+    },
+  });
+
+  const init = users.fetch;
+
+  function getUser(email) {
+    if (!email || email === "sessionUser") {
+      email = auth.username;
+    }
+    if (!usersByName[email]) {
+      usersByName[email] = {
+        name: email,
+        email: email,
+        full_name: email.split("@")[0],
+        user_image: null,
+        role: null,
+      };
+    }
+    return usersByName[email];
+  }
+
+  return {
+    users,
+    getUser,
+    init,
+  };
+});

helpdesk/api/session.py

@@ -0,0 +1,19 @@
+import frappe
+
+@frappe.whitelist()
+def get_users():
+	if frappe.session.user == "Guest":
+		frappe.throw("Authentication failed", exc=frappe.AuthenticationError)
+
+	users = frappe.qb.get_query(
+		"User",
+		fields=["name", "email", "enabled", "user_image", "full_name", "user_type"],
+		order_by="full_name asc",
+		distinct=True,
+	).run(as_dict=1)
+
+	for user in users:
+		if frappe.session.user == user.name:
+			user.session_user = True
+
+	return users

helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py

@@ -757,26 +757,12 @@ def default_list_data():
 				"options": "HD Customer",
 				'width': '8rem',
 			},
-			# {
-			# 	'label': "Source",
-			# 	'type': 'Data',
-			# 	'key': "source",
-			# 	'width': '8rem',
-			# },
-			# {
-			# 	'label': "Assignee",
-			# 	'type': 'Link',
-			# 	'key': "assignee",
-			# 	"options": "User",
-			# 	'width': '8rem',
-			# },
-			# {
-			# 	'label': "Conversation",
-			# 	'type': 'Link',
-			# 	'key': "conversation",
-			# 	"options": "Contact",
-			# 	'width': '8rem',
-			# },
+			{
+				'label': 'Assigned To',
+				'type': 'Text',
+				'key': '_assign',
+				'width': '10rem',
+			},
 			{
 				'label': "Last modified",
 				'type': 'Datetime',
@@ -805,11 +791,9 @@ def default_list_data():
 			"resolution_by",
 			"customer",
 			"first_responded_on",
-			# "source",
-			# "assignee",
-			# "conversation",
 			"modified",
 			"creation",
+			"_assign"
 		]
 		return {'columns': columns, 'rows': rows}