git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : attitonal form as key pair values

Browse Source
This commit is contained in:
aungthetkhaing
2025-05-28 17:58:30 +06:30
parent 8e39cf806e
commit d49ebbf617
1 changed files with 138 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
app/views/settings/payment_method_settings/_form.html.erb
View File

@@ -1,39 +1,69 @@
<% breadcrumb_add t("payment_methods"), settings_payment_method_settings_path, settings_payment_method_settings_path, t("views.btn.#{action_name}") %> <% breadcrumb_add t("payment_methods"), settings_payment_method_settings_path, settings_payment_method_settings_path, t("views.btn.#{action_name}") %>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="card"> <div class="card">
<div class="body"> <div class="body">
<%= simple_form_for([:settings, @settings_payment_method_setting]) do |f| %> <%= simple_form_for([:settings, @settings_payment_method_setting]) do |f| %>
<%= f.error_notification %> <%= f.error_notification %>
<div class="form-inputs p-l-15"> <div class="form-inputs p-l-15">
<%= f.input :payment_method %> <%= f.input :payment_method %>
<%= f.input :is_active %> <%= f.input :is_active %>
<!-- <div class="form-group gateway_communication_type bmd-form-group"> <%= f.input :gateway_communication_type, collection: [ "Api", "Device", "Manual"] %>
<%= f.label :gateway_communication_type, 'Gateway Communication Type'%> <%= f.input :gateway_url, required: true %>
<select class="form-control col-md-12 gateway_type" name="gateway_communication_type" > <%= f.input :auth_token, required: true %>
<option value="">Select Gateway Type</option> <%= f.input :merchant_account_id, required: true %>
<option value="Api">Api</option>
<option value="Device">Device</option>
<option value="Default">Default</option>
</select>
</div> -->
<%= f.input :gateway_communication_type,:class=>'gateway_type', collection: [ "Api", "Device", "Manual"] %>
<%= f.input :gateway_url ,:class=>'gateway_type', :required => true %>
<%= f.input :auth_token ,:class=>'auth_token', :required => true %>
<%= f.input :merchant_account_id ,:class=>'merchant_id', :required => true%>
<%= f.input :additional_parameters, as: :text %>
<!-- JSON Key-Value Editor -->
<div class="form-group">
<%= f.label :additional_parameters, 'Additional Parameters (Key-Value Pairs)' %>
<div id="json-fields">
<% if @settings_payment_method_setting.additional_parameters.present? %>
<% JSON.parse(@settings_payment_method_setting.additional_parameters).each do |key, value| %>
<div class="key-value-pair row mb-2">
<div class="col-md-5">
<input type="text" name="param_keys[]" class="form-control" placeholder="Key" value="<%= key %>">
</div>
<div class="col-md-5">
<input type="text" name="param_values[]" class="form-control" placeholder="Value" value="<%= value %>">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger remove-field">Remove</button>
</div>
</div>
<% end %>
<% else %>
<div class="key-value-pair row mb-2">
<div class="col-md-5">
<input type="text" name="param_keys[]" class="form-control" placeholder="Key">
</div>
<div class="col-md-5">
<input type="text" name="param_values[]" class="form-control" placeholder="Value">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger remove-field">Remove</button>
</div>
</div>
<% end %>
</div>
<button type="button" id="add-field" class="btn btn-primary mt-2">
<i class="material-icons">add</i> Add Parameter
</button>
<%= f.hidden_field :additional_parameters, id: 'additional-parameters-json' %>
</div>
</div>
<div class="form-actions p-l-15">
<%= f.submit "Submit", class: 'btn btn-primary submitBtn btn-lg waves-effect' %>
</div>
<% end %>
</div> </div>
<div class="form-actions p-l-15">
<%= f.submit "Submit",:class => 'btn btn-primary submitBtn btn-lg waves-effect' %>
</div>
<% end %>
</div> </div>
</div> </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card"> <div class="card">
<div class="body"> <div class="body">
@@ -57,23 +87,98 @@
2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.payment_method_txt") %> <br> 2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.payment_method_txt") %> <br>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const jsonFields = document.getElementById('json-fields');
const jsonOutput = document.getElementById('additional-parameters-json');
document.getElementById('add-field').addEventListener('click', function() {
const newPair = document.createElement('div');
newPair.className = 'key-value-pair row mb-2';
newPair.innerHTML = `
<div class="col-md-5">
<input type="text" name="param_keys[]" class="form-control" placeholder="Key">
</div>
<div class="col-md-5">
<input type="text" name="param_values[]" class="form-control" placeholder="Value">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger remove-field">Remove</button>
</div>
`;
jsonFields.appendChild(newPair);
attachRemoveListener(newPair);
attachInputListeners(newPair);
});
function attachRemoveListener(element) {
const removeBtn = element.querySelector('.remove-field');
if (removeBtn) {
removeBtn.addEventListener('click', function() {
element.remove();
updateJsonOutput();
});
}
}
function attachInputListeners(element) {
element.querySelectorAll('input').forEach(input => {
input.addEventListener('input', updateJsonOutput);
});
}
function updateJsonOutput() {
const keys = document.querySelectorAll('input[name="param_keys[]"]');
const values = document.querySelectorAll('input[name="param_values[]"]');
const data = {};
let hasData = false;
keys.forEach((keyInput, index) => {
const key = keyInput.value.trim();
const value = values[index]?.value.trim() || '';
if (key) {
data[key] = value;
hasData = true;
}
});
jsonOutput.value = hasData ? JSON.stringify(data) : '';
}
document.querySelectorAll('.key-value-pair').forEach(pair => {
attachRemoveListener(pair);
attachInputListeners(pair);
});
updateJsonOutput();
document.querySelector('form').addEventListener('submit', function(e) {
updateJsonOutput();
if (!confirm('Are you sure you want to save these parameters?')) {
e.preventDefault();
}
});
});
</script>
<!-- <script type="text/javascript"> <!-- <script type="text/javascript">
$(function() { $(function() {
$(document).on('click', '#payment_method_setting_gateway_communication_type', function(event){ $(document).on('click', '#payment_method_setting_gateway_communication_type', function(event){
if ($(this).val() == "Api") { if ($(this).val() == "Api") {
$('.submitBtn').attr("disabled", true); $('.submitBtn').attr("disabled", true);
}else{ }else{
$('.submitBtn').removeAttr("disabled"); $('.submitBtn').removeAttr("disabled");
} }
}); });
$( "#payment_method_setting_gateway_url" ).keypress(function() { $( "#payment_method_setting_gateway_url" ).keypress(function() {
}); });
}); });
</script> </script>
--> -->