From f3cef8707eac6e5d61622ddf7d0bb34f06723e8a Mon Sep 17 00:00:00 2001 From: Harpreet Kataria Date: Thu, 9 Feb 2017 16:36:02 -0500 Subject: [PATCH] Further changes to handle required fields on form Also fixed adding/editing of key/value pairs fields in the form https://www.pivotaltracker.com/story/show/138302747 --- .../catalog/catalog_item_form_controller.js | 46 +++++++------- app/views/catalog/_st_angular_form.html.haml | 2 +- .../_ansible_form_options_angular.html.haml | 61 +++++++++---------- 3 files changed, 55 insertions(+), 54 deletions(-) diff --git a/app/assets/javascripts/controllers/catalog/catalog_item_form_controller.js b/app/assets/javascripts/controllers/catalog/catalog_item_form_controller.js index 083d0b1a72ed..78ba1d25e8c1 100644 --- a/app/assets/javascripts/controllers/catalog/catalog_item_form_controller.js +++ b/app/assets/javascripts/controllers/catalog/catalog_item_form_controller.js @@ -6,6 +6,8 @@ ManageIQ.angular.app.controller('catalogItemFormController', ['$scope', 'catalog display: false, prov_type: '', catalog_id: '', + key: '', + key_value: '', provisioning_repository_id: '', provisioning_playbook_id: '', provisioning_machine_credential_id: '', @@ -31,9 +33,7 @@ ManageIQ.angular.app.controller('catalogItemFormController', ['$scope', 'catalog retirement_key: '', retirement_value: '', retirement_variables: {"r_var1": "r_val1", "r_var2": "r_val2"}, - retirement_editMode: false, - key: '', - key_value: '', + retirement_editMode: false }; $scope.formId = catalogItemFormId; $scope.afterGet = false; @@ -153,25 +153,25 @@ ManageIQ.angular.app.controller('catalogItemFormController', ['$scope', 'catalog // get playbooks for selected repository $scope.repositoryChanged = function(prefix, id) { - - API.get("/api/configuration_script_payload/?expand=resources&attributes=id,name").then(function(data){ - //var url = "/api/cloud_networks/" + '10000000000005' + "?attributes=cloud_subnets"; - $scope.catalogItemModel[prefix + '_playbook_id'] = ''; - $scope.catalogItemModel[prefix + '_repository_id'] = id; - $scope[prefix + '_playbooks'] = data.resources; + API.get("/api/configuration_script_sources/" + id + "?attributes=configuration_script_payloads").then(function(data){ + $scope.catalogItemModel[prefix + '_playbook_id'] = ''; + $scope.catalogItemModel[prefix + '_repository_id'] = id; + $scope[prefix + '_playbooks'] = data.configuration_script_payloads; }) }; $scope.$watch('_provisioning_repository', function(value) { if (value) { $scope.repositoryChanged("provisioning", value.id) - } + } else + $scope.catalogItemModel['provisioning_repository_id'] = '' }); $scope.$watch('_retirement_repository', function(value) { if (value) { $scope.repositoryChanged("retirement", value.id) - } + } else + $scope.catalogItemModel['retirement_repository_id'] = '' }); $scope.$watch('catalogItemModel.display', function(value) { @@ -193,13 +193,6 @@ ManageIQ.angular.app.controller('catalogItemFormController', ['$scope', 'catalog return $scope.catalogItemModel.retirement_repository_id !== ''; } - $scope.provisioning_playbook_selected = function() { - return $scope.catalogItemModel.provisioning_playbook_id !== ''; - } - - $scope.retirement_playbook_selected = function() { - return $scope.catalogItemModel.retirement_playbook_id !== ''; - } $scope.removeKeyValue = function(prefix, key) { delete $scope.catalogItemModel[prefix + "_variables"][key]; } @@ -219,12 +212,23 @@ ManageIQ.angular.app.controller('catalogItemFormController', ['$scope', 'catalog $scope.catalogItemModel[prefix + "_variables"][$scope.catalogItemModel.original_key] = $scope.catalogItemModel.original_key_value; } - $scope.saveKeyValue = function(prefix, key, key_value, index) { + $scope.saveKeyValue = function(prefix, index) { $scope.catalogItemModel[prefix + "_editMode"] = false; $scope.catalogItemModel.s_index = ''; - delete $scope.catalogItemModel[prefix + "_variables"][$scope.catalogItemModel.original_key]; - $scope.catalogItemModel[prefix + "_variables"][key] = key_value; + // delete key if key name was edited, and a add new key to hash with new name + if ($scope.catalogItemModel.original_key !== $scope.catalogItemModel.key) + delete $scope.catalogItemModel[prefix + "_variables"][$scope.catalogItemModel.original_key]; + + $scope.catalogItemModel[prefix + "_variables"][$scope.catalogItemModel.key] = $scope.catalogItemModel.key_value; } + $scope.toggleDialogSelection = function(prefix, selected_value) { + $scope.catalogItemModel[prefix + "_dialog_existing"] = selected_value + }; + + $scope.repositoryRequired = function(prefix) { + return prefix == "provisioning"; + }; + init(); }]); diff --git a/app/views/catalog/_st_angular_form.html.haml b/app/views/catalog/_st_angular_form.html.haml index cf2120d67499..b4cb9ddce64d 100644 --- a/app/views/catalog/_st_angular_form.html.haml +++ b/app/views/catalog/_st_angular_form.html.haml @@ -51,7 +51,7 @@ .col-md-8 %select{"ng-model" => "_catalog", "name" => "catalog_id", - "required" => "catalogItemModel.display" ? true : false, + "ng-required" => "catalogItemModel.display", 'ng-options' => 'catalog as catalog.name for catalog in catalogs', 'pf-select' => true} %option{"value" => ""} diff --git a/app/views/layouts/angular/_ansible_form_options_angular.html.haml b/app/views/layouts/angular/_ansible_form_options_angular.html.haml index 73c3f50b890b..647ed9c16c03 100644 --- a/app/views/layouts/angular/_ansible_form_options_angular.html.haml +++ b/app/views/layouts/angular/_ansible_form_options_angular.html.haml @@ -5,11 +5,10 @@ %label.col-md-2.control-label{"for" => "#{prefix}_repository_id"} = _('Repository') .col-md-8 - %select{"ng-model" => "#{ng_model}.#{prefix}_repository_id", + %select{"ng-model" => "_#{prefix}_repository", "name" => "#{prefix}_repository_id", 'ng-options' => 'repository as repository.name for repository in repositories', - "required" => "", - :miqrequired => true, + "ng-required" => "repositoryRequired('#{prefix}')", 'ng_change' => "repository_changed()", 'pf-select' => true} %option{"value" => ""} @@ -20,7 +19,7 @@ %label.col-md-2.control-label{"for" => "#{prefix}_playbook_id"} = _('Playbook') .col-md-8 - %select{"ng-model" => "#{ng_model}.#{prefix}_playbook", + %select{"ng-model" => "_#{prefix}_playbook", "name" => "#{prefix}_playbook_id", 'ng-options' => "playbook as playbook.name for playbook in #{prefix}_playbooks", "required" => "", @@ -29,12 +28,13 @@ 'pf-select' => true} %option{"value" => ""} = "<#{_('Choose')}>" - #credentials_div{"ng-show" => "#{prefix}_playbook_selected()"} + + #credentials_div{"ng-show" => "#{prefix}_repository_selected()"} .form-group{"ng-class" => "{'has-error': angularForm.#{prefix}_machine_credential_id.$invalid}"} %label.col-md-2.control-label{"for" => "#{prefix}_machine_credential_id"} = _('Machine Credentials') .col-md-8 - %select{"ng-model" => "#{ng_model}.#{prefix}_machine_credential", + %select{"ng-model" => "_#{prefix}_machine_credential", "name" => "#{prefix}_machine_credential_id", 'ng-options' => 'machine_credential as machine_credential.name for machine_credential in machine_credentials', "required" => "", @@ -48,7 +48,7 @@ %label.col-md-2.control-label{"for" => "#{prefix}_network_credential_id"} = _('Network Credentials') .col-md-8 - %select{"ng-model" => "#{ng_model}.#{prefix}_network_credential", + %select{"ng-model" => "_#{prefix}_network_credential", "name" => "#{prefix}_network_credential_id", 'ng-options' => 'network_credential as network_credential.name for network_credential in network_credentials', :checkchange => true, @@ -60,7 +60,7 @@ %label.col-md-2.control-label{"for" => "#{prefix}_cloud_credential_id"} = _('Cloud Credentials') .col-md-8 - %select{"ng-model" => "#{ng_model}.#{prefix}_cloud_credential", + %select{"ng-model" => "_#{prefix}_cloud_credential", "name" => "#{prefix}_cloud_credential_id", 'ng-options' => 'cloud_credential as cloud_credential.name for cloud_credential in cloud_credentials', :checkchange => true, @@ -91,24 +91,20 @@ %input.form-control{:type => "text", 'ng-model' => "#{ng_model}.#{prefix}_key", :name => "#{prefix}_key", - :maxlength => 50, "placeholder" => "key", - "required" => "(#{ng_model}.#{prefix}_key == '' || #{ng_model}.#{prefix}_value != '')" ? true : false, "checkchange" => ""} - %span.help-block{"ng-show" => "(#{ng_model}.#{prefix}_key == '' || #{ng_model}.#{prefix}_value != '')"} + %span.help-block{"ng-show" => "(#{ng_model}.#{prefix}_key === '' && #{ng_model}.#{prefix}_value !== '')"} = _("Required") %td %input.form-control{:type => "text", 'ng-model' => "#{ng_model}.#{prefix}_value", :name => "#{prefix}_value", - :maxlength => 50, "placeholder" => "value", - "required" => "(#{ng_model}.#{prefix}_key != '' || #{ng_model}.#{prefix}_value == '')" ? true : false, "checkchange" => ""} - %span.help-block{"ng-show" => "(#{ng_model}.#{prefix}_key != '' || #{ng_model}.#{prefix}_value == '')"} + %span.help-block{"ng-show" => "(#{ng_model}.#{prefix}_key !== '' && #{ng_model}.#{prefix}_value === '')"} = _("Required") - %td{:class => "action-cell", :style => "width: 15px"} + %td %div{:class => "btn-container"} %button{:class => "btn btn-link", :type => "button", @@ -120,33 +116,33 @@ %td{"ng-if" => "!#{ng_model}.#{prefix}_editMode || (#{ng_model}.#{prefix}_editMode && $index !== #{ng_model}.s_index)"} {{key}} %td{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index"} - %input.form-control{"type" => "text", - "name" => "key", - "ng-model" => "key", - "checkchange" => "", + %input.form-control{:type => "text", + :name => "key", + 'ng-model' => "#{ng_model}.key", + "ng-change" => "", "miqrequired" => ""} %td{"ng-if" => "!#{ng_model}.#{prefix}_editMode || (#{ng_model}.#{prefix}_editMode && $index !== #{ng_model}.s_index)"} {{key_value}} %td{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index"} - %input.form-control{"type" => "text", - "name" => "key_value", - "ng-model" => "key_value", - "checkchange" => "", + %input.form-control{:type => "text", + :name => "key_value", + 'ng-model' => "#{ng_model}.key_value", + "ng-change" => "", "miqrequired" => ""} -#%td{:class => "action-cell", :style => "width: 15px"} -# %div{:class => "btn-container"} %td - %div{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index", :class => "pull-right"} - %button{:class => "btn btn-primary", :type => "button", "ng-disabled" => "!#{ng_model}.#{prefix}_editMode", "ng-click" => "saveKeyValue('#{prefix}', this.key)"} + %div{"ng-if" => "#{ng_model}.#{prefix}_editMode && $index === #{ng_model}.s_index"} + %button{:class => "btn btn-primary", :type => "button", "ng-disabled" => "(#{ng_model}.key === '' || #{ng_model}.key_value === '')", "ng-click" => "saveKeyValue('#{prefix}', $index)"} =_("Save") - %button{:class => "btn btn-default", :type => "button", "ng-click" => "cancelKeyValue('#{prefix}', this.key)"} + %button{:class => "btn btn-default", :type => "button", "ng-click" => "cancelKeyValue('#{prefix}', this.key, this.key_value, $index)"} =_("Cancel") %div{"ng-if" => "!#{ng_model}.#{prefix}_editMode || (#{ng_model}.#{prefix}_editMode && $index !== #{ng_model}.s_index)", :class => "btn-container"} %button{:class => "btn btn-link", :type => "button", "ng-click" => "editKeyValue('#{prefix}', this.key, this.key_value, $index)", "ng-disabled" => "#{ng_model}.#{prefix}_editMode"} %span{:class => "pficon pficon-edit"} - %button{:class => "btn btn-link", :type => "button", "ng-click" => "removeKeyValue('#{prefix}', this.key)", "ng-disabled" => "#{ng_model}.#{prefix}_editMode"} + %button{:class => "btn btn-link", :type => "button", "ng-click" => "removeKeyValue('#{prefix}', this.key, this.key_value, $index)", "ng-disabled" => "#{ng_model}.#{prefix}_editMode"} %span{:class => "pficon pficon-delete"} .form-group @@ -155,17 +151,17 @@ {{#{ng_model}.#{prefix}_dialog_existing}} .col-md-4 %label.radio - %input{"ng-model" => "#{prefix}_dialog_existing", :type => "radio", :value => "existing", "ng-checked" => "#{ng_model}.#{prefix}_dialog_existing == 'existing'"} + %input{"ng-model" => "#{prefix}_dialog_existing", :type => "radio", :value => "existing", "ng-click" => "toggleDialogSelection('#{prefix}', 'existing')", "ng-checked" => "#{ng_model}.#{prefix}_dialog_existing == 'existing'"} = _("Use Existing") %label.radio - %input{"ng-model" => "#{prefix}_dialog_existing", :type => "radio", :value => "create", "ng-checked" => ("#{ng_model}.#{prefix}_dialog_existing == create")} + %input{"ng-model" => "#{prefix}_dialog_existing", :type => "radio", :value => "create", "ng-click" => "toggleDialogSelection('#{prefix}', 'create')", "ng-checked" => ("#{ng_model}.#{prefix}_dialog_existing == 'create'")} = _("Create New") .col-md-4 - .form-group{"ng-class" => "{'has-error': angularForm.#{prefix}_dialog_id.$invalid}", "ng-show" => "#{ng_model}.#{prefix}_dialog_existing == 'existing'"} + .form-group{"ng-class" => "{'has-error': angularForm.#{prefix}_dialog_id.$invalid}", "ng-if" => "#{ng_model}.#{prefix}_dialog_existing == 'existing'"} %select{"ng-model" => "_#{prefix}_dialog", "name" => "#{prefix}_dialog_id", 'ng-options' => 'dialog as dialog.label for dialog in dialogs', - "required" => "", + "ng-required" => "#{ng_model}.#{prefix}_dialog_existing == 'existing'", :miqrequired => true, :checkchange => true, 'pf-select' => true} @@ -174,11 +170,12 @@ %span.help-block{"ng-show" => "angularForm.#{prefix}_dialog_id.$error.miqrequired"} = _("Required") - .form-group{"ng-class" => "{'has-error': angularForm.#{prefix}_dialog_name.$invalid}", "ng-show" => "#{ng_model}.#{prefix}_dialog_existing == 'create'"} + .form-group{"ng-class" => "{'has-error': angularForm.#{prefix}_dialog_name.$invalid}", "ng-if" => "#{ng_model}.#{prefix}_dialog_existing == 'create'"} %input.form-control{:type => "text", 'ng-model' => "#{ng_model}.#{prefix}_dialog_name", :name => "#{prefix}_dialog_name", :maxlength => 50, + "ng-required" => "#{ng_model}.#{prefix}_dialog_existing == 'create'", "miqrequired" => "", "checkchange" => ""} %span.help-block{"ng-show" => "angularForm.#{prefix}_dialog_name.$error.miqrequired"}