Nhances/nhance
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT_UNLAYER_MAIL_EDITOR_ADDED_SRINIVAS

Browse Source
This commit is contained in:
Srinivas-Saravanan 2025-01-20 14:24:27 +05:30
parent c72ad51b81
commit 7e7b8eb411
4 changed files with 444 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Controllers/NotificationController.php
View File

@ -52,6 +52,7 @@ class NotificationController extends AdminController
$form_data['subject'] = $this->request->getPost('subject'); $form_data['subject'] = $this->request->getPost('subject');
$form_data['mail_content'] = $this->request->getPost('mailContent'); $form_data['mail_content'] = $this->request->getPost('mailContent');
$form_data['client_id'] = $this->request->getPost('client_id'); $form_data['client_id'] = $this->request->getPost('client_id');
$form_data['mail_content_json'] = $this->request->getPost('mailJson');
$notificationModel = new NotificationModel(); $notificationModel = new NotificationModel();
$find_notification = $notificationModel->where('client_id',$form_data['client_id'])->where('template_name',$form_data['template_name'])->first(); $find_notification = $notificationModel->where('client_id',$form_data['client_id'])->where('template_name',$form_data['template_name'])->first();

4
app/Models/NotificationModel.php
View File

@ -4,9 +4,9 @@ namespace App\Models;
use CodeIgniter\Model; use CodeIgniter\Model;
class NotificationModel extends Model class NotificationModel extends Model
{ {
protected $table = 'notifications'; protected $table = 'notifications';
protected $primaryKey = 'id'; protected $primaryKey = 'id';
protected $allowedFields = ["id","client_id","template_name","subject","mail_content","enabled","created_by","updated_by","is_active",]; protected $allowedFields = ["id","client_id","template_name","subject","mail_content","enabled","created_by","updated_by","is_active",'mail_content_json'];
} }

5
app/Views/layout/header.php
View File

@ -79,7 +79,10 @@
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
//srinivas
<script src="https://editor.unlayer.com/embed.js"></script>
<!-- <script src="<?= base_url('public/unlayer/js/embed.js').''?>"></script> -->
//srinivas
<style> <style>

484
app/Views/notification.php
View File

