Implement creating new budgets

frontend/src/components/budget-add.ts

@@ -1,52 +1,84 @@
 import { LitElement, html } from 'lit-element'
 
-const INPUT_ID = 'new-budget-uuid'
+export class JoinBudgetEvent extends CustomEvent<{ uuid: string }> { }
 
-export class AddBudgetEvent extends CustomEvent<{ uuid: string }> { }
+export class CreateBudgetEvent extends CustomEvent<{ amount: number, currency: string }> { }
 
 class BudgetAddComponent extends LitElement {
-  hasError: boolean
+  hasCreateError: boolean
+  hasJoinError: boolean
 
   static get properties() {
     return {
-      hasError: { type: String }
+      hasCreateError: { type: Boolean },
+      hasJoinError: { type: Boolean }
     }
   }
 
   constructor() {
     super()
 
-    this.hasError = false
+    this.hasCreateError = false
+    this.hasJoinError = false
   }
 
-  onSubmit(e: Event) {
+  onCreate(e: Event) {
+    e.preventDefault()
     const root = <ShadowRoot>this.shadowRoot
-    const inputEl = <HTMLInputElement>root.getElementById(INPUT_ID)
+    const amountInputEl = <HTMLInputElement>root.getElementById('create-budget-amount')
+    const currencyInputEl = <HTMLInputElement>root.getElementById('create-budget-currency')
 
-    const success = this.dispatchEvent(new AddBudgetEvent(
-      'addBudget',
+    const amount = parseInt(amountInputEl.value)
+    if (isNaN(amount)) {
+      this.hasCreateError = true
+      return
+    }
+
+    this.dispatchEvent(new CreateBudgetEvent(
+      'createBudget',
+      { detail: { amount, currency: currencyInputEl.value } }
+    ))
+
+    amountInputEl.value = ''
+    currencyInputEl.value = ''
+  }
+
+  onJoin(e: Event) {
+    e.preventDefault()
+    const root = <ShadowRoot>this.shadowRoot
+    const inputEl = <HTMLInputElement>root.getElementById('join-budget-uuid')
+
+    this.dispatchEvent(new JoinBudgetEvent(
+      'joinBudget',
       { detail: { uuid: inputEl.value } }
     ));
 
-    e.preventDefault()
     inputEl.value = ''
   }
 
   render() {
     return html`
-      <h2>Join a budget</h2>
-      <form @submit=${this.onSubmit}>
+      <h2>Create a budget…</h2>
+      <form @submit=${this.onCreate}>
+        <input id="create-budget-amount" type="number" required />
+        <input id="create-budget-currency" type="text" placeholder="Currency (3 chars)" pattern="[A-Z]{3}" required />
+        <button type="submit">Create budget</button>
+        ${this.hasCreateError ? html`<p>Could not create budget, check the amount and currency.</p>` : null}
+      </form>
+
+      <h2>… or join existing budget</h2>
+      <form @submit=${this.onJoin}>
         <p>Add below the budget secret that you can get from the person who created the budget.</p>
         <input
-          id="${INPUT_ID}"
+          id="join-budget-uuid"
           type="text"
           placeholder="aaaaaaaa-bbbb-4ccc-9ddd-ffffffffffff"
           maxlength="36"
           pattern="[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-4[0-9A-Fa-f]{3}-[89ABab][0-9A-Fa-f]{3}-[0-9A-Fa-f]{12}"
           required
         />
-        <button type="submit">Add budget</button>
-        ${this.hasError ? html`<p>Could not add given budget, please check it is correctly typed.</p>` : undefined}
+        <button type="submit">Join budget</button>
+        ${this.hasJoinError ? html`<p>Could not add given budget, please check it is correctly typed.</p>` : null}
       </form>
     `
   }

frontend/src/components/week-budget.ts

@@ -1,22 +1,24 @@
 import { LitElement, html } from 'lit-element'
 import { Budget } from '../services/models/budget'
-import { AddBudgetEvent } from './budget-add'
+import { CreateBudgetEvent, JoinBudgetEvent } from './budget-add'
 import './budget-add'
 import './budget-list'
 import { readBudget, readEvent } from '../services/readers'
-import { getBudget, GetError, addEvent, resetBudget } from '../services/api'
+import { getBudget, GetError, addEvent, resetBudget, createBudget, CreationError } from '../services/api'
 import { getFromLocal, storeToLocal } from '../services/storage'
 import { SpendMoneyEvent, ResetBudgetEvent, RemoveBudgetEvent } from './budget-display'
 import { ETIME } from 'constants';
 
 class WeekBudgetComponent extends LitElement {
   budgets: Budget[] = []
-  hasAddError: boolean = false
+  hasCreateError: boolean = false
+  hasJoinError: boolean = false
 
   static get properties() {
     return {
       budgets: { type: Array },
-      hasAddError: { type: Boolean }
+      hasCreateError: { type: Boolean },
+      hasJoinError: { type: Boolean }
     }
   }
 
@@ -33,8 +35,24 @@ class WeekBudgetComponent extends LitElement {
     }
   }
 
-  async onAddBudget(e: AddBudgetEvent) {
-    this.hasAddError = false
+  async onCreateBudget(e: CreateBudgetEvent) {
+    this.hasCreateError = false
+
+    try {
+      const budget = await createBudget(e.detail.amount, e.detail.currency)
+      const budgetObj = readBudget(budget)
+      this.budgets = [...this.budgets, budgetObj]
+      storeToLocal(this.budgets)
+    }
+    catch (err) {
+      if (err instanceof CreationError) {
+        this.hasCreateError = true
+      }
+    }
+  }
+
+  async onJoinBudget(e: JoinBudgetEvent) {
+    this.hasJoinError = false
 
     try {
       const budget = await this._getBudget(e.detail.uuid)
@@ -43,7 +61,7 @@ class WeekBudgetComponent extends LitElement {
     }
     catch (err) {
       if (err instanceof GetError) {
-        this.hasAddError = true
+        this.hasJoinError = true
       }
     }
   }
@@ -100,7 +118,12 @@ class WeekBudgetComponent extends LitElement {
         @removeBudget=${this.onRemoveBudget}
         .budgets=${this.budgets}
       ></budget-list>
-      <budget-add @addBudget=${this.onAddBudget} .hasError=${this.hasAddError}></budget-add>
+      <budget-add
+        @createBudget=${this.onCreateBudget}
+        @joinBudget=${this.onJoinBudget}
+        .hasCreateError=${this.hasCreateError}
+        .hasJoinError=${this.hasJoinError}
+      ></budget-add>
     `
   }