Render pdf's in client portal dynamically

This commit is contained in:
David Bomba 2023-07-08 09:31:50 +10:00
parent 281bb47684
commit f9f18907c2
4 changed files with 92 additions and 5 deletions

View File

@ -0,0 +1,47 @@
<?php
/**
* Invoice Ninja (https://invoiceninja.com).
*
* @link https://github.com/invoiceninja/invoiceninja source repository
*
* @copyright Copyright (c) 2023. Invoice Ninja LLC (https://invoiceninja.com)
*
* @license https://www.elastic.co/licensing/elastic-license
*/
namespace App\Http\Livewire;
use App\Libraries\MultiDB;
use Livewire\Component;
class PdfSlot extends Component
{
public $invitation;
public $db;
public $entity;
public $pdf;
public function mount()
{
MultiDB::setDb($this->db);
}
public function render()
{
return render('components.livewire.pdf-slot', [
'invitation' => $this->invitation,
'entity' => $this->entity,
]);
}
public function getPdf()
{
$this->pdf = $this->entity->fullscreenPdfViewer($this->invitation);
}
}

View File

@ -41,9 +41,5 @@ class MultiDBProvider extends ServiceProvider
}
}
);
if ($this->app->runningInConsole()) {
return;
}
}
}

View File

@ -0,0 +1,43 @@
<div wire:init="getPdf()">
@if($pdf)
<iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe>
@else
<div class="flex mt-4 place-items-center">
<span class="loader m-auto"></span>
<style type="text/css">
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
position: relative;
animation: rotate 1s linear infinite
}
.loader::before , .loader::after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 5px solid #454545;
animation: prixClipFix 2s linear infinite ;
}
.loader::after{
border-color: #FF3D00;
animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
inset: 6px;
}
@keyframes rotate {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
@keyframes prixClipFix {
0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
</style>
</div>
@endif
</div>

View File

@ -87,7 +87,8 @@
<canvas id="pdf-placeholder" class="shadow rounded-lg bg-white"></canvas>
</div>
@else
<iframe id="pdf-iframe" src="{{ $url ?? $entity->pdf_file_path($invitation, 'url', true) }}?cache_buster={{time()}}" class="h-screen w-full border-0 mt-4"></iframe>
@livewire('pdf-slot', ['entity' => $entity, 'invitation' => $invitation, 'db' => $invitation->company->db])
<!-- <iframe id="pdf-iframe" src="{{ $url ?? $entity->pdf_file_path($invitation, 'url', true) }}?cache_buster={{time()}}" class="h-screen w-full border-0 mt-4"></iframe> -->
@endif