Allow negation/exclusion for searchable fields

src/js/cilantro/ui/controls/search.js

@@ -133,7 +133,8 @@ define([
         searchPaginator: SearchPaginator,
 
         events: {
-            'click [data-action=clear]': 'clearValues'
+            'click [data-action=clear]': 'clearValues',
+            'change [name=exclude]': 'change'
         },
 
         regions: {
@@ -150,6 +151,10 @@ define([
             values: values.ValueList
         },
 
+        ui: {
+            excludeCheckbox: '[name=exclude]'
+        },
+
         initialize: function() {
             // Initialize a new collection of values for use by the
             // two regions. This is shared between the source data
@@ -215,12 +220,23 @@ define([
             if (this.model) return this.model.id;
         },
 
-        // This is currently always an 'in', however 'not in' may be
-        // desirable as well.
         getOperator: function() {
+            if (this.ui.excludeCheckbox.prop('checked')) {
+                return '-in';
+            }
+
             return 'in';
         },
 
+        setOperator: function(operator) {
+            if (operator === '-in') {
+                this.ui.excludeCheckbox.prop('checked', true);
+            }
+            else {
+                this.ui.excludeCheckbox.prop('checked', false);
+            }
+        },
+
         // Returns an array of objects with value and label attributes.
         // These are returned as is to enable correct repopulation.
         getValue: function() {

src/scss/views/_field-value-search.scss

@@ -1,10 +1,29 @@
 .field-value-search {
-    .paginator {
-        text-align: right;
-    }
     .toolbar {
+        .page-numbers {
+            float: right;
+            padding: 0px;
+        }
+
         .btn-danger {
             float: right;
         }
+
+        .exclude-container {
+            display: inline-block;
+        }
+
+        .exclude-checkbox {
+            padding: 0px;
+            margin: 0px;
+            width: 12px;
+            height: 12px;
+        }
+
+        .exclude-label {
+            margin-left: 5px;
+            font-size: 13px;
+            vertical-align: middle;
+        }
     }
 }

src/templates/controls/search/layout.html

@@ -1,13 +1,19 @@
 <div class=row-fluid>
     <div class='span6'>
+        <div class='toolbar paginator-region'></div>
+        <div class=search-region></div>
+        <div class=browse-region></div>
+    </div>
+    <div class=span6>
         <div class=toolbar>
+            <div class=exclude-container>
+                <input class=exclude-checkbox type=checkbox name=exclude />
+                <span class=exclude-label>Exclude selected values</span>
+            </div>
             <button type=button data-action=clear class='btn btn-mini btn-danger'>
                 <i class='icon-remove icon-white'></i>Clear
             </button>
-            <div class=paginator-region></div>
         </div>
-        <div class=search-region></div>
-        <div class=browse-region></div>
-    </div>
-    <div class='span6 values-region'></div>
+        <div class=values-region></div>
+   </div>
 </div>