fix: show email templates list and apply them

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,

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>