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] 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>