Implementacion y diseño del plugin datatables (f7893ae8) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

resources/views/adminGen/auditoria/index.blade.php

+80 −11

Original line number	Diff line number	Diff line
		@@ -29,11 +29,17 @@
		Crear nueva lista
		</a>
		</div>
		<table id="myTable" class="whitespace-nowrap table-hover">
		<thead></thead>
		<tbody></tbody>
		</table>

		<div class="overflow-x-auto">
		<table id="myTable" class="min-w-full table-auto whitespace-nowrap divide-y divide-gray-200 border border-gray-300 rounded-md shadow-sm text-sm text-left">
		<thead class="bg-gray-100 text-gray-700 uppercase tracking-wider font-semibold">
		<!-- encabezados -->
		</thead>
		<tbody class="divide-y divide-gray-200">
		<!-- filas -->
		</tbody>
		</table>
		</div>
		</div>
		</div>

		@@ -49,31 +55,94 @@

		const data = datos.map(dato => [dato.contacto.nombre + ' ' + dato.contacto.ap_paterno + ' ' + dato.contacto.ap_materno, dato.user.name, dato.updated_at, dato.campo_editado, dato.valor_anterior, dato.nuevo_valor])

		function personalizarPaginacion() {
		const activos = document.querySelectorAll('.datatable-pagination-list-item');

		activos.forEach((li) => {
		const btn = li.querySelector('button');
		if (!btn) return;

		// Limpiamos estilos por si quedaron
		btn.className = 'px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition';

		// Si el LI tiene la clase activa, estilizamos su botón
		if (li.classList.contains("datatable-active")) {
		btn.classList.add("bg-blue-600", "text-white", "border-blue-600", "hover:bg-blue-700");
		}
		});
		}

		document.addEventListener('DOMContentLoaded', () => {
		const datatable = new simpleDatatables.DataTable('#myTable', {
		data: {
		headings: ['Contacto', 'Usuario', 'Fecha', 'Campo', 'Valor Anterior', 'Nuevo Valor'],
		data: data
		},
		perPage: 30,
		perPage: 10,
		perPageSelect: [10, 20, 30, 50, 100],
		columns: [{
		select: 0,
		select: [0, 1, 2, 3, 4, 5],
		sensitivity: 'base',
		sort: 'asc'
		},
		],
		firstLast: true,
		firstText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		lastText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		prevText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		nextText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		labels: {
		placeholder: "Buscar...",
		perPage: "{select}",
		perPage: "Filas por página",
		noResults: "No se encontraron resultados",
		noResultsDescription: "No se encontraron resultados para la búsqueda",
		noRows: "No hay filas para mostrar",
		info: "Mostrando {start} a {end} de {rows} filas",
		},
		});

		datatable.on("datatable.init", () => {
		const table = document.querySelector("#myTable");
		table.classList.add("min-w-full",
		"table-auto",
		"text-sm",
		"text-left",
		"border-collapse",
		"border"
		);

		document.querySelectorAll("#myTable thead th").forEach(th => {
		th.classList.add("bg-gray-100", "px-4", "py-2", "border", "font-semibold");
		});

		document.querySelectorAll("#myTable tbody tr").forEach(tr => {
		tr.classList.add("hover:bg-gray-50");
		tr.querySelectorAll("td").forEach(td => {
		td.classList.add("px-4", "py-2", "border");
		});
		})

		const searchWraper = document.querySelector(".datatable-top");
		if(searchWraper){
		searchWraper.classList.add("flex", "justify-between", "items-center", "mb-4");
		}

		const searchInput = document.querySelector(".datatable-input");
		if (searchInput) {
		searchInput.classList.add(
		"border",
		"rounded-md",
		"px-3",
		"py-2",
		"focus:outline-none",
		"focus:ring",
		"focus:ring-blue-300",
		"w-full",
		"max-w-sm"
		);
		}

		personalizarPaginacion();
		document.querySelector(".datatable-pagination-list").classList.add("flex", "items-center", "justify-center", "space-x-1");
		});

		datatable.on("datatable.page", () => setTimeout(personalizarPaginacion, 0));
		});

		function showToast(message, heading, icon) {

resources/views/adminGen/catalagos/cargos.blade.php

+81 −22

Original line number	Diff line number	Diff line
		@@ -3,7 +3,7 @@
		<script src="/assets/js/simple-datatables.js"></script>
		<link rel="stylesheet" href="{{ Vite::asset('resources/css/swiper-bundle.min.css') }}">
		<script src="/assets/js/swiper-bundle.min.js"></script>
		<div x-data="dependencias">
		<div>
		<ul class="flex space-x-2 rtl:space-x-reverse">
		<li>
		<a href="javascript:;" class="text-primary hover:underline">Dashboard</a>
		@@ -53,7 +53,7 @@
		</div>
		</div>
		</div>
		<div class="md:absolute md:top-5 ltr:md:left-5 rtl:md:right-5">
		<div class="flex items-center flex-wrap mb-5"">
		<div class="flex items-center flex-wrap mb-5">
		<div x-data="modal">
		<button type="button" class="btn btn-success btn-sm m-1 " @click="toggle">
		@@ -103,16 +103,16 @@
		</div>
		</div>
		</div>
		<table id="myTable" class="whitespace-nowrap table-hover">
		<thead>
		<tr>
		<th>Id</th>
		<th>Nombre</th>
		<th>Acciones</th> <!-- Nueva columna para las acciones -->
		</tr>
		<div class="overflow-x-auto">
		<table id="myTable" class="min-w-full table-auto whitespace-nowrap divide-y divide-gray-200 border border-gray-300 rounded-md shadow-sm text-sm text-left">
		<thead class="bg-gray-100 text-gray-700 uppercase tracking-wider font-semibold">
		<!-- encabezados -->
		</thead>
		<tbody></tbody>
		<tbody class="divide-y divide-gray-200">
		<!-- filas -->
		</tbody>
		</table>
		</div>

		</div>
		</div>
		@@ -156,6 +156,23 @@ function editItem(id, nombre) {
		modal.classList.remove('hidden');
		}

		function personalizarPaginacion() {
		const activos = document.querySelectorAll('.datatable-pagination-list-item');

		activos.forEach((li) => {
		const btn = li.querySelector('button');
		if (!btn) return;

		// Limpiamos estilos por si quedaron
		btn.className = 'px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition';

		// Si el LI tiene la clase activa, estilizamos su botón
		if (li.classList.contains("datatable-active")) {
		btn.classList.add("bg-blue-600", "text-white", "border-blue-600", "hover:bg-blue-700");
		}
		});
		}

		document.addEventListener('DOMContentLoaded', () => {
		const datatable = new simpleDatatables.DataTable('#myTable', {
		data: {
		@@ -165,27 +182,69 @@ function editItem(id, nombre) {
		perPage: 10,
		perPageSelect: [10, 20, 30, 50, 100],
		columns: [{
		select: 0,
		select: [0, 1],
		sensitivity: 'base',
		sort: 'asc'
		},
		{
		select: 5,
		render: (data, cell, row) => formatDate(data)
		}
		],
		firstLast: true,
		firstText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		lastText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		prevText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		nextText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		labels: {
		placeholder: "Buscar...",
		perPage: "{select}",
		perPage: 'Filas por página',
		noResults: "No hay resultados",
		noResultsDescription: "No se encontraron resultados para la búsqueda",
		noRows: "No hay filas para mostrar",
		info: "Mostrando {start} a {end} de {rows} filas",
		},
		});

		datatable.on("datatable.init", () => {
		const table = document.querySelector("#myTable");
		table.classList.add("min-w-full",
		"table-auto",
		"text-sm",
		"text-left",
		"border-collapse",
		"border"
		);

		document.querySelectorAll("#myTable thead th").forEach(th => {
		th.classList.add("bg-gray-100", "px-4", "py-2", "border", "font-semibold");
		});

		document.querySelectorAll("#myTable tbody tr").forEach(tr => {
		tr.classList.add("hover:bg-gray-50");
		tr.querySelectorAll("td").forEach(td => {
		td.classList.add("px-4", "py-2", "border");
		});
		})

		const searchWraper = document.querySelector(".datatable-top");
		if(searchWraper){
		searchWraper.classList.add("flex", "justify-between", "items-center", "mb-4");
		}

		const searchInput = document.querySelector(".datatable-input");
		if (searchInput) {
		searchInput.classList.add(
		"border",
		"rounded-md",
		"px-3",
		"py-2",
		"focus:outline-none",
		"focus:ring",
		"focus:ring-blue-300",
		"w-full",
		"max-w-sm"
		);
		}

		personalizarPaginacion();
		document.querySelector(".datatable-pagination-list").classList.add("flex", "items-center", "justify-center", "space-x-1");
		});

		datatable.on("datatable.page", () => setTimeout(personalizarPaginacion, 0));

		window.editItem = editItem;
		});

resources/views/adminGen/catalagos/grupos.blade.php

+79 −20

Original line number	Diff line number	Diff line
		@@ -55,7 +55,7 @@
		</div>
		</div>
		</div>
		<div class="md:absolute md:top-5 ltr:md:left-5 rtl:md:right-5">
		<div class="flex items-center flex-wrap mb-5">
		<div class="flex items-center flex-wrap mb-5">
		<div x-data="modal">
		<button type="button" class="btn btn-success btn-sm m-1 " @click="toggle">
		@@ -109,16 +109,16 @@
		</div>
		</div>
		</div>
		<table id="myTable" class="whitespace-nowrap table-hover">
		<thead>
		<tr>
		<th>Id</th>
		<th>Nombre</th>
		<th>Acciones</th>
		</tr>
		<div class="overflow-x-auto">
		<table id="myTable" class="min-w-full table-auto whitespace-nowrap divide-y divide-gray-200 border border-gray-300 rounded-md shadow-sm text-sm text-left">
		<thead class="bg-gray-100 text-gray-700 uppercase tracking-wider font-semibold">
		<!-- encabezados -->
		</thead>
		<tbody></tbody>
		<tbody class="divide-y divide-gray-200">
		<!-- filas -->
		</tbody>
		</table>
		</div>

		</div>
		</div>
		@@ -163,6 +163,23 @@ function editItem(id, nombre) {
		modal.classList.remove('hidden');
		}

		function personalizarPaginacion() {
		const activos = document.querySelectorAll('.datatable-pagination-list-item');

		activos.forEach((li) => {
		const btn = li.querySelector('button');
		if (!btn) return;

		// Limpiamos estilos por si quedaron
		btn.className = 'px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition';

		// Si el LI tiene la clase activa, estilizamos su botón
		if (li.classList.contains("datatable-active")) {
		btn.classList.add("bg-blue-600", "text-white", "border-blue-600", "hover:bg-blue-700");
		}
		});
		}

		document.addEventListener('DOMContentLoaded', () => {
		const datatable = new simpleDatatables.DataTable('#myTable', {
		data: {
		@@ -173,26 +190,68 @@ function editItem(id, nombre) {
		perPageSelect: [10, 20, 30, 50, 100],
		columns: [{
		select: 0,
		sensitivity: 'case',
		sort: 'asc'
		},
		{
		select: 5,
		render: (data, cell, row) => formatDate(data)
		}
		],
		firstLast: true,
		firstText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		lastText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		prevText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		nextText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
		labels: {
		placeholder: "Buscar...",
		perPage: "{select}",
		perPage: "Filas por página",
		noResults: "No hay resultados",
		noResultsDescription: "No se encontraron resultados para la búsqueda",
		noRows: "No hay filas para mostrar",
		info: "Mostrando {start} a {end} de {rows} filas",
		},
		});

		datatable.on("datatable.init", () => {
		const table = document.querySelector("#myTable");
		table.classList.add("min-w-full",
		"table-auto",
		"text-sm",
		"text-left",
		"border-collapse",
		"border"
		);

		document.querySelectorAll("#myTable thead th").forEach(th => {
		th.classList.add("bg-gray-100", "px-4", "py-2", "border", "font-semibold");
		});

		document.querySelectorAll("#myTable tbody tr").forEach(tr => {
		tr.classList.add("hover:bg-gray-50");
		tr.querySelectorAll("td").forEach(td => {
		td.classList.add("px-4", "py-2", "border");
		});
		})

		const searchWraper = document.querySelector(".datatable-top");
		if(searchWraper){
		searchWraper.classList.add("flex", "justify-between", "items-center", "mb-4");
		}

		const searchInput = document.querySelector(".datatable-input");
		if (searchInput) {
		searchInput.classList.add(
		"border",
		"rounded-md",
		"px-3",
		"py-2",
		"focus:outline-none",
		"focus:ring",
		"focus:ring-blue-300",
		"w-full",
		"max-w-sm"
		);
		}

		personalizarPaginacion();
		document.querySelector(".datatable-pagination-list").classList.add("flex", "items-center", "justify-center", "space-x-1");
		});

		datatable.on("datatable.page", () => setTimeout(personalizarPaginacion, 0));

		window.editItem = editItem;
		});

resources/views/adminGen/catalagos/profesion.blade.php

+182 −69

File changed.

Preview size limit exceeded, changes collapsed.

resources/views/adminGen/catalogos/dependencias.blade.php

+80 −22

File changed.

Preview size limit exceeded, changes collapsed.