#14 improve the case merge dialog to support autocomplete, search by title and by case number

Author: nadouani

ui/app/scripts/controllers/case/CaseMergeModalCtrl.js

@@ -1,38 +1,69 @@
-(function() {
+(function () {
     'use strict';
 
     angular.module('theHiveControllers')
         .controller('CaseMergeModalCtrl', CaseMergeModalCtrl);
 
-    function CaseMergeModalCtrl($state, $modalInstance, SearchSrv, CaseSrv, UserInfoSrv, AlertSrv, caze) {
+    function CaseMergeModalCtrl($state, $modalInstance, $q, SearchSrv, CaseSrv, UserInfoSrv, AlertSrv, caze, $http) {
         var me = this;
 
         this.caze = caze;
+        this.pendingAsync = false;
         this.search = {
-            caseId: null,
+            type: 'title',
+            placeholder: 'Search by case title',            
+            minInputLength: 1,
+            input: null,
             cases: []
         };
         this.getUserInfo = UserInfoSrv;
 
-        this.getCaseByNumber = function() {
-            if (this.search.caseId && this.search.caseId !== this.caze.caseId) {
-                SearchSrv(function(data /*, total*/ ) {
-                    console.log(data);
-                    me.search.cases = data;
-                }, {
-                    _string: 'caseId:' + me.search.caseId
-                }, 'case', 'all');
-            } else {
-                this.search.cases = [];
+        this.getCaseByTitle = function(type, input) {
+            var defer = $q.defer();
+
+            SearchSrv(function (data /*, total*/ ) {                
+                defer.resolve(data);
+            }, {
+                _string: (type === 'title') ? ('title:"' + input + '"') : ('caseId:' + input)
+            }, 'case', 'all');
+
+            return defer.promise;
+        }
+
+        this.format = function(caze) {
+            if(caze) {
+                return '#' + caze.caseId  + ' - ' + caze.title;
             }
-        };
+            return null;            
+        }
+
+        this.clearSearch = function() {
+            this.search.input = null;
+            this.search.cases = [];
+        }
+
+        this.onTypeChange = function(type) {
+            this.clearSearch();
 
-        this.merge = function() {
+            this.search.placeholder = 'Search by case ' + type;
+
+            if(type === 'title') {
+                this.search.minInputLength = 3;                
+            } else if(type === 'number') {
+                this.search.minInputLength = 1;
+            }
+        }
+
+        this.onSelect = function(item, model, label) {            
+            this.search.cases = [item];
+        }
+
+        this.merge = function () {
             // TODO pass params as path params not query params
             CaseSrv.merge({}, {
                 caseId: me.caze.id,
                 mergedCaseId: me.search.cases[0].id
-            }, function(merged) {
+            }, function (merged) {
 
                 $state.go('app.case.details', {
                     caseId: merged.id
@@ -41,13 +72,13 @@
                 $modalInstance.dismiss();
 
                 AlertSrv.log('The cases have been successfully merged into a new case #' + merged.caseId, 'success');
-            }, function(response){
+            }, function (response) {
                 AlertSrv.error('CaseMergeModalCtrl', response.data, response.status);
             });
         };
 
-        this.cancel = function() {
+        this.cancel = function () {
             $modalInstance.dismiss();
-        };
+        };      
     }
 })();

ui/app/styles/case.css

@@ -56,3 +56,8 @@ span.link-id {
     padding: 10px;
     overflow: hidden;
 }
+
+.merge-dialog .search-field ul.dropdown-menu {
+    width: 100%;
+    left: 0 !important;
+}

ui/app/views/partials/case/case.merge.html

@@ -2,12 +2,25 @@
     <h3 class="modal-title">Merge Case #{{dialog.caze.caseId}}</h3>
 </div>
 <div class="modal-body merge-dialog">
-    <div class="input-group input-group-lg">
-        <span class="input-group-addon">#</span>
-        <input type="text" class="form-control" placeholder="Case number" ng-model-options='{ debounce: 500 }' ng-change="dialog.getCaseByNumber()" ng-model="dialog.search.caseId">
+    <div class="input-group input-group-lg search-field">
+        <input type="text"
+            placeholder="{{dialog.search.placeholder}}" 
+            ng-model="dialog.search.input"    
+            typeahead-wait-ms="500"                      
+            typeahead="caze as dialog.format(caze) for caze in dialog.getCaseByTitle(dialog.search.type, $viewValue)"
+            typeahead-min-length="dialog.search.minInputLength" 
+            typeahead-on-select="dialog.onSelect($item)" 
+            class="form-control">
+            
+        <span class="input-group-addon">
+            <input type="radio" name="search-type" ng-model="dialog.search.type" value="title" ng-change="dialog.onTypeChange('title')"> By Title
+            <input type="radio" name="search-type" ng-model="dialog.search.type" value="number" ng-change="dialog.onTypeChange('number')"> By Number
+        </span>
+        
     </div>
+
     <div class="empty-message mv-s" ng-show="dialog.search.cases.length === 0">
-        Please search for the to be merged with
+        Please search for the case to be merged with <br>
         <strong>#{{dialog.caze.caseId}}:
             {{dialog.caze.title}}</strong>
     </div>
@@ -18,11 +31,10 @@ <h4>{{c.title}}</h4>
                 <i class="glyphicon glyphicon-user"></i>
                 <span ng-bind="dialog.getUserInfo(c.user) | getField: 'name'"></span>
             </span>
-
             <span class="ml-xxs">
                 <i class="glyphicon glyphicon-calendar"></i>
                 <span>{{c.startDate | showDate}}</span>&nbsp;&nbsp;
-                <span ng-show="isCaseClosed()" class="text-success">(Closed at
+            <span ng-show="isCaseClosed()" class="text-success">(Closed at
                     {{c.endDate | showDate}}
                     as
                     <strong>{{CaseResolutionStatus[c.resolutionStatus]}}</strong>)</span>
@@ -32,13 +44,13 @@ <h4>{{c.title}}</h4>
             <strong>Tags:</strong>
             <tag-list data="c.tags"></tag-list>
         </div>
-
         <div class="mt-xs wrap">
             <div marked="c.description" class="markdown"></div>
         </div>
     </div>
 </div>
 <div class="modal-footer text-left">
     <button class="btn btn-default" ng-click="dialog.cancel()" type="button">Cancel</button>
-    <button class="btn btn-primary pull-right" ng-click="dialog.merge()" type="button">Merge</button>
+    <button class="btn btn-primary pull-right" ng-click="dialog.merge()" ng-disabled="dialog.pendingAsync || dialog.search.cases.length < 1"
+        type="button">Merge</button>
 </div>