Fix project edit view: implement DaisyUI tabs for project data, phases, and users

This commit is contained in:
2026-05-12 09:51:56 +02:00
parent 86dcf960a7
commit 65254a0dfa
+29 -25
View File
@@ -3,21 +3,16 @@
<h1 class="text-2xl font-bold mb-4">{{ __('Edit Project') }}: {{ $project->name }}</h1> <h1 class="text-2xl font-bold mb-4">{{ __('Edit Project') }}: {{ $project->name }}</h1>
<div class="tabs tab-box w-full"> <div class="tabs tab-box w-full">
<ul role="tablist" class="menu menu-horizontal p-0 mb-4 border-b border-base-200"> <div class="tab-toggle">
<li role="tab"> <input type="radio" name="tabs-project-edit" id="tab-project-data" checked class="tab-toggle" />
<a href="#project-data" aria-controls="project-data" aria-selected="true" class="tab tab-active">{{ __('Project Data') }}</a> <label for="tab-project-data" class="tab tab-active">{{ __('Project Data') }}</label>
</li> <input type="radio" name="tabs-project-edit" id="tab-phases" class="tab-toggle" />
<li role="tab"> <label for="tab-phases" class="tab">{{ __('Phases') }}</label>
<a href="#phases" aria-controls="phases" aria-selected="false" class="tab">{{ __('Phases') }}</a> <input type="radio" name="tabs-project-edit" id="tab-users" class="tab-toggle" />
</li> <label for="tab-users" class="tab">{{ __('Users') }}</label>
<li role="tab"> </div>
<a href="#users" aria-controls="users" aria-selected="false" class="tab">{{ __('Users') }}</a> <div class="tab-content">
</li> <div id="tab-project-data" class="tab-content-base p-4">
</ul>
<div class="tab-content space-y-4">
<!-- Project Data Tab -->
<div role="tabpanel" id="project-data" class="tab-pane">
<form action="{{ route('projects.update', $project) }}" method="POST" class="space-y-4"> <form action="{{ route('projects.update', $project) }}" method="POST" class="space-y-4">
@csrf @csrf
@method('PUT') @method('PUT')
@@ -35,7 +30,7 @@
<input type="number" step="any" name="lat" value="{{ old('lat', $project->lat) }}" class="input input-bordered w-full" required> <input type="number" step="any" name="lat" value="{{ old('lat', $project->lat) }}" class="input input-bordered w-full" required>
</div> </div>
<div> <div>
<label class="label">{{ __('Longitude') }}</label> <label class="label">{{ ('Longitude') }}</label>
<input type="number" step="any" name="lng" value="{{ old('lng', $project->lng) }}" class="input input-bordered w-full" required> <input type="number" step="any" name="lng" value="{{ old('lng', $project->lng) }}" class="input input-bordered w-full" required>
</div> </div>
</div> </div>
@@ -50,30 +45,39 @@
</div> </div>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<div> <div>
<label class="label">{{ __('Start date') }}</label> <label class="label">{{ ('Start date') }}</label>
<input type="date" name="start_date" value="{{ old('start_date', $project->start_date->format('Y-m-d')) }}" class="input input-bordered w-full" required> <input type="date" name="start_date" value="{{ old('start_date', $project->start_date->format('Y-m-d')) }}" class="input input-bordered w-full" required>
</div> </div>
<div> <div>
<label class="label">{{ __('Estimated end date') }}</label> <label class="label">{{ ('Estimated end date') }}</label>
<input type="date" name="end_date_estimated" value="{{ old('end_date_estimated', $project->end_date_estimated?->format('Y-m-d')) }}" class="input input-bordered w-full"> <input type="date" name="end_date_estimated" value="{{ old('end_date_estimated', $project->end_date_estimated?->format('Y-m-d')) }}" class="input input-bordered w-full">
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary w-full">{{ __('Update') }}</button> <button type="submit" class="btn btn-primary w-full">{{ __('Update') }}</button>
</form> </form>
</div> </div>
<div id="tab-phases" class="tab-content-base p-4">
<!-- Phases Tab -->
<div role="tabpanel" id="phases" class="tab-pane">
<h2 class="text-xl font-bold mb-2">{{ __('Phases') }}</h2> <h2 class="text-xl font-bold mb-2">{{ __('Phases') }}</h2>
<livewire:phase-list :project="$project" /> <livewire:phase-list :project="$project" />
</div> </div>
<div id="tab-users" class="tab-content-base p-4">
<!-- Users Tab -->
<div role="tabpanel" id="users" class="tab-pane">
<h2 class="text-xl font-bold mb-2">{{ __('Users') }}</h2> <h2 class="text-xl font-bold mb-2">{{ __('Users') }}</h2>
<livewire:project-users :project="$project" /> <livewire:project-users :project="$project" />
</div> </div>
</div> </div>
</div> </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('input[name="tabs-project-edit"]');
tabs.forEach(tab => {
tab.addEventListener('change', function() {
// Este evento se dispara cuando cambia el radio button seleccionado
// DaisyUI maneja automáticamente el mostrar/ocultar el contenido
// basado en los IDs que coinciden con los labels
});
});
});
</script>
</div> </div>
</x-app-layout> </x-app-layout>