Add address and phone number to user and branch

Update the database tables for user and branch to give more information
required for PDF generation. Also set up a test component to preview
change to the view during development. It will be reconfigured once the
genrated PDF is satisfactory.

.gitignore

@@ -2,7 +2,7 @@ node_modules/
 skouter
 *.sw[poqa]
 .env
-assets/app.js
+assets/*.js
 package-lock.json
 config.go
 *~

components/app.vue

@@ -49,6 +49,7 @@ v-else-if="active == 4" />
 v-else-if="active == 7"
 :token="token"
 :estimate="preview"
+:user="user"
 />
 
 </div>

components/estimate-test.vue

@@ -1,21 +1,82 @@
 <template>
-<div ref="doc" v-if="estimate">{{estimate}}
+<div id="pdf-doc" ref="doc" v-if="estimate">
+
+<header class="heading">
+
+<img :src="letterhead" />
+
+<div>
+
+<div class="user-info">
+<h4>{{user.firstName + " " + user.lastName}}</h4>
+<span>{{user.email}}</span>
+<span>{{user.phone}}</span>
+<small>{{user.phone}}</small>
+</div>
+<img :src="avatar"/>
+</div>
+
+</header>
 
 <button @click="makePDF">Generate</button>
 </div>
 </template>
 
 <script setup>
-import { ref } from "vue"
+import { ref, computed, onMounted } from "vue"
 import html2pdf from "html2pdf.js";
 
 const doc = ref(null)
-const props = defineProps(['token', 'estimate'])
+const props = defineProps(['token', 'estimate', 'user'])
+const estimate = ref(null)
+const estimates = ref(null)
+
+const letterhead = computed(() => {
+    if (!props.user.letterhead) return null
+  return URL.createObjectURL(props.user.letterhead)
+})
+
+const avatar = computed(() => {
+    if (!props.user.letterhead) return null
+    console.log(props.user)
+    return URL.createObjectURL(props.user.avatar)
+})
 
 function makePDF() {
   html2pdf(doc.value)
 }
+
+
+function getEstimates() {
+	return fetch(`/api/estimates`,
+		{method: 'GET',
+    		headers: {
+        	"Accept": "application/json",
+        	"Authorization": `Bearer ${props.token}`,
+    		},
+	}).then(response => {
+		if (response.ok) { return response.json() } else {
+		    response.text().then(t => console.log(t))
+		}
+	}).then (result => {
+		if (!result || !result.length) return // Exit if token is invalid or no fees are saved
+		estimates.value = result
+		// console.log(result)
+	})
+}
+
+onMounted(() => {
+    getEstimates().then(() => estimate.value = estimates.value[0])
+})
 </script>
 
-<style>
+<style scoped>
+header.heading {
+    display: flex;
+}
+
+.user-info {
+    display: flex;
+    flex-flow: column;
+}
 </style>

migrations/0_29092022_setup_tables.sql

@@ -1,11 +1,24 @@
 /* Precision for all money amounts assumes cents are excluded. */
 
