Ya funciona el catalago profesion (bbe1e6c5) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

app/Http/Controllers/ProfesionController.php

+4 −4

Original line number	Diff line number	Diff line
		@@ -22,7 +22,7 @@ public function store(Request $request)

		Profesion::create($validated);

		return redirect()->route('catalogos.profesion.get')->with('success', 'Profesión creada exitosamente.');
		return redirect()->route('catalogos.profesion.get');
		}

		public function update(Request $request, $id)

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

+59 −145

Original line number	Diff line number	Diff line
		@@ -2,8 +2,9 @@
		<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>
		<link rel="stylesheet" href="{{ asset('css/style.css') }}">

		<div x-data="dependencias">
		<div x-data="profesion">
		<ul class="flex space-x-2 rtl:space-x-reverse">
		<li>
		<a href="{{ route('dashboard') }}" class="text-primary hover:underline">Dashboard</a>
		@@ -85,7 +86,7 @@
		@method('DELETE')
		<button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
		</form>
		<button class="btn btn-primary btn-sm" onclick="editItem({{ $profesion->id }}, '{{ $profesion->nombre }}', '{{ $profesion->abreviatura }}')">Editar</button>
		<button class="btn btn-primary btn-sm" @click="editItem({{ $profesion->id }}, '{{ $profesion->nombre }}', '{{ $profesion->abreviatura }}')">Editar</button>
		</div>
		</td>
		</tr>
		@@ -93,12 +94,13 @@
		</tbody>
		</table>

		<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">
		<!-- Modal de edición -->
		<div id="editModal" class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto" :class="editOpen && '!block'">
		<div class="flex items-start justify-center min-h-screen px-4" @click.self="editOpen = false">
		<div x-show="editOpen" x-transition x-transition.duration.300 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 profesión
		<button type="button" @click="toggle" class="text-white-dark hover:text-dark">
		<button type="button" @click="toggleEdit" 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>
		@@ -106,109 +108,28 @@
		</button>
		</div>
		<div class="p-5">
		<form action="" method="">
		<form id="editForm" :action="`/catalogos/profesion/${id}`" method="POST">
		<form >
		@csrf
		@method('PUT')
		<div class="relative mb-4">
		<label for="nombreEditar">Nombre</label>
		<label for="abreviaturaEditar">Abreviatura</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" required type="text" placeholder="Nombre de la profesión" class="form-input" />
		<input id="abreviaturaEditar" name="abreviatura" required type="text" placeholder="Abreviatura de la profesión" class="form-input" />
		<input id="nombreEditar" name="nombre" x-model="nombre" required type="text" placeholder="Nombre de la profesión" class="form-input" />
		</div>
		<div class="relative mb-4">
		<label for="abreviaturaEditar">Abreviatura</label>
		<input id="abreviaturaEditar" name="abreviatura" x-model="abreviatura" required type="text" placeholder="Abreviatura de la profesión" class="form-input" />
		</div>
		<input type="hidden" name="id" id="idEditar">
		<input type="hidden" name="id" id="idEditar" x-model="id">
		<button type="submit" class="btn btn-primary w-full">Actualizar</button>
		</form>
		</div>
		</div>
		</div>
		</div>
		</div>
		</div>

		<!-- Script al final para manejar la funcionalidad -->
		<script>
		document.addEventListener('DOMContentLoaded', function() {
		@if(session('success'))
		showMessage("{{ session('success') }}", 'top-end', true, '', 3000, 'success');
		@endif

		@if($errors->any())
		@foreach($errors->all() as $error)
		showMessage("{{$error}}", 'top-end', true, '', 3000, 'error');
		@endforeach
		@endif
		});

		document.addEventListener("alpine:init", () => {
		Alpine.data("modal", (initialOpenState = false) => ({
		open: initialOpenState,
		toggle() {
		this.open = !this.open;
		},
		}));
		});

		// Función para abrir el modal de edición con los datos actuales
		function editItem(id, nombre, abreviatura) {
		const modal = document.querySelector('#editModal');
		const nombreInput = modal.querySelector('#nombreEditar');
		const abreviaturaInput = modal.querySelector('#abreviaturaEditar');
		const idInput = modal.querySelector('#idEditar');

		// Asigna los valores actuales al modal
		nombreInput.value = nombre;
		abreviaturaInput.value = abreviatura;
		idInput.value = id;

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

		document.addEventListener('DOMContentLoaded', () => {
		// Inicialización de la tabla con simpleDatatables
		const datatable = new simpleDatatables.DataTable('#myTable', {
		data: {
		headings: ['Id', 'Abreviatura', 'Nombre', 'Acciones'],
		data: data
		},
		perPage: 10,
		perPageSelect: [10, 20, 30, 50, 100],
		columns: [
		{ select: 0, sort: 'asc' },
		{ select: 2 }, // Esta columna mostrará el nombre
		{ select: 1 }, // Esta columna mostrará la abreviatura
		{
		select: 3,
		render: (data, cell, row) => {
		// Renderiza el botón de editar para cada fila
		return `<button class="btn btn-sm btn-primary" onclick="editItem('${row.cells[0].textContent}', '${row.cells[2].textContent}', '${row.cells[1].textContent}')">Editar</button>`;
		}
		}
		],
		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}",
		noRows: "No hay filas para mostrar",
		info: "Mostrando {start} a {end} de {rows} filas"
		}
		});

		// Inicialización de Alpine.js para el modal
		document.addEventListener("alpine:init", () => {
		Alpine.data("modal", () => ({
		@@ -217,39 +138,32 @@ function editItem(id, nombre, abreviatura) {
		this.open = !this.open;
		}
		}));
		});

		// Función para mostrar mensajes con Swal
		window.showMessage = (msg = 'Example notification text.', position = 'top-end', showCloseButton = true, duration = 3000, type = 'success') => {
		const toast = window.Swal.mixin({
		toast: true,
		position: position,
		showConfirmButton: false,
		timer: duration,
		showCloseButton: showCloseButton,
		timerProgressBar: true,
		timerProgressBarColor: type === 'success' ? '#4caf50' : '#f44336',
		timerProgressBarHeight: 3,
		background: type === 'success' ? '#4caf50' : '#f44336',
		iconColor: 'white',
		});
		// Datos y métodos para el manejo de profesiones
		Alpine.data("profesion", () => ({
		profesiones: @json($profesiones),
		editOpen: false,
		id: '',
		nombre: '',
		abreviatura: '',

		toast.fire({
		title: msg,
		icon: type,
		showClass: {
		popup: 'swal2-noanimation',
		editItem(id, nombre, abreviatura) {
		this.id = id;
		this.nombre = nombre;
		this.abreviatura = abreviatura;
		this.editOpen = true;
		},
		hideClass: {
		popup: '',
		toggleEdit() {
		this.editOpen = !this.editOpen;
		},
		customClass: {
		title: 'swal2-title',
		popup: 'swal2-popup',
		icon: 'swal2-icon',
		}
		}));
		});
		};

		// Script para DataTable
		document.addEventListener("DOMContentLoaded", function() {
		var myTable = new simpleDatatables.DataTable("#myTable");
		});
		</script>
		</div>
		</div>
		</x-layout.default>
		No newline at end of file

routes/web.php

+1 −1

Original line number	Diff line number	Diff line
		@@ -35,7 +35,7 @@
		Route::delete('/cargos/{id}', [CargoController::class, 'destroy'])->name('cargos.destroy');

		Route::get('/profesion', [ProfesionController::class, 'index'])->name('profesion.get');
		Route::post('/profesiones', [ProfesionController::class, 'store'])->name('profesion.store');
		Route::post('/profesion', [ProfesionController::class, 'store'])->name('profesion.store');
		Route::put('/profesion/{id}', [ProfesionController::class, 'update'])->name('profesion.update');
		Route::delete('/profesion/{id}', [ProfesionController::class, 'destroy'])->name('profesion.destroy');