jeremy bayse
8f22dca9c8
Laravel 13 + Livewire/Volt app for managing client organizations, documents, passwords, flexible assets, virtual machines, contacts, domains, todos, shortcuts, and role-based user administration.
339 lines
15 KiB
PHP
339 lines
15 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 $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 ?? []);
|
|
}
|
|
}
|
|
|
|
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',
|
|
]);
|
|
|
|
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">
|
|
<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>
|
|
|
|
<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>
|
|
</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 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>
|
|
<a href="{{ route('organizations.index') }}" 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',
|
|
|
|
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');
|
|
|
|
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 });
|
|
wire.$upload('logo', croppedFile, () => {
|
|
this.cropping = false;
|
|
this.imageSrc = null;
|
|
});
|
|
}, this.fileType);
|
|
};
|
|
img.src = this.imageSrc;
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
@endonce
|