Ajoute géolocalisation des sites, duplication d'actifs et intégration GLPI

- Coordonnées GPS sur les sites (formulaire + carte Leaflet en direct sur la fiche et sur la liste des sites d'une organisation). - Duplication d'un actif depuis la liste. - Intégration GLPI en lecture seule : panneau "Tickets" sur le tableau de bord de l'organisation (tickets non clos, priorité, catégorie, extrait), organisations liées à leur entité GLPI via glpi_entity_id. - Corrige la mise en cache des permissions Spatie lors du seed (silencée par WithoutModelEvents) et rend le seeder admin idempotent. - Ajoute busy_timeout/WAL à la config SQLite pour éviter les erreurs de verrou sous écritures concurrentes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-18 08:45:49 +02:00
parent 2d12d3c2b2
commit 01233928cc
15 changed files with 617 additions and 17 deletions
@@ -25,6 +25,22 @@ new class extends Component
        session()->flash('status', "\"{$asset->name}\" supprimé.");
    }

+    public function duplicate(int $assetId): void
+    {
+        $asset = $this->organization->flexibleAssets()->findOrFail($assetId);
+
+        $copy = $this->organization->flexibleAssets()->create([
+            'flexible_asset_type_id' => $asset->flexible_asset_type_id,
+            'name' => "{$asset->name} (copie)",
+            'data' => $asset->data,
+            'created_by' => auth()->id(),
+        ]);
+
+        session()->flash('status', "\"{$asset->name}\" dupliqué.");
+
+        $this->redirectRoute('organizations.assets.edit', [$this->organization, $this->type, $copy], navigate: true);
+    }
+
    public function with(): array
    {
        $listFields = $this->type->fields()->where('show_in_list', true)->get();
@@ -94,6 +110,11 @@ new class extends Component
                        @endforeach
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            <a href="{{ route('organizations.assets.edit', [$organization, $type, $asset]) }}" class="text-slate-500 hover:text-slate-900">Modifier</a>
+                            <button type="button"
+                                    wire:click="duplicate({{ $asset->id }})"
+                                    class="ml-3 text-slate-500 hover:text-slate-900">
+                                Dupliquer
+                            </button>
                            <button type="button"
                                    wire:click="delete({{ $asset->id }})"
                                    wire:confirm="Supprimer cet actif ? Cette action est irréversible."
@@ -18,6 +18,8 @@ new class extends Component
    public string $country = '';
    public string $phone = '';
    public bool $is_primary = false;
+    public ?float $latitude = null;
+    public ?float $longitude = null;

    public function mount(Organization $organization, ?Location $location = null): void
    {
@@ -34,6 +36,8 @@ new class extends Component
            $this->country = $location->country ?? '';
            $this->phone = $location->phone ?? '';
            $this->is_primary = $location->is_primary;
+            $this->latitude = $location->latitude;
+            $this->longitude = $location->longitude;
        }
    }

@@ -49,6 +53,8 @@ new class extends Component
            'country' => 'nullable|string|max:255',
            'phone' => 'nullable|string|max:255',
            'is_primary' => 'boolean',
