You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

974 lines
43 KiB

<!DOCTYPE html>
<html lang="en" dir="">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
<style>
.required{
color: red;
}
/* Custom CSS for SweetAlert2 */
.swal-container {
display: flex;
align-items: center;
justify-content: center;
}
.swal-popup {
width: 80% !important; /* Adjust width as needed */
max-width: 600px; /* Max width for larger screens */
border-radius: 8px; /* Optional: round the corners */
padding: 2rem; /* Optional: adjust padding */
}
.swal-confirm-button {
background-color: #dc3545; /* Example: red background for delete button */
border: none;
color: #fff;
}
.swal-cancel-button {
background-color: #6c757d; /* Example: gray background for cancel button */
border: none;
color: #fff;
}
#addcategoryform .modal-body {
max-height: 500px; /* Set max height */
overflow-y: auto; /* Enable vertical scrolling when content overflows */
}
#editCategoryModal .modal-body {
max-height: 500px; /* Set max height */
overflow-y: auto; /* Enable vertical scrolling when content overflows */
}
</style>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrapper">
<!-- header top menu Start -->
<header th:replace="~{fragments/modules/base/header :: header}"></header>
<!-- header top menu end -->
<div class="page-wrap">
<!--=============== Left Menu side Start ================-->
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
<!--=============== Left side End ================-->
<div class="main-content">
<div class="container-fluid">
<div class="page-header mb-2">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="fas fa-th-large bg-blue"></i>
<div class="d-inline">
<h5>Add Category</h5>
<span>1913 Add Category</span>
</div>
</div>
</div>
<div class="col-lg-4">
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/gcc/index"><i
class="ik ik-home"></i></a></li>
<li class="breadcrumb-item" aria-current="page">1913 Campaign</li>
<li class="breadcrumb-item active" aria-current="page">Add Category</li>
</ol>
</nav>
</div>
</div>
</div>
<h4 class="h4 text-right text-mute" style="font-size: 12px;">
Auot refresh in <font id="refresh-countdown">00</font> seconds
</h4>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-block">
<div class="page-header-title" >
<h5 style="margin: 0;font-weight: bold;">Category List</h5><hr>
</div>
<div>
<table id="categoryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
<thead class="thead-dark">
<tr role="row">
<th class="text-center no-sort">S.No</th>
<th class="text-center">Category</th>
<th class="text-center no-sort">Action</th>
</tr>
</thead>
<tbody>
<tr th:each="category, iterStat : ${categories}">
<td class="text-center" th:text="${iterStat.index + 1}"></td>
<td class="text-center" th:text="${category.category_name}"></td>
<td class="text-center">
<a href="#" th:onclick="return callEdit([[${category.category_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
<i class="ik ik-edit f-16 mr-15 text-green"></i>
</a>
<!-- Delete button -->
<a href="javascript:void(0);" th:onclick="return openDeleteModal([[${category.category_id}]])" title="Delete">
<i class="ik ik-trash-2 f-16 text-red ml-4"></i>
</a>
</td>
</tr>
</tbody>
<tfoot class="thead-dark">
<tr>
<th class="text-center no-sort">S.No</th>
<th class="text-center">Category</th>
<th class="text-center no-sort">Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</div>
</div>
<!-- Category Modal Form -->
<div class="modal fade" id="addcategoryform" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Category Form</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<form id="addCategoryForm">
<div class="form-group">
<label>Category Name <span class="required">*</span></label>
<input type="text" class="form-control" id="categoryname" name="categoryname" placeholder="Enter Category Name" required>
</div>
<div id="columnInputs">
<label>Column Name <span class="required">*</span></label>
<div class="form-group row column-group">
<div class="col-sm-10">
<input type="text" class="form-control columnname" name="columns[]" placeholder="Column Name" required>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger remove-column">&times;</button>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="addMoreColumn">+ Add Column</button>
<button type="button" class="btn btn-success" id="createCategoryBtn">Save Category</button>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editCategoryModalLabel">Edit Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="editCategoryForm">
<input type="hidden" id="categoryId" name="categoryId">
<div class="form-group">
<label for="showcategoryName">Category Name <span class="required">*</span></label>
<input type="text" class="form-control" id="showcategoryName" name="showcategoryName" required readonly="readonly">
</div>
<div id="editColumnInputs"></div>
<div id="editaddColumnInputs"></div>
<hr>
<button type="button" class="btn btn-success" id="addMoreEditColumn">+ Add Column</button>
<button type="button" class="btn btn-primary" id="updateCategoryButton">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document"> <!-- Add modal-lg here -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteCategoryModalLabel">Confirm Deletion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this category?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirmDeleteButton">Delete</button>
</div>
</div>
</div>
</div>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script>
<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function () {
// Initialize DataTables with export buttons
var buttons = [
{
extend: 'pageLength',
className: 'btn btn-warning'
},
{
title: 'Data export',
extend: 'copyHtml5',
text: 'Copy',
className: 'btn btn-secondary'
},
{
extend: 'excelHtml5',
text: 'Excel',
className: 'btn btn-secondary'
},
{
extend: 'csvHtml5',
text: 'CSV',
className: 'btn btn-secondary'
},
{
extend: 'pdfHtml5',
text: 'PDF',
className: 'btn btn-secondary'
},
{
text: '<i class="far fa-plus-square"></i> Add New Category',
className: 'btn btn-warning',
action: function () {
callAdd(); // Now it will work
}
}
];
$('#categoryDatatable').DataTable({
dom: 'Bftip',
columnDefs: [
{ targets: 'no-sort', orderable: false }
],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
],
scrollY: '30vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: buttons,
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: false,
select: false,
processing: false,
});
// Show Modal
function callAdd() {
resetForm();
$('#addcategoryform').modal({ backdrop: 'static', keyboard: false });
$('#addcategoryform').modal('show');
}
// Reset Form
function resetForm() {
$('#addCategoryForm')[0].reset();
$("#columnInputs .column-group:not(:first)").remove();
$(".remove-column").hide();
}
//validateColumns
function validateColumns(columns) {
let columnSet = new Set();
let regex = /^[A-Za-z0-9_ ]+$/; // Allow alphabets, numbers, underscores, and spaces
let invalidRegex = /^[_ ]+$/; // Match column names with only underscores and/or spaces
for (let col of columns) {
if (!regex.test(col)) {
Swal.fire({
title: "Validation Error",
text: "Column names must contain only alphabets (A-Z, a-z), numbers (0-9), underscores (_), and spaces.",
icon: "warning",
confirmButtonText: "OK"
});
return false;
}
if (invalidRegex.test(col)) {
Swal.fire({
title: "Validation Error",
text: "Column names cannot contain only spaces and underscores (_).",
icon: "warning",
confirmButtonText: "OK"
});
return false;
}
let trimmedCol = col.trim().toLowerCase(); // Trim spaces for uniqueness check
if (columnSet.has(trimmedCol)) {
Swal.fire({
title: "Validation Error",
text: "Duplicate column names are not allowed.",
icon: "warning",
confirmButtonText: "OK"
});
return false;
}
columnSet.add(trimmedCol);
}
return true;
}
// Add default fields on page load
/* var defaultFields = `
<div class="form-group row column-group">
<div class="col-sm-10">
<input type="text" class="form-control" name="columns[]" value="name" readonly>
<input type="text" class="form-control" name="columns[]" value="mobilenumber" readonly>
<input type="text" class="form-control" name="columns[]" value="address" readonly>
</div>
</div>`;
$('#columnInputs').append(defaultFields); */
var defaultFields = `
<div class="form-group row column-group">
<div class="col-sm-10">
<input type="text" class="form-control" name="columns[]" value="Name" >
</div>
</div>
<div class="form-group row column-group">
<div class="col-sm-10">
<input type="text" class="form-control" name="columns[]" value="Mobilenumber" >
</div>
</div>
</div>`;
$('#columnInputs').append(defaultFields);
$('#addcategoryform').on('shown.bs.modal', function () {
$('#columnInputs').html(''); // Clear existing columns
$('#columnInputs').append(defaultFields); // Append default values
});
$('#addcategoryform').on('hidden.bs.modal', function () {
$('#categoryname').val(""); // Reset category name
$('#columnInputs').html(""); // Clear all columns
});
$('#editCategoryModal').on('hidden.bs.modal', function () {
$('#editColumnInputs').html(''); // Clear all columns when modal is closed
$('#editaddColumnInputs').html(''); // Clear additional columns if applicable
});
// Add More Column Fields
$('#addMoreColumn').click(function () {
var newColumnField = `
<div class="form-group row column-group">
<div class="col-sm-10">
<input type="text" class="form-control columnname" name="columns[]" placeholder="Column Name" required>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger remove-column">&times;</button>
</div>
</div>`;
$('#columnInputs').append(newColumnField);
$('.remove-column').show();
});
// Remove Column Field
$(document).on('click', '.remove-column', function () {
$(this).closest('.column-group').remove();
if ($('.column-group').length === 1) {
$('.remove-column').hide();
}
});
$('#createCategoryBtn').click(function () {
var categoryName = $('#categoryname').val().trim();
//var columnNames = $('.columnname').map(function () {
var columnNames = $('input[name="columns[]"]').map(function () {
return $(this).val().trim();
}).get().filter(name => name !== "");
console.log("categoryName=", categoryName);
console.log("columnNames=", columnNames);
if (categoryName === "") {
Swal.fire({
title: "Validation Error",
text: "Please enter a category name.",
icon: "warning",
confirmButtonText: "OK"
});
return;
}
if (columnNames.length < 2) {
Swal.fire({
title: "Validation Error",
text: "Please enter at least two column names.",
icon: "warning",
confirmButtonText: "OK"
});
return;
}
if (!validateColumns(columnNames)) {
return;
}
$('#createCategoryBtn').prop('disabled', true).text('Processing...');
$.ajax({
url: '/gcc/api/category/save',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ categoryname: categoryName, columns: columnNames }),
success: function (response) {
$('#createCategoryBtn').prop('disabled', false).text('Save Category');
Swal.fire({
title: "Success",
text: "Category saved successfully!",
icon: "success",
confirmButtonText: "OK"
}).then(function () {
$('#addcategoryform').modal('hide');
$('#createCategoryBtn').prop('disabled', false).text('Save Category');
location.reload();
});
},
error: function (error) {
$('#createCategoryBtn').prop('disabled', false).text('Save Category');
Swal.fire({
title: "Error",
text: error.responseText,
icon: "error",
confirmButtonText: "OK"
});
}
});
});
/* $('#createCategoryBtn').click(function () {
var categoryName = $('#categoryname').val().trim();
var columnNames = $('.columnname').map(function () {
return $(this).val().trim();
}).get().filter(name => name !== "");
console.log("categoryName=========="+categoryName);
console.log("columnNames=========="+columnNames);
// Validation: Ensure category name is not empty and at least two columns are provided
if (categoryName === "") {
Swal.fire({
title: 'Validation Error',
text: 'Please enter a category name.',
icon: 'warning',
confirmButtonText: 'OK'
});
return;
}
if (columnNames.length < 2) {
Swal.fire({
title: 'Validation Error',
text: 'Please enter at least two column names.',
icon: 'warning',
confirmButtonText: 'OK'
});
return;
}
// Proceed with AJAX request if validation passes
$.ajax({
url: '/gcc/api/category/save',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ categoryname: categoryName, columns: columnNames }),
success: function (response) {
Swal.fire({
title: 'Success',
text: 'Category saved successfully!',
icon: 'success',
confirmButtonText: 'OK'
}).then(function () {
$('#addcategoryform').modal('hide');
location.reload();
});
},
error: function (error) {
Swal.fire({
title: 'Error',
text: error.responseText,
icon: 'error',
confirmButtonText: 'OK'
});
}
});
}); */
// Function to fetch category details and populate the edit modal
window.callEdit = function (categoryId) {
fetchCategoryDetails(categoryId);
return false;
};
function fetchCategoryDetails(categoryId) {
$.ajax({
url: '/gcc/api/category/showcategoryId',
type: 'GET',
data: { category_id: categoryId },
success: function (response) {
if (response) {
$('#categoryId').val(response.category_id);
$('#showcategoryName').val(response.category_name);
$('#editColumnInputs').empty();
$('#editaddColumnInputs').empty();
if (response.columns && response.columns.length > 0) {
response.columns.forEach(col => addEditColumnField(col.id, col.column_name));
} else {
addEditColumnField();
}
$('#editCategoryModal').modal({ backdrop: 'static', keyboard: false });
} else {
Swal.fire('Error', 'Category not found.', 'error');
}
},
error: function (xhr) {
Swal.fire('Error', 'Error fetching category details: ' + xhr.responseText, 'error');
}
});
}
function addEditColumnField(id = "", value = "", containerId = "editColumnInputs") {
let removeButton = containerId === "editColumnInputs"
? `<button type="button" class="btn btn-danger" onclick="removeColumn(this, '${id}')">&times;</button>`
: `<button type="button" class="btn btn-danger remove-column">&times;</button>`;
let columnField = `
<div class="form-group row column-group">
<input type="hidden" class="showcolumnId" value="${id}">
<div class="col-sm-10">
<input type="text" class="form-control showcolumnname" name="columns[]" placeholder="Column Name" value="${value}" required>
</div>
<div class="col-sm-2">
${removeButton}
</div>
</div>`;
$('#' + containerId).append(columnField);
}
$('#addMoreEditColumn').click(function () {
addEditColumnField("", "", "editaddColumnInputs");
});
$(document).ready(function () {
window.removeColumn = function (button, columnId) {
if (columnId) {
Swal.fire({
title: "Are you sure?",
text: "This column will be permanently deleted!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!"
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: '/gcc/api/category/deleteColumnById',
type: 'POST',
data: { columnId: columnId },
success: function (response) {
if (response.success) {
$(button).closest('.column-group').remove();
Swal.fire({
title: "Deleted!",
text: "Column has been removed.",
icon: "success",
timer: 2000, // Auto-close after 2 seconds
showConfirmButton: false
});
} else {
Swal.fire({
title: "Error",
text: "Unable to delete column. Try again.",
icon: "error",
timer: 2000, // Auto-close after 2 seconds
showConfirmButton: false
});
}
},
error: function (xhr) {
Swal.fire("Error", "Something went wrong: " + xhr.responseText, "error");
}
});
}
});
} else {
console.log("columnId=" + columnId);
Swal.fire("Error!", "Problem in columnId", "error");
}
};
});
// Event to remove column input dynamically
$(document).on('click', '.remove-column', function () {
$(this).closest('.column-group').remove();
});
$('#updateCategoryButton').click(function () {
let categoryId = parseInt($('#categoryId').val(), 10);
let existingColumns = [];
$('#editColumnInputs .column-group').each(function () {
let columnId = parseInt($(this).find('.showcolumnId').val(), 10);
let columnName = $(this).find('.showcolumnname').val();
if (columnName.trim() !== "") {
existingColumns.push({ id: columnId, name: columnName });
}
});
let newColumns = [];
$('#editaddColumnInputs .column-group').each(function () {
let columnName = $(this).find('.showcolumnname').val();
if (columnName.trim() !== "") {
newColumns.push({ name: columnName });
}
});
console.log("Category ID:", categoryId);
console.log("Existing Columns:", existingColumns);
console.log("New Columns:", newColumns);
let allColumnNames = [...existingColumns.map(col => col.name), ...newColumns.map(col => col.name)];
console.log("allColumnNames="+allColumnNames);
if ((existingColumns.length + newColumns.length) < 2) {
Swal.fire({
title: "Info",
text: "You must have at least 2 columns!",
icon: "info",
confirmButtonText: "OK"
});
return;
}
if (!validateColumns(allColumnNames)) {
return;
}
$('#updateCategoryButton').prop('disabled', true).text('Processing');
$.ajax({
url: '/gcc/api/category/updateCategoryColumns',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ categoryId: categoryId, columns: existingColumns }),
success: function (response) {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
if (response.success) {
Swal.fire({
title: "Success!",
text: "Category updated successfully!",
icon: "success",
showConfirmButton: false,
timer: 2000
}).then(() => {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
location.reload();
});
} else {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
Swal.fire({
title: "Error",
text: "Unable to update column. Try again.",
icon: "error",
showConfirmButton: true
});
}
},
error: function (xhr) {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
Swal.fire("Error", "Failed to update category: " + xhr.responseText, "error");
}
});
if (newColumns.length > 0) {
$('#updateCategoryButton').prop('disabled', true).text('Processing');
$.ajax({
url: '/gcc/api/category/addNewColumns',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ categoryId: categoryId, columns: newColumns }),
success: function (response) {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
if (response.success) {
Swal.fire({
title: "Success!",
text: "Category updated successfully!",
icon: "success",
showConfirmButton: false,
timer: 2000
}).then(() => {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
location.reload();
});
} else {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
Swal.fire({
title: "Error",
text: "Unable to update column. Try again.",
icon: "error",
showConfirmButton: true
});
}
},
error: function (xhr) {
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
Swal.fire("Error", "Failed to add new columns: " + xhr.responseText, "error");
}
});
$('#updateCategoryButton').prop('disabled', false).text('Save Changes');
}
});
/* $('#updateCategoryButton').click(function () {
let categoryId = parseInt($('#categoryId').val(), 10);
// Collect existing columns
let existingColumns = [];
$('#editColumnInputs .column-group').each(function () {
let columnId = parseInt($(this).find('.showcolumnId').val(), 10);
let columnName = $(this).find('.showcolumnname').val();
if (columnName.trim() !== "") {
existingColumns.push({ id: columnId, name: columnName });
}
});
// Collect new columns
let newColumns = [];
$('#editaddColumnInputs .column-group').each(function () {
let columnName = $(this).find('.showcolumnname').val();
if (columnName.trim() !== "") {
newColumns.push({ name: columnName });
}
});
// Debugging: Log values before AJAX calls
console.log("Category ID:", categoryId);
console.log("Existing Columns:", existingColumns);
console.log("New Columns:", newColumns);
if ((existingColumns.length + newColumns.length) < 2) {
Swal.fire({
title: "Info",
text: "You must have at least 2 columns!",
icon: "info",
confirmButtonText: "OK"
});
return; // Stop execution if condition fails
}
// 1️⃣ Send existing columns update AJAX
$.ajax({
url: '/gcc/api/category/updateCategoryColumns',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ categoryId: categoryId, columns: existingColumns }),
success: function (response) {
if (response.success) {
Swal.fire({
title: "Success!",
text: "Category updated successfully!",
icon: "success",
showConfirmButton: false,
timer: 2000 // Show message for 2 seconds
}).then(() => {
location.reload(); // Reload the page after SweetAlert closes
});
} else {
Swal.fire({
title: "Error",
text: "Unable to update column. Try again.",
icon: "error",
showConfirmButton: true
});
}
},
error: function (xhr) {
Swal.fire("Error", "Failed to update category: " + xhr.responseText, "error");
}
});
// 2️⃣ Send new columns addition AJAX (only if there are new columns)
if (newColumns.length > 0) {
$.ajax({
url: '/gcc/api/category/addNewColumns',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ categoryId: categoryId, columns: newColumns }),
success: function (response) {
if (response.success) {
Swal.fire({
title: "Success!",
text: "Category updated successfully!",
icon: "success",
showConfirmButton: false,
timer: 2000 // Show message for 2 seconds
}).then(() => {
location.reload(); // Reload the page after SweetAlert closes
});
} else {
Swal.fire({
title: "Error",
text: "Unable to update column. Try again.",
icon: "error",
showConfirmButton: true
});
}
},
error: function (xhr) {
Swal.fire("Error", "Failed to add new columns: " + xhr.responseText, "error");
}
});
}
}); */
window.openDeleteModal = function (categoryId) {
$('#categoryId').val(categoryId); // Set the categoryId before showing the modal
fetchDeleteCategoryDetails();
return false; // Prevent default anchor click behavior
};
function fetchDeleteCategoryDetails() {
Swal.fire({
title: 'Confirm Deletion',
text: 'Are you sure you want to delete this category?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Delete',
cancelButtonText: 'Cancel',
customClass: {
container: 'swal-container',
popup: 'swal-popup',
confirmButton: 'swal-confirm-button',
cancelButton: 'swal-cancel-button'
},
width: '80%',
padding: '3rem',
heightAuto: false
}).then((result) => {
if (result.isConfirmed) {
// Call the function to delete the category
deleteCategory();
}
});
}
function deleteCategory() {
var categoryId = $('#categoryId').val(); // Ensure this is correctly set
console.log("Deleting category with ID: " + categoryId); // Debugging line
$.ajax({
url: '/gcc/api/category/delete/' + categoryId,
type: 'DELETE',
success: function (response) {
Swal.fire({
title: 'Deleted!',
text: 'Category has been deleted.',
icon: 'success'
}).then(() => {
location.reload(); // Refresh the page or update the UI as needed
});
},
error: function (xhr, status, error) {
Swal.fire({
title: 'Error',
text: 'Error deleting category: ' + xhr.responseText,
icon: 'error'
});
}
});
}
});
</script>
</body>
</html>