first commit
This commit is contained in:
245
resources/assets/js/bootstrap-table/bootstrapTableManager.js
vendored
Normal file
245
resources/assets/js/bootstrap-table/bootstrapTableManager.js
vendored
Normal file
@ -0,0 +1,245 @@
|
||||
import '../../vendor/libs/bootstrap-table/bootstrap-table';
|
||||
import '../notifications/LivewireNotification';
|
||||
|
||||
class BootstrapTableManager {
|
||||
constructor(bootstrapTableWrap, config = {}) {
|
||||
const defaultConfig = {
|
||||
header: [],
|
||||
format: [],
|
||||
search_columns: [],
|
||||
actionColumn: false,
|
||||
height: 'auto',
|
||||
minHeight: 300,
|
||||
bottomMargin : 195,
|
||||
search: true,
|
||||
showColumns: true,
|
||||
showColumnsToggleAll: true,
|
||||
showExport: true,
|
||||
exportfileName: 'datatTable',
|
||||
exportWithDatetime: true,
|
||||
showFullscreen: true,
|
||||
showPaginationSwitch: true,
|
||||
showRefresh: true,
|
||||
showToggle: true,
|
||||
/*
|
||||
smartDisplay: false,
|
||||
searchOnEnterKey: true,
|
||||
showHeader: false,
|
||||
showFooter: true,
|
||||
showRefresh: true,
|
||||
showToggle: true,
|
||||
showFullscreen: true,
|
||||
detailView: true,
|
||||
searchAlign: 'right',
|
||||
buttonsAlign: 'right',
|
||||
toolbarAlign: 'left',
|
||||
paginationVAlign: 'bottom',
|
||||
paginationHAlign: 'right',
|
||||
paginationDetailHAlign: 'left',
|
||||
paginationSuccessivelySize: 5,
|
||||
paginationPagesBySide: 3,
|
||||
paginationUseIntermediate: true,
|
||||
*/
|
||||
clickToSelect: true,
|
||||
minimumCountColumns: 4,
|
||||
fixedColumns: true,
|
||||
fixedNumber: 1,
|
||||
idField: 'id',
|
||||
pagination: true,
|
||||
pageList: [25, 50, 100, 500, 1000],
|
||||
sortName: 'id',
|
||||
sortOrder: 'asc',
|
||||
cookie: false,
|
||||
cookieExpire: '365d',
|
||||
cookieIdTable: 'myTableCookies', // Nombre único para las cookies de la tabla
|
||||
cookieStorage: 'localStorage',
|
||||
cookiePath: '/',
|
||||
};
|
||||
|
||||
this.$bootstrapTable = $('.bootstrap-table', bootstrapTableWrap);
|
||||
this.$toolbar = $('.bt-toolbar', bootstrapTableWrap);
|
||||
this.$searchColumns = $('.search_columns', bootstrapTableWrap);
|
||||
this.$btnRefresh = $('.btn-refresh', bootstrapTableWrap);
|
||||
this.$btnClearFilters = $('.btn-clear-filters', bootstrapTableWrap);
|
||||
|
||||
this.config = { ...defaultConfig, ...config };
|
||||
|
||||
this.config.toolbar = `${bootstrapTableWrap} .bt-toolbar`;
|
||||
this.config.height = this.config.height == 'auto'? this.getTableHeight(): this.config.height;
|
||||
this.config.cookieIdTable = this.config.exportWithDatetime? this.config.cookieIdTable + '-' + this.getFormattedDateYMDHm(): this.config.cookieIdTable;
|
||||
|
||||
this.tableFormatters = {}; // Mueve la carga de formatters aquí
|
||||
|
||||
this.initTable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Calcula la altura de la tabla.
|
||||
*/
|
||||
getTableHeight() {
|
||||
const btHeight = window.innerHeight - this.$toolbar.height() - this.bottomMargin;
|
||||
|
||||
return btHeight < this.config.minHeight ? this.config.minHeight : btHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* Genera un ID único para la tabla basado en una cookie.
|
||||
*/
|
||||
getCookieId() {
|
||||
const generateShortHash = (str) => {
|
||||
let hash = 0;
|
||||
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const char = str.charCodeAt(i);
|
||||
|
||||
hash = (hash << 5) - hash + char;
|
||||
hash &= hash; // Convertir a entero de 32 bits
|
||||
}
|
||||
|
||||
return Math.abs(hash).toString().substring(0, 12);
|
||||
};
|
||||
|
||||
return `bootstrap-table-cache-${generateShortHash(this.config.title)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Carga los formatters dinámicamente
|
||||
*/
|
||||
async loadFormatters() {
|
||||
const formattersModules = import.meta.glob('../../../../../**/resources/assets/js/bootstrap-table/*Formatters.js');
|
||||
|
||||
const formatterPromises = Object.entries(formattersModules).map(async ([path, importer]) => {
|
||||
const module = await importer();
|
||||
Object.assign(this.tableFormatters, module);
|
||||
});
|
||||
|
||||
await Promise.all(formatterPromises);
|
||||
}
|
||||
|
||||
btColumns() {
|
||||
const columns = [];
|
||||
|
||||
Object.entries(this.config.header).forEach(([key, value]) => {
|
||||
const columnFormat = this.config.format[key] || {};
|
||||
|
||||
if (typeof columnFormat.formatter === 'object') {
|
||||
const formatterName = columnFormat.formatter.name;
|
||||
const formatterParams = columnFormat.formatter.params || {};
|
||||
|
||||
const formatterFunction = this.tableFormatters[formatterName];
|
||||
if (formatterFunction) {
|
||||
columnFormat.formatter = (value, row, index) => formatterFunction(value, row, index, formatterParams);
|
||||
} else {
|
||||
console.warn(`Formatter "${formatterName}" no encontrado para la columna "${key}"`);
|
||||
}
|
||||
} else if (typeof columnFormat.formatter === 'string') {
|
||||
const formatterFunction = this.tableFormatters[columnFormat.formatter];
|
||||
if (formatterFunction) {
|
||||
columnFormat.formatter = formatterFunction;
|
||||
}
|
||||
}
|
||||
|
||||
if (columnFormat.onlyFormatter) {
|
||||
columns.push({
|
||||
align: 'center',
|
||||
formatter: columnFormat.formatter || (() => ''),
|
||||
forceHide: true,
|
||||
switchable: false,
|
||||
field: key,
|
||||
title: value,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const column = {
|
||||
title: value,
|
||||
field: key,
|
||||
sortable: true,
|
||||
};
|
||||
|
||||
columns.push({ ...column, ...columnFormat });
|
||||
});
|
||||
|
||||
return columns;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Petición AJAX para la tabla.
|
||||
*/
|
||||
ajaxRequest(params) {
|
||||
const url = `${window.location.href}?${$.param(params.data)}&${$('.bt-toolbar :input').serialize()}`;
|
||||
|
||||
$.get(url).then((res) => params.success(res));
|
||||
}
|
||||
|
||||
toValidFilename(str, extension = 'txt') {
|
||||
return str
|
||||
.normalize("NFD") // 🔹 Normaliza caracteres con tilde
|
||||
.replace(/[\u0300-\u036f]/g, "") // 🔹 Elimina acentos y diacríticos
|
||||
.replace(/[<>:"\/\\|?*\x00-\x1F]/g, '') // 🔹 Elimina caracteres inválidos
|
||||
.replace(/\s+/g, '-') // 🔹 Reemplaza espacios con guiones
|
||||
.replace(/-+/g, '-') // 🔹 Evita múltiples guiones seguidos
|
||||
.replace(/^-+|-+$/g, '') // 🔹 Elimina guiones al inicio y fin
|
||||
.toLowerCase() // 🔹 Convierte a minúsculas
|
||||
+ (extension ? '.' + extension.replace(/^\.+/, '') : ''); // 🔹 Asegura la extensión válida
|
||||
}
|
||||
|
||||
getFormattedDateYMDHm(date = new Date()) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 🔹 Asegura dos dígitos
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
|
||||
return `${year}${month}${day}-${hours}${minutes}`;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Inicia la tabla después de cargar los formatters
|
||||
*/
|
||||
async initTable() {
|
||||
await this.loadFormatters(); // Asegura que los formatters estén listos antes de inicializar
|
||||
|
||||
this.$bootstrapTable
|
||||
.bootstrapTable('destroy').bootstrapTable({
|
||||
height: this.config.height,
|
||||
locale: 'es-MX',
|
||||
ajax: (params) => this.ajaxRequest(params),
|
||||
toolbar: this.config.toolbar,
|
||||
search: this.config.search,
|
||||
showColumns: this.config.showColumns,
|
||||
showColumnsToggleAll: this.config.showColumnsToggleAll,
|
||||
showExport: this.config.showExport,
|
||||
exportTypes: ['csv', 'txt', 'xlsx'],
|
||||
exportOptions: {
|
||||
fileName: this.config.fileName,
|
||||
},
|
||||
showFullscreen: this.config.showFullscreen,
|
||||
showPaginationSwitch: this.config.showPaginationSwitch,
|
||||
showRefresh: this.config.showRefresh,
|
||||
showToggle: this.config.showToggle,
|
||||
clickToSelect: this.config.clickToSelect,
|
||||
minimumCountColumns: this.config.minimumCountColumns,
|
||||
fixedColumns: this.config.fixedColumns,
|
||||
fixedNumber: this.config.fixedNumber,
|
||||
idField: this.config.idField,
|
||||
pagination: this.config.pagination,
|
||||
pageList: this.config.pageList,
|
||||
sidePagination: "server",
|
||||
sortName: this.config.sortName,
|
||||
sortOrder: this.config.sortOrder,
|
||||
mobileResponsive: true,
|
||||
resizable: true,
|
||||
cookie: this.config.cookie,
|
||||
cookieExpire: this.config.cookieExpire,
|
||||
cookieIdTable: this.config.cookieIdTable,
|
||||
columns: this.btColumns(),
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.BootstrapTableManager = BootstrapTableManager;
|
||||
132
resources/assets/js/bootstrap-table/globalConfig.js
Normal file
132
resources/assets/js/bootstrap-table/globalConfig.js
Normal file
@ -0,0 +1,132 @@
|
||||
const appRoutesElement = document.getElementById('app-routes');
|
||||
|
||||
export const routes = appRoutesElement ? JSON.parse(appRoutesElement.textContent) : {};
|
||||
|
||||
export const booleanStatusCatalog = {
|
||||
activo: {
|
||||
trueText: 'Activo',
|
||||
falseText: 'Inactivo',
|
||||
trueClass: 'badge bg-label-success',
|
||||
falseClass: 'badge bg-label-danger',
|
||||
},
|
||||
habilitado: {
|
||||
trueText: 'Habilitado',
|
||||
falseText: 'Deshabilitado',
|
||||
trueClass: 'badge bg-label-success',
|
||||
falseClass: 'badge bg-label-danger',
|
||||
trueIcon: 'ti ti-checkup-list',
|
||||
falseIcon: 'ti ti-ban',
|
||||
},
|
||||
checkSI: {
|
||||
trueText: 'SI',
|
||||
falseIcon: '',
|
||||
trueClass: 'badge bg-label-info',
|
||||
falseText: '',
|
||||
},
|
||||
check: {
|
||||
trueIcon: 'ti ti-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
checkbox: {
|
||||
trueIcon: 'ti ti-checkbox',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
checklist: {
|
||||
trueIcon: 'ti ti-checklist',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
phone_done: {
|
||||
trueIcon: 'ti ti-phone-done',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
checkup_list: {
|
||||
trueIcon: 'ti ti-checkup-list',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
list_check: {
|
||||
trueIcon: 'ti ti-list-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
camera_check: {
|
||||
trueIcon: 'ti ti-camera-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
mail_check: {
|
||||
trueIcon: 'ti ti-mail-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
clock_check: {
|
||||
trueIcon: 'ti ti-clock-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
user_check: {
|
||||
trueIcon: 'ti ti-user-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
circle_check: {
|
||||
trueIcon: 'ti ti-circle-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
shield_check: {
|
||||
trueIcon: 'ti ti-shield-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
},
|
||||
calendar_check: {
|
||||
trueIcon: 'ti ti-calendar-check',
|
||||
falseIcon: '',
|
||||
trueClass: 'text-green-800',
|
||||
falseClass: '',
|
||||
}
|
||||
};
|
||||
|
||||
export const badgeColorCatalog = {
|
||||
primary: { color: 'primary' },
|
||||
secondary: { color: 'secondary' },
|
||||
success: { color: 'success' },
|
||||
danger: { color: 'danger' },
|
||||
warning: { color: 'warning' },
|
||||
info: { color: 'info' },
|
||||
dark: { color: 'dark' },
|
||||
light: { color: 'light', textColor: 'text-dark' }
|
||||
};
|
||||
|
||||
export const statusIntBadgeBgCatalogCss = {
|
||||
1: 'warning',
|
||||
2: 'info',
|
||||
10: 'success',
|
||||
12: 'danger',
|
||||
11: 'warning'
|
||||
};
|
||||
|
||||
export const statusIntBadgeBgCatalog = {
|
||||
1: 'Inactivo',
|
||||
2: 'En proceso',
|
||||
10: 'Activo',
|
||||
11: 'Archivado',
|
||||
12: 'Cancelado',
|
||||
};
|
||||
|
||||
193
resources/assets/js/bootstrap-table/globalFormatters.js
Normal file
193
resources/assets/js/bootstrap-table/globalFormatters.js
Normal file
@ -0,0 +1,193 @@
|
||||
import { booleanStatusCatalog, statusIntBadgeBgCatalogCss, statusIntBadgeBgCatalog } from './globalConfig';
|
||||
import {routes} from '../../../../../laravel-vuexy-admin/resources/assets/js/bootstrap-table/globalConfig.js';
|
||||
|
||||
export const userActionFormatter = (value, row, index) => {
|
||||
if (!row.id) return '';
|
||||
|
||||
const showUrl = routes['admin.user.show'].replace(':id', row.id);
|
||||
const editUrl = routes['admin.user.edit'].replace(':id', row.id);
|
||||
const deleteUrl = routes['admin.user.delete'].replace(':id', row.id);
|
||||
|
||||
return `
|
||||
<div class="flex space-x-2">
|
||||
<a href="${editUrl}" title="Editar" class="icon-button hover:text-slate-700">
|
||||
<i class="ti ti-edit"></i>
|
||||
</a>
|
||||
<a href="${deleteUrl}" title="Eliminar" class="icon-button hover:text-slate-700">
|
||||
<i class="ti ti-trash"></i>
|
||||
</a>
|
||||
<a href="${showUrl}" title="Ver" class="icon-button hover:text-slate-700">
|
||||
<i class="ti ti-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
`.trim();
|
||||
};
|
||||
|
||||
export const dynamicBooleanFormatter = (value, row, index, options = {}) => {
|
||||
const { tag = 'default', customOptions = {} } = options;
|
||||
const catalogConfig = booleanStatusCatalog[tag] || {};
|
||||
|
||||
const finalOptions = {
|
||||
...catalogConfig,
|
||||
...customOptions, // Permite sobreescribir la configuración predeterminada
|
||||
...options // Permite pasar opciones rápidas
|
||||
};
|
||||
|
||||
const {
|
||||
trueIcon = '',
|
||||
falseIcon = '',
|
||||
trueText = 'Sí',
|
||||
falseText = 'No',
|
||||
trueClass = 'badge bg-label-success',
|
||||
falseClass = 'badge bg-label-danger',
|
||||
iconClass = 'text-green-800'
|
||||
} = finalOptions;
|
||||
|
||||
const trueElement = !trueIcon && !trueText ? '' : `<span class="${trueClass}">${trueIcon ? `<i class="${trueIcon} ${iconClass}"></i> ` : ''}${trueText}</span>`;
|
||||
const falseElement = !falseIcon && !falseText ? '' : `<span class="${falseClass}">${falseIcon ? `<i class="${falseIcon}"></i> ` : ''}${falseText}</span>`;
|
||||
|
||||
return value? trueElement : falseElement;
|
||||
};
|
||||
|
||||
export const dynamicBadgeFormatter = (value, row, index, options = {}) => {
|
||||
const {
|
||||
color = 'primary', // Valor por defecto
|
||||
textColor = '', // Permite agregar color de texto si es necesario
|
||||
additionalClass = '' // Permite añadir clases adicionales
|
||||
} = options;
|
||||
|
||||
return `<span class="badge bg-${color} ${textColor} ${additionalClass}">${value}</span>`;
|
||||
};
|
||||
|
||||
export const statusIntBadgeBgFormatter = (value, row, index) => {
|
||||
return value
|
||||
? `<span class="badge bg-label-${statusIntBadgeBgCatalogCss[value]}">${statusIntBadgeBgCatalog[value]}</span>`
|
||||
: '';
|
||||
}
|
||||
|
||||
export const textNowrapFormatter = (value, row, index) => {
|
||||
if (!value) return '';
|
||||
return `<span class="text-nowrap">${value}</span>`;
|
||||
}
|
||||
|
||||
|
||||
export const toCurrencyFormatter = (value, row, index) => {
|
||||
return isNaN(value) ? '' : Number(value).toCurrency();
|
||||
}
|
||||
|
||||
export const numberFormatter = (value, row, index) => {
|
||||
return isNaN(value) ? '' : Number(value);
|
||||
}
|
||||
|
||||
export const monthFormatter = (value, row, index) => {
|
||||
switch (parseInt(value)) {
|
||||
case 1:
|
||||
return 'Enero';
|
||||
case 2:
|
||||
return 'Febrero';
|
||||
case 3:
|
||||
return 'Marzo';
|
||||
case 4:
|
||||
return 'Abril';
|
||||
case 5:
|
||||
return 'Mayo';
|
||||
case 6:
|
||||
return 'Junio';
|
||||
case 7:
|
||||
return 'Julio';
|
||||
case 8:
|
||||
return 'Agosto';
|
||||
case 9:
|
||||
return 'Septiembre';
|
||||
case 10:
|
||||
return 'Octubre';
|
||||
case 11:
|
||||
return 'Noviembre';
|
||||
case 12:
|
||||
return 'Diciembre';
|
||||
}
|
||||
}
|
||||
|
||||
export const humaneTimeFormatter = (value, row, index) => {
|
||||
return isNaN(value) ? '' : Number(value).humaneTime();
|
||||
}
|
||||
|
||||
/**
|
||||
* Genera la URL del avatar basado en iniciales o devuelve la foto de perfil si está disponible.
|
||||
* @param {string} fullName - Nombre completo del usuario.
|
||||
* @param {string|null} profilePhoto - Ruta de la foto de perfil.
|
||||
* @returns {string} - URL del avatar.
|
||||
*/
|
||||
function getAvatarUrl(fullName, profilePhoto) {
|
||||
const baseUrl = window.baseUrl || '';
|
||||
|
||||
if (profilePhoto) {
|
||||
return `${baseUrl}storage/profile-photos/${profilePhoto}`;
|
||||
}
|
||||
|
||||
return `${baseUrl}admin/usuario/avatar/?name=${fullName}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatea la columna del perfil de usuario con avatar, nombre y correo.
|
||||
*/
|
||||
export const userProfileFormatter = (value, row, index) => {
|
||||
if (!row.id) return '';
|
||||
|
||||
const profileUrl = routes['admin.user.show'].replace(':id', row.id);
|
||||
const avatar = getAvatarUrl(row.full_name, row.profile_photo_path);
|
||||
const email = row.email ? row.email : 'Sin correo';
|
||||
|
||||
return `
|
||||
<div class="flex items-center space-x-3" style="min-width: 240px">
|
||||
<a href="${profileUrl}" class="flex-shrink-0">
|
||||
<img src="${avatar}" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-300 shadow-sm hover:scale-105 transition-transform">
|
||||
</a>
|
||||
<div class="truncate">
|
||||
<a href="${profileUrl}" class="font-medium text-slate-700 hover:underline block text-wrap">${row.full_name}</a>
|
||||
<small class="text-muted block truncate">${email}</small>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Formatea la columna del perfil de contacto con avatar, nombre y correo.
|
||||
*/
|
||||
export const contactProfileFormatter = (value, row, index) => {
|
||||
if (!row.id) return '';
|
||||
|
||||
const profileUrl = routes['admin.contact.show'].replace(':id', row.id);
|
||||
const avatar = getAvatarUrl(row.full_name, row.profile_photo_path);
|
||||
const email = row.email ? row.email : 'Sin correo';
|
||||
|
||||
return `
|
||||
<div class="flex items-center space-x-3" style="min-width: 240px">
|
||||
<a href="${profileUrl}" class="flex-shrink-0">
|
||||
<img src="${avatar}" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-300 shadow-sm hover:scale-105 transition-transform">
|
||||
</a>
|
||||
<div class="truncate">
|
||||
<a href="${profileUrl}" class="font-medium text-slate-700 hover:underline block text-wrap">${row.full_name}</a>
|
||||
<small class="text-muted block truncate">${email}</small>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const creatorFormatter = (value, row, index) => {
|
||||
if (!row.creator) return '';
|
||||
|
||||
const email = row.creator_email || 'Sin correo';
|
||||
const showUrl = routes['admin.user.show'].replace(':id', row.id);
|
||||
|
||||
|
||||
return `
|
||||
<div class="flex flex-col">
|
||||
<a href="${showUrl}" class="font-medium text-slate-600 hover:underline block text-wrap">${row.creator}</a>
|
||||
<small class="text-muted">${email}</small>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
53
resources/assets/js/config.js
Normal file
53
resources/assets/js/config.js
Normal file
@ -0,0 +1,53 @@
|
||||
/**
|
||||
* 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
|
||||
window.config = {
|
||||
colors: {
|
||||
primary: '#7367f0',
|
||||
secondary: '#808390',
|
||||
success: '#28c76f',
|
||||
info: '#00bad1',
|
||||
warning: '#ff9f43',
|
||||
danger: '#FF4C51',
|
||||
dark: '#4b4b4b',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
cardColor: '#fff',
|
||||
bodyBg: '#f8f7fa',
|
||||
bodyColor: '#6d6b77',
|
||||
headingColor: '#444050',
|
||||
textMuted: '#acaab1',
|
||||
borderColor: '#e6e6e8'
|
||||
},
|
||||
colors_label: {
|
||||
primary: '#7367f029',
|
||||
secondary: '#a8aaae29',
|
||||
success: '#28c76f29',
|
||||
info: '#00cfe829',
|
||||
warning: '#ff9f4329',
|
||||
danger: '#ea545529',
|
||||
dark: '#4b4b4b29'
|
||||
},
|
||||
colors_dark: {
|
||||
cardColor: '#2f3349',
|
||||
bodyBg: '#25293c',
|
||||
bodyColor: '#b2b1cb',
|
||||
headingColor: '#cfcce4',
|
||||
textMuted: '#8285a0',
|
||||
borderColor: '#565b79'
|
||||
},
|
||||
enableMenuLocalStorage: true // Enable menu state with local storage support
|
||||
};
|
||||
|
||||
window.assetsPath = document.documentElement.getAttribute('data-assets-path');
|
||||
window.baseUrl = document.documentElement.getAttribute('data-base-url');
|
||||
window.quicklinksUpdateUrl = document.documentElement.getAttribute('data-quicklinks-update-url');
|
||||
window.templateName = document.documentElement.getAttribute('data-template');
|
||||
window.rtlSupport = false; // set true for rtl support (rtl + ltr), false for ltr only.
|
||||
477
resources/assets/js/forms/formConvasHelper.js
Normal file
477
resources/assets/js/forms/formConvasHelper.js
Normal file
@ -0,0 +1,477 @@
|
||||
/**
|
||||
* FormCanvasHelper
|
||||
*
|
||||
* Clase para orquestar la interacción entre un formulario dentro de un Offcanvas
|
||||
* de Bootstrap y el estado de Livewire (modo create/edit/delete), además de
|
||||
* manipular ciertos componentes externos como Select2.
|
||||
*
|
||||
* Se diseñó teniendo en cuenta que el DOM del Offcanvas puede reconstruirse
|
||||
* (re-render) de manera frecuente, por lo que muchos getters reacceden al DOM
|
||||
* dinámicamente.
|
||||
*/
|
||||
export default class FormCanvasHelper {
|
||||
/**
|
||||
* @param {string} offcanvasId - ID del elemento Offcanvas en el DOM.
|
||||
* @param {object} liveWireInstance - Instancia de Livewire asociada al formulario.
|
||||
*/
|
||||
constructor(offcanvasId, liveWireInstance) {
|
||||
this.offcanvasId = offcanvasId;
|
||||
this.liveWireInstance = liveWireInstance;
|
||||
|
||||
// Validamos referencias mínimas para evitar errores tempranos
|
||||
// Si alguna falta, se mostrará un error en consola.
|
||||
this.validateInitialDomRefs();
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifica la existencia básica de elementos en el DOM.
|
||||
* Muestra errores en consola si faltan elementos críticos.
|
||||
*/
|
||||
validateInitialDomRefs() {
|
||||
const offcanvasEl = document.getElementById(this.offcanvasId);
|
||||
|
||||
if (!offcanvasEl) {
|
||||
console.error(`❌ No se encontró el contenedor Offcanvas con ID: ${this.offcanvasId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const formEl = offcanvasEl.querySelector('form');
|
||||
if (!formEl) {
|
||||
console.error(`❌ No se encontró el formulario dentro de #${this.offcanvasId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const offcanvasTitle = offcanvasEl.querySelector('.offcanvas-title');
|
||||
const submitButtons = formEl.querySelectorAll('.btn-submit');
|
||||
const resetButtons = formEl.querySelectorAll('.btn-reset');
|
||||
|
||||
if (!offcanvasTitle || !submitButtons.length || !resetButtons.length) {
|
||||
console.error(`❌ Faltan el título, botones de submit o reset dentro de #${this.offcanvasId}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter para el contenedor Offcanvas actual.
|
||||
* Retorna siempre la referencia más reciente del DOM.
|
||||
*/
|
||||
get offcanvasEl() {
|
||||
return document.getElementById(this.offcanvasId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter para el formulario dentro del Offcanvas.
|
||||
*/
|
||||
get formEl() {
|
||||
return this.offcanvasEl?.querySelector('form') ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter para el título del Offcanvas.
|
||||
*/
|
||||
get offcanvasTitleEl() {
|
||||
return this.offcanvasEl?.querySelector('.offcanvas-title') ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter para la instancia de Bootstrap Offcanvas.
|
||||
* Siempre retorna la instancia más reciente en caso de re-render.
|
||||
*/
|
||||
get offcanvasInstance() {
|
||||
if (!this.offcanvasEl) return null;
|
||||
return bootstrap.Offcanvas.getOrCreateInstance(this.offcanvasEl);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retorna todos los botones de submit en el formulario.
|
||||
*/
|
||||
get submitButtons() {
|
||||
return this.formEl?.querySelectorAll('.btn-submit') ?? [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Retorna todos los botones de reset en el formulario.
|
||||
*/
|
||||
get resetButtons() {
|
||||
return this.formEl?.querySelectorAll('.btn-reset') ?? [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Método principal para manejar la recarga del Offcanvas según los estados en Livewire.
|
||||
* Se encarga de resetear el formulario, limpiar errores y cerrar/abrir el Offcanvas
|
||||
* según sea necesario.
|
||||
*
|
||||
* @param {string|null} triggerMode - Forzar la acción (e.g., 'reset', 'create'). Si no se especifica, se verifica según Livewire.
|
||||
*/
|
||||
reloadOffcanvas(triggerMode = null) {
|
||||
setTimeout(() => {
|
||||
const mode = this.liveWireInstance.get('mode');
|
||||
const successProcess = this.liveWireInstance.get('successProcess');
|
||||
const validationError = this.liveWireInstance.get('validationError');
|
||||
|
||||
// Si se completa la acción o triggerMode = 'reset',
|
||||
// reseteamos completamente y cerramos el Offcanvas.
|
||||
if (triggerMode === 'reset' || successProcess) {
|
||||
this.resetFormAndState('create');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Forzar modo create si se solicita explícitamente
|
||||
if (triggerMode === 'create') {
|
||||
// Evitamos re-reset si ya estamos en 'create'
|
||||
if (mode === 'create') return;
|
||||
|
||||
this.resetFormAndState('create');
|
||||
|
||||
this.focusOnOpen();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Si no, simplemente preparamos la UI según el modo actual.
|
||||
this.prepareOffcanvasUI(mode);
|
||||
|
||||
// Si hay errores de validación, reabrimos el Offcanvas para mostrarlos.
|
||||
if (validationError) {
|
||||
this.liveWireInstance.set('validationError', null, false);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Si estamos en edit o delete, solo abrimos el Offcanvas.
|
||||
if (mode === 'edit' || mode === 'delete') {
|
||||
this.clearErrors();
|
||||
|
||||
if(mode === 'edit') {
|
||||
this.focusOnOpen();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}, 20);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reabre o fuerza la apertura del Offcanvas si hay errores de validación
|
||||
* o si el modo de Livewire es 'edit' o 'delete'.
|
||||
*
|
||||
* Normalmente se llama cuando hay un dispatch/evento de Livewire,
|
||||
* por ejemplo si el servidor devuelve un error de validación (para mostrarlo)
|
||||
* o si se acaba de cargar un registro para editar o eliminar.
|
||||
*
|
||||
* - Si hay `validationError`, forzamos la reapertura con `toggleOffcanvas(true, true)`
|
||||
* para que se refresque correctamente y el usuario vea los errores.
|
||||
* - Si el modo es 'edit' o 'delete', simplemente mostramos el Offcanvas sin forzar
|
||||
* un refresco de la interfaz.
|
||||
*/
|
||||
refresh() {
|
||||
setTimeout(() => {
|
||||
const mode = this.liveWireInstance.get('mode');
|
||||
const successProcess = this.liveWireInstance.get('successProcess');
|
||||
const validationError = this.liveWireInstance.get('validationError');
|
||||
|
||||
// cerramos el Offcanvas.
|
||||
if (successProcess) {
|
||||
this.toggleOffcanvas(false);
|
||||
|
||||
this.resetFormAndState('create');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (validationError) {
|
||||
// Forzamos la reapertura para que se rendericen
|
||||
this.toggleOffcanvas(true, true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'edit' || mode === 'delete') {
|
||||
// Abrimos el Offcanvas para edición o eliminación
|
||||
this.toggleOffcanvas(true);
|
||||
|
||||
return;
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Prepara la UI del Offcanvas según el modo actual: cambia texto de botones, título,
|
||||
* habilita o deshabilita campos, etc.
|
||||
*
|
||||
* @param {string} mode - Modo actual en Livewire: 'create', 'edit' o 'delete'
|
||||
*/
|
||||
prepareOffcanvasUI(mode) {
|
||||
// Configura el texto y estilo de botones
|
||||
this.configureButtons(mode);
|
||||
|
||||
// Ajusta el título del Offcanvas
|
||||
this.configureTitle(mode);
|
||||
|
||||
// Activa o desactiva campos según el modo
|
||||
this.configureReadonlyMode(mode === 'delete');
|
||||
}
|
||||
|
||||
/**
|
||||
* Cierra o muestra el Offcanvas.
|
||||
*
|
||||
* @param {boolean} show - true para mostrar, false para ocultar.
|
||||
* @param {boolean} force - true para forzar el refresco rápido del Offcanvas.
|
||||
*/
|
||||
toggleOffcanvas(show = false, force = false) {
|
||||
const instance = this.offcanvasInstance;
|
||||
|
||||
if (!instance) return;
|
||||
|
||||
if (show) {
|
||||
if (force) {
|
||||
// "Force" hace un hide + show para asegurar un nuevo render
|
||||
instance.hide();
|
||||
setTimeout(() => instance.show(), 10);
|
||||
|
||||
} else {
|
||||
instance.show();
|
||||
}
|
||||
|
||||
} else {
|
||||
instance.hide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resetea el formulario y el estado en Livewire (modo, id, errores).
|
||||
*
|
||||
* @param {string} targetMode - Modo al que queremos resetear, típicamente 'create'.
|
||||
*/
|
||||
resetFormAndState(targetMode) {
|
||||
if (!this.formEl) return;
|
||||
|
||||
// Restablecemos en Livewire
|
||||
this.liveWireInstance.set('successProcess', null, false);
|
||||
this.liveWireInstance.set('validationError', null, false);
|
||||
this.liveWireInstance.set('mode', targetMode, false);
|
||||
this.liveWireInstance.set('id', null, false);
|
||||
|
||||
// Limpiamos el formulario
|
||||
this.formEl.reset();
|
||||
this.clearErrors();
|
||||
|
||||
// Restablecemos valores por defecto del formulario
|
||||
const defaults = this.liveWireInstance.get('defaultValues');
|
||||
if (defaults && typeof defaults === 'object') {
|
||||
Object.entries(defaults).forEach(([key, value]) => {
|
||||
this.liveWireInstance.set(key, value, false);
|
||||
});
|
||||
}
|
||||
|
||||
// Limpiar select2 automáticamente
|
||||
$(this.formEl)
|
||||
.find('select.select2-hidden-accessible')
|
||||
.each(function () {
|
||||
$(this).val(null).trigger('change');
|
||||
});
|
||||
|
||||
// Desactivamos el modo lectura
|
||||
this.configureReadonlyMode(false);
|
||||
|
||||
// Reconfiguramos el Offcanvas UI
|
||||
this.prepareOffcanvasUI(targetMode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Configura el texto y estilo de los botones de submit y reset
|
||||
* según el modo de Livewire.
|
||||
*
|
||||
* @param {string} mode - 'create', 'edit' o 'delete'
|
||||
*/
|
||||
configureButtons(mode) {
|
||||
const singularName = this.liveWireInstance.get('singularName');
|
||||
|
||||
// Limpiar clases previas
|
||||
this.submitButtons.forEach(button => {
|
||||
button.classList.remove('btn-danger', 'btn-primary');
|
||||
});
|
||||
this.resetButtons.forEach(button => {
|
||||
button.classList.remove('btn-text-secondary', 'btn-label-secondary');
|
||||
});
|
||||
|
||||
// Configurar botón de submit según el modo
|
||||
this.submitButtons.forEach(button => {
|
||||
switch (mode) {
|
||||
case 'create':
|
||||
button.classList.add('btn-primary');
|
||||
button.textContent = `Crear ${singularName.toLowerCase()}`;
|
||||
break;
|
||||
case 'edit':
|
||||
button.classList.add('btn-primary');
|
||||
button.textContent = `Guardar cambios`;
|
||||
break;
|
||||
case 'delete':
|
||||
button.classList.add('btn-danger');
|
||||
button.textContent = `Eliminar ${singularName.toLowerCase()}`;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Configurar botones de reset según el modo
|
||||
this.resetButtons.forEach(button => {
|
||||
// Cambia la clase dependiendo si se trata de un modo 'delete' o no
|
||||
const buttonClass = (mode === 'delete') ? 'btn-text-secondary' : 'btn-label-secondary';
|
||||
button.classList.add(buttonClass);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajusta el título del Offcanvas según el modo y la propiedad configurada en Livewire.
|
||||
*
|
||||
* @param {string} mode - 'create', 'edit' o 'delete'
|
||||
*/
|
||||
configureTitle(mode) {
|
||||
if (!this.offcanvasTitleEl) return;
|
||||
|
||||
const capitalizeFirstLetter =(str) => {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
const singularName = this.liveWireInstance.get('singularName');
|
||||
const columnNameLabel = this.liveWireInstance.get('columnNameLabel');
|
||||
const editName = this.liveWireInstance.get(columnNameLabel);
|
||||
|
||||
switch (mode) {
|
||||
case 'create':
|
||||
this.offcanvasTitleEl.innerHTML = `<i class="ti ti-plus ml-2"></i> ${capitalizeFirstLetter(singularName)} `;
|
||||
break;
|
||||
case 'edit':
|
||||
this.offcanvasTitleEl.innerHTML = `${editName} <i class="ti ti-lg ti-pencil ml-2 text-success"></i>`;
|
||||
break;
|
||||
case 'delete':
|
||||
this.offcanvasTitleEl.innerHTML = `${editName} <i class="ti ti-lg ti-eraser ml-2 text-danger"></i>`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Configura el modo de solo lectura/edición en los campos del formulario.
|
||||
* Deshabilita inputs y maneja el "readonly" en checkboxes/radios.
|
||||
*
|
||||
* @param {boolean} readOnly - true si queremos modo lectura, false para edición.
|
||||
*/
|
||||
configureReadonlyMode(readOnly) {
|
||||
if (!this.formEl) return;
|
||||
|
||||
const inputs = this.formEl.querySelectorAll('input, textarea, select');
|
||||
|
||||
inputs.forEach(el => {
|
||||
// Saltar campos marcados como "data-always-enabled"
|
||||
if (el.hasAttribute('data-always-enabled')) return;
|
||||
|
||||
// Para selects
|
||||
if (el.tagName === 'SELECT') {
|
||||
if ($(el).hasClass('select2-hidden-accessible')) {
|
||||
// Deshabilitar select2
|
||||
$(el).prop('disabled', readOnly).trigger('change.select2');
|
||||
} else {
|
||||
this.toggleSelectReadonly(el, readOnly);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Para checkboxes / radios
|
||||
if (el.type === 'checkbox' || el.type === 'radio') {
|
||||
this.toggleCheckboxReadonly(el, readOnly);
|
||||
return;
|
||||
}
|
||||
|
||||
// Para inputs de texto / textarea
|
||||
el.readOnly = readOnly;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Alterna modo "readonly" en un checkbox/radio simulando la inhabilitación
|
||||
* sin marcarlo como 'disabled' (para mantener su apariencia).
|
||||
*
|
||||
* @param {HTMLElement} checkbox - Elemento checkbox o radio.
|
||||
* @param {boolean} enabled - true si se quiere modo lectura, false en caso contrario.
|
||||
*/
|
||||
toggleCheckboxReadonly(checkbox, enabled) {
|
||||
if (enabled) {
|
||||
checkbox.setAttribute('readonly-mode', 'true');
|
||||
checkbox.style.pointerEvents = 'none';
|
||||
checkbox.onclick = function (event) {
|
||||
event.preventDefault();
|
||||
};
|
||||
} else {
|
||||
checkbox.removeAttribute('readonly-mode');
|
||||
checkbox.style.pointerEvents = '';
|
||||
checkbox.onclick = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Alterna modo "readonly" para un <select> convencional.
|
||||
*
|
||||
* @param {HTMLElement} select - Elemento select.
|
||||
* @param {boolean} enabled - true si queremos readonly, false si editable.
|
||||
*/
|
||||
toggleSelectReadonly(select, enabled) {
|
||||
if (enabled) {
|
||||
select.setAttribute('readonly-mode', 'true');
|
||||
select.style.pointerEvents = 'none';
|
||||
select.tabIndex = -1;
|
||||
} else {
|
||||
select.removeAttribute('readonly-mode');
|
||||
select.style.pointerEvents = '';
|
||||
select.tabIndex = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hace focus en el elemento con el selector dado.
|
||||
*/
|
||||
focusOnOpen() {
|
||||
const focusSelector = this.liveWireInstance.get('focusOnOpen'); // Obtiene el selector de Livewire
|
||||
|
||||
if (!focusSelector) return;
|
||||
|
||||
setTimeout(() => {
|
||||
// Buscar el elemento real en el DOM
|
||||
const focusElement = document.getElementById(focusSelector);
|
||||
|
||||
// Si existe, hacer focus
|
||||
if (focusElement) {
|
||||
focusElement.focus();
|
||||
} else {
|
||||
console.warn(`Elemento no encontrado: ${focusSelector}`);
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
|
||||
/**
|
||||
* Limpia mensajes de error y la clase 'is-invalid' en el formulario.
|
||||
*/
|
||||
clearErrors() {
|
||||
if (!this.formEl) return;
|
||||
|
||||
// Remover mensajes de error en texto
|
||||
this.formEl.querySelectorAll('.text-danger').forEach(el => el.remove());
|
||||
|
||||
// Remover la clase 'is-invalid' de los inputs afectados
|
||||
this.formEl.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
|
||||
|
||||
// Remover las notificaciones
|
||||
this.formEl.querySelectorAll('.notification-container').forEach(el => el.innerHTML = '');
|
||||
|
||||
// Removemos el checkbox de confirmación de eliminar
|
||||
const confirmDeletion = this.formEl.querySelector('.confirm-deletion');
|
||||
|
||||
if (confirmDeletion) {
|
||||
confirmDeletion.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Exponemos la clase en window para acceso global (si fuese necesario)
|
||||
window.FormCanvasHelper = FormCanvasHelper;
|
||||
245
resources/assets/js/forms/formCustomListener.js
Normal file
245
resources/assets/js/forms/formCustomListener.js
Normal file
@ -0,0 +1,245 @@
|
||||
export default class FormCustomListener {
|
||||
constructor(config = {}) {
|
||||
const defaultConfig = {
|
||||
formSelector: '.form-custom-listener', // Selector para formularios
|
||||
buttonSelectors: [], // Selectores específicos para botones
|
||||
callbacks: [], // Callbacks correspondientes a los botones específicos
|
||||
allowedInputTags: ['INPUT', 'SELECT', 'TEXTAREA'], // Tags permitidos para cambios
|
||||
validationConfig: null, // Nueva propiedad para la configuración de validación
|
||||
dispatchOnSubmit: null // Callback Livewire para disparar al enviar el formulario
|
||||
};
|
||||
|
||||
this.config = { ...defaultConfig, ...config };
|
||||
|
||||
// Aseguramos que los métodos que dependen de `this` estén vinculados al contexto correcto
|
||||
this.defaultButtonHandler = this.defaultButtonHandler.bind(this);
|
||||
this.formValidationInstance = null;
|
||||
|
||||
this.initForms();
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializa los formularios encontrados en el DOM.
|
||||
*/
|
||||
initForms() {
|
||||
const forms = document.querySelectorAll(this.config.formSelector);
|
||||
|
||||
if (forms.length === 0) {
|
||||
console.error(`No se encontraron formularios con el selector ${this.config.formSelector}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
forms.forEach(form => {
|
||||
if (form.dataset.initialized === 'true') {
|
||||
console.warn(`Formulario ya inicializado: ${form}`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.initFormEvents(form);
|
||||
|
||||
// Si se pasó configuración de validación, inicialízala
|
||||
if (this.config.validationConfig) {
|
||||
this.initializeValidation(form);
|
||||
}
|
||||
|
||||
form.dataset.initialized = 'true'; // Marcar formulario como inicializado
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Configura los eventos para un formulario individual.
|
||||
* @param {HTMLElement} form - El formulario que será manejado.
|
||||
*/
|
||||
initFormEvents(form) {
|
||||
const buttons = this.getButtons(form);
|
||||
|
||||
buttons.forEach(({ button, callback }, index) => {
|
||||
if (button) {
|
||||
button.addEventListener('click', () => {
|
||||
this.handleButtonClick(index, form, buttons, callback);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener('input', event =>
|
||||
this.handleInputChange(
|
||||
event,
|
||||
form,
|
||||
buttons.map(b => b.button)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtiene los botones y sus callbacks según la configuración.
|
||||
* @param {HTMLElement} form - El formulario del cual obtener botones.
|
||||
* @returns {Array} Array de objetos con { button, callback }.
|
||||
*/
|
||||
getButtons(form) {
|
||||
const buttons = [];
|
||||
|
||||
this.config.buttonSelectors.forEach((selector, index) => {
|
||||
const buttonList = Array.from(form.querySelectorAll(selector));
|
||||
const callback = this.config.callbacks[index];
|
||||
|
||||
buttonList.forEach(button => {
|
||||
buttons.push({ button, callback });
|
||||
});
|
||||
});
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja los cambios en los campos de entrada.
|
||||
* @param {Event} event - El evento del cambio.
|
||||
* @param {HTMLElement} form - El formulario actual.
|
||||
* @param {HTMLElement[]} buttons - Array de botones en el formulario.
|
||||
*/
|
||||
handleInputChange(event, form, buttons) {
|
||||
const target = event.target;
|
||||
|
||||
if (['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
|
||||
this.toggleButtonsState(buttons, true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja el clic en un botón específico.
|
||||
* @param {number} index - Índice del botón.
|
||||
* @param {HTMLElement} form - El formulario actual.
|
||||
* @param {Array} buttons - Array de objetos { button, callback }.
|
||||
* @param {function|null} callback - Callback definido para el botón.
|
||||
*/
|
||||
handleButtonClick(index, form, buttons, callback) {
|
||||
if (typeof callback === 'function') {
|
||||
callback(
|
||||
form,
|
||||
buttons[index].button,
|
||||
buttons.map(b => b.button)
|
||||
);
|
||||
} else {
|
||||
this.defaultButtonHandler(
|
||||
form,
|
||||
buttons[index].button,
|
||||
buttons.map(b => b.button)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja la acción cuando el formulario es válido.
|
||||
* Este método puede ser sobreescrito para personalizar el comportamiento.
|
||||
*/
|
||||
handleFormValid(form) {
|
||||
// Ejecutar callback opcional (si lo proporcionaste)
|
||||
if (typeof this.config.handleValidForm === 'function') {
|
||||
this.config.handleValidForm(form);
|
||||
} else if (this.config.dispatchOnSubmit) {
|
||||
this.handleValidForm(form);
|
||||
} else {
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Método que maneja la acción cuando el formulario es válido.
|
||||
* Al ser un método de la clase, no necesitamos usar bind.
|
||||
*/
|
||||
handleValidForm(form) {
|
||||
const saveButton = form.querySelector('#save_website_button');
|
||||
const allButtons = Array.from(form.querySelectorAll('.btn'));
|
||||
|
||||
this.toggleButtonsState(allButtons, false); // Deshabilitar todos los botones
|
||||
this.toggleFormFields(form, false); // Deshabilitar todos los campos del formulario
|
||||
this.setButtonLoadingState(saveButton, true); // Poner en estado de carga al botón anfitrión
|
||||
|
||||
// Enviar la solicitud de Livewire correspondiente al enviar el formulario
|
||||
Livewire.dispatch(this.config.dispatchOnSubmit);
|
||||
}
|
||||
|
||||
/**
|
||||
* Manejador por defecto para los botones.
|
||||
* @param {HTMLElement} form - El formulario actual.
|
||||
* @param {HTMLElement} hostButton - El botón anfitrión que disparó el evento.
|
||||
* @param {HTMLElement[]} allButtons - Todos los botones relevantes del formulario.
|
||||
*/
|
||||
defaultButtonHandler(form, hostButton, allButtons) {
|
||||
this.toggleButtonsState(allButtons, false); // Deshabilitar todos los botones
|
||||
this.toggleFormFields(form, false); // Deshabilitar todos los campos del formulario
|
||||
this.setButtonLoadingState(hostButton, true); // Poner en estado de carga al botón anfitrión
|
||||
}
|
||||
|
||||
/**
|
||||
* Deshabilita o habilita los campos del formulario.
|
||||
* @param {HTMLElement} form - El formulario actual.
|
||||
* @param {boolean} isEnabled - Si los campos deben habilitarse.
|
||||
*/
|
||||
toggleFormFields(form, isEnabled) {
|
||||
form.querySelectorAll('input, select, textarea').forEach(field => {
|
||||
field.disabled = !isEnabled;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Habilita o deshabilita los botones.
|
||||
* @param {HTMLElement[]} buttons - Array de botones.
|
||||
* @param {boolean} isEnabled - Si los botones deben habilitarse.
|
||||
*/
|
||||
toggleButtonsState(buttons, isEnabled) {
|
||||
buttons.forEach(button => {
|
||||
if (button) button.disabled = !isEnabled;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Cambia el estado de carga de un botón.
|
||||
* @param {HTMLElement} button - Botón que se manejará.
|
||||
* @param {boolean} isLoading - Si el botón está en estado de carga.
|
||||
*/
|
||||
setButtonLoadingState(button, isLoading) {
|
||||
if (!button) return;
|
||||
|
||||
const loadingText = button.getAttribute('data-loading-text');
|
||||
if (loadingText && isLoading) {
|
||||
button.setAttribute('data-original-text', button.innerHTML);
|
||||
button.innerHTML = loadingText;
|
||||
button.disabled = true;
|
||||
} else if (!isLoading) {
|
||||
button.innerHTML = button.getAttribute('data-original-text') || button.innerHTML;
|
||||
button.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializa la validación del formulario con la configuración proporcionada.
|
||||
* @param {HTMLElement} form - El formulario que va a ser validado.
|
||||
*/
|
||||
initializeValidation(form) {
|
||||
if (this.config.validationConfig) {
|
||||
this.formValidationInstance = FormValidation.formValidation(form, this.config.validationConfig).on(
|
||||
'core.form.valid',
|
||||
() => this.handleFormValid(form)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
reloadValidation() {
|
||||
const form = document.querySelector(this.config.formSelector);
|
||||
|
||||
// Verificar si el formulario existe y si la validación está inicializada
|
||||
if (form && this.formValidationInstance) {
|
||||
try {
|
||||
// En lugar de destruir la validación, simplemente reiniciamos la validación.
|
||||
this.formValidationInstance.resetForm(); // Resetear el formulario, limpiando los errores
|
||||
|
||||
// Reinicializar la validación con la configuración actual
|
||||
this.initializeValidation(form);
|
||||
} catch (error) {
|
||||
console.error('Error al reiniciar la validación:', error);
|
||||
}
|
||||
} else {
|
||||
console.warn('Formulario no encontrado o instancia de validación no disponible.');
|
||||
}
|
||||
}
|
||||
}
|
||||
56
resources/assets/js/layout/quicklinks-navbar.js
Normal file
56
resources/assets/js/layout/quicklinks-navbar.js
Normal file
@ -0,0 +1,56 @@
|
||||
/**
|
||||
* Quicklinks Navbar
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
// Navbar Quicklinks with autosuggest (typeahead)
|
||||
const $dropdownShortcuts = $('.dropdown-shortcuts'),
|
||||
$dropdownShortcutsAdd = $('.dropdown-shortcuts-add'),
|
||||
$dropdownShortcutsRemove = $('.dropdown-shortcuts-remove');
|
||||
|
||||
const route = document.documentElement.getAttribute('data-route');
|
||||
|
||||
if ($dropdownShortcuts.length) {
|
||||
$dropdownShortcutsAdd.on('click', function () {
|
||||
$.ajax({
|
||||
url: quicklinksUpdateUrl,
|
||||
method: 'POST',
|
||||
data: {
|
||||
action: 'update',
|
||||
route: route
|
||||
},
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function (response) {
|
||||
location.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.error(xhr.responseJSON.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$dropdownShortcutsRemove.on('click', function () {
|
||||
$.ajax({
|
||||
url: quicklinksUpdateUrl,
|
||||
method: 'POST',
|
||||
data: {
|
||||
action: 'remove',
|
||||
route: route
|
||||
},
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function (response) {
|
||||
location.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.error(xhr.responseJSON.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
201
resources/assets/js/layout/search-navbar.js
Normal file
201
resources/assets/js/layout/search-navbar.js
Normal file
@ -0,0 +1,201 @@
|
||||
/**
|
||||
* Search Navbar
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
window.Helpers.initSidebarToggle();
|
||||
// Toggle Universal Sidebar
|
||||
|
||||
// Navbar Search with autosuggest (typeahead)
|
||||
var searchToggler = $('.search-toggler'),
|
||||
searchInputWrapper = $('.search-input-wrapper'),
|
||||
searchInput = $('.search-input'),
|
||||
contentBackdrop = $('.content-backdrop');
|
||||
|
||||
// Open search input on click of search icon
|
||||
if (searchToggler.length) {
|
||||
searchToggler.on('click', function () {
|
||||
if (searchInputWrapper.length) {
|
||||
searchInputWrapper.toggleClass('d-none');
|
||||
searchInput.trigger('focus');
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
const ctrlKey = event.ctrlKey;
|
||||
const slashKey = event.key === '/'; // Usa 'key' para obtener la tecla como texto
|
||||
|
||||
if (ctrlKey && slashKey) {
|
||||
const searchInputWrapper = document.querySelector('.search-input-wrapper');
|
||||
const searchInput = document.querySelector('.search-input');
|
||||
|
||||
if (searchInputWrapper) {
|
||||
searchInputWrapper.classList.toggle('d-none'); // Alterna la visibilidad
|
||||
if (searchInput) {
|
||||
searchInput.focus(); // Coloca el foco en el input
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Note: Following code is required to update container class of typeahead dropdown width on focus of search input. setTimeout is required to allow time to initiate Typeahead UI.
|
||||
setTimeout(function () {
|
||||
var twitterTypeahead = $('.twitter-typeahead');
|
||||
|
||||
searchInput.on('focus', function () {
|
||||
if (searchInputWrapper.hasClass('container-xxl')) {
|
||||
searchInputWrapper.find(twitterTypeahead).addClass('container-xxl');
|
||||
twitterTypeahead.removeClass('container-fluid');
|
||||
} else if (searchInputWrapper.hasClass('container-fluid')) {
|
||||
searchInputWrapper.find(twitterTypeahead).addClass('container-fluid');
|
||||
twitterTypeahead.removeClass('container-xxl');
|
||||
}
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
|
||||
if (searchInput.length) {
|
||||
// Función para normalizar cadenas (eliminar acentos)
|
||||
function normalizeString(str) {
|
||||
return str
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
// Filter config con soporte para ignorar acentos
|
||||
var filterConfig = function (data) {
|
||||
return function findMatches(q, cb) {
|
||||
let matches = [];
|
||||
|
||||
// Normalizar la consulta
|
||||
const normalizedQuery = normalizeString(q);
|
||||
|
||||
data.filter(function (i) {
|
||||
const normalizedName = normalizeString(i.name);
|
||||
|
||||
if (normalizedName.startsWith(normalizedQuery)) {
|
||||
matches.push(i);
|
||||
} else if (
|
||||
!normalizedName.startsWith(normalizedQuery) &&
|
||||
normalizedName.includes(normalizedQuery)
|
||||
) {
|
||||
matches.push(i);
|
||||
|
||||
// Ordenar por coincidencia secundaria
|
||||
matches.sort(function (a, b) {
|
||||
return b.name < a.name ? 1 : -1;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
|
||||
// Search JSON
|
||||
var searchJson = 'search-navbar'; // For vertical layout
|
||||
|
||||
if ($('#layout-menu').hasClass('menu-horizontal')) {
|
||||
var searchJson = 'search-navbar'; // For vertical layout
|
||||
}
|
||||
|
||||
// Search API AJAX call
|
||||
var searchData = $.ajax({
|
||||
url: assetsPath + '../../admin/' + searchJson, //? Use your own search api instead
|
||||
dataType: 'json',
|
||||
async: false
|
||||
}).responseJSON;
|
||||
|
||||
// Init typeahead on searchInput
|
||||
searchInput.each(function () {
|
||||
var $this = $(this);
|
||||
|
||||
searchInput
|
||||
.typeahead(
|
||||
{
|
||||
hint: false,
|
||||
classNames: {
|
||||
menu: 'tt-menu navbar-search-suggestion',
|
||||
cursor: 'active',
|
||||
suggestion: 'suggestion d-flex justify-content-between px-4 py-2 w-100'
|
||||
}
|
||||
},
|
||||
// Páginas
|
||||
{
|
||||
name: 'pages',
|
||||
display: 'name',
|
||||
limit: 8,
|
||||
source: filterConfig(searchData.pages),
|
||||
templates: {
|
||||
header: '<h6 class="suggestions-header text-primary mb-0 mx-4 mt-3 pb-2">Páginas</h6>',
|
||||
suggestion: function ({ url, icon, name }) {
|
||||
return (
|
||||
'<a href="' +
|
||||
url +
|
||||
'">' +
|
||||
'<div>' +
|
||||
'<i class="ti ' +
|
||||
icon +
|
||||
' me-2"></i>' +
|
||||
'<span class="align-middle">' +
|
||||
name +
|
||||
'</span>' +
|
||||
'</div>' +
|
||||
'</a>'
|
||||
);
|
||||
},
|
||||
notFound:
|
||||
'<div class="not-found px-4 py-2">' +
|
||||
'<h6 class="suggestions-header text-primary mb-2">Páginas</h6>' +
|
||||
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No se encontro resultados</p>' +
|
||||
'</div>'
|
||||
}
|
||||
}
|
||||
)
|
||||
//On typeahead result render.
|
||||
.on('typeahead:render', function () {
|
||||
// Show content backdrop,
|
||||
contentBackdrop.addClass('show').removeClass('fade');
|
||||
})
|
||||
// On typeahead select
|
||||
.on('typeahead:select', function (ev, suggestion) {
|
||||
// Open selected page
|
||||
if (suggestion.url !== 'javascript:;') window.location = suggestion.url;
|
||||
})
|
||||
// On typeahead close
|
||||
.on('typeahead:close', function () {
|
||||
// Clear search
|
||||
searchInput.val('');
|
||||
$this.typeahead('val', '');
|
||||
|
||||
// Hide search input wrapper
|
||||
searchInputWrapper.addClass('d-none');
|
||||
|
||||
// Fade content backdrop
|
||||
contentBackdrop.addClass('fade').removeClass('show');
|
||||
});
|
||||
|
||||
// On searchInput keyup, Fade content backdrop if search input is blank
|
||||
searchInput.on('keyup', function () {
|
||||
if (searchInput.val() == '') contentBackdrop.addClass('fade').removeClass('show');
|
||||
});
|
||||
});
|
||||
|
||||
// Init PerfectScrollbar in search result
|
||||
var psSearch;
|
||||
|
||||
$('.navbar-search-suggestion').each(function () {
|
||||
psSearch = new PerfectScrollbar($(this)[0], {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
});
|
||||
|
||||
searchInput.on('keyup', function () {
|
||||
psSearch.update();
|
||||
});
|
||||
}
|
||||
});
|
||||
375
resources/assets/js/main.js
Normal file
375
resources/assets/js/main.js
Normal file
@ -0,0 +1,375 @@
|
||||
import './layout/quicklinks-navbar.js';
|
||||
import './layout/search-navbar.js';
|
||||
|
||||
('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');
|
||||
}
|
||||
|
||||
(function () {
|
||||
setTimeout(function () {
|
||||
window.Helpers.initCustomOptionCheck();
|
||||
}, 1000);
|
||||
|
||||
if (typeof Waves !== 'undefined') {
|
||||
Waves.init();
|
||||
Waves.attach(
|
||||
".btn[class*='btn-']:not(.position-relative):not([class*='btn-outline-']):not([class*='btn-label-'])",
|
||||
['waves-light']
|
||||
);
|
||||
Waves.attach("[class*='btn-outline-']:not(.position-relative)");
|
||||
Waves.attach("[class*='btn-label-']:not(.position-relative)");
|
||||
Waves.attach('.pagination .page-item .page-link');
|
||||
Waves.attach('.dropdown-menu .dropdown-item');
|
||||
Waves.attach('.light-style .list-group .list-group-item-action');
|
||||
Waves.attach('.dark-style .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';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update light/dark image based on current style
|
||||
function switchImage(style) {
|
||||
if (style === 'system') {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
style = 'dark';
|
||||
} else {
|
||||
style = 'light';
|
||||
}
|
||||
}
|
||||
const switchImagesList = [].slice.call(document.querySelectorAll('[data-app-' + style + '-img]'));
|
||||
switchImagesList.map(function (imageEl) {
|
||||
const setImage = imageEl.getAttribute('data-app-' + style + '-img');
|
||||
imageEl.src = baseUrl + 'vendor/vuexy-admin/img/' + setImage; // Using window.assetsPath to get the exact relative path
|
||||
});
|
||||
}
|
||||
|
||||
//Style Switcher (Light/Dark/System Mode)
|
||||
let styleSwitcher = document.querySelector('.dropdown-style-switcher');
|
||||
|
||||
// Active class on style switcher dropdown items
|
||||
const activeStyle = document.documentElement.getAttribute('data-style');
|
||||
|
||||
// Get style from local storage or use 'system' as default
|
||||
let storedStyle =
|
||||
localStorage.getItem('templateCustomizer-' + templateName + '--Style') || //if no template style then use Customizer style
|
||||
(window.templateCustomizer?.settings?.defaultStyle ?? 'light'); //!if there is no Customizer then use default style as light
|
||||
|
||||
// Set style on click of style switcher item if template customizer is enabled
|
||||
if (window.templateCustomizer && styleSwitcher) {
|
||||
let styleSwitcherItems = [].slice.call(styleSwitcher.children[1].querySelectorAll('.dropdown-item'));
|
||||
styleSwitcherItems.forEach(function (item) {
|
||||
item.classList.remove('active');
|
||||
item.addEventListener('click', function () {
|
||||
let currentStyle = this.getAttribute('data-theme');
|
||||
if (currentStyle === 'light') {
|
||||
window.templateCustomizer.setStyle('light');
|
||||
} else if (currentStyle === 'dark') {
|
||||
window.templateCustomizer.setStyle('dark');
|
||||
} else {
|
||||
window.templateCustomizer.setStyle('system');
|
||||
}
|
||||
});
|
||||
|
||||
if (item.getAttribute('data-theme') === activeStyle) {
|
||||
// Add 'active' class to the item if it matches the activeStyle
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Update style switcher icon based on the stored style
|
||||
|
||||
const styleSwitcherIcon = styleSwitcher.querySelector('i');
|
||||
|
||||
if (storedStyle === 'light') {
|
||||
styleSwitcherIcon.classList.add('ti-sun');
|
||||
new bootstrap.Tooltip(styleSwitcherIcon, {
|
||||
title: 'Light Mode',
|
||||
fallbackPlacements: ['bottom']
|
||||
});
|
||||
} else if (storedStyle === 'dark') {
|
||||
styleSwitcherIcon.classList.add('ti-moon-stars');
|
||||
new bootstrap.Tooltip(styleSwitcherIcon, {
|
||||
title: 'Dark Mode',
|
||||
fallbackPlacements: ['bottom']
|
||||
});
|
||||
} else {
|
||||
styleSwitcherIcon.classList.add('ti-device-desktop-analytics');
|
||||
new bootstrap.Tooltip(styleSwitcherIcon, {
|
||||
title: 'System Mode',
|
||||
fallbackPlacements: ['bottom']
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Run switchImage function based on the stored style
|
||||
switchImage(storedStyle);
|
||||
|
||||
let languageDropdown = document.getElementsByClassName('dropdown-language');
|
||||
|
||||
if (languageDropdown.length) {
|
||||
let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
|
||||
const dropdownActiveItem = languageDropdown[0].querySelector('.dropdown-item.active');
|
||||
|
||||
directionChange(dropdownActiveItem.dataset.textDirection);
|
||||
|
||||
for (let i = 0; i < dropdownItems.length; i++) {
|
||||
dropdownItems[i].addEventListener('click', function () {
|
||||
let textDirection = this.getAttribute('data-text-direction');
|
||||
window.templateCustomizer.setLang(this.getAttribute('data-language'));
|
||||
directionChange(textDirection);
|
||||
});
|
||||
}
|
||||
function directionChange(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) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add on click javascript for template customizer reset button id template-customizer-reset-btn
|
||||
|
||||
setTimeout(function () {
|
||||
let templateCustomizerResetBtn = document.querySelector('.template-customizer-reset-btn');
|
||||
if (templateCustomizerResetBtn) {
|
||||
templateCustomizerResetBtn.onclick = function () {
|
||||
window.location.href = baseUrl + 'lang/en';
|
||||
};
|
||||
}
|
||||
}, 1500);
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
// If layout is RTL add .dropdown-menu-end class to .dropdown-menu
|
||||
// if (isRtl) {
|
||||
// Helpers._addClass('dropdown-menu-end', document.querySelectorAll('#layout-navbar .dropdown-menu'));
|
||||
// }
|
||||
|
||||
// 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
|
||||
// -------------------------
|
||||
document.addEventListener(
|
||||
'resize',
|
||||
function (event) {
|
||||
// Hide open search input and set value blank
|
||||
if (window.innerWidth >= window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
if (document.querySelector('.search-input-wrapper')) {
|
||||
document.querySelector('.search-input-wrapper').classList.add('d-none');
|
||||
document.querySelector('.search-input').value = '';
|
||||
}
|
||||
}
|
||||
// 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 TemplateCustomizer !== 'undefined') {
|
||||
if (window.templateCustomizer.settings.defaultMenuCollapsed) {
|
||||
window.Helpers.setCollapsed(true, false);
|
||||
} else {
|
||||
window.Helpers.setCollapsed(false, false);
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {}
|
||||
}
|
||||
}
|
||||
})();
|
||||
133
resources/assets/js/maps/LeafletMapHelper.js
Normal file
133
resources/assets/js/maps/LeafletMapHelper.js
Normal file
@ -0,0 +1,133 @@
|
||||
import './../../vendor/libs/leaflet/leaflet'
|
||||
|
||||
export const LeafletMapHelper = (() => {
|
||||
let mapInstance, markerInstance;
|
||||
|
||||
const DEFAULT_COORDS = [19.4326, -99.1332]; // Coordenadas de CDMX por defecto
|
||||
|
||||
// Valida coordenadas
|
||||
const isValidCoordinate = (lat, lng) => {
|
||||
return lat && !isNaN(lat) && lat >= -90 && lat <= 90 && lat !== 0 &&
|
||||
lng && !isNaN(lng) && lng >= -180 && lng <= 180 && lng !== 0;
|
||||
};
|
||||
|
||||
// Crea opciones del mapa según el modo
|
||||
const getMapOptions = (mode) => ({
|
||||
scrollWheelZoom: mode !== 'delete',
|
||||
dragging: mode !== 'delete',
|
||||
doubleClickZoom: mode !== 'delete',
|
||||
boxZoom: mode !== 'delete',
|
||||
keyboard: mode !== 'delete',
|
||||
zoomControl: mode !== 'delete',
|
||||
touchZoom: mode !== 'delete'
|
||||
});
|
||||
|
||||
// Destruir el mapa existente
|
||||
const destroyMap = () => {
|
||||
if (mapInstance) {
|
||||
mapInstance.off();
|
||||
mapInstance.remove();
|
||||
mapInstance = null;
|
||||
}
|
||||
removeMarker();
|
||||
};
|
||||
|
||||
// Crear marcador en el mapa
|
||||
const createMarker = (lat, lng, draggable = false, onDragEnd) => {
|
||||
if (isValidCoordinate(lat, lng)) {
|
||||
markerInstance = L.marker([lat, lng], { draggable }).addTo(mapInstance)
|
||||
.bindPopup('<b>Ubicación seleccionada</b>').openPopup();
|
||||
|
||||
if (draggable && onDragEnd) {
|
||||
markerInstance.on('dragend', (e) => {
|
||||
const { lat, lng } = e.target.getLatLng();
|
||||
onDragEnd(lat, lng);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Eliminar marcador
|
||||
const removeMarker = () => {
|
||||
if (markerInstance) {
|
||||
markerInstance.remove();
|
||||
markerInstance = null;
|
||||
}
|
||||
};
|
||||
|
||||
// Actualizar coordenadas en formulario
|
||||
const updateCoordinates = (lat, lng, latSelector, lngSelector, livewireInstance) => {
|
||||
const latInput = document.querySelector(latSelector);
|
||||
const lngInput = document.querySelector(lngSelector);
|
||||
|
||||
if (!latInput || !lngInput) {
|
||||
console.warn(`⚠️ No se encontró el elemento del DOM para latitud (${latSelector}) o longitud (${lngSelector})`);
|
||||
return;
|
||||
}
|
||||
|
||||
latInput.value = lat ? lat.toFixed(6) : '';
|
||||
lngInput.value = lng ? lng.toFixed(6) : '';
|
||||
|
||||
if (livewireInstance) {
|
||||
livewireInstance.lat = lat ? lat.toFixed(6) : null;
|
||||
livewireInstance.lng = lng ? lng.toFixed(6) : null;
|
||||
}
|
||||
};
|
||||
|
||||
// Inicializar el mapa
|
||||
const initializeMap = (locationInputs, mode = 'create', livewireInstance = null) => {
|
||||
const mapElement = document.getElementById(locationInputs.mapId);
|
||||
|
||||
if (!mapElement) {
|
||||
console.error(`❌ No se encontró el contenedor del mapa con ID: ${locationInputs.mapId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
let latElement = document.querySelector(locationInputs.lat);
|
||||
let lngElement = document.querySelector(locationInputs.lng);
|
||||
|
||||
if (!latElement || !lngElement) {
|
||||
console.error(`❌ No se encontraron los campos de latitud (${locationInputs.lat}) o longitud (${locationInputs.lng})`);
|
||||
return;
|
||||
}
|
||||
|
||||
let lat = parseFloat(latElement.value);
|
||||
let lng = parseFloat(lngElement.value);
|
||||
|
||||
const mapCoords = isValidCoordinate(lat, lng) ? [lat, lng] : DEFAULT_COORDS;
|
||||
const zoomLevel = isValidCoordinate(lat, lng) ? 16 : 13;
|
||||
|
||||
if (mapInstance) destroyMap();
|
||||
|
||||
mapInstance = L.map(locationInputs.mapId, getMapOptions(mode)).setView(mapCoords, zoomLevel);
|
||||
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mapInstance);
|
||||
|
||||
if (mode !== 'create') createMarker(lat, lng, mode === 'edit', (lat, lng) => updateCoordinates(lat, lng, locationInputs.lat, locationInputs.lng, livewireInstance));
|
||||
|
||||
if (mode !== 'delete') {
|
||||
mapInstance.on('click', (e) => {
|
||||
const { lat, lng } = e.latlng;
|
||||
removeMarker();
|
||||
createMarker(lat, lng, true, (lat, lng) => updateCoordinates(lat, lng, locationInputs.lat, locationInputs.lng, livewireInstance));
|
||||
updateCoordinates(lat, lng, locationInputs.lat, locationInputs.lng, livewireInstance);
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
const btnClearElement = document.querySelector(locationInputs.btnClear);
|
||||
|
||||
if(!btnClearElement){
|
||||
console.error(`❌ No se encontró el botón de limpiar con ID: ${locationInputs.btnClear}`);return;
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
||||
return {
|
||||
initializeMap,
|
||||
clearCoordinates: () => {
|
||||
removeMarker();
|
||||
},
|
||||
};
|
||||
})();
|
||||
|
||||
window.LeafletMapHelper = LeafletMapHelper;
|
||||
12
resources/assets/js/maps/LocationIQSearchHelper.js
Normal file
12
resources/assets/js/maps/LocationIQSearchHelper.js
Normal file
@ -0,0 +1,12 @@
|
||||
export class LocationIQSearchHelper {
|
||||
constructor(apiKey) {
|
||||
this.apiKey = apiKey;
|
||||
this.baseUrl = 'https://us1.locationiq.com/v1/search.php';
|
||||
}
|
||||
|
||||
async searchAddress(query) {
|
||||
const response = await fetch(`${this.baseUrl}?key=${this.apiKey}&q=${query}&format=json`);
|
||||
if (!response.ok) throw new Error('Error al buscar la dirección');
|
||||
return await response.json();
|
||||
}
|
||||
}
|
||||
207
resources/assets/js/notifications/LivewireNotification.js
Normal file
207
resources/assets/js/notifications/LivewireNotification.js
Normal file
@ -0,0 +1,207 @@
|
||||
export default class LivewireNotification {
|
||||
constructor(config = {}) {
|
||||
const defaultConfig = {
|
||||
delay: 9000, // Tiempo predeterminado para las notificaciones
|
||||
onNotificationShown: null, // Callback al mostrar una notificación
|
||||
onNotificationRemoved: null, // Callback al eliminar una notificación
|
||||
onNotificationClosed: null // Callback al cerrar una notificación mediante botón
|
||||
};
|
||||
|
||||
this.config = { ...defaultConfig, ...config };
|
||||
this.initLivewireNotification();
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializa la escucha de notificaciones desde Livewire.
|
||||
*/
|
||||
initLivewireNotification() {
|
||||
// Mostrar notificación almacenada después de la recarga
|
||||
const storedNotification = localStorage.getItem('pendingNotification');
|
||||
|
||||
if (storedNotification) {
|
||||
const event = JSON.parse(storedNotification);
|
||||
this.showStoredNotification(event);
|
||||
localStorage.removeItem('pendingNotification'); // Limpiar después de mostrar
|
||||
}
|
||||
|
||||
// Escuchar nuevas notificaciones desde Livewire
|
||||
Livewire.on('notification', event => {
|
||||
if (event.deferReload) {
|
||||
// Guardar la notificación en localStorage para mostrar después de la recarga
|
||||
localStorage.setItem('pendingNotification', JSON.stringify(event));
|
||||
|
||||
window.location.reload();
|
||||
} else {
|
||||
// Mostrar la notificación inmediatamente
|
||||
this.showNotification(event);
|
||||
}
|
||||
});
|
||||
|
||||
// Escuchar evento personalizado para almacenar la notificación en localStorage
|
||||
document.addEventListener('store-notification', (event) => {
|
||||
const notification = {
|
||||
type: event.detail.type || 'info',
|
||||
message: event.detail.message || 'Notificación',
|
||||
delay: event.detail.delay || 5000,
|
||||
target: event.detail.target || 'body'
|
||||
};
|
||||
localStorage.setItem('pendingNotification', JSON.stringify(notification));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Método para emitir notificaciones desde JavaScript.
|
||||
* @param {Object} options - Opciones de la notificación.
|
||||
* @param {Function} callback - Callback opcional que se ejecutará después de mostrar la notificación.
|
||||
* @param {number} customTimeout - Timeout personalizado (opcional).
|
||||
*/
|
||||
emitNotification(options, callback, customTimeout) {
|
||||
const event = {
|
||||
target: options.target || 'body',
|
||||
message: options.message || 'Notificación',
|
||||
type: options.type || 'info',
|
||||
deferReload: options.deferReload || false,
|
||||
delay: customTimeout || options.delay || this.config.delay // Usar el timeout personalizado o el predeterminado
|
||||
};
|
||||
|
||||
// Mostrar la notificación
|
||||
this.showNotification(event);
|
||||
|
||||
// Ejecutar callback si está definido
|
||||
if (typeof callback === 'function') {
|
||||
callback(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Muestra una notificación almacenada.
|
||||
* @param {Object} event - Datos del evento de notificación.
|
||||
*/
|
||||
showStoredNotification(event) {
|
||||
this.showNotification(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Muestra una notificación.
|
||||
* @param {Object} event - Datos del evento de notificación.
|
||||
*/
|
||||
showNotification(event) {
|
||||
setTimeout(() => {
|
||||
const targetElement = document.querySelector(event.target);
|
||||
|
||||
if (!targetElement) {
|
||||
console.error(`Target ${event.target} no encontrado. Mostrando en el contenedor global.`);
|
||||
|
||||
this.showInGlobalContainer(event);
|
||||
return;
|
||||
}
|
||||
|
||||
// Crear un contenedor para notificaciones si no existe
|
||||
if (!targetElement.querySelector('.notification-container')) {
|
||||
const container = document.createElement('div');
|
||||
|
||||
container.className = 'notification-container';
|
||||
targetElement.appendChild(container);
|
||||
}
|
||||
|
||||
const notificationContainer = targetElement.querySelector('.notification-container');
|
||||
const notificationElement = this.renderNotification(notificationContainer, event);
|
||||
|
||||
// Callback opcional al mostrar la notificación
|
||||
if (typeof this.config.onNotificationShown === 'function') {
|
||||
this.config.onNotificationShown(notificationElement, event);
|
||||
}
|
||||
|
||||
// Configurar el timeout para eliminar la notificación
|
||||
this.setdelay(notificationElement, event);
|
||||
|
||||
// Configurar el evento para el botón de cierre
|
||||
this.setupCloseButton(notificationElement, event);
|
||||
}, 5);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza una notificación en el contenedor global (body).
|
||||
* @param {Object} event - Datos del evento de notificación.
|
||||
*/
|
||||
showInGlobalContainer(event) {
|
||||
const globalContainer = document.body;
|
||||
if (!globalContainer.querySelector('.notification-container')) {
|
||||
const container = document.createElement('div');
|
||||
|
||||
container.className = 'notification-container';
|
||||
globalContainer.appendChild(container);
|
||||
}
|
||||
|
||||
const notificationContainer = globalContainer.querySelector('.notification-container');
|
||||
const notificationElement = this.renderNotification(notificationContainer, event);
|
||||
|
||||
if (typeof this.config.onNotificationShown === 'function') {
|
||||
this.config.onNotificationShown(notificationElement, event);
|
||||
}
|
||||
|
||||
this.setdelay(notificationElement, event);
|
||||
this.setupCloseButton(notificationElement, event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza una notificación en el contenedor.
|
||||
* @param {HTMLElement} container - Contenedor de notificaciones.
|
||||
* @param {Object} event - Evento de notificación con tipo y mensaje.
|
||||
* @returns {HTMLElement} - Elemento de la notificación recién creada.
|
||||
*/
|
||||
renderNotification(container, event) {
|
||||
const notificationElement = document.createElement('div');
|
||||
|
||||
notificationElement.className = `alert alert-${event.type} alert-dismissible fade show`;
|
||||
notificationElement.role = 'alert';
|
||||
notificationElement.innerHTML = `${event.message} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
|
||||
|
||||
container.appendChild(notificationElement);
|
||||
|
||||
return notificationElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Configura un timeout para limpiar una notificación específica.
|
||||
* @param {HTMLElement} notificationElement - Elemento de la notificación.
|
||||
* @param {Object} event - Evento asociado a la notificación.
|
||||
*/
|
||||
setdelay(notificationElement, event) {
|
||||
const timeout = event.delay || this.config.delay;
|
||||
|
||||
setTimeout(() => {
|
||||
if (notificationElement && notificationElement.parentElement) {
|
||||
notificationElement.remove();
|
||||
|
||||
// Callback opcional al eliminar la notificación
|
||||
if (typeof this.config.onNotificationRemoved === 'function') {
|
||||
this.config.onNotificationRemoved(notificationElement, event);
|
||||
}
|
||||
}
|
||||
}, timeout);
|
||||
}
|
||||
|
||||
/**
|
||||
* Configura el cierre manual de una notificación mediante el botón "Cerrar".
|
||||
* @param {HTMLElement} notificationElement - Elemento de la notificación.
|
||||
* @param {Object} event - Evento asociado a la notificación.
|
||||
*/
|
||||
setupCloseButton(notificationElement, event) {
|
||||
const closeButton = notificationElement.querySelector('.btn-close');
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener('click', () => {
|
||||
notificationElement.remove();
|
||||
|
||||
// Callback opcional al cerrar la notificación manualmente
|
||||
if (typeof this.config.onNotificationClosed === 'function') {
|
||||
this.config.onNotificationClosed(notificationElement, event);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(!window.livewireNotification) {
|
||||
window.livewireNotification = new LivewireNotification();
|
||||
}
|
||||
Reference in New Issue
Block a user