fix: removed email template page and related components

This commit is contained in:
Shariq Ansari 2025-06-25 15:15:34 +05:30
parent b15a8d9c8a
commit 7cee017e20
6 changed files with 0 additions and 668 deletions

View File

@ -147,7 +147,6 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
import EmailIcon from '@/components/Icons/EmailIcon.vue'
import StepsIcon from '@/components/Icons/StepsIcon.vue'
import Section from '@/components/Section.vue'
import Email2Icon from '@/components/Icons/Email2Icon.vue'
import PinIcon from '@/components/Icons/PinIcon.vue'
import UserDropdown from '@/components/UserDropdown.vue'
import SquareAsterisk from '@/components/Icons/SquareAsterisk.vue'
@ -233,11 +232,6 @@ const links = [
icon: PhoneIcon,
to: 'Call Logs',
},
{
label: 'Email Templates',
icon: Email2Icon,
to: 'Email Templates',
},
]
const allViews = computed(() => {

View File

@ -1,226 +0,0 @@
<template>
<ListView
:columns="columns"
:rows="rows"
:options="{
onRowClick: (row) => emit('showEmailTemplate', row.name),
selectable: options.selectable,
showTooltip: options.showTooltip,
resizeColumn: options.resizeColumn,
}"
row-key="name"
@update:selections="(selections) => emit('selectionsChanged', selections)"
>
<ListHeader
class="sm:mx-5 mx-3"
@columnWidthUpdated="emit('columnWidthUpdated')"
>
<ListHeaderItem
v-for="column in columns"
:key="column.key"
:item="column"
@columnWidthUpdated="emit('columnWidthUpdated', column)"
>
<Button
v-if="column.key == '_liked_by'"
variant="ghosted"
class="!h-4"
:class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
@click="() => emit('applyLikeFilter')"
>
<HeartIcon class="h-4 w-4" />
</Button>
</ListHeaderItem>
</ListHeader>
<ListRows
class="mx-3 sm:mx-5"
:rows="rows"
v-slot="{ idx, column, item }"
doctype="Email Template"
>
<ListRowItem :item="item" :align="column.align">
<!-- <template #prefix>
</template> -->
<template #default="{ label }">
<div
v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base"
@click="
(event) =>
emit('applyFilter', {
event,
idx,
column,
item,
firstColumn: columns[0],
})
"
>
<Tooltip :text="item.label">
<div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div v-else-if="column.key === 'status'" class="truncate text-base">
<Badge
:variant="'subtle'"
:theme="item.color"
size="md"
:label="item.label"
@click="
(event) =>
emit('applyFilter', {
event,
idx,
column,
item,
firstColumn: columns[0],
})
"
/>
</div>
<div v-else-if="column.type === 'Check'">
<FormControl
type="checkbox"
:modelValue="item"
:disabled="true"
class="text-ink-gray-9"
/>
</div>
<div v-else-if="column.key === '_liked_by'">
<Button
v-if="column.key == '_liked_by'"
variant="ghosted"
:class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
@click.stop.prevent="
() => emit('likeDoc', { name: row.name, liked: isLiked(item) })
"
>
<HeartIcon class="h-4 w-4" />
</Button>
</div>
<div
v-else
class="truncate text-base"
@click="
(event) =>
emit('applyFilter', {
event,
idx,
column,
item,
firstColumn: columns[0],
})
"
>
{{ label }}
</div>
</template>
</ListRowItem>
</ListRows>
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Dropdown
:options="listBulkActionsRef.bulkActions(selections, unselectAll)"
>
<Button icon="more-horizontal" variant="ghost" />
</Dropdown>
</template>
</ListSelectBanner>
</ListView>
<ListFooter
class="border-t sm:px-5 px-3 py-2"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,
totalCount: options.totalCount,
}"
@loadMore="emit('loadMore')"
/>
<ListBulkActions
ref="listBulkActionsRef"
v-model="list"
doctype="Email Template"
:options="{
hideAssign: true,
}"
/>
</template>
<script setup>
import HeartIcon from '@/components/Icons/HeartIcon.vue'
import ListBulkActions from '@/components/ListBulkActions.vue'
import ListRows from '@/components/ListViews/ListRows.vue'
import {
ListView,
ListHeader,
ListHeaderItem,
ListSelectBanner,
ListRowItem,
ListFooter,
Dropdown,
Tooltip,
} from 'frappe-ui'
import { sessionStore } from '@/stores/session'
import { ref, computed, watch } from 'vue'
const props = defineProps({
rows: {
type: Array,
required: true,
},
columns: {
type: Array,
required: true,
},
options: {
type: Object,
default: () => ({
selectable: true,
showTooltip: true,
resizeColumn: false,
totalCount: 0,
rowCount: 0,
}),
},
})
const emit = defineEmits([
'loadMore',
'updatePageCount',
'showEmailTemplate',
'columnWidthUpdated',
'applyFilter',
'applyLikeFilter',
'likeDoc',
'selectionsChanged',
])
const pageLengthCount = defineModel()
const list = defineModel('list')
const isLikeFilterApplied = computed(() => {
return list.value.params?.filters?._liked_by ? true : false
})
const { user } = sessionStore()
function isLiked(item) {
if (item) {
let likedByMe = JSON.parse(item)
return likedByMe.includes(user)
}
}
watch(pageLengthCount, (val, old_value) => {
if (val === old_value) return
emit('updatePageCount', val)
})
const listBulkActionsRef = ref(null)
defineExpose({
customListActions: computed(
() => listBulkActionsRef.value?.customListActions,
),
})
</script>

