mrKamooandClaude Sonnet 5
01233928cc
- 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>
375 lines
18 KiB
PHP
375 lines
18 KiB
PHP
<?php
|
|
|
|
use App\Models\Organization;
|
|
use Illuminate\Support\Facades\Storage;
|
|
use Illuminate\Support\Str;
|
|
use Livewire\Component;
|
|
use Livewire\WithFileUploads;
|
|
|
|
new class extends Component
|
|
{
|
|
use WithFileUploads;
|
|
|
|
public ?Organization $organization = null;
|
|
|
|
public string $name = '';
|
|
public string $org_type = 'client';
|
|
public string $status = 'active';
|
|
public string $description = '';
|
|
public string $allowed_ip_ranges = '';
|
|
public ?int $glpi_entity_id = null;
|
|
|
|
public $logo = null;
|
|
|
|
public function mount(?Organization $organization = null): void
|
|
{
|
|
if ($organization?->exists) {
|
|
$this->organization = $organization;
|
|
$this->name = $organization->name;
|
|
$this->org_type = $organization->org_type ?? 'client';
|
|
$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;
|
|
}
|
|
}
|
|
|
|
public function save(): void
|
|
{
|
|
$validated = $this->validate([
|
|
'name' => 'required|string|max:255',
|
|
'org_type' => 'required|in:client,internal,vendor',
|
|
'status' => 'required|in:active,inactive',
|
|
'description' => 'nullable|string',
|
|
'logo' => 'nullable|image|max:2048',
|
|
'glpi_entity_id' => 'nullable|integer|min:0',
|
|
]);
|
|
|
|
unset($validated['logo']);
|
|
|
|
$ranges = collect(preg_split('/\r?\n/', $this->allowed_ip_ranges))
|
|
->map(fn ($line) => trim($line))
|
|
->filter()
|
|
->values()
|
|
->all();
|
|
|
|
$validated['allowed_ip_ranges'] = $ranges ?: null;
|
|
|
|
if ($this->organization?->exists) {
|
|
$this->organization->update($validated);
|
|
} else {
|
|
$validated['slug'] = Str::slug($this->name).'-'.Str::random(6);
|
|
$this->organization = Organization::create($validated);
|
|
}
|
|
|
|
if ($this->logo) {
|
|
if ($this->organization->logo_path) {
|
|
Storage::disk('public')->delete($this->organization->logo_path);
|
|
}
|
|
|
|
$path = $this->logo->store("organizations/{$this->organization->id}", 'public');
|
|
$this->organization->update(['logo_path' => $path]);
|
|
}
|
|
|
|
session()->flash('status', "Organisation « {$this->organization->name} » enregistrée.");
|
|
|
|
$this->redirectRoute('organizations.index', navigate: true);
|
|
}
|
|
};
|
|
?>
|
|
|
|
<div class="max-w-2xl">
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<h1 class="text-2xl font-semibold text-slate-900">
|
|
{{ $organization?->exists ? 'Modifier l\'organisation' : 'Nouvelle organisation' }}
|
|
</h1>
|
|
@if ($organization?->exists)
|
|
<div class="flex flex-wrap gap-4 text-sm text-slate-500">
|
|
<a href="{{ route('organizations.dashboard', $organization) }}" class="hover:text-slate-900">
|
|
Voir le tableau de bord →
|
|
</a>
|
|
<a href="{{ route('organizations.passwords.index', $organization) }}" class="hover:text-slate-900">
|
|
Voir les mots de passe →
|
|
</a>
|
|
<a href="{{ route('organizations.assets.picker', $organization) }}" class="hover:text-slate-900">
|
|
Voir les actifs →
|
|
</a>
|
|
<a href="{{ route('organizations.contacts.index', $organization) }}" class="hover:text-slate-900">
|
|
Voir les contacts →
|
|
</a>
|
|
<a href="{{ route('organizations.locations.index', $organization) }}" class="hover:text-slate-900">
|
|
Voir les sites →
|
|
</a>
|
|
<a href="{{ route('organizations.documents.index', $organization) }}" class="hover:text-slate-900">
|
|
Voir les documents →
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<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">
|
|
<img src="{{ $logo ? $logo->temporaryUrl() : ($organization?->logo_url ?? asset('images/default-organization-logo.svg')) }}"
|
|
class="h-16 w-16 rounded border border-slate-200 object-contain p-1" alt="Logo">
|
|
<div>
|
|
<input type="file" name="logo_file_picker" accept="image/*" x-ref="fileInput" x-on:change="onFileSelected($event)"
|
|
class="block text-sm text-slate-600 file:mr-3 file:rounded file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200">
|
|
<p class="mt-1 text-xs text-slate-500">L'image pourra être recadrée avant l'envoi.</p>
|
|
</div>
|
|
</div>
|
|
@error('logo') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
|
|
|
|
<div x-show="cropping" x-cloak
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
|
<div class="w-full max-w-md rounded bg-white p-4 shadow-xl">
|
|
<h3 class="mb-3 text-sm font-semibold text-slate-900">Recadrer le logo</h3>
|
|
|
|
<div x-ref="viewport"
|
|
class="relative mx-auto h-64 w-64 cursor-move select-none overflow-hidden rounded border border-slate-300 bg-slate-100"
|
|
x-on:mousedown="startDrag($event)"
|
|
x-on:touchstart="startDrag($event)">
|
|
<img x-ref="cropImage" x-show="imageSrc" :src="imageSrc"
|
|
class="pointer-events-none absolute max-w-none origin-top-left"
|
|
draggable="false">
|
|
</div>
|
|
|
|
<div class="mt-3 flex items-center gap-2">
|
|
<span class="text-xs text-slate-500">Zoom</span>
|
|
<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()" :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>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700">Nom</label>
|
|
<input type="text" wire:model="name"
|
|
class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
|
|
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700">Type</label>
|
|
<select wire:model="org_type"
|
|
class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
|
|
<option value="client">Client</option>
|
|
<option value="internal">Interne</option>
|
|
<option value="vendor">Fournisseur</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700">Statut</label>
|
|
<select wire:model="status"
|
|
class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
|
|
<option value="active">Actif</option>
|
|
<option value="inactive">Inactif</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700">Description</label>
|
|
<textarea wire:model="description" rows="3"
|
|
class="mt-1 w-full rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500"></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700">Plages IP autorisées (une par ligne, CIDR)</label>
|
|
<textarea wire:model="allowed_ip_ranges" rows="3" placeholder="203.0.113.0/24 198.51.100.42"
|
|
class="mt-1 w-full rounded border-slate-300 font-mono text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500"></textarea>
|
|
<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" 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') }}" 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>
|
|
|
|
@once
|
|
<script>
|
|
function logoCropper(wire) {
|
|
return {
|
|
cropping: false,
|
|
imageSrc: null,
|
|
zoom: 1,
|
|
minZoom: 1,
|
|
naturalWidth: 0,
|
|
naturalHeight: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
dragging: false,
|
|
dragStartX: 0,
|
|
dragStartY: 0,
|
|
dragOffsetStartX: 0,
|
|
dragOffsetStartY: 0,
|
|
fileName: 'logo.png',
|
|
fileType: 'image/png',
|
|
uploading: false,
|
|
uploadError: null,
|
|
|
|
onFileSelected(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
this.fileName = file.name;
|
|
this.fileType = file.type || 'image/png';
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
this.naturalWidth = img.naturalWidth;
|
|
this.naturalHeight = img.naturalHeight;
|
|
this.imageSrc = e.target.result;
|
|
this.cropping = true;
|
|
this.$nextTick(() => this.resetTransform());
|
|
};
|
|
img.src = e.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
},
|
|
|
|
resetTransform() {
|
|
const viewport = 256; // px, matches the w-64/h-64 crop viewport
|
|
this.minZoom = Math.max(viewport / this.naturalWidth, viewport / this.naturalHeight);
|
|
this.zoom = this.minZoom;
|
|
this.offsetX = (viewport - this.naturalWidth * this.zoom) / 2;
|
|
this.offsetY = (viewport - this.naturalHeight * this.zoom) / 2;
|
|
this.applyTransform();
|
|
},
|
|
|
|
applyTransform() {
|
|
this.zoom = Math.max(this.zoom, this.minZoom);
|
|
this.clampOffset();
|
|
const img = this.$refs.cropImage;
|
|
if (img) {
|
|
img.style.width = (this.naturalWidth * this.zoom) + 'px';
|
|
img.style.height = (this.naturalHeight * this.zoom) + 'px';
|
|
img.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;
|
|
}
|
|
},
|
|
|
|
clampOffset() {
|
|
const viewport = 256;
|
|
const width = this.naturalWidth * this.zoom;
|
|
const height = this.naturalHeight * this.zoom;
|
|
this.offsetX = Math.min(0, Math.max(viewport - width, this.offsetX));
|
|
this.offsetY = Math.min(0, Math.max(viewport - height, this.offsetY));
|
|
},
|
|
|
|
startDrag(event) {
|
|
this.dragging = true;
|
|
const point = event.touches ? event.touches[0] : event;
|
|
this.dragStartX = point.clientX;
|
|
this.dragStartY = point.clientY;
|
|
this.dragOffsetStartX = this.offsetX;
|
|
this.dragOffsetStartY = this.offsetY;
|
|
|
|
const move = (e) => {
|
|
if (!this.dragging) return;
|
|
const p = e.touches ? e.touches[0] : e;
|
|
this.offsetX = this.dragOffsetStartX + (p.clientX - this.dragStartX);
|
|
this.offsetY = this.dragOffsetStartY + (p.clientY - this.dragStartY);
|
|
this.applyTransform();
|
|
};
|
|
const stop = () => {
|
|
this.dragging = false;
|
|
window.removeEventListener('mousemove', move);
|
|
window.removeEventListener('mouseup', stop);
|
|
window.removeEventListener('touchmove', move);
|
|
window.removeEventListener('touchend', stop);
|
|
};
|
|
|
|
window.addEventListener('mousemove', move);
|
|
window.addEventListener('mouseup', stop);
|
|
window.addEventListener('touchmove', move);
|
|
window.addEventListener('touchend', stop);
|
|
},
|
|
|
|
cancelCrop() {
|
|
this.cropping = false;
|
|
this.imageSrc = null;
|
|
this.$refs.fileInput.value = '';
|
|
},
|
|
|
|
confirmCrop() {
|
|
const viewport = 256;
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = viewport;
|
|
canvas.height = viewport;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
this.uploadError = null;
|
|
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
ctx.drawImage(
|
|
img,
|
|
-this.offsetX / this.zoom,
|
|
-this.offsetY / this.zoom,
|
|
viewport / this.zoom,
|
|
viewport / this.zoom,
|
|
0, 0, viewport, viewport
|
|
);
|
|
|
|
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;
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
@endonce
|