Improvements for html presentation of invoice in client portal

app/Http/Livewire/PdfSlot.php

@@ -26,6 +26,7 @@ use App\Services\Pdf\PdfDesigner;
 use App\Services\Pdf\PdfConfiguration;
 use App\Models\PurchaseOrderInvitation;
 use App\Models\RecurringInvoiceInvitation;
+use App\Jobs\Vendor\CreatePurchaseOrderPdf;
 
 class PdfSlot extends Component
 {
@@ -45,13 +46,11 @@ class PdfSlot extends Component
 
     private $entity_type;
 
-    public $download_button_text;
+    protected $listeners = ['viewportChanged' => 'getPdf'];
 
     public function mount()
     {
         MultiDB::setDb($this->db);
-
-        $this->download_button_text = ctrans('texts.download_pdf');
     }
 
     public function getPdf()
@@ -62,10 +61,11 @@ class PdfSlot extends Component
     public function downloadPdf()
     {
         
-        $this->download_button_text = ctrans('texts.working');
-
         $file_name = $this->entity->numberFormatter().'.pdf';
 
+        if($this->entity instanceof \App\Models\PurchaseOrder)
+            $file = (new CreatePurchaseOrderPdf($this->invitation, $this->invitation->company->db))->rawPdf();
+        else
             $file = (new \App\Jobs\Entity\CreateRawPdf($this->invitation, $this->invitation->company->db))->handle();
 
         $headers = ['Content-Type' => 'application/pdf'];
@@ -74,8 +74,6 @@ class PdfSlot extends Component
             echo $file;
         }, $file_name, $headers);
 
-        $this->download_button_text = ctrans('texts.download_pdf');
-
     }
 
     public function render()
@@ -110,7 +108,6 @@ class PdfSlot extends Component
     {
 
         $html = strtr($string, $this->html_variables['labels']);
-        
         $html = strtr($html, $this->html_variables['values']);
 
         return $html;
@@ -148,20 +145,20 @@ class PdfSlot extends Component
 
         if($this->entity_type == 'invoice' || $this->entity_type == 'recurring_invoice') {
             foreach($this->settings->pdf_variables->invoice_details as $variable) 
-                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
     
         }
         elseif($this->entity_type == 'quote'){
             foreach($this->settings->pdf_variables->quote_details as $variable)
-                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
         }
         elseif($this->entity_type == 'credit') {
             foreach($this->settings->pdf_variables->credit_details as $variable)
-                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
         }
         elseif($this->entity_type == 'purchase_order'){
             foreach($this->settings->pdf_variables->purchase_order_details as $variable)
-                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block entity-field'>{$variable}</p></div>";
         }
             
         return $this->convertVariables($entity_details);

resources/views/portal/ninja2020/components/html-viewer.blade.php

@@ -39,7 +39,7 @@ span {
 
     <div class="border-fuchsia-600 border-b-2 pb-3 mt-3">
 
-        <div class=""> {!! $entity_details !!} </div>
+        <div id="entity-details"> {!! $entity_details !!} </div>
 
     </div>
 
@@ -118,27 +118,13 @@ span {
     @endif
     <div id="totals" class="mb-10 mr-3 ml-3">
         <table width="100%">
-            <thead>
-            </thead>
             <tbody>
-                <tr style="display: table-row;">
+                <tr>
-                    <td>
+                    <td style="text-align:left; padding-right:10px;" class="text-lg">{{ ctrans('texts.total') }}</td>
-                        <div class="">
-                            <div class="">
-                                <p class="px-2 text-lg">{{ ctrans('texts.total') }}</p> 
-                            </div>
-                        </div>
-                    </td>
                     <td style="text-align:right; padding-right:10px;" class="text-lg">{{ $amount }}</td>
                 </tr>
-                 <tr style="display: table-row;">
+                 <tr>
-                    <td>
+                    <td style="text-align:left; padding-right:10px;" class="text-lg">{{ ctrans('texts.balance') }}</td>
-                        <div class="">
-                            <div class="">
-                                <p class="px-2 text-lg">{{ ctrans('texts.balance') }}</p> 
-                            </div>
-                        </div>
-                    </td>
                     <td style="text-align:right; padding-right:10px;" class="text-lg">{{ $balance }}</td>
                 </tr>
             </tbody>
@@ -191,3 +177,50 @@ span {
 
     </div>
     @endif
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        
+        Array.from(document.getElementsByClassName("entity-field")).forEach(function(item) {
+            if(item.innerText.length == 0){
+                item.parentNode.remove();
+            }
+        });
+
+        Livewire.hook('message.processed', (message, component) => {
+
+            Array.from(document.getElementsByClassName("entity-field")).forEach(function(item) {
+                if(item.innerText.length == 0){
+                    item.parentNode.remove();
+                }
+            });
+
+        })
+        
+        var timeout = false; 
+        
+        /* Watch for resize of window and ensure we unset props with no values */
+        window.addEventListener('resize', function() {
+            clearTimeout(timeout);
+            timeout = setTimeout(getDimensions, 250);
+        });
+
+        getDimensions();
+
+        function getDimensions() {
+
+            const width = window.innerWidth;
+            
+            if(width < 900){
+            
+                Array.from(document.getElementsByClassName("entity-field")).forEach(function(item) {
+                    if(item.innerText.length == 0){
+                        item.parentNode.remove();
+                    }
+                });
+
+            }
+        }
+
+    });
+</script>