495 lines
21 KiB
PHP
495 lines
21 KiB
PHP
<style>
|
||
.dataTables_filter {
|
||
position: absolute;
|
||
}
|
||
.dataTables_length label {height: 21px !important;}
|
||
|
||
.custom-dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
background-color: #ffffff !important;
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
border-radius: 0.25rem;
|
||
padding: 0.5rem 0;
|
||
min-width: 10rem;
|
||
z-index: 9999;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.custom-dropdown-menu .dropdown-item {
|
||
display: block !important;
|
||
width: 100% !important;
|
||
padding: 0.5rem 1rem !important;
|
||
color: #212529 !important;
|
||
text-decoration: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.custom-dropdown-menu .dropdown-item:hover {
|
||
background-color: #f8f9fa !important;
|
||
color: #16181b !important;
|
||
cursor: pointer !important;
|
||
}
|
||
</style>
|
||
|
||
<!-- End ADD and EDIT Page HTML -->
|
||
<div class="row" id="List-page">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<table data-custom-table-css="table" class="table table-sm m-0 table-centered dt-responsive nowrap w-100" cellspacing="a" id="user-table">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="font-weight-medium">S.No.</th>
|
||
<th class="font-weight-medium">Category</th>
|
||
<th class="font-weight-medium">Question</th>
|
||
<!-- <th class="font-weight-medium">Answer</th> -->
|
||
<th class="font-weight-medium">Status</th>
|
||
<th class="font-weight-medium">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php if(!empty($faq_list)) {
|
||
// <?php if(isset($faq_list)) {
|
||
$slno = 1; ?>
|
||
<?php foreach($faq_list as $index => $row) { ?>
|
||
<tr>
|
||
<td class="text-center"><?= $slno++; ?></td>
|
||
<td><?php $category = $row['category'] ? $row['category'] : 'N/A';
|
||
echo (strlen($category) > 50)
|
||
? htmlspecialchars(substr($category, 0, 50)) . "..."
|
||
: htmlspecialchars($category);
|
||
?></td>
|
||
<td><?php
|
||
$question_text = $row['question'] ? strip_tags($row['question']) : 'N/A';
|
||
echo (strlen($question_text) > 50)
|
||
? htmlspecialchars(substr($question_text, 0, 50)) . "..."
|
||
: htmlspecialchars($question_text);
|
||
?></td>
|
||
<!-- <td><?php $answer = $row['answer'] ? $row['answer'] : 'N/A';
|
||
echo (strlen($answer) > 50)
|
||
? htmlspecialchars(substr($answer, 0, 50)) . "..."
|
||
: htmlspecialchars($answer);
|
||
?></td> -->
|
||
<td>
|
||
<span class="<?php if($row['is_active'] == 1){ echo 'badge badge-primary'; }else{ echo 'badge badge-danger'; } ?>">
|
||
<?php if($row['is_active'] == 1){ echo 'Active'; }else{ echo 'In-Active'; } ?>
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<div class="btn-group dropdown" style="position: relative !important;left:0px !important;top:0px !important;">
|
||
<a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
|
||
<div class="dropdown-menu dropdown-menu-right" style="cursor: pointer;">
|
||
<a class="dropdown-item" data-id="<?= $row['id']; ?>" onclick="handleSaveEditAndDelete('edit', this)">
|
||
<i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit
|
||
</a>
|
||
<?php if ($row['is_active'] == 1): ?>
|
||
<a class="dropdown-item" data-id="<?= $row['id']; ?>" onclick="handleSaveEditAndDelete('remove', this)">
|
||
<i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete
|
||
</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<?php } } ?>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- modal content -->
|
||
<div id="con-close-modal" class="modal fade app-font-family" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" data-backdrop="static">
|
||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="modalLabel">Add FAQ Details</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body p-4">
|
||
<form class="parsley-examples" id="FAQForm" enctype="multipart/form-data">
|
||
<input type="hidden" name="faq_id" id="faq_id"/>
|
||
<div class="form-group">
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="category">Category<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="category" name="category" placeholder="Enter Category" required>
|
||
<small class="form-text text-muted text-end text-right">
|
||
Please enter the sub-category separated by '/'. For Example: Category / Category-1 / Category-2
|
||
</small>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="question">Question<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="question" name="question" placeholder="Enter Question" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="answer">Answer<span class="text-danger">*</span></label>
|
||
<!-- <textarea id="answer" name="answer" class="form-control" required></textarea> -->
|
||
<textarea id="answer" name="answer" class="form-control answer" rows="7">
|
||
<!-- <h5>Hello {USER_NAME}, </h5>
|
||
<p>We create simple, flat & responsive custom mail template.</p>
|
||
<p>Please, write text here!</p> -->
|
||
</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group text-right m-b-0">
|
||
<button type="submit" class="btn app-btn-secondary" id="btnSubmit">Submit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script> -->
|
||
<script>
|
||
|
||
// let faqEditor;
|
||
let editor;
|
||
|
||
|
||
|
||
|
||
|
||
// ClassicEditor
|
||
// .create(document.querySelector('#answer'))
|
||
// .then(editor => {
|
||
// faqEditor = editor; // Save the instance here
|
||
// })
|
||
// .catch(error => { console.error(error); });
|
||
|
||
var table;
|
||
$(document).ready(function () {
|
||
//JoDit editor
|
||
const editorConfig = {
|
||
buttons: [
|
||
"undo", "redo", "|",
|
||
"paragraph",
|
||
"bold", "italic", "strikethrough", "|",
|
||
"superscript", "subscript", "|",
|
||
"ul", "ol", "|",
|
||
"outdent", "indent", "|",
|
||
"blockquote", "table", "|",
|
||
"align", "fontsize", "|",
|
||
"source"
|
||
],
|
||
controls: {
|
||
paragraph: {
|
||
list: {
|
||
p: "Normal",
|
||
h1: "Heading 1",
|
||
h2: "Heading 2",
|
||
h3: "Heading 3",
|
||
h4: "Heading 4"
|
||
}
|
||
}
|
||
},
|
||
fontsize: ["8px", "10px", "12px", "14px", "16px", "18px", "20px", "22px", "24px"], // Font sizes in pixels
|
||
showPlaceholder: false,
|
||
toolbarButtonSize: "small",
|
||
toolbarAdaptive: false,
|
||
saveHeightInStorage: true,
|
||
minHeight: 400,
|
||
height: 400, // Optional fixed height
|
||
defaultMode: "1", // Start in WYSIWYG mode
|
||
enableDragAndDropFileToEditor: true, // Allow file uploads via drag and drop
|
||
placeholder: "Start typing here...", // Optional placeholder text
|
||
};
|
||
|
||
|
||
// 2. Initialize
|
||
editor = Jodit.make("#answer", editorConfig);
|
||
|
||
var ticketsTable = $('#user-table');
|
||
ticketsTable.DataTable({
|
||
scrollX: true,
|
||
// dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
|
||
// "<'row'<'col-sm-12'tr>>" +
|
||
// "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
|
||
dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
|
||
"<'row'<'col-sm-12'tr>>" +
|
||
"<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
|
||
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
|
||
buttons: [
|
||
{
|
||
text: 'Add',
|
||
className: 'btn app-btn-primary mr-2',
|
||
action: function(e, dt, node, config) {
|
||
resetValues();openModal();
|
||
}
|
||
},
|
||
{
|
||
extend: 'collection',
|
||
text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
|
||
className: 'btn app-btn-secondary ',
|
||
buttons: [
|
||
{
|
||
extend: 'csv',
|
||
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
|
||
title: 'FAQ-List',
|
||
className: 'app-btn-primary ',
|
||
exportOptions: {
|
||
columns: ':not(:last-child)'
|
||
},
|
||
}
|
||
]
|
||
}
|
||
],
|
||
language: {
|
||
search: `
|
||
<div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
|
||
_INPUT_
|
||
<i class="mdi mdi-magnify datatable-search-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
|
||
<i class="mdi mdi-close-circle datatable-clear-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
|
||
</div>`,
|
||
searchPlaceholder: "Search",
|
||
emptyTable: '<div class="text-center text-muted">No Data found</div>'
|
||
},
|
||
paging: true, // Enable pagination
|
||
pageLength: 10, // Set default number of rows per page (optional)
|
||
// ordering: false,
|
||
});
|
||
});
|
||
|
||
$('.close').click(function(){ resetValues(); })
|
||
|
||
function openModal(){
|
||
var myModal = new bootstrap.Modal(document.getElementById('con-close-modal'));
|
||
myModal.show();
|
||
}
|
||
|
||
function handleSaveEditAndDelete(type = 'submit', el = null) {
|
||
|
||
let form = document.getElementById('FAQForm');
|
||
let url = '<?= base_url('FAQ') ?>';
|
||
let method = "POST";
|
||
let faq_id = el ? $(el).data('id') : null;
|
||
|
||
let formData;
|
||
|
||
if (type === 'submit') {
|
||
// CREATE FORMDATA FROM FORM
|
||
formData = new FormData(form);
|
||
formData.set('return_type', 'web');
|
||
|
||
} else if (type == 'edit') {
|
||
method = "GET";
|
||
if (faq_id) url += '?faq_id=' + faq_id ;
|
||
$('#modalLabel').text('Edit FAQ Details');
|
||
$('#FAQForm')[0].reset();
|
||
|
||
} else if (type == 'remove') {
|
||
method = "DELETE";
|
||
if (faq_id) url += '?faq_id=' + faq_id ;
|
||
}
|
||
|
||
$('.loader, .loader-mask').fadeIn();
|
||
|
||
$.ajax({
|
||
url: url,
|
||
type: method,
|
||
data: (type === 'submit') ? formData : null,
|
||
processData: false,
|
||
contentType: false,
|
||
dataType: 'json',
|
||
success: function (response) {
|
||
console.log('Response:', response);
|
||
if (response.status === 'success' || response.status === true) {
|
||
if (type == 'edit') {
|
||
let record = response.data.faq_list[0]; // single record
|
||
appendEditData(record);
|
||
} else if(type == 'remove'){
|
||
toastr.success(response.message, 'Success');
|
||
// if(el) $(el).closest('tr').remove();
|
||
window.location.reload();
|
||
// window.location.href = "<?= base_url('FAQ?return_type=web') ?>";
|
||
} else if(type == 'submit'){
|
||
toastr.success(response.message, 'Success');
|
||
var myModal = new bootstrap.Modal(document.getElementById('con-close-modal'));
|
||
myModal.hide();
|
||
$('#FAQForm')[0].reset();
|
||
window.location.reload();
|
||
}
|
||
} else {
|
||
toastr.warning(response.message, 'Warning');
|
||
}
|
||
$('.loader, .loader-mask').fadeOut();
|
||
},
|
||
error: function (xhr, status, error) {
|
||
$('.loader, .loader-mask').fadeOut();
|
||
if (xhr.status === 400) {
|
||
let response = JSON.parse(xhr.responseText);
|
||
let errorMessages = "";
|
||
let seenMessages = []; // Array to store unique messages
|
||
if (response.errors) {
|
||
$.each(response.errors, function (field, message) {
|
||
if (!seenMessages.includes(message)) {
|
||
errorMessages += `• ${message}<br>`;
|
||
seenMessages.push(message); // Mark this message as "seen"
|
||
}
|
||
});
|
||
toastr.error(errorMessages, 'Validation Error', { "allowHtml": true });
|
||
} else {
|
||
toastr.warning(response.message || 'Validation failed', 'Warning');
|
||
}
|
||
} else if (xhr.status === 403) {
|
||
let response = JSON.parse(xhr.responseText);
|
||
toastr.error(response.message, 'Security Policy');
|
||
} else if (xhr.status === 500) {
|
||
toastr.error('Something went wrong . Please try again later.', 'Server Error');
|
||
} else {
|
||
toastr.error('An unexpected error occurred. Please try again later.', 'Error');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function resetValues(){
|
||
$('#modalLabel').text('Add FAQ Details');
|
||
$('#FAQForm')[0].reset();
|
||
if (typeof editor !== 'undefined') {
|
||
editor.value = '';
|
||
}
|
||
}
|
||
|
||
|
||
function appendEditData(data) {
|
||
$('#FAQForm')[0].reset();
|
||
$('#faq_id').val(data.id);
|
||
$('#category').val(data.category);
|
||
// Safely set the question value by stripping any HTML tags
|
||
$('#question').val($('<div/>').html(data.question || '').text());
|
||
if (editor) {
|
||
editor.value = data.answer || '';
|
||
}
|
||
openModal();
|
||
}
|
||
|
||
|
||
$('#FAQForm').on('submit', function(e) {
|
||
e.preventDefault();
|
||
const form = this;
|
||
|
||
// HTML5 built-in validation
|
||
if (!form.checkValidity()) {
|
||
form.reportValidity(); // shows required/pattern tooltips
|
||
return;
|
||
}
|
||
|
||
if (typeof editor !== 'undefined') {
|
||
// Strip HTML tags and trim whitespace to see if there is actual text
|
||
const plainText = editor.value.replace(/<[^>]*>/g, '').trim();
|
||
|
||
// Check if it's truly empty or just contains empty tags like <p><br></p>
|
||
if (editor.value === '' || plainText === '') {
|
||
toastr.warning("Answer is required", 'Warning');
|
||
return; // Stop the function here
|
||
}
|
||
}
|
||
|
||
// If valid, submit via AJAX
|
||
handleSaveEditAndDelete('submit');
|
||
});
|
||
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const table = document.getElementById("user-table");
|
||
|
||
// Create custom dropdown
|
||
function createCustomDropdown(row) {
|
||
// Get the original dropdown items
|
||
const originalDropdown = row.querySelector('.dropdown-menu');
|
||
if (!originalDropdown) return null;
|
||
|
||
// Create new dropdown with proper background and spacing
|
||
const customDropdown = document.createElement('div');
|
||
customDropdown.className = 'custom-dropdown-menu';
|
||
|
||
// Copy inner content while maintaining icon alignment
|
||
customDropdown.innerHTML = originalDropdown.innerHTML;
|
||
|
||
return customDropdown;
|
||
}
|
||
|
||
let activeDropdown = null;
|
||
|
||
// Add click event listener to rows
|
||
table.querySelectorAll("tbody tr").forEach(row => {
|
||
const customDropdown = createCustomDropdown(row);
|
||
if (!customDropdown) return;
|
||
|
||
// Append the custom dropdown to the body
|
||
document.body.appendChild(customDropdown);
|
||
|
||
row.addEventListener("click", function(event) {
|
||
// Ignore clicks on the action column
|
||
if (event.target.closest('td:last-child')) {
|
||
return;
|
||
}
|
||
|
||
// Hide any active dropdown
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
}
|
||
|
||
// Get click position
|
||
const rect = event.target.getBoundingClientRect();
|
||
|
||
// Position the dropdown with some offset
|
||
customDropdown.style.display = 'block';
|
||
customDropdown.style.position = 'fixed';
|
||
customDropdown.style.left = `${rect.left}px`;
|
||
customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
|
||
|
||
// Set as active dropdown
|
||
activeDropdown = customDropdown;
|
||
|
||
event.stopPropagation();
|
||
});
|
||
|
||
// Preserve click handlers and add auto-close
|
||
customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
const onclickAttr = this.getAttribute('onclick');
|
||
if (onclickAttr) {
|
||
eval(onclickAttr);
|
||
}
|
||
|
||
const href = this.getAttribute('href');
|
||
if (href && href !== '#') {
|
||
window.location.href = href;
|
||
}
|
||
|
||
// Close the dropdown after handling the click
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
activeDropdown = null;
|
||
}
|
||
|
||
e.stopPropagation();
|
||
});
|
||
});
|
||
});
|
||
|
||
// Close dropdown when clicking outside
|
||
document.addEventListener("click", function() {
|
||
if (activeDropdown) {
|
||
activeDropdown.style.display = 'none';
|
||
activeDropdown = null;
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|