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);
|
||||
|
||||
Reference in New Issue
Block a user