From 66349ca27f61a352ecd9dcdf027ad077de0cd69e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 16:33:13 +0530
Subject: [PATCH 01/12] feat: added custom fields in email template doctype

---
 crm/hooks.py     |  2 +-
 crm/install.py   | 34 ++++++++++++++++++++++++++++++++--
 crm/uninstall.py | 22 ++++++++++++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 crm/uninstall.py

diff --git a/crm/hooks.py b/crm/hooks.py
index 8e703a15..b8bc1e99 100644
--- a/crm/hooks.py
+++ b/crm/hooks.py
@@ -76,7 +76,7 @@ after_install = "crm.install.after_install"
 # Uninstallation
 # ------------
 
-# before_uninstall = "crm.uninstall.before_uninstall"
+before_uninstall = "crm.uninstall.before_uninstall"
 # after_uninstall = "crm.uninstall.after_uninstall"
 
 # Integration Setup
diff --git a/crm/install.py b/crm/install.py
index ff8a914d..351dd8ce 100644
--- a/crm/install.py
+++ b/crm/install.py
@@ -1,9 +1,11 @@
 # Copyright (c) 2022, Frappe Technologies Pvt. Ltd. and Contributors
 # MIT License. See license.txt
-
 from __future__ import unicode_literals
+import click
 import frappe
 
+from frappe.custom.doctype.custom_field.custom_field import create_custom_fields
+
 def before_install():
 	pass
 
@@ -12,6 +14,7 @@ def after_install():
 	add_default_deal_statuses()
 	add_default_communication_statuses()
 	add_property_setter()
+	add_email_template_custom_fields()
 	frappe.db.commit()
 
 def add_default_lead_statuses():
@@ -113,4 +116,31 @@ def add_property_setter():
 		doc.property = "search_fields"
 		doc.property_type = "Data"
 		doc.value = "email_id"
-		doc.insert()
\ No newline at end of file
+		doc.insert()
+
+def add_email_template_custom_fields():
+	if not frappe.get_meta("Email Template").has_field("enabled"):
+		click.secho("* Installing Custom Fields in Email Template")
+
+		create_custom_fields(
+			{
+				"Email Template": [
+					{
+						"default": "0",
+						"fieldname": "enabled",
+						"fieldtype": "Check",
+						"label": "Enabled",
+						"insert_after": "",
+					},
+					{
+						"fieldname": "reference_doctype",
+						"fieldtype": "Link",
+						"label": "Doctype",
+						"options": "DocType",
+						"insert_after": "enabled",
+					},
+				]
+			}
+		)
+
+		frappe.clear_cache(doctype="Email Template")
diff --git a/crm/uninstall.py b/crm/uninstall.py
new file mode 100644
index 00000000..34622d0b
--- /dev/null
+++ b/crm/uninstall.py
@@ -0,0 +1,22 @@
+# Copyright (c) 2022, Frappe Technologies Pvt. Ltd. and Contributors
+# MIT License. See license.txt
+from __future__ import unicode_literals
+import click
+import frappe
+
+def before_uninstall():
+	delete_email_template_custom_fields()
+
+def delete_email_template_custom_fields():
+	if frappe.get_meta("Email Template").has_field("enabled"):
+		click.secho("* Uninstalling Custom Fields from Email Template")
+
+		fieldnames = (
+			"enabled",
+			"reference_doctype",
+		)
+
+		for fieldname in fieldnames:
+			frappe.db.delete("Custom Field", {"name": "Email Template-" + fieldname})
+
+		frappe.clear_cache(doctype="Email Template")
\ No newline at end of file

From 1ed93a5a81519da0d8a196188815cc951814e9e1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 16:34:22 +0530
Subject: [PATCH 02/12] fix: added email templates listview and added in
 sidebar

---
 .../src/components/Layouts/AppSidebar.vue     |   6 +
 .../ListViews/EmailTemplatesListView.vue      |  98 ++++++++++++++++
 frontend/src/pages/EmailTemplate.vue          |   6 +
 frontend/src/pages/EmailTemplates.vue         | 109 ++++++++++++++++++
 frontend/src/router.js                        |  12 ++
 5 files changed, 231 insertions(+)
 create mode 100644 frontend/src/components/ListViews/EmailTemplatesListView.vue
 create mode 100644 frontend/src/pages/EmailTemplate.vue
 create mode 100644 frontend/src/pages/EmailTemplates.vue

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 5b1cd6e6..0bbc03b8 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -99,6 +99,7 @@
 </template>
 
 <script setup>
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import PinIcon from '@/components/Icons/PinIcon.vue'
 import UserDropdown from '@/components/UserDropdown.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
@@ -146,6 +147,11 @@ const links = [
     icon: PhoneIcon,
     to: 'Call Logs',
   },
