Merge pull request #13 from forevermatt/develop

Release 0.6.0

README.md

@@ -19,10 +19,10 @@ https://forevermatt.github.io/svelte-budget/
 - [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
+- [x] 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
+- [x] 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

src/components/TransactionList.svelte

@@ -0,0 +1,18 @@
+<script>
+import { formatDate } from '../helpers/dates'
+import { formatAmount } from '../helpers/numbers'
+
+export let transactions = []
+</script>
+
+{#each transactions as { amountTotal, timestamp, who }}
+  <div class="row">
+    <div class="col-2 text-center">{ formatDate(timestamp) }</div>
+    <div class="col-7">{ who }</div>
+    <div class="col-3 text-right">
+      <sup>$</sup>{ formatAmount(amountTotal) }
+    </div>
+  </div>
+{:else}
+  <i>No matching transactions found.</i>
+{/each}

src/data/transactions.js

@@ -7,13 +7,18 @@ import { subtractAmountFromBudgetCategory } from './budget'
 const TRANSACTIONS = 'transactions'
 
 export const transactions = writable([])
+export const transactionInProgress = writable({})
 
-export const createTransaction = transactionData => {
-  const uuid = uuidv4()
-  const transaction = Object.assign({}, transactionData, {uuid})
-  addToList(transaction, transactions)
-  saveTransactions()
-  return transaction
+export const startNewPendingTransaction = transactionData => {
+  const transaction = Object.assign({}, transactionData)
+  transactionInProgress.set(transaction)
+}
+
+export const getTransactionsForCategory = categoryUuid => {
+  return get(transactions).filter(transaction => {
+    const categoryAmounts = transaction.categoryAmounts || {}
+    return categoryAmounts.hasOwnProperty(categoryUuid)
+  })
 }
 
 export const getTransactionFrom = (uuid, list) => {
@@ -24,22 +29,31 @@ export const loadTransactions = () => {
   transactions.set(getListFromStorage(TRANSACTIONS))
 }
 
-const saveTransactions = () => saveToStorage(TRANSACTIONS, get(transactions))
+export const savePendingTransaction = () => {
+  const transaction = get(transactionInProgress)
+  transaction.uuid = uuidv4()
 
-export const updateTransaction = (uuid, changes) => {
-  updateInList('uuid', uuid, changes, transactions)
+  addToList(transaction, 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 })
+
+  startNewPendingTransaction({})
+}
+
+const saveTransactions = () => saveToStorage(TRANSACTIONS, get(transactions))
+
+export const updateCompletedTransaction = (uuid, changes) => {
+  updateInList('uuid', uuid, changes, transactions)
+  saveTransactions()
+}
+
+export const updatePendingTransaction = (changes) => {
+  const pendingTransaction = get(transactionInProgress)
+  const updatedPendingTransaction = Object.assign({}, pendingTransaction, changes)
+  transactionInProgress.set(updatedPendingTransaction)
 }

src/views/CategoryView.svelte

@@ -1,18 +1,21 @@
 <script>
 import { getBudgetedFor } from '../data/budget'
 import { categories, updateCategory } from '../data/categories'
+import { getTransactionsForCategory } from '../data/transactions'
 import { formatAmount } from '../helpers/numbers'
 import Button from '../components/Button.svelte'
 import ButtonRow from '../components/ButtonRow.svelte'
+import TransactionList from '../components/TransactionList.svelte'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 
 export let params = {} // URL parameters provided by router
 
 $: uuid = params.uuid || ''
 $: category = $categories.find(category => category.uuid === uuid) || {}
+$: transactions = getTransactionsForCategory(uuid)
 
 const renameCategory = () => {
-  var name = prompt('Edit category name:', category.name)
+  let name = prompt('Edit category name:', category.name)
   if (name != null) {
     updateCategory(uuid, {name})
   }
@@ -33,6 +36,7 @@ const renameCategory = () => {
   </a>
 </h2>
 <hr class="small" />
+<TransactionList {transactions} />
 
 <ButtonRow>
   <Button icon={faHome} name="budget" url="#/budget" left />

src/views/ExpenseAccount.svelte

@@ -3,19 +3,14 @@ import AccountSelector from '../components/AccountSelector.svelte'
 import Button from '../components/Button.svelte'
 import ButtonRow from '../components/ButtonRow.svelte'
 import { accounts } from '../data/accounts'
-import { getTransactionFrom, transactions, updateTransaction } from '../data/transactions'
+import { updatePendingTransaction } from '../data/transactions'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { push } from 'svelte-spa-router'
 
-export let params // URL parameters provider by router.
-
-$: uuid = params.uuid
-$: transaction = getTransactionFrom(uuid, $transactions)
-
 function setAccount(event) {
   let accountUuid = event.detail
-  updateTransaction(uuid, { accountUuid })
-  push(`/expense/amount/${transaction.uuid}`)
+  updatePendingTransaction({ accountUuid })
+  push(`/expense/amount/`)
 }
 </script>
 

src/views/ExpenseAmount.svelte

@@ -2,19 +2,16 @@
 import AmountInput from '../components/AmountInput.svelte'
 import Button from '../components/Button.svelte'
 import ButtonRow from '../components/ButtonRow.svelte'
-import { getTransactionFrom, transactions, updateTransaction } from '../data/transactions'
+import { transactionInProgress, updatePendingTransaction } from '../data/transactions'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { push } from 'svelte-spa-router'
 
-export let params // URL parameters provider by router.
-
-$: uuid = params.uuid
-$: transaction = getTransactionFrom(uuid, $transactions)
+$: transaction = $transactionInProgress
 
 function onSubmit(event) {
   let amount = event.detail
-  updateTransaction(uuid, { amountTotal: amount })
-  push(`/expense/category/${transaction.uuid}`)
+  updatePendingTransaction({ amountTotal: amount })
+  push(`/expense/category/`)
 }
 </script>
 

src/views/ExpenseCategory.svelte

@@ -3,21 +3,16 @@ import Button from '../components/Button.svelte'
 import ButtonRow from '../components/ButtonRow.svelte'
 import CategorySelector from '../components/CategorySelector.svelte'
 import { categories } from '../data/categories'
-import { getTransactionFrom, transactions, updateTransaction } from '../data/transactions'
+import { transactionInProgress, updatePendingTransaction } from '../data/transactions'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { push } from 'svelte-spa-router'
 
-export let params // URL parameters provider by router.
-
-$: uuid = params.uuid
-$: transaction = getTransactionFrom(uuid, $transactions)
-
 function setCategory(event) {
   let categoryUuid = event.detail
   let categoryAmounts = {}
-  categoryAmounts[categoryUuid] = transaction.amountTotal
-  updateTransaction(uuid, { categoryAmounts })
-  push(`/expense/review/${transaction.uuid}`)
+  categoryAmounts[categoryUuid] = $transactionInProgress.amountTotal
+  updatePendingTransaction({ categoryAmounts })
+  push(`/expense/review/`)
 }
 </script>
 

src/views/ExpenseNew.svelte

@@ -1,9 +1,8 @@
 <script>
-import { createTransaction } from '../data/transactions'
+import { startNewPendingTransaction } from '../data/transactions'
 import { push } from 'svelte-spa-router'
 
-const transaction = createTransaction({
-  timestamp: Date.now(),
-})
-push(`/expense/who/${transaction.uuid}`)
+const timestamp = Date.now()
+startNewPendingTransaction({ timestamp })
+push(`/expense/who/`)
 </script>

src/views/ExpenseReview.svelte

@@ -4,44 +4,40 @@ 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 { applyTransaction, getTransactionFrom, transactions, updateTransaction } from '../data/transactions'
+import { savePendingTransaction, transactionInProgress, updatePendingTransaction } from '../data/transactions'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { formatDateISO8601 } from "../helpers/dates";
 import { formatAmount } from "../helpers/numbers";
 import { push } from 'svelte-spa-router'
 
-export let params // URL parameters provider by router.
-
-$: uuid = params.uuid
-$: transaction = getTransactionFrom(uuid, $transactions)
+$: transaction = $transactionInProgress
 $: account = getAccountFrom(transaction.accountUuid, $accounts)
 $: accountName = account.name || ''
 $: amountTotal = transaction.amountTotal || 0
 
 function onDone() {
-  applyTransaction(uuid)
+  savePendingTransaction()
   push(`/budget`)
 }
 
 function setComment(event) {
   let comment = event.detail
-  updateTransaction(uuid, { comment })
-  push(`/budget`)
+  updatePendingTransaction({ comment })
 }
 
 const setTimestamp = event => {
   let dateString = event.target.value
   let when = new Date(`${dateString} 12:00:00`)
-  updateTransaction(uuid, { timestamp: when.getTime() })
+  updatePendingTransaction({ timestamp: when.getTime() })
 }
 </script>
 
 <div class="row">
   <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3">
     <h2>Review Expense</h2>
     <p>
-      <a class="btn btn-outline-secondary" href="#/expense/who/{uuid}">{transaction.who}</a>
-      <a class="btn btn-outline-secondary float-right" href="#/expense/amount/{uuid}">
+      <a class="btn btn-outline-secondary" href="#/expense/who/">{transaction.who}</a>
+      <a class="btn btn-outline-secondary float-right" href="#/expense/amount/">
         ${formatAmount(amountTotal)}
       </a>
     </p>
@@ -50,7 +46,7 @@ const setTimestamp = event => {
     </p>
     <p>
       <b>Account:</b>
-      <a class="btn btn-outline-secondary float-right" href="#/expense/account/{uuid}">
+      <a class="btn btn-outline-secondary float-right" href="#/expense/account/">
         {accountName}
       </a>
     </p>

src/views/ExpenseWho.svelte

@@ -2,19 +2,14 @@
 import WhoSelector from '../components/WhoSelector.svelte'
 import Button from '../components/Button.svelte'
 import ButtonRow from '../components/ButtonRow.svelte'
-import { getTransactionFrom, transactions, updateTransaction } from '../data/transactions'
+import { updatePendingTransaction } from '../data/transactions'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { push } from 'svelte-spa-router'
 
-export let params // URL parameters provider by router.
-
-$: uuid = params.uuid
-$: transaction = getTransactionFrom(uuid, $transactions)
-
 const onSelect = event => {
   const who = event.detail
-  updateTransaction(uuid, { who })
-  push(`/expense/account/${transaction.uuid}`)
+  updatePendingTransaction({ who })
+  push(`/expense/account/`)
 }
 </script>
 

src/views/routes.js

@@ -22,12 +22,12 @@ const routes = {
   '/category/new': CategoryNew,
   '/category/:uuid': CategoryView,
   '/category/:uuid/amount': CategoryAmount,
-  '/expense/account/:uuid': ExpenseAccount,
-  '/expense/amount/:uuid': ExpenseAmount,
-  '/expense/category/:uuid': ExpenseCategory,
+  '/expense/account/': ExpenseAccount,
+  '/expense/amount/': ExpenseAmount,
+  '/expense/category/': ExpenseCategory,
   '/expense/new': ExpenseNew,
-  '/expense/review/:uuid': ExpenseReview,
-  '/expense/who/:uuid': ExpenseWho,
+  '/expense/review/': ExpenseReview,
+  '/expense/who/': ExpenseWho,
   '*': NotFound,
 }