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
@@ -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