fix: scroll

desk/src/pages/desk/ticket/ConversationBox.vue

@@ -1,32 +1,39 @@
 <template>
- <div ref="listElement" class="flex flex-col items-center overflow-scroll">
- <div v-if="isLoaded" class="content flex flex-col gap-4">
- <div v-for="(c, i) in conversations" :key="c.name" class="mt-4">
- <div v-if="isNewDay(i)">
- <div class="flex items-center">
- <div class="bg h-0.5 grow rounded-full bg-gray-100"></div>
- <div class="my-2 ml-5 grow-0 text-sm text-gray-800">
- {{ dayShort(c.creation) }}
+ <div class="flex flex-col overflow-hidden">
+ <div
+ v-if="isLoaded"
+ ref="listElement"
+ class="flex w-full flex-col items-center gap-4 overflow-scroll"
+ >
+ <div class="content">
+ <div v-for="(c, i) in conversations" :key="c.name" class="mt-4">
+ <div v-if="isNewDay(i)">
+ <div class="my-4 border-t text-center">
+ <div class="-translate-y-1/2">
+ <span class="bg-white px-2 text-xs text-gray-700">
+ {{ dayShort(c.creation) }}
+ </span>
+ </div>
  </div>
  </div>
+ <CommunicationItem
+ v-if="c.isCommunication"
+ :content="c.content"
+ :date="c.creation"
+ :sender="c.sender.full_name"
+ :sender-image="c.sender.image"
+ :cc="c.cc"
+ :bcc="c.bcc"
+ :attachments="c.attachments"
+ />
+ <CommentItem
+ v-else
+ :name="c.name"
+ :content="c.content"
+ :date="c.creation"
+ :sender="c.sender"
+ />
  </div>
- <CommunicationItem
- v-if="c.isCommunication"
- :content="c.content"
- :date="c.creation"
- :sender="c.sender.full_name"
- :sender-image="c.sender.image"
- :cc="c.cc"
- :bcc="c.bcc"
- :attachments="c.attachments"
- />
- <CommentItem
- v-else
- :name="c.name"
- :content="c.content"
- :date="c.creation"
- :sender="c.sender"
- />
  </div>
  </div>
  <div v-else class="flex grow items-center justify-center">
@@ -38,7 +45,7 @@
 <script setup lang="ts">
 import { computed, onUnmounted, ref, watch } from "vue";
 import { useScroll } from "@vueuse/core";
-import { LoadingIndicator } from "frappe-ui";
+import { debounce, LoadingIndicator } from "frappe-ui";
 import dayjs from "dayjs";
 import { orderBy, unionBy } from "lodash";
 import { socket } from "@/socket";
@@ -50,25 +57,26 @@ type SocketData = {
  ticket_id: string;
 };
 
-const { ticket } = useTicketStore();
-
-ticket.getCommunications
- .submit()
- .then(() => (isCommunicationsLoaded.value = true));
-ticket.getComments.submit().then(() => (isCommentsLoaded.value = true));
-
-const listElement = ref<HTMLElement | null>(null);
-const { y: scrollY } = useScroll(listElement);
-
+const { editor, ticket } = useTicketStore();
+const listElement = ref(null);
 const isCommunicationsLoaded = ref(false);
 const isCommentsLoaded = ref(false);
 const isLoaded = computed(
  () => isCommunicationsLoaded.value && isCommentsLoaded.value
 );
 
-watch(listElement, (v) => {
- if (v) scrollToBottom();
+watch(isLoaded, (v) => {
+ if (v) scrollBottom();
 });
+watch(
+ () => editor.isExpanded,
+ () => scrollBottom()
+);
+
+ticket.getCommunications
+ .submit()
+ .then(() => (isCommunicationsLoaded.value = true));
+ticket.getComments.submit().then(() => (isCommentsLoaded.value = true));
 
 const ticketId = computed(() => ticket.doc.name);
 const communications = computed(
@@ -81,17 +89,18 @@ const conversations = computed(() =>
  )
 );
 
+const scrollBottom = debounce(() => {
+ const { y } = useScroll(listElement, { behavior: "smooth" });
+ y.value = listElement.value.scrollHeight;
+}, 500);
+
 function mapCommunication(c) {
  return {
  ...c,
  isCommunication: true,
  };
 }
 
-function scrollToBottom() {
- scrollY.value = listElement.value.scrollHeight;
-}
-
 function isNewDay(index: number) {
  if (index === 0) return true;
 
@@ -114,12 +123,12 @@ function dayShort(date: string) {
 
 socket.on("helpdesk:new-communication", (data: SocketData) => {
  if (data.ticket_id !== ticketId.value) return;
- ticket.getCommunications.reload().then(() => scrollToBottom());
+ ticket.getCommunications.reload().then(() => scrollBottom());
 });
 
 socket.on("helpdesk:new-ticket-comment", (data: SocketData) => {
  if (data.ticket_id !== ticketId.value) return;
- ticket.getComments.reload().then(() => scrollToBottom());
+ ticket.getComments.reload().then(() => scrollBottom());
 });
 
 socket.on("helpdesk:delete-ticket-comment", (data: SocketData) => {