Add tabs to project map: Edit, Features, Inspections. Features and Inspections tabs show all items.

This commit is contained in:
2026-05-27 22:40:45 +02:00
parent cf3d32a6fa
commit 02e99329eb
2 changed files with 215 additions and 125 deletions
+8
View File
@@ -26,6 +26,11 @@ class ProjectMap extends Component
public $editResponsible = '';
public $editPhotos = [];
public $formFullscreen = false;
// Tab management
public $activeTab = 'edit'; // edit, features, inspections
public $allFeatures = [];
public $allInspections = [];
// Templates e inspecciones
public $templates = [];
@@ -37,6 +42,9 @@ class ProjectMap extends Component
public $showFeatureImages = false;
public $featureImageMarkers = [];
// Tab management
public $activeTab = 'edit'; // edit or list
public function mount(Project $project)
{
$this->project = $project;
@@ -77,14 +77,24 @@
<div class="card bg-base-100 shadow-xl h-full flex flex-col">
<div class="card-body overflow-y-auto flex-1">
<div class="flex justify-between items-center mb-2">
<h2 class="card-title">{{ __("Edit") }}</h2>
<h2 class="card-title">{{ __("Project Map") }}</h2>
<button wire:click="toggleFullscreen" class="btn btn-circle btn-sm" title="Pantalla completa">
<span x-text="formFullscreen ? '✕' : '⤢'"></span>
</button>
</div>
<!-- Tabs -->
<div class="tabs box mb-4">
<button wire:click="setActiveTab('edit')" class="tab {{ $activeTab === 'edit' ? 'tab-active' : '' }}">{{ __("Edit") }}</button>
<button wire:click="setActiveTab('features')" class="tab {{ $activeTab === 'features' ? 'tab-active' : '' }}">{{ __("Features") }}</button>
<button wire:click="setActiveTab('inspections')" class="tab {{ $activeTab === 'inspections' ? 'tab-active' : '' }}">{{ __("Inspections") }}</button>
</div>
<!-- Tab Content -->
<div class="tab-content">
@if($activeTab === 'edit')
@if($selectedFeature)
{{-- Feature seleccionado --}}
<!-- Feature seleccionado -->
<div class="border rounded-lg p-3 mb-3 bg-base-200">
<h3 class="font-bold text-sm">{{ $selectedFeature->name ?? 'Elemento' }}</h3>
<p class="text-xs text-gray-500">Fase: {{ $selectedFeature->layer?->phase?->name ?? '—' }}</p>
@@ -179,7 +189,7 @@
@foreach($inspectionHistory as $ins)
<div class="border rounded p-2 text-xs">
<div class="flex justify-between">
<span class="font-medium">{{ $ins->template?->name ?? '{{ __("Inspection") }}' }}</span>
<span class="font-medium">{{ $ins->template?->name ?? {{ __("Inspection") }} }}</span>
<span class="text-gray-400">{{ $ins->created_at->diffForHumans() }}</span>
</div>
@if($ins->user)<span class="text-gray-500">por {{ $ins->user->name }}</span>@endif
@@ -205,12 +215,85 @@
<p>Haz clic en un elemento del mapa para editarlo</p>
</div>
@endif
@elseif($activeTab === 'features')
<!-- Features Table -->
@if($allFeatures->isNotEmpty())
<div class="overflow-x-auto">
<table class="table table-sm table-compact">
<thead>
<tr>
<th>{{ __("Feature") }}</th>
<th>{{ __("Layer") }}</th>
<th>{{ __("Phase") }}</th>
<th>{{ __("Progress") }}</th>
<th>{{ __("Responsible") }}</th>
<th>{{ __("Template") }}</th>
<th class="w-16"></th>
</tr>
</thead>
<tbody>
@foreach($allFeatures as $feature)
<tr class="hover" wire:click="selectFeature({{ $feature->id }})">
<td>{{ $feature->name }}</td>
<td>{{ $feature->layer->name }}</td>
<td>{{ $feature->layer->phase->name }}</td>
<td>{{ $feature->progress }}%</td>
<td>{{ $feature->responsible ?? '-' }}</td>
<td>{{ $feature->template?->name ?? '-' }}</td>
<td class="justify-end">
<button class="btn btn-xs btn-outline btn-primary">✏️</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<div class="text-center text-gray-400 py-8">
<p class="text-lg">📋</p>
<p>{{ __("No features found") }}</p>
</div>
@endif
@elseif($activeTab === 'inspections')
<!-- Inspections Table -->
@if($allInspections->isNotEmpty())
<div class="overflow-x-auto">
<table class="table table-sm table-compact">
<thead>
<tr>
<th>{{ __("Date") }}</th>
<th>{{ __("Feature") }}</th>
<th>{{ __("Template") }}</th>
<th>{{ __("User") }}</th>
<th class="w-16"></th>
</tr>
</thead>
<tbody>
@foreach($allInspections as $inspection)
<tr>
<td>{{ $inspection->created_at->format('d/m/Y') }}</td>
<td>{{ $inspection->feature->name }}</td>
<td>{{ $inspection->template->name }}</td>
<td>{{ $inspection->user->name }}</td>
<td class="justify-end">
<button class="btn btn-xs btn-outline btn-info">👁️</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<div class="text-center text-gray-400 py-8">
<p class="text-lg">📋</p>
<p>{{ __("No inspections found") }}</p>
</div>
@endif
@endif
</div>
</div>
</div>
</div>
@push('scripts')
</div>@push('scripts')
<style>
.leaflet-container { z-index: 0 !important; }
</style>
@@ -373,4 +456,3 @@
};
});
</script>
@endpush