changes
This commit is contained in:
Viet An
@@ -3,141 +3,114 @@
|
||||
class="container is-fluid px-0"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<!-- 95px is height of nav + breadcrumb -->
|
||||
<div
|
||||
class="columns m-0"
|
||||
style="height: calc(100vh - 95px)"
|
||||
>
|
||||
<!-- Form Section -->
|
||||
<div
|
||||
class="column is-5 pb-5"
|
||||
style="overflow-y: scroll; border-right: 1px solid #dbdbdb"
|
||||
>
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Chọn mẫu</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="level mb-4 mt-2 pr-4">
|
||||
<div class="fixed-grid has-12-cols">
|
||||
<div class="grid">
|
||||
<!-- Form Section -->
|
||||
<div
|
||||
class="cell is-col-span-5"
|
||||
style="overflow-y: scroll"
|
||||
>
|
||||
<label class="label">Chọn mẫu</label>
|
||||
<!-- Template Selector -->
|
||||
|
||||
<div
|
||||
class="level-left"
|
||||
style="flex: 1"
|
||||
>
|
||||
<div
|
||||
class="level-item"
|
||||
style="flex: 1"
|
||||
>
|
||||
<div
|
||||
class="field"
|
||||
style="width: 100%"
|
||||
<div class="field has-addons">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<span class="icon is-small is-left">
|
||||
<Icon
|
||||
name="tabler:template"
|
||||
:size="20"
|
||||
/>
|
||||
</span>
|
||||
<div class="select is-fullwidth">
|
||||
<select
|
||||
v-model="selectedValue"
|
||||
@change="handleTemplateChange"
|
||||
>
|
||||
<option value="defaultTemplate">Mặc định</option>
|
||||
<option
|
||||
v-for="template in dataTemplate"
|
||||
:key="template.id"
|
||||
:value="template.name"
|
||||
>
|
||||
{{ template.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
v-if="selectedTemplateId"
|
||||
class="button is-danger is-light"
|
||||
@click="showDeleteDialog = true"
|
||||
:disabled="loading"
|
||||
>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select
|
||||
v-model="selectedValue"
|
||||
@change="handleTemplateChange"
|
||||
>
|
||||
<option value="defaultTemplate">Mặc định</option>
|
||||
<option
|
||||
v-for="template in dataTemplate"
|
||||
:key="template.id"
|
||||
:value="template.name"
|
||||
>
|
||||
{{ template.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:delete-outline-rounded"
|
||||
:size="20"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-primary is-light"
|
||||
@click="handleOpenModal"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:save-outline-rounded"
|
||||
:size="20"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div
|
||||
v-if="$getEditRights()"
|
||||
class="level-right"
|
||||
>
|
||||
<div class="level-item">
|
||||
<div class="buttons">
|
||||
<button
|
||||
class="button is-light"
|
||||
@click="handleOpenModal"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:save-outline-rounded"
|
||||
:size="18"
|
||||
class="has-text-primary"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="selectedTemplateId"
|
||||
class="button is-danger is-outlined"
|
||||
@click="showDeleteDialog = true"
|
||||
:disabled="loading"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:delete-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
v-for="tab in ['content', 'mappings', 'automation']"
|
||||
:key="tab"
|
||||
:class="[activeTab === tab && 'is-active']"
|
||||
>
|
||||
<a @click="activeTab = tab">{{ capitalize(tab) }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Form Component based on tab -->
|
||||
<div class="card">
|
||||
<div class="card-content p-4">
|
||||
<div v-show="activeTab === 'content'">
|
||||
<component
|
||||
:is="currentFormComponent"
|
||||
:key="formKey"
|
||||
:initial-data="emailFormData"
|
||||
@data-change="handleChangeData"
|
||||
/>
|
||||
</div>
|
||||
<MappingConfigurator
|
||||
v-if="activeTab === 'mappings'"
|
||||
:mappings="formData.mappings"
|
||||
@update:mappings="updateMappings"
|
||||
/>
|
||||
<JobConfigurator
|
||||
v-if="activeTab === 'automation'"
|
||||
:template-id="selectedTemplateId"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabbed Interface -->
|
||||
<div class="tabs mb-3">
|
||||
<ul>
|
||||
<li :class="{ 'is-active': activeTab === 'content' }">
|
||||
<a @click="activeTab = 'content'">Content</a>
|
||||
</li>
|
||||
<template v-if="$getEditRights()">
|
||||
<li :class="{ 'is-active': activeTab === 'mappings' }">
|
||||
<a @click="activeTab = 'mappings'">Mappings</a>
|
||||
</li>
|
||||
<li :class="{ 'is-active': activeTab === 'automation' }">
|
||||
<a @click="activeTab = 'automation'">Automation</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Form Component based on tab -->
|
||||
<div v-show="activeTab === 'content'">
|
||||
<!-- Preview Section -->
|
||||
<div
|
||||
class="cell is-col-span-7"
|
||||
style="overflow-y: scroll"
|
||||
>
|
||||
<component
|
||||
:is="currentFormComponent"
|
||||
:key="formKey"
|
||||
:initial-data="emailFormData"
|
||||
@data-change="handleChangeData"
|
||||
:is="currentTemplateComponent"
|
||||
v-bind="templateProps"
|
||||
style="height: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="activeTab === 'mappings'">
|
||||
<MappingConfigurator
|
||||
:mappings="formData.mappings"
|
||||
@update:mappings="updateMappings"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="activeTab === 'automation'">
|
||||
<JobConfigurator :template-id="selectedTemplateId" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<div
|
||||
class="column is-7 p-0"
|
||||
style="overflow-y: scroll"
|
||||
>
|
||||
<component
|
||||
:is="currentTemplateComponent"
|
||||
v-bind="templateProps"
|
||||
style="height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -184,16 +157,16 @@
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
@close="showmodal = undefined"
|
||||
v-bind="showmodal"
|
||||
v-if="showmodal"
|
||||
></Modal>
|
||||
v-bind="showmodal"
|
||||
@close="showmodal = undefined"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { capitalize } from "es-toolkit";
|
||||
import EmailForm1 from "./forms/EmailForm1.vue";
|
||||
import Template1 from "~/components/marketing/email/Template1.vue";
|
||||
import Modal from "~/components/Modal.vue";
|
||||
import MappingConfigurator from "~/components/marketing/email/MappingConfigurator.vue";
|
||||
import JobConfigurator from "~/components/marketing/email/JobConfigurator.vue";
|
||||
|
||||
@@ -380,7 +353,7 @@ const handleDeleteTemplate = async () => {
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
dataTemplate.value = await $getdata("emailtemplate");
|
||||
dataTemplate.value = await $getdata("Email_Template");
|
||||
} catch (error) {
|
||||
$snackbar("Error: Failed to fetch templates");
|
||||
console.error(error);
|
||||
|
||||
@@ -1,102 +1,91 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<h5 class="title is-5">Automation Jobs</h5>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="openNewJobForm"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Add New Job</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block is-flex is-gap-1 is-align-items-center is-justify-content-space-between">
|
||||
<p class="fs-17 font-semibold">Automation Jobs</p>
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="openNewJobForm"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Add New Job</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<p
|
||||
v-if="isLoading"
|
||||
class="has-text-centered"
|
||||
class="has-text-centered has-text-grey py-4"
|
||||
>
|
||||
<p>Loading jobs...</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
Loading jobs...
|
||||
</p>
|
||||
<p
|
||||
v-else-if="jobs.length === 0"
|
||||
class="has-text-centered"
|
||||
class="has-text-centered has-text-grey py-4"
|
||||
>
|
||||
<p>No automation jobs found for this template.</p>
|
||||
</div>
|
||||
|
||||
No automation jobs found for this template.
|
||||
</p>
|
||||
<div v-else>
|
||||
<div
|
||||
v-for="job in jobs"
|
||||
:key="job.id"
|
||||
class="mb-4 p-3 border"
|
||||
class="mb-4 p-3 rounded"
|
||||
style="border: 1px solid var(--bulma-grey-90)"
|
||||
>
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div>
|
||||
<p class="has-text-weight-bold">{{ job.name }}</p>
|
||||
<p class="is-size-7">Model: {{ job.model_name }}</p>
|
||||
<p class="is-size-7">
|
||||
Triggers:
|
||||
<span
|
||||
v-if="job.trigger_on_create"
|
||||
class="tag is-info is-light mr-1"
|
||||
>On Create</span
|
||||
>
|
||||
<span
|
||||
v-if="job.trigger_on_update"
|
||||
class="tag is-warning is-light"
|
||||
>On Update</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="is-flex is-gap-1 is-justify-content-space-between is-align-items-center">
|
||||
<div class="is-flex-shrink-1">
|
||||
<p class="font-semibold mb-1">{{ job.name }}</p>
|
||||
<p class="is-size-7">Model: {{ job.model_name }}</p>
|
||||
<p class="is-size-7">
|
||||
Triggers:
|
||||
<span
|
||||
v-if="job.trigger_on_create"
|
||||
class="tag is-info is-light mr-1"
|
||||
>On Create</span
|
||||
>
|
||||
<span
|
||||
v-if="job.trigger_on_update"
|
||||
class="tag is-warning is-light"
|
||||
>On Update</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-small"
|
||||
:class="{ 'is-success': job.active, 'is-light': !job.active }"
|
||||
@click="toggleJobStatus(job)"
|
||||
>
|
||||
{{ job.active ? "Active" : "Inactive" }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="openEditJobForm(job)"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:edit-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-small"
|
||||
@click="confirmDelete(job)"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:delete-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<button
|
||||
:class="['button is-small', job.active && 'is-primary']"
|
||||
@click="toggleJobStatus(job)"
|
||||
>
|
||||
{{ job.active ? "Active" : "Inactive" }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="openEditJobForm(job)"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:edit-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-small"
|
||||
@click="confirmDelete(job)"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:delete-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,7 +186,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { apiUrl, putApiUrl } from "~/components/marketing/email/Email.utils";
|
||||
|
||||
const props = defineProps({
|
||||
@@ -207,10 +196,9 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const nuxtApp = useNuxtApp();
|
||||
const $snackbar = nuxtApp.$snackbar as (message: string) => void;
|
||||
const { $getdata, $snackbar } = useNuxtApp();
|
||||
|
||||
const jobs = ref<any[]>([]);
|
||||
const jobs = ref([]);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const showForm = ref(false);
|
||||
@@ -238,7 +226,11 @@ const fetchJobs = async () => {
|
||||
const response = await $fetch(`${apiUrl}/Email_Job/`, {
|
||||
params: { template_id: props.templateId },
|
||||
});
|
||||
jobs.value = response.rows || [];
|
||||
jobs.value = await $getdata("Email_Job", {
|
||||
filter: {
|
||||
template_id: props.templateId,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching email jobs:", error);
|
||||
$snackbar(`Error fetching jobs`);
|
||||
@@ -259,7 +251,7 @@ const openNewJobForm = () => {
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const openEditJobForm = (job: any) => {
|
||||
const openEditJobForm = (job) => {
|
||||
isEditing.value = true;
|
||||
jobForm.value = { ...job };
|
||||
showForm.value = true;
|
||||
@@ -283,19 +275,19 @@ const saveJob = async () => {
|
||||
body: data,
|
||||
});
|
||||
if (response) {
|
||||
$snackbar(`Job saved successfully`);
|
||||
$snackbar("Job saved successfully", "Success");
|
||||
await fetchJobs();
|
||||
closeForm();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error saving job:", error);
|
||||
$snackbar(`Error saving job`);
|
||||
$snackbar("Error saving job", "Error");
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleJobStatus = async (job: any) => {
|
||||
const toggleJobStatus = async (job) => {
|
||||
const updatedJob = { ...job, active: !job.active };
|
||||
try {
|
||||
await $fetch(`${putApiUrl}/Email_Job/${job.id}`, {
|
||||
@@ -310,13 +302,13 @@ const toggleJobStatus = async (job: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = (job: any) => {
|
||||
const confirmDelete = (job) => {
|
||||
if (confirm(`Are you sure you want to delete the job "${job.name}"?`)) {
|
||||
deleteJob(job.id);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteJob = async (jobId: number) => {
|
||||
const deleteJob = async (jobId) => {
|
||||
try {
|
||||
await $fetch(`${putApiUrl}/Email_Job/${jobId}`, {
|
||||
method: "DELETE",
|
||||
@@ -333,13 +325,6 @@ onMounted(fetchJobs);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.modal-card-foot {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@@ -1,161 +1,151 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div>
|
||||
<div
|
||||
v-for="(mapping, mapIndex) in localMappings"
|
||||
:key="mapIndex"
|
||||
class="mb-5 p-4 border"
|
||||
class="card"
|
||||
style="border: 1px solid var(--bulma-grey-90)"
|
||||
>
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<h5 class="title is-5">Mapping {{ mapIndex + 1 }}: {{ mapping.alias }}</h5>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<button
|
||||
class="button is-danger is-small"
|
||||
@click="removeMapping(mapIndex)"
|
||||
>
|
||||
<span class="icon is-small">
|
||||
<Icon name="material-symbols:delete-outline-rounded" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">Alias</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.alias"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">Model</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.model"
|
||||
@input="update"
|
||||
placeholder="e.g., app.Transaction"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">Lookup Field</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.lookup_field"
|
||||
@input="update"
|
||||
placeholder="e.g., id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">Lookup Value From</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.lookup_value_from"
|
||||
@input="update"
|
||||
placeholder="e.g., transaction_id or transaction.customer.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">Type</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select
|
||||
v-model="mapping.type"
|
||||
@change="update"
|
||||
>
|
||||
<option value="object">Object</option>
|
||||
<option value="list">List</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">Is Trigger Object?</label>
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="mapping.is_trigger_object"
|
||||
@change="update"
|
||||
/>
|
||||
Yes
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h6 class="title is-6">Fields</h6>
|
||||
<div
|
||||
v-for="(field, fieldIndex) in mapping.fields"
|
||||
:key="fieldIndex"
|
||||
class="field has-addons"
|
||||
>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="field.placeholder"
|
||||
@input="update"
|
||||
placeholder="[placeholder]"
|
||||
/>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="field.source"
|
||||
@input="update"
|
||||
placeholder="source.field.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="card-content p-4">
|
||||
<div class="block is-flex is-gap-1 is-justify-content-space-between is-align-items-center">
|
||||
<h5 class="fs-17 font-semibold">Mapping {{ mapIndex + 1 }}: {{ mapping.alias }}</h5>
|
||||
<button
|
||||
class="button is-danger is-light"
|
||||
@click="removeField(mapIndex, fieldIndex as number)"
|
||||
@click="removeMapping(mapIndex)"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:delete-outline-rounded"
|
||||
:size="20"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="fixed-grid">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<label class="label">Alias</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.alias"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<label class="label">Model</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.model"
|
||||
@input="update"
|
||||
placeholder="e.g., app.Transaction"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<label class="label">Lookup Field</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.lookup_field"
|
||||
@input="update"
|
||||
placeholder="e.g., id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<label class="label">Lookup Value From</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.lookup_value_from"
|
||||
@input="update"
|
||||
placeholder="e.g., transaction_id or transaction.customer.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<label class="label">Type</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select
|
||||
v-model="mapping.type"
|
||||
@change="update"
|
||||
>
|
||||
<option value="object">Object</option>
|
||||
<option value="list">List</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<label class="label">Is Trigger Object?</label>
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="mapping.is_trigger_object"
|
||||
@change="update"
|
||||
/>
|
||||
Yes
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<p class="label">Fields</p>
|
||||
<div
|
||||
v-for="(field, fieldIndex) in mapping.fields"
|
||||
:key="fieldIndex"
|
||||
class="field has-addons"
|
||||
>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="field.placeholder"
|
||||
@input="update"
|
||||
placeholder="[placeholder]"
|
||||
/>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="field.source"
|
||||
@input="update"
|
||||
placeholder="source.field.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button is-danger is-light"
|
||||
@click="removeField(mapIndex, fieldIndex as number)"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:delete-outline-rounded"
|
||||
:size="20"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="button is-small is-light"
|
||||
@click="addField(mapIndex)"
|
||||
>
|
||||
<span class="icon is-small">+</span>
|
||||
<span>Add Field</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="button is-small is-light"
|
||||
@click="addField(mapIndex)"
|
||||
>
|
||||
<span class="icon is-small">+</span>
|
||||
<span>Add Field</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@@ -174,8 +164,6 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
mappings: {
|
||||
type: Array,
|
||||
@@ -260,13 +248,3 @@ const update = () => {
|
||||
emit("update:mappings", reformatMappingsForEmit());
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,14 +4,7 @@
|
||||
:is="'style'"
|
||||
v-html="styles"
|
||||
/>
|
||||
<div
|
||||
class="container py-6"
|
||||
:style="{
|
||||
minHeight: '100%',
|
||||
backgroundColor: 'hsl(0, 0%, 97%)',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
|
||||
}"
|
||||
>
|
||||
<div class="container py-6 min-h-full">
|
||||
<table
|
||||
role="presentation"
|
||||
cellspacing="0"
|
||||
@@ -37,8 +30,7 @@
|
||||
width: '100%',
|
||||
maxWidth: '680px',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
|
||||
border: '1px solid #dedede',
|
||||
overflow: 'hidden',
|
||||
}"
|
||||
>
|
||||
@@ -102,22 +94,21 @@
|
||||
overflow: 'hidden',
|
||||
}"
|
||||
>
|
||||
<div :style="{ padding: '15px' }">
|
||||
<div
|
||||
class="message-content"
|
||||
:style="{
|
||||
padding: '16px',
|
||||
fontSize: '16px',
|
||||
margin: '0',
|
||||
color: '#374151',
|
||||
lineHeight: '1.6',
|
||||
wordBreak: 'break-word',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="message-content"
|
||||
:style="{
|
||||
fontSize: '16px',
|
||||
margin: '0',
|
||||
color: '#374151',
|
||||
lineHeight: '1.6',
|
||||
wordBreak: 'break-word',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
v-html="processedMessage"
|
||||
/>
|
||||
</div>
|
||||
class="content"
|
||||
v-html="processedMessage"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -169,7 +160,6 @@
|
||||
<div
|
||||
class="company-info"
|
||||
:style="{
|
||||
background: 'linear-gradient(to right, #000000, #0f9b0f)',
|
||||
color: '#ffffff',
|
||||
borderRadius: '12px',
|
||||
}"
|
||||
@@ -233,7 +223,6 @@
|
||||
|
||||
<script setup>
|
||||
import { imageUrl } from "~/components/marketing/email/Email.utils";
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
content: Object,
|
||||
@@ -248,7 +237,7 @@ const hasValidImage = computed(() => {
|
||||
return props.content.imageUrl && props.content.imageUrl.trim() !== "";
|
||||
});
|
||||
|
||||
const replaceKeywords = (contentstring) => {
|
||||
const replaceKeywords = (content) => {
|
||||
if (!content) return "";
|
||||
|
||||
let replacedContent = content;
|
||||
@@ -415,10 +404,6 @@ const styles = `
|
||||
.message-text {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.logo-container {
|
||||
width: 150px !important;
|
||||
height: 45px !important;
|
||||
}
|
||||
.company-name {
|
||||
font-size: 12px !important;
|
||||
color: #ffffff !important;
|
||||
|
||||
@@ -1,67 +1,56 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered is-fullwidth is-hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>List Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="loading">
|
||||
<tr
|
||||
v-for="index in 5"
|
||||
:key="index"
|
||||
>
|
||||
<td>
|
||||
<div
|
||||
class="skeleton-loader"
|
||||
style="width: 150px; height: 20px"
|
||||
></div>
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
class="skeleton-loader"
|
||||
style="width: 250px; height: 20px"
|
||||
></div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else-if="dataEmail.length === 0">
|
||||
<tr>
|
||||
<td
|
||||
colspan="2"
|
||||
class="has-text-centered py-6"
|
||||
>
|
||||
<div class="has-text-grey">
|
||||
<p class="has-text-weight-medium">No saved lists found</p>
|
||||
<p class="is-size-7 mt-2">Create a new list to get started</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr
|
||||
v-for="item in dataEmail"
|
||||
:key="item.id"
|
||||
:class="['is-clickable', selectedEmails === item.email ? 'is-selected' : '']"
|
||||
@click="handleRowClick(item.email, item.name, item.id)"
|
||||
>
|
||||
<td class="has-text-weight-medium">{{ item.name }}</td>
|
||||
<td class="has-text-grey-30">{{ item.email }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table is-fullwidth is-hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>List Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-if="loading"
|
||||
v-for="index in 5"
|
||||
:key="index"
|
||||
>
|
||||
<td>
|
||||
<div class="skeleton-lines">
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="skeleton-lines">
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-else-if="dataEmail.length === 0">
|
||||
<td
|
||||
colspan="2"
|
||||
class="has-text-centered py-6"
|
||||
>
|
||||
<div class="has-text-grey">
|
||||
<p class="has-text-weight-medium">No saved lists found</p>
|
||||
<p class="is-size-7 mt-1">Create a new list to get started</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-else
|
||||
v-for="item in dataEmail"
|
||||
:key="item.id"
|
||||
:class="['is-clickable', selectedEmails === item.email ? 'is-selected' : '']"
|
||||
@click="handleRowClick(item.email, item.name, item.id)"
|
||||
>
|
||||
<td class="has-text-weight-medium">{{ item.name }}</td>
|
||||
<td class="has-text-grey-30">{{ item.email }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useNuxtApp } from "nuxt/app";
|
||||
|
||||
interface EmailItem {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -112,10 +101,6 @@ const handleRowClick = (email: string, name: string, id: string) => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.is-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.is-clickable:hover {
|
||||
background-color: hsl(219, 70%, 96%) !important;
|
||||
}
|
||||
@@ -123,20 +108,4 @@ const handleRowClick = (email: string, name: string, id: string) => {
|
||||
.is-selected {
|
||||
background-color: hsl(219, 70%, 90%) !important;
|
||||
}
|
||||
|
||||
.skeleton-loader {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 2s ease-in-out infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,329 +1,322 @@
|
||||
<template>
|
||||
<div class="pr-4">
|
||||
<form @submit.prevent="handleSendEmail">
|
||||
<!-- Receiver Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span
|
||||
>Người nhận {{ selectedName ? `(Đang mở: ${selectedName})` : ""
|
||||
}}<b class="ml-1 has-text-danger">*</b></span
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field is-flex">
|
||||
<div class="control is-expanded pr-3 is-flex-grow-1">
|
||||
<input
|
||||
ref="emailTextareaRef"
|
||||
class="input"
|
||||
name="receiver"
|
||||
id="receiver"
|
||||
style="height: 100%"
|
||||
v-model="formData.content.receiver"
|
||||
placeholder="Nhập địa chỉ email người nhận, ngăn cách bằng dấu chấm phẩy (;)"
|
||||
@input="handleInputChange('receiver', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="buttons is-flex is-flex-wrap-nowrap">
|
||||
<button
|
||||
v-if="$getEditRights()"
|
||||
type="button"
|
||||
class="button is-light"
|
||||
@click="handleOpenModal('save-list')"
|
||||
style="border-radius: 8px; width: 100%"
|
||||
>
|
||||
<span>Lưu</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="button is-info"
|
||||
@click="handleOpenModal('open-list')"
|
||||
style="border-radius: 8px; width: 100%"
|
||||
>
|
||||
<span>Mở</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subject Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Tiêu đề<b class="ml-1 has-text-danger">*</b></span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<form @submit.prevent="handleSendEmail">
|
||||
<!-- Receiver Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Người nhận {{ selectedName ? `(Đang mở: ${selectedName})` : "" }}<b class="has-text-danger">*</b></span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
ref="emailTextareaRef"
|
||||
class="input"
|
||||
v-model="formData.content.subject"
|
||||
placeholder="Nhập tiêu đề email..."
|
||||
required
|
||||
@input="handleInputChange('subject', $event)"
|
||||
name="receiver"
|
||||
id="receiver"
|
||||
v-model="formData.content.receiver"
|
||||
@input="handleInputChange('receiver', $event)"
|
||||
placeholder="Nhập địa chỉ email người nhận, ngăn cách bằng dấu chấm phẩy (;)"
|
||||
title="Nhập địa chỉ email người nhận, ngăn cách bằng dấu chấm phẩy (;)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Nội dung</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<div
|
||||
class="box"
|
||||
style="padding: 0"
|
||||
<button
|
||||
v-if="$getEditRights()"
|
||||
@click="handleOpenModal('save-list')"
|
||||
class="button is-primary is-light"
|
||||
type="button"
|
||||
>
|
||||
<Editor
|
||||
:key="quillKey"
|
||||
:text="formData.content.content"
|
||||
pagename="pagedataemail"
|
||||
:height="'300px'"
|
||||
@content="handleQuillChange"
|
||||
/>
|
||||
</div>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:save-outline-rounded"
|
||||
:size="20"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<span class="tooltiptext left-auto right-0">Lưu</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image URL Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Đường dẫn hình ảnh</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="url"
|
||||
id="imageUrl"
|
||||
name="imageUrl"
|
||||
class="input"
|
||||
placeholder="https://hinhanh.com/image.jpg"
|
||||
@input="handleInputChange('imageUrl', $event)"
|
||||
/>
|
||||
<button
|
||||
@click="handleOpenModal('open-list')"
|
||||
class="button is-info is-light"
|
||||
type="button"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:list-alt-outline-rounded"
|
||||
:size="20"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<span class="tooltiptext left-auto right-0">Xem danh sách </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Link URLs Section -->
|
||||
<div class="field">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<label class="label mb-0">
|
||||
<span class="icon-text">
|
||||
<span>Đường dẫn liên kết</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button
|
||||
type="button"
|
||||
@click="addLinkUrl"
|
||||
class="button is-normal"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon name="material-symbols:add-rounded" />
|
||||
</span>
|
||||
<span>Thêm liên kết</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Subject Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Tiêu đề <b class="has-text-danger">*</b></span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
class="input"
|
||||
v-model="formData.content.subject"
|
||||
placeholder="Nhập tiêu đề email"
|
||||
required
|
||||
@input="handleInputChange('subject', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Nội dung</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<Editor
|
||||
:key="quillKey"
|
||||
:text="formData.content.content"
|
||||
style="height: 300px"
|
||||
@content="handleQuillChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image URL Section -->
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Đường dẫn hình ảnh</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="url"
|
||||
id="imageUrl"
|
||||
name="imageUrl"
|
||||
class="input"
|
||||
placeholder="https://hinhanh.com/image.jpg"
|
||||
@input="handleInputChange('imageUrl', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Link URLs Section -->
|
||||
<div class="field">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<label class="label mb-0">
|
||||
<span class="icon-text">
|
||||
<span>Đường dẫn liên kết</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(link, index) in formData.content.linkUrl"
|
||||
:key="index"
|
||||
class="field columns has-addons mb-2"
|
||||
:class="`${formData.content.linkUrl.length > 1 ? 'pr-3' : ''}`"
|
||||
>
|
||||
<div class="control column is-6 pr-0 is-expanded">
|
||||
<input
|
||||
type="url"
|
||||
class="input"
|
||||
style="border-radius: 8px"
|
||||
v-model="formData.content.linkUrl[index]"
|
||||
:placeholder="`Liên kết ${index + 1}: https://example.com`"
|
||||
@input="props.onDataChange(formData)"
|
||||
/>
|
||||
</div>
|
||||
<div class="control column is-6 is-expanded">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
style="border-radius: 8px"
|
||||
v-model="formData.content.textLinkUrl[index]"
|
||||
:placeholder="`Tên ${index + 1}`"
|
||||
@input="props.onDataChange(formData)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="control column is-1 p-0"
|
||||
v-if="formData.content.linkUrl.length > 1"
|
||||
style="align-self: center; width: 40px"
|
||||
>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button
|
||||
@click="addLinkUrl"
|
||||
class="button is-primary is-light"
|
||||
type="button"
|
||||
@click="removeLinkUrl(index)"
|
||||
class="button is-danger has-text-white"
|
||||
style="border-radius: 8px"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon name="material-symbols:delete-outline-rounded" />
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Thêm liên kết</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keywords Section -->
|
||||
<div
|
||||
v-if="detectedKeywords.length > 0"
|
||||
class="field"
|
||||
v-for="(link, index) in formData.content.linkUrl"
|
||||
:key="index"
|
||||
class="field columns has-addons mb-2"
|
||||
:class="`${formData.content.linkUrl.length > 1 ? 'pr-3' : ''}`"
|
||||
>
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Từ khóa</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="box">
|
||||
<div
|
||||
v-for="(keyword, index) in detectedKeywords"
|
||||
:key="index"
|
||||
class="field has-addons mb-2 columns"
|
||||
>
|
||||
<div class="control column is-4 pr-0 pb-0">
|
||||
<span
|
||||
style="width: 100%"
|
||||
class="button is-static is-small"
|
||||
>{{ keyword }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="control is-expanded column is-8 pb-0">
|
||||
<input
|
||||
type="text"
|
||||
class="input is-small"
|
||||
:value="getKeywordValue(keyword)"
|
||||
:placeholder="`Nhập giá trị cho ${keyword}`"
|
||||
@input="handleKeywordValueChange(keyword, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control column is-6 pr-0 is-expanded">
|
||||
<input
|
||||
type="url"
|
||||
class="input"
|
||||
style="border-radius: 8px"
|
||||
v-model="formData.content.linkUrl[index]"
|
||||
:placeholder="`Liên kết ${index + 1}: https://example.com`"
|
||||
@input="props.onDataChange(formData)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="control column is-6 is-expanded">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
style="border-radius: 8px"
|
||||
v-model="formData.content.textLinkUrl[index]"
|
||||
:placeholder="`Tên ${index + 1}`"
|
||||
@input="props.onDataChange(formData)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="control column is-1 p-0"
|
||||
v-if="formData.content.linkUrl.length > 1"
|
||||
style="align-self: center; width: 40px"
|
||||
>
|
||||
<button
|
||||
class="button is-primary has-text-white"
|
||||
:class="{ 'is-loading': loading }"
|
||||
:disabled="loading"
|
||||
type="button"
|
||||
@click="removeLinkUrl(index)"
|
||||
class="button is-danger has-text-white"
|
||||
style="border-radius: 8px"
|
||||
>
|
||||
<span v-if="loading">Đang gửi</span>
|
||||
<template v-else>
|
||||
<span class="icon">
|
||||
<Icon name="material-symbols:send-rounded" />
|
||||
</span>
|
||||
<span>Gửi email</span>
|
||||
</template>
|
||||
<span class="icon">
|
||||
<Icon name="material-symbols:delete-outline-rounded" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keywords Section -->
|
||||
<div
|
||||
v-if="detectedKeywords.length > 0"
|
||||
class="field"
|
||||
>
|
||||
<label class="label">
|
||||
<span class="icon-text">
|
||||
<span>Từ khóa</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="box">
|
||||
<div
|
||||
v-for="(keyword, index) in detectedKeywords"
|
||||
:key="index"
|
||||
class="field has-addons mb-2 columns"
|
||||
>
|
||||
<div class="control column is-4 pr-0 pb-0">
|
||||
<span
|
||||
style="width: 100%"
|
||||
class="button is-static is-small"
|
||||
>{{ keyword }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="control is-expanded column is-8 pb-0">
|
||||
<input
|
||||
type="text"
|
||||
class="input is-small"
|
||||
:value="getKeywordValue(keyword)"
|
||||
:placeholder="`Nhập giá trị cho ${keyword}`"
|
||||
@input="handleKeywordValueChange(keyword, $event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="field">
|
||||
<div class="control is-flex is-justify-content-flex-end">
|
||||
<button :class="['button is-primary has-text-white', loading && 'is-loading']">
|
||||
<span v-if="loading">Đang gửi</span>
|
||||
<template v-else>
|
||||
<span class="icon">
|
||||
<Icon name="material-symbols:send-rounded" />
|
||||
</span>
|
||||
<span>Gửi email</span>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<Modal
|
||||
@dataevent="handleRowClick"
|
||||
@close="showmodal = undefined"
|
||||
v-bind="showmodal"
|
||||
v-if="showmodal"
|
||||
></Modal>
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { render } from "@vue-email/render";
|
||||
import Modal from "~/components/Modal.vue";
|
||||
import Template1 from "~/components/marketing/email/Template1.vue";
|
||||
import Editor from "~/components/common/Editor.vue";
|
||||
|
||||
const nuxtApp = useNuxtApp();
|
||||
const $snackbar = nuxtApp.$snackbar as (message?: string) => void;
|
||||
const $getpath = nuxtApp.$getpath as (message?: string) => void;
|
||||
const $getEditRights = nuxtApp.$getEditRights as () => boolean;
|
||||
|
||||
const apiUrl = `${$getpath()}data`;
|
||||
const { $getdata, $getEditRights, $snackbar } = useNuxtApp();
|
||||
const showmodal = ref();
|
||||
|
||||
// Types
|
||||
interface KeywordItem {
|
||||
keyword: string;
|
||||
value: string;
|
||||
}
|
||||
// interface KeywordItem {
|
||||
// keyword: string;
|
||||
// value: string;
|
||||
// }
|
||||
|
||||
interface FormContent {
|
||||
receiver: string;
|
||||
subject: string;
|
||||
content: string;
|
||||
imageUrl: string | null;
|
||||
linkUrl: string[];
|
||||
textLinkUrl: string[];
|
||||
keyword: KeywordItem[];
|
||||
html: string;
|
||||
}
|
||||
// interface FormContent {
|
||||
// receiver: string;
|
||||
// subject: string;
|
||||
// content: string;
|
||||
// imageUrl: string | null;
|
||||
// linkUrl: string[];
|
||||
// textLinkUrl: string[];
|
||||
// keyword: KeywordItem[];
|
||||
// html: string;
|
||||
// }
|
||||
|
||||
interface FormData {
|
||||
id?: number;
|
||||
name: string;
|
||||
template: string;
|
||||
content: FormContent;
|
||||
}
|
||||
// interface FormData {
|
||||
// id?: number;
|
||||
// name: string;
|
||||
// template: string;
|
||||
// content: FormContent;
|
||||
// }
|
||||
|
||||
type ModalType = "none" | "save-list" | "open-list";
|
||||
// type ModalType = "none" | "save-list" | "open-list";
|
||||
|
||||
interface Props {
|
||||
onDataChange: (data: FormData) => void;
|
||||
initialData?: FormData;
|
||||
}
|
||||
// interface Props {
|
||||
// onDataChange: (data: FormData) => void;
|
||||
// initialData?: FormData;
|
||||
// }
|
||||
|
||||
// Props
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
initialData: () => ({
|
||||
id: undefined,
|
||||
name: "",
|
||||
template: "template1",
|
||||
content: {
|
||||
receiver: "",
|
||||
subject: "",
|
||||
content: "",
|
||||
imageUrl: null,
|
||||
linkUrl: [""],
|
||||
textLinkUrl: [""],
|
||||
keyword: [{ keyword: "", value: "" }],
|
||||
html: "",
|
||||
},
|
||||
}),
|
||||
const props = defineProps({
|
||||
onDataChange: Function,
|
||||
initialData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
id: undefined,
|
||||
name: "",
|
||||
template: "template1",
|
||||
content: {
|
||||
receiver: "",
|
||||
subject: "",
|
||||
content: "",
|
||||
imageUrl: null,
|
||||
linkUrl: [""],
|
||||
textLinkUrl: [""],
|
||||
keyword: [{ keyword: "", value: "" }],
|
||||
html: "",
|
||||
},
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const selectedName = ref("");
|
||||
const selectedId = ref("");
|
||||
|
||||
// Refs
|
||||
const emailTextareaRef = ref<HTMLTextAreaElement | null>(null);
|
||||
const emailTextareaRef = ref(null);
|
||||
const loading = ref(false);
|
||||
const modalType = ref<ModalType>("none");
|
||||
const formData = ref<FormData>(props.initialData);
|
||||
const modalType = ref("none");
|
||||
const formData = ref(props.initialData);
|
||||
const quillKey = ref(0);
|
||||
const dataEmails = ref([]);
|
||||
const detectedKeywords = ref<string[]>([]);
|
||||
const detectedKeywords = ref([]);
|
||||
|
||||
const handleRowClick = (data: { email: string; name: string; id: string }) => {
|
||||
const handleRowClick = (data /* : { email: string; name: string; id: string } */) => {
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
content: {
|
||||
@@ -341,12 +334,12 @@ const handleRowClick = (data: { email: string; name: string; id: string }) => {
|
||||
};
|
||||
|
||||
// Methods
|
||||
const extractKeywords = (content: string): string[] => {
|
||||
const extractKeywords = (content) => {
|
||||
if (!content) return [];
|
||||
|
||||
const regex = /\{\{([^}]+)\}\}/g;
|
||||
const matches: string[] = [];
|
||||
let match: RegExpExecArray | null = null;
|
||||
const matches = [];
|
||||
let match = null;
|
||||
|
||||
while ((match = regex.exec(content)) !== null) {
|
||||
if (match[1]) {
|
||||
@@ -357,14 +350,13 @@ const extractKeywords = (content: string): string[] => {
|
||||
return [...new Set(matches)];
|
||||
};
|
||||
|
||||
const getKeywordValue = (keyword: string): string => {
|
||||
const getKeywordValue = (keyword) => {
|
||||
const found = formData.value.content.keyword.find((kw) => kw.keyword === keyword);
|
||||
return found ? found.value : "";
|
||||
};
|
||||
|
||||
const handleInputChange = (field: keyof FormContent | "name" | "template", eventOrValue: Event | string) => {
|
||||
const value =
|
||||
typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
|
||||
const handleInputChange = (field /* : keyof FormContent | "name" | "template" */, eventOrValue) => {
|
||||
const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
|
||||
if (field === "receiver" && value.trim() === "") {
|
||||
selectedName.value = "";
|
||||
}
|
||||
@@ -380,7 +372,7 @@ const handleInputChange = (field: keyof FormContent | "name" | "template", event
|
||||
props.onDataChange(formData.value);
|
||||
};
|
||||
|
||||
const handleQuillChange = (content: string) => {
|
||||
const handleQuillChange = (content) => {
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
content: {
|
||||
@@ -391,9 +383,8 @@ const handleQuillChange = (content: string) => {
|
||||
props.onDataChange(formData.value);
|
||||
};
|
||||
|
||||
const handleLinkUrlChange = (index: number, eventOrValue: Event | string) => {
|
||||
const value =
|
||||
typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
|
||||
const handleLinkUrlChange = (index, eventOrValue) => {
|
||||
const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
|
||||
const newLinkUrl = [...formData.value.content.linkUrl];
|
||||
newLinkUrl[index] = value;
|
||||
formData.value = {
|
||||
@@ -403,9 +394,8 @@ const handleLinkUrlChange = (index: number, eventOrValue: Event | string) => {
|
||||
props.onDataChange(formData.value);
|
||||
};
|
||||
|
||||
const handleTextLinkUrlChange = (index: number, eventOrValue: Event | string) => {
|
||||
const value =
|
||||
typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
|
||||
const handleTextLinkUrlChange = (index, eventOrValue) => {
|
||||
const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
|
||||
const newTextLinkUrl = [...formData.value.content.textLinkUrl];
|
||||
newTextLinkUrl[index] = value;
|
||||
formData.value = {
|
||||
@@ -415,9 +405,8 @@ const handleTextLinkUrlChange = (index: number, eventOrValue: Event | string) =>
|
||||
props.onDataChange(formData.value);
|
||||
};
|
||||
|
||||
const handleKeywordValueChange = (keyword: string, eventOrValue: Event | string) => {
|
||||
const value =
|
||||
typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
|
||||
const handleKeywordValueChange = (keyword, eventOrValue) => {
|
||||
const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
|
||||
const keywordIndex = formData.value.content.keyword.findIndex((kw) => kw.keyword === keyword);
|
||||
if (keywordIndex !== -1) {
|
||||
const newKeywords = [...formData.value.content.keyword];
|
||||
@@ -445,7 +434,7 @@ const addLinkUrl = () => {
|
||||
props.onDataChange(formData.value);
|
||||
};
|
||||
|
||||
const removeLinkUrl = (index: number) => {
|
||||
const removeLinkUrl = (index) => {
|
||||
if (formData.value.content.linkUrl.length > 1) {
|
||||
const newLinkUrl = formData.value.content.linkUrl.filter((_, i) => i !== index);
|
||||
const newTextLinkUrl = formData.value.content.textLinkUrl.filter((_, i) => i !== index);
|
||||
@@ -563,10 +552,10 @@ const handleSendEmail = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenModal = async (type: ModalType) => {
|
||||
const handleOpenModal = async (type) => {
|
||||
modalType.value = type;
|
||||
await getData();
|
||||
console.log(modalType.value);
|
||||
await getEmailList();
|
||||
|
||||
if (type === "save-list") {
|
||||
showmodal.value = {
|
||||
component: "marketing/email/dataGmail/SaveListGmail",
|
||||
@@ -584,7 +573,7 @@ const handleOpenModal = async (type: ModalType) => {
|
||||
showmodal.value = {
|
||||
component: "marketing/email/dataGmail/OpenListGmail",
|
||||
title: "Danh sách email",
|
||||
width: "95%",
|
||||
width: "min(700px, 75%)",
|
||||
height: "auto",
|
||||
vbind: {
|
||||
dataEmail: dataEmails.value,
|
||||
@@ -600,24 +589,13 @@ const handleCloseModal = () => {
|
||||
showmodal.value = undefined;
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
async function getEmailList() {
|
||||
loading.value = true;
|
||||
const emailListUrl = `${apiUrl}/Email_List/`;
|
||||
dataEmails.value = await $getdata("Email_List");
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await $fetch(emailListUrl);
|
||||
dataEmails.value = response.rows;
|
||||
console.log(response);
|
||||
console.log(dataEmails.value);
|
||||
} catch (error) {
|
||||
console.error("Error fetching email list:", error);
|
||||
throw error;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditList = (id: string, name: string, emails: string) => {
|
||||
const handleEditList = (id, name, emails) => {
|
||||
modalType.value = "save-list";
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user