Convert key-pair form to angular, add new GET method to populate clou…

…d providers and add angular controller.
ManageIQ · Jun 30, 2016 · 3580a50 · 3580a50
1 parent 2979d7a
commit 3580a50
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 38 deletions.
diff --git a/app/assets/javascripts/controllers/auth_key_pair_cloud/auth_key_pair_cloud_controller.js b/app/assets/javascripts/controllers/auth_key_pair_cloud/auth_key_pair_cloud_controller.js
@@ -0,0 +1,66 @@
+ManageIQ.angular.app.controller('keyPairCloudFormController', ['$http', '$scope', 'keyPairFormId', 'miqService', function($http, $scope, keyPairFormId, miqService) {
+    var init = function() {
+        $scope.keyPairModel = {
+            name: '',
+            public_key: '',
+            ems_id: ''
+        };
+        $scope.formId = keyPairFormId;
+        $scope.afterGet = false;
+        $scope.modelCopy = angular.copy( $scope.keyPairModel );
+        $scope.model = 'keyPairModel';
+        $scope.ems_choices = [];
+        ManageIQ.angular.scope = $scope;
+
+        miqService.sparkleOn();
+        $http.get('/auth_key_pair_cloud/ems_form_choices').success(function(data) {
+            $scope.ems_choices = data.ems_choices;
+            if($scope.ems_choices.length > 0) {
+                $scope.keyPairModel.ems = $scope.ems_choices[0];
+            }
+            $scope.afterGet = true;
+            miqService.sparkleOff();
+        });
+
+        if (keyPairFormId == 'new') {
+            $scope.newRecord = true;
+        } else {
+            $scope.newRecord = false;
+        }
+    };
+
+    var keyPairEditButtonClicked = function(buttonName, serializeFields) {
+        miqService.sparkleOn();
+
+        //todo - save values to server
+        var url = '/auth_key_pair_cloud/create/' + keyPairFormId + '?button=' + buttonName;
+        $scope.keyPairModel.ems_id = $scope.keyPairModel.ems.id;
+        var moreUrlParams = $.param(miqService.serializeModel($scope.keyPairModel));
+        if(moreUrlParams)
+            url += '&' + decodeURIComponent(moreUrlParams);
+        miqService.miqAjaxButton(url, false);
+        miqService.sparkleOff();
+    };
+
+    $scope.cancelClicked = function() {
+        keyPairEditButtonClicked('cancel');
+        $scope.angularForm.$setPristine(true);
+    };
+
+    $scope.resetClicked = function() {
+        $scope.keyPairModel = angular.copy( $scope.modelCopy );
+        $scope.angularForm.$setPristine(true);
+        miqService.miqFlash("warn", __("All changes have been reset"));
+    };
+
+    $scope.saveClicked = function() {
+        keyPairEditButtonClicked('save', true);
+        $scope.angularForm.$setPristine(true);
+    };
+
+    $scope.addClicked = function() {
+        $scope.saveClicked();
+    };
+
+    init();
+}]);
diff --git a/app/controllers/auth_key_pair_cloud_controller.rb b/app/controllers/auth_key_pair_cloud_controller.rb
@@ -91,6 +91,18 @@ def form_field_changed
     end
   end
 
+  # REST call for provider choices
+  def ems_form_choices
+    assert_privileges("auth_key_pair_cloud_new")
+    ems_choices = []
+    ems_choices = ManageIQ::Providers::CloudManager.select { |ems| ems.class::AuthKeyPair.is_available?(:create_key_pair, ems) }.map do |ems|
+      {:name => ems.name, :id => ems.id}
+    end
+    render :json => {
+      :ems_choices => ems_choices
+    }
+  end
+
   def new
     assert_privileges("auth_key_pair_cloud_new")
     @key_pair = ManageIQ::Providers::CloudManager::AuthKeyPair.new

diff --git a/app/views/auth_key_pair_cloud/_form.html.haml b/app/views/auth_key_pair_cloud/_form.html.haml
@@ -1,44 +1,49 @@
-#main_div
-  - url = url_for(:action => 'form_field_changed', :id => @key_pair.id || "new")
+%h3
+  = _('Basic Information')
+  %br
+  %br
 
-  = render :partial => "layouts/flash_msg"
-
-  %h3
-    = _('Basic Information')
-  .form-horizontal
-    .form-group
-      %label.col-md-2.control-label
+.form-horizontal{:id => "start_form_div", :style => "display:none"}
+  %form#form_div{:name           => "angularForm",
+                 'ng-controller' => "keyPairCloudFormController",
+                 'ng-show'       => "afterGet",
+                 :novalidate     => true}
+    = render :partial => "layouts/flash_msg"
+    .form-group{"ng-class" => "{'has-error': angularForm.description.$invalid}"}
+      %label.col-md-2.control-label{"for" => "name"}
         = _('Name')
       .col-md-8
-        = text_field_tag("name",
-                          @edit[:new][:name],
-                          :maxlength => 50,
-                          :class => "form-control",
-                          "data-miq_focus" => true,
-                          "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
+        %input.form-control{:type            => "text",
+                            :name            => "name",
+                            "id"             => "name",
+                            'ng-model'       => "keyPairModel.name",
+                            :maxlength       => MAX_NAME_LEN,
+                            :required        => true,
+                            :checkchange     => "",
+                            "auto-focus"     => true,
+                            "start-form-div" => "start_form_div"}
+        %span.help-block{"ng-show" => "angularForm.description.$error.required"}
+          = _("Required")
     .form-group
-      %label.col-md-2.control-label
+      %label.col-md-2.control-label{"for" => "public_key"}
         = _('Public Key (optional)')
       .col-md-8
-        = text_area_tag("public_key",
-                          @edit[:new][:public_key],
-                          :size => "50x10",
-                          :class => "form-control",
-                          "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
-  .form-horizontal
-    .form-group
-      %label.col-md-2.control-label
-        = _('Provider')
-      .col-md-8
-        = select_tag("ems_id",
-                      options_for_select(@edit[:ems_choices].sort, @edit[:new][:ems_id]),
-                      :multiple => false,
-                      "data-miq_sparkle_on" => true,
-                      "data-miq_sparkle_off" => true,
-                      :class    => "selectpicker",
-                      "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
-    :javascript
-       miqInitSelectPicker();
-       miqSelectPickerEvent("ems_id", "#{url}")
+        %textarea.form-control{"name"            => "public_key",
+                               "id"             => "public_key",
+                               "ng-model"       => "keyPairModel.public_key",
+                               "rows"           => 10}
+    .form-horizontal
+      .form-group
+        %label.col-md-2.control-label
+          = _('Provider')
+        .col-md-8
+          %select{:name                         => "ems_id",
+                  "ng-model"                    => "keyPairModel.ems",
+                  "ng-options"                  => "ems.name for ems in ems_choices track by ems.id",
+                  "id"                          => "ems_id",
+                  "required"                    => ""}
+    = render :partial => "layouts/angular/x_edit_buttons_angular"
 
-  = render(:partial => '/layouts/edit_buttons', :locals  => {:ajax_buttons => true, :record_id => @key_pair.id || "", :action_url => "#{@key_pair.id ? 'update' : 'create'}"})
+:javascript
+  ManageIQ.angular.app.value('keyPairFormId', '#{@key_pair.id || "new"}');
+  miq_bootstrap('#form_div');
diff --git a/config/routes.rb b/config/routes.rb
@@ -137,7 +137,8 @@
         show
         show_list
         tagging_edit
-        tag_edit_form_field_changed
+        tag_edit_form_field_changed,
+        ems_form_choices
       ) + compare_get,
       :post => %w(
         button