Re-implement category editing

Signed-off-by: William Brawner <me@wbrawner.com>

src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import { RegisterComponent } from './users/register/register.component';
 import { BudgetsComponent } from './budgets/budget.component';
 import { NewBudgetComponent } from './budgets/new-budget/new-budget.component';
 import { BudgetDetailsComponent } from './budgets/budget-details/budget-details.component';
+import { EditCategoryComponent } from './categories/edit-category/edit-category.component';
 
 const routes: Routes = [
   { path: '', component: BudgetsComponent },
@@ -25,7 +26,7 @@ const routes: Routes = [
   { path: 'budgets/:budgetId/categories', component: CategoriesComponent },
   { path: 'budgets/:budgetId/categories/new', component: NewCategoryComponent },
   { path: 'budgets/:budgetId/categories/:id', component: CategoryDetailsComponent },
-  { path: 'budgets/:budgetId/categories/:id/edit', component: CategoryDetailsComponent },
+  { path: 'budgets/:budgetId/categories/:id/edit', component: EditCategoryComponent },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -24,6 +24,9 @@
       <span>
         {{ title }}
       </span>
+      <span class="action-item">
+        <a mat-button *ngIf="actionable" (click)="actionable.doAction()">{{ actionable.getActionLabel() }}</a>
+      </span>
     </mat-toolbar>
     <router-outlet></router-outlet>
   </mat-sidenav-content>

src/app/app.component.ts

@@ -4,8 +4,10 @@ import { User } from './users/user';
 import { TWIGS_SERVICE, TwigsService } from './shared/twigs.service';
 import { CookieService } from 'ngx-cookie-service';
 import { SwUpdate } from '@angular/service-worker';
-import { first } from 'rxjs/operators';
+import { first, filter, map } from 'rxjs/operators';
 import { interval, concat } from 'rxjs';
+import { Router, ActivationEnd } from '@angular/router';
+import { Actionable, isActionable } from './shared/actionable';
 
 @Component({
   selector: 'app-root',
@@ -18,13 +20,14 @@ export class AppComponent {
   public user: User;
   public online = window.navigator.onLine;
   public currentVersion = '';
+  public actionable: Actionable;
 
   constructor(
     @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
     private location: Location,
     private cookieService: CookieService,
     private appRef: ApplicationRef,
-    private updates: SwUpdate
+    private updates: SwUpdate,
   ) {
     if (this.cookieService.check('Authorization')) {
       this.twigsService.getProfile().subscribe(user => {

src/app/app.module.ts

@@ -47,6 +47,7 @@ import { TwigsHttpService } from './shared/twigs.http.service';
 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';
 
 export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
   align: 'left',
@@ -80,6 +81,7 @@ export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
     BudgetsComponent,
     CategoryBreakdownComponent,
     TransactionListComponent,
+    EditCategoryComponent,
   ],
   imports: [
     BrowserModule,

src/app/categories/category-details/category-details.component.ts

@@ -1,16 +1,17 @@
-import { Component, OnInit, Inject, ApplicationModule } from '@angular/core';
+import { Component, OnInit, Inject, ApplicationModule, OnDestroy } from '@angular/core';
 import { Category } from '../category';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { TWIGS_SERVICE, TwigsService } from '../../shared/twigs.service';
 import { Transaction } from '../../transactions/transaction';
 import { AppComponent } from '../../app.component';
+import { Actionable } from '../../shared/actionable';
 
 @Component({
   selector: 'app-category-details',
   templateUrl: './category-details.component.html',
   styleUrls: ['./category-details.component.css']
 })
-export class CategoryDetailsComponent implements OnInit {
+export class CategoryDetailsComponent implements OnInit, OnDestroy, Actionable {
 
   budgetId: number;
   category: Category;
@@ -20,13 +21,27 @@ export class CategoryDetailsComponent implements OnInit {
     private route: ActivatedRoute,
     private app: AppComponent,
     @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
+    private router: Router
   ) { }
 
+  doAction(): void {
+    this.router.navigateByUrl(this.router.routerState.snapshot.url + "/edit")
+  }
+
+  getActionLabel(): string { 
+    return "Edit";
+  }
+
   ngOnInit() {
     this.app.backEnabled = true;
+    this.app.actionable = this;
     this.getCategory();
   }
 
+  ngOnDestroy() {
+    this.app.actionable = null;
+  }
+
   getCategory(): void {
     const id = Number.parseInt(this.route.snapshot.paramMap.get('id'));
     this.twigsService.getCategory(id)

src/app/categories/edit-category/edit-category.component.html

@@ -0,0 +1 @@
+<app-category-form [title]="'Edit Category'" [budgetId]="budgetId" [currentCategory]="category"></app-category-form>

src/app/categories/edit-category/edit-category.component.spec.ts

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

src/app/categories/edit-category/edit-category.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Category } from '../category';
+import { ActivatedRoute } from '@angular/router';
+import { AppComponent } from '../../app.component';
+import { TWIGS_SERVICE, TwigsService } from '../../shared/twigs.service';
+
+@Component({
+  selector: 'app-edit-category',
+  templateUrl: './edit-category.component.html',
+  styleUrls: ['./edit-category.component.css']
+})
+export class EditCategoryComponent implements OnInit {
+
+  budgetId: number;
+  category: Category;
+
+  constructor(
+    private route: ActivatedRoute,
+    private app: AppComponent,
+    @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
+  ) { }
+
+  ngOnInit(): void {
+    this.app.backEnabled = true;
+    this.getCategory();
+  }
+
+  getCategory(): void {
+    const id = Number.parseInt(this.route.snapshot.paramMap.get('id'));
+    this.twigsService.getCategory(id)
+      .subscribe(category => {
+        category.amount /= 100;
+        this.app.title = category.title;
+        this.category = category;
+        this.budgetId = category.budgetId;
+      });
+  }
+}

src/app/shared/actionable.ts

@@ -0,0 +1,9 @@
+export interface Actionable {
+    getActionLabel(): string;
+    doAction(): void;
+}
+
+export function isActionable(obj: any): obj is Actionable {
+    return typeof obj.prototype.getActionLabel === 'function'
+        && typeof obj.prototype.doAction === 'function'
+}