Fix project edit view: implement DaisyUI tabs for project data, phases, and users
This commit is contained in:
@@ -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>
|
||||||
Reference in New Issue
Block a user