This commit is contained in:
Viet An
2026-06-10 13:46:11 +07:00
parent 7025fd8cd5
commit 22c284f1ef
15 changed files with 31 additions and 268 deletions

View File

@@ -183,7 +183,7 @@
></Modal>
</template>
<script setup lang="ts">
<script setup>
import { useNuxtApp } from "nuxt/app";
import { ref, computed, onMounted, watch, markRaw } from "vue";
import EmailForm1 from "./forms/EmailForm1.vue";
@@ -193,43 +193,12 @@ import MappingConfigurator from "~/components/marketing/email/MappingConfigurato
import JobConfigurator from "~/components/marketing/email/JobConfigurator.vue";
const nuxtApp = useNuxtApp();
const $snackbar = nuxtApp.$snackbar as (message?: string) => void;
const $getdata = nuxtApp.$getdata as (name: string) => Promise<DataTemplate[]>;
const $deleteapi = nuxtApp.$deleteapi as (name: string, id: any) => Promise<DataTemplate[]>;
const $getEditRights = nuxtApp.$getEditRights as () => boolean;
const showmodal = ref<any>();
const { $getdata, $snackbar, $deleteapi, $getEditRights } = useNuxtApp();
const showmodal = ref();
const activeTab = ref("content");
const defaultTemplate = "defaultTemplate";
// Types
interface FormContent {
receiver: string;
subject: string;
content: string; // This is the email body
imageUrl: string | null;
linkUrl: string[];
textLinkUrl: string[];
keyword: (string | { keyword: string; value: string })[];
html: string;
}
interface FormData {
name?: string;
id?: number;
template: string;
content: FormContent;
mappings: any[];
}
interface DataTemplate {
id: number;
name: string;
content: Record<string, any> | string;
mappings?: any[];
}
// Reactive state
const formData = ref<FormData>({
const formData = ref({
name: "",
id: undefined,
template: defaultTemplate,
@@ -246,14 +215,14 @@ const formData = ref<FormData>({
mappings: [],
});
const dataTemplate = ref<DataTemplate[] | null>(null);
const dataTemplateSelected = ref<DataTemplate | null>(null);
const originalLoadedTemplate = ref<DataTemplate | null>(null); // For diffing on save
const dataTemplate = ref(null);
const dataTemplateSelected = ref(null);
const originalLoadedTemplate = ref(null); // For diffing on save
const editMode = ref(false);
const formKey = ref(0);
const selectedValue = ref(defaultTemplate);
const loading = ref(false);
const selectedTemplateId = ref<number | null>(null);
const selectedTemplateId = ref(null);
const showDeleteDialog = ref(false);
// Computed properties
@@ -287,7 +256,7 @@ const currentTemplateComponent = computed(() => {
});
// Methods
const handleChangeData = (data: Partial<FormData>) => {
const handleChangeData = (data) => {
formData.value.name = data.name || formData.value.name;
formData.value.id = data.id || formData.value.id;
if (data.content) {
@@ -295,7 +264,7 @@ const handleChangeData = (data: Partial<FormData>) => {
}
};
const updateMappings = (newMappings: any[]) => {
const updateMappings = (newMappings) => {
formData.value.mappings = newMappings;
};
@@ -347,8 +316,8 @@ const handleTemplateChange = async () => {
let imageUrl = null;
let linkUrl = [""];
let textLinkUrl = [""];
let keyword: any[] = [{ keyword: "", value: "" }];
let mappings: any[] = [];
let keyword = [{ keyword: "", value: "" }];
let mappings = [];
if (typeof tplContent === "string") {
emailBody = tplContent;
@@ -419,12 +388,8 @@ const handleOpenModal = () => {
if (editMode.value && originalLoadedTemplate.value) {
// EDIT MODE: Calculate a patch of changed data
const patchPayload: {
id: number;
name?: string;
content?: Record<string, any>;
} = {
id: formData.value.id!,
const patchPayload = {
id: formData.value.id,
};
// 1. Check if name has changed

View File

@@ -234,31 +234,13 @@
</div>
</template>
<script setup lang="ts">
<script setup>
import { imageUrl } from "~/components/marketing/email/Email.utils";
import { computed } from "vue";
interface KeywordItem {
keyword: string;
value: string;
}
interface Template1Content {
subject?: string;
message?: string;
imageUrl?: string | null;
linkUrl?: string[];
textLinkUrl?: string[];
keyword?: KeywordItem[];
}
interface Props {
content: Template1Content;
previewMode?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
previewMode: false,
const props = defineProps({
content: Object,
previewMode: Boolean,
});
const hasValidLinks = computed(() => {
@@ -269,7 +251,7 @@ const hasValidImage = computed(() => {
return props.content.imageUrl && props.content.imageUrl.trim() !== "";
});
const replaceKeywords = (content: string): string => {
const replaceKeywords = (contentstring) => {
if (!content) return "";
let replacedContent = content;
@@ -293,7 +275,7 @@ const validLinks = computed(() => {
return props.content.linkUrl.filter((link) => link && link.trim() !== "");
});
const getLinkText = (index: number): string => {
const getLinkText = (index) => {
return props.content.textLinkUrl && props.content.textLinkUrl[index] && props.content.textLinkUrl[index].trim() !== ""
? props.content.textLinkUrl[index]
: `Link ${index + 1}`;
@@ -311,7 +293,7 @@ const styles = `
}
.content-padding, .company-padding {
padding: 0px 25px 20px;
padding: 0px 25px 20px;
}
.message-content p {
@@ -407,16 +389,16 @@ const styles = `
width: 100% !important;
max-width: 100% !important;
}
.greeting-padding{
padding: 20px 0 0 0 !important;
}
.content-padding {
padding: 20px 0px !important;
padding: 20px 0px !important;
}
.company-padding {
padding: 0px 0px 20px 0px !important;
padding: 0px 0px 20px 0px !important;
}
.company-info {
padding: 20px 10px !important;

View File

@@ -248,8 +248,6 @@
</template>
<script setup lang="ts">
import axios from "axios";
import { apiUrl } from "~/components/marketing/email/Email.utils";
import type dayjs from "dayjs";
interface EmailSent {
@@ -263,6 +261,7 @@ interface EmailSent {
}
const nuxtApp = useNuxtApp();
const $getdata = nuxtApp.$getdata as any;
const $snackbar = nuxtApp.$snackbar as (message?: string) => void;
const $dayjs = nuxtApp.$dayjs as (date?: string | Date) => ReturnType<typeof dayjs>;
@@ -311,10 +310,7 @@ const stripHtml = (html: string, maxLength: number = 1000): string => {
const getDataEmailsSent = async () => {
loading.value = true;
try {
const response = await axios.get(`${apiUrl}/Email_Sent/?sort=-id`);
if (response.status === 200) {
emailsSent.value = response.data.rows || response.data || [];
}
emailsSent.value = await $getdata("Email_Sent", { params: { sort: "-id" } });
} catch (error) {
console.error("Error fetching sent emails:", error);
$snackbar("Failed to load sent emails");

View File

@@ -198,15 +198,17 @@ const handleSave = async () => {
};
const handleCreateNew = async () => {
const postTemplateUrl = `${apiUrl}/Email_Template/`;
try {
loadingCreate.value = true;
const newTemplateData = {
...props.data,
name: templateName.value,
};
const response = await axios.post(postTemplateUrl, newTemplateData);
if (response.status === 201 || response.status === 200) {
const res = await $insertapi("Email_Template", {
data: newTemplateData,
notify: false,
});
if (res !== "error") {
$snackbar("Template created successfully");
if (props.onClose) props.onClose();
emit("close");