added basic (and incomplete) print preview template

2 files changed, 10 insertions, 34 deletions

diff --git a/src/views/NewInvoice.vue b/src/views/NewInvoice.vue
index 06d3ec7..2e2230c 100644
--- a/src/views/NewInvoice.vue
+++ b/src/views/NewInvoice.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import invoiceHeaderEditor from './../components/invoice_header_editor.vue'
+import InvoiceHeaderEditor from './../components/InvoiceHeaderEditor.vue'
 </script>
 
 <template>
-  <invoiceHeaderEditor />
+  <InvoiceHeaderEditor />
 </template>
diff --git a/src/views/ViewInvoice.vue b/src/views/ViewInvoice.vue
index 5f2a783..b8b7f2d 100644
--- a/src/views/ViewInvoice.vue
+++ b/src/views/ViewInvoice.vue
@@ -11,6 +11,8 @@ import invoiceHeader from './../components/invoice_header.vue'
 import invoiceItemsTable from './../components/invoice_items_table.vue'
 import invoiceSummary from './../components/invoice_summary.vue'
 
+import PrintPreview from './../components/PrintPreview.vue'
+
 const toast = useToast({
   position: 'top-right'
 })
@@ -52,50 +54,24 @@ onMounted(() => {
 
 <template>
   <div id="print-preview" class="bg-white text-black">
-    <invoiceHeader
-      :invoice="invoice" />
-    <invoiceItemsTable
-      preview=true
-      :items="items"
-      :isLoading="itemsTableIsLoading" />
-    <invoiceSummary
-      :items="items"
-      :isLoading="itemsTableIsLoading"
-    />
+    <PrintPreview :invoice="invoice"/>
   </div>
   <button id="print-button" class="btn btn-primary" @click="handlePrint">Print</button>
 </template>
 
 <style>
 #print-preview {
-  width: 670px;
-}
-#print-preview * {
-  font-size: 12pt !important;
-}
-#print-preview .sup {
-}
-#print-preview table {
-  width: 100%;
-}
-#print-preview table * {
-  font-size: 10pt !important;
-}
-#print-preview .invoice-items-table {
-  margin-bottom: auto !important;
-}
-#print-preview .invoice-summary {
-  margin-top: auto !important;
-}
-#print-preview .item-name-cell span {
-  max-width: 150pt !important;
+  max-height: 90vh;
+  /*display: none;*/
+  aspect-ratio: 1 / 1.414;
 }
 @media print {
   body {
     background-color: white;
   }
   #print-preview {
-    width: auto !important;
+    display: block;
+    width: 100% !important;
     height: 100% !important;
   }
   #sidebar, #navbar, #print-button, .btn {