요청 관리 -> variable 적용
This commit is contained in:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user