+  {
+    label: 'Email Templates',
+    icon: EmailIcon,
+    to: 'Email Templates',
+  },
 ]
 
 function getIcon(routeName) {
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
new file mode 100644
index 00000000..dcc82cc9
--- /dev/null
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -0,0 +1,98 @@
+<template>
+  <ListView
+    :columns="columns"
+    :rows="rows"
+    :options="{
+      getRowRoute: (row) => ({
+        name: 'Email Template',
+        params: { emailTemplateId: row.name },
+      }),
+      selectable: options.selectable,
+    }"
+    row-key="name"
+  >
+    <ListHeader class="mx-5" />
+    <ListRows id="list-rows">
+      <ListRow
+        class="mx-5"
+        v-for="row in rows"
+        :key="row.name"
+        v-slot="{ column, item }"
+        :row="row"
+      >
+        <ListRowItem :item="item">
+          <!-- <template #prefix>
+
+          </template> -->
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+          >
+            {{ item.timeAgo }}
+          </div>
+          <div v-else-if="column.key === 'status'" class="truncate text-base">
+            <Badge
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="item.label"
+            />
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
+        </ListRowItem>
+      </ListRow>
+    </ListRows>
+    <ListSelectBanner />
+  </ListView>
+  <ListFooter
+    class="border-t px-5 py-2"
+    v-model="pageLengthCount"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+    @loadMore="emit('loadMore')"
+  />
+</template>
+<script setup>
+import {
+  Avatar,
+  ListView,
+  ListHeader,
+  ListRows,
+  ListRow,
+  ListSelectBanner,
+  ListRowItem,
+  ListFooter,
+} from 'frappe-ui'
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      selectable: true,
+      totalCount: 0,
+      rowCount: 0,
+    }),
+  },
+})
+
+const emit = defineEmits(['loadMore'])
+
+const pageLengthCount = defineModel()
+</script>
diff --git a/frontend/src/pages/EmailTemplate.vue b/frontend/src/pages/EmailTemplate.vue
new file mode 100644
index 00000000..72571af1
--- /dev/null
+++ b/frontend/src/pages/EmailTemplate.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Email Templates</h1>
+    <p>Here is a list of email templates</p>
+  </div>
+</template>
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
new file mode 100644
index 00000000..8245f643
--- /dev/null
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -0,0 +1,109 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="breadcrumbs" />
+    </template>
+  </LayoutHeader>
+  <ViewControls
+    v-model="emailTemplates"
+    v-model:loadMore="loadMore"
+    doctype="Email Template"
+  />
+  <EmailTemplatesListView
+    v-if="emailTemplates.data && rows.length"
+    v-model="emailTemplates.data.page_length_count"
+    :rows="rows"
+    :columns="emailTemplates.data.columns"
+    :options="{
+      rowCount: emailTemplates.data.row_count,
+      totalCount: emailTemplates.data.total_count,
+    }"
+    @loadMore="() => loadMore++"
+  />
+  <div
+    v-else-if="emailTemplates.data"
+    class="flex h-full items-center justify-center"
+  >
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <PhoneIcon class="h-10 w-10" />
+      <span>No Logs Found</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import ViewControls from '@/components/ViewControls.vue'
+import EmailTemplatesListView from '@/components/ListViews/EmailTemplatesListView.vue'
+import {
+  secondsToDuration,
+  dateFormat,
+  dateTooltipFormat,
+  timeAgo,
+} from '@/utils'
+import { usersStore } from '@/stores/users'
+import { contactsStore } from '@/stores/contacts'
+import { Breadcrumbs } from 'frappe-ui'
+import { computed, ref } from 'vue'
+
+const { getUser } = usersStore()
+const { getContact, getLeadContact } = contactsStore()
+
+const breadcrumbs = [
+  { label: 'Email Templates', route: { name: 'Email Templates' } },
+]
+
+// emailTemplates data is loaded in the ViewControls component
+const emailTemplates = ref({})
+const loadMore = ref(1)
+
+const rows = computed(() => {
+  if (!emailTemplates.value?.data?.data) return []
+  return emailTemplates.value?.data.data.map((emailTemplate) => {
+    let _rows = {}
+    emailTemplates.value?.data.rows.forEach((row) => {
+      _rows[row] = emailTemplate[row]
+
+      if (row === 'status') {
+        _rows[row] = {
+          label: statusLabelMap[emailTemplate.status],
+          color: statusColorMap[emailTemplate.status],
+        }
+      } else if (['modified', 'creation'].includes(row)) {
+        _rows[row] = {
+          label: dateFormat(emailTemplate[row], dateTooltipFormat),
+          timeAgo: timeAgo(emailTemplate[row]),
+        }
+      }
+    })
+    return _rows
+  })
+})
+
+const statusLabelMap = {
+  Completed: 'Completed',
+  Initiated: 'Initiated',
+  Busy: 'Declined',
+  Failed: 'Failed',
+  Queued: 'Queued',
+  Cancelled: 'Cancelled',
+  Ringing: 'Ringing',
+  'No Answer': 'Missed Call',
+  'In Progress': 'In Progress',
+}
+
+const statusColorMap = {
+  Completed: 'green',
+  Busy: 'orange',
+  Failed: 'red',
+  Initiated: 'gray',
+  Queued: 'gray',
+  Cancelled: 'gray',
+  Ringing: 'gray',
+  'No Answer': 'red',
+  'In Progress': 'blue',
+}
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 9ee28274..73f733bb 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -73,6 +73,18 @@ const routes = [
     component: () => import('@/pages/CallLog.vue'),
     props: true,
   },
