PropertyTable 생성
This commit is contained in:
현성필
+110
-107
@@ -1,6 +1,8 @@
|
||||
import * as monaco from 'monaco-editor';
|
||||
import APIClient from './APIClient';
|
||||
import EditableInput from './components/EditableInput';
|
||||
import {createPopper} from "@popperjs/core/lib/popper-lite";
|
||||
import PropertyTable from "./components/PropertyTable";
|
||||
|
||||
|
||||
class APITester {
|
||||
@@ -20,7 +22,8 @@ class APITester {
|
||||
this.postRequestEditors = [];
|
||||
|
||||
this.apiClient = new APIClient();
|
||||
console.log('test');
|
||||
this.popperContent = document.getElementById('popperContent');
|
||||
this.popperInstance = null;
|
||||
}
|
||||
|
||||
renderServers(selectedServer) {
|
||||
@@ -67,7 +70,8 @@ class APITester {
|
||||
<input type="text" name="basePath" class="form-control" style="width: 180px; border-radius: 0" value="${this.basePath(apiRequest.server)}" readonly>
|
||||
<label class="must">기본 경로</label>
|
||||
</div>
|
||||
<div class="form-floating editableInput me-1">
|
||||
<div class="form-floating editableInput me-1 path" data-name="path" data-label="Path">
|
||||
<label>Path</label>
|
||||
</div>
|
||||
<button class="btn btn-primary send me-1">Send</button>
|
||||
<button class="btn btn-primary save" data-index="${index}" style="height: 58px;">저장</button>
|
||||
@@ -105,23 +109,9 @@ class APITester {
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 300px;">
|
||||
<div class="tab-pane fade show request_param_tab" role="tabpanel" id="requestParamTab_${apiRequest.id}"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">이름</th>
|
||||
<th>값</th>
|
||||
<th>
|
||||
<button type="button" class="btn btn-secondary btn-sm btn_add_query">추가</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="query_params">
|
||||
${this.renderParams(apiRequest.queryParams)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="tab-pane fade show request_param_tab" role="tabpanel" id="requestParamTab_${apiRequest.id}" aria-labelledby="requestParams-tab">
|
||||
<div class="query_params">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade request_header_tab" role="tabpanel" id="requestHeaderTab_${apiRequest.id}"
|
||||
aria-labelledby="requestHeader-tab">
|
||||
@@ -150,13 +140,22 @@ class APITester {
|
||||
</select>
|
||||
<div class="request_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}"
|
||||
aria-labelledby="preScrit-tab">
|
||||
<div class="pre-request mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
<div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}" aria-labelledby="preScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
|
||||
aria-labelledby="postScrit-tab">
|
||||
<div class="post-request mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
@@ -203,26 +202,6 @@ class APITester {
|
||||
`;
|
||||
}
|
||||
|
||||
queryParamTemplate(queryParam, index) {
|
||||
return `
|
||||
<tr data-index="${index}">
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="queryParams[${index}].enabled" ${queryParam.enabled ? 'checked' : ''} />
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<input class="form-control" type="text" name="queryParams[${index}].key" value="${queryParam.key}"/>
|
||||
</td>
|
||||
<td>
|
||||
<input class="form-control" type="text" name="queryParams[${index}].value" value="${queryParam.value}"/>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-secondary btn-sm btn_remove_query">제거</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
headerTemplate(header, index) {
|
||||
return `
|
||||
@@ -308,8 +287,6 @@ class APITester {
|
||||
const events = [
|
||||
{selector: '.btn_add_header', action: this.addHeader.bind(this)},
|
||||
{selector: '.btn_remove_header', action: this.removeHeader.bind(this)},
|
||||
{selector: '.btn_add_query', action: this.addQueryParam.bind(this)},
|
||||
{selector: '.btn_remove_query', action: this.removeQueryParam.bind(this)},
|
||||
{selector: '.send', action: this.handleSendAPIRequest.bind(this)},
|
||||
{selector: '.save', action: this.saveAPIRequest.bind(this)},
|
||||
{selector: '.save_collection', action: this.addCollection.bind(this)},
|
||||
@@ -332,10 +309,6 @@ class APITester {
|
||||
$(document).on('click', event.selector, event.action);
|
||||
}
|
||||
|
||||
$(document).on('input', '.query_params input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('input', '.query_params input', this.buildPath.bind(this));
|
||||
$(document).on('change', '.query_params input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.query_params input', this.buildPath.bind(this));
|
||||
$(document).on('change', '.path', this.parseParam.bind(this));
|
||||
$(document).on('change', '.request_headers input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.api_request_info select, .api_request_info input', this.handleUIUpdate.bind(this));
|
||||
@@ -510,9 +483,6 @@ class APITester {
|
||||
target.find('input[name="basePath"]').val(this.basePath(model.server));
|
||||
}
|
||||
|
||||
renderParams(params) {
|
||||
return params.map((param, index) => this.queryParamTemplate(param, index)).join('');
|
||||
}
|
||||
|
||||
renderHeaders(headers) {
|
||||
return headers.map((header, index) => this.headerTemplate(header, index)).join('');
|
||||
@@ -532,6 +502,29 @@ class APITester {
|
||||
}
|
||||
}
|
||||
|
||||
showPopper(element) {
|
||||
this.popperContent.style.display = 'block';
|
||||
this.popperInstance = createPopper(element, popperContent, {
|
||||
placement: 'bottom', // Popper below the element
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 8], // Adjust the position if needed
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
hidePopper(element) {
|
||||
if (this.popperInstance) {
|
||||
this.popperInstance.destroy();
|
||||
this.popperInstance = null;
|
||||
}
|
||||
this.popperContent.style.display = 'none';
|
||||
}
|
||||
|
||||
renderTabContent(index) {
|
||||
var me = this;
|
||||
let apiRequestTabContent = $(this.apiTabContentTarget);
|
||||
@@ -539,17 +532,40 @@ class APITester {
|
||||
|
||||
apiRequestTabContent.append(this.apiRequestTemplate(model, index));
|
||||
|
||||
apiRequestTabContent.find(`#api_request_${model.id}`).find('.editableInput').each(function () {
|
||||
let editableInput = new EditableInput({
|
||||
name: 'path',
|
||||
value: model.path,
|
||||
placeholder: 'Enter text here...',
|
||||
label: 'Path'
|
||||
});
|
||||
console.log(this);
|
||||
editableInput.init(this, (event) => {
|
||||
me.parseParam(event);
|
||||
let editableInput = new EditableInput({
|
||||
name: 'path',
|
||||
value: model.path,
|
||||
});
|
||||
|
||||
let propertyTable = new PropertyTable({
|
||||
propertyName: 'queryParams',
|
||||
properties: model.queryParams
|
||||
});
|
||||
propertyTable.init(apiRequestTabContent.find('.query_params')[0], (properties) => {
|
||||
model.queryParams = properties;
|
||||
console.log(model.queryParams);
|
||||
this.buildPath(model);
|
||||
editableInput.setValue(model.path);
|
||||
});
|
||||
|
||||
apiRequestTabContent.find(`#api_request_${model.id}`).find('.api_request_info').find('.path').each(function () {
|
||||
|
||||
editableInput.init(this, (value) => {
|
||||
model.path = value;
|
||||
model.queryParams = me.parseParam(model.path);
|
||||
propertyTable.setProperties(model.queryParams);
|
||||
});
|
||||
|
||||
$(this).append(`<label>Path</label>`);
|
||||
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
|
||||
});
|
||||
|
||||
document.querySelectorAll('.variable').forEach(element => {
|
||||
element.addEventListener('mouseover', () => me.showPopper(element));
|
||||
element.addEventListener('mouseout', () => me.hidePopper(element));
|
||||
});
|
||||
|
||||
this.openTab(model.id);
|
||||
@@ -560,6 +576,23 @@ class APITester {
|
||||
language: 'json',
|
||||
automaticLayout: true
|
||||
});
|
||||
|
||||
requestBodyEditor.onMouseMove((e) => {
|
||||
let position = e.target.position;
|
||||
if (position) {
|
||||
let model = requestBodyEditor.getModel();
|
||||
let word = model.getWordAtPosition(position);
|
||||
let lineContent = model.getLineContent(position.lineNumber);
|
||||
if (word) {
|
||||
if (lineContent.indexOf('{{' + word.word + '}}') > -1) {
|
||||
me.showPopper(e.target.element);
|
||||
}
|
||||
} else {
|
||||
me.hidePopper(e.target.element);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
me.requestEditors.push(requestBodyEditor);
|
||||
target.find(".request_body")[0].addEventListener('shown.bs.tab', () => {
|
||||
me.requestEditors[index].layout();
|
||||
@@ -577,13 +610,16 @@ class APITester {
|
||||
let responseBodyEditor = monaco.editor.create(target.find(".response_body")[0], {
|
||||
value: '',
|
||||
language: 'json',
|
||||
automaticLayout: true
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
});
|
||||
|
||||
me.responseEditors.push(responseBodyEditor);
|
||||
|
||||
let consoleEditor = monaco.editor.create(target.find(".console")[0], {
|
||||
value: '',
|
||||
automaticLayout: true
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
});
|
||||
|
||||
me.consoleEditors.push(consoleEditor);
|
||||
@@ -591,7 +627,8 @@ class APITester {
|
||||
let preRequestEditor = monaco.editor.create(target.find(".pre-request")[0], {
|
||||
value: model.preRequestScript,
|
||||
language: 'javascript',
|
||||
automaticLayout: true
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
});
|
||||
me.preRequestEditors.push(preRequestEditor);
|
||||
target.find(".pre-request")[0].addEventListener('shown.bs.tab', () => {
|
||||
@@ -605,7 +642,8 @@ class APITester {
|
||||
let postRequestEditor = monaco.editor.create(target.find(".post-request")[0], {
|
||||
value: model.postRequestScript,
|
||||
language: 'javascript',
|
||||
automaticLayout: true
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
});
|
||||
me.postRequestEditors.push(postRequestEditor);
|
||||
target.find(".post-request")[0].addEventListener('shown.bs.tab', () => {
|
||||
@@ -730,58 +768,25 @@ class APITester {
|
||||
}
|
||||
|
||||
|
||||
addQueryParam(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
model.queryParams.push({
|
||||
enabled: true,
|
||||
key: '',
|
||||
value: ''
|
||||
});
|
||||
|
||||
this.renderQueryParamsView(tabIndex);
|
||||
}
|
||||
|
||||
removeQueryParam(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
const index = $(event.currentTarget).closest('tr').data('index');
|
||||
let model = this.apiRequests[tabIndex];
|
||||
model.queryParams.splice(index, 1);
|
||||
this.renderQueryParamsView(tabIndex);
|
||||
}
|
||||
|
||||
renderQueryParamsView(tabIndex) {
|
||||
let model = this.apiRequests[tabIndex];
|
||||
|
||||
let target = $('#api_request_' + model.id);
|
||||
target.find('.query_params').empty();
|
||||
target.find('.query_params').append(this.renderParams(model.queryParams));
|
||||
}
|
||||
|
||||
parseParam(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
model.path = $(event.currentTarget).siblings('input[type="hidden"]').val();
|
||||
model.queryParams = [];
|
||||
let queryString = model.path.split('?')[1];
|
||||
parseParam(path) {
|
||||
let queryParams = [];
|
||||
let queryString = path.split('?')[1];
|
||||
if (queryString) {
|
||||
let queryParamArray = queryString.split('&');
|
||||
for (let i = 0; i < queryParamArray.length; i++) {
|
||||
let queryParam = queryParamArray[i].split('=');
|
||||
|
||||
model.queryParams.push({
|
||||
queryParams.push({
|
||||
enabled: true,
|
||||
key: queryParam[0],
|
||||
value: (queryParam[1] === undefined ? '' : queryParam[1])
|
||||
});
|
||||
}
|
||||
this.renderQueryParamsView(tabIndex);
|
||||
}
|
||||
return queryParams;
|
||||
}
|
||||
|
||||
buildPath(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
buildPath(model) {
|
||||
let queryString = model.path.split('?')[0];
|
||||
if (model.queryParams.length > 0) {
|
||||
queryString += '?';
|
||||
@@ -796,8 +801,6 @@ class APITester {
|
||||
}
|
||||
}
|
||||
model.path = queryString;
|
||||
console.log(model.path);
|
||||
$('#api_request_' + model.id).find('.editableInputContent').html(model.path);
|
||||
}
|
||||
|
||||
showLoadingOverlay() {
|
||||
|
||||
Reference in New Issue
Block a user