View File

@ -1,239 +0,0 @@
<template>
<Dialog
v-model="show"
:options="{
title: editMode ? __(emailTemplate.name) : __('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 class="flex sm:flex-row flex-col gap-4">
<div class="flex-1">
<FormControl
ref="nameRef"
v-model="_emailTemplate.name"
:placeholder="__('Payment Reminder')"
:label="__('Name')"
:required="true"
/>
</div>
<div class="flex-1">
<FormControl
type="select"
v-model="_emailTemplate.reference_doctype"
:label="__('Doctype')"
:options="['CRM Deal', 'CRM Lead']"
:placeholder="__('CRM Deal')"
/>
</div>
</div>
<div>
<FormControl
ref="subjectRef"
v-model="_emailTemplate.subject"
:label="__('Subject')"
:placeholder="__('Payment Reminder from Frappé - (#{{ name }})')"
:required="true"
/>
</div>
<div>
<FormControl
type="select"
v-model="_emailTemplate.content_type"
:label="__('Content Type')"
default="Rich Text"
:options="['Rich Text', 'HTML']"
:placeholder="__('Rich Text')"
/>
</div>
<div>
<FormControl
v-if="_emailTemplate.content_type === 'HTML'"
type="textarea"
:label="__('Content')"
:required="true"
ref="content"
:rows="10"
v-model="_emailTemplate.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-xs 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="_emailTemplate.response"
@change="(val) => (_emailTemplate.response = val)"
:placeholder="
__(
'Dear {{ lead_name }}, \n\nThis is a reminder for the payment of {{ grand_total }}. \n\nThanks, \nFrappé',
)
"
/>
</div>
</div>
<div>
<Checkbox v-model="_emailTemplate.enabled" :label="__('Enabled')" />
</div>
<ErrorMessage :message="__(errorMessage)" />
</div>
</template>
</Dialog>
</template>
<script setup>
import { capture } from '@/telemetry'
import { Checkbox, TextEditor, call } from 'frappe-ui'
import { ref, 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 subjectRef = ref(null)
const nameRef = ref(null)
const editMode = ref(false)
let _emailTemplate = ref({
content_type: 'Rich Text',
})
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,
},
})
if (doc.name) {
capture('email_template_created', { doctype: doc.reference_doctype })
handleEmailTemplateUpdate(doc)
}
}
function handleEmailTemplateUpdate(doc) {
emailTemplates.value?.reload()
show.value = false
}
function validate() {
_emailTemplate.value.use_html = Boolean(
_emailTemplate.value.content_type == 'HTML',
)
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.use_html &&
(!_emailTemplate.value.response ||
_emailTemplate.value.response === '<p></p>')
) {
errorMessage.value = 'Content is required'
return false
}
if (_emailTemplate.value.use_html && !_emailTemplate.value.response_html) {
errorMessage.value = 'Content is required'
return false
}
return true
}
watch(
() => show.value,
(value) => {
if (!value) return
editMode.value = false
errorMessage.value = ''
nextTick(() => {
if (_emailTemplate.value.name) {
subjectRef.value?.el?.focus()
} else {
nameRef.value?.el?.focus()
}
_emailTemplate.value = { ...props.emailTemplate }
_emailTemplate.value.content_type = _emailTemplate.value.use_html
? 'HTML'
: 'Rich Text'
if (_emailTemplate.value.name) {
editMode.value = true
}
})
},
)
</script>

View File

@ -1,6 +0,0 @@
<template>
<div>
<h1>Email Templates</h1>
<p>Here is a list of email templates</p>
</div>
</template>

View File