+  {
+    path: '/email-templates',
+    name: 'Email Templates',
+    component: () => import('@/pages/EmailTemplates.vue'),
+    meta: { scrollPos: { top: 0, left: 0 } },
+  },
+  {
+    path: '/email-templates/:emailTemplateId',
+    name: 'Email Template',
+    component: () => import('@/pages/EmailTemplate.vue'),
+    props: true,
+  },
   {
     path: '/dashboard',
     name: 'Dashboard',

From b261506559f99110c455dea2af5b386b50054dc2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 16:34:45 +0530
Subject: [PATCH 03/12] fix: added default columns in listview

---
 crm/hooks.py                    |  3 ++-
 crm/overrides/email_template.py | 48 +++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 crm/overrides/email_template.py

diff --git a/crm/hooks.py b/crm/hooks.py
index b8bc1e99..c60beac0 100644
--- a/crm/hooks.py
+++ b/crm/hooks.py
@@ -118,7 +118,8 @@ before_uninstall = "crm.uninstall.before_uninstall"
 # Override standard doctype classes
 
 override_doctype_class = {
-	"Contact": "crm.overrides.contact.CustomContact"
+	"Contact": "crm.overrides.contact.CustomContact",
+	"Email Template": "crm.overrides.email_template.CustomEmailTemplate",
 }
 
 # Document Events
diff --git a/crm/overrides/email_template.py b/crm/overrides/email_template.py
new file mode 100644
index 00000000..af7ed764
--- /dev/null
+++ b/crm/overrides/email_template.py
@@ -0,0 +1,48 @@
+# import frappe
+from frappe import _
+from frappe.email.doctype.email_template.email_template import EmailTemplate
+
+
+class CustomEmailTemplate(EmailTemplate):
+	@staticmethod
+	def default_list_data():
+		columns = [
+			{
+				'label': 'Name',
+				'type': 'Data',
+				'key': 'name',
+				'width': '17rem',
+			},
+			{
+				'label': 'Subject',
+				'type': 'Data',
+				'key': 'subject',
+				'width': '12rem',
+			},
+			{
+				'label': 'Enabled',
+				'type': 'Check',
+				'key': 'enabled',
+				'width': '6rem',
+			},
+			{
+				'label': 'Doctype',
+				'type': 'Link',
+				'key': 'reference_doctype',
+				'width': '12rem',
+			},
+			{
+				'label': 'Last Modified',
+				'type': 'Datetime',
+				'key': 'modified',
+				'width': '8rem',
+			},
+		]
+		rows = [
+			"name",
+			"enabled",
+			"reference_doctype",
+			"subject",
+			"modified",
+		]
+		return {'columns': columns, 'rows': rows}

From 2a5d4425d09e0cd8b6802cf271aa398d66662348 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 18:46:09 +0530
Subject: [PATCH 04/12] fix: added email template modal which is showed when
 row in listview is clicked

---
 crm/overrides/email_template.py               |   1 +
 .../ListViews/EmailTemplatesListView.vue      |   8 +-
 .../components/Modals/EmailTemplateModal.vue  | 190 ++++++++++++++++++
 frontend/src/pages/EmailTemplates.vue         |  67 +++---
 4 files changed, 220 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/components/Modals/EmailTemplateModal.vue

diff --git a/crm/overrides/email_template.py b/crm/overrides/email_template.py
index af7ed764..da14c714 100644
--- a/crm/overrides/email_template.py
+++ b/crm/overrides/email_template.py
@@ -43,6 +43,7 @@ class CustomEmailTemplate(EmailTemplate):
 			"enabled",
 			"reference_doctype",
 			"subject",
+			"response",
 			"modified",
 		]
 		return {'columns': columns, 'rows': rows}
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index dcc82cc9..4f0f09b3 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -3,10 +3,7 @@
     :columns="columns"
     :rows="rows"
     :options="{
-      getRowRoute: (row) => ({
-        name: 'Email Template',
-        params: { emailTemplateId: row.name },
-      }),
+      onRowClick: (row) => emit('showEmailTemplate', row.name),
       selectable: options.selectable,
     }"
     row-key="name"
@@ -72,6 +69,7 @@ import {
   ListRowItem,
   ListFooter,
 } from 'frappe-ui'
+import { defineModel } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -92,7 +90,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore'])
+const emit = defineEmits(['loadMore', 'showEmailTemplate'])
 
 const pageLengthCount = defineModel()
 </script>
diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
new file mode 100644
index 00000000..626520d9
--- /dev/null
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -0,0 +1,190 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      title: editMode ? 'Edit Email Template' : 'Create Email Template',
+      size: 'xl',
+      actions: [
+        {
+          label: editMode ? 'Update' : 'Create',
+          variant: 'solid',
+          onClick: () => (editMode ? updateEmailTemplate() : callInsertDoc()),
+        },
+      ],
+    }"
+  >
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">
+            Name
+            <span class="text-red-500">*</span>
+          </div>
+          <TextInput
+            variant="outline"
+            v-model="_emailTemplate.name"
+            placeholder="Add name"
+          />
+        </div>
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">Doctype</div>
+          <TextInput
+            variant="outline"
+            v-model="_emailTemplate.reference_doctype"
+            placeholder="Add Doctype"
+          />
+        </div>
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">
+            Subject
+            <span class="text-red-500">*</span>
+          </div>
+          <TextInput
+            ref="subject"
+            variant="outline"
+            v-model="_emailTemplate.subject"
+            placeholder="Add subject"
+          />
+        </div>
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">
+            Content
+            <span class="text-red-500">*</span>
+          </div>
+          <TextEditor
+            variant="outline"
+            ref="content"
+            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
+            :bubbleMenu="true"
+            :content="_emailTemplate.response"
+            @change="(val) => (_emailTemplate.response = val)"
+            placeholder="Type a Content"
+          />
+        </div>
+        <div>
+          <Checkbox v-model="_emailTemplate.enabled" label="Enabled" />
+        </div>
+        <ErrorMessage :message="errorMessage" />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { Checkbox, TextEditor, call } from 'frappe-ui'
+import { ref, defineModel, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  emailTemplate: {
+    type: Object,
+    default: {},
+  },
+})
+
+const show = defineModel()
+const emailTemplates = defineModel('reloadEmailTemplates')
+const errorMessage = ref('')
+
+const emit = defineEmits(['after'])
+
+const subject = ref(null)
+const editMode = ref(false)
+let _emailTemplate = ref({})
+
+async function updateEmailTemplate() {
+  if (!validate()) return
+  const old = { ...props.emailTemplate }
+  const newEmailTemplate = { ..._emailTemplate.value }
+
+  const nameChanged = old.name !== newEmailTemplate.name
+  delete old.name
+  delete newEmailTemplate.name
+
+  const otherFieldChanged =
+    JSON.stringify(old) !== JSON.stringify(newEmailTemplate)
+  const values = newEmailTemplate
+
+  if (!nameChanged && !otherFieldChanged) {
+    show.value = false
+    return
+  }
+
+  let name
+  if (nameChanged) {
+    name = await callRenameDoc()
+  }
+  if (otherFieldChanged) {
+    name = await callSetValue(values)
+  }
+  handleEmailTemplateUpdate({ name })
+}
+
+async function callRenameDoc() {
+  const d = await call('frappe.client.rename_doc', {
+    doctype: 'Email Template',
+    old_name: props.emailTemplate.name,
+    new_name: _emailTemplate.value.name,
+  })
+  return d
+}
+
+async function callSetValue(values) {
+  const d = await call('frappe.client.set_value', {
+    doctype: 'Email Template',
+    name: _emailTemplate.value.name,
+    fieldname: values,
+  })
+  return d.name
+}
+
+async function callInsertDoc() {
+  if (!validate()) return
+  const doc = await call('frappe.client.insert', {
+    doc: {
+      doctype: 'Email Template',
+      ..._emailTemplate.value,
+    },
+  })
+  doc.name && handleEmailTemplateUpdate(doc)
+}
+
+function handleEmailTemplateUpdate(doc) {
+  emailTemplates.value?.reload()
+  show.value = false
+}
+
+function validate() {
+  if (!_emailTemplate.value.name) {
+    errorMessage.value = 'Name is required'
+    return false
+  }
+  if (!_emailTemplate.value.subject) {
+    errorMessage.value = 'Subject is required'
+    return false
+  }
+  if (
+    !_emailTemplate.value.response ||
+    _emailTemplate.value.response === '<p></p>'
+  ) {
+    errorMessage.value = 'Content is required'
+    return false
+  }
+  return true
+}
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    editMode.value = false
+    errorMessage.value = ''
+    nextTick(() => {
+      subject.value.el.focus()
+      _emailTemplate.value = { ...props.emailTemplate }
+      if (_emailTemplate.value.name) {
+        editMode.value = true
+      }
+    })
+  }
+)
+</script>
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index 8245f643..7b80cdfb 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -19,6 +19,7 @@
       totalCount: emailTemplates.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @showEmailTemplate="showEmailTemplate"
   />
   <div
     v-else-if="emailTemplates.data"
@@ -27,31 +28,27 @@
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
     >
-      <PhoneIcon class="h-10 w-10" />
-      <span>No Logs Found</span>
+      <EmailIcon class="h-10 w-10" />
+      <span>No Email Templates Found</span>
     </div>
   </div>
+  <EmailTemplateModal
+    v-model="showEmailTemplateModal"
+    v-model:reloadEmailTemplates="emailTemplates"
+    :emailTemplate="emailTemplate"
+  />
 </template>
 
 <script setup>
-import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import EmailTemplatesListView from '@/components/ListViews/EmailTemplatesListView.vue'
-import {
-  secondsToDuration,
-  dateFormat,
-  dateTooltipFormat,
-  timeAgo,
-} from '@/utils'
-import { usersStore } from '@/stores/users'
-import { contactsStore } from '@/stores/contacts'
+import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
+import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
 import { Breadcrumbs } from 'frappe-ui'
 import { computed, ref } from 'vue'
 
-const { getUser } = usersStore()
-const { getContact, getLeadContact } = contactsStore()
-
 const breadcrumbs = [
   { label: 'Email Templates', route: { name: 'Email Templates' } },
 ]
