lists UI completed

src/app/pages/teams/lists/ListsTabCtrl.js

@@ -30,12 +30,19 @@
       { name: 'Vim an eius', deleted : false, members : ['8955sddf', '4563faass'] },
     ];
 
+    $scope.tabs = membersList.getTabs();
+
+    $scope.searchResult = membersList.getAllMessages();
+
+    
+
     $scope.Lists.forEach(function(item) {
       item.color = getRandomColor();
     });
 
     $scope.newTodoText = '';
-    $scope.listMembers = [{ name: 'Nasta Linnie'}];
+    $scope.listMembers = [];
+    $scope.selectedLabel = "listing";
 
     $scope.addNewList = function (event, clickPlus) {
       if (clickPlus || event.which === 13) {
@@ -65,6 +72,18 @@
       console.log($scope.listMembers);
     };
 
+    $scope.getMemberByLabel = function (label) {
+      console.log(label);
+      $scope.searchResult = membersList.getMembersByLabel(label);
+    }; 
+
+    $scope.removeMember = function (index) {
+      if (confirm("Are you sure?"))
+           {
+               //$scope.Lists[index].deleted = true;
+           }
+    };
+
     $scope.removeList = function (index) {
       if (confirm("Are you sure?"))
            {

src/app/pages/teams/lists/lists.html

@@ -1,21 +1 @@
-<div class="row">
+<lists-directive></lists-directive>
-  <div class="col-xlg-4 col-lg-6 col-md-4 col-xs-12"
-       ba-panel
-       ba-panel-title="Mailing LISTS"
-       ba-panel-class="xmedium-panel feed-comply-panel with-scroll todo-panel">
-    <lists-directive></lists-directive>
-  </div>
-
-  <div class="col-xlg-4 col-lg-6 col-md-4 col-xs-12"
-       ba-panel
-       ba-panel-title="List members"
-       ba-panel-class="xmedium-panel feed-comply-panel with-scroll todo-panel">
-       <lists-members-directive></lists-members-directive>
-  </div>
-   <div class="col-xlg-4 col-lg-6 col-md-4 col-xs-12"
-       ba-panel
-       ba-panel-title="Add new members"
-       ba-panel-class="xmedium-panel feed-comply-panel with-scroll todo-panel">
-  </div>
- 
-</div>

src/app/pages/teams/lists/lists.members.directive.js

@@ -1,19 +0,0 @@
-/**
- * @author v.lugovksy
- * created on 16.12.2015
- */
-(function () {
-  'use strict';
-
-  angular.module('BlurAdmin.pages.teams.lists')
-      .directive('listsMembersDirective', listsMembersDirective);
-
-  /** @ngInject */
-  function listsMembersDirective() {
-    return {
-      restrict: 'EA',
-      controller: 'ListsTabCtrl',
-      templateUrl: 'app/pages/teams/lists/listsMembersDirective.html'
-    };
-  }
-})();

src/app/pages/teams/lists/listsDirective.html

@@ -1,18 +1,82 @@
-<div class="task-todo-container" ng-class="{'transparent': transparent}">
+<div class="row">
-  <input type="text" value="" class="form-control task-todo" placeholder="Add a new list.." ng-keyup="addNewList($event)" ng-model="newTodoText"/>
+  <div class="col-xlg-4 col-lg-6 col-md-4 col-xs-12"
-  <i ng-click="addNewList('',true)" class="add-item-icon ion-plus-round"></i>
+       ba-panel
-  <div class="box-shadow-border"></div>
+       ba-panel-title="Mailing LISTS"
-  <ul class="todo-list" ui-sortable ng-model="Lists">
+       ba-panel-class="xmedium-panel feed-comply-panel with-scroll todo-panel">
-    <li ng-repeat="item in Lists" ng-if="!item.deleted" ng-init="activeItem=false"
+
-        ng-class="{checked: item.isChecked, active: activeItem}"
+        <div class="task-todo-container" ng-class="{'transparent': transparent}">
-        ng-mouseenter="activeItem=true" ng-mouseleave="activeItem=false">
+          <input type="text" value="" class="form-control task-todo" placeholder="Add a new list.." ng-keyup="addNewList($event)" ng-model="newTodoText"/>
-      <div class="blur-container"><div class="blur-box"></div></div>
+          <i ng-click="addNewList('',true)" class="add-item-icon ion-plus-round"></i>
-      <i class="mark" style="background-color: {{::item.color}}"></i>
+          <div class="box-shadow-border"></div>
-      <label class="todo-checkbox custom-checkbox custom-input-success">
+          <ul class="todo-list" ui-sortable ng-model="Lists">
-        <input type="checkbox" ng-model="item.isChecked" ng-change="updateMembers($index)">
+            <li ng-repeat="item in Lists" ng-if="!item.deleted" ng-init="activeItem=false"
-        <span class="cut-with-dots">{{ item.name }}</span>
+                ng-class="{checked: item.isChecked, active: activeItem}"
-      </label>
+                ng-mouseenter="activeItem=true" ng-mouseleave="activeItem=false">
-      <i class="remove-todo ion-ios-close-empty" ng-click="removeList($index)"></i>
+              <div class="blur-container"><div class="blur-box"></div></div>
-    </li>
+              <i class="mark" style="background-color: {{::item.color}}"></i>
-  </ul>
+              <label class="todo-checkbox custom-checkbox custom-input-success">
+                <input type="checkbox" ng-model="item.isChecked" ng-change="updateMembers($index)">
+                <span class="cut-with-dots">{{ item.name }}</span>
+              </label>
+              <i class="remove-todo ion-ios-close-empty" ng-click="removeList($index)"></i>
+            </li>
+          </ul>
+        </div>
+
+
+  </div>
+
+  <div class="col-xlg-4 col-lg-6 col-md-4 col-xs-12"
+       ba-panel
+       ba-panel-title="List members"
+       ba-panel-class="xmedium-panel feed-comply-panel with-scroll todo-panel">
+       
+       <div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
+        <div class="feed-message" ng-repeat="m in listMembers">
+          <div class="message-icon">
+            <img class="photo-icon" ng-src="{{m.name.split(' ')[0] | profilePicture}}">
+          </div>
+          <div class="text-block text-message">
+            <div class="message-header">
+              <span class="author">{{m.name}}</span>
+            </div>
+            <div class="message-content line-clamp">
+              <span>{{m.position}} </span>
+            </div>
+            <button class="btn btn-danger editable-table-button btn-xs pull-right" ng-click="removeMember(m.id)">Remove</button>
+            
+          </div>
+        </div>
+      </div>
+
+  </div>
+   <div class="col-xlg-4 col-lg-6 col-md-4 col-xs-12"
+       ba-panel
+       ba-panel-title="Add new members"
+       ba-panel-class="xmedium-panel feed-comply-panel with-scroll todo-panel">
+        <input type="text" value="" class="form-control task-todo" placeholder="Search" ng-keyup="addNewList($event)" ng-model="newTodoText"/>
+        <select class="form-control" selectpicker ng-model="selectedLabel" ng-change="getMemberByLabel(selectedLabel)">
+              <option selected="true" value="listing">Search by tag ...</option>
+              <option ng-repeat="t in tabs" value="{{t.label}}">{{t.name}}</option>
+            </select>
+
+        <div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
+        <div class="feed-message" ng-repeat="m in searchResult">
+          <div class="message-icon">
+            <img class="photo-icon" ng-src="{{m.name.split(' ')[0] | profilePicture}}">
+          </div>
+          <div class="text-block text-message">
+            <div class="message-header">
+              <span class="author">{{m.name}}</span>
+            </div>
+            <div class="message-content line-clamp">
+              <span>{{m.position}} </span>
+            </div>
+            <button class="btn btn-success editable-table-button btn-xs pull-right" ng-click="removeMember(m.id)">Add</button>
+            
+          </div>
+        </div>
+      </div>
+  </div>
+ 
 </div>

src/app/pages/teams/lists/listsMembersDirective.html

@@ -1,13 +0,0 @@
-<div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
-  <div class="feed-message" ng-repeat="m in listMembers">
-    <div class="message-icon">
-      <img class="photo-icon" ng-src="{{m.name.split(' ')[0] | profilePicture}}">
-    </div>
-    <div class="text-block text-message">
-      <div class="message-header">
-        <span class="author">{{m.name}}</span>
-      </div>
-      
-    </div>
-  </div>
-</div>