feat: added commarea in view

frappe · Mar 20, 2024 · 2ad3b01 · 2ad3b01
1 parent ce43f5d
commit 2ad3b01
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 38 deletions.
diff --git a/desk/src/components/CommunicationArea.vue b/desk/src/components/CommunicationArea.vue
@@ -40,7 +40,7 @@
     <CommentTextEditor
       ref="newCommentEditor"
       v-model:content="newComment"
-      v-model="doc.data"
+      v-model="doc"
       v-model:attachments="attachments"
       :submit-button-props="{
         variant: 'solid',
@@ -68,7 +68,7 @@
       ref="newEmailEditor"
       v-model:content="newEmail"
       v-model:attachments="attachments"
-      v-model="doc.data"
+      v-model="doc"
       :submit-button-props="{
         variant: 'solid',
         onClick: submitEmail,
@@ -77,7 +77,7 @@
       :discard-button-props="{
         onClick: () => {
           showEmailBox = false;
-          newEmailEditor.toEmails = doc.data.email ? [doc.data.email] : [];
+          newEmailEditor.toEmails = doc.email ? [doc.email] : [];
           newEmailEditor.ccEmails = [];
           newEmailEditor.bccEmails = [];
           newEmailEditor.cc = false;
@@ -95,7 +95,6 @@ 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 { File } from "@/types";
 import { computed, ref, defineModel, nextTick, watch } from "vue";
 import { useStorage } from "@vueuse/core";
 

diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
@@ -59,7 +59,7 @@
             <FileUploader
               :upload-args="{
                 doctype: doctype,
-                docname: modelValue.name,
+                docname: modelValue?.name,
                 private: true,
               }"
               @success="(f) => attachments.push(f)"
@@ -141,7 +141,7 @@ const cc = ref(false);
 const bcc = ref(false);
 const ccEmails = ref([]);
 const bccEmails = ref([]);
-const toEmails = ref(modelValue.value.email ? [modelValue.value.email] : []);
+const toEmails = ref(modelValue.value?.email ? [modelValue.value.email] : []);
 const ccInput = ref(null);
 const bccInput = ref(null);
 

diff --git a/desk/src/components/ticket/TicketAgentFields.vue b/desk/src/components/ticket/TicketAgentFields.vue
@@ -1,9 +1,6 @@
 <template>
   <div
-    class="flex grow flex-col gap-1.5 truncate border-l"
-    :style="{
-      'overflow-y': 'scroll',
-    }"
+    class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto"
   >
     <div
       v-for="o in options"

diff --git a/desk/src/pages/TicketAgent2.vue b/desk/src/pages/TicketAgent2.vue
@@ -31,33 +31,35 @@
       </template>
     </LayoutHeader>
     <div v-if="ticket.data" class="flex h-full">
-      <Tabs v-slot="{ tab }" v-model="tabIndex" :tabs="tabs">
-        <!-- <div
-          class="flex items-center justify-between px-10 py-5 text-lg font-medium"
+      <div class="flex flex-col">
+        <Tabs
+          v-slot="{ tab }"
+          v-model="tabIndex"
+          :tabs="tabs"
+          class="overflow-hidden"
         >
-          <div
-            class="flex h-7 items-center text-xl font-semibold text-gray-800"
-          >
-            {{ tab.label }}
+          <div v-if="tab.label === 'Customer Tickets'" class="py-2">
+            <TicketsAgentList
+              :rows="customerTickets?.data?.data"
+              :columns="customerTickets?.data?.columns"
+              :options="{
+                selectable: false,
+                openInNewTab: true,
+              }"
+              :paginate="false"
+            />
           </div>
-        </div> -->
-        <div v-if="tab.label === 'Customer Tickets'" class="h-full py-2">
-          <TicketsAgentList
-            :rows="customerTickets?.data?.data"
-            :columns="customerTickets?.data?.columns"
-            :options="{
-              selectable: false,
-              openInNewTab: true,
-            }"
-            :paginate="false"
+          <TicketAgentActivities
+            v-else
+            :activities="activities"
+            :type="tab.label === 'Emails' ? 'email' : 'all'"
           />
-        </div>
-        <TicketAgentActivities
-          v-else
-          :activities="activities"
-          :type="tab.label === 'Emails' ? 'email' : 'all'"
+        </Tabs>
+        <CommunicationArea
+          v-model="ticket.data"
+          v-model:reload="reload_email"
         />
-      </Tabs>
+      </div>
       <TicketAgentSidebar :ticket="ticket.data" />
     </div>
     <AssignmentModal
@@ -71,17 +73,26 @@
 
 <script setup lang="ts">
 import { computed, ref, h } from "vue";
+import { Breadcrumbs, createResource, Dropdown, Tabs } from "frappe-ui";
+
+import { useTicketStatusStore } from "@/stores/ticketStatus";
+import { createToast } from "@/utils";
+
+import {
+  LayoutHeader,
+  MultipleAvatar,
+  AssignmentModal,
+  CommunicationArea,
+} from "@/components";
+
+import { TicketAgentActivities, TicketAgentSidebar } from "@/components/ticket";
+
 import {
   ActivityIcon,
   EmailIcon,
   IndicatorIcon,
   TicketIcon,
 } from "@/components/icons";
-import { Breadcrumbs, createResource, Dropdown, Tabs } from "frappe-ui";
-import { TicketAgentActivities, TicketAgentSidebar } from "@/components/ticket";
-import { LayoutHeader, MultipleAvatar, AssignmentModal } from "@/components";
-import { useTicketStatusStore } from "@/stores/ticketStatus";
-import { createToast } from "@/utils";
 
 const ticketStatusStore = useTicketStatusStore();
 
@@ -102,6 +113,7 @@ const tabs = [
 ];
 
 const customerTickets = ref([]);
+const reload_email = ref(false);
 
 const props = defineProps({
   ticketId: {