Context Menu - Task and Column initial functionality

README.md

@@ -150,11 +150,11 @@ Because I like seeing the numbers.
 
 Language     |   Files |    Blank | Comment |     Code
 -------------|--------:|---------:|--------:|---------:
-TypeScript   |      57 |      610 |      25 |     2855
-PHP          |      18 |      559 |      19 |     1743
-HTML         |      19 |      130 |       9 |     1157
-SASS         |      14 |      215 |      12 |      976
-__SUM:__     | __108__ | __1514__ |  __65__ | __6731__
+TypeScript   |      58 |      629 |      26 |     2939
+PHP          |      18 |      558 |      19 |     1740
+HTML         |      19 |      131 |       9 |     1160
+SASS         |      14 |      221 |      12 |     1005
+__SUM:__     | __109__ | __1539__ |  __66__ | __6848__
 
 Command: `cloc --exclude-dir=vendor --exclude-ext=json src/`
 

src/app/app.module.ts

@@ -18,6 +18,7 @@ import {
     Notifications,
     TopNav,
     AuthService,
+    ContextMenuService,
     ModalService,
     NotificationsService,
     StringsService
@@ -39,6 +40,7 @@ import { BoardService } from './board/board.service';
         Title,
         AuthService,
         BoardService,
+        ContextMenuService,
         ModalService,
         NotificationsService,
         StringsService

src/app/board/board.component.ts

@@ -12,6 +12,7 @@ import {
     User,
     Notification,
     AuthService,
+    ContextMenuService,
     NotificationsService,
     StringsService
 } from '../shared/index';
@@ -38,6 +39,7 @@ export class BoardDisplay implements OnInit {
                 private active: ActivatedRoute,
                 private auth: AuthService,
                 private boardService: BoardService,
+                private menuService: ContextMenuService,
                 private notes: NotificationsService,
                 private stringsService: StringsService,
                 private dragula: DragulaService) {

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

@@ -29,7 +29,7 @@
 
 <div class="tasks">
     <tb-task class="task-container" *ngFor="let task of columnData.ownTask"
-        [task]="task"></tb-task>
+        [task]="task" [add-task]="getShowModalFunction()"></tb-task>
 </div>
 
 <tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>

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

@@ -37,7 +37,7 @@ export class ColumnDisplay implements OnInit {
     private userOptions: UserOptions;
     private tasks: Array<Task>;
 
-    private contextMenuItems: Array<ContextMenuItem> = [];
+    private contextMenuItems: Array<ContextMenuItem>;
 
     private MODAL_ID: string;
     private modalProps: Task;
@@ -54,7 +54,10 @@ export class ColumnDisplay implements OnInit {
         this.tasks = [];
         this.collapseTasks = false;
 
-        this.contextMenuItems.push(new ContextMenuItem('Add New Task'));
+        this.contextMenuItems = [
+            new ContextMenuItem('Add New Task',
+                                this.getShowModalFunction())
+        ];
 
         this.MODAL_ID = 'add-task-form-';
         this.modalProps = new Task();
@@ -142,6 +145,10 @@ export class ColumnDisplay implements OnInit {
             });
     }
 
+    private getShowModalFunction(): Function {
+        return () => { this.showModal(); };
+    }
+
     private showModal() {
         this.modalProps = new Task();
         this.modalProps.column_id = this.columnData.id;

src/app/board/task/task.component.html

@@ -39,5 +39,6 @@
             </span>
         </span>
     </div>
+    <tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>
 </div>
 

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

@@ -1,10 +1,16 @@
-import { Component, Input } from '@angular/core';
+import {
+    Component,
+    Input,
+    OnInit
+} from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 import * as Marked from 'marked';
 import * as hljs from 'highlight.js';
 
 import {
+    ContextMenu,
+    ContextMenuItem,
     Task,
     UserOptions,
     AuthService
@@ -14,10 +20,12 @@ import {
     selector: 'tb-task',
     templateUrl: 'app/board/task/task.component.html'
 })
-export class TaskDisplay {
+export class TaskDisplay implements OnInit {
     private userOptions: UserOptions;
+    private contextMenuItems: Array<ContextMenuItem>;
 
     @Input('task') taskData: Task;
+    @Input('add-task') addTask: Function;
 
     constructor(private auth: AuthService,
                 private sanitizer: DomSanitizer) {
@@ -28,6 +36,18 @@ export class TaskDisplay {
         this.initMarked();
     }
 
+    ngOnInit() {
+        this.contextMenuItems = [
+            new ContextMenuItem('View Task'),
+            new ContextMenuItem('Edit Task'),
+            new ContextMenuItem('Delete Task'),
+            new ContextMenuItem('', null, true),
+            new ContextMenuItem('Move to Column:', null, false, false),
+            new ContextMenuItem('', null, true),
+            new ContextMenuItem('Add New Task', this.addTask)
+        ];
+    }
+
     getTaskDescription(): SafeHtml {
         return this.sanitizer.bypassSecurityTrustHtml(
             Marked(this.taskData.description));

src/app/shared/context-menu/context-menu-item.model.ts

@@ -1,7 +1,8 @@
 export class ContextMenuItem {
     constructor(public text: string = '',
                 public action: Function = null,
-                public isSeparator: boolean = false) {
+                public isSeparator: boolean = false,
+                public canHighlight: boolean = true) {
     }
 }
 

src/app/shared/context-menu/context-menu.component.html

@@ -1,12 +1,15 @@
 <div class="context-menu-container"
     [ngClass]="{ animated: animate, 'menu-open': isOpen }">
 
-    <div class="menu-item" *ngFor="let item of menuItems">
+    <div class="menu-item" *ngFor="let item of menuItems"
+        [ngClass]="{ 'no-highlight': item.isSeparator || !item.canHighlight }"
+        (click)="callAction(item.action)">
         <hr *ngIf="item.isSeparator">
 
         <div *ngIf="!item.isSeparator">
             {{ item.text }}
         </div>
     </div>
+
 </div>
 

src/app/shared/context-menu/context-menu.component.ts

@@ -5,6 +5,7 @@ import {
 } from '@angular/core';
 
 import { ContextMenuItem } from './context-menu-item.model';
+import { ContextMenuService } from './context-menu.service';
 
 @Component({
     selector: 'tb-context-menu',
@@ -16,20 +17,28 @@ export class ContextMenu {
     isOpen = false;
     animate = true;
 
-    constructor(private el: ElementRef) {
-        let parentElement = el.nativeElement.parentElement;
+    constructor(private el: ElementRef,
+                private menuService: ContextMenuService) {
+        menuService.registerMenu(this);
 
-        el.nativeElement.ownerDocument.addEventListener('click', () => {
-            this.isOpen = false;
-        });
+        let parentElement = el.nativeElement.parentElement;
 
         parentElement.oncontextmenu = (event: MouseEvent) => {
             event.preventDefault();
+            event.stopPropagation();
+
             this.onParentContextMenu(event);
         };
     }
 
+    callAction(action: Function) {
+        if (action) {
+            action();
+        }
+    }
+
     private onParentContextMenu(event: MouseEvent) {
+        this.menuService.closeAllMenus();
         this.isOpen = true;
 
         let edgeBuffer = 10;

src/app/shared/context-menu/context-menu.service.ts

@@ -18,7 +18,7 @@ export class ContextMenuService {
         this.menus.push(newMenu);
     }
 
-    private closeAllMenus() {
+    closeAllMenus() {
         this.menus.forEach(menu => {
             menu.isOpen = false;
         });

src/app/shared/context-menu/index.ts

@@ -1,2 +1,3 @@
 export * from './context-menu.component';
 export * from './context-menu-item.model';
+export * from './context-menu.service';

src/scss/_context-menu.scss

@@ -9,7 +9,7 @@
 .context-menu-container {
     @include shadow-high;
 
-    background-color: #fff;
+    background-color: $white;
     border-radius: 3px;
     display: none;
     margin: 2px 0 0;
@@ -30,6 +30,14 @@
         &:hover {
             background-color: lighten($color-background, 5%);
         }
+
+        &.no-highlight {
+            cursor: default;
+
+            &:hover {
+                background-color: $white;
+            }
+        }
     }
 }