printing user-specific logos and signatures on invoices

3 files changed, 57 insertions, 3 deletions

diff --git a/src/components/InvoiceHeaderEditor.vue b/src/components/InvoiceHeaderEditor.vue
index 5b1f925..035ed85 100644
--- a/src/components/InvoiceHeaderEditor.vue
+++ b/src/components/InvoiceHeaderEditor.vue
@@ -53,7 +53,6 @@ const getUser = async () => {
   }
 
   gettingData.value = false
-  console.log(user)
 }
 
 const submit = async (e: Event) => {
diff --git a/src/components/PrintPreviewFooter.vue b/src/components/PrintPreviewFooter.vue
index d41d621..3d1dd4c 100644
--- a/src/components/PrintPreviewFooter.vue
+++ b/src/components/PrintPreviewFooter.vue
@@ -2,6 +2,32 @@
   import Converter from "number-to-words"
 
   const props = defineProps(["invoice", "total"])
+
+  import { onMounted, ref } from "vue"
+ import  User from "./../classes/user.js"
+ import axios from "axios"
+
+  const user = ref()
+
+  // temporarily using this
+  // TODO: don't call api from PrintPreview
+  const getUser = async () => {
+    user.value = new User()
+
+    try {
+      const r = await axios.get('/user')
+      if (r.status === 200) {
+        user.value = r.data.data
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  // TODO: remove
+  onMounted(() => {
+    getUser()
+  })
 </script>
 
 <template>
@@ -61,7 +87,9 @@
         </div>
 
         <div class="signature-container">
-          <img src="../assets/DefaultSignaturePlaceholder.png"/>
+          <!-- TODO: either show user's signature or a placeholder. maybe use css instead of a whole placeholder png. -->
+          <!--img src="../assets/DefaultSignaturePlaceholder.png"/-->
+          <img :src="'/pub/' + user.SignatureFile"/>
         </div>
 
         <div class="tiny">
diff --git a/src/components/PrintPreviewHeader.vue b/src/components/PrintPreviewHeader.vue
index 9e89c84..62da945 100644
--- a/src/components/PrintPreviewHeader.vue
+++ b/src/components/PrintPreviewHeader.vue
@@ -1,11 +1,38 @@
 <script setup lang="ts">
+  import { onMounted, ref } from "vue"
+ import  User from "./../classes/user.js"
+ import axios from "axios"
+
   const props = defineProps(["invoice"])
+
+  const user = ref()
+
+  // temporarily using this
+  // TODO: don't call api from PrintPreview
+  const getUser = async () => {
+    user.value = new User()
+
+    try {
+      const r = await axios.get('/user')
+      if (r.status === 200) {
+        user.value = r.data.data
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  // TODO: remove
+  onMounted(() => {
+    getUser()
+  })
 </script>
 
 <template>
   <div class="print-preview-header">
+    <!-- TODO: add option to not use logo -->
     <div class="logo-container"> 
-      <img src="../assets/placeholderlogo.png"/>
+      <img :src="'/pub/' + user.LogoFile"/>
     </div>
 
     <div>