Performance improvements, refactoring, and package size reduction

angular.json

@@ -43,7 +43,7 @@
               "aot": true,
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
+              "sourceMap": true,
               "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,

src/app/app.module.ts

@@ -12,7 +12,7 @@ import { ApiInterceptor } from './app.api-http';
 import { LoginComponent } from './login/login.component';
 import { BoardModule } from './board/board.module';
 import { FileModule } from './files/file-viewer.module';
-import { DashboardModule } from './dashboard/dashboard.module';
+// import { DashboardModule } from './dashboard/dashboard.module';
 import { SettingsModule } from './settings/settings.module';
 import { SharedModule } from './shared/shared.module';
 
@@ -23,7 +23,7 @@ import { SharedModule } from './shared/shared.module';
     HttpClientModule,
     BoardModule,
     FileModule,
-    DashboardModule,
+    // DashboardModule,
     DragDropModule,
     SettingsModule,
     SharedModule,

src/app/app.routes.ts

@@ -4,7 +4,7 @@ import { BoardDisplayComponent } from './board/board.component';
 import { FileViewerComponent } from './files/file-viewer.component';
 import { LoginComponent } from './login/login.component';
 import { SettingsComponent } from './settings/settings.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
+// import { DashboardComponent } from './dashboard/dashboard.component';
 import { AuthGuard } from './shared/auth/auth.guard';
 
 export const ROUTES: Routes = [
@@ -27,11 +27,11 @@ export const ROUTES: Routes = [
     component: SettingsComponent,
     canActivate: [ AuthGuard ]
   },
-  {
-    path: 'dashboard',
-    component: DashboardComponent,
-    canActivate: [ AuthGuard ]
-  },
+  // {
+  //   path: 'dashboard',
+  //   component: DashboardComponent,
+  //   canActivate: [ AuthGuard ]
+  // },
   {
     path: 'files/:hash',
     component: FileViewerComponent,

src/app/board/board.component.html

@@ -83,9 +83,11 @@
   <p></p>
 </div>
 
-<div class="board" cdkDropListGroup *ngIf="activeBoard">
-  <div class="loading" *ngIf="loading">{{ strings['loading'] }}...</div>
+<div class="board" *ngIf="loading">
+  <div class="loading">{{ strings['loading'] }}...</div>
+</div>
 
+<div class="board" cdkDropListGroup *ngIf="activeBoard">
   <tb-column class="column" [id]="column.id" [column]="column"
              *ngFor="let column of activeBoard.columns"
              (on-update-boards)="updateBoards()"></tb-column>

src/app/board/board.component.ts

@@ -74,18 +74,6 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
 
     this.updateBoards();
 
-    sub = boardService.activeBoardChanged.subscribe((board: Board) => {
-      if (!board) {
-        return;
-      }
-
-      this.activeBoard = board;
-      title.setTitle('TaskBoard - ' + board.name);
-      this.userFilter = null;
-      this.categoryFilter = null;
-    });
-    this.subs.push(sub);
-
     sub = auth.userChanged.subscribe((user: User) => {
       this.updateActiveUser(user);
     });
@@ -94,6 +82,7 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
     sub = active.params.subscribe(params => {
       const id = +params.id;
 
+      this.loading = true;
       this.boardNavId = id ? id : null;
       this.updateActiveBoard();
     });
@@ -167,38 +156,38 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
       if (response.data.length > 1) {
         this.updateBoardsList(response.data[1]);
       }
-
-      this.loading = false;
     });
   }
 
   private updateBoardsList(boards: any[]): void {
     const activeBoards: Board[] = [];
 
-    if (boards) {
-      boards.forEach((board: any) => {
-        const currentBoard = new Board(+board.id, board.name,
-                                       board.is_active === '1',
-                                       board.ownColumn,
-                                       board.ownCategory,
-                                       board.ownAutoAction,
-                                       board.ownIssuetracker,
-                                       board.sharedUser);
-        if (currentBoard.is_active) {
-          activeBoards.push(currentBoard);
-        }
-      });
-    }
+    boards.forEach((board: any) => {
+      if (board.is_active !== '1') {
+        return;
+      }
+
+      const currentBoard = new Board(+board.id, board.name, true,
+                                     board.ownColumn,
+                                     board.ownCategory,
+                                     board.ownAutoAction,
+                                     board.ownIssuetracker,
+                                     board.sharedUser);
+      activeBoards.push(currentBoard);
+    });
 
     this.boards = activeBoards;
+    this.loading = false;
 
+    this.sortColumns().then(() => { this.updateActiveBoard(); })
+  }
+
+  private async sortColumns() {
     this.boards.forEach(board => {
       board.columns.sort((a: Column, b: Column) => {
         return +a.position - +b.position;
       });
     });
-
-    this.updateActiveBoard();
   }
 
   private updateActiveBoard(): void {
@@ -213,9 +202,16 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
       return;
     }
 
