feat(inspections): add photos support with edit + lightbox

- Validación robusta fotos (10MB, jpeg/png/webp, max 10)
- Editar inspección existente: botón en historial, modal y tabla
- Eliminación individual de fotos en edición (marcar + guardar)
- Lightbox/carousel en modal ver + editar (Alpine.js)
- Columna 'Fotos' en InspectionTable con thumbnails + contador
- Permiso 'edit inspections' en seeders + checks en componente
- Test actualizado: seed roles/permisos + attach template pivot
- Fix: removed unsupported filterable() on secondaryHeaderFilter
This commit is contained in:
Javier Braña
2026-07-29 01:44:38 +02:00
parent 847ba1c2f8
commit a65d4b12f2
7 changed files with 374 additions and 13 deletions
+32 -2
View File
@@ -45,7 +45,7 @@ class InspectionTable extends DataTableComponent
return Inspection::query()
->where('inspections.project_id', $this->projectId)
->with(['feature', 'template', 'user']);
->with(['feature', 'template', 'user', 'media']);
}
public function columns(): array
@@ -78,18 +78,48 @@ class InspectionTable extends DataTableComponent
->secondaryHeaderFilter('usuario')
->label(fn ($row) => e($row->user?->name ?? '—')),
Column::make('Fotos')
->label(fn ($row) => $this->renderPhotosColumn($row))
->html(),
Column::make('Acciones')
->label(fn ($row) =>
'<div class="flex justify-end">
'<div class="flex justify-end gap-1">
<button wire:click="$dispatch(\'map-view-inspection\', { id: ' . $row->id . ' })"
class="btn btn-xs btn-ghost" title="Ver inspección">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
</button>
@can("edit inspections")
<button wire:click="$dispatch(\'edit-inspection\', { id: ' . $row->id . ' })"
class="btn btn-xs btn-ghost" title="Editar inspección">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</button>
@endcan
</div>')
->html(),
];
}
private function renderPhotosColumn($row): string
{
$images = $row->media->where('category', 'image')->values();
$count = $images->count();
if ($count === 0) {
return '<span class="text-base-content/30 text-xs">—</span>';
}
$thumbnails = $images->take(3)->map(fn ($m) =>
'<a href="' . $m->url . '" target="_blank" class="inline-block mr-1">
<img src="' . $m->url . '" class="w-8 h-8 object-cover rounded border border-base-300" alt="' . e($m->name) . '" loading="lazy" />
</a>'
)->implode('');
$more = $count > 3 ? '<span class="text-xs text-base-content/50 ml-1">+' . ($count - 3) . '</span>' : '';
return '<div class="flex items-center">' . $thumbnails . $more . '</div>';
}
public function filters(): array
{
$results = Inspection::where('project_id', $this->projectId)
+134 -2
View File
@@ -65,6 +65,14 @@ class ProjectMap extends Component
// Inspection viewer
public $viewingInspection = null;
// Inspection editor (para editar inspecciones existentes)
public $editingInspection = null;
public $editInspectionFormData = [];
public $editInspectionResult = '';
public $editInspectionNotes = '';
public $editInspectionPhotos = [];
public $editInspectionPhotosToDelete = [];
public function mount(Project $project)
{
$this->project = $project;
@@ -271,12 +279,19 @@ class ProjectMap extends Component
$this->dispatch('notify', 'Selecciona un elemento y un template.');
return;
}
// Verificar permiso
if (!auth()->user()->can('create inspections')) {
$this->dispatch('notify', 'Sin permisos para crear inspecciones.');
return;
}
$feature = Feature::with('layer.phase')->find($this->selectedFeature->id);
if (!$feature || $feature->layer->phase->project_id !== $this->project->id) abort(403);
$this->validate([
'selectedTemplateId' => 'required|exists:inspection_templates,id',
'inspectionPhotos.*' => 'nullable|image|max:20480',
'inspectionPhotos.*' => 'nullable|image|mimes:jpeg,png,jpg,webp|max:10240',
]);
$template = InspectionTemplate::find($this->selectedTemplateId);
@@ -406,7 +421,7 @@ class ProjectMap extends Component
'notes' => $ins->notes,
'data' => $ins->data ?? [],
'fields' => $ins->template?->fields ?? [],
'photos' => $ins->media->map(fn ($m) => ['url' => $m->url, 'name' => $m->name])->values()->all(),
'photos' => $ins->media->map(fn ($m) => ['url' => $m->url, 'name' => $m->name, 'id' => $m->id])->values()->all(),
];
}
@@ -415,6 +430,123 @@ class ProjectMap extends Component
$this->viewingInspection = null;
}
// ─── Inspection Editor (editar inspección existente) ─────────────────────────
#[On('edit-inspection')]
public function editInspection($id)
{
$ins = Inspection::where('project_id', $this->project->id)
->with(['feature.layer.phase', 'template', 'user', 'media'])
->find($id);
if (!$ins) return;
$this->editingInspection = $ins;
$this->editInspectionFormData = $ins->data ?? [];
$this->editInspectionResult = $ins->result ?? '';
$this->editInspectionNotes = $ins->notes ?? '';
$this->editInspectionPhotos = [];
$this->editInspectionPhotosToDelete = [];
$this->selectedTemplateId = $ins->template_id;
$this->dispatch('openEditInspectionModal');
}
public function closeEditInspection()
{
$this->editingInspection = null;
$this->editInspectionFormData = [];
$this->editInspectionResult = '';
$this->editInspectionNotes = '';
$this->editInspectionPhotos = [];
$this->editInspectionPhotosToDelete = [];
}
public function deleteEditPhoto($mediaIndex)
{
if (!$this->editingInspection) return;
$media = $this->editingInspection->media;
if (isset($media[$mediaIndex])) {
$m = $media[$mediaIndex];
if (!in_array($m->id, $this->editInspectionPhotosToDelete)) {
$this->editInspectionPhotosToDelete[] = $m->id;
}
}
}
public function saveEditInspection()
{
if (!$this->editingInspection) return;
// Verificar permiso
if (!auth()->user()->can('edit inspections')) {
$this->dispatch('notify', 'Sin permisos para editar inspecciones.');
return;
}
$this->validate([
'selectedTemplateId' => 'required|exists:inspection_templates,id',
'editInspectionPhotos.*' => 'nullable|image|mimes:jpeg,png,jpg,webp|max:10240',
'editInspectionPhotosToDelete' => 'array',
'editInspectionPhotosToDelete.*' => 'exists:media,id',
]);
$ins = $this->editingInspection;
if ($ins->project_id !== $this->project->id) abort(403);
$template = InspectionTemplate::find($this->selectedTemplateId);
foreach ($template->fields as $field) {
if (($field['required'] ?? false) && empty($this->editInspectionFormData[$field['name']])) {
$this->dispatch('notify', "El campo {$field['label']} es obligatorio.");
return;
}
}
// Eliminar fotos marcadas
if (!empty($this->editInspectionPhotosToDelete)) {
$mediaToDelete = Media::whereIn('id', $this->editInspectionPhotosToDelete)
->where('mediable_type', Inspection::class)
->where('mediable_id', $ins->id)
->get();
foreach ($mediaToDelete as $m) {
$m->delete();
}
}
// Actualizar datos
$ins->update([
'template_id' => $this->selectedTemplateId,
'result' => $this->editInspectionResult ?: null,
'notes' => $this->editInspectionNotes ?: null,
'data' => $this->editInspectionFormData,
]);
// Añadir nuevas fotos
foreach ($this->editInspectionPhotos as $photo) {
$mime = $photo->getMimeType();
$path = $photo->store("uploads/inspections/{$ins->id}", 'public');
$ins->media()->create([
'name' => $photo->getClientOriginalName(),
'file_path' => $path,
'file_type' => $mime,
'file_extension' => $photo->getClientOriginalExtension(),
'file_size' => $photo->getSize(),
'category' => str_starts_with($mime, 'image/') ? 'image' : 'document',
'uploaded_by' => auth()->id(),
'uuid' => (string) \Illuminate\Support\Str::uuid(),
]);
}
// Refresh
$this->allInspections = Inspection::where('project_id', $this->project->id)
->with(['feature.layer.phase', 'template', 'user'])
->orderBy('created_at', 'desc')
->get();
$this->loadInspectionHistory();
$this->closeEditInspection();
$this->dispatch('notify', 'Inspección actualizada correctamente');
}
// ─── Feature images ──────────────────────────────────────────────────────────
public function toggleFeatureImages()