Merge pull request #17 from forevermatt/develop

Release 0.8.0

README.md

@@ -14,7 +14,7 @@ https://forevermatt.github.io/svelte-budget/
 - [x] Edit a category
 - [x] Add a financial account
 - [x] Add nicer buttons (with icons)
-- [ ] Edit a financial account
+- [x] 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
@@ -32,6 +32,7 @@ https://forevermatt.github.io/svelte-budget/
 - [ ] 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
+- [x] Setup collaborator
 - [ ] ...
 
 ## Data Structure

src/data/transactions.js

@@ -14,6 +14,12 @@ export const startNewPendingTransaction = transactionData => {
   transactionInProgress.set(transaction)
 }
 
+export const getTransactionsForAccount = accountUuid => {
+  return get(transactions).filter(transaction => {
+    return transaction.accountUuid === accountUuid
+  })
+}
+
 export const getTransactionsForCategory = categoryUuid => {
   return get(transactions).filter(transaction => {
     const categoryAmounts = transaction.categoryAmounts || {}

src/views/AccountView.svelte

@@ -0,0 +1,48 @@
+<script>
+import { accounts, updateAccount } from '../data/accounts'
+import { getTransactionsForAccount } from '../data/transactions'
+import Button from '../components/Button.svelte'
+import ButtonRow from '../components/ButtonRow.svelte'
+import TransactionList from '../components/TransactionList.svelte'
+import Icon from 'fa-svelte'
+import { faEdit, faListUl } from '@fortawesome/free-solid-svg-icons'
+
+export let params = {} // URL parameters provided by router
+
+$: uuid = params.uuid || ''
+$: account = $accounts.find(account => account.uuid === uuid) || {}
+$: transactions = getTransactionsForAccount(uuid)
+
+const renameAccount = () => {
+  let name = prompt('Edit account name:', account.name)
+  if (name != null) {
+    updateAccount(uuid, {name})
+  }
+}
+</script>
+
+<style>
+a {
+  color: #337ab7;
+  font-weight: bold;
+}
+
+a:focus,
+a:hover {
+  color: #111;
+}
+</style>
+
+<h2>
+  <span>{ account.name }</span>
+  <a class="float-right" tabindex="0"
+     href="javascript:void(0)" on:click={renameAccount}>
+    <Icon icon={faEdit} />
+  </a>
+</h2>
+<hr class="small" />
+<TransactionList {transactions} />
+
+<ButtonRow>
+  <Button icon={faListUl} name="accounts" url="#/accounts" left />
+</ButtonRow>

src/views/Accounts.svelte

@@ -7,11 +7,11 @@ import { faHome } from '@fortawesome/free-solid-svg-icons'
 
 <h2>Accounts</h2>
 
-<ul>
-  {#each $accounts as account}
-    <li>{account.name}</li>
-  {/each}
-</ul>
+{#each $accounts as { name, uuid }}
+  <p>
+    <a href="#/account/{ uuid }" class="btn btn-outline-secondary">{ name }</a>
+  </p>
+{/each}
 
 <p><a href="#/account/new">Add new account</a></p>
 

src/views/routes.js

@@ -1,5 +1,6 @@
 import AccountNew from './AccountNew.svelte'
 import Accounts from './Accounts.svelte'
+import AccountView from './AccountView.svelte'
 import Budget from './Budget.svelte'
 import CategoryAmount from './CategoryAmount.svelte'
 import CategoryNew from './CategoryNew.svelte'
@@ -18,6 +19,7 @@ const routes = {
   '/': Home,
   '/account/new': AccountNew,
   '/accounts': Accounts,
+  '/account/:uuid': AccountView,
   '/budget': Budget,
   '/category/new': CategoryNew,
   '/category/:uuid': CategoryView,