djb-eapim/elink-test-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout view 수정

Browse Source
This commit is contained in:
현성필
2024-05-07 21:59:47 +09:00
parent baaebfaa37
commit 2c1cfa1e90
5 changed files with 86 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ApiTestManager/src/components/LayoutGrid.js
+9 -9
View File
@@ -213,22 +213,22 @@ class LayoutGridView {
<span style="width: 80px; text-align: center;">${item.loutItemSerno}</span>
</td>
<td class="layout-grid-cell">
<input type="text" class="form-control" name="items[${index}].id" value="${item.id}">
<input type="text" class="form-control field" name="items[${index}].id" value="${item.id}">
</td>
<td class="layout-grid-cell">
<input type="text" class="form-control" name="items[${index}].parent" value="${item.parent}">
<input type="text" class="form-control field" name="items[${index}].parent" value="${item.parent}">
</td>
<td class="layout-grid-cell">
<input type="text" class="form-control" name="items[${index}].loutItemName" value="${item.loutItemName}">
<input type="text" class="form-control field" name="items[${index}].loutItemName" value="${item.loutItemName}">
</td>
<td class="layout-grid-cell">
<input type="text" class="form-control" name="items[${index}].loutItemDesc" value="${item.loutItemDesc}">
<input type="text" class="form-control field" name="items[${index}].loutItemDesc" value="${item.loutItemDesc}">
</td>
<td class="layout-grid-cell">
<input type="number" class="form-control" style="width: 60px;" name="items[${index}].loutItemDepth" min="1" value="${item.loutItemDepth}">
<input type="number" class="form-control field" style="width: 60px;" name="items[${index}].loutItemDepth" min="1" value="${item.loutItemDepth}">
</td>
<td class="layout-grid-cell">
<select name="items[${index}].loutItemType" class="form-select">
<select name="items[${index}].loutItemType" class="form-select field">
<option value="Field" ${item.loutItemType === 'Field' ? 'selected' : ''}>Field</option>
<option value="Grid" ${item.loutItemType === 'Grid' ? 'selected' : ''}>Grid</option>
<option value="Group" ${item.loutItemType === 'Group' ? 'selected' : ''}>Group</option>
@@ -236,12 +236,12 @@ class LayoutGridView {
</select>
</td>
<td class="layout-grid-cell">
<input type="text" class="form-control" style="width: 80px;" name="items[${index}].loutItemOccCnt" min="0" value="${item.loutItemOccCnt}">
<input type="text" class="form-control field" style="width: 80px;" name="items[${index}].loutItemOccCnt" min="0" value="${item.loutItemOccCnt}">
</td>
<td class="layout-grid-cell">
<input type="text" class="form-control" name="items[${index}].loutItemOccRef" value="${item.loutItemOccRef}"></td>
<input type="text" class="form-control field" name="items[${index}].loutItemOccRef" value="${item.loutItemOccRef}"></td>
<td class="layout-grid-cell">
<input type="number" class="form-control" style="width: 80px;" name="items[${index}].loutItemLength" min="1" value="${item.loutItemLength}">
<input type="number" class="form-control field" style="width: 80px;" name="items[${index}].loutItemLength" min="1" value="${item.loutItemLength}">
</td>
<td class="layout-grid-cell">
${ item.loutItemType ==='Field'? `<div class="editable" data-name="items[${index}].value" data-value="${item.value}"></div>`:''}
ApiTestManager/src/components/LayoutTreeDataGrid.js
+2
View File
@@ -200,6 +200,7 @@ class LayoutTreeGridController {
}
addRow(node, depth) {
const tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id); // Storing node ID for easy access later
if (depth === 0) {
@@ -220,6 +221,7 @@ class LayoutTreeGridController {
} else {
tr.appendTo(this.view.table);
}
return tr;
}
ApiTestManager/src/components/LayoutTreeGrid.js
+46 -14
View File
@@ -10,7 +10,7 @@ class LayoutTreeGridModel {
this.root = newRoot;
}
getNodePath(node, targetId, path = "") {
getNodePath(node, targetId, path = '') {
// Check if the current node is the target node
if (node.id === targetId) {
return path;
@@ -65,8 +65,6 @@ class LayoutTreeGridView {
});
}
toggleChildrenVisibility(nodeId, isExpanded) {
const selector = `.treegrid-parent-${nodeId}`;
$(selector).each((_, el) => {
@@ -97,6 +95,7 @@ class LayoutTreeGridController {
}
init() {
this.view.init();
this.view.addHeaders(this.options);
this.processNode(this.model.root, 0);
this.view.table.find('.editable').each((index, editableElement) => {
@@ -106,7 +105,7 @@ class LayoutTreeGridController {
path: editableElement.dataset.path
});
editableInput.init(editableElement, async(value) => {
editableInput.init(editableElement, async (value) => {
_.set(this.model.root, editableElement.dataset.path, value);
this.callback(this.model.root);
});
@@ -117,39 +116,72 @@ class LayoutTreeGridController {
return new Array(depth + 1).join('<span class="treegrid-indent"></span>');
}
// addRow(node, depth) {
// console.log('================================ addRow: ', node.id);
// const tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id); // Storing node ID for easy access later
//
// if (depth === 0) {
// tr.css({'display': 'none'});
// }
//
// if (node.parent || (node.parent !== null && parseInt(node.parent) !== this.model.rootId)) {
// // if (node.parent !== undefined && node.parent !== null) {
// const parentSelector = `.treegrid-${node.parent}`;
// const lastChildSelector = `.treegrid-parent-${node.parent}`;
// // console.log('lastChild:', $(this.view.table).find(lastChildSelector), 'length: ', $(this.view.table).find(lastChildSelector).length);
//
// if ($(this.view.table).find(lastChildSelector).length > 0) {
// const lastChild = $(this.view.table).find(lastChildSelector).last();
// tr.insertAfter(lastChild);
// console.log('addRow, node: ', node.id, ' parent: ', node.parent, 'tr: ', tr, 'insertAfterLastChild: ', lastChild);
// } else {
// console.log('addRow, node: ', node.id, ' parent: ', node.parent, 'tr: ', tr, 'insertAfterParent: ', parentSelector);
// tr.insertAfter($(this.view.table).find(parentSelector));
// // tr.appendTo(this.view.table);
// }
// tr.addClass('treegrid-parent-' + node.parent);
// } else {
// tr.appendTo(this.view.table);
// console.log('addRow, node: ', node.id, ' parent: ', node.parent, 'tr: ', tr, 'no parent');
// }
//
// console.log('================================ row Added');
// return tr;
// }
addRow(node, depth) {
const tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id); // Storing node ID for easy access later
console.log('================================ addRow: ', node.id);
const tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id);
if (depth === 0) {
tr.css({'display': 'none'});
}
if (node.parent || (node.parent !== null && parseInt(node.parent) !== this.model.rootId)) {
if (node.parent !== undefined && node.parent !== null && parseInt(node.parent) !== this.model.rootId) {
const parentSelector = `.treegrid-${node.parent}`;
const lastChildSelector = `.treegrid-parent-${node.parent}`;
if ($(this.view.table).find(lastChildSelector).length > 0) {
const lastChild = $(this.view.table).find(lastChildSelector).last();
console.log('lastChild: ', lastChild);
tr.insertAfter(lastChild);
console.log('addRow, node: ', node.id, ' parent: ', node.parent, 'tr: ', tr, 'insertAfterLastChild: ', lastChild);
} else {
console.log('parentSelector: ', parentSelector);
console.log('addRow, node: ', node.id, ' parent: ', node.parent, 'tr: ', tr, 'insertAfterParent: ', parentSelector);
tr.insertAfter($(this.view.table).find(parentSelector));
}
tr.addClass('treegrid-parent-' + node.parent);
} else {
console.log('no parent');
tr.appendTo(this.view.table);
console.log('addRow, node: ', node.id, ' parent: ', node.parent, 'tr: ', tr, 'no parent');
}
console.log('addRow, node: ', node.id, ' parent: ', node.parent);
console.log('addRow tr: ', tr);
console.log('================================ row Added');
return tr;
}
addCell(row, node, fieldInfo, depth) {
const td = $('<td>').appendTo(row);
const padding = fieldInfo.isFirst ? this.getIndent(depth) : '';
const nodePath = this.model.getNodePath(this.model.root, node.id) + ".value";
const nodePath = this.model.getNodePath(this.model.root, node.id) + '.value';
if (node.loutItemType === 'Field' && fieldInfo.type === 'textfield') {
const div = $('<div>');
@@ -175,7 +207,7 @@ class LayoutTreeGridController {
}
processNode(node, depth) {
console.log('node: ', node.id);
// console.log('node: ', node.id);
const tr = this.addRow(node, depth);
this.options.forEach((fieldInfo) => {
ApiTestManager/src/components/ServerManager.js
+27
View File
@@ -1,8 +1,10 @@
import EditableInput from './EditableInput';
import APIClient from '../APIClient';
class ServerManager {
constructor(servers) {
this.servers = servers || [];
this.apiClient = new APIClient();
}
basePath(serverId) {
@@ -117,6 +119,31 @@ class ServerManager {
<option value="">서버 선택</option>
${optionsHtml}</select>`;
}
async fillPadding(apiRequest, value, dataLength) {
let paddedValue = await this.apiClient.processPreScriptAndVariables(apiRequest, value);
while (paddedValue.length < dataLength) {
paddedValue = ' ' + paddedValue; // Prepend a space character to the string
}
return paddedValue;
}
async renderServerPrefix(serverOptions, apiRequest) {
let message = '';
for (let i = 0; i < serverOptions.length; i++) {
//header 에서 값을 가져와야 함.
let value = '';
let found = apiRequest.headers.filter(header => header.key === serverOptions[i].optionKey);
if (found.length > 0) {
value = found[0].value;
}
message += await this.fillPadding(apiRequest, value, serverOptions[i].length);
}
return message;
}
}
export default ServerManager;
ApiTestManager/src/components/TCPClientView.js
+2 -1
View File
@@ -54,7 +54,8 @@ class TCPClientView {
let layoutTreeDataGrid = new LayoutTreeDataGrid(this.apiRequestTabContent.find(`#api_request_${this.model.id}`).find('.request_layout_data_tree'), layoutDataRoot, this.model, layoutDataTreeOptions, this.apiRequestTabContent.find(`#api_request_${this.model.id}`).find('.total_message_length'));
layoutTreeDataGrid.init( async (finalMessage) => {
this.requestBodyEditor.setValue(finalMessage);
const prefix = await this.serverManager.renderServerPrefix(this.server.serverOptions, this.model);
this.requestBodyEditor.setValue(prefix + finalMessage);
});
let layoutTreeGrid = new LayoutTreeGrid(this.apiRequestTabContent.find(`#api_request_${this.model.id}`).find('.request_layout_tree'), layoutRoot, layoutDataTreeOptions, (root) => {