layout view 수정

ApiTestManager/src/components/LayoutGrid.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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) => {