From 2374b4ef63a65b0cadff8c932c14fbb406bca01a Mon Sep 17 00:00:00 2001
From: Sumit Bhanushali <sumit.bhanushali63@gmail.com>
Date: Mon, 22 Apr 2024 15:07:31 +0530
Subject: [PATCH] feat: email editor fields

---
 desk/src/components/AssignmentModal.vue       |  2 -
 desk/src/components/CommunicationArea.vue     | 37 +++++++++++------
 desk/src/components/EmailEditor.vue           | 37 +++++++++--------
 desk/src/components/MultiSelectInput.vue      | 41 +++++++++----------
 .../ticket/TicketAgentActivities.vue          |  2 +-
 desk/src/pages/TicketAgent2.vue               | 23 ++++++++---
 desk/src/stores/ticketAgent.ts                |  4 ++
 7 files changed, 87 insertions(+), 59 deletions(-)

diff --git a/desk/src/components/AssignmentModal.vue b/desk/src/components/AssignmentModal.vue
index 2ace07fb0..6d10af5f8 100644
--- a/desk/src/components/AssignmentModal.vue
+++ b/desk/src/components/AssignmentModal.vue
@@ -64,7 +64,6 @@
             </template>
             <template #suffix>
               <FeatherIcon
-                v-if="currentAssignee.name !== owner"
                 class="h-3.5"
                 name="x"
                 @click.stop="removeCurrentAssignee(currentAssignee.name)"
@@ -87,7 +86,6 @@
             </template>
             <template #suffix>
               <FeatherIcon
-                v-if="newAssignee.name !== owner"
                 class="h-3.5"
                 name="x"
                 @click.stop="removeAssignee(newAssignee.name)"
diff --git a/desk/src/components/CommunicationArea.vue b/desk/src/components/CommunicationArea.vue
index b3eb416b4..6395f52a4 100644
--- a/desk/src/components/CommunicationArea.vue
+++ b/desk/src/components/CommunicationArea.vue
@@ -66,9 +66,11 @@
   >
     <EmailEditor
       ref="newEmailEditor"
-      v-model:content="newEmail"
+      v-model:content="content"
       v-model:attachments="attachments"
-      v-model="doc"
+      :to-emails="toEmails"
+      :cc-emails="ccEmails"
+      :bcc-emails="bccEmails"
       :submit-button-props="{
         variant: 'solid',
         onClick: submitEmail,
@@ -77,12 +79,10 @@
       :discard-button-props="{
         onClick: () => {
           showEmailBox = false;
-          newEmailEditor.toEmails = doc.email ? [doc.email] : [];
           newEmailEditor.ccEmails = [];
           newEmailEditor.bccEmails = [];
           newEmailEditor.cc = false;
           newEmailEditor.bcc = false;
-          newEmail = '';
         },
       }"
     />
@@ -95,19 +95,17 @@ import EmailIcon from "@/components/icons/EmailIcon.vue";
 import CommentIcon from "@/components/icons/CommentIcon.vue";
 import { useAuthStore } from "@/stores/auth";
 import { EmailEditor, CommentTextEditor } from "@/components";
-import { computed, ref, defineModel, nextTick, watch } from "vue";
+import { computed, ref, defineModel, nextTick } from "vue";
 import { useStorage } from "@vueuse/core";
 
 const authStore = useAuthStore();
+const content = defineModel("content");
 const showEmailBox = ref(false);
 const showCommentBox = ref(false);
 const doc = defineModel();
 const attachments = ref([]);
 const newEmailEditor = ref(null);
 
-const newEmail = useStorage("emailBoxContent", "");
-const newComment = useStorage("commentBoxContent", "");
-
 function toggleEmailBox() {
   if (showCommentBox.value) {
     showCommentBox.value = false;
@@ -138,6 +136,9 @@ function toggleBCC() {
     });
 }
 
+const newEmail = useStorage("emailBoxContent", "");
+const newComment = useStorage("commentBoxContent", "");
+
 const commentEmpty = computed(() => {
   return !newComment.value || newComment.value === "<p></p>";
 });
@@ -146,13 +147,27 @@ const emailEmpty = computed(() => {
   return !newEmail.value || newEmail.value === "<p></p>";
 });
 
