reivilibre/TaskBoard
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 2 Wiki Activity

Remove compile directive and initial new context menu

Browse Source
This commit is contained in:
Matthew Ross 2018-06-08 16:41:01 -04:00
parent fe080b9817
commit c58e54b176
17 changed files with 255 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
package-lock.json generated
View File

@ -429,19 +429,19 @@
}
},
"@angular-devkit/schematics": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.7.tgz",
"integrity": "sha512-DdVYUJls09w+efSZAN96WdcwrAZ6dnJGcUeep7TvImCTu26UPmckEw/yy0HvfM1rSZZsu/VN8r1PoaQTbGc2vw==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.8.tgz",
"integrity": "sha512-R4YqAUdo62wtrhX/5HSRGSKXNTWqfQb66ZE6m8jj6GEJNFKdNXMdxOchxr07LCiKTxfh1w6G3nGzxIsu/+D4KA==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.7",
"@angular-devkit/core": "0.6.8",
"rxjs": "^6.0.0"
},
"dependencies": {
"@angular-devkit/core": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz",
"integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz",
"integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==",
"dev": true,
"requires": {
"ajv": "~6.4.0",
@ -764,24 +764,24 @@
}
},
"@angular/animations": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.3.tgz",
"integrity": "sha512-X8ey0dvh2ielxPCJOCcdNPAmKW5toCpzHdbjdZqlR9o6uP1UmzEKHd7Un7jVIINRtq9ZB7vnFWIJl0BA7C8U0g==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.4.tgz",
"integrity": "sha512-Ro1XEwShk8XRAogfu73fKLTBLnND1s+MGhN+ymwr7ib9hqxVr7jMNE+MXPqG2/1BX9c+7NHb30B8G4woQn62vw==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/cli": {
"version": "6.0.7",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.7.tgz",
"integrity": "sha512-rPFhPjT6TegRV5qENEgg0MwQKFDuqbF+OoEqgE5QjTQC2gQhnG/sHOgyqixHtvdLOaPfZczCjEltGQj/ELArqw==",
"version": "6.0.8",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.8.tgz",
"integrity": "sha512-DhH1Zq5Yonthw6zh6W07fhf+9XrAZbD1fcQ0MrmbxlieCfLlTAdBqyK2LavFCKwSZkUMLF6UHM3+jiNRVZSSIg==",
"dev": true,
"requires": {
"@angular-devkit/architect": "0.6.7",
"@angular-devkit/core": "0.6.7",
"@angular-devkit/schematics": "0.6.7",
"@schematics/angular": "0.6.7",
"@schematics/update": "0.6.7",
"@angular-devkit/architect": "0.6.8",
"@angular-devkit/core": "0.6.8",
"@angular-devkit/schematics": "0.6.8",
"@schematics/angular": "0.6.8",
"@schematics/update": "0.6.8",
"opn": "~5.3.0",
"resolve": "^1.1.7",
"rxjs": "^6.0.0",
@ -792,19 +792,19 @@
},
"dependencies": {
"@angular-devkit/architect": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.7.tgz",
"integrity": "sha512-ULn46EmEJ9/AD9LJ9DwFtT1CcujpC3x1FSYjpPWqmyv1CH0vsjtMSgUCBUPIonqM4jRjDvIuxclpWJrsH/t9og==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.8.tgz",
"integrity": "sha512-ZKTm/zC61iY9IBHOEAKoMSzZpvhkmv+1O/HHzpHEuR551jCzu6vSyCmMY9Z7GBcccscCV+hjeSMwgFrFRcqlkw==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.7",
"@angular-devkit/core": "0.6.8",
"rxjs": "^6.0.0"
}
},
"@angular-devkit/core": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz",
"integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz",
"integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==",
"dev": true,
"requires": {
"ajv": "~6.4.0",
@ -1142,31 +1142,31 @@
}
},
"@angular/common": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.3.tgz",
"integrity": "sha512-tqEYeEXoaw2kzSUfTrmC3ruJ87trS61SHayIf56f/jtEVn+4pbgJDTNvLSnB6QEaMTn7sX6QBroauMWmdTVSvA==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.4.tgz",
"integrity": "sha512-z2UE6a43u49omsqjzwdHhwD+wpCPauuD13FMkVQMLwzugKhNri0LjMk5I0I9xLz9OyXICm2B+wPAQN4d07savg==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/compiler": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.3.tgz",
"integrity": "sha512-nS65UI6f7grs2k+ggtkwXSBUQ1D/LVSFfXjWR5olxATx25QbIKABec90JphPE4FfhhVm1uonQ/vaSVCjh83Euw==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.4.tgz",
"integrity": "sha512-qwjuPacuRKUroD+xev653mljV9Jwhi2tvwGo/cVadq0isJ2rVH1hO6sa1FWFnNf1KPnyolMobZlMgg8DFW/yRw==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/compiler-cli": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.3.tgz",
"integrity": "sha512-n7L/g2leGSl1LffZ3ZuB5bY4sJoZWjkG5tg9IafXQ8nAIUtKPl+ovoiNUhAaA4CvlUlgYHMcbezKpc9285LnyQ==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.4.tgz",
"integrity": "sha512-bkN21JJrsbIdXNfOc9I9iB7AETUe4/QvApC25R3/pERSyhkK7UNNHTqg4FY5xMdSxlZd1ccWj8rvSbS+hFbTBw==",
"dev": true,
"requires": {
"chokidar": "^1.4.2",
"minimist": "^1.2.0",
"reflect-metadata": "^0.1.2",
"tsickle": "^0.27.2"
"tsickle": "^0.29.0"
},
"dependencies": {
"minimist": {
@ -1178,55 +1178,55 @@
}
},
"@angular/core": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.3.tgz",
"integrity": "sha512-YJk0kS/V9C2JFKMHfiw6TNxmfkYWGW4HzqGOm/VoPkvj9O4Erkz/OtOOc8hYGmXFmQz1UpOAByzY2XIlEi72XQ==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.4.tgz",
"integrity": "sha512-WCW8wyRoIKkjGjOjVLFpUyhQw/K0//s3W0qo1/vH6m9njC63jP/VP+2Xnt8bdtgeET2NYUeyl+w/0vUXqYlnEA==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/forms": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.3.tgz",
"integrity": "sha512-YAjRMERggkzb3cIo8iKOz1xB89Ko4fSh4A1suqrv9o2Xu41Qxs6LwrWVW+6x+N5kBzvbKFZyADqSz1otMQP83Q==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.4.tgz",
"integrity": "sha512-JcKyCCkAwF3NlWuwPxtpRhFX/8QbFUkA4W0N62L+Odm8G0/P4QhMw/99o5kRs5xrsQRVyFlGvdYOrkgDyyZkGg==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/http": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.3.tgz",
"integrity": "sha512-9GF4hEsm/mK/kk+skn1y54IpsSGcgGnFxHctEFSSyUKTub9gFirkbuLOx9T9fXIKtXqCxnXolHCE7ncfOfS7GA==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.4.tgz",
"integrity": "sha512-bq7cS0/5hM3Af3FolEe7HpKP19/7MJWIPGi5k9rYCGM4dXKFiKa+LA/SbXE0DMiKxhAQbZDwQ9HN04r70DRyBQ==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/language-service": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.3.tgz",
"integrity": "sha512-yeEMS8GwEhyMKD4nlzg/0Ug56k5Zb58uShjVlh+kr6WWHMRzAtecvNHePlakPjxyWzf/EIDWnMJV31HGOGQYZg==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.4.tgz",
"integrity": "sha512-LyFh/sFtnyjJJYO5UKM31nGSSkmGYFMwqzwbG+l0QNQXNoa9jj+OApvu0oOY5F0WP9DBrOAzj74j2M5olprtMQ==",
"dev": true
},
"@angular/platform-browser": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.3.tgz",
"integrity": "sha512-OTgOE6WzytV9fnnCwvoyyXI4Avzmfu9RbBUhVRVontov6LlN9XL8BrzLidT7/lPAEQmHuoRCuNrSSY8TokPJCA==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.4.tgz",
"integrity": "sha512-4y6rSqOLuBs+RL0CIM+RZ5T8a5Tm1NisZcTUGvM8lVYPNkqTzNfHQXhBq8mTgRw9JopEwOj+UEqBbgrNX715yQ==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/platform-browser-dynamic": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.3.tgz",
"integrity": "sha512-OSaBiog3jH52c+pJhG6qsZjVipzw3ThTcFaymetlBwdRkZ9ch7eIQFhlIXPe4oM3wJt39LTG7peRymWPbnx4uw==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.4.tgz",
"integrity": "sha512-uh7MoQi9kyKPFHrD7HPOU5gWyhF4pPJuGltyMTOtM/f5TNL9QQI2EugijKnnSFLQ8+7UQjmFAVeRqH9jylhIyQ==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/router": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.3.tgz",
"integrity": "sha512-7pQYu5DnNXwZ8nZrKtTpBo3HQoirKSP2hGAoHA0rPsqZvavBfuhUzsksYVvKvFEtoPmBe69uEYydhr115MTTNQ==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.4.tgz",
"integrity": "sha512-IKUtbbRtHN8I+Hp8/pLqBPyXJmQHrPFGzKU3H43TovD++mmT5AaYVCeJgkGUB//wjtLN3y0X/yrmyWFWcN35Gw==",
"requires": {
"tslib": "^1.9.0"
}
@ -1243,20 +1243,20 @@
}
},
"@schematics/angular": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.7.tgz",
"integrity": "sha512-gO7xSSzBQhj1t8aD3qBd03rj3hJ1XIWJ9rzLsPpC5hVfmMCpsc6cBnwm2asJ+eZlZUah46ZDhwlnMFEu8Sfczw==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.8.tgz",
"integrity": "sha512-9kRphqTYG5Df/I8fvnT1zMsw0YNDPO9tl18tQZXj4am4raT7l9UCr+WkwJdlBoA5pwG6baWE9sL0iGWV/bzF/g==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.7",
"@angular-devkit/schematics": "0.6.7",
"@angular-devkit/core": "0.6.8",
"@angular-devkit/schematics": "0.6.8",
"typescript": ">=2.6.2 <2.8"
},
"dependencies": {
"@angular-devkit/core": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz",
"integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz",
"integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==",
"dev": true,
"requires": {
"ajv": "~6.4.0",
@ -1579,13 +1579,13 @@
}
},
"@schematics/update": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.7.tgz",
"integrity": "sha512-uogLzGy3+/VlbQdevn/7WFTfs2Utl5ffwN17eCNayRuXmNyHlytKtz7cx8m1w9oj/VYxZXPbWTDVM1Hlnd/mqQ==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.8.tgz",
"integrity": "sha512-1Uq7LYnwL2wBwGVCgNz76QAR13ghAk+2vDDHOi+VX5+usHManxydrpoMGeX66OBPd+y5D3D2MFb+8mYHE7mygg==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.7",
"@angular-devkit/schematics": "0.6.7",
"@angular-devkit/core": "0.6.8",
"@angular-devkit/schematics": "0.6.8",
"npm-registry-client": "^8.5.1",
"rxjs": "^6.0.0",
"semver": "^5.3.0",
@ -1593,9 +1593,9 @@
},
"dependencies": {
"@angular-devkit/core": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.7.tgz",
"integrity": "sha512-kzNI95g3of8C0an2U/lUa2ixqABFKQt06VfzSz6pUCl/RJblLnxua9dgsSb8jc0eDQ5ZmekXN0UgkED0JDYXsQ==",
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.8.tgz",
"integrity": "sha512-rkIa1OSVWTt4g9leLSK/PsqOj3HZbDKHbZjqlslyfVa3AyCeiumFoOgViOVXlYgPX3HHDbE5uH24nyUWSD8uww==",
"dev": true,
"requires": {
"ajv": "~6.4.0",
@ -13418,9 +13418,9 @@
}
},
"tsickle": {
"version": "0.27.5",
"resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.27.5.tgz",
"integrity": "sha512-NP+CjM1EXza/M8mOXBLH3vkFEJiu1zfEAlC5WdJxHPn8l96QPz5eooP6uAgYtw1CcKfuSyIiheNUdKxtDWCNeg==",
"version": "0.29.0",
"resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.29.0.tgz",
"integrity": "sha512-JpID0Lv8/irRtPmqJJxb5fCwfZhjZeKmav9Zna7UjqVuJoSbI49Wue/c2PPybX1SbRrjl7bbI/JsCl0dSUJygA==",
"dev": true,
"requires": {
"minimist": "^1.2.0",

24
package.json
View File

@ -40,15 +40,15 @@
"postinstall": "cd src/api/ && composer update && composer install --optimize-autoloader && cd ../../"
},
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@angular/animations": "^6.0.4",
"@angular/common": "^6.0.4",
"@angular/compiler": "^6.0.4",
"@angular/core": "^6.0.4",
"@angular/forms": "^6.0.4",
"@angular/http": "^6.0.4",
"@angular/platform-browser": "^6.0.4",
"@angular/platform-browser-dynamic": "^6.0.4",
"@angular/router": "^6.0.4",
"chartist": "^0.11.0",
"chartist-plugin-tooltips": "^0.0.17",
"classlist.js": "^1.1.20150312",
@ -64,9 +64,9 @@
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.5",
"@angular/cli": "^6.0.7",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "^6.0.4",
"@angular/language-service": "^6.0.4",
"@types/jasmine": "~2.8.7",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.1.4",

4
src/app/board/column/column.component.html
View File

@ -86,7 +86,9 @@
(dblclick)="$event.preventDefault();showViewModal(task.id)"></tb-task>
</div>
<tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>
<tb-context-menu>
<tb-context-menu-item>Column Test</tb-context-menu-item>
</tb-context-menu>
<tb-modal *ngIf="activeBoard && columnData"
modal-title="{{ strings['boards_viewTask'] }} - {{ viewModalProps.title }}"

10
src/app/board/column/column.component.ts
View File

@ -19,7 +19,6 @@ import {
Category,
Column,
Comment,
ContextMenuItem,
Notification,
Task,
User,
@ -67,7 +66,6 @@ export class ColumnDisplay implements OnInit, OnDestroy {
public userOptions: UserOptions;
public activeUser: User;
public activeBoard: Board;
public contextMenuItems: Array<ContextMenuItem>;
public quickAdd: Task;
public MODAL_CONFIRM_ID: string;
@ -102,10 +100,10 @@ export class ColumnDisplay implements OnInit, OnDestroy {
let sub = stringsService.stringsChanged.subscribe(newStrings => {
this.strings = newStrings;
this.contextMenuItems = [
new ContextMenuItem(this.strings.boards_addTask,
this.getShowModalFunction())
];
// this.contextMenuItems = [
// new ContextMenuItem(this.strings.boards_addTask,
// this.getShowModalFunction())
// ];
});
this.subs.push(sub);

6
src/app/board/task/task.component.html
View File

@ -55,6 +55,10 @@
[title]="getPercentTitle()"></div>
</div>
<tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>
<tb-context-menu>
<tb-context-menu-item>
Task Test
</tb-context-menu-item>
</tb-context-menu>
</div>

153
src/app/board/task/task.component.ts
View File

@ -14,7 +14,6 @@ import {
ApiResponse,
Board,
Column,
ContextMenuItem,
Notification,
Task,
UserOptions
@ -42,7 +41,6 @@ export class TaskDisplay implements OnInit {
public activeBoard: Board;
public userOptions: UserOptions;
public boardsList: Array<Board>;
public contextMenuItems: Array<ContextMenuItem>;
@Input('task') taskData: Task;
@Input('add-task') addTask: Function;
@ -56,7 +54,7 @@ export class TaskDisplay implements OnInit {
@Input('boards')
set boards(boards: Array<Board>) {
this.boardsList = boards;
this.generateContextMenuItems();
// this.generateContextMenuItems();
}
constructor(private auth: AuthService,
@ -69,13 +67,12 @@ export class TaskDisplay implements OnInit {
this.totalTasks = 0;
this.completeTasks = 0;
this.percentComplete = 0;
this.contextMenuItems = [];
stringsService.stringsChanged.subscribe(newStrings => {
this.strings = newStrings;
if (this.taskData) {
this.generateContextMenuItems();
// this.generateContextMenuItems();
}
});
@ -101,7 +98,7 @@ export class TaskDisplay implements OnInit {
complete: 0
};
this.generateContextMenuItems();
// this.generateContextMenuItems();
this.initMarked();
this.calcPercentComplete();
this.checkDueDate();
@ -274,28 +271,28 @@ export class TaskDisplay implements OnInit {
return text;
}
private getMoveMenuItem() {
let menuText = this.strings.boards_moveTask +
': <select id="columnsList' + this.taskData.id + '" ' +
'(click)="action($event)">' +
'<option value="0">' + this.strings.boards_selectColumn + '</option>';
this.activeBoard.columns.forEach((column: Column) => {
menuText += '<option value="' + column.id + '">' + column.name + '</option>';
});
menuText += '</select>';
let action = (event: any) => {
if (event.target.tagName !== 'SELECT') {
return;
}
this.changeTaskColumn();
};
return new ContextMenuItem(menuText, action, false, false, true);
}
// private getMoveMenuItem() {
// let menuText = this.strings.boards_moveTask +
// ': <select id="columnsList' + this.taskData.id + '" ' +
// '(click)="action($event)">' +
// '<option value="0">' + this.strings.boards_selectColumn + '</option>';
//
// this.activeBoard.columns.forEach((column: Column) => {
// menuText += '<option value="' + column.id + '">' + column.name + '</option>';
// });
//
// menuText += '</select>';
//
// let action = (event: any) => {
// if (event.target.tagName !== 'SELECT') {
// return;
// }
//
// this.changeTaskColumn();
// };
//
// return new ContextMenuItem(menuText, action, false, false, true);
// }
private calcPercentComplete() {
this.percentComplete = 0;
@ -314,57 +311,57 @@ export class TaskDisplay implements OnInit {
}
}
private generateContextMenuItems() {
this.contextMenuItems = [
new ContextMenuItem(this.strings.boards_viewTask, this.viewTask),
new ContextMenuItem(this.strings.boards_editTask, this.editTask),
new ContextMenuItem(this.strings.boards_removeTask, this.removeTask),
new ContextMenuItem('', null, true),
this.getMoveMenuItem(),
new ContextMenuItem('', null, true),
new ContextMenuItem(this.strings.boards_addTask, this.addTask)
];
// private generateContextMenuItems() {
// this.contextMenuItems = [
// new ContextMenuItem(this.strings.boards_viewTask, this.viewTask),
// new ContextMenuItem(this.strings.boards_editTask, this.editTask),
// new ContextMenuItem(this.strings.boards_removeTask, this.removeTask),
// new ContextMenuItem('', null, true),
// this.getMoveMenuItem(),
// new ContextMenuItem('', null, true),
// new ContextMenuItem(this.strings.boards_addTask, this.addTask)
// ];
//
// if (this.boardsList && this.boardsList.length > 1) {
// this.contextMenuItems
// .splice(3, 0,
// new ContextMenuItem('', null, true),
// this.getMenuItem(this.strings.boards_copyTaskTo),
// this.getMenuItem(this.strings.boards_moveTaskTo));
// }
// }
if (this.boardsList && this.boardsList.length > 1) {
this.contextMenuItems
.splice(3, 0,
new ContextMenuItem('', null, true),
this.getMenuItem(this.strings.boards_copyTaskTo),
this.getMenuItem(this.strings.boards_moveTaskTo));
}
}
private getMenuItem(text: string): ContextMenuItem {
let menuText = text + ': ' +
'<i class="icon icon-help-circled" ' +
'data-help="' + this.strings.boards_copyMoveHelp + '"></i> ' +
'<select id="boardsList' + this.taskData.id + text.split(' ')[0] + '" ' +
'(click)="action($event)">' +
'<option value="0">' + this.strings.boards_selectBoard + '</option>';
this.boardsList.forEach((board: Board) => {
if (board.name !== this.activeBoard.name) {
menuText += '<option value="' + board.id + '">' + board.name + '</option>';
}
});
menuText += '</select>';
let action = (event: any) => {
if (event.target.tagName !== 'SELECT') {
return;
}
if (text === this.strings.boards_copyTaskTo) {
this.copyTaskToBoard();
return;
}
this.moveTaskToBoard();
};
return new ContextMenuItem(menuText, action, false, false, true);
}
// private getMenuItem(text: string): ContextMenuItem {
// let menuText = text + ': ' +
// '<i class="icon icon-help-circled" ' +
// 'data-help="' + this.strings.boards_copyMoveHelp + '"></i> ' +
// '<select id="boardsList' + this.taskData.id + text.split(' ')[0] + '" ' +
// '(click)="action($event)">' +
// '<option value="0">' + this.strings.boards_selectBoard + '</option>';
//
// this.boardsList.forEach((board: Board) => {
// if (board.name !== this.activeBoard.name) {
// menuText += '<option value="' + board.id + '">' + board.name + '</option>';
// }
// });
//
// menuText += '</select>';
//
// let action = (event: any) => {
// if (event.target.tagName !== 'SELECT') {
// return;
// }
//
// if (text === this.strings.boards_copyTaskTo) {
// this.copyTaskToBoard();
// return;
// }
//
// this.moveTaskToBoard();
// };
//
// return new ContextMenuItem(menuText, action, false, false, true);
// }
private initMarked() {
let renderer = new marked.Renderer();

84
src/app/shared/compile/compile.directive.ts
View File

@ -1,84 +0,0 @@
import {
Compiler,
Component,
ComponentRef,
Directive,
Input,
ModuleWithComponentFactories,
NgModule,
OnChanges,
Type,
ViewContainerRef
} from '@angular/core';
import { CommonModule } from '@angular/common';
@Directive({
selector: '[compile]'
})
export class CompileDirective implements OnChanges {
@Input() compile: string;
@Input() compileContext: any;
compRef: ComponentRef<any>;
constructor(private vcRef: ViewContainerRef,
private compiler: Compiler) { }
ngOnChanges() {
if (!this.compile) {
if (this.compRef) {
this.updateProperties();
return;
}
throw Error('You forgot to provide template');
}
this.vcRef.clear();
this.compRef = null;
const component = this.createDynamicComponent(this.compile);
const module = this.createDynamicModule(component);
this.compiler.compileModuleAndAllComponentsAsync(module)
.then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
let compFactory = moduleWithFactories.componentFactories
.find(x => x.componentType === component);
this.compRef = this.vcRef.createComponent(compFactory);
this.updateProperties();
})
.catch(error => {
console.error(error); // tslint:disable-line
});
}
updateProperties() {
for (let prop in this.compileContext) {
if (this.compileContext.hasOwnProperty(prop)) {
this.compRef.instance[prop] = this.compileContext[prop];
}
}
}
private createDynamicComponent (template: string) {
@Component({
selector: 'custom-dynamic-component',
template
})
class CustomDynamicComponent {}
return CustomDynamicComponent;
}
private createDynamicModule (component: Type<any>) {
@NgModule({
imports: [CommonModule],
declarations: [component]
})
class DynamicModule {}
return DynamicModule;
}
}

2
src/app/shared/context-menu/context-menu-item.component.html Normal file
View File

@ -0,0 +1,2 @@
<ng-content *ngIf="!isSeparator; else separator"></ng-content>
<ng-template #separator><hr></ng-template>

53
src/app/shared/context-menu/context-menu-item.component.ts
View File

@ -1,8 +1,53 @@
import { Component } from '@angular/core';
import {
Component,
ElementRef,
EventEmitter,
Input,
Output
} from '@angular/core';
@Component({
selector: 'tb-context-menu-item',
template:`<hr *ngIf="isSeparator;else inner_content">
<ng-content #inner_content></ng-content>
`
templateUrl: './context-menu-item.component.html',
styles: [`:host {
cursor: pointer;
display: block;
padding: 4px 10px;
user-select: none;
:hover:not([ng-reflect-is-separator]) {
background-color: lighten($color-background, 5%);
}
}`]
})
export class ContextMenuItem {
@Input()
isSeparator: boolean;
@Output()
clickEvent: EventEmitter<MouseEvent> = new EventEmitter();
constructor(private el: ElementRef) {
const elem = el.nativeElement;
elem.onclick = (event) => {
if (this.isSeparator) {
this.killEvent(event);
return;
}
this.clickEvent.next(event);
};
elem.oncontextmenu = (event) => {
this.killEvent(event);
}
}
private killEvent(event) {
event.preventDefault();
event.stopPropagation();
}
}

11
src/app/shared/context-menu/context-menu.component.html
View File

@ -1,11 +1,4 @@
<div class="context-menu-container"
[ngClass]="{ 'menu-open': isOpen }"
(click)="$event.stopPropagation()">
<div class="menu-item" *ngFor="let item of menuItems"
(click)="menuService.closeAllMenus()"
[ngClass]="{ 'no-highlight': item.isSeparator || !item.canHighlight }">
<ng-content></ng-content>
</div>
<div class="context-menu-container" *ngIf="isOpen">
<ng-content></ng-content>
</div>

50
src/app/shared/context-menu/context-menu.component.ts
View File

@ -1,11 +1,5 @@
import {
Component,
Input,
ElementRef
} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Component, ElementRef } from '@angular/core';
import { ContextMenuItem } from './context-menu-item.model';
import { ContextMenuService } from './context-menu.service';
@Component({
@ -13,53 +7,35 @@ import { ContextMenuService } from './context-menu.service';
templateUrl: './context-menu.component.html'
})
export class ContextMenu {
@Input('menu-items') menuItems: Array<ContextMenuItem>;
isOpen = false;
public isOpen = false;
constructor(public el: ElementRef,
private menuService: ContextMenuService,
private sanitizer: DomSanitizer) {
private menuService: ContextMenuService) {
menuService.registerMenu(this);
let parentElement = el.nativeElement.parentElement;
const parentEl = el.nativeElement.parentElement;
parentElement.oncontextmenu = (event: MouseEvent) => {
parentEl.oncontextmenu = (event: MouseEvent) => {
this.parentEventHandler(event);
};
}
getText(item: ContextMenuItem): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(item.text);
}
private captureChildEvents(event: MouseEvent) {
private parentEventHandler(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
}
private parentEventHandler(event: MouseEvent) {
this.captureChildEvents(event);
this.onParentContextMenu(event);
}
private onParentContextMenu(event: MouseEvent) {
this.menuService.closeAllMenus();
this.el.nativeElement.style.top = '-10000px';
this.isOpen = true;
let edgeBuffer = 10;
let target = this.el.nativeElement.firstElementChild;
// Set to the event position by default
target.style.left = event.pageX + 'px';
target.style.top = event.pageY + 'px';
const edgeBuffer = 10;
// Adjust position if near an edge
let adjustPosition = () => {
let rect = target.getBoundingClientRect();
let offsetX = (event.pageX + rect.width + edgeBuffer) > window.innerWidth;
let offsetY = (event.pageY + rect.height + edgeBuffer) > window.innerHeight;
const adjustPosition = () => {
const target = this.el.nativeElement.firstElementChild;
const rect = target.getBoundingClientRect();
const offsetX = (event.pageX + rect.width + edgeBuffer) > window.innerWidth;
const offsetY = (event.pageY + rect.height + edgeBuffer) > window.innerHeight;
target.style.left = event.pageX - (offsetX ? rect.width : 0) + 'px';
target.style.top = event.pageY - (offsetY ? rect.height : 0) + 'px';

17
src/app/shared/context-menu/context-menu.service.ts
View File

@ -4,18 +4,21 @@ import { ContextMenu } from './context-menu.component';
@Injectable()
export class ContextMenuService {
private menus: Array<ContextMenu>;
private menus: Array<ContextMenu> = [];
constructor() {
this.menus = [];
document.addEventListener('click', event => {
this.closeAllMenus();
});
document.addEventListener('click', event => { this.closeAllMenus(); });
}
registerMenu(newMenu: ContextMenu) {
this.menus.push(newMenu);
const index = this.menus.indexOf(newMenu);
if (index === -1) {
this.menus.push(newMenu);
return;
}
this.menus[index] = newMenu;
}
closeAllMenus() {

1
src/app/shared/models/index.ts
View File

@ -6,7 +6,6 @@ export * from './board.model';
export * from './category.model';
export * from './column.model';
export * from './comment.model';
export * from '../context-menu/context-menu-item.model';
export * from './issue-tracker.model';
export * from './notification.model';
export * from './task.model';

6
src/app/shared/shared.module.ts
View File

@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
import { AuthGuard } from './auth/auth.guard';
import { AuthService } from './auth/auth.service';
import { CompileDirective } from './compile/compile.directive';
import { ContextMenu } from './context-menu/context-menu.component';
import { ContextMenuItem } from './context-menu/context-menu-item.component';
import { ContextMenuService } from './context-menu/context-menu.service';
import { InlineEdit } from './inline-edit/inline-edit.component';
import { Modal } from './modal/modal.component';
@ -33,8 +33,8 @@ import { Constants } from './constants';
CommonModule
],
declarations: [
CompileDirective,
ContextMenu,
ContextMenuItem,
InlineEdit,
Modal,
Notifications,
@ -50,8 +50,8 @@ import { Constants } from './constants';
StringsService
],
exports: [
CompileDirective,
ContextMenu,
ContextMenuItem,
InlineEdit,
Modal,
Notifications,

27
src/scss/_context-menu.scss
View File

@ -1,8 +1,6 @@
.collapsed {
.context-menu-container {
&.menu-open {
display: none;
}
display: none;
}
}
@ -12,32 +10,9 @@
background-color: $white;
border-radius: 3px;
color: $color-text;
display: none;
padding: 5px 0;
position: fixed;
width: 200px;
z-index: 100;
&.menu-open {
display: block;
}
.menu-item {
cursor: pointer;
padding: 4px 10px;
user-select: none;
&:hover {
background-color: lighten($color-background, 5%);
}
&.no-highlight {
cursor: default;
&:hover {
background-color: $white;
}
}
}
}

2
test/app/board/task/task.component.spec.ts
View File

@ -180,7 +180,7 @@ describe('TaskDisplay', () => {
component.boards = <any>[{ id: 1, name: 'one' }, { id: 2, name: 'test' }];
expect(component.contextMenuItems.length).toEqual(10);
// expect(component.contextMenuItems.length).toEqual(10);
});
it('calls a service to copy a task to another board', () => {

7
test/app/shared/context-menu/context-menu.component.spec.ts
View File

@ -55,12 +55,5 @@ describe('ContextMenu', () => {
});
});
it('gets HTML formatted text from items', () => {
let actual = component.getText(<any>{ text: '<p>Test</p>' });
expect((<any>actual).changingThisBreaksApplicationSecurity)
.toEqual('<p>Test</p>');
});
});