+            'latitude' => 'nullable|numeric|between:-90,90',
+            'longitude' => 'nullable|numeric|between:-180,180',
        ]);

        if ($validated['is_primary']) {
@@ -127,6 +133,28 @@ new class extends Component
            </div>
        </div>

+        <div x-data="locationMap({{ $latitude ?? 'null' }}, {{ $longitude ?? 'null' }})">
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Latitude</label>
+                    <input type="number" step="any" min="-90" max="90" wire:model="latitude"
+                           x-ref="latInput" x-on:input="onFieldInput()"
+                           class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
+                    @error('latitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Longitude</label>
+                    <input type="number" step="any" min="-180" max="180" wire:model="longitude"
+                           x-ref="lngInput" x-on:input="onFieldInput()"
+                           class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
+                    @error('longitude') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
+                </div>
+            </div>
+
+            <div class="mt-3 h-64 w-full overflow-hidden rounded border border-slate-200" x-ref="mapEl" wire:ignore></div>
+            <p class="mt-1 text-xs text-slate-500">Renseignez la latitude et la longitude pour positionner le site sur la carte.</p>
+        </div>
+
        <label class="flex items-center gap-2 text-sm text-slate-700">
            <input type="checkbox" wire:model="is_primary" class="rounded border-slate-300">
            Site principal
@@ -141,3 +169,74 @@ new class extends Component
        </div>
    </form>
 </div>
+
+@once
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script>
+        (function () {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+            link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
+            link.crossOrigin = '';
+            document.head.appendChild(link);
+
+            // Leaflet normally auto-detects its marker image path by scanning
+            // <link> tags already in the document when leaflet.js runs — but
+            // that link is injected above, after leaflet.js has loaded, so
+            // detection fails. Point the icons at the CDN explicitly instead.
+            delete L.Icon.Default.prototype._getIconUrl;
+            L.Icon.Default.mergeOptions({
+                iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+                iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+                shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+            });
+        })();
+
+        function locationMap(initialLat, initialLng) {
+            return {
+                map: null,
+                marker: null,
+
+                init() {
+                    const hasCoords = initialLat !== null && initialLng !== null;
+
+                    this.map = L.map(this.$refs.mapEl).setView(
+                        hasCoords ? [initialLat, initialLng] : [46.6, 2.4], // France, vue d'ensemble par défaut
+                        hasCoords ? 14 : 5
+                    );
+
+                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                        maxZoom: 19,
+                    }).addTo(this.map);
+
+                    if (hasCoords) {
+                        this.marker = L.marker([initialLat, initialLng]).addTo(this.map);
+                    }
+                },
+
+                onFieldInput() {
+                    const lat = parseFloat(this.$refs.latInput.value);
+                    const lng = parseFloat(this.$refs.lngInput.value);
+
+                    if (isNaN(lat) || isNaN(lng)) {
+                        if (this.marker) {
+                            this.map.removeLayer(this.marker);
+                            this.marker = null;
+                        }
+                        return;
+                    }
+
+                    if (this.marker) {
+                        this.marker.setLatLng([lat, lng]);
+                    } else {
+                        this.marker = L.marker([lat, lng]).addTo(this.map);
+                    }
+                    this.map.setView([lat, lng], Math.max(this.map.getZoom(), 14));
+                },
+            };
+        }
+    </script>
+@endonce
@@ -33,6 +33,18 @@ new class extends Component
                ->orderByDesc('is_primary')
                ->orderBy('name')
                ->paginate(15),
+            'mappedLocations' => $this->organization->locations()
+                ->whereNotNull('latitude')
+                ->whereNotNull('longitude')
+                ->orderBy('name')
+                ->get(['id', 'name', 'city', 'latitude', 'longitude'])
+                ->map(fn ($location) => [
+                    'name' => $location->name,
+                    'city' => $location->city,
+                    'latitude' => $location->latitude,
+                    'longitude' => $location->longitude,
+                    'edit_url' => route('organizations.locations.edit', [$this->organization, $location]),
+                ]),
        ];
    }
 };
@@ -50,6 +62,11 @@ new class extends Component
        </a>
    </div>

+    @if ($mappedLocations->isNotEmpty())
+        <div class="mb-6 h-80 w-full overflow-hidden rounded border border-slate-200"
+             x-data="sitesMap(@js($mappedLocations))" wire:ignore></div>
+    @endif
+
    <input type="text" wire:model.live.debounce.300ms="search" placeholder="Filtrer par nom ou ville..."
           class="mb-4 w-full max-w-sm rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">

@@ -102,3 +119,60 @@ new class extends Component
        {{ $locations->links() }}
    </div>
 </div>
+
+@once
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script>
+        (function () {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+            link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
+            link.crossOrigin = '';
+            document.head.appendChild(link);
+
+            // Leaflet normally auto-detects its marker image path by scanning
+            // <link> tags already in the document when leaflet.js runs — but
+            // that link is injected above, after leaflet.js has loaded, so
+            // detection fails. Point the icons at the CDN explicitly instead.
+            delete L.Icon.Default.prototype._getIconUrl;
+            L.Icon.Default.mergeOptions({
+                iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+                iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+                shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+            });
+        })();
+
+        function sitesMap(locations) {
+            return {
+                init() {
+                    const map = L.map(this.$el);
+
+                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                        maxZoom: 19,
+                    }).addTo(map);
+
+                    const markers = locations.map(loc => {
+                        const marker = L.marker([loc.latitude, loc.longitude]).addTo(map);
+
+                        const link = document.createElement('a');
+                        link.href = loc.edit_url;
+                        link.className = 'font-medium text-slate-900 hover:underline';
+                        link.textContent = loc.city ? `${loc.name} — ${loc.city}` : loc.name;
+                        marker.bindPopup(link);
+
+                        return marker;
+                    });
+
+                    if (markers.length === 1) {
+                        map.setView(markers[0].getLatLng(), 14);
+                    } else {
+                        map.fitBounds(L.featureGroup(markers).getBounds().pad(0.2));
+                    }
+                },
+            };
+        }
+    </script>
+@endonce
@@ -1,6 +1,7 @@
 <?php

 use App\Models\Organization;
+use App\Services\Glpi\GlpiClient;
 use Livewire\Component;

 new class extends Component
