Menu contextual al dar click derecho (d3add83b) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

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

+70 −14

Original line number	Diff line number	Diff line
		<div id="contextMenu" class="hidden fixed z-50 bg-white border border-gray-300 rounded-md shadow-lg py-2 w-40">
		<button id="editarBtn" class="w-full text-left px-4 py-2 hover:bg-gray-100">Editar</button>
		<button id="eliminarBtn" class="w-full text-left px-4 py-2 text-red-600 hover:bg-red-100">Eliminar</button>
		</div>

		<x-layout.default>

		<script src="/assets/js/simple-datatables.js"></script>
		@@ -48,20 +53,22 @@
		<script src="/assets/js/jquery.toast.js"></script>

		<script>
		const usuarios = @json($usuarios);
		const data = usuarios.map(user => [user.username, user.name, user.roles[0].name, user.dependencia.nombre, renderIsActive(user.active), renderActions(user.id, user.name)]);

		function renderActions(id, nombre) {
		return `
		<div class="flex space-x-2">
		<form action="{{ route('usuarios.destroy', '') }}/${id}" method="POST" class="inline-block">
		@csrf
		@method('DELETE')
		<button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
		</form>
		<a href="/administracion/usuarios/${id}/editar" class="btn btn-primary btn-sm">Editar</a>
		</div>`;
		function showAlert() {
		return Swal.fire({
		icon: 'warning',
		title: '¿Estás seguro?',
		text: "¡No podrás revertir esto!",
		showCancelButton: true,
		confirmButtonText: 'Eliminar',
		cancelButtonText: 'Cancelar',
		padding: '2em',
		});
		}
		</script>

		<script>
		const usuarios = @json($usuarios);
		const data = usuarios.map(user => [user.username, user.name, user.roles[0].name, user.dependencia.nombre, renderIsActive(user.active)]);

		function renderIsActive(bool) {
		if(bool === 0){
		@@ -91,7 +98,7 @@ function personalizarPaginacion() {
		document.addEventListener('DOMContentLoaded', () => {
		const datatable = new simpleDatatables.DataTable('#myTable', {
		data: {
		headings: ['Usuario', 'Nombre', 'Tipo', 'Dependencia', 'Activo', 'Acciones'],
		headings: ['Usuario', 'Nombre', 'Tipo', 'Dependencia', 'Activo'],
		data: data
		},
		perPage: 10,
		@@ -187,5 +194,54 @@ function showToast(message, heading, icon) {
		@endforeach
		@endif
		});

		let selectedUsuarioId = null;

		document.addEventListener('DOMContentLoaded', function() {
		document.querySelectorAll('#myTable tbody tr').forEach(tr => {
		tr.addEventListener('contextmenu', function(e){
		e.preventDefault();

		const rowIndex = Array.from(tr.parentNode.children).indexOf(tr);
		selectedContactoId = usuarios[rowIndex]?.id;

		const menu = document.getElementById('contextMenu');
		menu.style.left = `${e.pageX}px`;
		menu.style.top = `${e.pageY}px`;
		menu.classList.remove('hidden');
		});
		});

		document.addEventListener('click', function(e){
		const menu = document.getElementById('contextMenu')
		if(!menu.contains(e.target)){
		menu.classList.add('hidden');
		}
		})

		document.getElementById('editarBtn').addEventListener('click', function() {
		if (selectedContactoId) {
		window.location.href = `/administracion/usuarios/${selectedContactoId}/editar`;
		}
		});
		document.getElementById('eliminarBtn').addEventListener('click', function() {
		if (selectedContactoId) {
		showAlert().then((result) => {
		if (result.isConfirmed) {
		// Crea un formulario y envíalo
		const form = document.createElement('form');
		form.method = 'POST';
		form.action = `/administracion/usuarios/${selectedContactoId}`;
		form.innerHTML = `
		@csrf
		@method('DELETE')
		`;
		document.body.appendChild(form);
		form.submit();
		}
		});
		}
		});
		});
		</script>
		</x-layout.default>
		No newline at end of file