From 3580a50186c5939e0ebac882c1f546235bfb580a Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Fri, 24 Jun 2016 14:16:54 -0400 Subject: [PATCH] Convert key-pair form to angular, add new GET method to populate cloud providers and add angular controller. --- .../auth_key_pair_cloud_controller.js | 66 ++++++++++++++++ .../auth_key_pair_cloud_controller.rb | 12 +++ app/views/auth_key_pair_cloud/_form.html.haml | 79 ++++++++++--------- config/routes.rb | 3 +- 4 files changed, 122 insertions(+), 38 deletions(-) create mode 100644 app/assets/javascripts/controllers/auth_key_pair_cloud/auth_key_pair_cloud_controller.js 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 new file mode 100644 index 00000000000..f0438ed6e6d --- /dev/null +++ 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(); +}]); \ No newline at end of file diff --git a/app/controllers/auth_key_pair_cloud_controller.rb b/app/controllers/auth_key_pair_cloud_controller.rb index 33b59c49e97..1c25801c777 100644 --- 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 index 91ddc04531c..d8372abd451 100644 --- 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 index d76289d8392..23d1fe04ff2 100644 --- 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