Add direct linking to a task. Fixes #81

src/app/app.routes.ts

@@ -22,6 +22,11 @@ export const ROUTES: Routes = [
     component: BoardDisplayComponent,
     canActivate: [ AuthGuard ]
   },
+  {
+    path: 'boards/:id/:taskId',
+    component: BoardDisplayComponent,
+    canActivate: [ AuthGuard ]
+  },
   {
     path: 'settings',
     component: SettingsComponent,

src/app/board/board.component.ts

@@ -80,6 +80,13 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
       this.loading = true;
       this.boardNavId = id ? id : null;
       this.updateActiveBoard();
+
+      if (!params.taskId) {
+        boardService.showTask(null);
+        return;
+      }
+
+      boardService.showTask(params.taskId);
     });
     this.subs.push(sub);
   }

src/app/board/board.service.ts

@@ -28,8 +28,10 @@ export class BoardService extends ApiService {
     complete: 0
   };
   private activeBoard = new BehaviorSubject<Board>(null);
+  private showTaskId = new BehaviorSubject<number>(null);
 
   public activeBoardChanged = this.activeBoard.asObservable();
+  public showTaskIdChanged = this.showTaskId.asObservable();
 
   constructor(private http: HttpClient, strat: LocationStrategy) {
     super(strat);
@@ -42,6 +44,10 @@ export class BoardService extends ApiService {
     hljs.registerLanguage('php', php);
   }
 
+  showTask(id: number) {
+    this.showTaskId.next(id);
+  }
+
   async convertMarkdown(markdown: string, callback = this.defaultCallback,
                         doCount = false): Promise<MarkedReturn> {
     this.checkCounts.total = 0;

src/app/board/column/column.component.html

@@ -89,7 +89,7 @@
            [remove-task]="getRemoveTaskFunction(task.id)"
            [collapse]="collapseTasks"
            (on-update-boards)="callBoardUpdate();"
-           (dblclick)="$event.preventDefault();showViewModal(task.id)">
+           (dblclick)="$event.preventDefault();getShowViewModalFunction(task.id)()">
   </tb-task>
 </div>
 

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

@@ -8,6 +8,7 @@ import {
   Output,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { Location } from '@angular/common';
 import {
   CdkDragDrop,
   moveItemInArray,
@@ -92,6 +93,7 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
 
   constructor(public elRef: ElementRef,
               private auth: AuthService,
+              private location: Location,
               public notes: NotificationsService,
               public modal: ModalService,
               public stringsService: StringsService,
@@ -99,7 +101,7 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
               private sanitizer: DomSanitizer) {
     this.templateElement = elRef.nativeElement;
     this.collapseTasks = false;
-    this.commentOrder = "oldest";
+    this.commentOrder = 'oldest';
     this.sortOption = 'pos';
 
     this.MODAL_ID = 'add-task-form-';
@@ -126,6 +128,17 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
     });
     this.subs.push(sub);
 
+    sub = boardService.showTaskIdChanged.subscribe(taskId => {
+      setTimeout(() => {
+        this.columnData?.tasks?.forEach(task => {
+          if (+task.id === +taskId) {
+            this.showViewModal(+taskId);
+          }
+        });
+      }, 0);
+    });
+    this.subs.push(sub);
+
     sub = auth.userChanged.subscribe((user: User) => {
       if (user === null) {
         return;
@@ -559,7 +572,11 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
   }
 
   getShowViewModalFunction(taskId: number): () => void {
-    return () => { this.showViewModal(taskId); };
+    return () => {
+      const url = 'boards/' + this.activeBoard.id + '/' + taskId;
+      this.location.go(url);
+      this.showViewModal(taskId);
+    };
   }
 
   showModal(taskId: number = 0) {

src/app/shared/modal/modal.component.ts

@@ -4,6 +4,7 @@ import {
   OnInit,
   ContentChild
 } from '@angular/core';
+import { Location } from '@angular/common';
 
 import { ModalService } from './modal.service';
 
@@ -30,7 +31,7 @@ export class ModalComponent implements OnInit {
   isOpen = false;
   animate = true;
 
-  constructor(public modalService: ModalService) {
+  constructor(public modalService: ModalService, private location: Location) {
   }
 
   ngOnInit() {
@@ -39,6 +40,11 @@ export class ModalComponent implements OnInit {
 
   close(checkBlocking = false): void {
     this.modalService.close(this.modalId, checkBlocking);
+
+    const path = this.location.path().split('/');
+    path.length -= 1;
+
+    this.location.go(path.join('/'))
   }
 
   filterClick(event: Event): void {
@@ -52,13 +58,11 @@ export class ModalComponent implements OnInit {
   }
 
   keyup(event: KeyboardEvent): void {
-    // tslint:disable-next-line
-    if (event.keyCode === 27) {
-      this.modalService.close(this.modalId, true);
+    if (event.key === 'Escape' && this.isOpen) {
+      this.close(true);
     }
 
-    // tslint:disable-next-line
-    if (event.keyCode === 13) {
+    if (event.key === 'Enter') {
       this.clickDefaultAction();
     }
   }

test/app/board/column/column.component.spec.ts

@@ -513,7 +513,7 @@ describe('ColumnDisplay', () => {
     expect(called).toEqual(true);
   });
 
-  it('opens a model to add a task', () => {
+  it('opens a modal to add a task', () => {
     component.quickAdd = { title: '' } as any;
     component.columnData = { id: 1 } as any;
 

test/app/mocks.ts

@@ -19,6 +19,12 @@ export class BoardServiceMock {
   public activeBoardChanged =
     new BehaviorSubject({ id: 0, name: 'Test', columns: [] });
 
+  public showTaskIdChanged = new BehaviorSubject(null);
+
+  showTask(id: number) {
+    this.showTaskIdChanged.next(id);
+  }
+
   getBoards() {
     return new BehaviorSubject({
       data: [{}, [{ id: 1, name: 'Test', is_active: '1' }]]

test/app/shared/modal/modal.component.spec.ts

@@ -73,7 +73,7 @@ describe('Modal', () => {
         expect(checkBlocking).toEqual(true);
       };
 
-    keyUp({ keyCode: 27 } as any);
+    keyUp({ key: 'Escape' } as any);
   });
 
   it('handles the Enter key', () => {
@@ -85,7 +85,7 @@ describe('Modal', () => {
       click: () => called = true
     } };
 
-    keyUp({ keyCode: 13 } as any);
+    keyUp({ key: 'Enter' } as any);
     expect(called).toEqual(true);
   });