Skip to content

Commit

Permalink
Further changes to handle required fields on form
Browse files Browse the repository at this point in the history 
Also fixed adding/editing of key/value pairs fields in the form

https://www.pivotaltracker.com/story/show/138302747
  • Loading branch information
@h-kataria
h-kataria committed Feb 9, 2017
1 parent 0c2ec55 commit f3cef87
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 54 deletions.
46 changes: 25 additions & 21 deletions app/assets/javascripts/controllers/catalog/catalog_item_form_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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];
}
Expand All @@ -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();
}]);
2 changes: 1 addition & 1 deletion app/views/catalog/_st_angular_form.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" => ""}
Expand Down
61 changes: 29 additions & 32 deletions app/views/layouts/angular/_ansible_form_options_angular.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" => ""}
Expand All @@ -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" => "",
Expand All @@ -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" => "",
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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",
Expand All @@ -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
Expand All @@ -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}
Expand All @@ -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"}
Expand Down

0 comments on commit f3cef87

Please sign in to comment.