CABM-IT/resources/views/components/documents/⚡diagram-editor.blade.php

<?php

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

new class extends Component
{
    public Organization $organization;
    public Document $document;
    public string $backRoute = 'organizations.documents.index';
    public ?int $folderId = null;

    public bool $renaming = false;
    public string $name = '';

    public function mount(Organization $organization, Document $document, string $backRoute = 'organizations.documents.index', ?int $folderId = null): void
    {
        abort_unless($document->isDiagram(), 404);

        $this->organization = $organization;
        $this->document = $document;
        $this->backRoute = $backRoute;
        $this->folderId = $folderId;
        $this->name = $document->name;
    }

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

        $this->document->update($validated);
        $this->renaming = false;
    }

    public function updateLocation(?int $locationId): void
    {
        $this->document->update(['location_id' => $locationId]);
    }

    public function saveDiagram(string $xml): void
    {
        $contentChanged = $this->document->content !== $xml;

        $this->document->update(['content' => $xml]);

        if ($contentChanged) {
            $this->document->increment('current_version');
            $this->document->versions()->create([
                'version' => $this->document->current_version,
                'content' => $xml,
                'created_by' => auth()->id(),
            ]);
        }
    }

    public function with(): array
    {
        return [
            'locations' => $this->organization->locations()->orderBy('name')->get(),
        ];
    }
};
?>

<div>
    <p class="text-sm text-slate-500">{{ $organization->name }}</p>
    <div class="mb-4 flex items-center justify-between">
        @if ($renaming)
            <form wire:submit="rename" class="flex items-center gap-2">
                <input type="text" wire:model="name" autofocus
                       class="rounded border-slate-300 text-2xl font-semibold shadow-sm focus:border-slate-500 focus:ring-slate-500">
                <button type="submit" class="cursor-pointer rounded bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">Enregistrer</button>
                <button type="button" wire:click="$set('renaming', false)" class="cursor-pointer text-sm text-slate-500 hover:text-slate-900">Annuler</button>
                @error('name') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
            </form>
        @else
            <button type="button" wire:click="$set('renaming', true)" class="group flex cursor-pointer items-center gap-2">
                <h1 class="text-2xl font-semibold text-slate-900">{{ $document->name }}</h1>
                <span class="text-sm text-slate-400 opacity-0 group-hover:opacity-100">Renommer</span>
            </button>
        @endif
        <a href="{{ route($backRoute, [$organization, 'folderId' => $folderId]) }}" class="text-sm text-slate-500 hover:text-slate-900">Retour</a>
    </div>

    <div class="mb-4 flex items-center gap-2">
        <label class="text-sm font-medium text-slate-700">Site associé</label>
        <select wire:change="updateLocation($event.target.value === '' ? null : $event.target.value)"
                class="rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
            <option value="">Aucun</option>
            @foreach ($locations as $location)
                <option value="{{ $location->id }}" @selected($document->location_id === $location->id)>{{ $location->name }}</option>
            @endforeach
        </select>
    </div>

    <div
        wire:ignore
        x-data="drawioEditor(@js($document->content ?? ''), @js(config('drawio.url')))"
        x-init="init()"
        class="w-full"
        style="height: 78vh;"
    >
        <iframe x-ref="iframe" src="{{ config('drawio.url') }}?embed=1&proto=json&spin=1&noSaveBtn=0&saveAndExit=0&noExitBtn=1"
                class="h-full w-full rounded border border-slate-200 bg-white"></iframe>
    </div>

    <p class="mt-2 text-xs text-slate-500" x-data="{ status: '' }" x-on:diagram-status.window="status = $event.detail" x-text="status"></p>

    <div class="mt-8 max-w-5xl">
        <x-documents.version-history :document="$document" />

        <div class="mt-8">
            <livewire:related-items.panel :organization="$organization" :item="$document" :key="'related-'.$document->id" />
        </div>
    </div>
</div>

@once
    <script>
        function drawioEditor(initialXml, baseUrl) {
            return {
                origin: null,
                init() {
                    this.origin = new URL(baseUrl, window.location.href).origin;
                    window.addEventListener('message', (evt) => this.handleMessage(evt));
                },
                handleMessage(evt) {
                    if (evt.origin !== this.origin) return;

                    let msg;
                    try {
                        msg = JSON.parse(evt.data);
                    } catch (e) {
                        return;
                    }

                    if (msg.event === 'init') {
                        this.post({ action: 'load', xml: initialXml, autosave: 0 });
                    } else if (msg.event === 'save') {
                        this.$wire.saveDiagram(msg.xml).then(() => {
                            window.dispatchEvent(new CustomEvent('diagram-status', { detail: 'Enregistré à ' + new Date().toLocaleTimeString() }));
                            this.post({ action: 'status', message: 'Enregistré', modified: false });
                        });
                    } else if (msg.event === 'exit') {
                        this.post({ action: 'status', message: '', modified: false });
                    }
                },
                post(payload) {
                    this.$refs.iframe.contentWindow.postMessage(JSON.stringify(payload), this.origin);
                },
            };
        }
    </script>
@endonce