@ -9,6 +9,29 @@
.scrollb { .scrollb {
overflow-y: auto !important; overflow-y: auto !important;
} }
#editor-container {
width: 100%;
min-height: 600px;
}
#account_maneger_summary_mail_modal .modal-dialog,
#member_review_and_summary_mail_modal .modal-dialog {
max-width: 90% !important;
width: 90% !important;
}
/* Also ensure the modal body has proper height */
#account_maneger_summary_mail_modal .modal-body,
#member_review_and_summary_mail_modal .modal-body {
min-height: 600px;
padding: 20px;
}
/* If you're using Bootstrap's modal, you might also want to ensure proper positioning */
.modal-dialog {
margin: 1.75rem auto;
}
</style> </style>
<div class="tab-pane fade" id="notification-tab"> <div class="tab-pane fade" id="notification-tab">
<input type="hidden" id="client_id_for_client_branch" value="<?= isset($notification['id']) ? $notification['id'] : '' ?>"/> <input type="hidden" id="client_id_for_client_branch" value="<?= isset($notification['id']) ? $notification['id'] : '' ?>"/>
@ -526,7 +549,7 @@
</div><!-- /.modal --> </div><!-- /.modal -->
<!-- Modal content for the Large example --> <!-- Modal content for the Large example -->
<div class="modal fade" id="account_maneger_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" <!-- <div class="modal fade" id="account_maneger_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true" aria-modal="true" data-backdrop="static"> aria-hidden="true" aria-modal="true" data-backdrop="static">
<div class="modal-dialog modal-full-width"> <div class="modal-dialog modal-full-width">
<div class="modal-content"> <div class="modal-content">
@ -561,7 +584,7 @@
<div class="form-group col-md-2 testmail" style="display: none;"> <div class="form-group col-md-2 testmail" style="display: none;">
<a class="btn btn-primary waves-effect waves-light mr-1 setid" onclick="testMailSend(this)">Test Mail</a> <a class="btn btn-primary waves-effect waves-light mr-1 setid" onclick="testMailSend(this)">Test Mail</a>
</div> </div>
</div> </div> -->
<!-- <div class="form-row" id="rac_rate_dropdown"> <!-- <div class="form-row" id="rac_rate_dropdown">
<div class="form-group col-md-12"> <div class="form-group col-md-12">
@ -574,7 +597,7 @@
</select> </select>
</div> </div>
</div> --> </div> -->
<div class="form-row" id="rac_rate_dropdown"> <!-- <div class="form-row" id="rac_rate_dropdown">
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<select id="account_maneger_summary_mail_modal_customButton" class="form-control" style="border:none;right: 6px;width: auto;position: absolute;z-index: 1;top: 17px;height: 32px;float: right;"> <select id="account_maneger_summary_mail_modal_customButton" class="form-control" style="border:none;right: 6px;width: auto;position: absolute;z-index: 1;top: 17px;height: 32px;float: right;">
<option value="">PlaceHolders</option> <option value="">PlaceHolders</option>
@ -607,11 +630,61 @@
id="btnGridSubmit_2">Submit</button> id="btnGridSubmit_2">Submit</button>
</div> </div>
</form> </form>
</div> -->
<!-- </div>/.modal-content -->
<!-- </div>/.modal-dialog -->
<!-- </div>/.modal -->
<div class="modal fade" id="account_maneger_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true" aria-modal="true" data-backdrop="static">
<div class="modal-dialog modal-full-width">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Member Review and summary mail <span id="nameOfThePolicy"></span></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="text-center" id="no_data"></div>
<form role="form" class="parsley-examples" method="post" id="account_maneger_summary_mail_form" enctype="multipart/form-data">
<div class="form-group">
<div class="form-row" id="rac_rate_dropdown">
<div class="form-group col-md-2">
<label for="emp_code">Template Name</label>
</div>
<div class="form-group col-md-5">
<input type="text" id="template_name" name="template_name" value="Account Maneger Summary Mail" readonly class="form-control" placeholder="Template Name">
</div>
</div>
<div class="form-row" id="rac_rate_dropdown">
<div class="form-group col-md-2">
<label for="emp_code">Subject</label>
</div>
<div class="form-group col-md-5">
<input type="text" id="subject" name="subject" class="form-control" placeholder="Subject">
</div>
<div class="form-group col-md-2 testmail" style="display: none;">
<a class="btn btn-primary waves-effect waves-light mr-1 setid" onclick="testMailSend(this)">Test Mail</a>
</div>
</div><hr>
<!-- Unlayer editor -->
<div class="form-row" id="rac_rate_dropdown">
<div class="form-group col-md-12">
<div id="editor-container" style="height: 300px;width:max-content"></div>
</div>
</div>
<div class="form-group text-right m-b-0">
<button class="btn btn-primary waves-effect waves-light mr-1 preview_button"
id="">Preview</button>
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1"
id="btnGridSubmit_2">Submit</button>
</div>
</div>
</form>
</div> </div>
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->
<!-- Modal content for the Large example --> <!-- Modal content for the Large example -->
<div class="modal fade" id="client_hr_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" <div class="modal fade" id="client_hr_summary_mail_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true" aria-modal="true" data-backdrop="static"> aria-hidden="true" aria-modal="true" data-backdrop="static">
@ -1044,49 +1117,49 @@
} }
}) })
$('#account_maneger_summary_mail_form').submit(function (event) // $('#account_maneger_summary_mail_form').submit(function (event)
{ // {
event.preventDefault(); // event.preventDefault();
var joditEditor = editor4; // var joditEditor = editor4;
if (joditEditor) // if (joditEditor)
{ // {
var mailContent = $(joditEditor.currentPlace.container).find('.jodit-wysiwyg').html(); // var mailContent = $(joditEditor.currentPlace.container).find('.jodit-wysiwyg').html();
var formData = $(this).serializeArray(); // var formData = $(this).serializeArray();
formData.push({ name: 'mailContent', value: mailContent }); // formData.push({ name: 'mailContent', value: mailContent });
formData.push({ name: 'client_id', value: $('#general_PrimaryKey').val() }); // formData.push({ name: 'client_id', value: $('#general_PrimaryKey').val() });
$('.loader').fadeIn(); // $('.loader').fadeIn();
$('.loader-mask').fadeIn(); // $('.loader-mask').fadeIn();
var form_action = '<?= base_url("client/notification/create") ?>'; // var form_action = '<?= base_url("client/notification/create") ?>';
$.ajax({ // $.ajax({
url: form_action, // url: form_action,
type: "POST", // type: "POST",
data: formData, // data: formData,
dataType: 'json', // dataType: 'json',
success: function(res) // success: function(res)
{ // {
$('#account_maneger_summary_mail_modal').find('.close').click(); // $('#account_maneger_summary_mail_modal').find('.close').click();
$('.loader').fadeOut(); // $('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow'); // $('.loader-mask').delay(350).fadeOut('slow');
}, // },
error: function (xhr, status, error) // error: function (xhr, status, error)
{ // {
console.error(xhr.responseText); // console.error(xhr.responseText);
console.error(status, error); // console.error(status, error);
setTimeout(function() // setTimeout(function()
{ // {
$('.loader').fadeOut(); // $('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow'); // $('.loader-mask').delay(350).fadeOut('slow');
toastr.warning('Something Wrong!', 'warning'); // toastr.warning('Something Wrong!', 'warning');
}, 1000); // }, 1000);
} // }
}); // });
} // }
else // else
{ // {
console.error("Jodit editor instance is not defined."); // console.error("Jodit editor instance is not defined.");
} // }
}) // })
$('#client_hr_summary_mail_form').submit(function (event) $('#client_hr_summary_mail_form').submit(function (event)
{ {
@ -1207,7 +1280,7 @@
{ {
var template_name = $(element).attr('id'); var template_name = $(element).attr('id');
if (template_name == "member_welcome_mail" || template_name == "member_reminder_mail" || template_name == "member_ecard_mail" || template_name == "member_review_and_summary_mail" || template_name == "account_maneger_summary_mail" || template_name == "client_hr_summary_mail") if (template_name == "member_welcome_mail" || template_name == "member_reminder_mail" || template_name == "member_ecard_mail" || template_name == "member_review_and_summary_mail" || template_name == "client_hr_summary_mail")
{ {
$('.loader').fadeIn(); $('.loader').fadeIn();
$('.loader-mask').fadeIn(); $('.loader-mask').fadeIn();
@ -1556,6 +1629,323 @@
}); });
} }
</script> </script>
<script>
// Global editor variable
let editor = null;
// Function to check if unlayer is loaded and available
function isUnlayerLoaded() {
return typeof unlayer !== 'undefined' && unlayer !== null;
}
// Enhanced waiting function with better error handling
function waitForUnlayer(callback, maxAttempts = 20) {
let attempts = 0;
const checkUnlayer = setInterval(function() {
attempts++;
console.log("Checking for Unlayer, attempt:", attempts);
if (isUnlayerLoaded()) {
clearInterval(checkUnlayer);
console.log("Unlayer loaded successfully");
callback(true);
} else if (attempts >= maxAttempts) {
clearInterval(checkUnlayer);
console.error("Unlayer failed to load after", attempts, "attempts");
callback(false);
}
}, 1000); // Increased interval to 1 second
}
// Improved editor initialization function
function initializeEditor(callback) {
console.log("Starting editor initialization...");
const editorContainer = document.getElementById('editor-container');
if (!editorContainer) {
console.error("Editor container not found");
if (callback) callback(null);
return;
}
// Ensure the script is loaded
if (!document.querySelector('script[src*="unlayer"]')) {
console.error("Unlayer script is not included in the page");
if (callback) callback(null);
return;
}
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
waitForUnlayer(function(unlayerLoaded) {
if (!unlayerLoaded) {
console.error("Unlayer not available");
if (callback) callback(null);
return;
}
try {
// Destroy existing instance if it exists
if (editor) {
console.log("Destroying existing editor...");
editor.destroy();
editor = null;
}
// Clear the container
editorContainer.innerHTML = '';
// Create new editor instance with error handling
console.log("Creating new editor instance...");
editor = unlayer.createEditor({
id: 'editor-container',
projectId: 263979,
displayMode: "email",
features: {
textEditor: {tables: true },
preview: {enabled: true,deviceOptions: ['desktop', 'mobile']},
// preview: { enabled: true },
imageEditor: { enabled: true },
appearance: {
theme: 'light',
panels: {
tools: { dock: "right" }
}
}
},
branding:false,
tools: {
// Configure any specific tools you need
text: {
enabled: true
},
image: {
enabled: true
}
}
});
// Verify editor initialization
if (!editor || typeof editor.loadDesign !== 'function') {
throw new Error("Editor initialization failed - editor instance is invalid");
}
console.log("Editor initialization completed successfully");
$('.loader').fadeOut();
$('.loader-mask').fadeOut();
if (callback) callback(editor);
} catch (error) {
console.error("Error in editor initialization:", error);
if (callback) callback(null);
$('.loader').fadeOut();
$('.loader-mask').fadeOut();
}
});
}
// Modified template data function with better error handling
function getMailTemplateData(element) {
const template_name = element.id;
const validTemplates = [
"account_maneger_summary_mail",
];
if (!validTemplates.includes(template_name)) {
console.error("Invalid template name:", template_name);
return;
}
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
const primaryKey = $('#general_PrimaryKey').val();
const baseUrl = '<?= base_url("client/notification/getMailTemplateData/") ?>';
const form_action = `${baseUrl}${template_name}/${primaryKey}`;
$.ajax({
url: form_action,
type: "GET",
dataType: 'json',
success: function(res) {
console.log('get Mail Template Data', res);
if (res) {
// Set subject
$(`#${template_name}_form #subject`).val(res.subject || '');
// Initialize editor with retry mechanism
let retryCount = 0;
const initWithRetry = function() {
initializeEditor(function(editorInstance) {
if (!editorInstance && retryCount < 3) {
console.log(`Retrying editor initialization (${retryCount + 1}/3)...`);
retryCount++;
setTimeout(initWithRetry, 1000);
return;
}
if (!editorInstance) {
console.error("Editor initialization failed after retries");
toastr.error('Editor initialization failed. Please refresh the page.');
return;
}
if (res.mail_content_json) {
try {
const design = JSON.parse(res.mail_content_json);
editorInstance.loadDesign(design);
console.log("Design loaded successfully");
$('iframe').on('load', function() {
console.log('Iframe loaded.');
const iframe = $(this);
// Overlay the branding area
const overlay = $('<div>', {
css: {
position: 'absolute',
bottom: '0', // Adjust based on branding position
left: '0',
width: iframe.width(),
height: '50px', // Adjust height to cover branding
backgroundColor: 'white',
zIndex: '9999',
pointerEvents: 'none',
},
});
const iframeParent = iframe.parent();
if (iframeParent.css('position') === 'static') {
iframeParent.css('position', 'relative');
}
iframeParent.append(overlay);
console.log('Overlay added to hide branding.');
});
$(window).on('resize', function () {
overlay.css({
width: iframe.width(),
height: '50px', // Adjust height dynamically if necessary
});
});
} catch (error) {
console.error("Error parsing mail content JSON:", error);
toastr.error('Error loading email template');
}
}
});
};
initWithRetry();
if (res.data) {
addHTMLInput(res.data);
} else {
addHTMLInput();
}
// Update UI elements
$('.testmail').toggle(!!res.id);
$('#attachment_table').toggle(!!res.id);
$('.setid').attr('data-id', res.id || '');
}
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
},
error: function(xhr, status, error) {
console.error("Ajax error:", { status, error, response: xhr.responseText });
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
toastr.error('Failed to load template data');
}
});
}
$('#account_maneger_summary_mail_form').submit(function (event) {
event.preventDefault();
// Check if editor instance exists
if (!editor) {
console.error("Editor not initialized");
toastr.error("Editor not ready. Please try again.");
return;
}
// Use the editor instance instead of unlayer directly
editor.exportHtml(function (data) {
var formData = $('#account_maneger_summary_mail_form').serializeArray();
// Append Unlayer editor data
formData.push({
name: 'mailContent',
value: data.html
});
formData.push({
name: 'client_id',
value: $('#general_PrimaryKey').val()
});
formData.push({
name: 'mailJson',
value: JSON.stringify(data.design)
});
console.log(formData);
// Show loading indicators
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
var form_action = '<?= base_url("client/notification/create") ?>';
$.ajax({
url: form_action,
type: "POST",
data: formData,
dataType: 'json',
success: function(res) {
$('#account_maneger_summary_mail_modal').find('.close').click();
toastr.success('Template saved successfully');
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
toastr.warning('Something Went Wrong!', 'warning');
}, 1000);
}
});
});
});
document.addEventListener("DOMContentLoaded", function () {
const observer = new MutationObserver(() => {
const brandingElement = document.querySelector('#editor-container .blockbuilder-branding');
if (brandingElement) {
brandingElement.remove(); // Remove the branding element
}
});
// Start observing the editor container for changes
const editorContainer = document.getElementById('editor-container');
if (editorContainer) {
observer.observe(editorContainer, { childList: true, subtree: true });
}
});
</script>