-const reload = defineModel("reload");
-
 const props = defineProps({
   doctype: {
     type: String,
     default: "HD Ticket",
   },
+  toEmails: {
+    type: Array,
+    default: () => [],
+  },
+  ccEmails: {
+    type: Array,
+    default: () => [],
+  },
+  bccEmails: {
+    type: Array,
+    default: () => [],
+  },
+  content: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["scroll"]);
@@ -181,7 +196,6 @@ async function submitEmail() {
   showEmailBox.value = false;
   sendMail.submit();
   newEmail.value = "";
-  reload.value = true;
   emit("scroll");
 }
 
@@ -206,7 +220,6 @@ async function submitComment() {
   showCommentBox.value = false;
   await sendComment();
   newComment.value = "";
-  reload.value = true;
   emit("scroll");
 }
 </script>
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
index 82057958f..11313230f 100644
--- a/desk/src/components/EmailEditor.vue
+++ b/desk/src/components/EmailEditor.vue
@@ -18,7 +18,7 @@
       >
         <span class="text-xs text-gray-500">TO:</span>
         <MultiSelectInput
-          v-model="toEmails"
+          v-model="toEmailsClone"
           class="flex-1"
           :validate="validateEmail"
           :error-message="(value) => `${value} is an invalid email address`"
@@ -32,7 +32,7 @@
         <span class="text-xs text-gray-500">CC:</span>
         <MultiSelectInput
           ref="ccInput"
-          v-model="ccEmails"
+          v-model="ccEmailsClone"
           class="flex-1"
           :validate="validateEmail"
           :error-message="(value) => `${value} is an invalid email address`"
@@ -42,7 +42,7 @@
         <span class="text-xs text-gray-500">BCC:</span>
         <MultiSelectInput
           ref="bccInput"
-          v-model="bccEmails"
+          v-model="bccEmailsClone"
           class="flex-1"
           :validate="validateEmail"
           :error-message="(value) => `${value} is an invalid email address`"
@@ -115,10 +115,6 @@ const props = defineProps({
     type: String,
     default: "HD Ticket",
   },
-  subject: {
-    type: String,
-    default: "Email from Issuer",
-  },
   editorProps: {
     type: Object,
     default: () => ({}),
@@ -131,17 +127,28 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  toEmails: {
+    type: Array,
+    default: () => [],
+  },
+  ccEmails: {
+    type: Array,
+    default: () => [],
+  },
+  bccEmails: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const modelValue = defineModel();
 const content = defineModel("content");
 const attachments = defineModel("attachments");
-const subject = ref(props.subject);
-const cc = ref(false);
-const bcc = ref(false);
-const ccEmails = ref([]);
-const bccEmails = ref([]);
-const toEmails = ref(modelValue.value?.email ? [modelValue.value.email] : []);
+const cc = ref(props.ccEmails.length ? true : false);
+const bcc = ref(props.bccEmails.length ? true : false);
+const toEmailsClone = ref([...props.toEmails]);
+const ccEmailsClone = ref([...props.ccEmails]);
+const bccEmailsClone = ref([...props.bccEmails]);
 const ccInput = ref(null);
 const bccInput = ref(null);
 
@@ -184,12 +191,8 @@ const textEditorMenuButtons = [
 ];
 
 defineExpose({
-  subject,
   cc,
   bcc,
-  toEmails,
-  ccEmails,
-  bccEmails,
   ccInput,
   bccInput,
 });
diff --git a/desk/src/components/MultiSelectInput.vue b/desk/src/components/MultiSelectInput.vue
index 75b758773..3d4855f9f 100644
--- a/desk/src/components/MultiSelectInput.vue
+++ b/desk/src/components/MultiSelectInput.vue
@@ -92,10 +92,9 @@ import {
   ComboboxOptions,
   ComboboxOption,
 } from "@headlessui/vue";
-import UserAvatar from "@/components/UserAvatar.vue";
-// import { contactsStore } from "@/stores/contacts";
+import { UserAvatar } from "@/components/";
 import { Popover, createResource } from "frappe-ui";
-import { ref, computed, nextTick, defineModel } from "vue";
+import { ref, computed, nextTick } from "vue";
 import { watchDebounced } from "@vueuse/core";
 
 const props = defineProps({
@@ -111,8 +110,6 @@ const props = defineProps({
 
 const values = defineModel();
 
-// const { getContactByName } = contactsStore();
-
 const emails = ref([]);
 const search = ref(null);
 const error = ref(null);
@@ -150,20 +147,20 @@ const filterOptions = createResource({
     txt: text.value,
     doctype: "Contact",
   },
-//   transform: (data) => {
-//     let allData = data
-//       .filter((c) => {
-//         return getContactByName(c.value).email_id;
-//       })
-//       .map((option) => {
-//         let c = getContactByName(option.value);
-//         return {
-//           label: c.full_name || c.email_id,
-//           value: c.email_id,
-//         };
-//       });
-//     return allData;
-//   },
+  transform: (data) => {
+    let allData = data
+      .filter((c) => {
+        return c.description.split(", ")[1];
+      })
+      .map((option) => {
+        let email = option.description.split(", ")[1];
+        return {
+          label: option.label || email,
+          value: email,
+        };
+      });
+    return allData;
+  },
 });
 
 const options = computed(() => {
@@ -222,19 +219,19 @@ const removeValue = (value) => {
 const removeLastValue = () => {
   if (query.value) return;
 
-  let emailRef = emails.value[emails.value.length - 1].$el;
+  let emailRef = emails.value[emails.value.length - 1]?.$el;
   if (document.activeElement === emailRef) {
     values.value.pop();
     nextTick(() => {
       if (values.value.length) {
         emailRef = emails.value[emails.value.length - 1].$el;
-        emailRef.focus();
+        emailRef?.focus();
       } else {
         setFocus();
       }
     });
   } else {
-    emailRef.focus();
+    emailRef?.focus();
   }
 };
 
diff --git a/desk/src/components/ticket/TicketAgentActivities.vue b/desk/src/components/ticket/TicketAgentActivities.vue
index f0d4b2ad1..377501103 100644
--- a/desk/src/components/ticket/TicketAgentActivities.vue
+++ b/desk/src/components/ticket/TicketAgentActivities.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-y-auto">
+  <div class="h-screen overflow-y-auto">
     <div v-for="(activity, i) in activities" :key="activity.key">
       <div class="flex gap-4 px-10">
         <div
diff --git a/desk/src/pages/TicketAgent2.vue b/desk/src/pages/TicketAgent2.vue
index d29bfa57d..03c37e710 100644
--- a/desk/src/pages/TicketAgent2.vue
+++ b/desk/src/pages/TicketAgent2.vue
@@ -55,8 +55,10 @@
         </div>
         <TicketAgentActivities :activities="ticketAgentStore.activities" />
         <CommunicationArea
-          v-model="ticket.data"
-          v-model:reload="reload_email"
+          v-model:content="ticketAgentStore.emailContent"
+          :to-emails="[ticket.data.raised_by]"
+          :cc-emails="[]"
+          :bcc-emails="[]"
         />
       </div>
       <TicketAgentSidebar :ticket="ticket.data" />
@@ -78,6 +80,7 @@
 
 <script setup lang="ts">
 import { computed, ref, h } from "vue";
+import { useStorage } from "@vueuse/core";
 import { Breadcrumbs, Dropdown, Switch } from "frappe-ui";
 
 import {
@@ -102,14 +105,24 @@ const props = defineProps({
   },
 });
 
-const reload_email = ref(false);
+const newEmail = useStorage("emailBoxContent", "");
+const newComment = useStorage("commentBoxContent", "");
+
+const commentEmpty = computed(() => {
+  return !newComment.value || newComment.value === "<p></p>";
+});
+
+const emailEmpty = computed(() => {
+  return !newEmail.value || newEmail.value === "<p></p>";
+});
+
 const showAssignmentModal = ref(false);
-const ticket = ticketAgentStore.getTicket(props.ticketId);
+const ticket = computed(() => ticketAgentStore.getTicket(props.ticketId));
 
 const breadcrumbs = computed(() => {
   let items = [{ label: "Tickets", route: { name: "TicketsAgent" } }];
   items.push({
-    label: ticket?.data?.subject,
+    label: ticket.value?.data?.subject,
     route: { name: "TicketAgent" },
   });
 
diff --git a/desk/src/stores/ticketAgent.ts b/desk/src/stores/ticketAgent.ts
index a99ef946c..4cdd8295f 100644
--- a/desk/src/stores/ticketAgent.ts
+++ b/desk/src/stores/ticketAgent.ts
@@ -162,6 +162,9 @@ export const useTicketAgentStore = defineStore("ticketAgent", () => {
     return data;
   });
 
+  // Communication
+  const emailContent = ref("");
+
   return {
     updateAssignees,
     assignees,
@@ -169,5 +172,6 @@ export const useTicketAgentStore = defineStore("ticketAgent", () => {
     updateTicket,
     activities,
     showFullActivity,
+    emailContent,
   };
 });