CABM-IT/resources/views/components/infrastructure/⚡index.blade.php

<?php

use App\Models\Document;
use App\Models\Organization;
use Livewire\Component;

new class extends Component
{
    public Organization $organization;

    public string $newDiagramName = '';
    public bool $showNewDiagram = false;

    public function createDiagram(): void
    {
        $this->validate(['newDiagramName' => 'required|string|max:255']);

        $emptyDiagram = <<<'XML'
        <mxfile host="app.diagrams.net">
          <diagram name="Page-1">
            <mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
              <root>
                <mxCell id="0" />
                <mxCell id="1" parent="0" />
              </root>
            </mxGraphModel>
          </diagram>
        </mxfile>
        XML;

        $document = $this->organization->documents()->create([
            'name' => $this->newDiagramName,
            'type' => 'diagram',
            'content' => $emptyDiagram,
            'current_version' => 1,
            'created_by' => auth()->id(),
        ]);

        $document->versions()->create([
            'version' => 1,
            'content' => $emptyDiagram,
            'created_by' => auth()->id(),
        ]);

        $this->redirectRoute('organizations.infrastructure.edit', [$this->organization, $document], navigate: true);
    }

    public function delete(int $documentId): void
    {
        $document = $this->organization->documents()->where('type', 'diagram')->findOrFail($documentId);
        $document->delete();

        session()->flash('status', "Schéma « {$document->name} » supprimé.");
    }

    public function with(): array
    {
        return [
            'diagrams' => $this->organization->documents()
                ->where('type', 'diagram')
                ->with('creator')
                ->orderBy('name')
                ->get(),
        ];
    }
};
?>

<div>
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-semibold text-slate-900">Infrastructure</h1>
        <button type="button" wire:click="$toggle('showNewDiagram')"
                class="cursor-pointer rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
            + Nouveau schéma
        </button>
    </div>

    @if (session('status'))
        <div class="mb-4 rounded border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
            {{ session('status') }}
        </div>
    @endif

    @if ($showNewDiagram)
        <form wire:submit="createDiagram" class="mb-4 flex items-start gap-2 rounded border border-slate-200 bg-white p-3">
            <div class="flex-1">
                <input type="text" wire:model="newDiagramName" placeholder="Ex: Schéma réseau - Mairie, Schéma fonctionnel - SI RH"
                       class="w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
                @error('newDiagramName') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            <button type="submit" class="cursor-pointer rounded bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">
                Créer
            </button>
        </form>
    @endif

    <div class="overflow-hidden rounded border border-slate-200 bg-white">
        <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>
                    <th class="px-4 py-3">Nom</th>
                    <th class="px-4 py-3">Créé par</th>
                    <th class="px-4 py-3">Mis à jour</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($diagrams as $diagram)
                    <tr wire:key="diagram-{{ $diagram->id }}">
                        <td class="px-4 py-3">
                            <a href="{{ route('organizations.infrastructure.edit', [$organization, $diagram]) }}" class="font-medium text-slate-900 hover:underline">
                                🗺️ {{ $diagram->name }}
                            </a>
                        </td>
                        <td class="px-4 py-3 text-slate-600">{{ $diagram->creator?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $diagram->updated_at->diffForHumans() }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('organizations.infrastructure.edit', [$organization, $diagram]) }}" class="text-slate-500 hover:text-slate-900">Ouvrir</a>
                            <button type="button"
                                    wire:click="delete({{ $diagram->id }})"
                                    wire:confirm="Supprimer ce schéma ? Cette action est irréversible."
                                    class="ml-3 cursor-pointer text-red-500 hover:text-red-700">
                                Supprimer
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-4 py-6 text-center text-slate-400">Aucun schéma pour le moment.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>