@@ -127,7 +128,20 @@ new class extends Component
            ->limit(8)
            ->get();

+        $glpi = ['tickets' => [], 'total' => 0, 'error' => null];
+        $glpiNewTicketUrl = null;
+
+        if ($this->organization->glpi_entity_id !== null) {
+            $glpiClient = app(GlpiClient::class);
+            $glpi = $glpiClient->recentTicketsForEntity($this->organization->glpi_entity_id);
+            $glpiNewTicketUrl = $glpiClient->frontUrl().'/front/ticket.form.php';
+        }
+
        return [
+            'glpiTickets' => $glpi['tickets'],
+            'glpiTicketsTotal' => $glpi['total'],
+            'glpiError' => $glpi['error'],
+            'glpiNewTicketUrl' => $glpiNewTicketUrl,
            'counts' => [
                'contacts' => $this->organization->contacts()->count(),
                'locations' => $this->organization->locations()->count(),
@@ -341,4 +355,70 @@ new class extends Component
            </div>
        </div>
    </div>
+
+    @if ($organization->glpi_entity_id !== null)
+        <div class="mt-6 rounded border border-slate-200 bg-white p-4">
+            <div class="mb-3 flex items-center justify-between">
+                <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Tickets GLPI</h2>
+                <a href="{{ $glpiNewTicketUrl }}" target="_blank" rel="noopener"
+                   class="text-xs text-slate-500 hover:text-slate-900">
+                    Nouveau ticket &rarr;
+                </a>
+            </div>
+
+            @if ($glpiError)
+                <p class="text-sm text-amber-600">{{ $glpiError }}</p>
+            @elseif (empty($glpiTickets))
+                <p class="text-sm text-slate-400">Aucun ticket non clos pour le moment.</p>
+            @else
+                <ul class="divide-y divide-slate-100">
+                    @foreach ($glpiTickets as $ticket)
+                        <li class="py-2.5 text-sm">
+                            <div class="flex items-start justify-between gap-4">
+                                <a href="{{ $ticket['url'] }}" target="_blank" rel="noopener"
+                                   class="min-w-0 font-medium text-slate-900 hover:underline">
+                                    #{{ $ticket['id'] }} — {{ $ticket['title'] }}
+                                </a>
+                                <div class="flex shrink-0 items-center gap-1.5">
+                                    <span class="rounded-full px-2 py-0.5 text-xs font-medium
+                                        {{ match(true) {
+                                            $ticket['priority'] >= 5 => 'bg-red-100 text-red-700',
+                                            $ticket['priority'] === 4 => 'bg-amber-100 text-amber-700',
+                                            default => 'bg-slate-100 text-slate-600',
+                                        } }}">
+                                        {{ $ticket['priority_label'] }}
+                                    </span>
+                                    <span class="rounded-full px-2 py-0.5 text-xs font-medium
+                                        {{ match(true) {
+                                            $ticket['status'] === 5 => 'bg-emerald-100 text-emerald-700',
+                                            $ticket['status'] === 4 => 'bg-amber-100 text-amber-700',
+                                            default => 'bg-blue-100 text-blue-700',
+                                        } }}">
+                                        {{ $ticket['status_label'] }}
+                                    </span>
+                                </div>
+                            </div>
+
+                            @if ($ticket['excerpt'])
+                                <p class="mt-1 text-xs text-slate-600">{{ $ticket['excerpt'] }}</p>
+                            @endif
+
+                            <p class="mt-1 text-xs text-slate-400">
+                                {{ \Illuminate\Support\Carbon::parse($ticket['date_mod'])->diffForHumans() }}
+                                @if ($ticket['category'])
+                                    &middot; {{ $ticket['category'] }}
+                                @endif
+                            </p>
+                        </li>
+                    @endforeach
+                </ul>
+
+                @if ($glpiTicketsTotal > count($glpiTickets))
+                    <p class="mt-3 border-t border-slate-100 pt-3 text-xs text-slate-500">
+                        {{ $glpiTicketsTotal }} tickets non clos au total pour cette entité.
+                    </p>
+                @endif
+            @endif
+        </div>
+    @endif
 </div>
@@ -17,6 +17,7 @@ new class extends Component
    public string $status = 'active';
    public string $description = '';
    public string $allowed_ip_ranges = '';
+    public ?int $glpi_entity_id = null;

    public $logo = null;

@@ -29,6 +30,7 @@ new class extends Component
            $this->status = $organization->status;
            $this->description = $organization->description ?? '';
            $this->allowed_ip_ranges = implode("\n", $organization->allowed_ip_ranges ?? []);
+            $this->glpi_entity_id = $organization->glpi_entity_id;
        }
    }

