Update Master Data
This commit is contained in:
@@ -0,0 +1,292 @@
|
||||
/**
|
||||
* Page User List
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Datatable (js)
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
let borderColor, bodyBg, headingColor;
|
||||
|
||||
borderColor = config.colors.borderColor;
|
||||
bodyBg = config.colors.bodyBg;
|
||||
headingColor = config.colors.headingColor;
|
||||
|
||||
// Variable declaration for table
|
||||
const dt_user_table = document.querySelector('.datatables-users'),
|
||||
userView = 'app-user-view-account.html',
|
||||
statusObj = {
|
||||
1: { title: 'Pending', class: 'bg-label-warning' },
|
||||
2: { title: 'Active', class: 'bg-label-success' },
|
||||
3: { title: 'Inactive', class: 'bg-label-secondary' }
|
||||
};
|
||||
var select2 = $('.select2');
|
||||
|
||||
if (select2.length) {
|
||||
var $this = select2;
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select Country',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
}
|
||||
|
||||
if (dt_user_table) {
|
||||
// 1. Definisikan statusObj di luar agar bisa diakses global oleh initComplete
|
||||
const statusObj = {
|
||||
1: { title: 'Active', class: 'bg-label-success' },
|
||||
2: { title: 'Pending', class: 'bg-label-warning' }
|
||||
};
|
||||
|
||||
const dt_user = new DataTable(dt_user_table, {
|
||||
ajax: userListingUrl,
|
||||
columns: [
|
||||
{ data: 'id' },
|
||||
{ data: 'id' },
|
||||
{ data: 'name' },
|
||||
{ data: 'id' },
|
||||
{ data: 'email_verified_at' },
|
||||
{ data: 'id' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function() { return ''; }
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
orderable: false,
|
||||
checkboxes: {
|
||||
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
||||
},
|
||||
render: function() {
|
||||
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
var name = full['name'], email = full['email'];
|
||||
var stateNum = Math.floor(Math.random() * 6);
|
||||
var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
var state = states[stateNum];
|
||||
var initials = (name.match(/\b\w/g) || []).map(char => char.toUpperCase()).join('');
|
||||
|
||||
return `
|
||||
<div class="d-flex justify-content-start align-items-center user-name">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="avatar avatar-sm me-4">
|
||||
<span class="avatar-initial rounded-circle bg-label-${state}">${initials}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading text-truncate">${name}</span>
|
||||
<small>${email}</small>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 3,
|
||||
render: function() {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading"><i class="ti tabler-user icon-md text-success me-2"></i>Maintainer</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
const isVerified = full['email_verified_at'] !== null;
|
||||
const statusValue = isVerified ? 1 : 2;
|
||||
|
||||
const statusObj = {
|
||||
1: { title: 'Active', class: 'bg-label-success' },
|
||||
2: { title: 'Pending', class: 'bg-label-warning' }
|
||||
};
|
||||
|
||||
return (
|
||||
'<span class="badge ' + statusObj[statusValue].class + ' verify-user cursor-pointer' +
|
||||
'" data-id="' + full['id'] + '" data-status="' + statusValue + '">' +
|
||||
statusObj[statusValue].title +
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return `
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[2, 'desc']],
|
||||
layout: {
|
||||
topStart: {
|
||||
rowClass: 'row m-3 my-0 justify-content-between',
|
||||
features: [
|
||||
{
|
||||
pageLength: {
|
||||
menu: [10, 25, 50, 100],
|
||||
text: '_MENU_'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
topEnd: {
|
||||
features: [
|
||||
{
|
||||
search: {
|
||||
placeholder: 'Search User',
|
||||
text: '_INPUT_'
|
||||
}
|
||||
},
|
||||
{
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
|
||||
className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
|
||||
attr: {
|
||||
'data-bs-toggle': 'offcanvas',
|
||||
'data-bs-target': '#offcanvasAddUser'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
bottomStart: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['info']
|
||||
},
|
||||
bottomEnd: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['paging']
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for user-list table initialization
|
||||
setTimeout(() => {
|
||||
const elementsToModify = [
|
||||
{ selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
|
||||
{ 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-layout-end',
|
||||
classToRemove: 'justify-content-between',
|
||||
classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
|
||||
},
|
||||
{ selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
|
||||
{ selector: '.dt-layout-table', classToRemove: 'row mt-2' },
|
||||
{ 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);
|
||||
|
||||
// Validation & Phone mask
|
||||
const phoneMaskList = document.querySelectorAll('.phone-mask'),
|
||||
addNewUserForm = document.getElementById('addNewUserForm');
|
||||
|
||||
// Phone Number
|
||||
if (phoneMaskList) {
|
||||
phoneMaskList.forEach(function (phoneMask) {
|
||||
phoneMask.addEventListener('input', event => {
|
||||
const cleanValue = event.target.value.replace(/\D/g, '');
|
||||
phoneMask.value = formatGeneral(cleanValue, {
|
||||
blocks: [3, 3, 4],
|
||||
delimiters: [' ', ' ']
|
||||
});
|
||||
});
|
||||
registerCursorTracker({
|
||||
input: phoneMask,
|
||||
delimiter: ' '
|
||||
});
|
||||
});
|
||||
}
|
||||
// Add New User Form Validation
|
||||
const fv = FormValidation.formValidation(addNewUserForm, {
|
||||
fields: {
|
||||
userFullname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter fullname '
|
||||
}
|
||||
}
|
||||
},
|
||||
userEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name & ele is the field element
|
||||
return '.form-control-validation';
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.datatables-users tbody').on('click', '.verify-user', function () {
|
||||
const userId = $(this).data('id');
|
||||
const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
|
||||
const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
|
||||
|
||||
if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
|
||||
$.ajax({
|
||||
url: '/users/' + userId + '/verify',
|
||||
type: 'POST',
|
||||
data: {
|
||||
_token: $('meta[name="csrf-token"]').attr('content'),
|
||||
_method: 'PATCH'
|
||||
},
|
||||
success: function (response) {
|
||||
// Reload tabel tanpa reset posisi pagination (false)
|
||||
$('.datatables-users').DataTable().ajax.reload(null, false);
|
||||
|
||||
// Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
|
||||
// toastr.success('Status berhasil diperbarui');
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert('Gagal mengubah status user.');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* Config
|
||||
* -------------------------------------------------------------------------------------
|
||||
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
|
||||
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
/* JS global variables
|
||||
!Please use the hex color code (#000) here. Don't use rgba(), hsl(), etc
|
||||
*/
|
||||
window.config = {
|
||||
// global color variables for charts except chartjs
|
||||
colors: {
|
||||
primary: window.Helpers.getCssVar('primary'),
|
||||
secondary: window.Helpers.getCssVar('secondary'),
|
||||
success: window.Helpers.getCssVar('success'),
|
||||
info: window.Helpers.getCssVar('info'),
|
||||
warning: window.Helpers.getCssVar('warning'),
|
||||
danger: window.Helpers.getCssVar('danger'),
|
||||
dark: window.Helpers.getCssVar('dark'),
|
||||
black: window.Helpers.getCssVar('pure-black'),
|
||||
white: window.Helpers.getCssVar('white'),
|
||||
cardColor: window.Helpers.getCssVar('paper-bg'),
|
||||
bodyBg: window.Helpers.getCssVar('body-bg'),
|
||||
bodyColor: window.Helpers.getCssVar('body-color'),
|
||||
headingColor: window.Helpers.getCssVar('heading-color'),
|
||||
textMuted: window.Helpers.getCssVar('secondary-color'),
|
||||
borderColor: window.Helpers.getCssVar('border-color')
|
||||
},
|
||||
colors_label: {
|
||||
primary: window.Helpers.getCssVar('primary-bg-subtle'),
|
||||
secondary: window.Helpers.getCssVar('secondary-bg-subtle'),
|
||||
success: window.Helpers.getCssVar('success-bg-subtle'),
|
||||
info: window.Helpers.getCssVar('info-bg-subtle'),
|
||||
warning: window.Helpers.getCssVar('warning-bg-subtle'),
|
||||
danger: window.Helpers.getCssVar('danger-bg-subtle'),
|
||||
dark: window.Helpers.getCssVar('dark-bg-subtle')
|
||||
},
|
||||
fontFamily: window.Helpers.getCssVar('font-family-base'),
|
||||
enableMenuLocalStorage: true // Enable menu state with local storage support
|
||||
};
|
||||
|
||||
window.assetsPath = document.documentElement.getAttribute('data-assets-path');
|
||||
window.templateName = document.documentElement.getAttribute('data-template');
|
||||
|
||||
/**
|
||||
* TemplateCustomizer
|
||||
* ! You must use(include) template-customizer.js to use TemplateCustomizer settings
|
||||
* -----------------------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* TemplateCustomizer settings
|
||||
* -------------------------------------------------------------------------------------
|
||||
* displayCustomizer: true(Show customizer), false(Hide customizer)
|
||||
* lang: To set default language, Add more languages and set default. Fallback language is 'en'
|
||||
* defaultPrimaryColor: '#7367F0' | Set default primary color
|
||||
* defaultSkin: 0(Default), 1(Bordered)
|
||||
* defaultTheme: 'light', 'dark', 'system'
|
||||
* defaultSemiDark: true, false (For dark menu only)
|
||||
* defaultContentLayout: 'compact', 'wide' (compact=container-xxl, wide=container-fluid)
|
||||
* defaultHeaderType: 'static', 'fixed' (for horizontal layout only)
|
||||
* defaultMenuCollapsed: true, false (For vertical layout only)
|
||||
* defaultNavbarType: 'sticky', 'static', 'hidden' (For vertical layout only)
|
||||
* defaultTextDir: 'ltr', 'rtl' (Direction)
|
||||
* defaultFooterFixed: true, false (For vertical layout only)
|
||||
* defaultShowDropdownOnHover : true, false (for horizontal layout only)
|
||||
* controls: [ 'color', 'theme', 'skins', 'semiDark', 'layoutCollapsed', 'layoutNavbarOptions', 'headerType', 'contentLayout', 'rtl' ] | Show/Hide customizer controls
|
||||
*/
|
||||
|
||||
if (typeof TemplateCustomizer !== 'undefined') {
|
||||
window.templateCustomizer = new TemplateCustomizer({
|
||||
displayCustomizer: true,
|
||||
lang: localStorage.getItem('templateCustomizer-' + templateName + '--Lang') || 'en', // Set default language here
|
||||
// defaultPrimaryColor: '#D11BB4',
|
||||
// defaultSkin: 1,
|
||||
// defaultTheme: 'system',
|
||||
// defaultSemiDark: true,
|
||||
// defaultContentLayout: 'wide',
|
||||
// defaultHeaderType: 'static',
|
||||
// defaultMenuCollapsed: true,
|
||||
// defaultNavbarType: 'static',
|
||||
// defaultTextDir: 'rtl',
|
||||
// defaultFooterFixed: false,
|
||||
// defaultShowDropdownOnHover: false,
|
||||
controls: [
|
||||
'color',
|
||||
'theme',
|
||||
'skins',
|
||||
'semiDark',
|
||||
'layoutCollapsed',
|
||||
'layoutNavbarOptions',
|
||||
'headerType',
|
||||
'contentLayout',
|
||||
'rtl'
|
||||
]
|
||||
});
|
||||
}
|
||||
@@ -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);
|
||||
})();
|
||||
@@ -0,0 +1,715 @@
|
||||
/**
|
||||
* Main
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
window.isRtl = window.Helpers.isRtl();
|
||||
window.isDarkStyle = window.Helpers.isDarkStyle();
|
||||
let menu,
|
||||
animate,
|
||||
isHorizontalLayout = false;
|
||||
|
||||
if (document.getElementById('layout-menu')) {
|
||||
isHorizontalLayout = document.getElementById('layout-menu').classList.contains('menu-horizontal');
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// class for ios specific styles
|
||||
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
|
||||
document.body.classList.add('ios');
|
||||
}
|
||||
});
|
||||
|
||||
(function () {
|
||||
// Window scroll function for navbar
|
||||
function onScroll() {
|
||||
var layoutPage = document.querySelector('.layout-page');
|
||||
if (layoutPage) {
|
||||
if (window.scrollY > 0) {
|
||||
layoutPage.classList.add('window-scrolled');
|
||||
} else {
|
||||
layoutPage.classList.remove('window-scrolled');
|
||||
}
|
||||
}
|
||||
}
|
||||
// On load time out
|
||||
setTimeout(() => {
|
||||
onScroll();
|
||||
}, 200);
|
||||
|
||||
// On window scroll
|
||||
window.onscroll = function () {
|
||||
onScroll();
|
||||
};
|
||||
|
||||
setTimeout(function () {
|
||||
window.Helpers.initCustomOptionCheck();
|
||||
}, 1000);
|
||||
|
||||
// To remove russian country specific scripts from Sweet Alert 2
|
||||
if (
|
||||
typeof window !== 'undefined' &&
|
||||
/^ru\b/.test(navigator.language) &&
|
||||
location.host.match(/\.(ru|su|by|xn--p1ai)$/)
|
||||
) {
|
||||
localStorage.removeItem('swal-initiation');
|
||||
|
||||
document.body.style.pointerEvents = 'system';
|
||||
setInterval(() => {
|
||||
if (document.body.style.pointerEvents === 'none') {
|
||||
document.body.style.pointerEvents = 'system';
|
||||
}
|
||||
}, 100);
|
||||
HTMLAudioElement.prototype.play = function () {
|
||||
return Promise.resolve();
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof Waves !== 'undefined') {
|
||||
Waves.init();
|
||||
Waves.attach(
|
||||
".btn[class*='btn-']:not(.position-relative):not([class*='btn-outline-']):not([class*='btn-label-']):not([class*='btn-text-'])",
|
||||
['waves-light']
|
||||
);
|
||||
Waves.attach("[class*='btn-outline-']:not(.position-relative)");
|
||||
Waves.attach("[class*='btn-label-']:not(.position-relative)");
|
||||
Waves.attach("[class*='btn-text-']:not(.position-relative)");
|
||||
Waves.attach('.pagination:not([class*="pagination-outline-"]) .page-item.active .page-link', ['waves-light']);
|
||||
Waves.attach('.pagination .page-item .page-link');
|
||||
Waves.attach('.dropdown-menu .dropdown-item');
|
||||
Waves.attach('[data-bs-theme="light"] .list-group .list-group-item-action');
|
||||
Waves.attach('[data-bs-theme="dark"] .list-group .list-group-item-action', ['waves-light']);
|
||||
Waves.attach('.nav-tabs:not(.nav-tabs-widget) .nav-item .nav-link');
|
||||
Waves.attach('.nav-pills .nav-item .nav-link', ['waves-light']);
|
||||
}
|
||||
|
||||
// Initialize menu
|
||||
//-----------------
|
||||
|
||||
let layoutMenuEl = document.querySelectorAll('#layout-menu');
|
||||
layoutMenuEl.forEach(function (element) {
|
||||
menu = new Menu(element, {
|
||||
orientation: isHorizontalLayout ? 'horizontal' : 'vertical',
|
||||
closeChildren: isHorizontalLayout ? true : false,
|
||||
// ? This option only works with Horizontal menu
|
||||
showDropdownOnHover: localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') // If value(showDropdownOnHover) is set in local storage
|
||||
? localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') === 'true' // Use the local storage value
|
||||
: window.templateCustomizer !== undefined // If value is set in config.js
|
||||
? window.templateCustomizer.settings.defaultShowDropdownOnHover // Use the config.js value
|
||||
: true // Use this if you are not using the config.js and want to set value directly from here
|
||||
});
|
||||
// Change parameter to true if you want scroll animation
|
||||
window.Helpers.scrollToActive((animate = false));
|
||||
window.Helpers.mainMenu = menu;
|
||||
});
|
||||
|
||||
// Initialize menu togglers and bind click on each
|
||||
let menuToggler = document.querySelectorAll('.layout-menu-toggle');
|
||||
menuToggler.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
window.Helpers.toggleCollapsed();
|
||||
// Enable menu state with local storage support if enableMenuLocalStorage = true from config.js
|
||||
if (config.enableMenuLocalStorage && !window.Helpers.isSmallScreen()) {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
'templateCustomizer-' + templateName + '--LayoutCollapsed',
|
||||
String(window.Helpers.isCollapsed())
|
||||
);
|
||||
// Update customizer checkbox state on click of menu toggler
|
||||
let layoutCollapsedCustomizerOptions = document.querySelector('.template-customizer-layouts-options');
|
||||
if (layoutCollapsedCustomizerOptions) {
|
||||
let layoutCollapsedVal = window.Helpers.isCollapsed() ? 'collapsed' : 'expanded';
|
||||
layoutCollapsedCustomizerOptions.querySelector(`input[value="${layoutCollapsedVal}"]`).click();
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Menu swipe gesture
|
||||
|
||||
// Detect swipe gesture on the target element and call swipe In
|
||||
window.Helpers.swipeIn('.drag-target', function (e) {
|
||||
window.Helpers.setCollapsed(false);
|
||||
});
|
||||
|
||||
// Detect swipe gesture on the target element and call swipe Out
|
||||
window.Helpers.swipeOut('#layout-menu', function (e) {
|
||||
if (window.Helpers.isSmallScreen()) window.Helpers.setCollapsed(true);
|
||||
});
|
||||
|
||||
// Display in main menu when menu scrolls
|
||||
let menuInnerContainer = document.getElementsByClassName('menu-inner'),
|
||||
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
|
||||
if (menuInnerContainer.length > 0 && menuInnerShadow) {
|
||||
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
|
||||
if (this.querySelector('.ps__thumb-y').offsetTop) {
|
||||
menuInnerShadow.style.display = 'block';
|
||||
} else {
|
||||
menuInnerShadow.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Get style from local storage or use 'system' as default
|
||||
let storedStyle =
|
||||
localStorage.getItem('templateCustomizer-' + templateName + '--Theme') || // if no template style then use Customizer style
|
||||
(window.templateCustomizer?.settings?.defaultStyle ?? document.documentElement.getAttribute('data-bs-theme')); //!if there is no Customizer then use default style as light
|
||||
|
||||
// Run switchImage function based on the stored style
|
||||
window.Helpers.switchImage(storedStyle);
|
||||
|
||||
// Update light/dark image based on current style
|
||||
window.Helpers.setTheme(window.Helpers.getPreferredTheme());
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = window.Helpers.getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
window.Helpers.setTheme(window.Helpers.getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
function getScrollbarWidth() {
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
||||
document.body.style.setProperty('--bs-scrollbar-width', `${scrollbarWidth}px`);
|
||||
}
|
||||
getScrollbarWidth();
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
window.Helpers.showActiveTheme(window.Helpers.getPreferredTheme());
|
||||
getScrollbarWidth();
|
||||
// Toggle Universal Sidebar
|
||||
window.Helpers.initSidebarToggle();
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
window.Helpers.setStoredTheme(templateName, theme);
|
||||
window.Helpers.setTheme(theme);
|
||||
window.Helpers.showActiveTheme(theme, true);
|
||||
window.Helpers.syncCustomOptions(theme);
|
||||
let currTheme = theme;
|
||||
if (theme === 'system') {
|
||||
currTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
const semiDarkL = document.querySelector('.template-customizer-semiDark');
|
||||
if (semiDarkL) {
|
||||
if (theme === 'dark') {
|
||||
semiDarkL.classList.add('d-none');
|
||||
} else {
|
||||
semiDarkL.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
window.Helpers.switchImage(currTheme);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Internationalization (Language Dropdown)
|
||||
// ---------------------------------------
|
||||
|
||||
if (typeof i18next !== 'undefined' && typeof i18NextHttpBackend !== 'undefined') {
|
||||
i18next
|
||||
.use(i18NextHttpBackend)
|
||||
.init({
|
||||
lng: window.templateCustomizer ? window.templateCustomizer.settings.lang : 'en',
|
||||
debug: false,
|
||||
fallbackLng: 'en',
|
||||
backend: {
|
||||
loadPath: assetsPath + 'json/locales/{{lng}}.json'
|
||||
},
|
||||
returnObjects: true
|
||||
})
|
||||
.then(function (t) {
|
||||
localize();
|
||||
});
|
||||
}
|
||||
|
||||
let languageDropdown = document.getElementsByClassName('dropdown-language');
|
||||
|
||||
if (languageDropdown.length) {
|
||||
let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
|
||||
|
||||
for (let i = 0; i < dropdownItems.length; i++) {
|
||||
dropdownItems[i].addEventListener('click', function () {
|
||||
let currentLanguage = this.getAttribute('data-language');
|
||||
let textDirection = this.getAttribute('data-text-direction');
|
||||
|
||||
for (let sibling of this.parentNode.children) {
|
||||
var siblingEle = sibling.parentElement.parentNode.firstChild;
|
||||
|
||||
// Loop through each sibling and push to the array
|
||||
while (siblingEle) {
|
||||
if (siblingEle.nodeType === 1 && siblingEle !== siblingEle.parentElement) {
|
||||
siblingEle.querySelector('.dropdown-item').classList.remove('active');
|
||||
}
|
||||
siblingEle = siblingEle.nextSibling;
|
||||
}
|
||||
}
|
||||
this.classList.add('active');
|
||||
|
||||
i18next.changeLanguage(currentLanguage, (err, t) => {
|
||||
window.templateCustomizer ? window.templateCustomizer.setLang(currentLanguage) : '';
|
||||
directionChange(textDirection);
|
||||
if (err) return console.log('something went wrong loading', err);
|
||||
localize();
|
||||
window.Helpers.syncCustomOptionsRtl(textDirection);
|
||||
});
|
||||
});
|
||||
}
|
||||
function directionChange(textDirection) {
|
||||
document.documentElement.setAttribute('dir', textDirection);
|
||||
if (textDirection === 'rtl') {
|
||||
if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') !== 'true')
|
||||
window.templateCustomizer ? window.templateCustomizer.setRtl(true) : '';
|
||||
} else {
|
||||
if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') === 'true')
|
||||
window.templateCustomizer ? window.templateCustomizer.setRtl(false) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function localize() {
|
||||
let i18nList = document.querySelectorAll('[data-i18n]');
|
||||
// Set the current language in dd
|
||||
let currentLanguageEle = document.querySelector('.dropdown-item[data-language="' + i18next.language + '"]');
|
||||
|
||||
if (currentLanguageEle) {
|
||||
currentLanguageEle.click();
|
||||
}
|
||||
|
||||
i18nList.forEach(function (item) {
|
||||
item.innerHTML = i18next.t(item.dataset.i18n);
|
||||
/* FIX: Uncomment the following line to hide elements with the i18n attribute before translation to prevent text change flicker */
|
||||
// item.style.visibility = 'visible';
|
||||
});
|
||||
}
|
||||
|
||||
// Notification
|
||||
// ------------
|
||||
const notificationMarkAsReadAll = document.querySelector('.dropdown-notifications-all');
|
||||
const notificationMarkAsReadList = document.querySelectorAll('.dropdown-notifications-read');
|
||||
|
||||
// Notification: Mark as all as read
|
||||
if (notificationMarkAsReadAll) {
|
||||
notificationMarkAsReadAll.addEventListener('click', event => {
|
||||
notificationMarkAsReadList.forEach(item => {
|
||||
item.closest('.dropdown-notifications-item').classList.add('marked-as-read');
|
||||
});
|
||||
});
|
||||
}
|
||||
// Notification: Mark as read/unread onclick of dot
|
||||
if (notificationMarkAsReadList) {
|
||||
notificationMarkAsReadList.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
item.closest('.dropdown-notifications-item').classList.toggle('marked-as-read');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Notification: Mark as read/unread onclick of dot
|
||||
const notificationArchiveMessageList = document.querySelectorAll('.dropdown-notifications-archive');
|
||||
notificationArchiveMessageList.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
item.closest('.dropdown-notifications-item').remove();
|
||||
});
|
||||
});
|
||||
|
||||
// Init helpers & misc
|
||||
// --------------------
|
||||
|
||||
// Init BS Tooltip
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Accordion active class
|
||||
const accordionActiveFunction = function (e) {
|
||||
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
|
||||
e.target.closest('.accordion-item').classList.add('active');
|
||||
} else {
|
||||
e.target.closest('.accordion-item').classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
|
||||
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
|
||||
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
|
||||
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
|
||||
});
|
||||
|
||||
// Auto update layout based on screen size
|
||||
window.Helpers.setAutoUpdate(true);
|
||||
|
||||
// Toggle Password Visibility
|
||||
window.Helpers.initPasswordToggle();
|
||||
|
||||
// Speech To Text
|
||||
window.Helpers.initSpeechToText();
|
||||
|
||||
// Init PerfectScrollbar in Navbar Dropdown (i.e notification)
|
||||
window.Helpers.initNavbarDropdownScrollbar();
|
||||
|
||||
let horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']");
|
||||
if (horizontalMenuTemplate) {
|
||||
// if screen size is small then set navbar fixed
|
||||
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
window.Helpers.setNavbarFixed('fixed');
|
||||
} else {
|
||||
window.Helpers.setNavbarFixed('');
|
||||
}
|
||||
}
|
||||
|
||||
// On window resize listener
|
||||
// -------------------------
|
||||
window.addEventListener(
|
||||
'resize',
|
||||
function (event) {
|
||||
// Horizontal Layout : Update menu based on window size
|
||||
if (horizontalMenuTemplate) {
|
||||
// if screen size is small then set navbar fixed
|
||||
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
window.Helpers.setNavbarFixed('fixed');
|
||||
} else {
|
||||
window.Helpers.setNavbarFixed('');
|
||||
}
|
||||
setTimeout(function () {
|
||||
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
if (document.getElementById('layout-menu')) {
|
||||
if (document.getElementById('layout-menu').classList.contains('menu-horizontal')) {
|
||||
menu.switchMenu('vertical');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (document.getElementById('layout-menu')) {
|
||||
if (document.getElementById('layout-menu').classList.contains('menu-vertical')) {
|
||||
menu.switchMenu('horizontal');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Manage menu expanded/collapsed with templateCustomizer & local storage
|
||||
//------------------------------------------------------------------
|
||||
|
||||
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
|
||||
if (isHorizontalLayout || window.Helpers.isSmallScreen()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If current layout is vertical and current window screen is > small
|
||||
// Auto update menu collapsed/expanded based on the themeConfig
|
||||
if (typeof window.templateCustomizer !== 'undefined') {
|
||||
if (window.templateCustomizer.settings.defaultMenuCollapsed) {
|
||||
window.Helpers.setCollapsed(true, false);
|
||||
} else {
|
||||
window.Helpers.setCollapsed(false, false);
|
||||
}
|
||||
|
||||
if (window.templateCustomizer.settings.semiDark) {
|
||||
document.querySelector('#layout-menu').setAttribute('data-bs-theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
// Manage menu expanded/collapsed state with local storage support If enableMenuLocalStorage = true in config.js
|
||||
if (typeof config !== 'undefined') {
|
||||
if (config.enableMenuLocalStorage) {
|
||||
try {
|
||||
if (localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') !== null)
|
||||
window.Helpers.setCollapsed(
|
||||
localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') === 'true',
|
||||
false
|
||||
);
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
// Search Configuration
|
||||
const SearchConfig = {
|
||||
container: '#autocomplete',
|
||||
placeholder: 'Search [CTRL + K]',
|
||||
classNames: {
|
||||
detachedContainer: 'd-flex flex-column',
|
||||
detachedFormContainer: 'd-flex align-items-center justify-content-between border-bottom',
|
||||
form: 'd-flex align-items-center',
|
||||
input: 'search-control border-none',
|
||||
detachedCancelButton: 'btn-search-close',
|
||||
panel: 'flex-grow content-wrapper overflow-hidden position-relative',
|
||||
panelLayout: 'h-100',
|
||||
clearButton: 'd-none',
|
||||
item: 'd-block'
|
||||
}
|
||||
};
|
||||
|
||||
// Search state and data
|
||||
let data = {};
|
||||
let currentFocusIndex = -1;
|
||||
|
||||
// Utils
|
||||
function isMacOS() {
|
||||
return /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
// Load search data
|
||||
function loadSearchData() {
|
||||
const searchJson = $('#layout-menu').hasClass('menu-horizontal') ? 'search-horizontal.json' : 'search-vertical.json';
|
||||
|
||||
fetch(assetsPath + 'json/' + searchJson)
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error('Failed to fetch data');
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
data = json;
|
||||
initializeAutocomplete();
|
||||
})
|
||||
.catch(error => console.error('Error loading JSON:', error));
|
||||
}
|
||||
|
||||
// Initialize autocomplete
|
||||
function initializeAutocomplete() {
|
||||
const searchElement = document.getElementById('autocomplete');
|
||||
if (!searchElement) return;
|
||||
|
||||
return autocomplete({
|
||||
...SearchConfig,
|
||||
openOnFocus: true,
|
||||
onStateChange({ state, setQuery }) {
|
||||
// When autocomplete is opened
|
||||
if (state.isOpen) {
|
||||
// Hide body scroll and add padding to prevent layout shift
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.paddingRight = 'var(--bs-scrollbar-width)';
|
||||
// Replace "Cancel" text with icon
|
||||
const cancelIcon = document.querySelector('.aa-DetachedCancelButton');
|
||||
if (cancelIcon) {
|
||||
cancelIcon.innerHTML =
|
||||
'<span class="text-body-secondary">[esc]</span> <span class="icon-base icon-md ti tabler-x text-heading"></span>';
|
||||
}
|
||||
|
||||
// Perfect Scrollbar
|
||||
if (!window.autoCompletePS) {
|
||||
const panel = document.querySelector('.aa-Panel');
|
||||
if (panel) {
|
||||
window.autoCompletePS = new PerfectScrollbar(panel);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// When autocomplete is closed
|
||||
if (state.status === 'idle' && state.query) {
|
||||
setQuery('');
|
||||
}
|
||||
|
||||
// Restore body scroll and padding when autocomplete is closed
|
||||
document.body.style.overflow = 'auto';
|
||||
document.body.style.paddingRight = '';
|
||||
}
|
||||
},
|
||||
render(args, root) {
|
||||
const { render, html, children, state } = args;
|
||||
|
||||
// Initial Suggestions
|
||||
if (!state.query) {
|
||||
const initialSuggestions = html`
|
||||
<div class="p-5 p-lg-12">
|
||||
<div class="row g-4">
|
||||
${Object.entries(data.suggestions || {}).map(
|
||||
([section, items]) => html`
|
||||
<div class="col-md-6 suggestion-section">
|
||||
<p class="search-headings mb-2">${section}</p>
|
||||
<div class="suggestion-items">
|
||||
${items.map(
|
||||
item => html`
|
||||
<a href="${item.url}" class="suggestion-item d-flex align-items-center">
|
||||
<i class="icon-base ti ${item.icon}"></i>
|
||||
<span>${item.name}</span>
|
||||
</a>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
render(initialSuggestions, root);
|
||||
return;
|
||||
}
|
||||
|
||||
// No items
|
||||
if (!args.sections.length) {
|
||||
render(
|
||||
html`
|
||||
<div class="search-no-results-wrapper">
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
<div class="text-center text-heading">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="0.6">
|
||||
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
|
||||
<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-5-4h.01M12 11v3" />
|
||||
</g>
|
||||
</svg>
|
||||
<h5 class="mt-2">No results found</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
root
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
render(children, root);
|
||||
window.autoCompletePS?.update();
|
||||
},
|
||||
getSources() {
|
||||
const sources = [];
|
||||
|
||||
// Add navigation sources if available
|
||||
if (data.navigation) {
|
||||
// Add other navigation sources first
|
||||
const navigationSources = Object.keys(data.navigation)
|
||||
.filter(section => section !== 'files' && section !== 'members')
|
||||
.map(section => ({
|
||||
sourceId: `nav-${section}`,
|
||||
getItems({ query }) {
|
||||
const items = data.navigation[section];
|
||||
if (!query) return items;
|
||||
return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
|
||||
},
|
||||
getItemUrl({ item }) {
|
||||
return item.url;
|
||||
},
|
||||
templates: {
|
||||
header({ items, html }) {
|
||||
if (items.length === 0) return null;
|
||||
return html`<span class="search-headings">${section}</span>`;
|
||||
},
|
||||
item({ item, html }) {
|
||||
return html`
|
||||
<a href="${item.url}" class="d-flex justify-content-between align-items-center">
|
||||
<span class="item-wrapper"><i class="icon-base ti ${item.icon}"></i>${item.name}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.8"
|
||||
color="currentColor">
|
||||
<path d="M11 6h4.5a4.5 4.5 0 1 1 0 9H4" />
|
||||
<path d="M7 12s-3 2.21-3 3s3 3 3 3" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}));
|
||||
sources.push(...navigationSources);
|
||||
|
||||
// Add Files source second
|
||||
if (data.navigation.files) {
|
||||
sources.push({
|
||||
sourceId: 'files',
|
||||
getItems({ query }) {
|
||||
const items = data.navigation.files;
|
||||
if (!query) return items;
|
||||
return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
|
||||
},
|
||||
getItemUrl({ item }) {
|
||||
return item.url;
|
||||
},
|
||||
templates: {
|
||||
header({ items, html }) {
|
||||
if (items.length === 0) return null;
|
||||
return html`<span class="search-headings">Files</span>`;
|
||||
},
|
||||
item({ item, html }) {
|
||||
return html`
|
||||
<a href="${item.url}" class="d-flex align-items-center position-relative px-4 py-2">
|
||||
<div class="file-preview me-2">
|
||||
<img src="${assetsPath}${item.src}" alt="${item.name}" class="rounded" width="42" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">${item.name}</h6>
|
||||
<small class="text-body-secondary">${item.subtitle}</small>
|
||||
</div>
|
||||
${item.meta
|
||||
? html`
|
||||
<div class="position-absolute end-0 me-4">
|
||||
<span class="text-body-secondary small">${item.meta}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add Members source last
|
||||
if (data.navigation.members) {
|
||||
sources.push({
|
||||
sourceId: 'members',
|
||||
getItems({ query }) {
|
||||
const items = data.navigation.members;
|
||||
if (!query) return items;
|
||||
return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
|
||||
},
|
||||
getItemUrl({ item }) {
|
||||
return item.url;
|
||||
},
|
||||
templates: {
|
||||
header({ items, html }) {
|
||||
if (items.length === 0) return null;
|
||||
return html`<span class="search-headings">Members</span>`;
|
||||
},
|
||||
item({ item, html }) {
|
||||
return html`
|
||||
<a href="${item.url}" class="d-flex align-items-center py-2 px-4">
|
||||
<div class="avatar me-2">
|
||||
<img src="${assetsPath}${item.src}" alt="${item.name}" class="rounded-circle" width="32" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">${item.name}</h6>
|
||||
<small class="text-body-secondary">${item.subtitle}</small>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return sources;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize search shortcut
|
||||
document.addEventListener('keydown', event => {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
|
||||
event.preventDefault();
|
||||
document.querySelector('.aa-DetachedSearchButton').click();
|
||||
}
|
||||
});
|
||||
|
||||
// Load search data on page load
|
||||
if (document.documentElement.querySelector('#autocomplete')) {
|
||||
loadSearchData();
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
/**
|
||||
* Page User List
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Datatable (js)
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
let borderColor, bodyBg, headingColor;
|
||||
|
||||
borderColor = config.colors.borderColor;
|
||||
bodyBg = config.colors.bodyBg;
|
||||
headingColor = config.colors.headingColor;
|
||||
|
||||
// Variable declaration for table
|
||||
const dt_user_table = document.querySelector('.datatables-users'),
|
||||
userView = 'app-user-view-account.html',
|
||||
statusObj = {
|
||||
1: { title: 'Pending', class: 'bg-label-warning' },
|
||||
2: { title: 'Active', class: 'bg-label-success' },
|
||||
3: { title: 'Inactive', class: 'bg-label-secondary' }
|
||||
};
|
||||
var select2 = $('.select2');
|
||||
|
||||
if (select2.length) {
|
||||
var $this = select2;
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select Country',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
}
|
||||
|
||||
if (dt_user_table) {
|
||||
const dt_user = new DataTable(dt_user_table, {
|
||||
ajax: kabupatenKotaListUrl,
|
||||
columns: [
|
||||
{ data: 'id' },
|
||||
{ data: 'id' },
|
||||
{ data: 'kode_kabupaten_kota' },
|
||||
{ data: 'nama_kabupaten_kota' },
|
||||
{ data: 'nama_provinsi' },
|
||||
{ data: null, defaultContent: '' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function() { return ''; }
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
orderable: false,
|
||||
checkboxes: {
|
||||
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
||||
},
|
||||
render: function() {
|
||||
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['kode_kabupaten_kota'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_kabupaten_kota'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_provinsi'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return `
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[3, 'asc']],
|
||||
layout: {
|
||||
topStart: {
|
||||
rowClass: 'row m-3 my-0 justify-content-between',
|
||||
features: [
|
||||
{
|
||||
pageLength: {
|
||||
menu: [10, 25, 50, 100],
|
||||
text: '_MENU_'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
topEnd: {
|
||||
features: [
|
||||
{
|
||||
search: {
|
||||
placeholder: 'Search User',
|
||||
text: '_INPUT_'
|
||||
}
|
||||
},
|
||||
{
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
|
||||
className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
|
||||
attr: {
|
||||
'data-bs-toggle': 'offcanvas',
|
||||
'data-bs-target': '#offcanvasAddUser'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
bottomStart: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['info']
|
||||
},
|
||||
bottomEnd: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['paging']
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for user-list table initialization
|
||||
setTimeout(() => {
|
||||
const elementsToModify = [
|
||||
{ selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
|
||||
{ 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-layout-end',
|
||||
classToRemove: 'justify-content-between',
|
||||
classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
|
||||
},
|
||||
{ selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
|
||||
{ selector: '.dt-layout-table', classToRemove: 'row mt-2' },
|
||||
{ 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);
|
||||
|
||||
// Validation & Phone mask
|
||||
const phoneMaskList = document.querySelectorAll('.phone-mask'),
|
||||
addNewUserForm = document.getElementById('addNewUserForm');
|
||||
|
||||
// Phone Number
|
||||
if (phoneMaskList) {
|
||||
phoneMaskList.forEach(function (phoneMask) {
|
||||
phoneMask.addEventListener('input', event => {
|
||||
const cleanValue = event.target.value.replace(/\D/g, '');
|
||||
phoneMask.value = formatGeneral(cleanValue, {
|
||||
blocks: [3, 3, 4],
|
||||
delimiters: [' ', ' ']
|
||||
});
|
||||
});
|
||||
registerCursorTracker({
|
||||
input: phoneMask,
|
||||
delimiter: ' '
|
||||
});
|
||||
});
|
||||
}
|
||||
// Add New User Form Validation
|
||||
const fv = FormValidation.formValidation(addNewUserForm, {
|
||||
fields: {
|
||||
userFullname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter fullname '
|
||||
}
|
||||
}
|
||||
},
|
||||
userEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name & ele is the field element
|
||||
return '.form-control-validation';
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.datatables-users tbody').on('click', '.verify-user', function () {
|
||||
const userId = $(this).data('id');
|
||||
const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
|
||||
const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
|
||||
|
||||
if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
|
||||
$.ajax({
|
||||
url: '/users/' + userId + '/verify',
|
||||
type: 'POST',
|
||||
data: {
|
||||
_token: $('meta[name="csrf-token"]').attr('content'),
|
||||
_method: 'PATCH'
|
||||
},
|
||||
success: function (response) {
|
||||
// Reload tabel tanpa reset posisi pagination (false)
|
||||
$('.datatables-users').DataTable().ajax.reload(null, false);
|
||||
|
||||
// Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
|
||||
// toastr.success('Status berhasil diperbarui');
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert('Gagal mengubah status user.');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,265 @@
|
||||
/**
|
||||
* Page User List
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Datatable (js)
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
let borderColor, bodyBg, headingColor;
|
||||
|
||||
borderColor = config.colors.borderColor;
|
||||
bodyBg = config.colors.bodyBg;
|
||||
headingColor = config.colors.headingColor;
|
||||
|
||||
// Variable declaration for table
|
||||
const dt_user_table = document.querySelector('.datatables-users'),
|
||||
userView = 'app-user-view-account.html',
|
||||
statusObj = {
|
||||
1: { title: 'Pending', class: 'bg-label-warning' },
|
||||
2: { title: 'Active', class: 'bg-label-success' },
|
||||
3: { title: 'Inactive', class: 'bg-label-secondary' }
|
||||
};
|
||||
var select2 = $('.select2');
|
||||
|
||||
if (select2.length) {
|
||||
var $this = select2;
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select Country',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
}
|
||||
|
||||
if (dt_user_table) {
|
||||
const dt_user = new DataTable(dt_user_table, {
|
||||
ajax: kecamatanListUrl,
|
||||
columns: [
|
||||
{ data: 'id' },
|
||||
{ data: 'id' },
|
||||
{ data: 'kode_kecamatan' },
|
||||
{ data: 'nama_kecamatan' },
|
||||
{ data: 'nama_kabupaten_kota' },
|
||||
{ data: 'nama_provinsi' },
|
||||
{ data: null, defaultContent: '' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function() { return ''; }
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
orderable: false,
|
||||
checkboxes: {
|
||||
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
||||
},
|
||||
render: function() {
|
||||
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['kode_kecamatan'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_kecamatan'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 4,
|
||||
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_kabupaten_kota'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 5,
|
||||
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_provinsi'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return `
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[3, 'asc']],
|
||||
layout: {
|
||||
topStart: {
|
||||
rowClass: 'row m-3 my-0 justify-content-between',
|
||||
features: [
|
||||
{
|
||||
pageLength: {
|
||||
menu: [10, 25, 50, 100],
|
||||
text: '_MENU_'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
topEnd: {
|
||||
features: [
|
||||
{
|
||||
search: {
|
||||
placeholder: 'Search User',
|
||||
text: '_INPUT_'
|
||||
}
|
||||
},
|
||||
{
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
|
||||
className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
|
||||
attr: {
|
||||
'data-bs-toggle': 'offcanvas',
|
||||
'data-bs-target': '#offcanvasAddUser'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
bottomStart: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['info']
|
||||
},
|
||||
bottomEnd: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['paging']
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for user-list table initialization
|
||||
setTimeout(() => {
|
||||
const elementsToModify = [
|
||||
{ selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
|
||||
{ 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-layout-end',
|
||||
classToRemove: 'justify-content-between',
|
||||
classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
|
||||
},
|
||||
{ selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
|
||||
{ selector: '.dt-layout-table', classToRemove: 'row mt-2' },
|
||||
{ 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);
|
||||
|
||||
// Validation & Phone mask
|
||||
const phoneMaskList = document.querySelectorAll('.phone-mask'),
|
||||
addNewUserForm = document.getElementById('addNewUserForm');
|
||||
|
||||
// Phone Number
|
||||
if (phoneMaskList) {
|
||||
phoneMaskList.forEach(function (phoneMask) {
|
||||
phoneMask.addEventListener('input', event => {
|
||||
const cleanValue = event.target.value.replace(/\D/g, '');
|
||||
phoneMask.value = formatGeneral(cleanValue, {
|
||||
blocks: [3, 3, 4],
|
||||
delimiters: [' ', ' ']
|
||||
});
|
||||
});
|
||||
registerCursorTracker({
|
||||
input: phoneMask,
|
||||
delimiter: ' '
|
||||
});
|
||||
});
|
||||
}
|
||||
// Add New User Form Validation
|
||||
const fv = FormValidation.formValidation(addNewUserForm, {
|
||||
fields: {
|
||||
userFullname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter fullname '
|
||||
}
|
||||
}
|
||||
},
|
||||
userEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name & ele is the field element
|
||||
return '.form-control-validation';
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.datatables-users tbody').on('click', '.verify-user', function () {
|
||||
const userId = $(this).data('id');
|
||||
const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
|
||||
const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
|
||||
|
||||
if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
|
||||
$.ajax({
|
||||
url: '/users/' + userId + '/verify',
|
||||
type: 'POST',
|
||||
data: {
|
||||
_token: $('meta[name="csrf-token"]').attr('content'),
|
||||
_method: 'PATCH'
|
||||
},
|
||||
success: function (response) {
|
||||
// Reload tabel tanpa reset posisi pagination (false)
|
||||
$('.datatables-users').DataTable().ajax.reload(null, false);
|
||||
|
||||
// Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
|
||||
// toastr.success('Status berhasil diperbarui');
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert('Gagal mengubah status user.');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* Page User List
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Datatable (js)
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
let borderColor, bodyBg, headingColor;
|
||||
|
||||
borderColor = config.colors.borderColor;
|
||||
bodyBg = config.colors.bodyBg;
|
||||
headingColor = config.colors.headingColor;
|
||||
|
||||
// Variable declaration for table
|
||||
const dt_user_table = document.querySelector('.datatables-users'),
|
||||
userView = 'app-user-view-account.html',
|
||||
statusObj = {
|
||||
1: { title: 'Pending', class: 'bg-label-warning' },
|
||||
2: { title: 'Active', class: 'bg-label-success' },
|
||||
3: { title: 'Inactive', class: 'bg-label-secondary' }
|
||||
};
|
||||
var select2 = $('.select2');
|
||||
|
||||
if (select2.length) {
|
||||
var $this = select2;
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select Country',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
}
|
||||
|
||||
if (dt_user_table) {
|
||||
const dt_user = new DataTable(dt_user_table, {
|
||||
ajax: provinsiListUrl,
|
||||
columns: [
|
||||
{ data: 'id' },
|
||||
{ data: 'id' },
|
||||
{ data: 'kode_provinsi' },
|
||||
{ data: 'nama' },
|
||||
{ data: 'iso' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function() { return ''; }
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
orderable: false,
|
||||
checkboxes: {
|
||||
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
||||
},
|
||||
render: function() {
|
||||
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
return '<span class="text-truncate d-flex align-items-center text-heading">' + full['kode_provinsi'] + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
var name = full['nama_provinsi'], iso = full['iso'];
|
||||
var stateNum = Math.floor(Math.random() * 6);
|
||||
var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
var state = states[stateNum];
|
||||
var initials = (name.match(/\b\w/g) || []).map(char => char.toUpperCase()).join('');
|
||||
|
||||
return `
|
||||
<div class="d-flex justify-content-start align-items-center user-name">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="avatar avatar-sm me-4">
|
||||
<span class="avatar-initial rounded-circle bg-label-${state}">${initials}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="fw-medium text-heading text-truncate">${name}</span>
|
||||
<small>${iso}</small>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return `
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
|
||||
<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[2, 'desc']],
|
||||
layout: {
|
||||
topStart: {
|
||||
rowClass: 'row m-3 my-0 justify-content-between',
|
||||
features: [
|
||||
{
|
||||
pageLength: {
|
||||
menu: [10, 25, 50, 100],
|
||||
text: '_MENU_'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
topEnd: {
|
||||
features: [
|
||||
{
|
||||
search: {
|
||||
placeholder: 'Search User',
|
||||
text: '_INPUT_'
|
||||
}
|
||||
},
|
||||
{
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
|
||||
className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
|
||||
attr: {
|
||||
'data-bs-toggle': 'offcanvas',
|
||||
'data-bs-target': '#offcanvasAddUser'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
bottomStart: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['info']
|
||||
},
|
||||
bottomEnd: {
|
||||
rowClass: 'row mx-3 justify-content-between',
|
||||
features: ['paging']
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for user-list table initialization
|
||||
setTimeout(() => {
|
||||
const elementsToModify = [
|
||||
{ selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
|
||||
{ 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-layout-end',
|
||||
classToRemove: 'justify-content-between',
|
||||
classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
|
||||
},
|
||||
{ selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
|
||||
{ selector: '.dt-layout-table', classToRemove: 'row mt-2' },
|
||||
{ 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);
|
||||
|
||||
// Validation & Phone mask
|
||||
const phoneMaskList = document.querySelectorAll('.phone-mask'),
|
||||
addNewUserForm = document.getElementById('addNewUserForm');
|
||||
|
||||
// Phone Number
|
||||
if (phoneMaskList) {
|
||||
phoneMaskList.forEach(function (phoneMask) {
|
||||
phoneMask.addEventListener('input', event => {
|
||||
const cleanValue = event.target.value.replace(/\D/g, '');
|
||||
phoneMask.value = formatGeneral(cleanValue, {
|
||||
blocks: [3, 3, 4],
|
||||
delimiters: [' ', ' ']
|
||||
});
|
||||
});
|
||||
registerCursorTracker({
|
||||
input: phoneMask,
|
||||
delimiter: ' '
|
||||
});
|
||||
});
|
||||
}
|
||||
// Add New User Form Validation
|
||||
const fv = FormValidation.formValidation(addNewUserForm, {
|
||||
fields: {
|
||||
userFullname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter fullname '
|
||||
}
|
||||
}
|
||||
},
|
||||
userEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name & ele is the field element
|
||||
return '.form-control-validation';
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.datatables-users tbody').on('click', '.verify-user', function () {
|
||||
const userId = $(this).data('id');
|
||||
const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
|
||||
const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
|
||||
|
||||
if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
|
||||
$.ajax({
|
||||
url: '/users/' + userId + '/verify',
|
||||
type: 'POST',
|
||||
data: {
|
||||
_token: $('meta[name="csrf-token"]').attr('content'),
|
||||
_method: 'PATCH'
|
||||
},
|
||||
success: function (response) {
|
||||
// Reload tabel tanpa reset posisi pagination (false)
|
||||
$('.datatables-users').DataTable().ajax.reload(null, false);
|
||||
|
||||
// Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
|
||||
// toastr.success('Status berhasil diperbarui');
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert('Gagal mengubah status user.');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* Pages Authentication
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(() => {
|
||||
const formAuthentication = document.querySelector('#formAuthentication');
|
||||
|
||||
// Form validation for Add new record
|
||||
if (formAuthentication && typeof FormValidation !== 'undefined') {
|
||||
FormValidation.formValidation(formAuthentication, {
|
||||
fields: {
|
||||
username: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter username'
|
||||
},
|
||||
stringLength: {
|
||||
min: 6,
|
||||
message: 'Username must be more than 6 characters'
|
||||
}
|
||||
}
|
||||
},
|
||||
email: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'Please enter a valid email address'
|
||||
}
|
||||
}
|
||||
},
|
||||
'email-username': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter email / username'
|
||||
},
|
||||
stringLength: {
|
||||
min: 6,
|
||||
message: 'Username must be more than 6 characters'
|
||||
}
|
||||
}
|
||||
},
|
||||
password: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your password'
|
||||
},
|
||||
stringLength: {
|
||||
min: 6,
|
||||
message: 'Password must be more than 6 characters'
|
||||
}
|
||||
}
|
||||
},
|
||||
'confirm-password': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please confirm password'
|
||||
},
|
||||
identical: {
|
||||
compare: () => formAuthentication.querySelector('[name="password"]').value,
|
||||
message: 'The password and its confirmation do not match'
|
||||
},
|
||||
stringLength: {
|
||||
min: 6,
|
||||
message: 'Password must be more than 6 characters'
|
||||
}
|
||||
}
|
||||
},
|
||||
terms: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please agree to terms & conditions'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
eleValidClass: '',
|
||||
rowSelector: '.form-control-validation'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', e => {
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Two Steps Verification for numeral input mask
|
||||
const numeralMaskElements = document.querySelectorAll('.numeral-mask');
|
||||
|
||||
// Format function for numeral mask
|
||||
const formatNumeral = value => value.replace(/\D/g, ''); // Only keep digits
|
||||
|
||||
if (numeralMaskElements.length > 0) {
|
||||
numeralMaskElements.forEach(numeralMaskEl => {
|
||||
numeralMaskEl.addEventListener('input', event => {
|
||||
numeralMaskEl.value = formatNumeral(event.target.value);
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
});
|
||||
Reference in New Issue
Block a user