Changes to filters and implement lists (partial)

- Split AuthService to SessionService, AuthService and UserService - Add list to filters - Create list model - Implement new filters sidebar - Revamp filters summary - Move filters business logic to Filters Service
m1chae1bx · Jul 27, 2021 · 546f6b8 · 546f6b8
1 parent 968134c
commit 546f6b8
Show file tree

Hide file tree

Showing 34 changed files with 752 additions and 316 deletions.
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -5,6 +5,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { AuthService, LoginPayload } from 'src/app/services/auth.service';
 import { fade } from 'src/app/utilities/animations';
+import { SessionService } from '../services/session.service';
 
 @Component({
   selector: 'app-login',
@@ -18,11 +19,16 @@ export class LoginComponent implements OnInit {
     private router: Router,
     private snackBar: MatSnackBar,
     private auth: AuthService,
+    private sessionService: SessionService
   ) { 
-    if (this.auth.isLoggedIn()) {
-      this.snackBar.open('Redirecting to My Tasks...', null, {duration: 2000});
-      this.router.navigate(['/my-tasks']);
-    }
+    this.sessionService.isLoggedIn().subscribe(
+      response => {
+        if (response) {
+          this.snackBar.open('Redirecting to My Tasks...', null, {duration: 2000});
+          this.router.navigate(['/my-tasks']);
+        }
+      }
+    );
   }
 
   loginFormGroup: FormGroup;
@@ -51,7 +57,7 @@ export class LoginComponent implements OnInit {
       username: this.username.value,
       password: this.password.value
     };
-    this.auth.login(payload).subscribe(
+    this.sessionService.login(payload).subscribe(
       response => {
         console.log(response);
         this.snackBar.open('Signed in successfully', null, {duration: 1500});

diff --git a/src/app/manage-account/delete-account-dialog/delete-account-dialog.component.ts b/src/app/manage-account/delete-account-dialog/delete-account-dialog.component.ts
@@ -1,10 +1,11 @@
-import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
-import { AuthService } from 'src/app/services/auth.service';
+import { SessionService } from 'src/app/services/session.service';
+import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-delete-account-dialog',
@@ -18,19 +19,20 @@ export class DeleteAccountDialogComponent implements OnInit {
 
   constructor(
     public dialogRef: MatDialogRef<DeleteAccountDialogComponent>,
-    private auth: AuthService,
     private snackBar: MatSnackBar,
-    private router: Router
+    private router: Router,
+    private userService: UserService,
+    private sessionService: SessionService
   ) { }
 
   ngOnInit(): void {
   }
 
   onDelete(): void {
     this.isDeleting = true;
-    this.auth.deleteAccount(this.password.value).subscribe(
+    this.userService.delete(this.password.value, this.sessionService.getUser()).subscribe(
       () => {
-        this.auth.removeSession();
+        this.sessionService.removeSession();
         this.dialogRef.close();
         this.snackBar.open('Account was deleted successfully', null, {duration: 1500 });
         this.router.navigate(['/']);

diff --git a/src/app/manage-account/edit-account/edit-account.component.ts b/src/app/manage-account/edit-account/edit-account.component.ts
@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AuthService, EditAccountPayload, User } from 'src/app/services/auth.service';
+import { ActivatedRoute } from '@angular/router';
+import { SessionService } from 'src/app/services/session.service';
+import { UpdateUserPayload, User, UserService } from 'src/app/services/user.service';
 import { fade } from 'src/app/utilities/animations';
 
 @Component({
@@ -20,13 +21,12 @@ export class EditAccountComponent implements OnInit {
   email = new FormControl({value: '', disabled: true});
   username = new FormControl({value: '', disabled: true});
   isSaving: boolean;
-  user: User;
 
   constructor(
-    private router: Router,
     private route: ActivatedRoute,
-    private auth: AuthService,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private sessionService: SessionService,
+    private userService: UserService
   ) { }
 
   ngOnInit(): void {
@@ -40,20 +40,20 @@ export class EditAccountComponent implements OnInit {
       'email': this.email,
       'username': this.username,
     });
-    this.user = this.auth.getUser();
-    this.fullName.setValue(this.user.fullName);
-    this.nickname.setValue(this.user.nickname);
-    this.email.setValue(this.user.email);
-    this.username.setValue(this.user.username);
+    const user = this.sessionService.getUser();
+    this.fullName.setValue(user.fullName);
+    this.nickname.setValue(user.nickname);
+    this.email.setValue(user.email);
+    this.username.setValue(user.username);
   }
 
   onSubmit(): void {
     this.isSaving = true;
-    const payload: EditAccountPayload = {
+    const payload: UpdateUserPayload = {
       fullName: this.fullName.value,
       nickname: this.nickname.value
     };
-    this.auth.editAccount(payload).subscribe(
+    this.userService.update(payload, this.sessionService.getUser()).subscribe(
       response => {
         this.isSaving = false;
         console.log('yey', response); // @todo

diff --git a/src/app/my-tasks/filters.ts b/src/app/my-tasks/filters.ts
@@ -1,6 +1,8 @@
+import { List } from "./list";
+
 export interface Filters {
-  dueDate: string;
-  dueDateDisplay: string;
+  list: { id: string, name: string };
+  dueDate: { code: string, displayText: string }; 
   showCompleted: boolean;
 }
 
diff --git a/src/app/my-tasks/list.ts b/src/app/my-tasks/list.ts
@@ -1,6 +1,6 @@
 export interface List {
+  id?: string;
   name: string;
-  owner: string;
-  isDefault: boolean;
+  owner: string; // @todo: i think not necessary in the future, should not be returned from server also
 }
 
diff --git a/src/app/my-tasks/main-toolbar/main-toolbar.component.ts b/src/app/my-tasks/main-toolbar/main-toolbar.component.ts
@@ -31,7 +31,7 @@ export class MainToolbarComponent implements OnInit {
     this.isSearching = false;
     this.isTitleVisible = true;
     this.notifierService.taskListObs.subscribe(data => {
-      if (data.name) {
+      if (data?.name) {
         this.isSearching = true;
       }
     });

diff --git a/src/app/my-tasks/my-tasks.component.html b/src/app/my-tasks/my-tasks.component.html
@@ -3,8 +3,12 @@
     <!-- <mat-drawer class="drawer-sidenav display-block-vlap display-none" mode="side" position="start" opened="true"> 
         <app-navbar class="navbar"></app-navbar>
     </mat-drawer> -->
+
+    <mat-drawer #drawerLeft class="drawer-sidenav" mode="over" position="start" (closedStart)="closeFilterPanels()">
+        <app-task-filters-bar></app-task-filters-bar>
+    </mat-drawer>
     <mat-drawer #drawer class="drawer-sidenav" mode="over" position="end">
-        <app-navbar class="navbar" (done)="toggleSidenav()"></app-navbar>
+        <app-navbar class="navbar" (done)="toggleSidenav(Sidenav.RIGHT)"></app-navbar>
     </mat-drawer>
     <mat-drawer-content (scroll)="onScroll($event)"> 
         <div class="tasks">
@@ -20,7 +24,7 @@
                     'fixed': toolbarFixed
                 }"
             >
-                <app-main-toolbar class="full-width flex flex-column" (menuClicked)="toggleSidenav()"></app-main-toolbar>
+                <app-main-toolbar class="full-width flex flex-column" (menuClicked)="toggleSidenav(Sidenav.RIGHT)"></app-main-toolbar>
                 <app-sub-toolbar></app-sub-toolbar>
                 <mat-divider></mat-divider>
             </div>

diff --git a/src/app/my-tasks/my-tasks.component.ts b/src/app/my-tasks/my-tasks.component.ts
@@ -1,31 +1,44 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { MatDrawer } from '@angular/material/sidenav';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { DateUtil } from 'src/app/utilities/date-util';
+import { NotifierService } from '../services/notifier.service';
 import { AddTaskSheetComponent } from './add-task-sheet/add-task-sheet.component';
 
+enum Sidenav {
+  LEFT,
+  RIGHT
+}
 @Component({
   selector: 'app-todo-list',
   templateUrl: './my-tasks.component.html',
   styleUrls: ['./my-tasks.component.scss'],
 })
-export class MyTasksComponent implements OnInit {
+export class MyTasksComponent implements OnInit, OnDestroy {
 
   hideToolbar: boolean;
   toolbarFixed: boolean;
   noAnimation: boolean;
   scrollSubject = new Subject<number>();
   prevScrollVal: number;
+  Sidenav = Sidenav;
+  showFiltersSubscription: Subscription;
 
-  @ViewChild('drawer') drawer: MatDrawer;
+  @ViewChild('drawer') drawer: MatDrawer; // @todo: change to drawerRight
+  @ViewChild('drawerLeft') drawerLeft: MatDrawer;
   @ViewChild('headerDiv') header: ElementRef;
 
   constructor(
-    private bottomSheet: MatBottomSheet
+    private bottomSheet: MatBottomSheet,
+    private notifierService: NotifierService
   ) { }
 
+  ngOnDestroy(): void {
+    this.showFiltersSubscription.unsubscribe();
+  }
+
   ngOnInit(): void {
     DateUtil.initDate(); // @todo: Create a warning if DateUtil is not initialized
     this.hideToolbar = false;
@@ -55,17 +68,29 @@ export class MyTasksComponent implements OnInit {
       }
       this.prevScrollVal = scrollTopVal;
     });
+    this.showFiltersSubscription = this.notifierService.showFilters.subscribe(() => {
+      this.drawerLeft.open();
+    });
   }
 
   onScroll(event: any): void {
     this.scrollSubject.next(event.target.scrollTop);
   }
 
-  toggleSidenav(): void {
-    this.drawer.toggle();
+  toggleSidenav(sidenav: Sidenav): void {
+    if (sidenav === Sidenav.LEFT) {
+      this.drawerLeft.toggle();
+    }
+    else {
+      this.drawer.toggle();
+    }
   }
 
   openAddTaskSheet(): void {
     const bottomSheetRef = this.bottomSheet.open(AddTaskSheetComponent);
   }
+
+  closeFilterPanels(): void {
+    this.notifierService.filtersSidebarClosing.emit();
+  }
 }
diff --git a/src/app/my-tasks/my-tasks.module.ts b/src/app/my-tasks/my-tasks.module.ts
@@ -38,6 +38,7 @@ import { SubToolbarComponent } from './sub-toolbar/sub-toolbar.component';
 import { AddTaskSheetComponent } from './add-task-sheet/add-task-sheet.component';
 import { EditTaskSheetComponent } from './edit-task-sheet/edit-task-sheet.component';
 import { MyTasksRoutingModule } from './my-tasks-routing.module';
+import { TaskFiltersBarComponent } from './task-filters-bar/task-filters-bar.component';
 @NgModule({
   declarations: [
     MyTasksComponent,
@@ -56,6 +57,7 @@ import { MyTasksRoutingModule } from './my-tasks-routing.module';
     SubToolbarComponent,
     AddTaskSheetComponent,
     EditTaskSheetComponent,
+    TaskFiltersBarComponent,
   ],
   imports: [
     CommonModule,

diff --git a/src/app/my-tasks/navbar/navbar.component.html b/src/app/my-tasks/navbar/navbar.component.html
@@ -1,41 +1,41 @@
 <!-- <div class="navbar-content"> -->
-  <div class="font-xx-large flex items-center padding-large">
-    <mat-icon color="primary" inline="true" class="margin-right-small">account_circle</mat-icon>
-    <span>
-      <div class="font-large bold primary-color">{{user.fullName}}</div>
-      <div class="font-small">@{{user.username}}</div>
-    </span>
-  </div>
-  <mat-divider></mat-divider>
-  <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
-    <mat-expansion-panel-header>
-      <mat-panel-title>
-        Manage Account
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <mat-divider></mat-divider>
-    <mat-nav-list class="padding-none">
-      <a mat-list-item class="action-typo" (click)="edit()">
-        <div class="font-medium flex items-center">
-          <mat-icon class="margin-right-large" inline="true">edit</mat-icon>
-          <span>Edit Account</span>
-        </div>
-      </a>
-      <a mat-list-item class="action-typo" (click)="logout()">
-        <div class="font-medium flex items-center">
-          <mat-icon class="margin-right-large" inline="true">logout</mat-icon>
-          <span>Sign Out</span>
-        </div>
-      </a>
-      <a mat-list-item class="action-typo" (click)="openDeleteDialog()">
-        <div class="font-medium flex items-center warn-color">
-          <mat-icon class="margin-right-large" inline="true">delete</mat-icon>
-          <span>Delete Account</span>
-        </div>
-      </a>
-    </mat-nav-list>
-  </mat-expansion-panel>
+<div class="font-xx-large flex items-center padding-large">
+  <mat-icon color="primary" inline="true" class="margin-right-small">account_circle</mat-icon>
+  <span>
+    <div class="font-large bold primary-color">{{user.fullName}}</div>
+    <div class="font-small">@{{user.username}}</div>
+  </span>
+</div>
+<mat-divider></mat-divider>
+<mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
+  <mat-expansion-panel-header>
+    <mat-panel-title class="primary-color">
+      Manage Account
+    </mat-panel-title>
+  </mat-expansion-panel-header>
   <mat-divider></mat-divider>
+  <mat-nav-list class="padding-none">
+    <a mat-list-item class="action-typo" (click)="edit()">
+      <div class="flex items-center">
+        <mat-icon class="margin-right-large" inline="true">edit</mat-icon>
+        <span>Edit Account</span>
+      </div>
+    </a>
+    <a mat-list-item class="action-typo" (click)="logout()">
+      <div class="flex items-center">
+        <mat-icon class="margin-right-large" inline="true">logout</mat-icon>
+        <span>Sign Out</span>
+      </div>
+    </a>
+    <a mat-list-item class="action-typo" (click)="openDeleteDialog()">
+      <div class="flex items-center warn-color">
+        <mat-icon class="margin-right-large" inline="true">delete</mat-icon>
+        <span>Delete Account</span>
+      </div>
+    </a>
+  </mat-nav-list>
+</mat-expansion-panel>
+<mat-divider></mat-divider>
   <!-- <div class="menu-item padding-medium">
     <span class="primary-color">My Feed</span>
     &nbsp;

diff --git a/src/app/my-tasks/navbar/navbar.component.ts b/src/app/my-tasks/navbar/navbar.component.ts
@@ -3,7 +3,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { DeleteAccountDialogComponent } from 'src/app/manage-account/delete-account-dialog/delete-account-dialog.component';
-import { AuthService, User } from 'src/app/services/auth.service';
+import { SessionService } from 'src/app/services/session.service';
+import { User } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-navbar',
@@ -16,18 +17,17 @@ export class NavbarComponent implements OnInit {
   @Output() done = new EventEmitter();
 
   constructor(
-    private auth: AuthService,
     private router: Router,
-    private snackBar: MatSnackBar,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private sessionService: SessionService
   ) { }
 
   ngOnInit(): void {
-    this.user = this.auth.getUser();
+    this.user = this.sessionService.getUser();
   }
 
   logout(): void {
-    this.auth.logout();
+    this.sessionService.logout();
   }
 
   edit(): void {