Se elimino el menu contextual por problemas con la tabla (89c42372) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

app/Http/Controllers/ContactoController.php

+1 −1

Original line number	Diff line number	Diff line
		@@ -26,7 +26,7 @@ class ContactoController extends Controller
		*/
		public function index()
		{
		$contactos = Contacto::with('profesion', 'cargo', 'grupos', 'subgrupos')->get();
		$contactos = Contacto::orderBy('id', 'desc')->with('profesion', 'cargo', 'grupos', 'subgrupos')->get();
		return view('adminGen.contactos.index', compact('contactos'));
		}

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

+28 −65

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="verBtn" class="w-full text-left px-4 py-2 hover:bg-gray-100">Ver contacto</button>
		<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>
		@@ -84,11 +78,24 @@ function showAlert() {
		const data = contactos.map(contacto => {
		let nombreCompleto;

		return [renderParameter(contacto.profesion?.abreviatura), [contacto.nombre, contacto.ap_paterno, contacto.ap_materno].filter(Boolean).join(' '), renderParameter(contacto.cargo?.nombre),
		return [renderActions(contacto.id), renderParameter(contacto.profesion?.abreviatura), [contacto.nombre, contacto.ap_paterno, contacto.ap_materno].filter(Boolean).join(' '), renderParameter(contacto.cargo?.nombre),
		renderParameter(contacto.cargo_desc), renderParameter(contacto.grupos.map(grupo => grupo.nombre).join(', ')),
		renderParameter(contacto.subgrupos.map(subgrupo => subgrupo.nombre).join(', '))];
		renderParameter(contacto.subgrupos.map(subgrupo => subgrupo.nombre).join(', ')), renderActions(contacto.id)];
		});

		function renderActions(id) {
		return `
		<div class="flex space-x-2">
		<a href="/contactos/${id}/ver" class="btn btn-primary btn-sm">Ver contacto</a>
		<form action="{{ route('contacto.destroy', '') }}/${id}" method="POST" class="inline-block">
		@csrf
		@method('DELETE')
		<button type="button" class="btn btn-danger btn-sm btn-eliminar">Eliminar</button>
		</form>
		<a href="/contactos/${id}/editar" class="btn btn-primary btn-sm">Editar</a>
		</div>`;
		}

		function renderParameter(parametro) {
		if(parametro === null \|\| parametro === undefined \|\| parametro === ""){
		return `Sin información`;
		@@ -119,7 +126,7 @@ function personalizarPaginacion() {
		document.addEventListener('DOMContentLoaded', () => {
		datatable = new simpleDatatables.DataTable('#myTable', {
		data: {
		headings: ['Profesión', 'Nombre completo', 'Cargo', 'Descripción del cargo', 'Grupos', 'Subgrupos'],
		headings: ['Acciones', 'Profesión', 'Nombre completo', 'Cargo', 'Descripción del cargo', 'Grupos', 'Subgrupos', 'Acciones'],
		data: data
		},
		perPage: 10,
		@@ -230,6 +237,18 @@ class: "datatable-input filter-input w-full px-2 py-1 border rounded",

		});

		document.addEventListener('click', function(e) {
		if (e.target.classList.contains('btn-eliminar')) {
		e.preventDefault();
		const form = e.target.closest('form');
		showAlert().then((result) => {
		if (result.isConfirmed) {
		form.submit();
		}
		});
		}
		});

		function showToast(message, heading, icon) {
		$.toast({
		heading: heading,
		@@ -256,61 +275,5 @@ function showToast(message, heading, icon) {
		@endforeach
		@endif
		});



		let selectedContactoId = 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 = contactos[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('verBtn').addEventListener('click', function() {
		if (selectedContactoId) {
		window.location.href = `/contactos/${selectedContactoId}/ver`;
		}
		});
		document.getElementById('editarBtn').addEventListener('click', function() {
		if (selectedContactoId) {
		window.location.href = `/contactos/${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 = `/contactos/${selectedContactoId}`;
		form.innerHTML = `
		@csrf
		@method('DELETE')
		`;
		document.body.appendChild(form);
		form.submit();
		}
		});
		}
		});
		});
		</script>
		</x-layout.default>
		No newline at end of file