jeremy/CABM-IT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Permet de déplacer schémas et dossiers par glisser-déposer

Browse Source 
Reprend le mécanisme du module Documents (drag & drop + menu déroulant
"Déplacer vers"), scopé aux documents de type diagram pour rester isolé
du navigateur Documents.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
mrKamoo
2026-08-24 08:18:57 +02:00
co-authored by Claude Sonnet 5
parent c1c6d56d1e
commit 2e614f2929
2 changed files with 153 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/infrastructure/⚡index.blade.php
+93 -3
View File
@@ -80,6 +80,42 @@ new class extends Component
session()->flash('status', "« {$document->name} » supprimé.");
}
public function moveDocument(int $documentId, ?int $targetFolderId): void
{
$document = $this->organization->documents()->where('type', 'diagram')->findOrFail($documentId);
if ($document->id === $targetFolderId) {
return;
}
if ($targetFolderId !== null) {
$targetFolder = $this->organization->documents()->where('type', 'diagram')->find($targetFolderId);
if (! $targetFolder || ! $targetFolder->isFolder()) {
return;
}
// Prevent moving a folder into itself or one of its own descendants.
if ($document->isFolder()) {
$walk = $targetFolder;
while ($walk) {
if ($walk->id === $document->id) {
return;
}
$walk = $walk->folder;
}
}
}
if ($document->folder_id === $targetFolderId) {
return;
}
$document->update(['folder_id' => $targetFolderId]);
session()->flash('status', "« {$document->name} » déplacé.");
}
private function folderTree(\Illuminate\Support\Collection $allFolders): \Illuminate\Support\Collection
{
$byParent = $allFolders->groupBy('folder_id');
@@ -190,7 +226,11 @@ new class extends Component
</form>
@endif
<div class="overflow-hidden rounded border border-slate-200 bg-white">
@if ($items->isNotEmpty())
<p class="mb-2 text-xs text-slate-400">Astuce : glissez-déposez un élément sur un dossier pour le déplacer.</p>
@endif
<div class="overflow-hidden rounded border border-slate-200 bg-white" x-data="{ draggingId: null, overId: null }">
<table class="min-w-full divide-y divide-slate-200 text-sm">
<thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
<tr>
@@ -203,7 +243,17 @@ new class extends Component
<tbody class="divide-y divide-slate-100">
@forelse ($items as $item)
@php $isFolder = $item->isFolder(); @endphp
<tr wire:key="diagram-{{ $item->id }}">
<tr wire:key="diagram-{{ $item->id }}"
draggable="true"
x-on:dragstart="draggingId = {{ $item->id }}"
x-on:dragend="draggingId = null; overId = null"
@if ($isFolder)
x-on:dragover.prevent="if (draggingId !== {{ $item->id }}) overId = {{ $item->id }}"
x-on:dragleave="if (overId === {{ $item->id }}) overId = null"
x-on:drop.prevent="if (draggingId && draggingId !== {{ $item->id }}) { $wire.moveDocument(draggingId, {{ $item->id }}); } draggingId = null; overId = null"
@endif
:class="draggingId === {{ $item->id }} ? 'opacity-40' : (overId === {{ $item->id }} ? 'bg-slate-100 ring-1 ring-inset ring-slate-400' : '')"
class="cursor-move">
<td class="px-4 py-3">
@if ($isFolder)
<a wire:click="$set('folderId', {{ $item->id }})" href="#" class="font-medium text-slate-900 hover:underline">
@@ -217,10 +267,40 @@ new class extends Component
</td>
<td class="px-4 py-3 text-slate-600">{{ $isFolder ? '—' : ($item->location?->name ?? '—') }}</td>
<td class="px-4 py-3 text-slate-600">{{ $item->updated_at->diffForHumans() }}</td>
<td class="px-4 py-3 text-right">
<td class="px-4 py-3 text-right whitespace-nowrap">
@unless ($isFolder)
<a href="{{ route('organizations.infrastructure.edit', [$organization, $item, 'folderId' => $this->folderId]) }}" class="text-slate-500 hover:text-slate-900">Ouvrir</a>
@endunless
@php
// Exclude the item's own subtree (if it's a folder) so it can't be moved into itself or a descendant.
$excludedIds = [$item->id, $item->folder_id];
if ($isFolder) {
$stack = [$item->id];
while ($stack) {
$id = array_pop($stack);
foreach ($folderTree as $node) {
if ($node['folder']->folder_id === $id) {
$excludedIds[] = $node['folder']->id;
$stack[] = $node['folder']->id;
}
}
}
}
$moveTargets = $folderTree->reject(fn ($node) => in_array($node['folder']->id, $excludedIds, true));
@endphp
@if ($moveTargets->isNotEmpty() || $item->folder_id !== null)
<select wire:change="moveDocument({{ $item->id }}, $event.target.value === '' ? null : $event.target.value)"
class="ml-3 rounded border-slate-300 text-xs shadow-sm focus:border-slate-500 focus:ring-slate-500"
onclick="event.stopPropagation()">
<option value="" selected disabled>Déplacer vers...</option>
@if ($item->folder_id !== null)
<option value="">🏠 Racine</option>
@endif
@foreach ($moveTargets as $node)
<option value="{{ $node['folder']->id }}">{{ str_repeat('　', $node['depth']) }}{{ $node['depth'] > 0 ? '└ ' : '' }}📁 {{ $node['folder']->name }}</option>
@endforeach
</select>
@endif
<button type="button"
wire:click="delete({{ $item->id }})"
wire:confirm="Supprimer ce {{ $isFolder ? 'dossier' : 'schéma' }} ? Cette action est irréversible."
@@ -236,5 +316,15 @@ new class extends Component
@endforelse
</tbody>
</table>
@if ($currentFolder)
<div class="border-t border-slate-200 px-4 py-3 text-sm text-slate-500"
x-on:dragover.prevent="overId = 'up'"
x-on:dragleave="if (overId === 'up') overId = null"
x-on:drop.prevent="if (draggingId) { $wire.moveDocument(draggingId, {{ $currentFolder->folder_id ?? 'null' }}); } draggingId = null; overId = null"
:class="overId === 'up' ? 'bg-slate-100 ring-1 ring-inset ring-slate-400' : ''">
⬆️ Glisser ici pour remonter au dossier parent
</div>
@endif
</div>
</div>