fix: Edit email template
This commit is contained in:
Shariq Ansari
parent
e4f728d809
commit
dd3d297dab
@ -1,3 +1,255 @@
|
||||
<template>
|
||||
Edit
|
||||
</template>
|
||||
<div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between">
|
||||
<div class="flex gap-1 w-9/12">
|
||||
<div
|
||||
class="flex text-ink-gray-7 gap-2 cursor-pointer"
|
||||
:tabindex="0"
|
||||
@keydown.enter="() => emit('updateStep', 'template-list')"
|
||||
@click="() => emit('updateStep', 'template-list')"
|
||||
>
|
||||
<FeatherIcon name="chevron-left" class="size-5" />
|
||||
<span class="text-xl font-semibold">{{ __(template.name) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex item-center space-x-2 w-3/12 justify-end">
|
||||
<Button
|
||||
:label="__('Update')"
|
||||
icon-left="plus"
|
||||
variant="solid"
|
||||
:disabled="!dirty"
|
||||
:loading="renameDoc.loading || templates.setValue.loading"
|
||||
@click="updateTemplate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fields -->
|
||||
<div class="flex flex-1 flex-col gap-4 overflow-y-auto">
|
||||
<div
|
||||
class="flex justify-between items-center cursor-pointer border-b py-3"
|
||||
@click="() => (template.enabled = !template.enabled)"
|
||||
>
|
||||
<div class="text-base text-ink-gray-7">{{ __('Enabled') }}</div>
|
||||
<Switch v-model="template.enabled" @click.stop />
|
||||
</div>
|
||||
<div class="flex sm:flex-row flex-col gap-4">
|
||||
<div class="flex-1">
|
||||
<FormControl
|
||||
size="md"
|
||||
v-model="template.name"
|
||||
:placeholder="__('Payment Reminder')"
|
||||
:label="__('Name')"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<FormControl
|
||||
type="select"
|
||||
size="md"
|
||||
v-model="template.reference_doctype"
|
||||
:label="__('For')"
|
||||
:options="[
|
||||
{
|
||||
label: __('Deal'),
|
||||
value: 'CRM Deal',
|
||||
},
|
||||
{
|
||||
label: __('Lead'),
|
||||
value: 'CRM Lead',
|
||||
},
|
||||
]"
|
||||
:placeholder="__('Deal')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FormControl
|
||||
ref="subjectRef"
|
||||
size="md"
|
||||
v-model="template.subject"
|
||||
:label="__('Subject')"
|
||||
:placeholder="__('Payment Reminder from Frappé - (#{{ name }})')"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="border-t pt-4">
|
||||
<FormControl
|
||||
type="select"
|
||||
size="md"
|
||||
v-model="template.content_type"
|
||||
:label="__('Content Type')"
|
||||
default="Rich Text"
|
||||
:options="['Rich Text', 'HTML']"
|
||||
:placeholder="__('Rich Text')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FormControl
|
||||
v-if="template.content_type === 'HTML'"
|
||||
size="md"
|
||||
type="textarea"
|
||||
:label="__('Content')"
|
||||
:required="true"
|
||||
ref="content"
|
||||
:rows="10"
|
||||
v-model="template.response_html"
|
||||
:placeholder="
|
||||
__(
|
||||
'<p>Dear {{ lead_name }},</p>\n\n<p>This is a reminder for the payment of {{ grand_total }}.</p>\n\n<p>Thanks,</p>\n<p>Frappé</p>',
|
||||
)
|
||||
"
|
||||
/>
|
||||
<div v-else>
|
||||
<div class="mb-1.5 text-base text-ink-gray-5">
|
||||
{{ __('Content') }}
|
||||
<span class="text-ink-red-3">*</span>
|
||||
</div>
|
||||
<TextEditor
|
||||
ref="content"
|
||||
editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
|
||||
:bubbleMenu="true"
|
||||
:content="template.response"
|
||||
@change="(val) => (template.response = val)"
|
||||
:placeholder="
|
||||
__(
|
||||
'Dear {{ lead_name }}, \n\nThis is a reminder for the payment of {{ grand_total }}. \n\nThanks, \nFrappé',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="errorMessage">
|
||||
<ErrorMessage :message="__(errorMessage)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
TextEditor,
|
||||
FormControl,
|
||||
Switch,
|
||||
toast,
|
||||
call,
|
||||
createResource,
|
||||
} from 'frappe-ui'
|
||||
import { computed, inject, onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
templateData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['updateStep'])
|
||||
const errorMessage = ref('')
|
||||
|
||||
const templates = inject('templates')
|
||||
const template = ref({})
|
||||
|
||||
const updateTemplate = async () => {
|
||||
errorMessage.value = ''
|
||||
if (!template.value.name) {
|
||||
errorMessage.value = __('Name is required')
|
||||
return
|
||||
}
|
||||
if (!template.value.subject) {
|
||||
errorMessage.value = __('Subject is required')
|
||||
return
|
||||
}
|
||||
if (template.value.content_type === 'Rich Text' && !template.value.response) {
|
||||
errorMessage.value = __('Content is required')
|
||||
return
|
||||
}
|
||||
if (template.value.content_type === 'HTML' && !template.value.response_html) {
|
||||
errorMessage.value = __('Content is required')
|
||||
return
|
||||
}
|
||||
|
||||
template.value.use_html = template.value.content_type === 'HTML'
|
||||
|
||||
const old = {
|
||||
...props.templateData,
|
||||
use_html: Boolean(props.templateData.use_html),
|
||||
}
|
||||
const newEmailTemplate = {
|
||||
...template.value,
|
||||
use_html: Boolean(template.value.use_html),
|
||||
}
|
||||
|
||||
delete newEmailTemplate.content_type
|
||||
|
||||
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) return
|
||||
|
||||
let name = props.templateData.name
|
||||
|
||||
if (nameChanged) {
|
||||
name = await renameDoc.fetch()
|
||||
if (!otherFieldChanged) {
|
||||
emit('updateStep', 'template-list')
|
||||
}
|
||||
}
|
||||
if (otherFieldChanged) {
|
||||
templates.setValue.submit(
|
||||
{ ...values, name },
|
||||
{
|
||||
onSuccess: () => {
|
||||
emit('updateStep', 'template-list')
|
||||
toast.success(__('Template updated successfully'))
|
||||
},
|
||||
onError: (error) => {
|
||||
errorMessage.value =
|
||||
error.messages[0] || __('Failed to update template')
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const dirty = computed(() => {
|
||||
return (
|
||||
template.value.name !== props.templateData.name ||
|
||||
template.value.reference_doctype !== props.templateData.reference_doctype ||
|
||||
template.value.subject !== props.templateData.subject ||
|
||||
template.value.response_html !== props.templateData.response_html ||
|
||||
template.value.response !== props.templateData.response ||
|
||||
template.value.use_html !== props.templateData.use_html ||
|
||||
Boolean(template.value.enabled) !== Boolean(props.templateData.enabled)
|
||||
)
|
||||
})
|
||||
|
||||
const renameDoc = createResource({
|
||||
url: 'frappe.client.rename_doc',
|
||||
method: 'POST',
|
||||
makeParams() {
|
||||
return {
|
||||
doctype: 'Email Template',
|
||||
old_name: props.templateData.name,
|
||||
new_name: template.value.name,
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
templates.reload()
|
||||
toast.success(__('Template renamed successfully'))
|
||||
},
|
||||
onError: (error) => {
|
||||
errorMessage.value = error.messages[0] || __('Failed to rename template')
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
template.value = { ...props.templateData }
|
||||
template.value.content_type = template.value.use_html ? 'HTML' : 'Rich Text'
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
/>
|
||||
<EditEmailTemplate
|
||||
v-else-if="step === 'edit-template'"
|
||||
:data="templateData"
|
||||
:templateData="template"
|
||||
@updateStep="updateStep"
|
||||
/>
|
||||
</template>
|
||||
@ -19,7 +19,7 @@ import { createListResource } from 'frappe-ui'
|
||||
import { provide, ref } from 'vue'
|
||||
|
||||
const step = ref('template-list')
|
||||
const templateData = ref(null)
|
||||
const template = ref(null)
|
||||
|
||||
const templates = createListResource({
|
||||
type: 'list',
|
||||
@ -46,6 +46,6 @@ provide('templates', templates)
|
||||
|
||||
function updateStep(newStep, data) {
|
||||
step.value = newStep
|
||||
templateData.value = data
|
||||
template.value = data
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -143,6 +143,7 @@ import {
|
||||
Switch,
|
||||
Dropdown,
|
||||
FeatherIcon,
|
||||
toast,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed, inject, h } from 'vue'
|
||||
|
||||
@ -172,10 +173,26 @@ const templatesList = computed(() => {
|
||||
})
|
||||
|
||||
function toggleEmailTemplate(template) {
|
||||
templates.setValue.submit({
|
||||
name: template.name,
|
||||
enabled: template.enabled ? 1 : 0,
|
||||
})
|
||||
templates.setValue.submit(
|
||||
{
|
||||
name: template.name,
|
||||
enabled: template.enabled ? 1 : 0,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.success(
|
||||
template.enabled
|
||||
? __('Template enabled successfully')
|
||||
: __('Template disabled successfully'),
|
||||
)
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error.messages[0] || __('Failed to update template'))
|
||||
// Revert the change if there was an error
|
||||
template.enabled = !template.enabled
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
function deleteTemplate(template) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user