From a33b7c95ccc979a44a6fe3b96b9736c0e8f1fef1 Mon Sep 17 00:00:00 2001
From: Matthew Ross <kiswa.com@gmail.com>
Date: Sun, 30 Apr 2017 14:30:14 -0400
Subject: [PATCH] Add initial context menu component

---
 README.md                                     |  8 ++++----
 src/app/app.module.ts                         |  2 ++
 src/app/board/column/column.component.html    |  4 +++-
 src/app/board/column/column.component.ts      |  6 ++++++
 .../context-menu/context-menu-item.model.ts   |  7 +++++++
 .../context-menu/context-menu.component.html  | 12 ++++++++++++
 .../context-menu/context-menu.component.ts    | 19 +++++++++++++++++++
 src/app/shared/context-menu/index.ts          |  2 ++
 src/app/shared/index.ts                       |  1 +
 src/scss/_context-menu.scss                   |  8 ++++++++
 src/scss/main.scss                            |  1 +
 11 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 src/app/shared/context-menu/context-menu-item.model.ts
 create mode 100644 src/app/shared/context-menu/context-menu.component.html
 create mode 100644 src/app/shared/context-menu/context-menu.component.ts
 create mode 100644 src/app/shared/context-menu/index.ts
 create mode 100644 src/scss/_context-menu.scss

diff --git a/README.md b/README.md
index 4146289..5c68124 100644
--- a/README.md
+++ b/README.md
@@ -150,11 +150,11 @@ Because I like seeing the numbers.
 
 Language     |   Files |    Blank | Comment |     Code
 -------------|--------:|---------:|--------:|---------:
-TypeScript   |      54 |      602 |      24 |     2827
+TypeScript   |      57 |      610 |      25 |     2855
 PHP          |      18 |      559 |      19 |     1743
-HTML         |      18 |      126 |       9 |     1147
-SASS         |      13 |      209 |      12 |      964
-__SUM:__     | __103__ | __1499__ |  __64__ | __6681__
+HTML         |      19 |      130 |       9 |     1157
+SASS         |      14 |      215 |      12 |      976
+__SUM:__     | __108__ | __1514__ |  __65__ | __6731__
 
 Command: `cloc --exclude-dir=vendor --exclude-ext=json src/`
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 815d856..4ef741a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { API_HTTP_PROVIDERS } from './app.api-http';
 import { Constants } from './shared/constants';
 import {
     AuthGuard,
+    ContextMenu,
     InlineEdit,
     Modal,
     Notifications,
@@ -45,6 +46,7 @@ import { BoardService } from './board/board.service';
     declarations: [
         AppComponent,
         InlineEdit,
+        ContextMenu,
         Modal,
         Notifications,
         TopNav,
diff --git a/src/app/board/column/column.component.html b/src/app/board/column/column.component.html
index 4b3e3aa..5e7d707 100644
--- a/src/app/board/column/column.component.html
+++ b/src/app/board/column/column.component.html
@@ -32,6 +32,8 @@
         [task]="task"></tb-task>
 </div>
 
+<tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>
+
 <!--<tb-modal modal-title="Confirm Task Removal" blocking="true">-->
 <!--    <div class="center">Removing a task cannot be undone.<br>Continue?</div>-->
 <!--    <div class="buttons">-->
@@ -42,7 +44,7 @@
 <!--    </div>-->
 <!--</tb-modal>-->
 
-<tb-modal  *ngIf="activeBoard" modal-title="Add Task"
+<tb-modal *ngIf="activeBoard" modal-title="Add Task"
     modal-id="{{ MODAL_ID + columnData.id }}">
     <label>
         Title
diff --git a/src/app/board/column/column.component.ts b/src/app/board/column/column.component.ts
index 4536f3f..5ef3f76 100644
--- a/src/app/board/column/column.component.ts
+++ b/src/app/board/column/column.component.ts
@@ -10,6 +10,8 @@ import {
     Board,
     Category,
     Column,
+    ContextMenu,
+    ContextMenuItem,
     Modal,
     Notification,
     Task,
@@ -35,6 +37,8 @@ export class ColumnDisplay implements OnInit {
     private userOptions: UserOptions;
     private tasks: Array<Task>;
 
+    private contextMenuItems: Array<ContextMenuItem> = [];
+
     private MODAL_ID: string;
     private modalProps: Task;
 
@@ -50,6 +54,8 @@ export class ColumnDisplay implements OnInit {
         this.tasks = [];
         this.collapseTasks = false;
 
+        this.contextMenuItems.push(new ContextMenuItem('Add Task'));
+
         this.MODAL_ID = 'add-task-form-';
         this.modalProps = new Task();
 
diff --git a/src/app/shared/context-menu/context-menu-item.model.ts b/src/app/shared/context-menu/context-menu-item.model.ts
new file mode 100644
index 0000000..04aca30
--- /dev/null
+++ b/src/app/shared/context-menu/context-menu-item.model.ts
@@ -0,0 +1,7 @@
+export class ContextMenuItem {
+    constructor(public text: string = '',
+                public action: Function = null,
+                public isSeparator: boolean = false) {
+    }
+}
+
diff --git a/src/app/shared/context-menu/context-menu.component.html b/src/app/shared/context-menu/context-menu.component.html
new file mode 100644
index 0000000..d584ede
--- /dev/null
+++ b/src/app/shared/context-menu/context-menu.component.html
@@ -0,0 +1,12 @@
+<div class="context-menu-container"
+    [ngClass]="{ animated: animate, 'menu-open': isOpen }">
+
+    <div class="menu-item" *ngFor="let item of menuItems">
+        <hr *ngIf="item.isSeparator">
+
+        <div *ngIf="!item.isSeparator">
+            {{ item.text }}
+        </div>
+    </div>
+</div>
+
diff --git a/src/app/shared/context-menu/context-menu.component.ts b/src/app/shared/context-menu/context-menu.component.ts
new file mode 100644
index 0000000..cba2561
--- /dev/null
+++ b/src/app/shared/context-menu/context-menu.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+import { ContextMenuItem } from './context-menu-item.model';
+
+@Component({
+    selector: 'tb-context-menu',
+    templateUrl: 'app/shared/context-menu/context-menu.component.html'
+})
+export class ContextMenu {
+    @Input('menu-items') menuItems: Array<ContextMenuItem>;
+
+    isOpen = false;
+    animate = true;
+
+    constructor() {
+        // TODO
+    }
+}
+
diff --git a/src/app/shared/context-menu/index.ts b/src/app/shared/context-menu/index.ts
new file mode 100644
index 0000000..4a4e884
--- /dev/null
+++ b/src/app/shared/context-menu/index.ts
@@ -0,0 +1,2 @@
+export * from './context-menu.component';
+export * from './context-menu-item.model';
diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts
index 8a3f99c..f3dc18a 100644
--- a/src/app/shared/index.ts
+++ b/src/app/shared/index.ts
@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './auth/index';
+export * from './context-menu/index';
 export * from './inline-edit/inline-edit.component';
 export * from './modal/index';
 export * from './models/index';
diff --git a/src/scss/_context-menu.scss b/src/scss/_context-menu.scss
new file mode 100644
index 0000000..3848a0d
--- /dev/null
+++ b/src/scss/_context-menu.scss
@@ -0,0 +1,8 @@
+.context-menu-container {
+    display: none;
+
+    &.menu-open {
+        display: block;
+    }
+}
+
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 7d50e42..4eb1ffc 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -27,4 +27,5 @@
 @import 'icons';
 @import 'notifications';
 @import 'modal';
+@import 'context-menu';