@@ -40,6 +42,7 @@ new class extends Component
            'status' => 'required|in:active,inactive',
            'description' => 'nullable|string',
            'logo' => 'nullable|image|max:2048',
+            'glpi_entity_id' => 'nullable|integer|min:0',
        ]);

        unset($validated['logo']);
@@ -104,7 +107,8 @@ new class extends Component
        @endif
    </div>

-    <form wire:submit="save" class="space-y-4 rounded border border-slate-200 bg-white p-6">
+    <form wire:submit="save" class="space-y-4 rounded border border-slate-200 bg-white p-6"
+          wire:loading.class="opacity-60 pointer-events-none" wire:target="save">
        <div x-data="logoCropper($wire)">
            <label class="block text-sm font-medium text-slate-700">Logo</label>
            <div class="mt-1 flex items-center gap-4">
@@ -137,11 +141,20 @@ new class extends Component
                        <input type="range" :min="minZoom" :max="minZoom * 4" step="0.001" x-model.number="zoom" x-on:input="applyTransform()" class="flex-1">
                    </div>

+                    <p x-show="uploadError" x-cloak class="mt-3 text-sm text-red-600" x-text="uploadError"></p>
+
                    <div class="mt-4 flex items-center justify-end gap-3">
-                        <button type="button" x-on:click="cancelCrop()" class="text-sm text-slate-500 hover:text-slate-900">Annuler</button>
-                        <button type="button" x-on:click="confirmCrop()"
-                                class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
-                            Valider le recadrage
+                        <button type="button" x-on:click="cancelCrop()" :disabled="uploading"
+                                class="text-sm text-slate-500 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-60">
+                            Annuler
+                        </button>
+                        <button type="button" x-on:click="confirmCrop()" :disabled="uploading"
+                                class="inline-flex items-center gap-2 rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-60">
+                            <svg x-show="uploading" x-cloak class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                            </svg>
+                            <span x-text="uploading ? 'Envoi en cours…' : 'Valider le recadrage'"></span>
                        </button>
                    </div>
                </div>
@@ -189,12 +202,26 @@ new class extends Component
            <p class="mt-1 text-xs text-slate-500">Laisser vide pour autoriser l'accès depuis n'importe quelle IP.</p>
        </div>

+        <div>
+            <label class="block text-sm font-medium text-slate-700">ID entité GLPI</label>
+            <input type="number" min="0" wire:model="glpi_entity_id"
+                   class="mt-1 w-full max-w-xs rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
+            <p class="mt-1 text-xs text-slate-500">Lie cette organisation à une entité GLPI pour afficher ses tickets sur le tableau de bord. Laisser vide pour désactiver.</p>
+            @error('glpi_entity_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
+        </div>
+
        <div class="flex items-center gap-3 pt-2">
-            <button type="submit"
-                    class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
-                Enregistrer
+            <button type="submit" wire:loading.attr="disabled" wire:target="save"
+                    class="inline-flex items-center gap-2 rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-60">
+                <svg wire:loading wire:target="save" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                <span wire:loading.remove wire:target="save">Enregistrer</span>
+                <span wire:loading wire:target="save">Enregistrement…</span>
            </button>
-            <a href="{{ route('organizations.index') }}" class="text-sm text-slate-500 hover:text-slate-900">Annuler</a>
+            <a href="{{ route('organizations.index') }}" wire:loading.class="pointer-events-none opacity-60" wire:target="save"
+               class="text-sm text-slate-500 hover:text-slate-900">Annuler</a>
        </div>
    </form>
 </div>
@@ -218,6 +245,8 @@ new class extends Component
                dragOffsetStartY: 0,
                fileName: 'logo.png',
                fileType: 'image/png',
+                uploading: false,
+                uploadError: null,

                onFileSelected(event) {
                    const file = event.target.files[0];
@@ -311,6 +340,8 @@ new class extends Component
                    canvas.height = viewport;
                    const ctx = canvas.getContext('2d');

+                    this.uploadError = null;
+
                    const img = new Image();
                    img.onload = () => {
                        ctx.drawImage(
@@ -324,10 +355,15 @@ new class extends Component

                        canvas.toBlob((blob) => {
                            const croppedFile = new File([blob], this.fileName, { type: this.fileType });
+                            this.uploading = true;
                            wire.$upload('logo', croppedFile, () => {
+                                this.uploading = false;
                                this.cropping = false;
                                this.imageSrc = null;
-                            });
+                            }, () => {
+                                this.uploading = false;
+                                this.uploadError = "Échec de l'envoi de l'image. Réessayez.";
+                            }, () => {});
                        }, this.fileType);
                    };
                    img.src = this.imageSrc;