fix: remove user store (#1572)

desk/src/components/TextEditor.vue

@@ -11,7 +11,12 @@
       <template #top>
         <span class="text-base">
           <span class="flex items-center justify-between">
-            <UserAvatar :user="authStore.userId" expand strong />
+            <UserAvatar
+              :name="authStore.userName"
+              :image="authStore.userImage"
+              expand
+              strong
+            />
             <slot name="top-right" />
           </span>
           <slot name="top-bottom" />

desk/src/components/TimelineItem.vue

@@ -2,7 +2,7 @@
   <span>
     <LucideDot class="absolute -left-3 h-6 w-6 bg-white text-gray-500" />
     <div class="mb-1 font-medium text-gray-900 first-letter:capitalize">
-      {{ user?.full_name || user }} {{ action }}
+      {{ user.name }} {{ action }}
     </div>
     <Tooltip :text="dayjs(date).long()">
       <div class="text-gray-700 first-letter:capitalize">
@@ -15,17 +15,13 @@
 <script setup lang="ts">
 import { Tooltip } from "frappe-ui";
 import { dayjs } from "@/dayjs";
-import { useUserStore } from "@/stores/user";
+import { UserInfo } from "@/types";
 
 interface P {
-  user: string;
+  user: UserInfo;
   date: string;
   action?: string;
 }
 
-const props = withDefaults(defineProps<P>(), {
-  action: "",
-});
-const userStore = useUserStore();
-const user = userStore.getUser(props.user);
+defineProps<P>();
 </script>

desk/src/components/UserAvatar.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="flex items-center gap-2">
-    <Avatar
-      :label="user?.full_name || props.user"
-      :image="image || user?.user_image"
-      v-bind="$attrs"
-    />
+    <Avatar :label="name" :image="image" v-bind="$attrs" />
     <span
       v-if="expand"
       class="truncate"
@@ -13,28 +9,23 @@
         'font-medium': strong,
       }"
     >
-      {{ user?.full_name || props.user }}
+      {{ name }}
     </span>
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from "vue";
 import { Avatar } from "frappe-ui";
-import { useUserStore } from "@/stores/user";
 
 interface P {
-  user?: string;
+  name: string;
   image?: string;
   expand?: boolean;
   strong?: boolean;
 }
 
