From b42c3392da90160a75bfce41b576648cf8bf869f Mon Sep 17 00:00:00 2001
From: Anthony Yeh <enisoc@google.com>
Date: Tue, 28 Jul 2015 14:06:41 -0700
Subject: [PATCH] web/vtctld: Make vindex owner an autocomplete.

---
 web/vtctld/vschema/vschema.html |  54 +++++++++----
 web/vtctld/vschema/vschema.js   | 130 +++++++++++++++++++++++---------
 2 files changed, 136 insertions(+), 48 deletions(-)

diff --git a/web/vtctld/vschema/vschema.html b/web/vtctld/vschema/vschema.html
index 2b49a789f4..63cf143997 100644
--- a/web/vtctld/vschema/vschema.html
+++ b/web/vtctld/vschema/vschema.html
@@ -266,7 +266,7 @@ They are only used with the
 
       <md-input-container flex="30">
         <label>Vindex</label>
-        <input type="text" ng-model="vindexname" disabled class="input-header">
+        <input type="text" ng-model="vindexname" name="vindex" disabled class="input-header">
       </md-input-container>
 
       <div layout="column" flex>
@@ -285,14 +285,28 @@ They are only used with the
             <div ng-messages="vindexForm.vindexType.$error">
               <div ng-message="required">Required</div>
               <div ng-message="vdefined">Undefined Vindex Type</div>
+              <div ng-message="vownedPrimaryFunctional">Owned primary vindex must have a functional type.</div>
+              <div ng-message="vownedNonPrimaryLookup">Owned non-primary vindex must have a lookup type.</div>
             </div>
           </md-autocomplete>
           <input ng-hide="true" name="vindexType" ng-model="vindex.Type" vindex-type required>
 
-          <md-input-container flex>
-            <label>Owner</label>
-            <input type="text" ng-model="vindex.Owner">
-          </md-input-container>
+          <md-autocomplete flex md-floating-label="Owner" md-min-length="0"
+              md-selected-item=""
+              md-selected-item-change=""
+              md-search-text="vindex.Owner"
+              md-search-text-change=""
+              md-items="item in tableSelector(keyspace, vindex.Owner)"
+              md-item-text="item" md-autofocus="false">
+            <md-item-template>
+              <span md-highlight-text="vindex.Owner">{{item}}</span>
+            </md-item-template>
+            <md-not-found>No tables found matching "{{vindex.Owner}}".</md-not-found>
+            <div ng-messages="vindexForm.vindexOwner.$error">
+              <div ng-message="vdefined">Undefined Table</div>
+            </div>
+          </md-autocomplete>
+          <input ng-hide="true" name="vindexOwner" ng-model="vindex.Owner" vindex-owner>
         </div>
 
         <div layout="row" layout-wrap>
@@ -305,10 +319,10 @@ They are only used with the
       </form>
     </div>
 
-    <form name="addVindexForm" layout="row"
-        ng-submit="addVindex(keyspace, newVindex, newVindexType, newVindexOwner); newVindex=''; newVindexType=''; newVindexOwner=''; addVindexForm.$setUntouched()">
+    <form name="vindexForm" layout="row"
+        ng-submit="addVindex(keyspace, newVindex, newVindexType, newVindexOwner); newVindex=''; newVindexType=''; newVindexOwner=''; vindexForm.$setUntouched()">
       <md-button class="md-icon-button md-raised md-primary md-hue-3" aria-label="Add Vindex"
-          type="submit" ng-disabled="addVindexForm.$invalid">
+          type="submit" ng-disabled="vindexForm.$invalid">
         <md-tooltip>Add Vindex</md-tooltip>
         <md-icon md-font-set="material-icons">add</md-icon>
       </md-button>
@@ -329,16 +343,30 @@ They are only used with the
           <span md-highlight-text="newVindexType">{{item}}</span>
         </md-item-template>
         <md-not-found>No vindex types found matching "{{newVindexType}}".</md-not-found>
-        <div ng-messages="addVindexForm.vindexType.$error">
+        <div ng-messages="vindexForm.vindexType.$error">
           <div ng-message="vdefined">Undefined Vindex Type</div>
+          <div ng-message="vownedPrimaryFunctional">Owned primary vindex must have a functional type.</div>
+          <div ng-message="vownedNonPrimaryLookup">Owned non-primary vindex must have a lookup type.</div>
         </div>
       </md-autocomplete>
       <input ng-hide="true" name="vindexType" ng-model="newVindexType" vindex-type required>
 
-      <md-input-container flex>
-        <label>Owner</label>
-        <input type="text" ng-model="newVindexOwner">
-      </md-input-container>
+      <md-autocomplete flex md-floating-label="Owner" md-min-length="0"
+          md-selected-item=""
+          md-selected-item-change=""
+          md-search-text="newVindexOwner"
+          md-search-text-change=""
+          md-items="item in tableSelector(keyspace, newVindexOwner)"
+          md-item-text="item" md-autofocus="false">
+        <md-item-template>
+          <span md-highlight-text="newVindexOwner">{{item}}</span>
+        </md-item-template>
+        <md-not-found>No tables found matching "{{newVindexOwner}}".</md-not-found>
+        <div ng-messages="vindexForm.vindexOwner.$error">
+          <div ng-message="vdefined">Undefined Table</div>
+        </div>
+      </md-autocomplete>
+      <input ng-hide="true" name="vindexOwner" ng-model="newVindexOwner" vindex-owner>
     </div>
 
     </md-card-content>
