Vistar de crud de los subgrupos (cec2371a) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

resources/views/adminGen/catalogos/subgrupos/create.blade.php

+14 −13

Original line number	Diff line number	Diff line
		@@ -10,7 +10,7 @@
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<span>Catálogos</span>
		</li>
		<li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<a href="{{ route('catalogos.grupos.get') }}" class="text-primary hover:underline">Grupos</a>
		</li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		@@ -25,7 +25,7 @@
		<h5 class="font-semibold text-lg dark:text-white-light">Crear nuevo subgrupo</h5>
		</div>
		<div class="mb-5">
		<form class="space-y-5" action="{{ route('usuarios.store') }}" method="POST">
		<form class="space-y-5" action="{{ route('catalogos.subgrupos.store') }}" method="POST">
		@csrf
		<div class="grid grid-cols-1 md:grid-cols-1 gap-5">
		<div>
		@@ -46,7 +46,7 @@
		<select id="subgrupo_id" name="subgrupo_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
		<option value="0" selected='selected'>Selecciona una opción</option>
		@foreach($subgrupos as $subgrupo)
		<option value="{{ $subgrupo->id }}">{{ $grupo->nombre }}</option>
		<option value="{{ $subgrupo->id }}">{{ $subgrupo->nombre }}</option>
		@endforeach
		</select>
		</div>
		@@ -67,6 +67,13 @@
		<link rel="stylesheet" href="/assets/css/jquery.toast.css">
		<script src="/assets/js/jquery.toast.js"></script>

		<style>
		.nice-select-disabled {
		pointer-events: none;
		opacity: 0.5;
		}
		</style>

		<script>
		document.addEventListener("DOMContentLoaded", function(e) {
		// default
		@@ -101,23 +108,17 @@

		$('#grupo_id').on('change', function() {
		if (this.value) {
		$('#subgrupo_id').prop('disabled', true);
		// Manipulate NiceSelect elements
		$('div[data-select-id="subgrupo_id"]').addClass('disabled');
		$('#subgrupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
		} else {
		$('#subgrupo_id').prop('disabled', false);
		$('div[data-select-id="subgrupo_id"]').removeClass('disabled');
		$('#subgrupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
		}
		});

		$('#subgrupo_id').on('change', function() {
		if (this.value) {
		$('#grupo_id').prop('disabled', true);
		// Manipulate NiceSelect elements
		$('div[data-select-id="grupo_id"]').addClass('disabled');
		$('#grupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
		} else {
		$('#grupo_id').prop('disabled', false);
		$('div[data-select-id="grupo_id"]').removeClass('disabled');
		$('#grupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
		}
		});
		});

resources/views/adminGen/catalogos/subgrupos/edit.blade.php

0 → 100644

+168 −0

Original line number	Diff line number	Diff line
		<x-layout.default>
		<link rel='stylesheet' type='text/css' href='{{ Vite::asset("resources/css/nice-select2.css") }}'>

		<div x-data="editarGrupos">
		<ul class="flex space-x-2 rtl:space-x-reverse">
		<li>
		<a href="javascript:;" class="text-primary hover:underline">Dashboard</a>
		</li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<span>Catálogos</span>
		</li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<a href="{{ route('catalogos.grupos.get') }}" class="text-primary hover:underline">Grupos</a>
		</li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<a href="{{ route('catalogos.subgrupos.get') }}" class="text-primary hover:underline">Subgrupos</a>
		</li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<span>Editar subgrupo</span>
		</li>
		</ul>
		<div class="panel mt-6">
		<div class="flex items-center justify-between mb-5">
		<h5 class="font-semibold text-lg dark:text-white-light">Editar subgrupo</h5>
		</div>
		<div class="mb-5">
		<form class="space-y-5" action="{{ route('catalogos.subgrupos.update', $subgrupo->id) }}" method="POST">
		@csrf
		@method('PUT')
		<div class="grid grid-cols-1 md:grid-cols-1 gap-5">
		<div>
		<label for="nombre">Nombre</label>
		<input id="nombre" name="nombre" type="text" required placeholder="Ingresa el nombre" value="{{ $subgrupo->nombre }}" class="form-input" />
		</div>
		<div class="mb-5">
		<label for="grupo_id">Grupo</label>
		<select id="grupo_id" name="grupo_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
		<option value="0" @if(!$subgrupo->grupo_id) selected='selected' @endif>Selecciona una opción</option>
		@foreach($grupos as $grupo)
		<option value="{{ $grupo->id }}" @if($subgrupo->grupo_id == $grupo->id) selected='selected' @endif>{{ $grupo->nombre }}</option>
		@endforeach
		</select>
		</div>
		<div class="mb-5">
		<label for="subgrupo_id">Subgrupo</label>
		<select id="subgrupo_id" name="subgrupo_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
		<option value="0" @if(!$subgrupo->subgrupo_id) selected='selected' @endif>Selecciona una opción</option>
		@foreach($subgrupos as $subgrupoOpt)
		<option value="{{ $subgrupoOpt->id }}" @if($subgrupo->subgrupo_id == $subgrupoOpt->id) selected='selected' @endif>{{ $subgrupoOpt->nombre }}</option>
		@endforeach
		</select>
		</div>
		<span class="badge bg-warning text-xs hover:top-0"><b>Nota:</b> Solo es posible seleccionar un grupo o un subgrupo, más no ambos.</span>
		</div>
		<button type="submit" class="btn btn-primary !mt-6">Guardar</button>
		</form>
		</div>
		</div>
		</div>

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

		<script src="/assets/js/nice-select2.js"></script>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
		<link rel="stylesheet" href="/assets/css/jquery.toast.css">
		<script src="/assets/js/jquery.toast.js"></script>

		<style>
		.nice-select-disabled {
		pointer-events: none;
		opacity: 0.5;
		}
		</style>

		<script>
		document.addEventListener("DOMContentLoaded", function(e) {
		var els = document.querySelectorAll(".selectize");
		els.forEach(function(select) {
		NiceSelect.bind(select);
		});

		var options = {
		searchable: true
		};
		NiceSelect.bind(document.getElementById("grupo_id"), options);
		NiceSelect.bind(document.getElementById("subgrupo_id"), options);

		document.querySelectorAll('.nice-select .current').forEach(el => {
		if (el.textContent.trim() === 'Select an option') {
		el.textContent = 'Selecciona una opción';
		}
		});

		document.querySelectorAll('.nice-select .list .option').forEach(el => {
		if (el.textContent.trim() === 'Select an option') {
		el.textContent = 'Selecciona una opción';
		}
		});

		var searchInputs = document.querySelectorAll('.nice-select-search');
		searchInputs.forEach(function(input) {
		input.placeholder = 'Buscar...';
		});

		function toggleSelectState() {
		if ($('#grupo_id').val() && $('#grupo_id').val() !== '0') {
		$('#subgrupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
		} else {
		$('#subgrupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
		}

		if ($('#subgrupo_id').val() && $('#subgrupo_id').val() !== '0') {
		$('#grupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
		} else {
		$('#grupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
		}
		}

		$('#grupo_id').on('change', toggleSelectState);
		$('#subgrupo_id').on('change', toggleSelectState);

		toggleSelectState();
		});

		document.addEventListener("alpine:init", () => {
		Alpine.data("editarGrupos", () => ({
		codeArr: [],
		toggleCode(name) {
		if (this.codeArr.includes(name)) {
		this.codeArr = this.codeArr.filter((d) => d != name);
		} else {
		this.codeArr.push(name);

		setTimeout(() => {
		document.querySelectorAll('pre.code').forEach(el => {
		hljs.highlightElement(el);
		});
		});
		}
		}
		}));
		});

		function showToast(message, heading, icon) {
		$.toast({
		heading: heading,
		text: message,
		showHideTransition: 'slide',
		icon: icon,
		position: 'top-right',
		loader: false,
		hideAfter: 10000,
		allowToastClose: true,
		textColor: '#676767',
		});
		}

		document.addEventListener('DOMContentLoaded', function() {
		@if($errors->any())
		@foreach($errors->all() as $error)
		showToast(`{{ $error }}`, 'Error', 'error');
		@endforeach
		@endif
		});
		</script>
		</x-layout.default>
		No newline at end of file

resources/views/adminGen/catalogos/subgrupos/index.blade.php

+4 −12

Original line number	Diff line number	Diff line
		@@ -11,7 +11,7 @@
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<span>Catálogos</span>
		</li>
		<li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		<a href="{{ route('catalogos.grupos.get') }}" class="text-primary hover:underline">Grupos</a>
		</li>
		<li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
		@@ -49,28 +49,20 @@

		<script>
		const subgrupos = @json($subgrupos);
		const data = subgrupos.map(subgrupo => [subgrupo.subgruponame, subgrupo.name, subgrupo.roles[0].name, subgrupo.dependencia.nombre, renderIsActive(subgrupo.active), renderActions(subgrupo.id, subgrupo.name)]);
		const data = subgrupos.map(subgrupo => [subgrupo.nombre, subgrupo.grupo?.nombre ?? 'Sin información', subgrupo.subgrupo?.nombre ?? 'Sin información', renderActions(subgrupo.id, subgrupo.nombre)]);

		function renderActions(id, nombre) {
		return `
		<div class="flex space-x-2">
		<form action="{{ route('usuarios.destroy', '') }}/${id}" method="POST" class="inline-block">
		<form action="{{ route('catalogos.subgrupos.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>
		<a href="/catalogos/grupos/subgrupos/${id}/editar" class="btn btn-primary btn-sm">Editar</a>
		</div>`;
		}

		function renderIsActive(bool) {
		if(bool === 0){
		return `<span class="badge whitespace-nowrap bg-danger">No</span>`;
		}else{
		return `<span class="badge whitespace-nowrap bg-success">Si</span>`;
		}
		}

		document.addEventListener('DOMContentLoaded', () => {
		const datatable = new simpleDatatables.DataTable('#myTable', {
		data: {