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:
@@ -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)
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user