+    this.userFilter = null;
+    this.categoryFilter = null;
+
     this.activeBoard = board;
-    this.boardService.updateActiveBoard(board);
     this.pageName = board.name;
+
+    this.boardService.updateActiveBoard(board);
+    this.title.setTitle('TaskBoard - ' + this.activeBoard.name);
+
+    this.loading = false;
   }
 
   private updateActiveUser(activeUser: User) {

src/app/board/board.service.ts

@@ -2,7 +2,13 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import * as marked from 'marked';
-import * as hljs from 'highlight.js';
+import hljs from 'node_modules/highlight.js/lib/core.js';
+import javascript from 'node_modules/highlight.js/lib/languages/javascript.js';
+import bash from 'node_modules/highlight.js/lib/languages/bash.js';
+import css from 'node_modules/highlight.js/lib/languages/css.js';
+import csharp from 'node_modules/highlight.js/lib/languages/csharp.js';
+import php from 'node_modules/highlight.js/lib/languages/php.js';
+
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 
@@ -32,6 +38,12 @@ export class BoardService {
 
   constructor(private http: HttpClient) {
     this.initMarked();
+
+    hljs.registerLanguage('javascript', javascript);
+    hljs.registerLanguage('bash', bash);
+    hljs.registerLanguage('css', css);
+    hljs.registerLanguage('csharp', csharp);
+    hljs.registerLanguage('php', php);
   }
 
   async convertMarkdown(markdown: string, callback = this.defaultCallback,
@@ -55,8 +67,9 @@ export class BoardService {
       return;
     }
 
-    const newBoard = this.convertBoardData(board);
-    this.activeBoard.next(newBoard);
+    this.convertBoardData(board).then(newBoard => {
+      this.activeBoard.next(newBoard);
+    });
   }
 
   getBoards(): Observable<ApiResponse> {
@@ -175,7 +188,7 @@ export class BoardService {
     this.http.post('api/refresh', {}).subscribe();
   }
 
-  private convertBoardData(boardData: any): Board {
+  private async convertBoardData(boardData: any): Promise<Board> {
     if (boardData instanceof Board) {
       return boardData;
     }

src/app/board/column/column.component.ts

@@ -3,9 +3,9 @@ import {
   ElementRef,
   EventEmitter,
   Input,
-  OnInit,
   OnDestroy,
-  Output
+  OnInit,
+  Output,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
@@ -37,7 +37,7 @@ import { BoardService } from '../board.service';
 
 @Component({
   selector: 'tb-column',
-  templateUrl: './column.component.html'
+  templateUrl: './column.component.html',
 })
 export class ColumnDisplayComponent implements OnInit, OnDestroy {
   public moveItemInArray: any;
@@ -119,8 +119,8 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
     });
     this.subs.push(sub);
 
-    sub = boardService.activeBoardChanged.subscribe((board: Board) => {
-      this.activeBoard = board;
+    sub = boardService.activeBoardChanged.subscribe(newBoard => {
+      this.activeBoard = newBoard;
     });
     this.subs.push(sub);
 

src/app/board/task/task.component.ts

@@ -1,9 +1,12 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
+  OnDestroy,
   OnInit,
-  Output
+  Output,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -24,9 +27,12 @@ import { BoardService } from '../board.service';
 
 @Component({
   selector: 'tb-task',
-  templateUrl: './task.component.html'
+  templateUrl: './task.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TaskDisplayComponent implements OnInit {
+export class TaskDisplayComponent implements OnInit, OnDestroy {
+  private subs: any[];
+
   public isOverdue: boolean;
   public isNearlyDue: boolean;
   public strings: any;
@@ -56,21 +62,26 @@ export class TaskDisplayComponent implements OnInit {
               public boardService: BoardService,
               public modal: ModalService,
               private notes: NotificationsService,
-              public stringsService: StringsService) {
+              public stringsService: StringsService,
+              private cdref: ChangeDetectorRef) {
     this.onUpdateBoards = new EventEmitter<any>();
     this.percentComplete = 0;
+    this.subs = [];
 
-    stringsService.stringsChanged.subscribe(newStrings => {
+    let sub = stringsService.stringsChanged.subscribe(newStrings => {
       this.strings = newStrings;
     });
+    this.subs.push(sub);
 
-    auth.userChanged.subscribe(() => {
+    sub = auth.userChanged.subscribe(() => {
       this.userOptions = auth.userOptions;
     });
+    this.subs.push(sub);
 
-    boardService.activeBoardChanged.subscribe((board: Board) => {
-      this.activeBoard = board;
+    sub = boardService.activeBoardChanged.subscribe(newBoard => {
+      this.activeBoard = newBoard;
     });
+    this.subs.push(sub);
   }
 
   ngOnInit() {
@@ -78,6 +89,10 @@ export class TaskDisplayComponent implements OnInit {
     this.convertTaskDescription();
   }
 
+  ngOnDestroy() {
+    this.subs.forEach(sub => sub.unsubscribe());
+  }
+
   getPercentStyle() {
     return this.sanitizer.bypassSecurityTrustStyle(
       'padding: 0; height: 5px; background-color: rgba(0, 0, 0, .4); ' +

src/app/settings/board-admin/board-admin.component.ts

@@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
 import {
   CdkDragDrop,
   moveItemInArray,
-  transferArrayItem
 } from '@angular/cdk/drag-drop';
 
 import {

src/app/shared/models/board.model.ts

@@ -26,19 +26,15 @@ export class Board {
     this.users = [];
 
     columnArray.forEach((column: any) => {
-      this.columns.push(new Column(+column.id,
-        column.name,
-        +column.position,
-        +column.board_id,
-        +column.task_limit,
-        column.ownTask));
+      this.convertColumn(column).then(col => {
+        this.columns.push(col);
+      })
     });
 
     categoryArray.forEach((category: any) => {
-      this.categories.push(new Category(+category.id,
-        category.name,
-        category.default_task_color,
-        +category.board_id));
+      this.convertCategory(category).then(cat => {
+        this.categories.push(cat);
+      });
     });
 
     actionsArray.forEach((action: any) => {
@@ -81,5 +77,21 @@ export class Board {
   addIssueTracker(url: string, regex: string): void {
     this.issue_trackers.push(new IssueTracker(0, url, regex));
   }
+
+  private async convertColumn(column: any): Promise<Column> {
+    const col = new Column(+column.id, column.name, +column.position,
+                           +column.board_id, +column.task_limit,
+                           column.ownTask);
+
+    return col;
+  }
+
+  private async convertCategory(category: any): Promise<Category> {
+
+    const cat = new Category(+category.id, category.name,
+                             category.default_task_color, +category.board_id);
+
+    return cat;
+  }
 }
 

src/app/shared/top-nav/top-nav.component.ts

@@ -3,10 +3,7 @@ import { Router } from '@angular/router';
 
 import { Notification } from '../models';
 import { Constants } from '../constants';
-import {
-  AuthService,
-  NotificationsService,
-} from '../services';
+import { AuthService, NotificationsService } from '../services';
 import { StringsService } from '../strings/strings.service';
 
 @Component({

test/app/board/board.service.spec.ts

@@ -46,10 +46,10 @@ describe('BoardService', () => {
 
     service.activeBoardChanged.subscribe(() => (changed = true));
 
-    service.updateActiveBoard(<any>{});
+    service.updateActiveBoard({} as any);
 
     expect(changed).toEqual(true);
-  });
+  })
 
   it('gets all boards', () => {
     service.getBoards().subscribe(response => {