Merge pull request #12 from forevermatt/develop

Release 0.5.2

README.md

@@ -17,8 +17,18 @@ https://forevermatt.github.io/svelte-budget/
 - [ ] Edit a financial account
 - [x] Record an expense
 - [x] Create separate repo to document data structure versions
+- [x] Subtract the transaction amount from a category's budget upon completion
+      of recording an expense
+- [ ] Move assembly of new transaction to separate local variable (to simplify
+      process of updating remaining amounts for budget categories, both for
+      when creating a new transaction and when editing an existing transaction)
+- [ ] Enable seeing a category's transactions
+- [ ] Update Category view to show both budgeted and remaining amounts
+- [ ] Add "next" buttons to allow progressing through record-an-expense using
+      a mouse
 - [x] Autofocus the appropriate input (where applicable) on arrival at each
       page
+- [ ] Allow adding a comment/note on each transaction
 - [ ] ...
 
 ## Data Structure

package.json

@@ -18,15 +18,15 @@
   },
   "homepage": "https://github.com/forevermatt/svelte-budget#readme",
   "devDependencies": {
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-node-resolve": "^7.0.0",
     "fa-svelte": "^3.1.0",
     "rollup": "^1.20.0",
     "rollup-plugin-livereload": "^1.3.0",
-    "rollup-plugin-svelte": "^5.2.2",
-    "rollup-plugin-terser": "^5.1.2",
-    "svelte": "^3.23.2",
+    "rollup-plugin-svelte": "^5.2.3",
+    "rollup-plugin-terser": "^5.3.1",
+    "svelte": "^3.25.1",
     "svelte-spa-router": "^2.2.0"
   },
   "dependencies": {

src/components/Button.svelte

@@ -39,7 +39,7 @@ a:hover .button-circle {
 </style>
 
 <a id="button-{ name }" class="btn" class:float-left={left}
-   href="{ url || 'javascript:void(0)' }" role="button">
+   href="{ url || 'javascript:void(0)' }" role="button" on:click>
   <span class="button-circle">
     {#if icon }
       <Icon {icon} />

src/data/budget.js

@@ -17,8 +17,12 @@ const addCategoryToBudget = (categoryUuid, budgeted) => {
   })
 }
 
-export const getBudgetedFor = uuid => {
-  let budgetCategory = get(budgetStore)[uuid] || {}
+export const getBudgetDataFor = categoryUuid => {
+  return get(budgetStore)[categoryUuid] || {}
+}
+
+export const getBudgetedFor = categoryUuid => {
+  let budgetCategory = getBudgetDataFor(categoryUuid)
   return budgetCategory.budgeted || 0
 }
 
@@ -55,6 +59,13 @@ export const sortBudgetByCategory = (budget, categories) => {
   return list.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
 }
 
+export const subtractAmountFromBudgetCategory = (categoryUuid, amountToSubtract) => {
+  const budgetCategory = getBudgetDataFor(categoryUuid)
+  const oldRemaining = budgetCategory.remaining || 0
+  const newRemaining = oldRemaining - amountToSubtract
+  updateBudget(categoryUuid, { remaining: newRemaining })
+}
+
 export const updateBudget = (categoryUuid, changes) => {
   updateInObject(categoryUuid, changes, budgetStore)
   saveBudget()

src/data/transactions.js

@@ -2,6 +2,7 @@ import { addToList, updateInList } from '../helpers/data-store-helpers'
 import { getListFromStorage, saveToStorage } from './storage'
 import { get, writable } from 'svelte/store'
 import { v4 as uuidv4 } from 'uuid'
+import { subtractAmountFromBudgetCategory } from './budget'
 
 const TRANSACTIONS = 'transactions'
 
@@ -29,3 +30,16 @@ export const updateTransaction = (uuid, changes) => {
   updateInList('uuid', uuid, changes, transactions)
   saveTransactions()
 }
+
+export const applyTransaction = (uuid) => {
+  const transaction = getTransactionFrom(uuid, get(transactions))
+  if (transaction.applied) {
+    throw new Error('Already applied this one!') // TEMP
+  }
+  const categoryAmounts = transaction.categoryAmounts || {}
+  for (const categoryUuid in categoryAmounts) {
+    const categoryAmount = categoryAmounts[categoryUuid] || 0
+    subtractAmountFromBudgetCategory(categoryUuid, categoryAmount)
+  }
+  updateTransaction(uuid, { applied: true })
+}

src/views/ExpenseReview.svelte

@@ -4,7 +4,7 @@ import ButtonRow from '../components/ButtonRow.svelte'
 import CategoryTags from '../components/CategoryTags.svelte'
 import { accounts, getAccountFrom } from '../data/accounts'
 import { categories, getCategoryFrom } from '../data/categories'
-import { getTransactionFrom, transactions, updateTransaction } from '../data/transactions'
+import { applyTransaction, getTransactionFrom, transactions, updateTransaction } from '../data/transactions'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { formatDateISO8601 } from "../helpers/dates";
 import { formatAmount } from "../helpers/numbers";
@@ -18,6 +18,11 @@ $: account = getAccountFrom(transaction.accountUuid, $accounts)
 $: accountName = account.name || ''
 $: amountTotal = transaction.amountTotal || 0
 
+function onDone() {
+  applyTransaction(uuid)
+  push(`/budget`)
+}
+
 function setComment(event) {
   let comment = event.detail
   updateTransaction(uuid, { comment })
@@ -58,5 +63,5 @@ const setTimestamp = event => {
 </div>
 
 <ButtonRow>
-  <Button icon={faHome} name="done" url="#/budget" />
+  <Button icon={faHome} name="done" on:click={onDone} />
 </ButtonRow>