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.
119 lines
4.4 KiB
PHP
119 lines
4.4 KiB
PHP
<?php
|
|
|
|
use App\Models\Document;
|
|
use App\Models\Organization;
|
|
use App\Services\OnlyOffice\DocumentConfigBuilder;
|
|
use Livewire\Attributes\Url;
|
|
use Livewire\Component;
|
|
|
|
new class extends Component
|
|
{
|
|
public Organization $organization;
|
|
public Document $document;
|
|
|
|
#[Url]
|
|
public bool $edit = false;
|
|
|
|
public array $editorConfig = [];
|
|
|
|
public bool $renaming = false;
|
|
public string $name = '';
|
|
|
|
public function mount(Organization $organization, Document $document, DocumentConfigBuilder $configBuilder): void
|
|
{
|
|
abort_unless($document->isOffice(), 404);
|
|
|
|
$this->organization = $organization;
|
|
$this->document = $document;
|
|
$this->name = $document->name;
|
|
$this->editorConfig = $configBuilder->build($document, auth()->user(), editable: $this->edit);
|
|
}
|
|
|
|
public function rename(): void
|
|
{
|
|
$validated = $this->validate(['name' => 'required|string|max:255']);
|
|
|
|
$this->document->update($validated);
|
|
$this->renaming = false;
|
|
}
|
|
};
|
|
?>
|
|
|
|
<div>
|
|
<p class="text-sm text-slate-500">{{ $organization->name }}</p>
|
|
<div class="mb-6 flex items-center justify-between">
|
|
@if ($renaming)
|
|
<form wire:submit="rename" class="flex items-center gap-2">
|
|
<input type="text" wire:model="name" autofocus
|
|
class="rounded border-slate-300 text-2xl font-semibold shadow-sm focus:border-slate-500 focus:ring-slate-500">
|
|
<button type="submit" class="rounded bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">Enregistrer</button>
|
|
<button type="button" wire:click="$set('renaming', false)" class="text-sm text-slate-500 hover:text-slate-900">Annuler</button>
|
|
@error('name') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
|
|
</form>
|
|
@else
|
|
<button type="button" wire:click="$set('renaming', true)" class="group flex items-center gap-2">
|
|
<h1 class="text-2xl font-semibold text-slate-900">{{ $document->name }}</h1>
|
|
<span class="text-sm text-slate-400 opacity-0 group-hover:opacity-100">Renommer</span>
|
|
</button>
|
|
@endif
|
|
<div class="flex items-center gap-4">
|
|
@unless ($edit)
|
|
<a href="{{ route('organizations.documents.edit', [$organization, $document, 'edit' => true]) }}"
|
|
class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
|
|
Modifier
|
|
</a>
|
|
@else
|
|
<span class="rounded bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700">Modification en cours</span>
|
|
@endunless
|
|
<a href="{{ route('organizations.documents.index', [$organization, 'folder' => $document->folder_id]) }}"
|
|
class="text-sm text-slate-500 hover:text-slate-900">Retour</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
wire:ignore
|
|
x-data="onlyOfficeEditor(@js($editorConfig), @js(config('onlyoffice.document_server_url')))"
|
|
x-init="init()"
|
|
class="w-full"
|
|
style="height: 85vh;"
|
|
>
|
|
<div id="onlyoffice-editor-{{ $document->id }}" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
|
|
<div class="max-w-5xl">
|
|
<x-documents.version-history :document="$document" />
|
|
|
|
<div class="mt-8">
|
|
<livewire:related-items.panel :organization="$organization" :item="$document" :key="'related-'.$document->id" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@once
|
|
<script>
|
|
function onlyOfficeEditor(config, documentServerUrl) {
|
|
return {
|
|
editor: null,
|
|
init() {
|
|
this.loadApi(documentServerUrl).then(() => {
|
|
this.editor = new DocsAPI.DocEditor(this.$el.querySelector('div').id, config);
|
|
});
|
|
},
|
|
loadApi(baseUrl) {
|
|
if (window.DocsAPI) {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = baseUrl.replace(/\/$/, '') + '/web-apps/apps/api/documents/api.js';
|
|
script.onload = resolve;
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
@endonce
|