Plantilla base (d6d55e8d) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

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

+142 −27

Original line number	Diff line number	Diff line
		@@ -16,15 +16,62 @@
		</li>
		</ul>
		<div class="panel mt-6">
		<div id="editModal" class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto">
		<div class="flex items-start justify-center min-h-screen px-4" @click.self="open = false">
		<div class="panel border-0 py-1 px-4 rounded-lg overflow-hidden w-full max-w-sm my-8">
		<div class="flex items-center justify-between p-5 font-semibold text-lg dark:text-white">
		Editar dependencia
		<button type="button" @click="toggle" class="text-white-dark hover:text-dark">
		<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
		<line x1="18" y1="6" x2="6" y2="18"></line>
		<line x1="6" y1="6" x2="18" y2="18"></line>
		</svg>
		</button>
		</div>
		<div class="p-5">
		<form action="{{ route('catalogos.dependencias.update') }}" method="POST">
		@csrf
		@method('PUT')
		<div class="relative mb-4">
		<label for="nombre">Nombre</label>
		<div class="flex">
		<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M22 22L2 22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M21 22V13M11.0044 5C11.0223 3.76022 11.1143 3.05733 11.5858 2.58579C12.1716 2 13.1144 2 15 2H17C18.8857 2 19.8285 2 20.4143 2.58579C21 3.17157 21 4.11438 21 6V9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M15 22V16M3 22V13M3 9C3 7.11438 3 6.17157 3.58579 5.58579C4.17157 5 5.11438 5 7 5H11C12.8856 5 13.8284 5 14.4142 5.58579C15 6.17157 15 7.11438 15 9V12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M9 22V19" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 8H12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 11H7M12 11H9.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 14H12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		</svg>

		</div>
		<input id="nombreEditar" name="nombre" type="text" placeholder="Nombre de la dependencia:" class="form-input ltr:rounded-l-md rtl:rounded-r-md" />
		</div>
		</div>
		<input type="hidden" name="id" id="idEditar">
		<button id="guardarEditar" type="submit" class="btn btn-primary w-full">Actualizar</button>
		</form>
		</div>
		</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 x-data="modal">
		<button type="button" class="btn btn-success btn-sm m-1 " @click="toggle">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ltr:mr-2 rtl:ml-2">
		<path d="M15.3929 4.05365L14.8912 4.61112L15.3929 4.05365ZM19.3517 7.61654L18.85 8.17402L19.3517 7.61654ZM21.654 10.1541L20.9689 10.4592V10.4592L21.654 10.1541ZM3.17157 20.8284L3.7019 20.2981H3.7019L3.17157 20.8284ZM20.8284 20.8284L20.2981 20.2981L20.2981 20.2981L20.8284 20.8284ZM14 21.25H10V22.75H14V21.25ZM2.75 14V10H1.25V14H2.75ZM21.25 13.5629V14H22.75V13.5629H21.25ZM14.8912 4.61112L18.85 8.17402L19.8534 7.05907L15.8947 3.49618L14.8912 4.61112ZM22.75 13.5629C22.75 11.8745 22.7651 10.8055 22.3391 9.84897L20.9689 10.4592C21.2349 11.0565 21.25 11.742 21.25 13.5629H22.75ZM18.85 8.17402C20.2034 9.3921 20.7029 9.86199 20.9689 10.4592L22.3391 9.84897C21.9131 8.89241 21.1084 8.18853 19.8534 7.05907L18.85 8.17402ZM10.0298 2.75C11.6116 2.75 12.2085 2.76158 12.7405 2.96573L13.2779 1.5653C12.4261 1.23842 11.498 1.25 10.0298 1.25V2.75ZM15.8947 3.49618C14.8087 2.51878 14.1297 1.89214 13.2779 1.5653L12.7405 2.96573C13.2727 3.16993 13.7215 3.55836 14.8912 4.61112L15.8947 3.49618ZM10 21.25C8.09318 21.25 6.73851 21.2484 5.71085 21.1102C4.70476 20.975 4.12511 20.7213 3.7019 20.2981L2.64124 21.3588C3.38961 22.1071 4.33855 22.4392 5.51098 22.5969C6.66182 22.7516 8.13558 22.75 10 22.75V21.25ZM1.25 14C1.25 15.8644 1.24841 17.3382 1.40313 18.489C1.56076 19.6614 1.89288 20.6104 2.64124 21.3588L3.7019 20.2981C3.27869 19.8749 3.02502 19.2952 2.88976 18.2892C2.75159 17.2615 2.75 15.9068 2.75 14H1.25ZM14 22.75C15.8644 22.75 17.3382 22.7516 18.489 22.5969C19.6614 22.4392 20.6104 22.1071 21.3588 21.3588L20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25V22.75ZM21.25 14C21.25 15.9068 21.2484 17.2615 21.1102 18.2892C20.975 19.2952 20.7213 19.8749 20.2981 20.2981L21.3588 21.3588C22.1071 20.6104 22.4392 19.6614 22.5969 18.489C22.7516 17.3382 22.75 15.8644 22.75 14H21.25ZM2.75 10C2.75 8.09318 2.75159 6.73851 2.88976 5.71085C3.02502 4.70476 3.27869 4.12511 3.7019 3.7019L2.64124 2.64124C1.89288 3.38961 1.56076 4.33855 1.40313 5.51098C1.24841 6.66182 1.25 8.13558 1.25 10H2.75ZM10.0298 1.25C8.15538 1.25 6.67442 1.24842 5.51887 1.40307C4.34232 1.56054 3.39019 1.8923 2.64124 2.64124L3.7019 3.7019C4.12453 3.27928 4.70596 3.02525 5.71785 2.88982C6.75075 2.75158 8.11311 2.75 10.0298 2.75V1.25Z" fill="currentColor" />
		<path opacity="0.5" d="M13 2.5V5C13 7.35702 13 8.53553 13.7322 9.26777C14.4645 10 15.643 10 18 10H22" stroke="currentColor" stroke-width="1.5" />
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M22 22L2 22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M21 22V13M11.0044 5C11.0223 3.76022 11.1143 3.05733 11.5858 2.58579C12.1716 2 13.1144 2 15 2H17C18.8857 2 19.8285 2 20.4143 2.58579C21 3.17157 21 4.11438 21 6V9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M15 22V16M3 22V13M3 9C3 7.11438 3 6.17157 3.58579 5.58579C4.17157 5 5.11438 5 7 5H11C12.8856 5 13.8284 5 14.4142 5.58579C15 6.17157 15 7.11438 15 9V12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M9 22V19" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 8H12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 11H7M12 11H9.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 14H12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		</svg>
		CSV

		Crear nueva dependencia
		</button>
		<!-- modal -->
		<div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="open && '!block'">
		@@ -46,13 +93,15 @@
		<div class="flex">
		<div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<g opacity="0.5">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9574C22 12.0344 22 12.6901 22 13.5629V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z" fill="#1C274C" />
		</g>
		<path d="M6 13.75C5.58579 13.75 5.25 14.0858 5.25 14.5C5.25 14.9142 5.58579 15.25 6 15.25H14C14.4142 15.25 14.75 14.9142 14.75 14.5C14.75 14.0858 14.4142 13.75 14 13.75H6Z" fill="#1C274C" />
		<path d="M6 17.25C5.58579 17.25 5.25 17.5858 5.25 18C5.25 18.4142 5.58579 18.75 6 18.75H11.5C11.9142 18.75 12.25 18.4142 12.25 18C12.25 17.5858 11.9142 17.25 11.5 17.25H6Z" fill="#1C274C" />
		<path d="M11.5092 2.2601L11.5 5.0945C11.4999 6.1916 11.4998 7.16117 11.6049 7.94269C11.7188 8.78981 11.9803 9.6368 12.6716 10.3281C13.3629 11.0193 14.2098 11.2808 15.057 11.3947C15.8385 11.4998 16.808 11.4997 17.9051 11.4996L21.9574 11.4996C21.9698 11.6552 21.9786 11.821 21.9848 11.9995H22C22 11.732 22 11.5983 21.9901 11.4408C21.9335 10.5463 21.5617 9.52125 21.0315 8.79853C20.9382 8.6713 20.8743 8.59493 20.7467 8.44218C19.9542 7.49359 18.911 6.31193 18 5.49953C17.1892 4.77645 16.0787 3.98536 15.1101 3.3385C14.2781 2.78275 13.862 2.50487 13.2915 2.29834C13.1403 2.24359 12.9408 2.18311 12.7846 2.14466C12.4006 2.05013 12.0268 2.01725 11.5 2.00586L11.5092 2.2601Z" fill="#1C274C" />
		<path d="M22 22L2 22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M21 22V13M11.0044 5C11.0223 3.76022 11.1143 3.05733 11.5858 2.58579C12.1716 2 13.1144 2 15 2H17C18.8857 2 19.8285 2 20.4143 2.58579C21 3.17157 21 4.11438 21 6V9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M15 22V16M3 22V13M3 9C3 7.11438 3 6.17157 3.58579 5.58579C4.17157 5 5.11438 5 7 5H11C12.8856 5 13.8284 5 14.4142 5.58579C15 6.17157 15 7.11438 15 9V12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M9 22V19" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 8H12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 11H7M12 11H9.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M6 14H12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		</svg>

		</div>
		<input id="nombre" name="nombre" type="text" placeholder="Nombre de la institución:" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
		</div>
		@@ -82,27 +131,43 @@
		</div>
		</div>

		<link rel="stylesheet" href="{{ Vite::asset('resources/css/highlight.min.css') }}">
		<script src="/assets/js/highlight.min.js"></script>

		<script>
		const dependencias = @json($dependencia);
		const data = dependencias.map(dep => [dep.id, dep.nombre, renderActions(dep.id)]);
		const data = dependencias.map(dep => [dep.id, dep.nombre, renderActions(dep.id, dep.nombre)]);

		window.toggle = function() {
		const modal = document.querySelector('#editModal');
		modal.classList.toggle('hidden');
		};

		function renderActions(id) {
		function renderActions(id, nombre) {
		return `
		<div class="flex space-x-2">
		<button class="btn btn-danger btn-sm" onclick="deleteItem(${id})">Eliminar</button>
		<button class="btn btn-primary btn-sm" onclick="editItem(${id})">Editar</button>
		<button class="btn btn-primary btn-sm" onclick="editItem(${id}, '${nombre}')">Editar</button>
		</div>`;
		}

		function deleteItem(id) {
		console.log('Eliminar', id);
		// Aquí puedes agregar tu lógica para eliminar el item
		}

		function editItem(id) {
		console.log('Editar', id);
		// Aquí puedes agregar tu lógica para editar el item
		function editItem(id, nombre) {
		const modal = document.querySelector('#editModal');
		const nombreInput = modal.querySelector('#nombreEditar');

		// Asigna el nombre actual de la dependencia al input del modal
		nombreInput.value = nombre;

		// Agrega el ID de la dependencia al botón de guardar del modal
		const idInput = modal.querySelector('#idEditar');
		idInput.value = id;

		// Abre el modal de edición
		modal.classList.remove('hidden');
		}

		document.addEventListener('DOMContentLoaded', () => {
		@@ -140,16 +205,6 @@ function editItem(id) {
		window.editItem = editItem;
		});

		function formatDate(date) {
		if (date) {
		const dt = new Date(date);
		const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
		const day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
		return day + '/' + month + '/' + dt.getFullYear();
		}
		return '';
		}

		document.addEventListener("alpine:init", () => {
		Alpine.data("modal", (initialOpenState = false) => ({
		open: initialOpenState,
		@@ -159,5 +214,65 @@ function formatDate(date) {
		},
		}));
		});

		showMessage = (msg = 'Example notification text.', position = 'bottom-start', showCloseButton = true, closeButtonHtml = '', duration = 3000, type = 'success') => {
		const toast = window.Swal.mixin({
		toast: true,
		position: position \|\| 'bottom-start',
		showConfirmButton: false,
		timer: duration,
		showCloseButton: showCloseButton,
		customClass: {
		container: 'custom-swal-container',
		popup: 'custom-swal-popup',
		title: 'custom-swal-title',
		}
		});

		// Define el color y el icono según el tipo de mensaje
		let color;
		let icon;
		if (type === 'success') {
		color = '#4caf50'; // Color verde para éxito
		icon = 'success'; // Icono de éxito
		} else if (type === 'error') {
		color = '#f44336'; // Color rojo para error
		icon = 'error'; // Icono de error
		}

		// Aplica el estilo al mensaje
		toast.fire({
		title: msg,
		icon: icon,
		showClass: {
		popup: 'swal2-noanimation',
		},
		hideClass: {
		popup: '',
		},
		customClass: {
		title: 'swal2-title',
		popup: 'swal2-popup',
		icon: 'swal2-icon',
		},
		timerProgressBar: true,
		timerProgressBarColor: color,
		timerProgressBarHeight: 3,
		background: color,
		iconColor: 'white',
		});
		};

		// Verifica si hay un mensaje de éxito en la sesión
		@if(session('success'))
		// Muestra el mensaje de éxito utilizando showMessage
		showMessage('{{ session('success') }}', 'bottom-start', true, '', 3000, 'success');
		@endif

		// Verifica si hay un mensaje de error en la sesión
		@if(session('error'))
		// Muestra el mensaje de error utilizando showMessage
		showMessage('{{ session('error') }}', 'bottom-start', true, '', 3000, 'error');
		@endif
		</script>
		</x-layout.default>
		No newline at end of file