Implement budget editing

Well, partially at least. I still need to get around to the user management features

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { LoginComponent } from './users/login/login.component';
 import { RegisterComponent } from './users/register/register.component';
 import { BudgetsComponent } from './budgets/budget.component';
 import { NewBudgetComponent } from './budgets/new-budget/new-budget.component';
+import { EditBudgetComponent } from './budgets/edit-budget/edit-budget.component';
 import { BudgetDetailsComponent } from './budgets/budget-details/budget-details.component';
 import { EditCategoryComponent } from './categories/edit-category/edit-category.component';
 
@@ -20,6 +21,7 @@ const routes: Routes = [
   { path: 'budgets', component: BudgetsComponent },
   { path: 'budgets/new', component: NewBudgetComponent },
   { path: 'budgets/:id', component: BudgetDetailsComponent },
+  { path: 'budgets/:id/edit', component: EditBudgetComponent },
   { path: 'budgets/:budgetId/transactions', component: TransactionsComponent },
   { path: 'budgets/:budgetId/transactions/new', component: NewTransactionComponent },
   { path: 'budgets/:budgetId/transactions/:id', component: TransactionDetailsComponent },

src/app/app.module.ts

@@ -49,6 +49,7 @@ import { TwigsLocalService } from './shared/twigs.local.service';
 import { CookieService } from 'ngx-cookie-service';
 import { TransactionListComponent } from './transactions/transaction-list/transaction-list.component';
 import { EditCategoryComponent } from './categories/edit-category/edit-category.component';
+import { EditBudgetComponent } from './budgets/edit-budget/edit-budget.component';
 
 export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
   align: 'left',
@@ -83,6 +84,7 @@ export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
     CategoryBreakdownComponent,
     TransactionListComponent,
     EditCategoryComponent,
+    EditBudgetComponent,
   ],
   imports: [
     BrowserModule,

src/app/budgets/add-edit-budget/add-edit-budget.component.ts

@@ -22,17 +22,17 @@ export class AddEditBudgetComponent {
     ) {
         this.app.setTitle(this.title)
         this.app.setBackEnabled(true);
-        this.users = [new UserPermission(this.app.user.value.id, Permission.OWNER)];
+        this.users = [new UserPermission(this.app.user.value, Permission.OWNER)];
     }
 
     save(): void {
         let observable;
         this.isLoading = true;
         if (this.budget.id) {
-            // This is an existing transaction, update it
+            // This is an existing budget, update it
             observable = this.twigsService.updateBudget(this.budget.id, this.budget);
         } else {
-            // This is a new transaction, save it
+            // This is a new budget, save it
             observable = this.twigsService.createBudget(
                 this.budget.name,
                 this.budget.description,

src/app/budgets/budget-details/budget-details.component.css

@@ -70,6 +70,17 @@ a.view-all {
   top: 0.5em;
 }
 
+@media (min-width: 1160px) {
+  mat-card {
+    box-sizing: border-box;
+    height: 386px;
+  }
+
+  app-category-list {
+    overflow: auto;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .dashboard {
     color: #F1F1F1;

src/app/budgets/budget-details/budget-details.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
 import { Budget } from '../budget';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AppComponent } from 'src/app/app.component';
 import { Transaction } from 'src/app/transactions/transaction';
 import { Category } from 'src/app/categories/category';
@@ -8,13 +8,14 @@ import { Observable } from 'rxjs';
 import { Label } from 'ng2-charts';
 import { ChartDataSets } from 'chart.js';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
+import { Actionable } from '../../shared/actionable';
 
 @Component({
   selector: 'app-budget-details',
   templateUrl: './budget-details.component.html',
   styleUrls: ['./budget-details.component.css']
 })
-export class BudgetDetailsComponent implements OnInit {
+export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
 
   budget: Budget;
   public transactions: Transaction[];
@@ -35,14 +36,20 @@ export class BudgetDetailsComponent implements OnInit {
     private app: AppComponent,
     private route: ActivatedRoute,
     @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
+    private router: Router,
   ) { }
 
   ngOnInit() {
     this.getBudget();
     this.app.setBackEnabled(false);
+    this.app.setActionable(this)
     this.categoryBalances = new Map();
   }
 
+  ngOnDestroy() {
+    this.app.setActionable(null)
+  }
+
   getBudget() {
     const id = Number.parseInt(this.route.snapshot.paramMap.get('id'));
     this.twigsService.getBudget(id)
@@ -159,4 +166,12 @@ export class BudgetDetailsComponent implements OnInit {
       });
     });
   }
+
+  doAction(): void {
+    this.router.navigateByUrl(this.router.routerState.snapshot.url + "/edit")
+  }
+
+  getActionLabel(): string { 
+    return "Edit";
+  }
 }

src/app/budgets/budget.ts

@@ -1,8 +1,8 @@
-import { User } from '../users/user';
+import { UserPermission } from '../users/user';
 
 export class Budget {
     id: number;
     name: string;
     description: string;
-    users: User[];
+    users: UserPermission[];
 }

src/app/budgets/edit-budget/edit-budget.component.html

@@ -0,0 +1 @@
+<app-add-edit-budget [title]="'Edit Budget'" [budget]="budget"></app-add-edit-budget>

src/app/budgets/edit-budget/edit-budget.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditBudgetComponent } from './edit-budget.component';
+
+describe('EditBudgetComponent', () => {
+  let component: EditBudgetComponent;
+  let fixture: ComponentFixture<EditBudgetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditBudgetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditBudgetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/budgets/edit-budget/edit-budget.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TwigsService, TWIGS_SERVICE } from '../../shared/twigs.service';
+import { Budget } from '../budget';
+
+@Component({
+  selector: 'app-edit-budget',
+  templateUrl: './edit-budget.component.html',
+  styleUrls: ['./edit-budget.component.css']
+})
+export class EditBudgetComponent implements OnInit {
+
+  budget: Budget;
+  
+  constructor(
+    private route: ActivatedRoute,
+    @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
+  ) { }
+
+  ngOnInit(): void {
+    const id = Number.parseInt(this.route.snapshot.paramMap.get('id'));
+    this.twigsService.getBudget(id)
+      .subscribe(budget => {
+        this.budget = budget;
+      });
+  }
+}

src/app/shared/twigs.http.service.ts

@@ -68,10 +68,10 @@ export class TwigsHttpService implements TwigsService {
     const params = {
       'name': name,
       'description': description,
-      'users': users.map(user => {
+      'users': users.map(userPermission => {
         return {
-          user: user.user,
-          permission: Permission[user.permission]
+          user: userPermission.user.id,
+          permission: Permission[userPermission.permission]
         };
       })
     };
@@ -79,7 +79,18 @@ export class TwigsHttpService implements TwigsService {
   }
 
   updateBudget(id: number, changes: object): Observable<Budget> {
-    return this.http.put<Budget>(`${this.apiUrl}/budgets/${id}`, changes, this.options);
+    let budget = changes as Budget;
+    const params = {
+      'name': budget.name,
+      'description': budget.description,
+      'users': budget.users.map(userPermission => {
+        return {
+          user: userPermission.user.id,
+          permission: Permission[userPermission.permission]
+        };
+      })
+    };
+    return this.http.put<Budget>(`${this.apiUrl}/budgets/${id}`, params, this.options);
   }
 
   deleteBudget(id: number): Observable<void> {

src/app/shared/twigs.local.service.ts

@@ -88,9 +88,7 @@ export class TwigsLocalService implements TwigsService {
       const budget = new Budget();
       budget.name = name;
       budget.description = description;
-      budget.users = this.users.filter(user => {
-        return users.map(userPerm => userPerm.user).indexOf(user.id) > -1;
-      });
+      budget.users = users;
       budget.id = this.budgets.length + 1;
       this.budgets.push(budget);
       subscriber.next(budget);
@@ -111,13 +109,9 @@ export class TwigsLocalService implements TwigsService {
           [
             'name',
             'description',
+            'users',
           ]
         );
-        if (changes['userIds']) {
-          budget.users = this.users.filter(user => {
-            return changes['userIds'].indexOf(user.id) > -1;
-          });
-        }
         this.budgets[index] = budget;
         subscriber.next(budget);
       } else {

src/app/users/user.ts

@@ -11,10 +11,10 @@ export class User {
 }
 
 export class UserPermission {
-  user: number;
+  user: User;
   permission: Permission;
 
-  constructor(user: number, permission: Permission) {
+  constructor(user: User, permission: Permission) {
     this.user = user;
     this.permission = permission;
   }