Create mockup html for PDF generation

vue-html2pdf appears unmaintained and hacky so it's being avoided.

components/app.vue

@@ -2,7 +2,10 @@
 <div class="panel">
 
 <template v-if="user">
-<side-bar v-if="user" :role="user && user.status" :active="active">
+<side-bar v-if="user"
+:role="user && user.status"
+:avatar="user.avatar"
+:active="active">
 </side-bar>
 
 <div v-if="loading" class="page loading">
@@ -24,6 +27,7 @@ v-else-if="active == 3"
 :token="token" 
 @addFeeTemp="(f) => fees.push(f)"
 @removeFeeTemp="(fee) => fees = fees.filter(f => f.id != fee.id)"
+@preview="previewEstimate"
 />
 
 <settings
@@ -32,13 +36,21 @@ v-else-if="active == 3"
 @updateAvatar="updateAvatar"
 @updateLetterhead="updateLetterhead"
 v-else-if="active == 4" />
+
 <sign-out :user="user" v-else-if="active == 5" />
+
 </template>
 
 <template v-if="!user && active == 6">
 <login @login="start" />
 </template>
 
+<estimate-test
+v-else-if="active == 7"
+:token="token"
+:estimate="preview"
+/>
+
 </div>
 </template>
 
@@ -48,6 +60,7 @@ import Spinner from "./spinner.vue"
 import Home from "./home.vue"
 import NewEstimate from "./new/new.vue"
 import Estimates from "./estimates.vue"
+import EstimateTest from "./estimate-test.vue"
 import Settings from "./settings.vue"
 import SignOut from "./sign-out.vue"
 import Login from "./login.vue"
@@ -191,6 +204,8 @@ function active() {
 		return 5
 	} else if (/^#login\/?/.exec(this.hash)) {
 		return 6
+	} else if (/^#estimate\/?/.exec(this.hash)) {
+		return 7
 	} else {
 		return 0
 	}
@@ -218,12 +233,18 @@ function start() {
 
 }
 
+function previewEstimate(estimate) {
+    this.preview = estimate
+    window.location.hash = 'estimate'
+}
+
 export default {
 	components: {
 		SideBar,
 		Spinner,
 		Home,
 		NewEstimate,
+		EstimateTest,
 		Estimates,
 		Settings,
 		SignOut,
@@ -240,6 +261,7 @@ export default {
 		getAvatar,
 		updateLetterhead,
 		getLetterhead,
+		previewEstimate,
 	},
 	data() {
 		return {
@@ -249,6 +271,7 @@ export default {
 			fees: [],
 			loadingError: "",
 			token: '',
+			preview: null,
 		}
 	},
 	created() {

components/estimate-test.vue

@@ -0,0 +1,21 @@
+<template>
+<div ref="doc" v-if="estimate">{{estimate}}
+
+<button @click="makePDF">Generate</button>
+</div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import html2pdf from "html2pdf.js";
+
+const doc = ref(null)
+const props = defineProps(['token', 'estimate'])
+
+function makePDF() {
+  html2pdf(doc.value)
+}
+</script>
+
+<style>
+</style>

components/estimates.vue

@@ -27,8 +27,6 @@
 	@save="newFee"
 />
 
-
-
 <section class="inputs estimates">
 <h3>Saved Estimates</h3>
 
@@ -56,7 +54,7 @@ ${{(estimate.price / 100).toLocaleString()}}
 <label>Total monthly: ${{format(estimate.results[i].totalMonthly)}}</label>
 <label>Cash to close: ${{format(estimate.results[i].cashToClose)}}</label>
 </div>
-
+<button @click="() => $emit('preview', estimate)">Preview</button>
 <button @click="() => estimate = null">Cancel</button>
 </div>
 
@@ -71,7 +69,7 @@ import FeeDialog from "./fee-dialog.vue"
 import { format } from "../helpers.js"
 
 const props = defineProps(['user', 'fees', 'token'])
-const emit = defineEmits(['addFeeTemp', 'removeFeeTemp'])
+const emit = defineEmits(['addFeeTemp', 'removeFeeTemp', 'preview'])
 let edit = ref(null)
 let estimates = ref([])
 let estimate = ref()

components/sidebar.vue

@@ -20,8 +20,8 @@ fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0
 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0
 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/> </svg>
 
-<img
-src="/assets/image/mintberry.jpg">
+<img v-if="avatar"
+:src="avatarUrl">
 
 <a href="#" :class="active == 1 ? 'active' : ''">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
@@ -96,11 +96,15 @@ fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16"> <path d="M3
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue"
-const props = defineProps(['role', 'active'])
+import { ref, onMounted, computed } from "vue"
+const props = defineProps(['role', 'active', 'avatar'])
 const mobile = ref(false)
 const toggled = ref(false)
 
+let avatarUrl = computed(() => {
+  return URL.createObjectURL(props.avatar)
+})
+
 function checkMobile() {
 	if (window.innerWidth < 720) {
 		mobile.value = true

package.json

@@ -3,8 +3,8 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
-    "vue": "^3.2.41",
-    "vue-html2pdf": "^1.8.0"
+    "html2pdf": "^0.0.11",
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "css-loader": "^6.7.1",