@ -1,179 +0,0 @@
<template>
<LayoutHeader>
<template #left-header>
<ViewBreadcrumbs v-model="viewControls" routeName="Email Templates" />
</template>
<template #right-header>
<CustomActions
v-if="emailTemplatesListView?.customListActions"
:actions="emailTemplatesListView.customListActions"
/>
<Button
variant="solid"
:label="__('Create')"
@click="() => showEmailTemplate()"
>
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
</Button>
</template>
</LayoutHeader>
<ViewControls
ref="viewControls"
v-model="emailTemplates"
v-model:loadMore="loadMore"
v-model:resizeColumn="triggerResize"
v-model:updatedPageCount="updatedPageCount"
doctype="Email Template"
/>
<EmailTemplatesListView
ref="emailTemplatesListView"
v-if="emailTemplates.data && rows.length"
v-model="emailTemplates.data.page_length_count"
v-model:list="emailTemplates"
:rows="rows"
:columns="emailTemplates.data.columns"
:options="{
showTooltip: false,
resizeColumn: true,
rowCount: emailTemplates.data.row_count,
totalCount: emailTemplates.data.total_count,
}"
@loadMore="() => loadMore++"
@columnWidthUpdated="() => triggerResize++"
@updatePageCount="(count) => (updatedPageCount = count)"
@showEmailTemplate="showEmailTemplate"
@applyFilter="(data) => viewControls.applyFilter(data)"
@applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
@likeDoc="(data) => viewControls.likeDoc(data)"
@selectionsChanged="
(selections) => viewControls.updateSelections(selections)
"
/>
<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-ink-gray-4"
>
<Email2Icon class="h-10 w-10" />
<span>{{ __('No {0} Found', [__('Email Templates')]) }}</span>
<Button :label="__('Create')" @click="() => showEmailTemplate()">
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
</Button>
</div>
</div>
<EmailTemplateModal
v-model="showEmailTemplateModal"
v-model:reloadEmailTemplates="emailTemplates"
:emailTemplate="emailTemplate"
/>
</template>
<script setup>
import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
import CustomActions from '@/components/CustomActions.vue'
import Email2Icon from '@/components/Icons/Email2Icon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import ViewControls from '@/components/ViewControls.vue'
import EmailTemplatesListView from '@/components/ListViews/EmailTemplatesListView.vue'
import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
import { getMeta } from '@/stores/meta'
import { formatDate, timeAgo } from '@/utils'
import { computed, ref } from 'vue'
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
getMeta('Email Template')
const emailTemplatesListView = ref(null)
// emailTemplates data is loaded in the ViewControls component
const emailTemplates = ref({})
const loadMore = ref(1)
const triggerResize = ref(1)
const updatedPageCount = ref(20)
const viewControls = ref(null)
const rows = computed(() => {
if (
!emailTemplates.value?.data?.data ||
!['list', 'group_by'].includes(emailTemplates.value.data.view_type)
)
return []
return emailTemplates.value?.data.data.map((emailTemplate) => {
let _rows = {}
emailTemplates.value?.data.rows.forEach((row) => {
_rows[row] = emailTemplate[row]
let fieldType = emailTemplates.value?.data.columns?.find(
(col) => (col.key || col.value) == row,
)?.type
if (
fieldType &&
['Date', 'Datetime'].includes(fieldType) &&
!['modified', 'creation'].includes(row)
) {
_rows[row] = formatDate(
emailTemplate[row],
'',
true,
fieldType == 'Datetime',
)
}
if (fieldType && fieldType == 'Currency') {
_rows[row] = getFormattedCurrency(row, emailTemplate)
}
if (fieldType && fieldType == 'Float') {
_rows[row] = getFormattedFloat(row, emailTemplate)
}
if (fieldType && fieldType == 'Percent') {
_rows[row] = getFormattedPercent(row, emailTemplate)
}
if (['modified', 'creation'].includes(row)) {
_rows[row] = {
label: formatDate(emailTemplate[row]),
timeAgo: timeAgo(emailTemplate[row]),
}
}
})
return _rows
})
})
const showEmailTemplateModal = ref(false)
const emailTemplate = ref({})
function showEmailTemplate(name) {
if (!name) {
emailTemplate.value = {
subject: '',
response: '',
response_html: '',
name: '',
enabled: 1,
use_html: 0,
owner: '',
reference_doctype: 'CRM Deal',
}
} else {
let et = rows.value?.find((row) => row.name === name)
emailTemplate.value = {
subject: et.subject,
response: et.response,
response_html: et.response_html,
name: et.name,
enabled: et.enabled,
use_html: et.use_html,
owner: et.owner,
reference_doctype: et.reference_doctype,
}
}
showEmailTemplateModal.value = true
}
</script>

View File

@ -79,18 +79,6 @@ const routes = [
name: 'Call Logs',
component: () => import('@/pages/CallLogs.vue'),
},
{
alias: '/email-templates',
path: '/email-templates/view/:viewType?',
name: 'Email Templates',
component: () => import('@/pages/EmailTemplates.vue'),
},
{
path: '/email-templates/:emailTemplateId',
name: 'Email Template',
component: () => import('@/pages/EmailTemplate.vue'),
props: true,
},
{
path: '/welcome',
name: 'Welcome',