Merge pull request #14 from forevermatt/develop

Release 0.7.0

README.md

@@ -24,11 +24,14 @@ https://forevermatt.github.io/svelte-budget/
       when creating a new transaction and when editing an existing transaction)
 - [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
+- [x] 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
+- [ ] Handle page reloads in the middle of the add-expense process (which
+      loses the timestamp, for example)
+- [ ] Add a data-breadcrumb trail as they enter data for a new transaction
 - [ ] ...
 
 ## Data Structure
@@ -41,4 +44,4 @@ https://github.com/forevermatt/budget-data specification.
 ### Icons
 
 The list of icons available in the library I'm using can be found here:
-https://fontawesome.com/icons?d=gallery
+https://fontawesome.com/icons?d=gallery&s=solid&m=free

src/components/AmountInput.svelte

@@ -3,19 +3,25 @@ import { getNumericCharFrom, isBackspace, isPrintable } from '../helpers/charact
 import { createEventDispatcher, onMount } from 'svelte';
 
 export let amount = 0
+export let resultingAmount = 0
 
 const dispatch = createEventDispatcher();
 
 let inputField
 let numeralsEntered = []
-let resultingAmount = null
+
+$: recordAndShowAmount(amount)
 
 onMount(() => {
+  recordAndShowAmount(amount)
+  inputField.focus();
+})
+
+const recordAndShowAmount = amount => {
   numeralsEntered = getNumeralsFromAmount(amount)
   showNumerals(numeralsEntered)
   recordAmount(Number(numeralsEntered.join('')))
-  inputField.focus();
-})
+}
 
 function getNumeralsFromAmount(value) {
   if ( ! value) {
@@ -47,7 +53,9 @@ function showNumerals(numerals) {
     text = '0' + text;
   }
 
-  inputField.value = text;
+  if (inputField) {
+    inputField.value = text;
+  }
 }
 
 function recordAmount(amount) {

src/components/Button.svelte

@@ -1,7 +1,7 @@
 <script>
 import Icon from 'fa-svelte'
 
-export let icon
+export let icon // See README for URL to gallery of available icons.
 export let name
 export let left = false
 export let url = ''

src/helpers/dates.js

@@ -1,15 +1,26 @@
 
 export const formatDate = timestamp => (new Date(timestamp)).toLocaleDateString()
 
+/**
+ * Format the given timestamp as a yyyy-mm-dd date, per ISO-8601. If no
+ * timestamp is given, returns an empty string.
+ *
+ * @param timestamp
+ * @returns {string}
+ */
 export const formatDateISO8601 = timestamp => {
-  let date = new Date(timestamp)
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
+  if (timestamp) {
+    let date = new Date(timestamp)
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
 
-  const monthString = String(month).padStart(2, '0')
-  const dayString = String(day).padStart(2, '0')
-  return `${year}-${monthString}-${dayString}`
+    const monthString = String(month).padStart(2, '0')
+    const dayString = String(day).padStart(2, '0')
+    return `${year}-${monthString}-${dayString}`
+  } else {
+    return ''
+  }
 }
 
 export const getCurrentYearMonthString = () => {

src/views/CategoryAmount.svelte

@@ -1,22 +1,31 @@
 <script>
 import AmountInput from '../components/AmountInput.svelte'
+import Button from '../components/Button.svelte'
+import ButtonRow from '../components/ButtonRow.svelte'
 import { getBudgetedFor, setBudgetedForCategory } from '../data/budget'
 import { categories } from '../data/categories'
+import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { push } from 'svelte-spa-router'
 
 export let params // URL parameters provider by router.
 
 $: uuid = params.uuid
 $: category = $categories.find(category => category.uuid === uuid) || {}
-$: initialAmount = getBudgetedFor(uuid) || 0
+$: initialAmount = category && getBudgetedFor(uuid) || 0
 
-function onSubmit(event) {
-  let amount = event.detail
-  setBudgetedForCategory(uuid, amount)
+let resultingAmount = 0
+
+const onAmount = () => {
+  setBudgetedForCategory(uuid, resultingAmount)
   push(`/budget`)
 }
 </script>
 
-<h2>Amount for {category.name}</h2>
+<h2>Monthly amount for {category.name}</h2>
+
+<AmountInput amount={initialAmount} on:next={onAmount} bind:resultingAmount={resultingAmount} />
 
-<AmountInput amount={initialAmount} on:next={onSubmit} />
+<ButtonRow>
+  <Button icon={faCheck} name="save" on:click={onAmount} />
+  <Button icon={faTimes} name="cancel" url="#/budget" left />
+</ButtonRow>

src/views/ExpenseAmount.svelte

@@ -3,22 +3,24 @@ import AmountInput from '../components/AmountInput.svelte'
 import Button from '../components/Button.svelte'
 import ButtonRow from '../components/ButtonRow.svelte'
 import { transactionInProgress, updatePendingTransaction } from '../data/transactions'
-import { faHome } from '@fortawesome/free-solid-svg-icons'
+import { faArrowRight, faHome } from '@fortawesome/free-solid-svg-icons'
 import { push } from 'svelte-spa-router'
 
 $: transaction = $transactionInProgress
 
-function onSubmit(event) {
-  let amount = event.detail
-  updatePendingTransaction({ amountTotal: amount })
+let amountTotal = 0
+
+const onAmount = () => {
+  updatePendingTransaction({ amountTotal })
   push(`/expense/category/`)
 }
 </script>
 
 <h2>Amount paid to {transaction.who}</h2>
 
-<AmountInput on:next={onSubmit} />
+<AmountInput on:next={onAmount} bind:resultingAmount={amountTotal} />
 
 <ButtonRow>
+  <Button icon={faArrowRight} name="next" on:click={onAmount} />
   <Button icon={faHome} name="budget" url="#/budget" left />
 </ButtonRow>

src/views/ExpenseWho.svelte

@@ -3,18 +3,20 @@ import WhoSelector from '../components/WhoSelector.svelte'
 import Button from '../components/Button.svelte'
 import ButtonRow from '../components/ButtonRow.svelte'
 import { updatePendingTransaction } from '../data/transactions'
-import { faHome } from '@fortawesome/free-solid-svg-icons'
+import { faArrowRight, faHome } from '@fortawesome/free-solid-svg-icons'
 import { push } from 'svelte-spa-router'
 
-const onSelect = event => {
-  const who = event.detail
+let who = ''
+
+const onWho = () => {
   updatePendingTransaction({ who })
   push(`/expense/account/`)
 }
 </script>
 
-<WhoSelector on:select={onSelect} title="Paid to:" />
+<WhoSelector on:select={onWho} title="Paid to:" bind:who={who} />
 
 <ButtonRow>
+  <Button icon={faArrowRight} name="next" on:click={onWho} />
   <Button icon={faHome} name="budget" url="#/budget" left />
 </ButtonRow>