Modernize javascript code: use API and this.vm

Signed-off-by: Miha Pleško <miha.plesko@xlab.si>
ManageIQ · Apr 11, 2017 · 66dccb1 · 66dccb1
1 parent e11d08b
commit 66dccb1
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 32 deletions.
diff --git a/.../controllers/cloud_object_store_container/cloud_object_store_container_form_controller.js b/.../controllers/cloud_object_store_container/cloud_object_store_container_form_controller.js
@@ -1,23 +1,36 @@
-ManageIQ.angular.app.controller('cloudObjectStoreContainerFormController', ['$scope', 'miqService', 'API', function($scope, miqService, API) {
+ManageIQ.angular.app.controller('cloudObjectStoreContainerFormController', ['$scope', 'miqService', 'API', 'storageManagerId', function($scope, miqService, API, storageManagerId) {
+  var vm = this;
+
   var init = function() {
-    $scope.cloudContainerModel = {
+    vm.afterGet = false;
+    vm.cloudContainerModel = {
       name: '',
       emstype: '',
       parent_emstype: '',
-      storage_manager_id: '',
       provider_region: '',
     };
-    $scope.afterGet = false;
-    $scope.modelCopy = angular.copy( $scope.cloudContainerModel );
-    $scope.model = 'cloudContainerModel';
+
+    // fetch StorageManager from querystring
+    if(!isNaN(parseInt(storageManagerId))){
+      vm.cloudContainerModel.storage_manager_id = parseInt(storageManagerId);
+    }
+
+    vm.model = 'cloudContainerModel';
     $scope.newRecord = true;
 
-    ManageIQ.angular.scope = $scope;
+    ManageIQ.angular.scope = vm;
+
+    miqService.sparkleOn();
+    API.get("/api/providers?expand=resources&attributes=id,name&filter[]=supports_cloud_object_store_container_create?=true")
+      .then(getStorageManagers)
+      .catch(miqService.handleFailure);
+
+    setForm();
   };
 
   $scope.addClicked = function() {
     var url = 'create' + '?button=add';
-    miqService.miqAjaxButton(url, $scope.cloudContainerModel, { complete: false });
+    miqService.miqAjaxButton(url, vm.cloudContainerModel, { complete: false });
   };
 
   $scope.cancelClicked = function() {
@@ -28,17 +41,33 @@ ManageIQ.angular.app.controller('cloudObjectStoreContainerFormController', ['$sc
     miqService.sparkleOn();
 
     API.get('/api/providers/' + id + '?attributes=type,parent_manager.type')
-      .then(getStorageManagerFormDataComplete)
+      .then(getStorageManagerFormData)
       .catch(miqService.handleFailure);
   };
 
-  function getStorageManagerFormDataComplete(data) {
+  function getStorageManagerFormData(data) {
     $scope.afterGet = true;
-    $scope.cloudContainerModel.emstype = data.type;
-    $scope.cloudContainerModel.parent_emstype = data.parent_manager.type;
+    vm.cloudContainerModel.emstype = data.type;
+    vm.cloudContainerModel.parent_emstype = data.parent_manager.type;
 
     miqService.sparkleOff();
   }
 
+  function setForm() {
+    vm.modelCopy = angular.copy(vm.cloudContainerModel);
+    vm.afterGet = true;
+    miqService.sparkleOff();
+  }
+
+  function getStorageManagers(data) {
+    vm.storageManagers = data.resources;
+
+    // If storage manager ID was provided, we need to refresh the form and show
+    // corresponding form fields.
+    if (storageManagerId) {
+      $scope.storageManagerChanged(vm.cloudContainerModel.storage_manager_id);
+    }
+  }
+
   init();
 }]);
diff --git a/app/controllers/cloud_object_store_container_controller.rb b/app/controllers/cloud_object_store_container_controller.rb
@@ -40,11 +40,8 @@ def self.display_methods
   def new
     assert_privileges("cloud_object_store_container_new")
     @in_a_form = true
-    @storage_manager_choices = {}
-    ExtManagementSystem.all.each do |ems|
-      if ems.supports?(:cloud_object_store_container_create)
-        @storage_manager_choices[ems.name] = ems.id
-      end
+    if params[:storage_manager_id]
+      @storage_manager = find_record_with_rbac(ExtManagementSystem, params[:storage_manager_id])
     end
     @provider_regions = retrieve_provider_regions
     drop_breadcrumb(
@@ -116,7 +113,7 @@ def form_params_create
 
       # Get the storage manager.
       storage_manager_id = params[:storage_manager_id] if params[:storage_manager_id]
-      options[:ems] = find_by_id_filtered(ExtManagementSystem, storage_manager_id)
+      options[:ems] = find_record_with_rbac(ExtManagementSystem, storage_manager_id)
     end
     options
   end

diff --git a/app/views/cloud_object_store_container/new.html.haml b/app/views/cloud_object_store_container/new.html.haml
@@ -1,4 +1,10 @@
-%form#form_div{:name => "angularForm", 'ng-controller' => "cloudObjectStoreContainerFormController", "ng-cloak" => ""}
+%form#form_div{:name           => "angularForm",
+               'ng-controller' => "cloudObjectStoreContainerFormController as vm",
+               "ng-show"       => "vm.afterGet",
+               "ng-cloak"      => "",
+               "miq-form"      => true,
+               "model"         => "vm.cloudContainerModel",
+               "model-copy"    => "vm.modelCopy"}
   = render :partial => "layouts/flash_msg"
   %h3
     = _('Basic Information')
@@ -7,44 +13,50 @@
       %label.col-md-2.control-label
         = _('Storage Manager')
       .col-md-8
-        = select_tag("storage_manager_id",
-          options_for_select([["<#{_('Choose')}>", nil]] + @storage_manager_choices.sort, disabled: ["<#{_('Choose')}>", nil]),
-                      "ng-model"                    => "cloudContainerModel.storage_manager_id",
-                      "ng-change"                   => "storageManagerChanged(cloudContainerModel.storage_manager_id)",
-                      "required"                    => "",
-                      :checkchange                  => true,
-                      "selectpicker-for-select-tag" => "")
+        %select{"name"        => "storage_manager_id",
+                "ng-model"    => "vm.cloudContainerModel.storage_manager_id",
+                "ng-options"  => "mgr.id as mgr.name for mgr in vm.storageManagers",
+                "ng-change"   => "storageManagerChanged(vm.cloudContainerModel.storage_manager_id)",
+                "required"    => "",
+                "disabled"    => !@storage_manager.nil?,
+                :checkchange  => true,
+                "pf-select"   => true}
+          %option{"value" => "", "disabled" => ""}
+            = "<#{_('Choose')}>"
+        %span.help-block{"ng-show" => "angularForm.storage_manager_id.$error.required"}
+          = _("Required")
 
-    .form-group
+    .form-group{"ng-class" => "{'has-error': angularForm.name.$invalid}"}
       %label.col-md-2.control-label
         = _('Container Name')
       .col-md-8
         %input.form-control{:type          => "text",
                             :name          => "name",
-                            'ng-model'     => "cloudContainerModel.name",
+                            'ng-model'     => "vm.cloudContainerModel.name",
                             'ng-maxlength' => 255,
                             :miqrequired   => true,
                             :checkchange   => true}
-  %div{"ng-if" => "cloudContainerModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::S3'"}
+  %div{"ng-if" => "vm.cloudContainerModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::S3'"}
     %h3
       = _('Placement')
     .form-horizontal
       .form-group{"ng-class"  => "{'has-error': angularForm.provider_region.$invalid}",
-                  "ng-if"     => "#{@provider_regions.keys.to_json}.includes(cloudContainerModel.parent_emstype)",
+                  "ng-if"     => "#{@provider_regions.keys.to_json}.includes(vm.cloudContainerModel.parent_emstype)",
                   "ng-switch" => "",
-                  "on"        => "cloudContainerModel.parent_emstype"}
+                  "on"        => "vm.cloudContainerModel.parent_emstype"}
         %label.col-md-2.control-label{"for" => "ems_region"}
           = _('Region')
         .col-md-8
           - @provider_regions.each do |name, regions|
             = select_tag('provider_region',
                          options_for_select([["<#{_('Choose')}>", nil]] + regions, disabled: ["<#{_('Choose')}>", nil]),
-                         "ng-model"                    => "cloudContainerModel.provider_region",
+                         "ng-model"                    => "vm.cloudContainerModel.provider_region",
                          "ng-switch-when"              => name,
                          "required"                    => "",
                          "checkchange"                 => "",
                          "selectpicker-for-select-tag" => "")
   = render :partial => "layouts/angular/x_edit_buttons_angular"
 
 :javascript
+  ManageIQ.angular.app.value('storageManagerId', '#{@storage_manager.try(:id)}');
   miq_bootstrap('#form_div');