Update Master Data
This commit is contained in:
@@ -0,0 +1,793 @@
|
||||
/**
|
||||
* Dashboard Analytics
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
let cardColor, headingColor, fontFamily, labelColor;
|
||||
cardColor = config.colors.cardColor;
|
||||
labelColor = config.colors.textMuted;
|
||||
headingColor = config.colors.headingColor;
|
||||
|
||||
// swiper loop and autoplay
|
||||
// --------------------------------------------------------------------
|
||||
const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
|
||||
if (swiperWithPagination) {
|
||||
new Swiper(swiperWithPagination, {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Average Daily Sales
|
||||
// --------------------------------------------------------------------
|
||||
const averageDailySalesEl = document.querySelector('#averageDailySales'),
|
||||
averageDailySalesConfig = {
|
||||
chart: {
|
||||
height: 105,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent'
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
colors: [config.colors.success],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.4,
|
||||
gradientToColors: [config.colors.cardColor],
|
||||
opacityTo: 0.1,
|
||||
stops: [0, 100]
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [500, 160, 930, 670]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
show: true,
|
||||
lines: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1387,
|
||||
options: {
|
||||
chart: {
|
||||
height: 80
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
chart: {
|
||||
height: 123
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof averageDailySalesEl !== undefined && averageDailySalesEl !== null) {
|
||||
const averageDailySales = new ApexCharts(averageDailySalesEl, averageDailySalesConfig);
|
||||
averageDailySales.render();
|
||||
}
|
||||
|
||||
// Earning Reports Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const weeklyEarningReportsEl = document.querySelector('#weeklyEarningReports'),
|
||||
weeklyEarningReportsConfig = {
|
||||
chart: {
|
||||
height: 161,
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '60%',
|
||||
columnWidth: '38%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 4,
|
||||
distributed: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -30,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [40, 65, 50, 45, 90, 55, 70]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 199
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof weeklyEarningReportsEl !== undefined && weeklyEarningReportsEl !== null) {
|
||||
const weeklyEarningReports = new ApexCharts(weeklyEarningReportsEl, weeklyEarningReportsConfig);
|
||||
weeklyEarningReports.render();
|
||||
}
|
||||
|
||||
// Support Tracker - Radial Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const supportTrackerEl = document.querySelector('#supportTracker'),
|
||||
supportTrackerOptions = {
|
||||
series: [85],
|
||||
labels: ['Completed Task'],
|
||||
chart: {
|
||||
height: 337,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 10,
|
||||
startAngle: -140,
|
||||
endAngle: 130,
|
||||
hollow: {
|
||||
size: '65%'
|
||||
},
|
||||
track: {
|
||||
background: cardColor,
|
||||
strokeWidth: '100%'
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: -20,
|
||||
color: labelColor,
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
value: {
|
||||
offsetY: 10,
|
||||
color: headingColor,
|
||||
fontSize: '38px',
|
||||
fontWeight: '400',
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [config.colors.primary],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.6,
|
||||
stops: [30, 70, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 10
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: 5
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 330
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 769,
|
||||
options: {
|
||||
chart: {
|
||||
height: 280
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof supportTrackerEl !== undefined && supportTrackerEl !== null) {
|
||||
const supportTracker = new ApexCharts(supportTrackerEl, supportTrackerOptions);
|
||||
supportTracker.render();
|
||||
}
|
||||
|
||||
// Total Earning Chart - Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const totalEarningChartEl = document.querySelector('#totalEarningChart'),
|
||||
totalEarningChartOptions = {
|
||||
chart: {
|
||||
height: 175,
|
||||
parentHeightOffset: 0,
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [300, 200, 350, 150, 250, 325, 250, 270]
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [-180, -225, -180, -280, -125, -200, -125, -150]
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '40%',
|
||||
borderRadius: 7,
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'last'
|
||||
}
|
||||
},
|
||||
|
||||
colors: [config.colors.primary, config.colors.secondary],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 5,
|
||||
lineCap: 'round',
|
||||
colors: [cardColor]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
colors: [config.colors.primary, config.colors.secondary],
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -40,
|
||||
bottom: -40,
|
||||
left: -10,
|
||||
right: -2
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1700,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '43%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1300,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '60%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '30%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '35%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 850,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 476,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '43%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 394,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '58%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof totalEarningChartEl !== undefined && totalEarningChartEl !== null) {
|
||||
const totalEarningChart = new ApexCharts(totalEarningChartEl, totalEarningChartOptions);
|
||||
totalEarningChart.render();
|
||||
}
|
||||
|
||||
// For Datatable
|
||||
// --------------------------------------------------------------------
|
||||
const dt_project_table = document.querySelector('.datatable-project');
|
||||
|
||||
if (dt_project_table) {
|
||||
let tableTitle = document.createElement('h5');
|
||||
tableTitle.classList.add('card-title', 'mb-0', 'text-md-start', 'text-center', 'pt-md-0', 'pt-6');
|
||||
tableTitle.innerHTML = 'Project List';
|
||||
var dt_project = new DataTable(dt_project_table, {
|
||||
ajax: assetsPath + 'json/user-profile.json', // JSON file to add data
|
||||
columns: [
|
||||
{ data: 'id' },
|
||||
{ data: 'id', orderable: false, render: DataTable.render.select() },
|
||||
{ data: 'project_name' },
|
||||
{ data: 'project_leader' },
|
||||
{ data: 'id' },
|
||||
{ data: 'status' },
|
||||
{ data: 'id' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// For Checkboxes
|
||||
targets: 1,
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
responsivePriority: 3,
|
||||
checkboxes: true,
|
||||
render: function () {
|
||||
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
||||
},
|
||||
checkboxes: {
|
||||
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
||||
}
|
||||
},
|
||||
{
|
||||
// Avatar image/badge, Name and post
|
||||
targets: 2,
|
||||
responsivePriority: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
var userImg = full['project_img'],
|
||||
name = full['project_name'],
|
||||
date = full['date'];
|
||||
var output;
|
||||
if (userImg) {
|
||||
// For Avatar image
|
||||
output =
|
||||
'<img src="' + assetsPath + 'img/icons/brands/' + userImg + '" alt="Avatar" class="rounded-circle">';
|
||||
} else {
|
||||
// For Avatar badge
|
||||
var stateNum = Math.floor(Math.random() * 6);
|
||||
var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
var state = states[stateNum],
|
||||
initials = name.match(/\b\w/g) || [];
|
||||
initials = ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
|
||||
output = '<span class="avatar-initial rounded-circle bg-label-' + state + '">' + initials + '</span>';
|
||||
}
|
||||
// Creates full output for row
|
||||
var rowOutput =
|
||||
'<div class="d-flex justify-content-left align-items-center">' +
|
||||
'<div class="avatar-wrapper">' +
|
||||
'<div class="avatar avatar-sm me-3">' +
|
||||
output +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="d-flex flex-column gap-50">' +
|
||||
'<span class="text-truncate fw-medium text-heading">' +
|
||||
name +
|
||||
'</span>' +
|
||||
'<small class="text-truncate">' +
|
||||
date +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
return rowOutput;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Task
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
var task = full['project_leader'];
|
||||
return '<span class="text-heading">' + task + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// Teams
|
||||
targets: 4,
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
const team = full['team'];
|
||||
let teamItem = '';
|
||||
let teamCount = 0;
|
||||
// Iterate through team members and generate the list items
|
||||
for (let i = 0; i < team.length; i++) {
|
||||
teamItem += `
|
||||
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Karlos" class="avatar avatar-sm pull-up">
|
||||
<img class="rounded-circle" src="${assetsPath}img/avatars/${team[i]}" alt="Avatar">
|
||||
</li>
|
||||
`;
|
||||
teamCount++;
|
||||
if (teamCount > 2) break;
|
||||
}
|
||||
// Check if there are more than 2 team members, and add the remaining avatars
|
||||
if (teamCount > 2) {
|
||||
const remainingAvatars = team.length - 3;
|
||||
if (remainingAvatars > 0) {
|
||||
teamItem += `
|
||||
<li class="avatar avatar-sm">
|
||||
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="${remainingAvatars} more">+${remainingAvatars}</span>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
}
|
||||
// Combine the team items into the final output
|
||||
const teamOutput = `
|
||||
<div class="d-flex align-items-center">
|
||||
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
|
||||
${teamItem}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
return teamOutput;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Label
|
||||
targets: -2,
|
||||
render: function (data, type, full, meta) {
|
||||
const statusNumber = full['status'];
|
||||
return `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="progress w-100 me-3" style="height: 6px;">
|
||||
<div class="progress-bar" style="width: ${statusNumber}" aria-valuenow="${statusNumber}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<span class="text-heading">${statusNumber}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
searchable: false,
|
||||
title: 'Action',
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<div class="d-inline-block">' +
|
||||
'<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></a>' +
|
||||
'<div class="dropdown-menu dropdown-menu-end m-0">' +
|
||||
'<a href="javascript:;" class="dropdown-item">Details</a>' +
|
||||
'<a href="javascript:;" class="dropdown-item">Archive</a>' +
|
||||
'<div class="dropdown-divider"></div>' +
|
||||
'<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
select: {
|
||||
style: 'multi',
|
||||
selector: 'td:nth-child(2)'
|
||||
},
|
||||
order: [[2, 'desc']],
|
||||
layout: {
|
||||
topStart: {
|
||||
rowClass: 'row mx-md-3 my-0 justify-content-between',
|
||||
features: [tableTitle]
|
||||
},
|
||||
topEnd: {
|
||||
search: {
|
||||
placeholder: 'Search Project',
|
||||
text: '_INPUT_'
|
||||
}
|
||||
},
|
||||
bottomStart: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['info']
|
||||
},
|
||||
bottomEnd: 'paging'
|
||||
},
|
||||
displayLength: 5,
|
||||
language: {
|
||||
paginate: {
|
||||
next: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
|
||||
previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
|
||||
first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
|
||||
last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
|
||||
}
|
||||
},
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: DataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
const data = row.data();
|
||||
return 'Details of ' + data['project_name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
const data = columns
|
||||
.map(function (col) {
|
||||
return col.title !== '' // Do not show row in modal popup if title is blank (for check box)
|
||||
? `<tr data-dt-row="${col.rowIndex}" data-dt-column="${col.columnIndex}">
|
||||
<td>${col.title}:</td>
|
||||
<td>${col.data}</td>
|
||||
</tr>`
|
||||
: '';
|
||||
})
|
||||
.join('');
|
||||
|
||||
if (data) {
|
||||
const div = document.createElement('div');
|
||||
div.classList.add('table-responsive');
|
||||
const table = document.createElement('table');
|
||||
div.appendChild(table);
|
||||
table.classList.add('table');
|
||||
const tbody = document.createElement('tbody');
|
||||
tbody.innerHTML = data;
|
||||
table.appendChild(tbody);
|
||||
return div;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
//? The 'delete-record' class is necessary for the functionality of the following code.
|
||||
document.addEventListener('click', function (e) {
|
||||
if (e.target.classList.contains('delete-record')) {
|
||||
dt_project.row(e.target.closest('tr')).remove().draw();
|
||||
const modalEl = document.querySelector('.dtr-bs-modal');
|
||||
if (modalEl && modalEl.classList.contains('show')) {
|
||||
const modal = bootstrap.Modal.getInstance(modalEl);
|
||||
modal?.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for project-list table initialization
|
||||
setTimeout(() => {
|
||||
const elementsToModify = [
|
||||
{ selector: '.dt-search .form-control', classToRemove: 'form-control-sm' },
|
||||
{ selector: '.dt-length .form-select', classToRemove: 'form-select-sm', classToAdd: 'ms-0' },
|
||||
{ selector: '.dt-length', classToAdd: 'mb-md-6 mb-0' },
|
||||
{ selector: '.dt-buttons', classToAdd: 'justify-content-center' },
|
||||
{ selector: '.dt-layout-table', classToRemove: 'row mt-2' },
|
||||
{ selector: '.dt-layout-end', classToAdd: 'gap-md-2 gap-0 mt-0' },
|
||||
{ selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
|
||||
];
|
||||
|
||||
// Delete record
|
||||
elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
|
||||
document.querySelectorAll(selector).forEach(element => {
|
||||
if (classToRemove) {
|
||||
classToRemove.split(' ').forEach(className => element.classList.remove(className));
|
||||
}
|
||||
if (classToAdd) {
|
||||
classToAdd.split(' ').forEach(className => element.classList.add(className));
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 100);
|
||||
})();
|
||||
Reference in New Issue
Block a user