Create oscUnique directive to provide unique-in-list validation on DOM nodes with ng-model attribute

Author: benjaminapetersen

app/index.html

@@ -179,6 +179,7 @@
         <script src="scripts/directives/oscImageSummary.js"></script>
         <script src="scripts/directives/oscKeyValues.js"></script>
         <script src="scripts/directives/oscRouting.js"></script>
+        <script src="scripts/directives/oscUnique.js"></script>
         <script src="scripts/directives/replicas.js"></script>
         <script src="scripts/directives/resources.js"></script>
         <script src="scripts/directives/overviewDeployment.js"></script>

app/scripts/directives/oscKeyValues.js

@@ -45,7 +45,6 @@ angular.module("openshiftConsole")
         $scope.value = null;
         $scope.form.$setPristine();
         $scope.form.$setUntouched();
-        $scope.form.$setValidity();
       }
     };
     $scope.deleteEntry = function(key) {

app/scripts/directives/oscUnique.js

@@ -0,0 +1,53 @@
+'use strict';
+// oscUnique is a validation directive
+// use:
+// Put it on an input or other DOM node with an ng-model attribute.
+// Pass a list (array, or object) via osc-unique="list"
+//
+// Sets model $valid true||false
+// - model is valid so long as the item is not already in the list
+//
+// Key off $valid to enable/disable/sow/etc other objects
+//
+// Validates that the ng-model is unique in a list of values.
+// ng-model: 'foo'
+// oscUnique: ['foo', 'bar', 'baz']       // false, the string 'foo' is in the list
+// oscUnique: [1,2,4]                     // true, the string 'foo' is not in the list
+// oscUnique: {foo: true, bar: false}     // false, the object has key 'foo'
+// NOTES:
+// - non-array values passed to oscUnqiue will be transformed into an array.
+//   - oscUnqiue: 'foo' => [0,1,2]  (probably not what you want, so don't pass a string)
+// - objects passed will be converted to a list of object keys.
+//   - { foo: false } would still be invalid, because the key exists (value is ignored)
+//   - recommended to pass an array
+//
+// Example:
+// - prevent a button from being clickable if the input value has already been used
+// <input ng-model="key" osc-unique="keys" />
+// <button ng-disabled="form.key.$error.oscUnique" ng-click="submit()">Submit</button>
+//
+angular.module('openshiftConsole')
+  .directive('oscUnique', function() {
+    return {
+      restrict: 'A',
+      scope: {
+        oscUnique: '='
+      },
+      require: 'ngModel',
+      link: function($scope, $elem, $attrs, ctrl) {
+        var list = [];
+
+        $scope.$watchCollection('oscUnique', function(newVal) {
+          list = _.isArray(newVal) ?
+                    newVal :
+                    _.keys(newVal);
+        });
+
+        ctrl.$parsers.unshift(function(value) {
+          // is valid so long as it doesn't already exist
+          ctrl.$setValidity('oscUnique', !_.includes(list, value));
+          return value;
+        });
+      }
+    };
+  });

app/views/directives/osc-key-values.html

@@ -7,10 +7,12 @@
                  name="key"
                  ng-attr-placeholder="{{keyTitle}}"
                  ng-model="key"
+                 ng-model-options="{ debounce: 200 }"
                  autocorrect="off"
                  autocapitalize="off"
                  spellcheck="false"
-                 osc-input-validator="key">
+                 osc-input-validator="key"
+                 osc-unique="entries">
         </div>
         <div class="form-group" ng-class="{'has-error': form.value.$error.oscValueValid}">
           <input class="form-control"
@@ -23,7 +25,15 @@
                  spellcheck="false"
                  osc-input-validator="value">
         </div>
-        <button class="btn btn-default" ng-click="addEntry()" ng-disabled="form.key.$error.oscKeyValid || form.value.$error.oscValueValid">Add</button>
+        <button
+          class="btn btn-default"
+          ng-click="addEntry()"
+          ng-disabled="form.$invalid || !key || !value">
+          Add
+        </button>
+        <div class="has-error" ng-show="form.key.$error.oscUnique">
+          <span class="help-block">Duplicate {{(keyTitle || 'key') | lowercase}}: {{key}}</span>
+        </div>
         <div class="has-error" ng-show="form.key.$error.oscKeyValid">
           <span class="help-block">Please enter a valid {{setErrorText(keyValidator)}}
             <span class="help action-inline" ng-if="keyValidationTooltip">