요청 관리 -> variable 적용

This commit is contained in:
현성필
2023-09-11 17:16:18 +09:00
parent 23062059c0
commit c68be7c948
15 changed files with 149 additions and 234 deletions
@@ -115,6 +115,12 @@
aria-selected="false">Header
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link btn_variables_tab" data-bs-toggle="tab"
type="button" role="tab" aria-controls="variables"
aria-selected="false">Variables
</button>
</li>
</ul>
<div class="tab-content border-bottom" style="min-height: 300px;">
<div class="tab-pane fade show request_param_tab" role="tabpanel"
@@ -126,8 +132,7 @@
<th scope="col">이름</th>
<th></th>
<th>
<button type="button" class="btn btn-secondary btn-sm btn_add_query">추가
</button>
<button type="button" class="btn btn-secondary btn-sm btn_add_query">추가</button>
</th>
</tr>
</thead>
@@ -144,8 +149,7 @@
<th scope="col">이름</th>
<th scope="col"></th>
<th scope="col">
<button type="button" class="btn btn-secondary btn-sm btn_add_header">추가
</button>
<button type="button" class="btn btn-secondary btn-sm btn_add_header">추가</button>
</th>
</tr>
</thead>
@@ -153,6 +157,24 @@
</tbody>
</table>
</div>
<div class="tab-pane fade variables_tab" role="tabpanel"
aria-labelledby="variables-tab">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">
<button type="button" class="btn btn-secondary btn-sm btn_add_variables">추가
</button>
</th>
</tr>
</thead>
<tbody class="variables">
</tbody>
</table>
</div>
<div class="tab-pane fade request_body_tab" role="tabpanel"
aria-labelledby="requestBody-tab">
<select class="form-select mt-1 request_body_type" name="request_type">
@@ -171,17 +193,10 @@
</div>
<ul class="nav nav-tabs mt-1" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab"
data-bs-target="#responseBodyTab" type="button" role="tab" aria-controls="responseBody"
aria-selected="false">Body
</button>
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#responseBodyTab" type="button" role="tab" aria-controls="responseBody" aria-selected="false">Body</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab"
data-bs-target="#responseHeaderTab" type="button" role="tab"
aria-controls="responseHeader"
aria-selected="false">Header
</button>
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#responseHeaderTab" type="button" role="tab" aria-controls="responseHeader" aria-selected="false">Header</button>
</li>
</ul>
<div class="tab-content border-bottom" style="min-height: 250px;">
@@ -365,6 +380,32 @@
target.find('.path').val(model.path);
},
renderVariables: function (tabIdx) {
let target = $('#api_request_' + tabIdx);
target.find('.variables').empty();
let model = apiRequests[tabIdx];
for (let i = 0; i < model.variables.length; i++) {
let template = $('#inputTemplate').children().find('tr').clone();
if (model.variables[i].enabled) {
template.find('input[name="enabled"]').prop("checked", model.variables[i].enabled);
}
template.find('input[name="key"]').val(model.variables[i].key);
template.find('input[name="value"]').val(model.variables[i].value);
template.find('button').attr("data-id", i);
template.find('input[name="enabled"]').on('change', function () {
model.variables[i].enabled = $(this).prop('checked');
});
template.find('input[name="key"]').on('input', function () {
model.variables[i].key = $(this).val();
});
template.find('input[name="value"]').on('input', function () {
model.variables[i].value = $(this).val();
});
target.find('.variables').append(template);
}
},
renderHeaders: function (tabIdx) {
let target = $('#api_request_' + tabIdx);
target.find('.request_headers').empty();
@@ -437,9 +478,11 @@
template.attr('class', 'tab-pane fade mt-1' + (idx === this.currentIdx ? ' show active' : ''));
template.find('.btn_request_param_tab').attr('data-bs-target', "#requestParamTab_" + idx);
template.find('.btn_request_header_tab').attr('data-bs-target', "#requestHeaderTab_" + idx);
template.find('.btn_variables_tab').attr('data-bs-target', "#variablesTab_" + idx);
template.find('.btn_request_body_tab').attr('data-bs-target', "#requestBodyTab_" + idx);
template.find('.request_header_tab').attr('id', "requestHeaderTab_" + idx);
template.find('.variables_tab').attr('id', "variablesTab_" + idx);
template.find('.request_param_tab').attr('id', "requestParamTab_" + idx);
template.find('.request_body_tab').attr('id', "requestBodyTab_" + idx);
template.find('.api_name').text(model.name);
@@ -455,6 +498,10 @@
controller.addQueryParam(idx, '', '');
});
target.find('.btn_add_variables').click(function () {
controller.addVariable(idx, '', '');
});
target.find('input[name="basePath"]').val(target.find('select[name="server"] option:selected').data('path'));
target.find('select[name="server"]').val(model.server);
target.find('select[name="server"]').on('change', function () {
@@ -479,6 +526,12 @@
}
});
target.find('.variables').on('click', 'button', function () {
if ($(this).hasClass('btn_remove')) {
controller.removeVariable(idx, $(this).data("id"));
}
});
target.find('.path').on('input', function () {
model.path = $(this).val();
model.queryParams = [];
@@ -536,6 +589,7 @@
target.find('.method').val(model.method);
this.renderParam(idx);
this.renderHeaders(idx);
this.renderVariables(idx);
this.openTab(view.currentIdx);
},
render: function () {
@@ -681,6 +735,20 @@
});
view.renderParam(tabIdx);
},
addVariable: function (tabIdx, key, value) {
let model = apiRequests[tabIdx];
model.variables.push({
key: key,
value: value
});
view.renderVariables(tabIdx);
},
removeVariable: function (tabIdx, idx) {
let model = apiRequests[tabIdx];
model.variables.splice(idx, 1);
this.buildPath(tabIdx);
view.renderVariables(tabIdx);
},
buildPath: function (tabIdx) {
let model = apiRequests[tabIdx];
let queryString = model.path.split('?')[0];
@@ -861,6 +929,7 @@
path: '',
headers: [],
queryParams: [],
variables: [],
requestBody: '',
collectionId : collectionId,
responseModel: {