changes

app/components/marketing/email/Email.vue

@@ -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