added tags and filtering functionality

Author: Vlad Sternbach

package.json

@@ -20,7 +20,8 @@
   "dependencies": {
     "angular": "^1.5.3",
     "angular-sanitize": "^1.5.3",
-    "angular-ui-router": "^0.2.18"
+    "angular-ui-router": "^0.2.18",
+    "ng-tags-input": "^3.0.0"
   },
   "scripts": {
     "prestart": "npm install",

src/assets/ng-tags-input.min.css

@@ -11,7 +11,7 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 79px;
+    left: 15px;
     z-index: -1;
     display: block;
     width: 2px;

src/components/comment-list/comment-list.scss

@@ -3,23 +3,47 @@
  */
 import Component from '../../decorators';
 import './comment-list.scss';
+import {IComment} from "../../interfaces";
 
 @Component('app.components', 'comments', {
     template: `
         <div class="container-fluid">
             <div class="discussion-timeline">
-              <comment ng-repeat="comment in $ctrl.comments" comment="comment"></comment>
-              <!--<comment></comment>-->
+                <tags-input ng-model="$ctrl.tagFilter">
+                    <auto-complete source="$ctrl.tags"></auto-complete>
+                </tags-input>
+                <comment ng-repeat="comment in $ctrl.comments | filterByTags:$ctrl.tagFilter" comment="comment" tags="$ctrl.tags"></comment>
+                <comment comment="$ctrl.emptyComment" on-add="$ctrl.addComment()" tags="$ctrl.tags"></comment>
             </div>
         </div>`
 })
 class CommentsController {
-    comments;
+    comments: IComment[];
+    emptyComment: IComment;
+    tags: string[];
+    tagFilter: any[];
 
     static $inject = ['Comments'];
     constructor(private Comments) {
+        this.emptyComment = {};
+        this.tagFilter = [];
         Comments.getComments().then((comments) => {
-            this.comments = comments
+            this.comments = comments;
+            this.tags = this.comments
+                .map((el) => el.tags)
+                .reduce((prev, curr) => [...prev, ...curr])
+                .filter((elem, pos, arr) => arr.indexOf(elem) == pos);
         });
     }
+
+    private getCommentId() {
+        let arr = this.comments.map((el) => el.id);
+        return Math.max(...arr) + 1;
+    }
+
+    addComment() {
+        this.emptyComment.id = this.getCommentId();
+        this.comments.push(this.emptyComment);
+        this.emptyComment = {};
+    }
 }

src/components/comment-list/comments.component.ts

@@ -3,8 +3,14 @@
  */
 import Component from '../../decorators';
 import './comment.scss';
+import {IComment} from "../../interfaces";
 
 @Component('app.components', 'comment', {
+    bindings: {
+        comment: '=',
+        tags: '=',
+        onAdd: '&'
+    },
     template: `
         <div class="comment-wrapper">
             <div class="comment" ng-class="{'comment-edit': $ctrl.editMode}">
@@ -32,23 +38,25 @@ import './comment.scss';
                     </div>
                     <div class="comment-body" ng-bind-html="$ctrl.comment.text"></div>
                 </div>
+                <tags-input ng-model="$ctrl.comment.inputTags" placeholder="Add tags">
+                    <auto-complete source="$ctrl.tags"></auto-complete>
+                </tags-input>
                 <div class="form-actions">
                     <button ng-click="$ctrl.save()" class="btn btn-primary" tabindex="2">Comment</button>
-                    <button ng-click="$ctrl.discard()" class="btn" tabindex="3">Discard</button>
+                    <button ng-if="$ctrl.comment.id" ng-click="$ctrl.discard()" class="btn" tabindex="3">Discard</button>
                 </div>
             </div>
-        </div>`,
-    bindings: {
-        comment: '='
-    }
+        </div>`
 })
 class CommentController {
     editMode: boolean;
-    comment: any;
-    commentCopy: any;
+    comment: IComment;
+    commentCopy: IComment;
+    onAdd: any;
 
     constructor() {
-        this.editMode = false;
+        this.editMode = !this.comment.id;
+        this.comment.inputTags = angular.copy(this.comment.tags);
     }
 
     edit() {
@@ -57,7 +65,9 @@ class CommentController {
     }
 
     save() {
-        this.editMode = false;
+        this.editMode = !this.comment.id;
+        this.comment.tags = this.comment.inputTags.map((el:any) => el.text);
+        (this.onAdd || angular.noop)();
     }
 
     discard() {

src/components/comment/comment.component.ts

@@ -1,6 +1,5 @@
 .comment-wrapper {
   position: relative;
-  padding-left: 64px;
   margin-top: 15px;
   margin-bottom: 15px;
   border-top: 2px solid #fff;
@@ -12,6 +11,21 @@
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 3px;
+  &.comment-edit tags-input {
+    display: block;
+  }
+  tags-input {
+    display: none;
+    margin: -5px 10px 10px 10px;
+  }
+}
+
+tags-input {
+  .tags {
+    border-radius: 3px;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+    border: 1px solid #ddd;
+  }
 }
 
 .comment-header {
@@ -50,7 +64,6 @@
   width: 100%;
   padding: 6px 10px;
   font-size: 16px;
-  background-color: #fafafa;
   min-height: 34px;
   color: #333;
   vertical-align: middle;

src/components/comment/comment.scss

@@ -1,4 +1,17 @@
 /**
  * Created by voland on 4/2/16.
  */
-export default angular.module('app.components', [])
+
+
+export default angular.module('app.components', [])
+    .filter('filterByTags', () => (comments, tags) => {
+        if (!tags.length) return comments;
+        function check(comment) {
+            let filterArray = tags.map((tag: any) => tag.text);
+            let findCount = filterArray
+                .map((tag) => comment.tags.indexOf(tag) > -1 ? 1 : 0)
+                .reduce((prev, curr) => prev + curr);
+            return findCount === filterArray.length;
+        }
+        return comments.filter(check);
+    })

src/components/components.module.ts

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>My AngularJS App</title>
+  <link href="assets/ng-tags-input.min.css" rel="stylesheet">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

src/index.html

@@ -0,0 +1,7 @@
+export interface IComment {
+    id?: number;
+    title?: string;
+    text?: string;
+    tags?: string[]
+    inputTags?: string[]
+}

src/interfaces.ts

@@ -4,26 +4,37 @@
 import 'angular';
 import 'angular-sanitize';
 import 'angular-ui-router';
+import 'ng-tags-input';
 
 import services   from './services/services.module';
 import components from './components/components.module';
-import './components/comment/comment.component.ts';
-import './components/comment-list/comments.component.ts';
+import './components/comment/comment.component';
+import './components/comment-list/comments.component';
 
 // configure the main module
 angular.module('app', [
+    'ngTagsInput',
     'ngSanitize',
     'ui.router',
     services.name,
     components.name
 ])
-.config(function($urlRouterProvider, $stateProvider) {
+.config(function($urlRouterProvider, $stateProvider, tagsInputConfigProvider) {
     $urlRouterProvider.otherwise('/');
     $stateProvider
         .state('index', {
             url: '/',
             template: '<comments></comments>'
         });
+
+    tagsInputConfigProvider
+        .setDefaults('tagsInput', {
+            placeholder: 'Search tags',
+            addFromAutocompleteOnly: true
+        })
+        .setDefaults('autoComplete', {
+            minLength: 1
+        })
 });
 
 // bootstrap angular

src/main.ts

@@ -1,17 +1,17 @@
 /**
  * Created by voland on 4/2/16.
  */
+import {IComment} from "../interfaces";
+
 export class Comments {
 
-    static $inject = ['$http', '$q'];
-    constructor(private $http, private $q) {
-        console.log('Comments service')
+    static $inject = ['$http'];
+    constructor(private $http) {
     }
 
     getComments() {
-        return this.$http.get('mock.json').then((response) => {
+        return this.$http.get('mock.json').then((response: {data: IComment[]}) => {
             return response.data;
         });
     };
-
 }