diff --git a/web/vtctld/vschema/vschema.js b/web/vtctld/vschema/vschema.js
index 33e16f276a..aec7c85071 100644
--- a/web/vtctld/vschema/vschema.js
+++ b/web/vtctld/vschema/vschema.js
@@ -1,50 +1,50 @@
 vindexInfo = {};
 vindexInfo.types = {
-  "numeric": {
-      "Type": "functional",
-      "Unique": true,
-      "Params": []
+  'numeric': {
+      type: 'functional',
+      unique: true,
+      params: []
   },
-  "hash": {
-      "Type": "functional",
-      "Unique": true,
-      "Params": [
-          "Table", "Column"
+  'hash': {
+      type: 'functional',
+      unique: true,
+      params: [
+          'Table', 'Column'
       ]
   },
-  "hash_autoinc": {
-      "Type": "functional",
-      "Unique": true,
-      "Params": [
-          "Table", "Column"
+  'hash_autoinc': {
+      type: 'functional',
+      unique: true,
+      params: [
+          'Table', 'Column'
       ]
   },
-  "lookup_hash": {
-      "Type": "lookup",
-      "Unique": false,
-      "Params": [
-          "Table", "From", "To"
+  'lookup_hash': {
+      type: 'lookup',
+      unique: false,
+      params: [
+          'Table', 'From', 'To'
       ]
   },
-  "lookup_hash_unique": {
-      "Type": "lookup",
-      "Unique": true,
-      "Params": [
-          "Table", "From", "To"
+  'lookup_hash_unique': {
+      type: 'lookup',
+      unique: true,
+      params: [
+          'Table', 'From', 'To'
       ]
   },
-  "lookup_hash_autoinc": {
-      "Type": "lookup",
-      "Unique": false,
-      "Params": [
-          "Table", "From", "To"
+  'lookup_hash_autoinc': {
+      type: 'lookup',
+      unique: false,
+      params: [
+          'Table', 'From', 'To'
       ]
   },
-  "lookup_hash_unique_autoinc": {
-      "Type": "lookup",
-      "Unique": true,
-      "Params": [
-          "Table", "From", "To"
+  'lookup_hash_unique_autoinc': {
+      type: 'lookup',
+      unique: true,
+      params: [
+          'Table', 'From', 'To'
       ]
   }
 };
@@ -97,6 +97,15 @@ app.controller('VSchemaCtrl', function($scope, $mdDialog,
     });
   };
 
+  $scope.tableSelector = function(keyspace, searchText) {
+    if (!keyspace.Tables) return [];
+    var items = Object.keys(keyspace.Tables).sort();
+    if (!searchText) return items;
+    return items.filter(function(item) {
+      return item.indexOf(searchText) != -1;
+    });
+  };
+
   $scope.classSelector = function(keyspace, searchText) {
     if (!keyspace.Classes) return [];
     var items = Object.keys(keyspace.Classes).sort();
@@ -223,7 +232,7 @@ app.controller('VSchemaCtrl', function($scope, $mdDialog,
 
   $scope.onVindexTypeChange = function(vindex, type) {
     if (type in vindexInfo.types) {
-      params = vindexInfo.types[type].Params;
+      params = vindexInfo.types[type].params;
       if (!vindex.Params)
         vindex.Params = {};
 
@@ -286,6 +295,57 @@ app.directive('vindexType', function() {
           return viewValue in vindexInfo.types;
         return true;
       };
+      ctrl.$validators.vownedPrimaryFunctional = function(modelValue, viewValue) {
+        var form = scope.vindexForm;
+        var type = viewValue;
+        var owner = form.vindexOwner.$modelValue;
+        var vindex = form.vindex.$modelValue;
+        if (owner && scope.keyspace.Tables[owner]
+              && type && vindexInfo.types[type]
+              && vindexInfo.types[type].type != 'functional') {
+          // It's owned and non-functional. Make sure it isn't a primary.
+          var classname = scope.keyspace.Tables[owner];
+          if (classname && scope.keyspace.Classes[classname]) {
+            var cls = scope.keyspace.Classes[classname];
+            if (cls.ColVindexes && cls.ColVindexes[0]
+                  && cls.ColVindexes[0].Name == vindex)
+              return false;
+          }
+        }
+        return true;
+      };
+      ctrl.$validators.vownedNonPrimaryLookup = function(modelValue, viewValue) {
+        var form = scope.vindexForm;
+        var type = viewValue;
+        var owner = form.vindexOwner.$modelValue;
+        var vindex = form.vindex.$modelValue;
+        if (owner && scope.keyspace.Tables[owner]
+              && type && vindexInfo.types[type]
+              && vindexInfo.types[type].type != 'lookup') {
+          // It's owned and non-lookup. Make sure it is a primary.
+          var classname = scope.keyspace.Tables[owner];
+          if (classname && scope.keyspace.Classes[classname]) {
+            var cls = scope.keyspace.Classes[classname];
+            if (cls.ColVindexes && cls.ColVindexes[0]
+                  && cls.ColVindexes[0].Name != vindex)
+              return false;
+          }
+        }
+        return true;
+      };
+    }
+  };
+});
+
+app.directive('vindexOwner', function() {
+  return {
+    require: 'ngModel',
+    link: function(scope, elem, attrs, ctrl) {
+      ctrl.$validators.vdefined = function(modelValue, viewValue) {
+        if (viewValue)
+          return viewValue in scope.keyspace.Tables;
+        return true;
+      };
     }
   };
 });