Refactors DatasetAuthorComponent: Removes arbitraty setTimeout for DOM updating, converts to inline component, removes id reference to component element

web/app/views/index.scala.html

@@ -389,7 +389,7 @@
             <th class="col-xs-1"></th>
           </tr>
         </thead>
-        <tbody id = "sortedownertable">
+        <tbody data-attribute="owner-table">
           {{#each owners as |owner|}}
           <tr>
             <td>{{input class="userEntity" value=owner.userName}}</td>
@@ -662,8 +662,7 @@
             {{/dataset-schema}}
           </div>
           <div id="ownertab" class="tab-pane">
-            {{#dataset-author owners=owners ownerTypes=ownerTypes showMsg=showMsg alertType=alertType ownerMessage=ownerMessage parentController=this}}
-            {{/dataset-author}}
+            {{dataset-author owners=owners ownerTypes=ownerTypes showMsg=showMsg alertType=alertType ownerMessage=ownerMessage parentController=this}}
           </div>
           {{#unless isSFDC}}
             <div id="sampletab" class="tab-pane">
@@ -752,8 +751,7 @@
           </div>
           <div id="ownership" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ownershipHeading">
             <div class="panel-body">
-              {{#dataset-author owners=owners ownerTypes=ownerTypes showMsg=showMsg alertType=alertType ownerMessage=ownerMessage parentController=this}}
-              {{/dataset-author}}
+              {{dataset-author owners=owners ownerTypes=ownerTypes showMsg=showMsg alertType=alertType ownerMessage=ownerMessage parentController=this}}
             </div>
           </div>
         </div>

web/public/javascripts/components/components.js

@@ -167,6 +167,30 @@ App.DatasetImpactComponent = Ember.Component.extend({
 });
 
 App.DatasetAuthorComponent = Ember.Component.extend({
+  didInsertElement() {
+    this._super(...arguments);
+    // Apply jQuery sortable plugin to element
+    this.$('[data-attribute=owner-table]')
+        .sortable({
+          start: (e, {item}) => this.set('startPosition', item.index()),
+
+          update: (e, {item}) => {
+            const startPosition = this.get('startPosition');
+            const endPosition = item.index(); // New position where UI element was dropped
+            const owners = this.get('owners') || [];
+
+            // Updates the owners array to reflect the UI position changes
+            if (owners.length) {
+              const _owners = owners.slice(0);
+              const updatedOwner = _owners.splice(startPosition, 1).pop();
+              _owners.splice(endPosition, 0, updatedOwner);
+              owners.setObjects(_owners);
+              setOwnerNameAutocomplete(this.controller);
+            }
+          }
+        });
+  },
+
   actions: {
     addOwner: function(data) {
       var owners = data;

web/public/javascripts/routers/datasets.js

@@ -43,80 +43,6 @@ function formatValue(key, value){
   }
 }
 
-function setOwnerNameAutocomplete(controller)
-{
-  if (!controller)
-  {
-    return;
-  }
-
-  $('.userEntity').blur(function(data){
-    var userEntitiesMaps = controller.get("userEntitiesMaps");
-    var value = this.value;
-    if (userEntitiesMaps[value])
-    {
-      controller.set("showMsg", false);
-      var owners = controller.get("owners");
-      for(var i = 0; i < owners.length; i++)
-      {
-        if (owners[i].userName == value)
-        {
-          Ember.set(owners[i], "name", userEntitiesMaps[value]);
-          if (userEntitiesMaps[value])
-          {
-            Ember.set(owners[i], "isGroup", false);
-          }
-          else
-          {
-            Ember.set(owners[i], "isGroup", true);
-          }
-        }
-      }
-    }
-    else
-    {
-      controller.set("showMsg", true);
-      controller.set("alertType", "alert-danger");
-      controller.set("ownerMessage", "The user name '" + value + "' is invalid");
-    }
-  });
-
-  $('.userEntity').autocomplete({
-    select: function( event, ui )
-    {
-      var userEntitiesMaps = controller.get("userEntitiesMaps");
-      var value = ui.item.value;
-      if (value in userEntitiesMaps)
-      {
-        var owners = controller.get("owners");
-        for(var i = 0; i < owners.length; i++)
-        {
-          if (owners[i].userName == value)
-          {
-            controller.set("showMsg", false);
-            Ember.set(owners[i], "name", userEntitiesMaps[value]);
-            if (userEntitiesMaps[value])
-            {
-              Ember.set(owners[i], "isGroup", false);
-            }
-            else
-            {
-              Ember.set(owners[i], "isGroup", true);
-            }
-          }
-        }
-      }
-    },
-
-    source: function(request, response) {
-      var userEntitiesSource = controller.get("userEntitiesSource");
-      var results = $.ui.autocomplete.filter(userEntitiesSource, request.term);
-      response(results.slice(0, 20));
-    }
-
-  });
-}
-
 function convertPropertiesToArray(properties)
 {
   var propertyArray = [];
@@ -173,7 +99,6 @@ function convertPropertiesToArray(properties)
 }
 
 var datasetController = null;
-var detailController = null;
 App.DatasetsRoute = Ember.Route.extend({
   setupController: function(controller) {
     datasetController = controller;
@@ -540,62 +465,23 @@ App.DatasetRoute = Ember.Route.extend({
       }
     });
 
-    var ownershipUrl = 'api/v1/datasets/' + id + "/owners";
-    $.get(ownershipUrl, function(data) {
-          if (data && data.status == "ok")
-          {
-            var owners = [];
-            if (data.owners && (data.owners.length > 0))
-            {
-              owners = data.owners;
-            }
-            controller.set("owners", owners);
-            setTimeout(function(){
-              $( "#sortedownertable" ).sortable({
-                start: function(event, ui) {
-                  var start_pos = ui.item.index();
-                  ui.item.data('start_pos', start_pos);
-                },
-                update: function( event, ui ) {
-                  var startPos = ui.item.data('start_pos');
-                  var endPos = ui.item.index();
-                  var originalOwners = controller.get("owners");
-                  if (!originalOwners || originalOwners.length == 0)
-                  {
-                    return;
-                  }
-                  var owners = originalOwners.slice();
-                  var updatedOwner = owners[startPos];
-                  owners.splice(startPos, 1);
-                  owners.splice(endPos, 0, updatedOwner);
-                  originalOwners.setObjects(owners);
-                  setTimeout(function(){
-                    setOwnerNameAutocomplete(controller)
-                  }, 500);
-                }
-              });
+    Promise.resolve($.get(`api/v1/datasets/${id}/owners`))
+        .then(({status, owners = []}) => (status === 'ok' && controller.set('owners', owners), void 0))
+        .then($.get.bind($, 'api/v1/party/entities'))
+        .then(({status, userEntities = []}) => {
+          if (status === 'ok' && userEntities.length) {
+            /**
+             * @type {Object} userEntitiesMaps hash of userEntities: label -> displayName
+             */
+            const userEntitiesMaps = userEntities.reduce((map, {label, displayName}) =>
+                (map[label] = displayName, map), {});
 
-              var allUserEntitiesUrl = 'api/v1/party/entities';
-              $.get(allUserEntitiesUrl, function(data) {
-                if (data && data.status == "ok")
-                {
-                  if (data.userEntities && (data.userEntities.length > 0))
-                  {
-                    var userEntitiesMaps = {};
-                    for (i=0; i < data.userEntities.length; i++)
-                    {
-                      userEntitiesMaps[data.userEntities[i].label] = data.userEntities[i].displayName;
-                    }
-                    var userEntitiesSource = Object.keys(userEntitiesMaps);
-                    controller.set("userEntitiesMaps", userEntitiesMaps);
-                    controller.set("userEntitiesSource", userEntitiesSource);
-                    setOwnerNameAutocomplete(controller);
-                  }
-                }
-              });
-            }, 500);
+            controller.setProperties({
+              userEntitiesSource: Object.keys(userEntitiesMaps),
+              userEntitiesMaps
+            });
           }
-    });
+        });
   },
 
   model: function ({id}) {