@@ -67,12 +64,7 @@ const rows = computed(() => {
     emailTemplates.value?.data.rows.forEach((row) => {
       _rows[row] = emailTemplate[row]
 
-      if (row === 'status') {
-        _rows[row] = {
-          label: statusLabelMap[emailTemplate.status],
-          color: statusColorMap[emailTemplate.status],
-        }
-      } else if (['modified', 'creation'].includes(row)) {
+      if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
           label: dateFormat(emailTemplate[row], dateTooltipFormat),
           timeAgo: timeAgo(emailTemplate[row]),
@@ -83,27 +75,20 @@ const rows = computed(() => {
   })
 })
 
-const statusLabelMap = {
-  Completed: 'Completed',
-  Initiated: 'Initiated',
-  Busy: 'Declined',
-  Failed: 'Failed',
-  Queued: 'Queued',
-  Cancelled: 'Cancelled',
-  Ringing: 'Ringing',
-  'No Answer': 'Missed Call',
-  'In Progress': 'In Progress',
-}
+const showEmailTemplateModal = ref(false)
 
-const statusColorMap = {
-  Completed: 'green',
-  Busy: 'orange',
-  Failed: 'red',
-  Initiated: 'gray',
-  Queued: 'gray',
-  Cancelled: 'gray',
-  Ringing: 'gray',
-  'No Answer': 'red',
-  'In Progress': 'blue',
+const emailTemplate = ref({})
+
+function showEmailTemplate(name) {
+  let et = rows.value?.find((row) => row.name === name)
+  emailTemplate.value = {
+    subject: et.subject,
+    response: et.response,
+    name: et.name,
+    enabled: et.enabled,
+    owner: et.owner,
+    reference_doctype: et.reference_doctype,
+  }
+  showEmailTemplateModal.value = true
 }
 </script>

From e190280b56cba02bb2e367a71061360aca3f5511 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 18:46:42 +0530
Subject: [PATCH 05/12] fix: also allow creating email template from listview

---
 frontend/src/pages/EmailTemplates.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index 7b80cdfb..e5ac35bc 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -3,6 +3,11 @@
     <template #left-header>
       <Breadcrumbs :items="breadcrumbs" />
     </template>
+    <template #right-header>
+      <Button variant="solid" label="Create" @click="showEmailTemplateModal = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
   </LayoutHeader>
   <ViewControls
     v-model="emailTemplates"

From 975384ad433bfd70c99e5a7d74f2a80d3fe64f34 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 18:47:09 +0530
Subject: [PATCH 06/12] fix: allow deleting email templates from listview

---
 .../ListViews/EmailTemplatesListView.vue      | 48 +++++++++++++++++--
 frontend/src/pages/EmailTemplates.vue         |  1 +
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 4f0f09b3..10d92063 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -46,7 +46,16 @@
         </ListRowItem>
       </ListRow>
     </ListRows>
-    <ListSelectBanner />
+    <ListSelectBanner>
+      <template #actions="{ selections, unselectAll }">
+        <Button
+          theme="red"
+          variant="subtle"
+          label="Delete"
+          @click="deleteEmailTemplate(selections, unselectAll)"
+        />
+      </template>
+    </ListSelectBanner>
   </ListView>
   <ListFooter
     class="border-t px-5 py-2"
@@ -60,7 +69,6 @@
 </template>
 <script setup>
 import {
-  Avatar,
   ListView,
   ListHeader,
   ListRows,
@@ -68,6 +76,7 @@ import {
   ListSelectBanner,
   ListRowItem,
   ListFooter,
+  call,
 } from 'frappe-ui'
 import { defineModel } from 'vue'
 
@@ -90,7 +99,40 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'showEmailTemplate'])
+const emit = defineEmits(['loadMore', 'showEmailTemplate', 'reload'])
 
 const pageLengthCount = defineModel()
+
+function deleteEmailTemplate(selections, unselectAll) {
+  let title = 'Delete email template'
+  let message = 'Are you sure you want to delete this email template?'
+
+  if (selections.size > 1) {
+    title = 'Delete email templates'
+    message = 'Are you sure you want to delete these email templates?'
+  }
+
+  $dialog({
+    title: title,
+    message: message,
+    actions: [
+      {
+        label: 'Delete',
+        theme: 'red',
+        variant: 'solid',
+        async onClick(close) {
+          for (const selection of selections) {
+            await call('frappe.client.delete', {
+              doctype: 'Email Template',
+              name: selection,
+            })
+          }
+          close()
+          unselectAll()
+          emit('reload')
+        },
+      },
+    ],
+  })
+}
 </script>
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index e5ac35bc..ab404dc2 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -25,6 +25,7 @@
     }"
     @loadMore="() => loadMore++"
     @showEmailTemplate="showEmailTemplate"
+    @reload="() => emailTemplates.reload()"
   />
   <div
     v-else-if="emailTemplates.data"

From 69cc2f15769dd6b83c5e9ca3cd99bb5d8a2d19a3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 18:56:33 +0530
Subject: [PATCH 07/12] fix: made doctype field select field and minor fixes

---
 .../components/Modals/EmailTemplateModal.vue  | 21 ++++++++++++-------
 frontend/src/pages/EmailTemplates.vue         |  9 +++++++-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
index 626520d9..7d4d2f27 100644
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -2,7 +2,7 @@
   <Dialog
     v-model="show"
     :options="{
-      title: editMode ? 'Edit Email Template' : 'Create Email Template',
+      title: editMode ? emailTemplate.name : 'Create Email Template',
       size: 'xl',
       actions: [
         {
@@ -21,6 +21,7 @@
             <span class="text-red-500">*</span>
           </div>
           <TextInput
+            ref="nameRef"
             variant="outline"
             v-model="_emailTemplate.name"
             placeholder="Add name"
@@ -28,10 +29,11 @@
         </div>
         <div>
           <div class="mb-1.5 text-sm text-gray-600">Doctype</div>
-          <TextInput
+          <Select
             variant="outline"
             v-model="_emailTemplate.reference_doctype"
-            placeholder="Add Doctype"
+            :options="['CRM Deal', 'CRM Lead']"
+            placeholder="Select Doctype"
           />
         </div>
         <div>
@@ -40,7 +42,7 @@
             <span class="text-red-500">*</span>
           </div>
           <TextInput
-            ref="subject"
+            ref="subjectRef"
             variant="outline"
             v-model="_emailTemplate.subject"
             placeholder="Add subject"
@@ -71,7 +73,7 @@
 </template>
 
 <script setup>
-import { Checkbox, TextEditor, call } from 'frappe-ui'
+import { Checkbox, Select, TextEditor, call } from 'frappe-ui'
 import { ref, defineModel, nextTick, watch } from 'vue'
 
 const props = defineProps({
@@ -87,7 +89,8 @@ const errorMessage = ref('')
 
 const emit = defineEmits(['after'])
 
-const subject = ref(null)
+const subjectRef = ref(null)
+const nameRef = ref(null)
 const editMode = ref(false)
 let _emailTemplate = ref({})
 
@@ -179,7 +182,11 @@ watch(
     editMode.value = false
     errorMessage.value = ''
     nextTick(() => {
-      subject.value.el.focus()
+        if (_emailTemplate.value.name) {
+            subjectRef.value.el.focus()
+        } else {
+            nameRef.value.el.focus()
+        }
       _emailTemplate.value = { ...props.emailTemplate }
       if (_emailTemplate.value.name) {
         editMode.value = true
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index ab404dc2..3dea1ea4 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -83,7 +83,14 @@ const rows = computed(() => {
 
 const showEmailTemplateModal = ref(false)
 
-const emailTemplate = ref({})
+const emailTemplate = ref({
+    subject: '',
+    response: '',
+    name: '',
+    enabled: 1,
+    owner: '',
+    reference_doctype: 'CRM Deal',
+})
 
 function showEmailTemplate(name) {
   let et = rows.value?.find((row) => row.name === name)

From ebdd4bee89814d9cad14b066c6e1093be4926457 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 19:00:27 +0530
Subject: [PATCH 08/12] chore: layout changes

---
 .../components/Modals/EmailTemplateModal.vue  | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
index 7d4d2f27..c8b009ce 100644
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -15,26 +15,28 @@
   >
     <template #body-content>
       <div class="flex flex-col gap-4">
-        <div>
-          <div class="mb-1.5 text-sm text-gray-600">
-            Name
-            <span class="text-red-500">*</span>
+        <div class="flex gap-4">
+          <div class="flex-1">
+            <div class="mb-1.5 text-sm text-gray-600">
+              Name
+              <span class="text-red-500">*</span>
+            </div>
+            <TextInput
+              ref="nameRef"
+              variant="outline"
+              v-model="_emailTemplate.name"
+              placeholder="Add name"
+            />
+          </div>
+          <div class="flex-1">
+            <div class="mb-1.5 text-sm text-gray-600">Doctype</div>
+            <Select
+              variant="outline"
+              v-model="_emailTemplate.reference_doctype"
+              :options="['CRM Deal', 'CRM Lead']"
+              placeholder="Select Doctype"
+            />
           </div>
-          <TextInput
-            ref="nameRef"
-            variant="outline"
-            v-model="_emailTemplate.name"
-            placeholder="Add name"
-          />
-        </div>
-        <div>
-          <div class="mb-1.5 text-sm text-gray-600">Doctype</div>
-          <Select
-            variant="outline"
-            v-model="_emailTemplate.reference_doctype"
-            :options="['CRM Deal', 'CRM Lead']"
-            placeholder="Select Doctype"
-          />
         </div>
         <div>
           <div class="mb-1.5 text-sm text-gray-600">
@@ -182,11 +184,11 @@ watch(
     editMode.value = false
     errorMessage.value = ''
     nextTick(() => {
-        if (_emailTemplate.value.name) {
-            subjectRef.value.el.focus()
-        } else {
-            nameRef.value.el.focus()
-        }
+      if (_emailTemplate.value.name) {
+        subjectRef.value.el.focus()
+      } else {
+        nameRef.value.el.focus()
+      }
       _emailTemplate.value = { ...props.emailTemplate }
       if (_emailTemplate.value.name) {
         editMode.value = true

From b7d196aa75207b60ef2888506d83b766c5e80354 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 20:03:12 +0530
Subject: [PATCH 09/12] fix: show email templates list and apply them

---
 frontend/src/components/EmailEditor.vue       | 80 +++++++++++++-----
 .../Modals/EmailTemplateSelectorModal.vue     | 82 +++++++++++++++++++
 2 files changed, 140 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/Modals/EmailTemplateSelectorModal.vue

diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index b6ab748e..fdf56329 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -55,7 +55,9 @@
     </template>
     <template v-slot:editor="{ editor }">
       <EditorContent
-        :class="[editable && 'mx-10 max-h-[50vh] overflow-y-auto py-3 border-t']"
+        :class="[
+          editable && 'mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
+        ]"
         :editor="editor"
       />
     </template>
@@ -84,26 +86,32 @@
               class="-ml-1"
               :buttons="textEditorMenuButtons"
             />
-            <FileUploader
-              :upload-args="{
-                doctype: doctype,
-                docname: modelValue.name,
-                private: true,
-              }"
-              @success="(f) => attachments.push(f)"
-            >
-              <template #default="{ openFileSelector }">
-                <Button
-                  theme="gray"
-                  variant="ghost"
-                  @click="openFileSelector()"
-                >
-                  <template #icon>
-                    <AttachmentIcon class="h-4" />
-                  </template>
-                </Button>
-              </template>
-            </FileUploader>
+            <div class="flex gap-1">
+              <FileUploader
+                :upload-args="{
+                  doctype: doctype,
+                  docname: modelValue.name,
+                  private: true,
+                }"
+                @success="(f) => attachments.push(f)"
+              >
+                <template #default="{ openFileSelector }">
+                  <Button variant="ghost" @click="openFileSelector()">
+                    <template #icon>
+                      <AttachmentIcon class="h-4" />
+                    </template>
+                  </Button>
+                </template>
+              </FileUploader>
+              <Button
+                variant="ghost"
+                @click="showEmailTemplateSelectorModal = true"
+              >
+                <template #icon>
+                  <EmailIcon class="h-4" />
+                </template>
+              </Button>
+            </div>
           </div>
           <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
             <Button v-bind="discardButtonProps || {}" label="Discard" />
@@ -117,13 +125,20 @@
       </div>
     </template>
   </TextEditor>
+  <EmailTemplateSelectorModal
+    v-model="showEmailTemplateSelectorModal"
+    :doctype="doctype"
+    @apply="applyEmailTemplate"
+  />
 </template>
 
 <script setup>
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
 import MultiselectInput from '@/components/Controls/MultiselectInput.vue'
-import { TextEditorFixedMenu, TextEditor, FileUploader } from 'frappe-ui'
+import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelectorModal.vue'
+import { TextEditorFixedMenu, TextEditor, FileUploader, call } from 'frappe-ui'
 import { validateEmail } from '@/utils'
 import { EditorContent } from '@tiptap/vue-3'
 import { ref, computed, defineModel } from 'vue'
@@ -186,6 +201,27 @@ function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment)
 }
 
+const showEmailTemplateSelectorModal = ref(false)
+
+async function applyEmailTemplate(template) {
+  let data = await call(
+    'frappe.email.doctype.email_template.email_template.get_email_template',
+    {
+      template_name: template.name,
+      doc: modelValue.value,
+    }
+  )
+
+  if (template.subject) {
+    subject.value = data.subject
+  }
+
+  if (template.response) {
+    editor.value.commands.setContent(data.message)
+  }
+  showEmailTemplateSelectorModal.value = false
+}
+
 defineExpose({
   editor,
   subject,
diff --git a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
new file mode 100644
index 00000000..796b063a
--- /dev/null
+++ b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <Dialog v-model="show" :options="{ title: 'Email Templates', size: '4xl' }">
+    <template #body-content>
+      <FormControl
+        v-model="search"
+        type="text"
+        class="mb-2 w-full"
+        placeholder="Search"
+      />
+      <div class="grid grid-cols-3 gap-2">
+        <div
+          v-for="template in filteredTemplates"
+          :key="template.name"
+          class="cursor-pointer rounded-lg border p-2 hover:bg-gray-100"
+          @click="emit('apply', template)"
+        >
+          <div class="border-b pb-2 text-base font-semibold">
+            {{ template.name }}
+          </div>
+          <div v-if="template.subject" class="my-1.5 text-sm text-gray-600">
+            Subject: {{ template.subject }}
+          </div>
+          <TextEditor
+            v-if="template.response"
+            :content="template.response"
+            :editable="false"
+            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            class="mt-1.5 flex-1 overflow-hidden"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { TextEditor, createListResource } from 'frappe-ui'
+import { defineModel, ref, computed } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: '',
+  },
+})
+
+const show = defineModel()
+
+const emit = defineEmits(['apply'])
+
+const search = ref('')
+
+const templates = createListResource({
+  type: 'list',
+  doctype: 'Email Template',
+  cache: ['Email Templates', props.doctype],
+  fields: [
+    'name',
+    'enabled',
+    'reference_doctype',
+    'subject',
+    'response',
+    'modified',
+    'owner',
+  ],
+  filters: { enabled: 1, reference_doctype: props.doctype },
+  orderBy: 'modified desc',
+  pageLength: 99999,
+  auto: true,
+})
+
+const filteredTemplates = computed(() => {
+  return (
+    templates.data?.filter((template) => {
+      return (
+        template.name.toLowerCase().includes(search.value.toLowerCase()) ||
+        template.subject.toLowerCase().includes(search.value.toLowerCase())
+      )
+    }) ?? []
+  )
+})
+</script>

From f39b9b9666636bfa208290abdb2d9ec590f78fbb Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 20:10:52 +0530
Subject: [PATCH 10/12] chore: layout changes

---
 .../src/components/Modals/EmailTemplateSelectorModal.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
index 796b063a..e71331f2 100644
--- a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
@@ -11,13 +11,13 @@
         <div
           v-for="template in filteredTemplates"
           :key="template.name"
-          class="cursor-pointer rounded-lg border p-2 hover:bg-gray-100"
+          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-gray-100"
           @click="emit('apply', template)"
         >
           <div class="border-b pb-2 text-base font-semibold">
             {{ template.name }}
           </div>
-          <div v-if="template.subject" class="my-1.5 text-sm text-gray-600">
+          <div v-if="template.subject" class="text-sm text-gray-600">
             Subject: {{ template.subject }}
           </div>
           <TextEditor
@@ -25,7 +25,7 @@
             :content="template.response"
             :editable="false"
             editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
-            class="mt-1.5 flex-1 overflow-hidden"
+            class="flex-1 overflow-hidden"
           />
         </div>
       </div>

From 95fc17c4f5b98c8e94edee5c1c8c952ba6f5a522 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 20:32:42 +0530
Subject: [PATCH 11/12] refactor: use v-model instead of value

---
 frontend/src/components/CommentBox.vue        | 10 +++-------
 frontend/src/components/CommunicationArea.vue | 16 +++-------------
 2 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/CommentBox.vue b/frontend/src/components/CommentBox.vue
index 2f3ea28c..b74d82ec 100644
--- a/frontend/src/components/CommentBox.vue
+++ b/frontend/src/components/CommentBox.vue
@@ -2,8 +2,8 @@
   <TextEditor
     ref="textEditor"
     :editor-class="['prose-sm max-w-none', editable && 'min-h-[7rem]']"
-    :content="value"
-    @change="editable ? $emit('change', $event) : null"
+    :content="content"
+    @change="editable ? (content = $event) : null"
     :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
     :placeholder="placeholder"
     :editable="editable"
@@ -85,10 +85,6 @@ import { EditorContent } from '@tiptap/vue-3'
 import { ref, computed, defineModel } from 'vue'
 
 const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
   placeholder: {
     type: String,
     default: null,
@@ -115,9 +111,9 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['change'])
 const modelValue = defineModel()
 const attachments = defineModel('attachments')
+const content = defineModel('content')
 
 const { users: usersList } = usersStore()
 
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 464f9e17..7bd6b1e0 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -43,8 +43,7 @@
   >
     <EmailEditor
       ref="newEmailEditor"
-      :value="newEmail"
-      @change="onNewEmailChange"
+      v-model:content="newEmail"
       :submitButtonProps="{
         variant: 'solid',
         onClick: submitEmail,
@@ -67,8 +66,7 @@
   <div v-show="showCommentBox">
     <CommentBox
       ref="newCommentEditor"
-      :value="newComment"
-      @change="onNewCommentChange"
+      v-model:content="newComment"
       :submitButtonProps="{
         variant: 'solid',
         onClick: submitComment,
@@ -158,14 +156,6 @@ const emailEmpty = computed(() => {
   return !newEmail.value || newEmail.value === '<p></p>'
 })
 
-const onNewEmailChange = (value) => {
-  newEmail.value = value
-}
-
-const onNewCommentChange = (value) => {
-  newComment.value = value
-}
-
 async function sendMail() {
   let recipients = newEmailEditor.value.toEmails
   let subject = newEmailEditor.value.subject
@@ -187,7 +177,7 @@ async function sendMail() {
 }
 
 async function sendComment() {
-  await call("frappe.desk.form.utils.add_comment", {
+  await call('frappe.desk.form.utils.add_comment', {
     reference_doctype: props.doctype,
     reference_name: doc.value.data.name,
     content: newComment.value,

From 405258cff62b59f9034c07a26076c391f919661b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 20:33:29 +0530
Subject: [PATCH 12/12] fix: focus on search when email templates modal is
 opened

---
 frontend/src/components/EmailEditor.vue               | 11 ++++-------
 .../components/Modals/EmailTemplateSelectorModal.vue  | 10 +++++++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index fdf56329..4c917283 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -2,8 +2,8 @@
   <TextEditor
     ref="textEditor"
     :editor-class="['prose-sm max-w-none', editable && 'min-h-[7rem]']"
-    :content="value"
-    @change="editable ? $emit('change', $event) : null"
+    :content="content"
+    @change="editable ? (content = $event) : null"
     :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
     :placeholder="placeholder"
     :editable="editable"
@@ -144,10 +144,6 @@ import { EditorContent } from '@tiptap/vue-3'
 import { ref, computed, defineModel } from 'vue'
 
 const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
   placeholder: {
     type: String,
     default: null,
@@ -178,9 +174,9 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['change'])
 const modelValue = defineModel()
 const attachments = defineModel('attachments')
+const content = defineModel('content')
 
 const textEditor = ref(null)
 const cc = ref(false)
@@ -217,6 +213,7 @@ async function applyEmailTemplate(template) {
   }
 
   if (template.response) {
+    content.value = data.message
     editor.value.commands.setContent(data.message)
   }
   showEmailTemplateSelectorModal.value = false
diff --git a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
index e71331f2..616a45e8 100644
--- a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
@@ -1,13 +1,14 @@
 <template>
   <Dialog v-model="show" :options="{ title: 'Email Templates', size: '4xl' }">
     <template #body-content>
-      <FormControl
+      <TextInput
+        ref="searchInput"
         v-model="search"
         type="text"
         class="mb-2 w-full"
         placeholder="Search"
       />
-      <div class="grid grid-cols-3 gap-2">
+      <div class="grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto">
         <div
           v-for="template in filteredTemplates"
           :key="template.name"
@@ -35,7 +36,7 @@
 
 <script setup>
 import { TextEditor, createListResource } from 'frappe-ui'
-import { defineModel, ref, computed } from 'vue'
+import { defineModel, ref, computed, nextTick, watch } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -45,6 +46,7 @@ const props = defineProps({
 })
 
 const show = defineModel()
+const searchInput = ref('')
 
 const emit = defineEmits(['apply'])
 
@@ -79,4 +81,6 @@ const filteredTemplates = computed(() => {
     }) ?? []
   )
 })
+
+watch(show, (value) => value && nextTick(() => searchInput.value?.el?.focus()))
 </script>