populated items list and total in print preview

1 files changed, 11 insertions, 5 deletions

diff --git a/src/components/PrintPreview.vue b/src/components/PrintPreview.vue
index ecbda88..1e98eb7 100644
--- a/src/components/PrintPreview.vue
+++ b/src/components/PrintPreview.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
+  import { ref, toRaw, onMounted } from "vue"
+
   import PrintPreviewHeader from './PrintPreviewHeader.vue'
   import PrintPreviewRecipientDetails from './PrintPreviewRecipientDetails.vue'
   import PrintPreviewItemsList from './PrintPreviewItemsList.vue'
+  import PrintPreviewFooter from './PrintPreviewFooter.vue'
 
-  const props = defineProps(["invoice"])
-
-  setTimeout(() => {
-    console.log(props.invoice)
-  }, 1000)
+  const props = defineProps(["invoice", "total"])
 </script>
 
 <template>
@@ -18,6 +17,8 @@
       :invoice="props.invoice"/>
     <PrintPreviewItemsList 
       :items="props.invoice.Items"/>
+    <PrintPreviewFooter 
+      :total="props.total"/>
   </div>
 </template>
 
@@ -28,4 +29,9 @@
 .print-preview p {
   margin: 0;
 }
+.print-preview {
+  display: grid;
+  grid-template-rows: 1fr 2fr auto 1.5fr;
+  row-gap: 1em;
+}
 </style>