File: //home/arjun/projects/buyercall/buyercall/assets/vue/smartComponents/SmartEmailSelect/index.vue
<template>
<b-modal
id="workflow-modal"
centered
title="Choose template..."
title-class="font-18"
hide-footer
size="xl"
v-model="showWidget"
>
<div class="height-set smart-list">
<div class="spinner-main">
<growing-loader :isMini="false" v-if="loading"></growing-loader>
</div>
<template v-if="!loading">
<div class="smart-email-picker">
<div class="row mb-3">
<div class="col-md-12">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center justify-content-center">
<b-button variant="primary" v-if="!isListMode" @click="toListmode">
<i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
back
</b-button>
<div
v-if="customEmailDetails && selectedTemplateId !== null"
class="d-flex align-items-center justify-content-center"
>
<h5 class="mb-0 me-2">Template Selected :</h5>
<p class="d-flex mb-0">
<span class="text-primary">
{{ customEmailDetails.subject }}
</span>
<span
class="rounded-circle font-size-16 text-danger"
@click="clearCustomEmail"
>
<i class="bx bx-trash cursor-pointer" height="30"></i>
</span>
</p>
</div>
</div>
<div
class="d-flex align-items-center justify-content-center"
v-if="isListMode"
>
<!-- <b-button
variant="primary"
class="me-2"
@click="createtemplate = true"
>
<i
class="bx bxs-add-to-queue font-size-16 align-middle me-2"
></i>
Create New Template</b-button
> -->
<b-button
variant="primary"
class="me-2"
@click="createCustomEmail = true"
v-if="disableCreateNewEmailTemplates === false"
>
<i class="bx bxs-add-to-queue font-size-16 align-middle me-2"></i>
Create New Template</b-button
>
</div>
</div>
</div>
</div>
<div class="row border-top" v-if="createCustomEmail">
<div class="col-md-12">
<custom-email
:showPreviewButton="showPreview"
@formSubmit="createNewTemplate"
></custom-email>
</div>
</div>
<div class="border-top">
<div class="row" v-if="isListMode && emailtemplates.length">
<div
class="col-xl-4 col-sm-6"
v-for="emailtemplate in emailtemplates"
:key="emailtemplate.id"
>
<grid :data="emailtemplate" @selectedId="selectTemplate"></grid>
</div>
</div>
<template v-if="selectedTemplateHaveDynamicPlaceholders.length">
<b-form>
<div class="row">
<div class="col-md-12">
<b-form-group class="mb-3" label="Block 1" label-for="block1">
<b-form-textarea
id="block1"
rows="3"
placeholder="Enter Block1"
v-model="templateFormData.block1"
name="title"
:class="{
'is-invalid': v$?.templateFormData.block1.$error,
}"
></b-form-textarea>
<div
v-if="v$?.templateFormData.block1.$error"
class="invalid-feedback"
>
<span v-if="!v$?.templateFormData.block1.required"
>This value is required.</span
>
</div>
</b-form-group>
</div>
</div>
</b-form>
</template>
<p class="text-center py-1" v-if="isListMode && emailtemplates.length === 0">
No email templates found
</p>
</div>
</div>
</template>
</div>
</b-modal>
</template>
<script>
import { requiredIf } from "vuelidate/lib/validators";
import EmailTemplateService from "../../service/emailTemplatesService";
import GrowingLoader from "../../components/GrowingLoader.vue";
import CustomEmail from "./CustomEmail.vue";
import Grid from "./Grid.vue";
import { BModal, BButton, BForm, BFormGroup, BFormTextarea } from "bootstrap-vue-next";
export default {
props: {
initialValues: {
type: [Object, null], // Expects initialValues to be an object
required: true,
},
showSmartWidget: {
type: Boolean,
required: true,
},
disableCreateNewEmailTemplates: {
type: Boolean,
required: true,
},
showPreview: {
type: Boolean,
default: false,
},
},
mounted() {
this.v$?.$touch();
},
data() {
return {
templateFormData: {
block1: "",
},
createtemplate: false,
createCustomEmail: false,
showWidget: this.showSmartWidget,
emailtemplates: [],
templatesLoading: false,
createTemplateloading: false,
// createCustomEmailLoading: false,
errorMessage: null,
successMessage: null,
selectedTemplateId: null,
customEmailDetails: null,
};
},
validations: {
templateFormData: {
block1: {
required: requiredIf(function () {
if (this.block1IsRequired) {
return true;
}
return false;
}),
},
},
},
computed: {
block1IsRequired() {
return _.includes(this.selectedTemplateHaveDynamicPlaceholders, "block1");
},
isListMode() {
return !(this.createtemplate || this.createCustomEmail);
},
loading() {
return this.templatesLoading;
},
selectedTemplateHaveDynamicPlaceholders() {
const placeholders = [];
if (this.customEmailDetails === undefined || this.customEmailDetails === null) {
return [];
}
if ((this.customEmailDetails.content.match(/\[:block1\]/g) || []).length > 0) {
placeholders.push("block1");
}
return placeholders;
},
},
methods: {
clearCustomEmail() {
this.customEmailDetails = null;
this.selectedTemplateId = null;
},
async createNewTemplate(postData) {
console.log("data", postData);
const body = {
..._.omit(
{
...postData,
content: postData.isPlainEmail
? postData.plainEmailContent
: postData.editorData,
},
["editorData", "plainEmailContent"]
),
};
const formData = new FormData();
formData.append(
"data",
JSON.stringify({
...body,
})
);
const {
data: { message, success },
} = await EmailTemplateService.addEmailTemplate(formData);
if (success) {
this.getAllEmailTemplates();
this.toListmode();
this.$emit("refetch");
} else {
console.log("error", message);
}
},
selectTemplate(id) {
this.selectedTemplateId = id;
},
toListmode() {
this.createtemplate = false;
this.createCustomEmail = false;
},
async getAllEmailTemplates() {
this.errorMessage = "";
this.templatesLoading = true;
const {
data: { data, message, success },
} = await EmailTemplateService.getEmailtemplates();
if (!success) {
this.errorMessage = message;
} else {
this.emailtemplates = _.isEmpty(data) ? [] : data;
}
this.templatesLoading = false;
},
},
components: {
GrowingLoader,
Grid,
CustomEmail,
BModal,
BButton,
BForm,
BFormGroup,
BFormTextarea,
},
watch: {
// showSmartWidget(v) {
// if (v) {
// // debugger;
// this.showWidget = true;
// if (
// !_.isNull(this.initialValues) &&
// this.initialValues !== undefined &&
// this.initialValues.id
// ) {
// this.selectedTemplateId = this.initialValues.id;
// this.templateFormData.block1 = this.initialValues.formData.block1;
// }
// // this.selectedTemplateId = this.initialValues
// // ? this.initialValues
// // : null;
// this.getAllEmailTemplates();
// // this.$emit('onClose');
// } else {
// // this.createCustomEmail = false;
// // this.emailtemplates = [];
// // this.templatesLoading = false;
// // this.createTemplateloading = false;
// // this.selectedTemplateId = null;
// // this.customEmailDetails = null;
// }
// },
showSmartWidget: function (v) {
if (v) {
this.showWidget = true;
if (
!_.isNull(this.initialValues) &&
this.initialValues !== undefined &&
this.initialValues.id
) {
this.selectedTemplateId = this.initialValues.id;
this.templateFormData.block1 = this.initialValues.formData.block1;
}
this.getAllEmailTemplates();
} else {
// Handle the case when showSmartWidget is false
// For example:
// this.showWidget = false;
// Reset other related data or perform other actions as needed
}
},
initialValues: {
immediate: true,
handler(newVal) {
console.log("initialvalueeeeee", newVal);
},
},
selectedTemplateId(id) {
this.$emit("onSelectedTemplate", {
id,
formData: id !== undefined && !_.isNull(id) ? this.templateFormData : {},
});
if (id) {
this.customEmailDetails = _.find(this.emailtemplates, ({ sid }) => sid === id);
} else {
this.customEmailDetails = null;
}
},
emailtemplates: {
deep: true,
handler(v) {
if (this.selectedTemplateId) {
this.customEmailDetails = _.find(
this.emailtemplates,
({ sid }) => sid === this.selectedTemplateId
);
}
},
},
showWidget(v) {
if (!v) {
// debugger;
console.log("onCloseEvent");
if (this.v$?.$invalid) {
this.showWidget = true;
this.$bvModal.show("modal-smart-widget");
} else {
this.$emit("onClose");
}
}
},
},
};
</script>