-const props = withDefaults(defineProps<P>(), {
-  user: "",
+withDefaults(defineProps<P>(), {
   image: "",
   expand: false,
   strong: false,
 });
-const { getUser } = useUserStore();
-const user = computed(() => getUser(props.user));
 </script>

desk/src/components/notifications/Notifications.vue

@@ -43,7 +43,7 @@
         :to="getRoute(n)"
         @click="() => notificationStore.toggle()"
       >
-        <UserAvatar :user="n.user_from" />
+        <UserAvatar v-bind="n.user_from" />
         <span>
           <div class="mb-2 leading-5">
             <component :is="getBody(n)" v-bind="n" />

desk/src/components/notifications/NotificationsMention.vue

@@ -1,20 +1,18 @@
 <template>
   <span class="space-x-1 text-gray-700">
-    <span class="font-medium text-gray-900">{{ user.full_name || user }}</span>
+    <span class="font-medium text-gray-900">{{ user_from.name }}</span>
     <span>mentioned you in ticket</span>
-    <span class="font-medium text-gray-900">{{ props.reference_ticket }}</span>
+    <span class="font-medium text-gray-900">{{ reference_ticket }}</span>
   </span>
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from "@/stores/user";
+import { UserInfo } from "@/types";
 
 interface P {
-  user_from: string;
+  user_from: UserInfo;
   reference_ticket: string;
 }
 
-const props = defineProps<P>();
-const { getUser } = useUserStore();
-const user = getUser(props.user_from);
+defineProps<P>();
 </script>

desk/src/pages/c-layout/CLayoutNav.vue

@@ -5,7 +5,12 @@
     <Dropdown :options="options">
       <template #default="{ open }">
         <div class="flex cursor-pointer items-center gap-1">
-          <UserAvatar :user="authStore.userId" expand strong />
+          <UserAvatar
+            :name="authStore.userName"
+            :image="authStore.userImage"
+            expand
+            strong
+          />
           <div class="text-gray-700">
             <Icon v-if="open" icon="lucide:chevron-up" />
             <Icon v-else icon="lucide:chevron-down" />

desk/src/pages/ticket/TicketAgentActions.vue

@@ -3,10 +3,10 @@
     <Autocomplete
       :options="agentStore.dropdown"
       :value="
-        assignedTo
+        data.assignee
           ? {
-              label: assignedTo?.full_name,
-              value: assignedTo?.name,
+              label: data.assignee.name,
+              value: data.assignee.email,
             }
           : null
       "
@@ -15,18 +15,11 @@
     >
       <template #prefix>
         <Avatar
-          v-if="assignedTo"
+          v-if="data.assignee"
           class="mr-2"
           size="sm"
-          :label="assignedTo?.full_name"
-          :image="assignedTo?.user_image"
-        />
-      </template>
-      <template #item-prefix="{ option }">
-        <Avatar
-          class="mr-2"
-          :label="userStore.getUser(option.value)?.full_name"
-          :image="userStore.getUser(option.value)?.user_image"
+          :label="data.assignee.name"
+          :image="data.assignee.image"
         />
       </template>
     </Autocomplete>
@@ -95,21 +88,13 @@ 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(() => {
-  const assignJson = JSON.parse(data.value._assign);
-  const arr = Array.isArray(assignJson) ? assignJson : [];
-  const user = arr.slice(-1).pop();
-  return userStore.getUser(user);
-});
 
 function assignAgent(agent: string) {
   createResource({

desk/src/pages/ticket/TicketComment.vue

@@ -2,7 +2,7 @@
   <div class="my-4 rounded border bg-cyan-50 p-4">
     <div class="mb-4 flex items-center justify-between">
       <div class="flex items-center gap-0.5 text-base">
-        <UserAvatar :user="sender" size="lg" expand strong />
+        <UserAvatar v-bind="user" size="lg" expand strong />
         <Icon icon="lucide:dot" class="text-gray-500" />
         <Tooltip :text="dayjs(date).long()">
           <div class="text-gray-600">
@@ -36,20 +36,21 @@ import { createResource, Badge, Button, Dropdown, Tooltip } from "frappe-ui";
 import { Icon } from "@iconify/vue";
 import { dayjs } from "@/dayjs";
 import { emitter } from "@/emitter";
-import { useAuthStore } from "@/stores/auth";
 import { createToast } from "@/utils";
+import { useAuthStore } from "@/stores/auth";
+import { UserInfo } from "@/types";
 import { UserAvatar } from "@/components";
 
 interface P {
   content: string;
   date: string;
   isPinned: number;
   name: string;
-  sender: string;
+  user: UserInfo;
 }
 
 const props = defineProps<P>();
-const { content, name, sender, isPinned } = toRefs(props);
+const { content, name, isPinned, user } = toRefs(props);
 const authStore = useAuthStore();
 const IconTrash = h(Icon, { icon: "lucide:trash-2" });
 const IconPin = h(Icon, { icon: "lucide:pin" });
@@ -65,7 +66,7 @@ const options = computed(() =>
       label: "Delete",
       icon: IconTrash,
       onClick: () => deleteComment.submit(),
-      isHidden: sender.value !== authStore.userId,
+      isHidden: user.value.email !== authStore.userId,
     },
   ].filter((i) => !i.isHidden)
 );

desk/src/pages/ticket/TicketCommunication.vue

@@ -2,7 +2,7 @@
   <div class="mx-3 pt-6">
     <div class="mb-4 flex items-center justify-between text-base">
       <div class="flex items-center gap-0.5">
-        <UserAvatar :user="sender" size="lg" expand strong />
+        <UserAvatar v-bind="user" size="lg" expand strong />
         <Icon icon="lucide:dot" class="text-gray-500" />
         <Tooltip :text="dayjs(date).long()">
           <div class="text-gray-600">
@@ -30,6 +30,7 @@ import { Tooltip } from "frappe-ui";
 import sanitizeHtml from "sanitize-html";
 import { Icon } from "@iconify/vue";
 import { dayjs } from "@/dayjs";
+import { UserInfo } from "@/types";
 import { AttachmentItem, UserAvatar } from "@/components";
 
 interface Attachment {
@@ -40,7 +41,7 @@ interface Attachment {
 interface P {
   content: string;
   date: string;
-  sender: string;
+  user: UserInfo;
   cc?: string;
   bcc?: string;
   attachments?: Attachment[];

desk/src/pages/ticket/TicketConversation.vue

@@ -6,14 +6,14 @@
         :name="c.name"
         :content="c.content"
         :date="c.creation"
-        :sender="c.commented_by"
+        :user="c.user"
         :is-pinned="c.is_pinned"
       />
       <TicketCommunication
         v-else
         :content="c.content"
         :date="c.creation"
-        :sender="c.sender"
+        :user="c.user"
         :sender-image="c.sender"
         :cc="c.cc || ''"
         :bcc="c.bcc || ''"

desk/src/pages/ticket/TicketHistory.vue

@@ -9,7 +9,7 @@
           class="mb-4 ml-4"
         >
           <TimelineItem
-            :user="event.owner"
+            :user="event.user"
             :date="event.creation"
             :action="event.action"
           />

desk/src/pages/ticket/TicketTextEditor.vue

@@ -32,6 +32,11 @@
       <span class="flex">
         <slot name="bottom-left" />
         <FileUploader
+          :upload-args="{
+            doctype: 'HD Ticket',
+            folder: 'Home/Helpdesk',
+            private: true,
+          }"
           @success="(f: File) => $emit('update:attachments', [...attachments, f])"
         >
           <template #default="{ openFileSelector }">
@@ -59,7 +64,11 @@
     class="flex w-full cursor-pointer items-center gap-2 rounded bg-gray-100 px-3.5 py-2 hover:bg-gray-200"
     @click="() => $emit('update:expand', !expand)"
   >
-    <UserAvatar :user="authStore.userId" size="sm" />
+    <UserAvatar
+      :name="authStore.userName"
+      :image="authStore.userImage"
+      size="sm"
+    />
     <span class="text-base text-gray-700">
       {{ placeholder }}
     </span>

desk/src/pages/ticket/TicketViews.vue

@@ -8,7 +8,7 @@
           :key="event.name"
           class="mb-4 ml-4"
         >
-          <TimelineItem :user="event.viewed_by" :date="event.creation" />
+          <TimelineItem :user="event.user" :date="event.creation" />
         </li>
       </ol>
     </div>

desk/src/pages/tickets/TicketsAgent.vue

@@ -160,7 +160,7 @@ const columns = [
   },
   {
     label: "Assignee",
-    key: "_assign",
+    key: "assignee",
     width: "w-40",
   },
   {

desk/src/pages/tickets/TicketsAgentList.vue

@@ -29,8 +29,8 @@
         </span>
       </span>
     </template>
-    <template #_assign="{ data }">
-      <UserAvatar :user="getAssign(data._assign)" expand />
+    <template #assignee="{ data }">
+      <UserAvatar v-bind="data.assignee" expand />
     </template>
     <template #agreement_status="{ data }">
       <Badge

desk/src/router/index.js

@@ -1,6 +1,5 @@
 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";
@@ -232,7 +231,6 @@ export const router = createRouter({
 router.beforeEach(async (to) => {
   const isAuthRoute = AUTH_ROUTES.includes(to.name);
   const authStore = useAuthStore();
-  useUserStore();
 
   try {
     await initTelemetry();

desk/src/stores/notification.ts

@@ -1,14 +1,15 @@
 import { computed, ref } from "vue";
 import { defineStore } from "pinia";
-import { createResource, createListResource } from "frappe-ui";
+import { createResource } from "frappe-ui";
 import { useAuthStore } from "@/stores/auth";
 import { useError } from "@/composables/error";
+import { createListManager } from "@/composables/listManager";
 import { Notification, Resource } from "@/types";
 
 export const useNotificationStore = defineStore("notification", () => {
   const authStore = useAuthStore();
   const visible = ref(false);
-  const resource: Resource<Array<Notification>> = createListResource({
+  const resource: Resource<Array<Notification>> = createListManager({
     doctype: "HD Notification",
     cache: "Notifications",
     filters: {
@@ -24,9 +25,8 @@ export const useNotificationStore = defineStore("notification", () => {
       "user_from",
       "user_to",
     ],
-    orded_by: "creation desc",
+    orderBy: "creation desc",
     auto: true,
-    debounce: 500,
   });
   const clear = createResource({
     url: "helpdesk.helpdesk.doctype.hd_notification.utils.clear",