From c34ad712cb421a5a29460c45109bf026821512bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Mart=C3=ADn?= <cmartin@opennebula.org>
Date: Tue, 11 Oct 2016 16:09:19 +0200
Subject: [PATCH] F #4572: Add DS dropdown in image import

---
 .../app/tabs/images-tab/form-panels/import.js | 26 ++++++++++++++++++-
 .../images-tab/form-panels/import/html.hbs    |  4 +--
 .../public/app/utils/resource-select.js       | 21 ++++++++++++---
 3 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/sunstone/public/app/tabs/images-tab/form-panels/import.js b/src/sunstone/public/app/tabs/images-tab/form-panels/import.js
index d6e82b6555..f1066f16b6 100644
--- a/src/sunstone/public/app/tabs/images-tab/form-panels/import.js
+++ b/src/sunstone/public/app/tabs/images-tab/form-panels/import.js
@@ -24,6 +24,7 @@ define(function(require) {
   var Sunstone = require('sunstone');
   var Locale = require('utils/locale');
   var VCenterImages = require('utils/vcenter/images');
+  var ResourceSelect = require('utils/resource-select');
 
   /*
     TEMPLATES
@@ -65,6 +66,7 @@ define(function(require) {
   FormPanel.prototype.submitWizard = _submitWizard;
   FormPanel.prototype.onShow = _onShow;
   FormPanel.prototype.setup = _setup;
+  FormPanel.prototype.reInitForm = _reInitForm;
 
   return FormPanel;
 
@@ -79,7 +81,7 @@ define(function(require) {
     });
   }
 
-  function _setup(context) {
+  function _reInitForm(context) {
     var that = this;
 
     $("form.vcenter_credentials", context)
@@ -110,7 +112,10 @@ define(function(require) {
       .on("submit", function(ev) {
         ev.preventDefault();
       });
+  }
 
+  function _setup(context) {
+    this.reInitForm(context);
     return false;
   }
 
@@ -125,5 +130,24 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    var that = this;
+
+    var vcenter_datastore = $("div#vcenter_datastore_wrapper .resource_list_select", context).val();
+    if (!vcenter_datastore) vcenter_datastore = undefined;
+
+    ResourceSelect.insert({
+        context: $('#vcenter_datastore_wrapper', context),
+        resourceName: 'Datastore',
+        initValue: vcenter_datastore,
+        emptyValue: true,
+        nameValues: true,
+        filterKey: 'DS_MAD',
+        filterValue: 'vcenter',
+        selectId: 'vcenter_datastore',
+        required: true,
+        callback: function(element){
+          that.reInitForm(context);
+        }
+      });
   }
 });
diff --git a/src/sunstone/public/app/tabs/images-tab/form-panels/import/html.hbs b/src/sunstone/public/app/tabs/images-tab/form-panels/import/html.hbs
index 81046696c0..ab8ee9d356 100644
--- a/src/sunstone/public/app/tabs/images-tab/form-panels/import/html.hbs
+++ b/src/sunstone/public/app/tabs/images-tab/form-panels/import/html.hbs
@@ -32,8 +32,8 @@
         <input type="password" name="vcenter_password" id="vcenter_password" required />
       </div>
       <div class="large-2 medium-6 columns">
-        <label for="vcenter_datastore">{{tr "Datastore"}}</label>
-        <input type="text" name="vcenter_datastore" id="vcenter_datastore" required />
+        <label>{{tr "Datastore"}}</label>
+        <div id="vcenter_datastore_wrapper"/>
       </div>
       <div class="large-3 medium-6 columns">
         <label>&nbsp;</label>
diff --git a/src/sunstone/public/app/utils/resource-select.js b/src/sunstone/public/app/utils/resource-select.js
index 32925d7055..943b8ca8de 100644
--- a/src/sunstone/public/app/utils/resource-select.js
+++ b/src/sunstone/public/app/utils/resource-select.js
@@ -38,6 +38,9 @@ define(function(require) {
    * @param {string}  [opts.filterValue] - RegExp that will be evaluated to filter the resources
    * @param {Boolean} [opts.nameValues] - Use the object NAME instead of the ID as the option values
    * @param {string}  [opts.selectId] - Optional ID for the html select element
+   * @param {Boolean} [opts.required] - True to make the html select required
+   * @param {function}[opts.callback] - Callback function to call after the select element is
+   *                                    added to the DOM
    */
   var _insert = function(opts) {
     var Resource = require('opennebula/' + opts.resourceName.toLowerCase());
@@ -46,14 +49,20 @@ define(function(require) {
     Resource.list({
       timeout: true,
       success: function (request, elemList) {
-        var selectHTML;
+        var elemId = '';
 
         if (opts.selectId != undefined){
-          selectHTML = '<select id="'+opts.selectId+'" class="resource_list_select">';
-        }else{
-          selectHTML = '<select class="resource_list_select">';
+          elemId = 'id="'+opts.selectId+'"';
         }
 
+        var required = '';
+
+        if (opts.required == true){
+          required = 'required';
+        }
+
+        var selectHTML = '<select '+elemId+' '+required+' class="resource_list_select">';
+
         if (opts.emptyValue) {
           selectHTML += '<option class="empty_value" value="">' +
                           Locale.tr("Please select") + '</option>';
@@ -105,6 +114,10 @@ define(function(require) {
         if (opts.triggerChange === true) {
           $(' .resource_list_select', opts.context).change();
         }
+
+        if(opts.callback() != undefined){
+          opts.callback($('.resource_list_select', opts.context));
+        }
       },
       error: Notifier.onError
     });