Update new cloud volume form while selecting

This patch * hides entire Placement group until one of the providers is chosen * disables all "Choose" options upon selection of any of the other choices * changes the style of the checkbox to `bs-switch`
ManageIQ · Mar 7, 2017 · 92961b5 · 92961b5
1 parent 14c08f3
commit 92961b5
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 70 deletions.
diff --git a/app/assets/javascripts/controllers/cloud_volume/cloud_volume_form_controller.js b/app/assets/javascripts/controllers/cloud_volume/cloud_volume_form_controller.js
@@ -1,11 +1,6 @@
 ManageIQ.angular.app.controller('cloudVolumeFormController', ['$http', '$scope', 'cloudVolumeFormId', 'miqService', function($http, $scope, cloudVolumeFormId, miqService) {
   $scope.cloudVolumeModel = { 
-    name: '', 
-    storage_manager_id: '', 
-    cloud_tenant_id: '',
-    availability_zone_id: '',
-    aws_iops: '',
-    aws_volume_type: ''
+    aws_encryption: false
   };
   $scope.formId = cloudVolumeFormId;
   $scope.afterGet = false;

diff --git a/app/views/cloud_volume/new.html.haml b/app/views/cloud_volume/new.html.haml
@@ -8,7 +8,7 @@
         = _('Storage Manager')
       .col-md-8
         = select_tag("storage_manager_id",
-          options_for_select([["<#{_('Choose')}>", nil]] + @storage_manager_choices.sort),
+          options_for_select([["<#{_('Choose')}>", nil]] + @storage_manager_choices.sort, disabled: ["<#{_('Choose')}>", nil]),
                       "ng-model"                    => "cloudVolumeModel.storage_manager_id",
                       "ng-change"                   => "storageManagerChanged(cloudVolumeModel.storage_manager_id)",
                       "required"                    => "",
@@ -37,73 +37,76 @@
                             'ng-change'    => "sizeChanged(cloudVolumeModel.size)",
                             :miqrequired   => true,
                             :checkchange   => true}
-  %h3
-    = _('Placement')
-  .form-horizontal
-    .form-group{"ng-class" => "{'has-error': angularForm.cloud_tenant_id.$invalid}", "ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::StorageManager::CinderManager'"}
-      %label.col-md-2.control-label
-        = _('Cloud Tenant')
-      .col-md-8
-        %select{"name"                        => "cloud_tenant_id",
-                "ng-model"                    => "cloudVolumeModel.cloud_tenant_id",
-                "ng-options"                  => "tenant.id as tenant.name for tenant in cloudTenantChoices",
-                "required"                    => "",
-                :miqrequired                  => true,
-                :checkchange                  => true,
-                "selectpicker-for-select-tag" => ""}
-          %option{"value" => ""}
-            = "<#{_('Choose')}>"
+  %div{"ng-if" => "cloudVolumeModel.storage_manager_id !== undefined"}
+    %h3
+      = _('Placement')
+    .form-horizontal
+      .form-group{"ng-class" => "{'has-error': angularForm.cloud_tenant_id.$invalid}", "ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::StorageManager::CinderManager'"}
+        %label.col-md-2.control-label
+          = _('Cloud Tenant')
+        .col-md-8
+          %select{"name"                        => "cloud_tenant_id",
+                  "ng-model"                    => "cloudVolumeModel.cloud_tenant_id",
+                  "ng-options"                  => "tenant.id as tenant.name for tenant in cloudTenantChoices",
+                  "required"                    => "",
+                  :miqrequired                  => true,
+                  :checkchange                  => true,
+                  "selectpicker-for-select-tag" => ""}
+            %option{"value" => "", "disabled" => ""}
+              = "<#{_('Choose')}>"
 
-    .form-group{"ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
-      %label.col-md-2.control-label
-        = _('Cloud Volume Type')
-      .col-md-8
-        %select{"name"                        => "aws_volume_type",
-                "ng-model"                    => "cloudVolumeModel.aws_volume_type",
-                "ng-options"                  => "voltype.type as voltype.name for voltype in awsVolumeTypes",
-                "ng-change"                   => "awsVolumeTypeChanged(cloudVolumeModel.aws_volume_type)",
-                "required"                    => "",
-                :miqrequired                  => true,
-                :checkchange                  => true,
-                "selectpicker-for-select-tag" => ""}
-          %option{"value" => ""}
-            = "<#{_('Choose')}>"
+      .form-group{"ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
+        %label.col-md-2.control-label
+          = _('Cloud Volume Type')
+        .col-md-8
+          %select{"name"                        => "aws_volume_type",
+                  "ng-model"                    => "cloudVolumeModel.aws_volume_type",
+                  "ng-options"                  => "voltype.type as voltype.name for voltype in awsVolumeTypes",
+                  "ng-change"                   => "awsVolumeTypeChanged(cloudVolumeModel.aws_volume_type)",
+                  "required"                    => "",
+                  :miqrequired                  => true,
+                  :checkchange                  => true,
+                  "selectpicker-for-select-tag" => ""}
+            %option{"value" => "", "disabled" => ""}
+              = "<#{_('Choose')}>"
 
-    .form-group{"ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
-      %label.col-md-2.control-label
-        = _('IOPS')
-      .col-md-8
-        %input.form-control{:type          => "text",
-                            :name          => "aws_iops",
-                            'ng-model'     => "cloudVolumeModel.aws_iops",
-                            'ng-maxlength' => 10,
-                            'ng-disabled'  => "cloudVolumeModel.aws_volume_type != 'io1'",
-                            :miqrequired   => true,
-                            :checkchange   => true}
+      .form-group{"ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
+        %label.col-md-2.control-label
+          = _('IOPS')
+        .col-md-8
+          %input.form-control{:type          => "text",
+                              :name          => "aws_iops",
+                              'ng-model'     => "cloudVolumeModel.aws_iops",
+                              'ng-maxlength' => 10,
+                              'ng-disabled'  => "cloudVolumeModel.aws_volume_type != 'io1'",
+                              :miqrequired   => true,
+                              :checkchange   => true}
 
-    .form-group{"ng-class" => "{'has-error': angularForm.aws_availability_zone_id.$invalid}", "ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
-      %label.col-md-2.control-label
-        = _('Availability Zone')
-      .col-md-8
-        %select{"name"                        => "aws_availability_zone_id",
-                "ng-model"                    => "cloudVolumeModel.aws_availability_zone_id",
-                "ng-options"                  => "az.ems_ref as az.name for az in availabilityZoneChoices",
-                "required"                    => "",
-                :miqrequired                  => true,
-                :checkchange                  => true,
-                "selectpicker-for-select-tag" => ""}
-          %option{"value" => ""}
-            = "<#{_('Choose')}>"
+      .form-group{"ng-class" => "{'has-error': angularForm.aws_availability_zone_id.$invalid}", "ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
+        %label.col-md-2.control-label
+          = _('Availability Zone')
+        .col-md-8
+          %select{"name"                        => "aws_availability_zone_id",
+                  "ng-model"                    => "cloudVolumeModel.aws_availability_zone_id",
+                  "ng-options"                  => "az.ems_ref as az.name for az in availabilityZoneChoices",
+                  "required"                    => "",
+                  :miqrequired                  => true,
+                  :checkchange                  => true,
+                  "selectpicker-for-select-tag" => ""}
+            %option{"value" => "", "disabled" => ""}
+              = "<#{_('Choose')}>"
 
-    .form-group{"ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
-      %label.col-md-2.control-label
-        = _('Encryption')
-      .col-md-8
-        %input.form-control{:type          => "checkbox",
-                            :name          => "encryption",
-                            'ng-model'     => "cloudVolumeModel.encryption",
-                            :miqrequired   => false,
-                            :checkchange   => true}
+      .form-group{"ng-if" => "cloudVolumeModel.emstype == 'ManageIQ::Providers::Amazon::StorageManager::Ebs'"}
+        %label.col-md-2.control-label
+          = _('Encryption')
+        .col-md-8
+          %input.form-control{"bs-switch"  => "",
+                              :data        => {:on_text => _('Yes'), :off_text => _('No'), :size => 'mini'},
+                              :type        => "checkbox",
+                              :name        => "encryption",
+                              'ng-model'   => "cloudVolumeModel.aws_encryption",
+                              :miqrequired => false,
+                              :checkchange => true}
 
   %table{:width => '100%'}
     %tr