Add history, multiple memo lines, etc...

printmechecks/src/App.vue

@@ -13,7 +13,7 @@ import { RouterLink, RouterView } from 'vue-router'
                 <RouterLink to="/" class="nav-link" :class="{'active': $route.path == '/'}">Check</RouterLink>
             </li>
             <li class="nav-item">
-                <RouterLink to="/settings" class="nav-link" :class="{'active': $route.path == '/settings'}">Settings</RouterLink>
+                <RouterLink to="/history" class="nav-link" :class="{'active': $route.path == '/history'}">History</RouterLink>
             </li>
         </ul>
       <nav>

printmechecks/src/components/CheckPrinter.vue

@@ -34,7 +34,7 @@
                     <span class="dollar-line"></span>
                 </div>
                 <div class="bank-name" style="position: absolute; top: 300px; left: 60px">{{check.bankName}}</div>
-                <div class="memo-data" style="position: absolute; top: 377px; left: 120px">{{check.memo}}</div>
+                <div class="memo-data" style="position: absolute; top: 367px; left: 120px">{{check.memo}}</div>
                 <div class="memo" style="position: absolute; top: 390px; left: 60px">
                     Memo: ____________________________________
                 </div>
@@ -119,48 +119,64 @@
                     <input type="text" class="form-control" v-model="check.signature">
                 </div>
             </form>
+            <div class="col-12" style="margin-top: 30px;">
+                <button type="button" class="btn btn-primary" @click="saveToHistory">Save to History</button>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import print from 'print-js';
 import { default as converter } from 'number-to-words';
-import { ref, reactive, nextTick, watch} from 'vue'
-
-const check = reactive({
-    accountHolderName: 'John Smith',
-    accountHolderAddress: '123 Cherry Tree Lane',
-    accountHolderCity: 'New York',
-    accountHolderState: 'NY',
-    accountHolderZip: '10001',
-    checkNumber: '554',
-    date: new Date().toLocaleDateString(),
-    bankName: 'Bank Name, INC',
-    amount: '100.00',
-    payTo: 'Michael Johnson',
-    memo: 'Rent',
-    signature: 'John Smith',
-    routingNumber: '022303659',
-    bankAccountNumber: '000000000000',
-    lineLength: 166
-})
+import { ref, reactive, nextTick, watch, onMounted} from 'vue'
+import {formatMoney} from '../utilities.ts'
+import {useAppStore} from '../stores/app.ts'
 
+const state = useAppStore()
 
 function toWords (number: string) {
+    if (!number) return ''
     return converter.toWords(number)
 }
 
 
-function formatMoney (number: string) {
-    var numberFloat: float = parseFloat(number)
-    return numberFloat.toLocaleString('en-US', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2})
-}
 
 function printCheck () {
     window.print()
 }
 
