koneko/laravel-vuexy-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Testing Alpha

Browse Source
This commit is contained in:
Arturo Corro
2025-05-11 14:14:50 -06:00
parent 988b86a33d
commit a7002701f5
1903 changed files with 77534 additions and 36485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
resources/assets/js/bootstrap-table/globalFormatters.js
View File

@ -1,5 +1,4 @@
import { booleanStatusCatalog, statusIntBadgeBgCatalogCss, statusIntBadgeBgCatalog } from './globalConfig';
import {routes} from '@vuexy-admin/bootstrap-table/globalConfig.js';
import { routes, getAvatarUrl, booleanStatusCatalog, statusIntBadgeBgCatalogCss, statusIntBadgeBgCatalog } from '@vuexy-admin/assets/js/bootstrap-table/globalConfig';
export const userActionFormatter = (value, row, index) => {
if (!row.id) return '';
@ -9,7 +8,7 @@ export const userActionFormatter = (value, row, index) => {
const deleteUrl = routes['admin.user.delete'].replace(':id', row.id);
return `
<div class="flex space-x-2">
<div class="flex justify-center space-x-2">
<a href="${editUrl}" title="Editar" class="icon-button hover:text-slate-700">
<i class="ti ti-edit"></i>
</a>
@ -23,6 +22,25 @@ export const userActionFormatter = (value, row, index) => {
`.trim();
};
export const userLoginActionFormatter = (value, row, index) => {
if (!row.user_id) return '';
//const showUrl = routes['admin.user-login.show'].replace(':id', row.user_id);
const showUrl = '#';
return `
<div class="flex justify-center space-x-2">
<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] || {};
@ -50,6 +68,8 @@ export const dynamicBooleanFormatter = (value, row, index, options = {}) => {
};
export const dynamicBadgeFormatter = (value, row, index, options = {}) => {
if (!value) return '';
const {
color = 'primary', // Valor por defecto
textColor = '', // Permite agregar color de texto si es necesario
@ -59,6 +79,11 @@ export const dynamicBadgeFormatter = (value, row, index, 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>`
@ -71,95 +96,240 @@ export const textNowrapFormatter = (value, row, index) => {
}
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 textXsFormatter = (value, row, index) => {
if (!value) return '';
return `<span class="text-xs">${value}</span>`;
};
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}`;
export const dateClassicFormatter = (value) => {
if (!value) return '';
const date = new Date(value);
if (isNaN(date)) return value;
const fecha = date.toLocaleDateString('es-MX', { day: '2-digit', month: '2-digit', year: 'numeric' });
const hora = value.length == 19? date.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' }): false;
let fechaHora = hora
? `<span class="inline-flex items-center gap-1 text-blue-700 text-xs px-2 py-0.5 me-1">
<i class="ti ti-calendar-event text-[14px]"></i> ${fecha}
</span>`
: `<span class="inline-flex items-center gap-1 text-blue-700 px-2 py-1">
<i class="ti ti-calendar-event text-[16px]"></i> ${fecha}
</span>`;
if (hora) {
fechaHora += `
<span class="inline-flex items-center gap-1 text-gray-700 text-xs px-2 py-0.5">
<i class="ti ti-clock text-[14px]"></i> ${hora}
</span>
`.trim();
}
return `${baseUrl}admin/usuario/avatar/?name=${fullName}`;
}
return fechaHora.trim();
};
export const dateLimeFormatter = (value) => {
if (!value) return '';
const date = new Date(value);
if (isNaN(date)) return value;
const fecha = date.toLocaleDateString('es-MX', { day: '2-digit', month: '2-digit', year: 'numeric' });
const hora = value.length == 19? date.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' }): false;
let fechaHora = hora
? `<span class="inline-flex items-center gap-1 text-lime-800 text-xs px-2 py-0.5 me-1">
<i class="ti ti-calendar-event text-[14px]"></i> ${fecha}
</span>`
: `<span class="inline-flex items-center gap-1 text-lime-800 px-2 py-1">
<i class="ti ti-calendar-event text-[16px]"></i> ${fecha}
</span>`;
if (hora) {
fechaHora += `
<span class="inline-flex items-center gap-1 text-lime-600 text-xs px-2 py-0.5">
<i class="ti ti-clock text-[14px]"></i> ${hora}
</span>
`.trim();
}
return fechaHora.trim();
};
export const dateBadgeBlueFormatter = (value) => {
if (!value) return '';
const date = new Date(value);
if (isNaN(date)) return value;
const fecha = date.toLocaleDateString('es-MX', { day: '2-digit', month: '2-digit', year: 'numeric' });
const hora = value.length == 19? date.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' }): false;
let fechaHora = hora
? `<span class="inline-flex items-center gap-1 rounded-full bg-blue-50 text-blue-700 text-xs px-2 py-0.5 me-1">
<i class="ti ti-calendar-event text-[14px]"></i> ${fecha}
</span>`
: `<span class="inline-flex items-center gap-1 rounded-full bg-blue-50 text-blue-700 px-2 py-1">
<i class="ti ti-calendar-event text-[16px]"></i> ${fecha}
</span>`;
if (hora) {
fechaHora += `
<span class="inline-flex items-center gap-1 rounded-full bg-gray-100 text-gray-700 text-xs px-2 py-0.5">
<i class="ti ti-clock text-[14px]"></i> ${hora}
</span>
`.trim();
}
return fechaHora.trim();
};
export const dateBadgeAmberFormatter = (value) => {
if (!value) return '';
const date = new Date(value);
if (isNaN(date)) return value;
const fecha = date.toLocaleDateString('es-MX', { day: '2-digit', month: '2-digit', year: 'numeric' });
const hora = value.length == 19? date.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' }): false;
let fechaHora = hora
? `<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 text-xs px-2 py-0.5 me-1">
<i class="ti ti-calendar-event text-[14px]"></i> ${fecha}
</span>`
: `<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 px-2 py-1">
<i class="ti ti-calendar-event text-[16px]"></i> ${fecha}
</span>`;
if (hora) {
fechaHora += `
<span class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-600 text-xs px-2 py-0.5">
<i class="ti ti-clock text-[14px]"></i> ${hora}
</span>
`.trim();
}
return fechaHora.trim();
};
export const emailFormatter = (value, row, index) => {
if (!value) return '';
return `
<a href="mailto:${value}" class="flex items-center space-x-2 text-blue-600">
<i class="ti ti-mail-filled"></i>
<span class="whitespace-nowrap hover:underline">${value}</span>
</a>
`.trim();
};
/**
* Formatea la columna del perfil de usuario con avatar, nombre y correo.
* Formatter para mostrar duración de sesión del usuario.
*
* @param {string} row.created_at - Fecha de inicio de sesión.
* @param {string|null} row.logout_at - Fecha de cierre de sesión o null si aún activa.
* @returns {string} Duración de la sesión formateada o estado de sesión activa.
*/
export const userProfileFormatter = (value, row, index) => {
export const sessionDurationFormatter = (value, row, index) => {
if (!row.created_at) return '<span class="text-muted">-</span>';
const start = new Date(row.created_at);
const end = row.logout_at ? new Date(row.logout_at) : new Date();
const diffMs = end - start;
if (diffMs < 0) return '<span class="text-danger">Invalido</span>';
const diffSeconds = Math.floor(diffMs / 1000);
const hours = Math.floor(diffSeconds / 3600);
const minutes = Math.floor((diffSeconds % 3600) / 60);
const seconds = diffSeconds % 60;
const formattedTime = [
hours ? `${hours}h` : '',
minutes ? `${minutes}m` : '',
`${seconds}s`
].filter(Boolean).join(' ');
return row.logout_at
? `<span class="text-xs font-medium text-slate-700">${formattedTime}</span>`
: `<span class="text-xs font-semibold text-success-600">🟢 Sesión activa (${formattedTime})</span>`;
};
/**
* @param {int} row.id - Identificador del usuario
* @param {string} row.full_name - Nombre completo del usuario
* @param {string} row.profile_photo_path - Ruta de la foto de perfil
* @param {string} row.email - Correo electrónico del usuario
* @returns {string} HTML con el perfil del usuario
*/
export const userIdProfileFormatter = (value, row, index) => {
if (!row.id) return '';
const avatar = getAvatarUrl(row.full_name, row.profile_photo_path);
const email = row.email ? row.email : 'Sin correo';
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 formatterProfileElement(row.id, row.full_name, avatar, email, profileUrl);
};
const formatterProfileElement = (id, name, avatar, email, profileUrl) => {
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>
<a href="${profileUrl}" class="font-medium text-slate-700 hover:underline block text-wrap">${name}</a>
<small class="text-muted block truncate">${email}</small>
</div>
</div>
`;
`.trim();
};
/**
* Formatea la columna del perfil de contacto con avatar, nombre y correo.
* @param {int} row.user_id - Identificador del usuario
* @param {string} row.user_name - Nombre del usuario
* @param {string} row.user_profile_photo_path - Ruta de la foto de perfil
* @param {string} row.user_email - Correo electrónico del usuario
* @returns {string} HTML con el perfil del usuario
*/
export const contactProfileFormatter = (value, row, index) => {
if (!row.id) return '';
export const userProfileFormatter = (value, row, index) => {
if (!row.user_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';
const profileUrl = routes['admin.user.show'].replace(':id', row.user_id);
const avatar = getAvatarUrl(row.user_name, row.user_profile_photo_path);
const email = row.user_email ? row.user_email : 'Sin correo';
return `
<div class="flex items-center space-x-3" style="min-width: 240px">
@ -167,27 +337,101 @@ export const contactProfileFormatter = (value, row, index) => {
<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>
<a href="${profileUrl}" class="font-medium text-slate-700 hover:underline block text-wrap">${row.user_name}</a>
<small class="text-muted block truncate">${email}</small>
</div>
</div>
`;
`.trim();
};
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);
export const creatorProfileFormatter = (value, row, index) => {
if (!row.created_by) return '';
const profileUrl = routes['admin.user.show'].replace(':id', row.created_by);
const avatar = getAvatarUrl(row.creator_name, row.creator_profile_photo_path);
const email = row.creator_email ? row.creator_email : 'Sin correo';
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 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.creator_name}</a>
<small class="text-muted block truncate">${email}</small>
</div>
</div>
`;
`.trim();
};
export const updaterProfileFormatter = (value, row, index) => {
if (!row.updated_by) return '';
const profileUrl = routes['admin.user.show'].replace(':id', row.updated_by);
const avatar = getAvatarUrl(row.updater_name, row.updater_profile_photo_path);
const email = row.updater_email ? row.updater_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.updater_name}</a>
<small class="text-muted block truncate">${email}</small>
</div>
</div>
`.trim();
};
/**
* Convierte bytes en un formato legible por humanos.
*
* @param {int} value - Valor en bytes
* @returns {string} Tamaño en formato legible
*/
export const bytesToHumanReadable = (value, row, index) => {
if (!value || value === 0) return;
const precision = 2; // define aquí la precisión que desees
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
const base = Math.floor(Math.log(value) / Math.log(1024));
return (value / Math.pow(1024, base)).toFixed(precision) + ' ' + units[base];
};
export const userRoleFormatter = (value, row, index) => {
if (!value) return '';
const rolesStyles = window.userRoleStyles || {};
return value.split('|').map(role => {
const trimmedRole = role.trim();
const color = rolesStyles[trimmedRole] || 'secondary'; // fallback si no existe
return `<span class="badge bg-label-${color} mr-2 mb-2">${trimmedRole}</span>`;
}).join('');
};
export const booleanStatusFormatter = (value, row, index) => {
return `<span class="badge bg-label-${value ? 'success' : 'danger'}">${value ? 'Activo' : 'Inactivo'}</span>`;
};