Add progress bars for login and budget creation; fix budget creation

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

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

@@ -1,7 +1,8 @@
-<div [hidden]="budget">
+<mat-progress-spinner *ngIf="isLoading" mode="indeterminate" diameter="50"></mat-progress-spinner>
+<div *ngIf="!isLoading && !budget">
   <p>Select a budget from the list to view details about it or edit it.</p>
 </div>
-<div [hidden]="!budget" class="form budget-form">
+<div *ngIf="!isLoading && budget" class="form budget-form">
   <mat-form-field>
     <input matInput [(ngModel)]="budget.name" placeholder="Name" required>
   </mat-form-field>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, Inject, OnDestroy } from '@angular/core';
 import { Budget } from '../budget';
 import { AppComponent } from 'src/app/app.component';
-import { User } from 'src/app/users/user';
+import { User, UserPermission, Permission } from 'src/app/users/user';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
 
 @Component({
@@ -12,8 +12,9 @@ import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
 export class AddEditBudgetComponent {
     @Input() title: string;
     @Input() budget: Budget;
-    public userIds: number[];
+    public users: UserPermission[];
     public searchedUsers: User[] = [];
+    public isLoading = false;
 
     constructor(
         private app: AppComponent,
@@ -21,11 +22,12 @@ export class AddEditBudgetComponent {
     ) {
         this.app.title = this.title;
         this.app.backEnabled = true;
-        this.userIds = [this.app.user.id];
+        this.users = [new UserPermission(this.app.user.id, Permission.OWNER)];
     }
 
     save(): void {
         let observable;
+        this.isLoading = true;
         if (this.budget.id) {
             // This is an existing transaction, update it
             observable = this.twigsService.updateBudget(this.budget.id, this.budget);
@@ -34,7 +36,7 @@ export class AddEditBudgetComponent {
             observable = this.twigsService.createBudget(
                 this.budget.name,
                 this.budget.description,
-                this.userIds
+                this.users
             );
         }
         // TODO: Check if it was actually successful or not
@@ -44,6 +46,7 @@ export class AddEditBudgetComponent {
     }
 
     delete(): void {
+        this.isLoading = true;
         this.twigsService.deleteBudget(this.budget.id);
         this.app.goBack();
     }

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { Observable, Subscriber } from 'rxjs';
-import { User } from '../users/user';
+import { User, UserPermission, Permission } from '../users/user';
 import { TwigsService } from './twigs.service';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
@@ -43,7 +43,7 @@ export class TwigsHttpService implements TwigsService {
   }
 
   logout(): Observable<void> {
-    return this.http.post<void>(this.apiUrl + '/logout', this.options);
+    return this.http.post<void>(this.apiUrl + '/login?logout', this.options);
   }
 
   // Budgets
@@ -58,12 +58,17 @@ export class TwigsHttpService implements TwigsService {
   createBudget(
     name: string,
     description: string,
-    userIds: number[],
+    users: UserPermission[],
   ): Observable<Budget> {
     const params = {
       'name': name,
       'description': description,
-      'userIds': userIds
+      'users': users.map(user => {
+        return {
+          user: user.user, 
+          permission: Permission[user.permission]
+        };
+      })
     };
     return this.http.post<Budget>(this.apiUrl + '/budgets/new', params, this.options);
   }

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { Observable, Subscriber } from 'rxjs';
-import { User } from '../users/user';
+import { User, UserPermission } from '../users/user';
 import { TwigsService } from './twigs.service';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
@@ -82,14 +82,14 @@ export class TwigsLocalService implements TwigsService {
   createBudget(
     name: string,
     description: string,
-    userIds: number[],
+    users: UserPermission[],
   ): Observable<Budget> {
     return Observable.create(subscriber => {
       const budget = new Budget();
       budget.name = name;
       budget.description = description;
       budget.users = this.users.filter(user => {
-        return userIds.indexOf(user.id) > -1;
+        return users.map(userPerm => userPerm.user).indexOf(user.id) > -1;
       });
       budget.id = this.budgets.length + 1;
       this.budgets.push(budget);

src/app/shared/twigs.service.ts

@@ -1,6 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { Observable } from 'rxjs';
-import { User } from '../users/user';
+import { User, UserPermission } from '../users/user';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
 import { Transaction } from '../transactions/transaction';
@@ -17,7 +17,7 @@ export interface TwigsService {
   createBudget(
     name: string,
     description: string,
-    userIds: number[],
+    users: UserPermission[],
   ): Observable<Budget>;
   updateBudget(id: number, changes: object): Observable<Budget>;
   deleteBudget(id: number): Observable<void>;

src/app/users/login/login.component.html

@@ -1,9 +1,10 @@
-<div class="form login-form">
+<mat-progress-spinner *ngIf="isLoading" mode="indeterminate" diameter="50"></mat-progress-spinner>
+<div *ngIf="!isLoading" class="form login-form">
   <mat-form-field>
     <input matInput placeholder="Email" [(ngModel)]="email" />
   </mat-form-field>
   <mat-form-field>
-    <input matInput type="password" placeholder="Password" [(ngModel)]="password" (keyup.enter)="doAction()"/>
+    <input matInput type="password" placeholder="Password" [(ngModel)]="password" (keyup.enter)="login()"/>
   </mat-form-field>
   <button mat-raised-button color="accent" (click)="login()">Login</button>
 </div>

src/app/users/login/login.component.ts

@@ -11,6 +11,7 @@ import { Router } from '@angular/router';
 })
 export class LoginComponent implements OnInit {
 
+  public isLoading = false;
   public email: string;
   public password: string;
 
@@ -26,6 +27,7 @@ export class LoginComponent implements OnInit {
   }
 
   login(): void {
+    this.isLoading = true;
     this.twigsService.login(this.email, this.password)
       .subscribe(user => {
         this.app.user = user;
@@ -34,6 +36,7 @@ export class LoginComponent implements OnInit {
       error => {
         console.error(error)
         alert("Login failed. Please verify you have the correct credentials");
+        this.isLoading = false;
       })
   }
 }

src/app/users/user.ts

@@ -9,3 +9,19 @@ export class User {
     this.email = email;
   }
 }
+
+export class UserPermission {
+  user: number;
+  permission: Permission;
+
+  constructor(user: number, permission: Permission) {
+    this.user = user;
+    this.permission = permission;
+  }
+}
+
+export enum Permission {
+  READ,
+  WRITE,
+  OWNER
+}