Merge pull request #1528 from pateljannat/email-template-list
feat: email template in settings
This commit is contained in:
Jannat Patel
192
frontend/src/components/Modals/EmailTemplateModal.vue
Normal file
192
frontend/src/components/Modals/EmailTemplateModal.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title:
|
||||
templateID == 'new'
|
||||
? __('New Email Template')
|
||||
: __('Edit Email Template'),
|
||||
size: 'lg',
|
||||
actions: [
|
||||
{
|
||||
label: __('Save'),
|
||||
variant: 'solid',
|
||||
onClick: ({ close }) => {
|
||||
saveTemplate(close)
|
||||
},
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="space-y-4">
|
||||
<FormControl
|
||||
:label="__('Name')"
|
||||
v-model="template.name"
|
||||
type="text"
|
||||
:required="true"
|
||||
:placeholder="__('Batch Enrollment Confirmation')"
|
||||
/>
|
||||
<FormControl
|
||||
:label="__('Subject')"
|
||||
v-model="template.subject"
|
||||
type="text"
|
||||
:required="true"
|
||||
:placeholder="__('Your enrollment in {{ batch_name }} is confirmed')"
|
||||
/>
|
||||
<FormControl
|
||||
:label="__('Use HTML')"
|
||||
v-model="template.use_html"
|
||||
type="checkbox"
|
||||
/>
|
||||
<FormControl
|
||||
v-if="template.use_html"
|
||||
:label="__('Content')"
|
||||
v-model="template.response_html"
|
||||
type="textarea"
|
||||
:required="true"
|
||||
:rows="10"
|
||||
:placeholder="
|
||||
__(
|
||||
'<p>Dear {{ member_name }},</p>\n\n<p>You have been enrolled in our upcoming batch {{ batch_name }}.</p>\n\n<p>Thanks,</p>\n<p>Frappe Learning</p>'
|
||||
)
|
||||
"
|
||||
/>
|
||||
<div v-else>
|
||||
<div class="text-xs text-ink-gray-5 mb-2">
|
||||
{{ __('Content') }}
|
||||
<span class="text-ink-red-3">*</span>
|
||||
</div>
|
||||
<TextEditor
|
||||
:content="template.response"
|
||||
@change="(val) => (template.response = val)"
|
||||
:editable="true"
|
||||
:fixedMenu="true"
|
||||
:placeholder="
|
||||
__(
|
||||
'Dear {{ member_name }},\n\nYou have been enrolled in our upcoming batch {{ batch_name }}.\n\nThanks,\nFrappe Learning'
|
||||
)
|
||||
"
|
||||
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { call, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
|
||||
import { reactive, watch } from 'vue'
|
||||
import { cleanError } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
templateID: {
|
||||
type: String,
|
||||
default: 'new',
|
||||
},
|
||||
})
|
||||
|
||||
const show = defineModel()
|
||||
const emailTemplates = defineModel('emailTemplates')
|
||||
const template = reactive({
|
||||
name: '',
|
||||
subject: '',
|
||||
use_html: false,
|
||||
response: '',
|
||||
response_html: '',
|
||||
})
|
||||
|
||||
const saveTemplate = (close) => {
|
||||
if (props.templateID == 'new') {
|
||||
createNewTemplate(close)
|
||||
} else {
|
||||
updateTemplate(close)
|
||||
}
|
||||
}
|
||||
|
||||
const createNewTemplate = (close) => {
|
||||
emailTemplates.value.insert.submit(
|
||||
{
|
||||
__newname: template.name,
|
||||
...template,
|
||||
},
|
||||
{
|
||||
onSuccess() {
|
||||
emailTemplates.value.reload()
|
||||
refreshForm(close)
|
||||
toast.success(__('Email Template created successfully'))
|
||||
},
|
||||
onError(err) {
|
||||
refreshForm(close)
|
||||
toast.error(
|
||||
cleanError(err.messages[0]) || __('Error creating email template')
|
||||
)
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const updateTemplate = async (close) => {
|
||||
if (props.templateID != template.name) {
|
||||
await renameDoc()
|
||||
}
|
||||
setValue(close)
|
||||
}
|
||||
|
||||
const setValue = (close) => {
|
||||
emailTemplates.value.setValue.submit(
|
||||
{
|
||||
...template,
|
||||
name: template.name,
|
||||
},
|
||||
{
|
||||
onSuccess() {
|
||||
emailTemplates.value.reload()
|
||||
refreshForm(close)
|
||||
toast.success(__('Email Template updated successfully'))
|
||||
},
|
||||
onError(err) {
|
||||
refreshForm(close)
|
||||
toast.error(
|
||||
cleanError(err.messages[0]) || __('Error updating email template')
|
||||
)
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const renameDoc = async () => {
|
||||
await call('frappe.client.rename_doc', {
|
||||
doctype: 'Email Template',
|
||||
old_name: props.templateID,
|
||||
new_name: template.name,
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.templateID,
|
||||
(val) => {
|
||||
if (val !== 'new') {
|
||||
emailTemplates.value?.data.forEach((row) => {
|
||||
if (row.name === val) {
|
||||
template.name = row.name
|
||||
template.subject = row.subject
|
||||
template.use_html = row.use_html
|
||||
template.response = row.response
|
||||
template.response_html = row.response_html
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{ flush: 'post' }
|
||||
)
|
||||
|
||||
const refreshForm = (close) => {
|
||||
close()
|
||||
template.name = ''
|
||||
template.subject = ''
|
||||
template.use_html = false
|
||||
template.response = ''
|
||||
template.response_html = ''
|
||||
}
|
||||
</script>
|
||||
@@ -51,6 +51,11 @@
|
||||
:label="activeTab.label"
|
||||
:description="activeTab.description"
|
||||
/>
|
||||
<EmailTemplates
|
||||
v-else-if="activeTab.label === 'Email Templates'"
|
||||
:label="activeTab.label"
|
||||
:description="activeTab.description"
|
||||
/>
|
||||
<PaymentSettings
|
||||
v-else-if="activeTab.label === 'Payment Gateway'"
|
||||
:label="activeTab.label"
|
||||
@@ -86,6 +91,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
|
||||
import Members from '@/components/Members.vue'
|
||||
import Evaluators from '@/components/Evaluators.vue'
|
||||
import Categories from '@/components/Categories.vue'
|
||||
import EmailTemplates from '@/components/EmailTemplates.vue'
|
||||
import BrandSettings from '@/components/BrandSettings.vue'
|
||||
import PaymentSettings from '@/components/PaymentSettings.vue'
|
||||
|
||||
@@ -122,7 +128,7 @@ const tabsStructure = computed(() => {
|
||||
label: 'Enable Learning Paths',
|
||||
name: 'enable_learning_paths',
|
||||
description:
|
||||
'This will enforce students to go through programs assigned to them in the correct order.',
|
||||
'This will ensure students follow the assigned programs in order.',
|
||||
type: 'checkbox',
|
||||
},
|
||||
{
|
||||
@@ -139,11 +145,26 @@ const tabsStructure = computed(() => {
|
||||
'If enabled, it sends google calendar invite to the student for evaluations.',
|
||||
type: 'checkbox',
|
||||
},
|
||||
{
|
||||
type: 'Column Break',
|
||||
},
|
||||
{
|
||||
label: 'Batch Confirmation Template',
|
||||
name: 'batch_confirmation_template',
|
||||
doctype: 'Email Template',
|
||||
type: 'Link',
|
||||
},
|
||||
{
|
||||
label: 'Certification Template',
|
||||
name: 'certification_template',
|
||||
doctype: 'Email Template',
|
||||
type: 'Link',
|
||||
},
|
||||
{
|
||||
label: 'Unsplash Access Key',
|
||||
name: 'unsplash_access_key',
|
||||
description:
|
||||
'Optional. If this is set, students can pick a cover image from the unsplash library for their profile page. https://unsplash.com/documentation#getting-started.',
|
||||
'Allows users to pick a profile cover image from Unsplash. https://unsplash.com/documentation#getting-started.',
|
||||
type: 'password',
|
||||
},
|
||||
],
|
||||
@@ -160,6 +181,12 @@ const tabsStructure = computed(() => {
|
||||
description:
|
||||
'Configure the payment gateway and other payment related settings',
|
||||
fields: [
|
||||
{
|
||||
label: 'Default Currency',
|
||||
name: 'default_currency',
|
||||
type: 'Link',
|
||||
doctype: 'Currency',
|
||||
},
|
||||
{
|
||||
label: 'Payment Gateway',
|
||||
name: 'payment_gateway',
|
||||
@@ -167,10 +194,7 @@ const tabsStructure = computed(() => {
|
||||
doctype: 'Payment Gateway',
|
||||
},
|
||||
{
|
||||
label: 'Default Currency',
|
||||
name: 'default_currency',
|
||||
type: 'Link',
|
||||
doctype: 'Currency',
|
||||
type: 'Column Break',
|
||||
},
|
||||
{
|
||||
label: 'Apply GST for India',
|
||||
@@ -210,6 +234,11 @@ const tabsStructure = computed(() => {
|
||||
description: 'Double click to edit the category',
|
||||
icon: 'Network',
|
||||
},
|
||||
{
|
||||
label: 'Email Templates',
|
||||
description: 'Manage the email templates for your learning system',
|
||||
icon: 'MailPlus',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -235,28 +264,6 @@ const tabsStructure = computed(() => {
|
||||
name: 'favicon',
|
||||
type: 'Upload',
|
||||
},
|
||||
{
|
||||
label: 'Footer Logo',
|
||||
name: 'footer_logo',
|
||||
type: 'Upload',
|
||||
},
|
||||
{
|
||||
label: 'Address',
|
||||
name: 'address',
|
||||
type: 'textarea',
|
||||
rows: 2,
|
||||
},
|
||||
{
|
||||
label: 'Footer "Powered By"',
|
||||
name: 'footer_powered',
|
||||
type: 'textarea',
|
||||
rows: 4,
|
||||
},
|
||||
{
|
||||
label: 'Copyright',
|
||||
name: 'copyright',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -299,24 +306,6 @@ const tabsStructure = computed(() => {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Email Templates',
|
||||
icon: 'MailPlus',
|
||||
fields: [
|
||||
{
|
||||
label: 'Batch Confirmation Template',
|
||||
name: 'batch_confirmation_template',
|
||||
doctype: 'Email Template',
|
||||
type: 'Link',
|
||||
},
|
||||
{
|
||||
label: 'Certification Template',
|
||||
name: 'certification_template',
|
||||
doctype: 'Email Template',
|
||||
type: 'Link',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Signup',
|
||||
icon: 'LogIn',
|
||||
|
||||
Reference in New Issue
Block a user