Add renaming of budgets feature

frontend/src/components/budget-display.ts

@@ -8,6 +8,8 @@ export class ResetBudgetEvent extends CustomEvent<{ budget: Budget, amount: numb
 
 export class RemoveBudgetEvent extends CustomEvent<{ budget: Budget }> { }
 
+export class RenameBudgetEvent extends CustomEvent<{ budget: Budget, name: string }> { }
+
 class BudgetDisplayComponent extends LitElement {
   budget: Budget
   showShare: boolean
@@ -50,6 +52,19 @@ class BudgetDisplayComponent extends LitElement {
     ))
   }
 
+  onRename() {
+    const newName = prompt('Give new name for budget')
+
+    if (newName == null) {
+      return
+    }
+
+    this.dispatchEvent(new RenameBudgetEvent(
+      'renameBudget',
+      { detail: { budget: this.budget, name: newName }, bubbles: true, composed: true }
+    ))
+  }
+
   onRemove() {
     if (!confirm('Do you really wish to remove the budget?')) {
       return
@@ -70,13 +85,15 @@ class BudgetDisplayComponent extends LitElement {
     }
 
     return html`
-      <h3>${this.budget.uuid}</h3>
+      <h3>${this.budget.name != '' ? this.budget.name : 'Unnamed budget'}</h3>
+      <h4>${this.budget.uuid}</h4>
       <p>${this.budget.amount.toFixed(2)} ${this.budget.currency} left of ${this.budget.init.toFixed(2)} ${this.budget.currency}</p>
       <ul>
         ${this.budget.events.map(event => html`<li>${event.at.toISOString()}: ${event.amount.toFixed(2)}</li>`)}
       </ul>
       <button type="button" @click=${this.onSpendMoney}>Spend money</button>
       <button type="button" @click=${this.onReset}>Reset</button>
+      <button type="button" @click=${this.onRename}>Rename</button>
       <button type="button" @click=${this.toggleShare}>Share</button>
       <button type="button" @click=${this.onRemove}>Remove</button>
 

frontend/src/components/week-budget.ts

@@ -6,7 +6,7 @@ import './budget-list'
 import { readBudget, readEvent } from '../services/readers'
 import { getBudget, GetError, addEvent, resetBudget, createBudget, CreationError } from '../services/api'
 import { getFromLocal, storeToLocal } from '../services/storage'
-import { SpendMoneyEvent, ResetBudgetEvent, RemoveBudgetEvent } from './budget-display'
+import { SpendMoneyEvent, ResetBudgetEvent, RemoveBudgetEvent, RenameBudgetEvent } from './budget-display'
 
 class WeekBudgetComponent extends LitElement {
   budgets: Budget[] = []
@@ -22,11 +22,13 @@ class WeekBudgetComponent extends LitElement {
   }
 
   async firstUpdated() {
-    const uuids = getFromLocal()
-    for (const uuid of uuids) {
+    const budgets = getFromLocal()
+    for (const { uuid, name } of budgets) {
       try {
         const budget = await this._getBudget(uuid)
-        this.budgets = [...this.budgets, budget]
+        const budgetCopy = budget.copy()
+        budgetCopy.name = name || ''
+        this.budgets = [...this.budgets, budgetCopy]
       }
       catch (err) {
         console.error(err)
@@ -100,6 +102,18 @@ class WeekBudgetComponent extends LitElement {
     }
   }
 
+  async onRenameBudget(e: RenameBudgetEvent) {
+    const budgetIdx = this.budgets.findIndex(b => b.uuid === e.detail.budget.uuid)
+    const budgetObj = this.budgets[budgetIdx].copy()
+    budgetObj.name = e.detail.name
+    budgetObj.makeImmutable()
+
+    const budgetsCopy = [...this.budgets]
+    budgetsCopy.splice(budgetIdx, 1, budgetObj)
+    this.budgets = budgetsCopy
+    storeToLocal(this.budgets)
+  }
+
   async onRemoveBudget(e: RemoveBudgetEvent) {
     const budgetIdx = this.budgets.findIndex(b => b.uuid === e.detail.budget.uuid)
     const budgetsCopy = [...this.budgets]
@@ -114,6 +128,7 @@ class WeekBudgetComponent extends LitElement {
       <budget-list
         @spendMoney=${this.onSpendMoney}
         @resetBudget=${this.onResetBudget}
+        @renameBudget=${this.onRenameBudget}
         @removeBudget=${this.onRemoveBudget}
         .budgets=${this.budgets}
       ></budget-list>

frontend/src/services/models/budget.ts

@@ -7,8 +7,9 @@ export class Budget extends ImmutableModel {
   init: number
   amount: number
   events: BudgetEvent[]
+  name: string
 
-  constructor(uuid: string, currency: string, init: number, amount: number, events: Array<BudgetEvent>) {
+  constructor(uuid: string, currency: string, init: number, amount: number, events: Array<BudgetEvent>, name: string) {
     super()
 
     this.uuid = uuid
@@ -16,6 +17,7 @@ export class Budget extends ImmutableModel {
     this.init = init
     this.amount = amount
     this.events = events
+    this.name = name
   }
 
   copy(): Budget {
@@ -24,7 +26,8 @@ export class Budget extends ImmutableModel {
       this.currency,
       this.init,
       this.amount,
-      this.events
+      this.events,
+      this.name
     )
   }
 }

frontend/src/services/readers.ts

@@ -19,6 +19,7 @@ export function readBudget(data: APIBudget): Budget {
     data.currency,
     data.init,
     data.amount,
-    events
+    events,
+    data.name || ''
   )
 }

frontend/src/services/storage.ts

@@ -3,11 +3,11 @@ import { Budget } from './models/budget'
 const LS_KEY = 'tinybudget-budgets'
 
 export function storeToLocal(budgets: Budget[]) {
-  const uuids = budgets.reduce((acc: string[], val) => [...acc, val.uuid], [])
-  window.localStorage.setItem(LS_KEY, JSON.stringify(uuids))
+  const data = budgets.reduce((acc: string[], b) => [...acc, { uuid: b.uuid, name: b.name }], [])
+  window.localStorage.setItem(LS_KEY, JSON.stringify(data))
 }
 
-export function getFromLocal(): string[] {
-  const uuids = window.localStorage.getItem(LS_KEY) || '[]'
-  return JSON.parse(uuids)
+export function getFromLocal(): { uuid: string, name: string }[] {
+  const data = window.localStorage.getItem(LS_KEY) || '[]'
+  return JSON.parse(data)
 }

frontend/src/services/typings.ts

@@ -8,5 +8,6 @@ export type APIBudget = {
   init: number,
   amount: number,
   events: Array<APIEvent>,
-  currency: string
+  currency: string,
+  name?: string // Name only exists when interfacing with localstorage
 }