+CREATE TABLE address (
+	id	INT AUTO_INCREMENT,
+	street	VARCHAR(40) UNIQUE NOT NULL,
+	city	VARCHAR(40) UNIQUE NOT NULL,
+	region	VARCHAR(40) UNIQUE NOT NULL,
+	country	VARCHAR(40) UNIQUE NOT NULL,
+	zip	VARCHAR(40) UNIQUE NOT NULL,
+	PRIMARY KEY (`id`)
+);
+
 CREATE TABLE branch (
-	id 				INT AUTO_INCREMENT,
-	type 			ENUM('NMLS', 'FSRA') NOT NULL,
+	id	INT AUTO_INCREMENT,
+	type	ENUM('NMLS', 'FSRA') NOT NULL,
 	letterhead	BLOB(102400) NOT NULL DEFAULT 0,
-	num 			VARCHAR(40) NOT NULL,
-	PRIMARY KEY (id)
+	num	VARCHAR(40) NOT NULL,
+	phone	VARCHAR(20) NOT NULL,
+	address	INT NOT NULL,
+	PRIMARY KEY (id),
+	FOREIGN KEY (address) REFERENCES address(id)
 );
 
 CREATE TABLE user (
@@ -13,6 +26,8 @@ CREATE TABLE user (
 	email 			VARCHAR(40) UNIQUE NOT NULL,
 	first_name 		VARCHAR(30) NOT NULL,
 	last_name 		VARCHAR(30) NOT NULL,
+	phone	VARCHAR(20) NOT NULL,
+	address	INT NOT NULL,
 	password 		CHAR(64) NOT NULL,
 	verified 		BOOLEAN,
 	branch_id 		INT NULL,
@@ -32,7 +47,8 @@ CREATE TABLE user (
 					'Admin'),
 	role	ENUM('User', 'Manager', 'Admin') NOT NULL,
 	PRIMARY KEY (`id`),
-	FOREIGN KEY (branch_id) REFERENCES branch(id)
+	FOREIGN KEY (branch_id) REFERENCES branch(id),
+	FOREIGN KEY (address) REFERENCES address(id)
 );
 
 CREATE TABLE license (

migrations/reset.sql

@@ -9,3 +9,4 @@ DROP TABLE IF EXISTS loan_type;
 DROP TABLE IF EXISTS license;
 DROP TABLE IF EXISTS user;
 DROP TABLE IF EXISTS branch;
+DROP TABLE IF EXISTS address;

migrations/seed.sql

@@ -1,13 +1,32 @@
+INSERT IGNORE INTO address
+  (street, city, region, country, zip)
+VALUES
+ 	(
+ 		'443 Rideau Street',
+ 		'Ottawa',
+ 		'Ontario',
+ 		'Canada',
+ 		'K1N 2B8'
+ 	),
+	(
+		'221 Mountainview Parkway',
+		'Mountainview',
+		'San Francisco',
+		'USA', 'K1N 2B8'
+	);
+
 INSERT IGNORE INTO branch
-  (type, num )
+  (type, num, address )
 VALUES
-  ('NMLS', 'abc123idk'),
-  ('FSRA', 'another branch');
+  ('NMLS', 'abc123idk', 1),
+  ('FSRA', 'another branch', 1);
 
 INSERT IGNORE INTO user (
 	first_name,
 	last_name,
 	password,
+	address,
+	phone,
 	branch_id,
 	country,
 	title,
@@ -21,6 +40,8 @@ INSERT IGNORE INTO user (
 	'Blue',
 	'Coltrane',
 	sha2('test123', 256),
+	1,
+	'9059991111'
 	(SELECT id FROM branch LIMIT 1),
 	'Canada',
 	'Loan Officer',
@@ -34,6 +55,8 @@ INSERT IGNORE INTO user (
 	'Giant',
 	'Coltrane',
 	sha2('test123', 256),
+	1,
+	'9054441111',
 	0,
 	'USA',
 	'Mortgage Broker',
@@ -47,6 +70,8 @@ INSERT IGNORE INTO user (
 	'Jeru',
 	'Mulligan',
 	sha2('test123', 256),
+	1,
+	'9054441111',
 	(SELECT id FROM branch LIMIT 1),
 	'USA',
 	'Branch Manager',

package.json

@@ -3,7 +3,8 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
-    "html2pdf": "^0.0.11",
+    "html2pdf.js": "^0.10.1",
+    "style-loader": "^3.3.3",
     "vue": "^3.2.41"
   },
   "devDependencies": {

webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
 	module: { 
 		rules: [
 			{test: /\.vue$/, use: 'vue-loader'},
-			{test: /\.css$/, use: 'css-loader'}
+			{test: /\.css$/, use: ['style-loader', 'css-loader']}
 		]
 	},
 	devServer: {