+function saveToHistory () {
+    let checkList = JSON.parse(localStorage.getItem('checkList') || '[]')
+    checkList.push(check)
+    localStorage.setItem('checkList', JSON.stringify(checkList))
+}
+
+function genNewCheck () {
+    let checkList = JSON.parse(localStorage.getItem('checkList') || '[]')
+    let recentCheck = checkList[checkList.length - 1]
+    let check = {}
+    check.accountHolderName = recentCheck?.accountHolderName || 'John Smith'
+    check.accountHolderAddress = recentCheck?.accountHolderAddress || '123 Cherry Tree Lane'
+    check.accountHolderCity = recentCheck?.accountHolderCity || 'New York'
+    check.accountHolderState = recentCheck?.accountHolderState || 'NY'
+    check.accountHolderZip = recentCheck?.accountHolderZip || '10001'
+    check.checkNumber = recentCheck?.checkNumber ? (parseInt(recentCheck?.checkNumber + 1)) : '100'
+    check.date = new Date().toLocaleDateString()
+    check.bankName = recentCheck?.bankName || 'Bank Name, INC'
+    check.amount = '0.00'
+    check.payTo = 'Michael Johnson'
+    check.memo = recentCheck?.memo || 'Rent'
+    check.signature = recentCheck?.signature || 'John Smith'
+    check.routingNumber = recentCheck?.routingNumber || '022303659'
+    check.bankAccountNumber = recentCheck?.bankAccountNumber || '000000000000'
+    return check
+}
+
+const check = reactive(
+    genNewCheck()
+)
+
 const line = ref(null)
 
 watch(check, async () => {
@@ -171,6 +187,25 @@ watch(check, async () => {
 }, { immediate: true })
 
 
+onMounted(() => {
+    if (state.check) {
+        check.accountHolderName = state.check.accountHolderName
+        check.accountHolderAddress = state.check.accountHolderAddress
+        check.accountHolderCity = state.check.accountHolderCity
+        check.accountHolderState = state.check.accountHolderState
+        check.accountHolderZip = state.check.accountHolderZip
+        check.checkNumber = state.check.checkNumber
+        check.date = state.check.date
+        check.bankName = state.check.bankName
+        check.amount = state.check.amount
+        check.payTo = state.check.payTo
+        check.memo = state.check.memo
+        check.signature = state.check.signature
+        check.routingNumber = state.check.routingNumber
+        check.bankAccountNumber = state.check.bankAccountNumber
+    }
+    state.check = null
+})
 
 </script>
 
@@ -194,7 +229,8 @@ label {
 .memo-data {
     font-family: Caveat;
     font-size: 30px;
-    transform: rotate(-2deg);
+    max-width: 350px;
+    line-height: 0.65;
 }
 .signature-data {
     font-family: Caveat;

printmechecks/src/router/index.ts

@@ -10,12 +10,12 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/settings',
-      name: 'settings',
+      path: '/history',
+      name: 'history',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/SettingsView.vue')
+      component: () => import('../views/HistoryView.vue')
     }
   ]
 })

printmechecks/src/stores/app.ts

@@ -0,0 +1,8 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('useAppStore', () => {
+  const check = ref(null)
+
+  return { check }
+})

printmechecks/src/utilities.ts

@@ -0,0 +1,7 @@
+function formatMoney (number: string) {
+    var numberFloat: float = parseFloat(number)
+    return numberFloat.toLocaleString('en-US', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2})
+}
+
+export { formatMoney }
+

printmechecks/src/views/HistoryView.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="about">
+        <h1>History</h1>
+        <div v-if="history.length === 0">
+            <p>No history yet</p>
+        </div>
+        <div v-else>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Check #</th>
+                        <th>Amount</th>
+                        <th>Payee</th>
+                        <th>Account</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item, index) in history" :key="item.id">
+                        <td>{{ item.checkNumber }}</td>
+                        <td>${{ formatMoney(item.amount) }}</td>
+                        <td>{{ item.payTo }}</td>
+                        <td>{{ item.bankAccountNumber }}</td>
+                        <td>
+                            <button class="btn btn-outline-danger" @click="deleteItem(index)" style="margin-right: 10px">Delete</button>
+                            <button class="btn btn-outline-primary" @click="viewItem(index)">View</button>
+                        </td>
+
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<style>
+</style>
+
+<script setup>
+import {formatMoney} from '../utilities.ts'
+import { ref, onMounted} from 'vue'
+import { useAppStore } from '../stores/app.ts'
+import { useRouter } from 'vue-router'
+
+const state = useAppStore()
+const router = useRouter()
+
+const history = ref([])
+
+const loadHistory = () => {
+  history.value = JSON.parse(localStorage.getItem('checkList') || '[]')
+}
+
+const deleteItem = (index) => {
+  history.value.splice(index, 1)
+  localStorage.setItem('checkList', JSON.stringify(history.value))
+}
+
+const viewItem = (index) => {
+    const item = history.value[index]
+    state.check = item
+    router.push('/')
+}
+
+onMounted(() => {
+  loadHistory()
+})
+
+
+</script>