Initial commit: CABM-IT (ItGlue-style MSP documentation platform)
Laravel 13 + Livewire/Volt app for managing client organizations, documents, passwords, flexible assets, virtual machines, contacts, domains, todos, shortcuts, and role-based user administration.
This commit is contained in:
jeremy bayse
@@ -0,0 +1,344 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Organization;
|
||||
use Livewire\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
public Organization $organization;
|
||||
|
||||
public string $newLogCategory = 'info';
|
||||
public string $newLogNote = '';
|
||||
|
||||
public int $activityPage = 1;
|
||||
|
||||
const ACTIVITY_PER_PAGE = 4;
|
||||
|
||||
public function addLogEntry(): void
|
||||
{
|
||||
$this->validate([
|
||||
'newLogCategory' => 'required|in:'.implode(',', array_keys(\App\Models\OrganizationLogEntry::CATEGORIES)),
|
||||
'newLogNote' => 'required|string',
|
||||
]);
|
||||
|
||||
$this->organization->logEntries()->create([
|
||||
'category' => $this->newLogCategory,
|
||||
'note' => $this->newLogNote,
|
||||
'created_by' => auth()->id(),
|
||||
]);
|
||||
|
||||
$this->newLogNote = '';
|
||||
}
|
||||
|
||||
public function deleteLogEntry(int $entryId): void
|
||||
{
|
||||
$this->organization->logEntries()->findOrFail($entryId)->delete();
|
||||
}
|
||||
|
||||
public function toggleTodoDone(int $todoId): void
|
||||
{
|
||||
$todo = $this->organization->todos()->findOrFail($todoId);
|
||||
$todo->update([
|
||||
'is_done' => ! $todo->is_done,
|
||||
'completed_at' => $todo->is_done ? null : now(),
|
||||
]);
|
||||
}
|
||||
|
||||
public function previousActivityPage(): void
|
||||
{
|
||||
$this->activityPage = max(1, $this->activityPage - 1);
|
||||
}
|
||||
|
||||
public function nextActivityPage(): void
|
||||
{
|
||||
$this->activityPage++;
|
||||
}
|
||||
|
||||
public function with(): array
|
||||
{
|
||||
$expiringDomains = $this->organization->domains()
|
||||
->get()
|
||||
->filter(fn ($domain) => in_array($domain->expiryStatus(), ['soon', 'expired'], true))
|
||||
->sortBy(fn ($domain) => $domain->expiresInDays());
|
||||
|
||||
$recentDocuments = $this->organization->documents()
|
||||
->with('creator')
|
||||
->where('is_folder', false)
|
||||
->orderByDesc('updated_at')
|
||||
->limit(20)
|
||||
->get()
|
||||
->map(fn ($doc) => [
|
||||
'icon' => $doc->isOffice() ? ($doc->office_extension === 'xlsx' ? '📊' : '📘') : ($doc->isMarkdown() ? '📝' : '📄'),
|
||||
'label' => $doc->name,
|
||||
'kind' => 'Document',
|
||||
'url' => route('organizations.documents.edit', [$this->organization, $doc]),
|
||||
'creator' => $doc->creator?->name,
|
||||
'created' => $doc->created_at->equalTo($doc->updated_at),
|
||||
'at' => $doc->updated_at,
|
||||
]);
|
||||
|
||||
$recentAssets = $this->organization->flexibleAssets()
|
||||
->with(['type', 'creator'])
|
||||
->orderByDesc('updated_at')
|
||||
->limit(20)
|
||||
->get()
|
||||
->map(fn ($asset) => [
|
||||
'icon' => $asset->type?->icon ?: '🗂️',
|
||||
'label' => $asset->name,
|
||||
'kind' => $asset->type?->name ?? 'Actif',
|
||||
'url' => route('organizations.assets.edit', [$this->organization, $asset->type, $asset]),
|
||||
'creator' => $asset->creator?->name,
|
||||
'created' => $asset->created_at->equalTo($asset->updated_at),
|
||||
'at' => $asset->updated_at,
|
||||
]);
|
||||
|
||||
$recentVirtualMachines = $this->organization->virtualMachines()
|
||||
->with('creator')
|
||||
->orderByDesc('updated_at')
|
||||
->limit(20)
|
||||
->get()
|
||||
->map(fn ($vm) => [
|
||||
'icon' => '🖥️',
|
||||
'label' => $vm->name,
|
||||
'kind' => 'Machine virtuelle',
|
||||
'url' => route('organizations.virtual-machines.edit', [$this->organization, $vm]),
|
||||
'creator' => $vm->creator?->name,
|
||||
'created' => $vm->created_at->equalTo($vm->updated_at),
|
||||
'at' => $vm->updated_at,
|
||||
]);
|
||||
|
||||
$allActivity = $recentDocuments
|
||||
->concat($recentAssets)
|
||||
->concat($recentVirtualMachines)
|
||||
->sortByDesc('at')
|
||||
->values();
|
||||
|
||||
$activityPageCount = max(1, (int) ceil($allActivity->count() / self::ACTIVITY_PER_PAGE));
|
||||
$this->activityPage = min($this->activityPage, $activityPageCount);
|
||||
|
||||
$recentActivity = $allActivity->forPage($this->activityPage, self::ACTIVITY_PER_PAGE)->values();
|
||||
|
||||
$openTodos = $this->organization->todos()
|
||||
->with('assignee')
|
||||
->where('is_done', false)
|
||||
->orderByRaw("CASE criticality WHEN 'urgent' THEN 0 WHEN 'high' THEN 1 WHEN 'medium' THEN 2 ELSE 3 END")
|
||||
->orderByRaw('due_date IS NULL')
|
||||
->orderBy('due_date')
|
||||
->limit(8)
|
||||
->get();
|
||||
|
||||
return [
|
||||
'counts' => [
|
||||
'contacts' => $this->organization->contacts()->count(),
|
||||
'locations' => $this->organization->locations()->count(),
|
||||
'domains' => $this->organization->domains()->count(),
|
||||
'documents' => $this->organization->documents()->where('is_folder', false)->count(),
|
||||
'virtualMachines' => $this->organization->virtualMachines()->count(),
|
||||
'assets' => $this->organization->flexibleAssets()->count(),
|
||||
'openTodos' => $this->organization->todos()->where('is_done', false)->count(),
|
||||
],
|
||||
'expiringDomains' => $expiringDomains,
|
||||
'recentActivity' => $recentActivity,
|
||||
'activityPageCount' => $activityPageCount,
|
||||
'openTodos' => $openTodos,
|
||||
'logEntries' => $this->organization->logEntries()->with('creator')->limit(20)->get(),
|
||||
'categories' => \App\Models\OrganizationLogEntry::CATEGORIES,
|
||||
];
|
||||
}
|
||||
};
|
||||
?>
|
||||
|
||||
<div>
|
||||
<div class="mb-6 flex items-start justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-slate-500">Tableau de bord</p>
|
||||
<h1 class="text-2xl font-semibold text-slate-900">{{ $organization->name }}</h1>
|
||||
</div>
|
||||
<img src="{{ $organization->logo_url }}" alt="Logo {{ $organization->name }}"
|
||||
class="h-20 w-20 shrink-0 rounded border border-slate-200 bg-white object-contain p-1">
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex divide-x divide-slate-200 overflow-x-auto rounded border border-slate-200 bg-white">
|
||||
<a href="{{ route('organizations.contacts.index', $organization) }}" class="flex flex-1 items-baseline gap-2 whitespace-nowrap px-4 py-3 hover:bg-slate-50">
|
||||
<span class="text-lg font-semibold text-slate-900">{{ $counts['contacts'] }}</span>
|
||||
<span class="text-xs text-slate-500">Contacts</span>
|
||||
</a>
|
||||
<a href="{{ route('organizations.locations.index', $organization) }}" class="flex flex-1 items-baseline gap-2 whitespace-nowrap px-4 py-3 hover:bg-slate-50">
|
||||
<span class="text-lg font-semibold text-slate-900">{{ $counts['locations'] }}</span>
|
||||
<span class="text-xs text-slate-500">Sites</span>
|
||||
</a>
|
||||
<a href="{{ route('organizations.domains.index', $organization) }}" class="flex flex-1 items-baseline gap-2 whitespace-nowrap px-4 py-3 hover:bg-slate-50">
|
||||
<span class="text-lg font-semibold text-slate-900">{{ $counts['domains'] }}</span>
|
||||
<span class="text-xs text-slate-500">Domaines</span>
|
||||
</a>
|
||||
<a href="{{ route('organizations.documents.index', $organization) }}" class="flex flex-1 items-baseline gap-2 whitespace-nowrap px-4 py-3 hover:bg-slate-50">
|
||||
<span class="text-lg font-semibold text-slate-900">{{ $counts['documents'] }}</span>
|
||||
<span class="text-xs text-slate-500">Documents</span>
|
||||
</a>
|
||||
<a href="{{ route('organizations.virtual-machines.index', $organization) }}" class="flex flex-1 items-baseline gap-2 whitespace-nowrap px-4 py-3 hover:bg-slate-50">
|
||||
<span class="text-lg font-semibold text-slate-900">{{ $counts['virtualMachines'] }}</span>
|
||||
<span class="text-xs text-slate-500">Machines virtuelles</span>
|
||||
</a>
|
||||
<a href="{{ route('organizations.assets.picker', $organization) }}" class="flex flex-1 items-baseline gap-2 whitespace-nowrap px-4 py-3 hover:bg-slate-50">
|
||||
<span class="text-lg font-semibold text-slate-900">{{ $counts['assets'] }}</span>
|
||||
<span class="text-xs text-slate-500">Actifs</span>
|
||||
</a>
|
||||
<a href="{{ route('organizations.todos.index', $organization) }}" class="flex flex-1 items-baseline gap-2 whitespace-nowrap px-4 py-3 hover:bg-slate-50">
|
||||
<span class="text-lg font-semibold text-slate-900">{{ $counts['openTodos'] }}</span>
|
||||
<span class="text-xs text-slate-500">Tâches ouvertes</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<div class="rounded border border-slate-200 bg-white p-4">
|
||||
<h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">Domaines à surveiller</h2>
|
||||
@if ($expiringDomains->isEmpty())
|
||||
<p class="text-sm text-slate-400">Aucun domaine à surveiller.</p>
|
||||
@else
|
||||
<ul class="space-y-2">
|
||||
@foreach ($expiringDomains as $domain)
|
||||
<li class="flex items-center justify-between text-sm">
|
||||
<a href="{{ route('organizations.domains.edit', [$organization, $domain]) }}" class="text-slate-900 hover:underline">
|
||||
{{ $domain->name }}
|
||||
</a>
|
||||
<span class="rounded-full px-2 py-0.5 text-xs font-medium
|
||||
{{ $domain->expiryStatus() === 'expired' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700' }}">
|
||||
{{ $domain->expiryStatus() === 'expired' ? 'Expiré' : 'Expire dans '.$domain->expiresInDays().' j' }}
|
||||
</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="rounded border border-slate-200 bg-white p-4">
|
||||
<h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">Activité récente</h2>
|
||||
<ul class="space-y-2.5 text-sm">
|
||||
@forelse ($recentActivity as $activity)
|
||||
<li>
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="{{ $activity['url'] }}" class="text-slate-900 hover:underline">
|
||||
{{ $activity['icon'] }} {{ $activity['label'] }}
|
||||
</a>
|
||||
<span class="shrink-0 text-slate-400">{{ $activity['at']->diffForHumans() }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">
|
||||
{{ $activity['kind'] }} {{ $activity['created'] ? 'créé' : 'modifié' }}
|
||||
@if ($activity['creator'])
|
||||
par {{ $activity['creator'] }}
|
||||
@endif
|
||||
</p>
|
||||
</li>
|
||||
@empty
|
||||
<li class="text-slate-400">Aucune activité récente.</li>
|
||||
@endforelse
|
||||
</ul>
|
||||
|
||||
@if ($activityPageCount > 1)
|
||||
<div class="mt-3 flex items-center justify-between border-t border-slate-100 pt-3 text-xs text-slate-500">
|
||||
<button type="button" wire:click="previousActivityPage" @disabled($activityPage <= 1)
|
||||
class="text-slate-600 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:text-slate-300">
|
||||
← Précédent
|
||||
</button>
|
||||
<span>Page {{ $activityPage }} / {{ $activityPageCount }}</span>
|
||||
<button type="button" wire:click="nextActivityPage" @disabled($activityPage >= $activityPageCount)
|
||||
class="text-slate-600 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:text-slate-300">
|
||||
Suivant →
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<div class="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">Tâches ouvertes</h2>
|
||||
<a href="{{ route('organizations.todos.index', $organization) }}" class="text-xs text-slate-500 hover:text-slate-900">
|
||||
Voir toutes les tâches →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul class="divide-y divide-slate-100">
|
||||
@forelse ($openTodos as $todo)
|
||||
<li wire:key="dash-todo-{{ $todo->id }}" class="flex items-center justify-between gap-4 py-2 text-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" wire:click="toggleTodoDone({{ $todo->id }})"
|
||||
class="rounded border-slate-300">
|
||||
<div>
|
||||
<a href="{{ route('organizations.todos.edit', [$organization, $todo]) }}" class="font-medium text-slate-900 hover:underline">
|
||||
{{ $todo->title }}
|
||||
</a>
|
||||
<p class="text-xs text-slate-500">
|
||||
{{ $todo->categoryLabel() }}
|
||||
@if ($todo->assignee)
|
||||
· {{ $todo->assignee->name }}
|
||||
@endif
|
||||
@if ($todo->due_date)
|
||||
· <span class="{{ $todo->isOverdue() ? 'font-medium text-red-600' : '' }}">{{ $todo->due_date->format('d/m/Y') }}</span>
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium
|
||||
{{ match($todo->criticality) {
|
||||
'urgent' => 'bg-red-100 text-red-700',
|
||||
'high' => 'bg-amber-100 text-amber-700',
|
||||
'medium' => 'bg-blue-100 text-blue-700',
|
||||
default => 'bg-slate-100 text-slate-600',
|
||||
} }}">
|
||||
{{ $todo->criticalityLabel() }}
|
||||
</span>
|
||||
</li>
|
||||
@empty
|
||||
<li class="py-2 text-sm text-slate-400">Aucune tâche ouverte.</li>
|
||||
@endforelse
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounded border border-slate-200 bg-white p-4">
|
||||
<h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">Journal de bord</h2>
|
||||
|
||||
<form wire:submit="addLogEntry" class="mb-4 space-y-2 rounded border border-slate-100 bg-slate-50 p-3">
|
||||
<div class="flex items-start gap-2">
|
||||
<select wire:model="newLogCategory" class="rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
|
||||
@foreach ($categories as $value => $label)
|
||||
<option value="{{ $value }}">{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<textarea wire:model="newLogNote" rows="2" placeholder="Projet en cours, point d'attention, intervention prévue..."
|
||||
class="flex-1 rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500"></textarea>
|
||||
<button type="submit" class="rounded bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">Ajouter</button>
|
||||
</div>
|
||||
@error('newLogNote') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
|
||||
</form>
|
||||
|
||||
<div class="space-y-3">
|
||||
@forelse ($logEntries as $entry)
|
||||
<div wire:key="log-{{ $entry->id }}" class="flex items-start justify-between gap-4 border-b border-slate-100 pb-3 last:border-0 last:pb-0">
|
||||
<div>
|
||||
<span class="mb-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium
|
||||
{{ match($entry->category) {
|
||||
'project' => 'bg-blue-100 text-blue-700',
|
||||
'attention' => 'bg-amber-100 text-amber-700',
|
||||
'intervention' => 'bg-purple-100 text-purple-700',
|
||||
default => 'bg-slate-100 text-slate-600',
|
||||
} }}">
|
||||
{{ $entry->categoryLabel() }}
|
||||
</span>
|
||||
<p class="whitespace-pre-line text-sm text-slate-900">{{ $entry->note }}</p>
|
||||
<p class="mt-1 text-xs text-slate-500">{{ $entry->creator?->name ?? 'système' }} · {{ $entry->created_at->diffForHumans() }}</p>
|
||||
</div>
|
||||
<button type="button" wire:click="deleteLogEntry({{ $entry->id }})"
|
||||
wire:confirm="Supprimer cette entrée ?"
|
||||
class="shrink-0 text-xs text-red-500 hover:text-red-700">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm text-slate-400">Aucune entrée dans le journal pour le moment.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,338 @@
|
||||
<?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
|
||||
@@ -0,0 +1,99 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Organization;
|
||||
use Livewire\Attributes\Url;
|
||||
use Livewire\Component;
|
||||
use Livewire\WithPagination;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
use WithPagination;
|
||||
|
||||
#[Url]
|
||||
public string $search = '';
|
||||
|
||||
public function delete(int $organizationId): void
|
||||
{
|
||||
$organization = Organization::findOrFail($organizationId);
|
||||
$organization->delete();
|
||||
|
||||
session()->flash('status', "Organisation « {$organization->name} » supprimée.");
|
||||
}
|
||||
|
||||
public function with(): array
|
||||
{
|
||||
return [
|
||||
'organizations' => Organization::query()
|
||||
->when($this->search, fn ($query) => $query->where('name', 'like', "%{$this->search}%"))
|
||||
->orderBy('name')
|
||||
->paginate(15),
|
||||
];
|
||||
}
|
||||
};
|
||||
?>
|
||||
|
||||
<div>
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h1 class="text-2xl font-semibold text-slate-900">Organisations</h1>
|
||||
<a href="{{ route('organizations.create') }}"
|
||||
class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
|
||||
+ Nouvelle organisation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<input type="text" wire:model.live.debounce.300ms="search" placeholder="Filtrer par nom..."
|
||||
class="mb-4 w-full max-w-sm rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
|
||||
|
||||
<div class="overflow-hidden rounded border border-slate-200 bg-white">
|
||||
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
||||
<thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
|
||||
<tr>
|
||||
<th class="px-4 py-3"></th>
|
||||
<th class="px-4 py-3">Nom</th>
|
||||
<th class="px-4 py-3">Type</th>
|
||||
<th class="px-4 py-3">Statut</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
@forelse ($organizations as $organization)
|
||||
<tr wire:key="org-{{ $organization->id }}">
|
||||
<td class="px-4 py-3">
|
||||
<img src="{{ $organization->logo_url }}" alt="Logo {{ $organization->name }}"
|
||||
class="h-8 w-8 rounded border border-slate-200 bg-white object-contain p-0.5">
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<a href="{{ route('organizations.dashboard', $organization) }}" class="font-medium text-slate-900 hover:underline">
|
||||
{{ $organization->name }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $organization->org_type ?? '—' }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="rounded-full px-2 py-0.5 text-xs font-medium
|
||||
{{ $organization->status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">
|
||||
{{ $organization->status === 'active' ? 'Actif' : 'Inactif' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<a href="{{ route('organizations.edit', $organization) }}" class="text-slate-500 hover:text-slate-900">Modifier</a>
|
||||
<button type="button"
|
||||
wire:click="delete({{ $organization->id }})"
|
||||
wire:confirm="Supprimer cette organisation ? Cette action est irréversible."
|
||||
class="ml-3 text-red-500 hover:text-red-700">
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="px-4 py-6 text-center text-slate-400">Aucune organisation pour le moment.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $organizations->links() }}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user