fix(ux): response editor

- Add a debounce of `500ms`
- Disable send button conditionally

desk/src/pages/desk/ticket/data.ts

@@ -49,6 +49,7 @@ export async function init(id: number) {
  },
  replyViaAgent: {
  method: "reply_via_agent",
+ debounce: 500,
  onSuccess() {
  clean();
  },

desk/src/pages/desk/ticket/editor/BottomSection.vue

@@ -67,17 +67,19 @@
  label="Reply"
  appearance="primary"
  class="rounded-r-none bg-gray-900 text-white hover:bg-gray-800"
+ :disabled="isDisabled"
  @click="newCommunication"
  />
- <Dropdown
- :options="dropdownOptions"
- :button="{
- icon: 'chevron-down',
- appearance: 'primary',
- class:
- 'rounded-l-none bg-gray-900 text-white hover:bg-gray-800',
- }"
- />
+ <Dropdown :options="dropdownOptions">
+ <template #default="{ open }">
+ <Button
+ :icon="open ? 'chevron-up' : 'chevron-down'"
+ appearance="primary"
+ class="cursor-pointer rounded-l-none bg-gray-900 text-white hover:bg-gray-800"
+ :disabled="isDisabled"
+ />
+ </template>
+ </Dropdown>
  </div>
  </div>
  </div>
@@ -95,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import {
  createResource,
  Button,
@@ -104,6 +106,7 @@ import {
  TextEditorFixedMenu,
 } from "frappe-ui";
 import { useAuthStore } from "@/stores/auth";
+import { isEmpty } from "@/utils/editor";
 import { editor, ticket, clean } from "../data";
 import { TextEditorMenuButtons as menuButtons } from "../../consts";
 import CannedResponses from "./CannedResponses.vue";
@@ -133,16 +136,23 @@ const dropdownOptions = [
 
 const insertRes = createResource({
  url: "frappe.client.insert",
+ debounce: 500,
  onSuccess() {
  clean();
  },
 });
 
+const isDisabled = computed(
+ () =>
+ isEmpty(editor.content) || ticket.replyViaAgent.loading || insertRes.loading
+);
+
 function removeAttachment(name: string) {
  editor.attachments = editor.attachments.filter((x) => x.name != name);
 }
 
 function newCommunication() {
+ ticket.replyViaAgent.loading = true;
  ticket.replyViaAgent.submit({
  attachments: editor.attachments.map((x) => x.name),
  cc: editor.cc.join(","),
@@ -152,6 +162,7 @@ function newCommunication() {
 }
 
 function newComment() {
+ insertRes.loading = true;
  insertRes.submit({
  doc: {
  doctype: "HD Ticket Comment",

desk/src/pages/desk/ticket/editor/ResponseEditor.vue

@@ -24,8 +24,8 @@
  <template #top>
  <TopSection />
  </template>
- <template #editor="{ editor }">
- <TextEditorContent :editor="editor" />
+ <template #editor="{ editor: e }">
+ <TextEditorContent :editor="e" />
  </template>
  <template #bottom>
  <BottomSection />

desk/src/utils/editor.ts

@@ -1,16 +1,15 @@
 import { isEmpty as isEmpty_ } from "lodash";
 
 export function strip(content: string) {
- const opening = new RegExp(/^<div class='content-block'><div>/);
- const closing = new RegExp(/<\/div><\/div>$/);
+ const opening = new RegExp(/^<p>/);
+ const closing = new RegExp(/<\/p>$/);
 
  return content.replace(opening, "").replace(closing, "");
 }
 
 /**
- * Check if the content is empty. This is done by replacing all <div class="content-block">
- * with empty strings.
+ * Check if the content is empty with empty strings
  */
 export function isEmpty(content: string) {
- return isEmpty_(strip(content).trim());
+ return isEmpty_(strip(content).trim());
 }