fix: should be auto format after response result change

Postcatlab · Sep 13, 2022 · a308c50 · a308c50
1 parent f0e3457
commit a308c50
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 225 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.html b/src/workbench/browser/src/app/pages/api/http/edit/body/api-edit-body.component.html
@@ -7,13 +7,8 @@
   <span class="flex-shrink mx-0.5 text-gray-200">｜</span>
   <!-- <nz-divider nzType="vertical"></nz-divider> -->
   <div *ngIf="['formData','json','xml'].includes(bodyType)" class="inline-flex items-center px-2 mt-1">
-    <params-import
-      [baseData]="model"
-      [contentType]="bodyType"
-      (baseDataChange)="handleParamsImport($event)"
-      (beforeHandleImport)="beforeHandleImport($event)"
-      [rootType]="jsonRootType"
-    ></params-import>
+    <params-import [baseData]="model" [contentType]="bodyType" (baseDataChange)="handleParamsImport($event)"
+      (beforeHandleImport)="beforeHandleImport($event)" [rootType]="jsonRootType"></params-import>
   </div>
 </div>
 <div *ngIf="bodyType === 'json'" class="px-4">
@@ -25,31 +20,14 @@
 <!-- FormData -->
 <!-- JSON -->
 <!-- XML -->
-<list-block-common-component
-  *ngIf="['formData', 'json', 'xml'].includes(bodyType)"
-  [mainObject]="listConf"
-  [(list)]="model"
-></list-block-common-component>
+<list-block-common-component *ngIf="['formData', 'json', 'xml'].includes(bodyType)" [mainObject]="listConf"
+  [(list)]="model"></list-block-common-component>
 <!-- Raw -->
-<!-- <eo-editor [(code)]="model" *ngIf="bodyType === 'raw'" (codeChange)="rawDataChange()" [config]="{ maxLines: 10 }"
+<!-- <eo-editor [(code)]="model" *ngIf="bodyType === 'raw'" (codeChange)="rawDataChange()"
   [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-editor> -->
-<eo-monaco-editor
-  *ngIf="bodyType === 'raw'"
-  [(code)]="model"
-  [maxLine]="20"
-  [eventList]="['type', 'format', 'copy', 'search', 'replace']"
-  (codeChange)="rawDataChange($event)"
->
+<eo-monaco-editor *ngIf="bodyType === 'raw'" [(code)]="model"
+  [eventList]="['type', 'format', 'copy', 'search', 'replace']" (codeChange)="rawDataChange($event)">
 </eo-monaco-editor>
 <!-- Binary -->
-<textarea
-  class="binary_textarea"
-  rows="4"
-  *ngIf="bodyType === 'binary'"
-  nzBorderless
-  i18n-placeholder
-  (ngModelChange)="rawDataChange($event)"
-  placeholder="Binary Description"
-  nz-input
-  [(ngModel)]="model"
-></textarea>
+<textarea class="binary_textarea" rows="4" *ngIf="bodyType === 'binary'" nzBorderless i18n-placeholder
+  (ngModelChange)="rawDataChange($event)" placeholder="Binary Description" nz-input [(ngModel)]="model"></textarea>
diff --git a/src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.html b/src/workbench/browser/src/app/pages/api/http/mock/api-mock.component.html
@@ -42,7 +42,7 @@
         <nz-form-item>
           <nz-form-label i18n nzFor="currentEditMock.response">Response</nz-form-label>
           <nz-form-control>
-            <eo-monaco-editor [(code)]="responseStr" (codeChange)="rawDataChange()" [maxLine]="20"
+            <eo-monaco-editor [(code)]="responseStr" (codeChange)="rawDataChange()" [maxLine]="15" class="h-[200px]"
               [disabled]="currentEditMock.createWay === 'system'"
               [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
           </nz-form-control>

diff --git a/src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.html b/src/workbench/browser/src/app/pages/api/http/test/body/api-test-body.component.html
@@ -9,13 +9,8 @@
     </params-import>
   </div>
   <!--Select content-type-->
-  <nz-select
-    *ngIf="['raw'].includes(bodyType)"
-    class="fs12 content-type-select"
-    (ngModelChange)="changeContentType($event)"
-    [(ngModel)]="contentType"
-    nzBorderless
-  >
+  <nz-select *ngIf="['raw'].includes(bodyType)" class="fs12 content-type-select"
+    (ngModelChange)="changeContentType($event)" [(ngModel)]="contentType" nzBorderless>
     <nz-option *ngFor="let item of CONST.CONTENT_TYPE" [nzValue]="item.value" [nzLabel]="item.name"></nz-option>
   </nz-select>
 </div>
@@ -25,23 +20,12 @@
 <!-- JSON -->
 <!-- XML -->
 <!-- Raw -->
-<eo-monaco-editor
-  [(code)]="model"
-  (codeChange)="rawDataChange($event)"
-  *ngIf="bodyType === 'raw'"
-  [maxLine]="100"
-  [config]="editorConfig"
-  [eventList]="['type', 'format', 'copy', 'search', 'replace']"
-></eo-monaco-editor>
+<eo-monaco-editor [(code)]="model" (codeChange)="rawDataChange($event)" *ngIf="bodyType === 'raw'"
+  [config]="editorConfig" [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
 <!-- Binary -->
 <div class="px-5" *ngIf="bodyType === 'binary'">
-  <nz-upload
-    nzType="drag"
-    (nzChange)="emitModelChange()"
-    [nzBeforeUpload]="uploadBinary"
-    [nzShowUploadList]="{ showDownloadIcon: false, showRemoveIcon: true }"
-    [(nzFileList)]="binaryFiles"
-  >
+  <nz-upload nzType="drag" (nzChange)="emitModelChange()" [nzBeforeUpload]="uploadBinary"
+    [nzShowUploadList]="{ showDownloadIcon: false, showRemoveIcon: true }" [(nzFileList)]="binaryFiles">
     <p class="ant-upload-text" i18n>Tap or drag files directly to this area</p>
   </nz-upload>
 </div>
diff --git a/...c/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.html b/...c/app/pages/api/http/test/result-request-body/api-test-result-request-body.component.html
@@ -12,5 +12,5 @@
   </ul>
   <!-- JSON / XML / Raw -->
   <eo-monaco-editor *ngIf="modelType === 'string'" class="mt20" [(code)]="model" [config]="{readOnly: true}"
-    [maxLine]="20" [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
+    [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
 </div>
diff --git a/...owser/src/app/pages/api/http/test/result-response/api-test-result-response.component.html b/...owser/src/app/pages/api/http/test/result-response/api-test-result-response.component.html
@@ -7,35 +7,24 @@
 </div>
 <div class="p15" *ngIf="model && (model | json) !== '{}'">
   <!-- Status Bar -->
-  <div
-    *ngIf="model?.statusCode"
-    class="mb15 basic_info_bar cw f_row f_js {{ model.statusCode ? codeStatus.class : 'code_red' }}"
-  >
+  <div *ngIf="model?.statusCode"
+    class="mb15 basic_info_bar cw f_row f_js {{ model.statusCode ? codeStatus.class : 'code_red' }}">
     <div class="fs16" id="statusCode">{{ model.statusCode || 'No Response' }}</div>
     <div class="f_row_ac fs12">
       <span class="mr15" id="size">Size: {{ model.responseLength | byteToString }}</span>
       <span id="time">Time: {{ model.testDeny }}ms</span>
     </div>
   </div>
   <!-- Test Alert Tip -->
-  <nz-alert
-    class="eo_alert_bar"
-    *ngFor="let item of model.reportList"
-    [nzType]="item.type === 'interrupt' ? 'error' : 'info'"
-    [nzMessage]="item.content.toString()"
-    nzShowIcon
-  ></nz-alert>
+  <nz-alert class="eo_alert_bar" *ngFor="let item of model.reportList"
+    [nzType]="item.type === 'interrupt' ? 'error' : 'info'" [nzMessage]="item.content.toString()" nzShowIcon></nz-alert>
   <!-- Response -->
   <div *ngIf="model.responseType" [ngSwitch]="model.responseType">
     <div class="text-center" *ngSwitchCase="'stream'">
       <div *ngIf="!responseIsImg">
         <span i18n>Unable to preview non-text type data, you can</span>
-        <button
-          class="eo_theme_btn_default mlr5"
-          type="button"
-          (click)="downloadResponseText()"
-          i18n="@@downloadResponse"
-        >
+        <button class="eo_theme_btn_default mlr5" type="button" (click)="downloadResponseText()"
+          i18n="@@downloadResponse">
           download response
         </button>
         <span i18n>and open it with other programs.</span>
@@ -51,26 +40,15 @@
     </div>
     <div class="text-center" *ngSwitchCase="'longText'">
       <span i18n>The response result exceeds the previewable size, you can</span>
-      <button
-        i18n="@@downloadResponse"
-        class="eo_theme_btn_default mlr5"
-        type="button"
-        (click)="downloadResponseText()"
-      >
+      <button i18n="@@downloadResponse" class="eo_theme_btn_default mlr5" type="button"
+        (click)="downloadResponseText()">
         download response
       </button>
       <!-- or
       <button class="eo_theme_btn_default" type="button" (click)="newTabResponseText()">在新标签页中显示返回结果</button>
       and open it with other programs. -->
     </div>
-    <eo-monaco-editor
-      *ngSwitchDefault
-      class="mt20"
-      [autoFormat]="true"
-      [(code)]="model.body"
-      [maxLine]="20"
-      [config]="{ readOnly: true }"
-      [eventList]="['type', 'format', 'copy', 'search']"
-    ></eo-monaco-editor>
+    <eo-monaco-editor *ngSwitchDefault class="mt20" [autoFormat]="true" [(code)]="model.body"
+      [config]="{ readOnly: true }" [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
   </div>
 </div>
diff --git a/src/workbench/browser/src/app/pages/api/websocket/websocket.component.html b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.html
@@ -2,121 +2,68 @@
   <header class="p-[10px]">
     <form nz-form [formGroup]="validateForm" class="flex">
       <div>
-        <nz-select
-          class="!w-[106px]"
-          [disabled]="['connecting', 'connected'].includes(wsStatus)"
-          [(ngModel)]="model.request.protocol"
-          formControlName="protocol"
-        >
+        <nz-select class="!w-[106px]" [disabled]="['connecting', 'connected'].includes(wsStatus)"
+          [(ngModel)]="model.request.protocol" formControlName="protocol">
           <nz-option *ngFor="let item of WS_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
         </nz-select>
       </div>
       <nz-form-item nz-col class="flex-1">
         <nz-form-control [nzValidateStatus]="validateForm.controls.uri" i18n-nzErrorTip nzErrorTip="Please enter URL">
-          <input
-            type="text"
-            i18n-placeholder
-            placeholder="Enter URL"
-            formControlName="uri"
-            (change)="changeUri()"
-            [(ngModel)]="model.request.uri"
-            class="left-1"
-            name="uri"
-            nz-input
-          />
+          <input type="text" i18n-placeholder placeholder="Enter URL" formControlName="uri" (change)="changeUri()"
+            [(ngModel)]="model.request.uri" class="left-1" name="uri" nz-input />
         </nz-form-control>
       </nz-form-item>
       <div class="flex px-1">
-        <button
-          class="mx-1 w-28"
-          *ngIf="wsStatus === 'disconnect'"
-          nz-button
-          nzType="primary"
-          i18n
-          (click)="handleConnect('connecting')"
-        >
+        <button class="mx-1 w-28" *ngIf="wsStatus === 'disconnect'" nz-button nzType="primary" i18n
+          (click)="handleConnect('connecting')">
           Connect
         </button>
         <button i18n class="mx-1 w-28" *ngIf="wsStatus === 'connecting'" disabled nz-button nzType="default">
           Connecting
         </button>
-        <button
-          class="mx-1 w-28"
-          *ngIf="wsStatus === 'connected'"
-          nz-button
-          nzDanger
-          i18n
-          nzType="default"
-          (click)="handleConnect('disconnect')"
-        >
+        <button class="mx-1 w-28" *ngIf="wsStatus === 'connected'" nz-button nzDanger i18n nzType="default"
+          (click)="handleConnect('disconnect')">
           Disconnect
         </button>
       </div>
     </form>
   </header>
   <eo-split-panel [topStyle]="{ height: '300px' }" style="height: calc(100% - 56px)">
     <div top class="h-full">
-      <nz-tabset
-        [nzTabBarStyle]="{ 'padding-left': '10px' }"
-        [nzAnimated]="false"
-        [(nzSelectedIndex)]="model.requestTabIndex"
-        class="h-full"
-      >
+      <nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [nzAnimated]="false"
+        [(nzSelectedIndex)]="model.requestTabIndex" class="h-full">
         <!-- Request Headers -->
         <nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
           <ng-template #headerTitleTmp>
-            <span
-              i18n="@@RequestHeaders"
-              nz-tooltip
-              [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''"
-              >Headers</span
-            >
+            <span i18n="@@RequestHeaders" nz-tooltip
+              [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''">Headers</span>
           </ng-template>
-          <eo-api-test-header
-            [disabled]="['connecting', 'connected'].includes(wsStatus)"
-            class="eo_theme_iblock bbd"
-            [(model)]="model.request.requestHeaders"
-            (modelChange)="emitChangeFun('requestHeaders')"
-          ></eo-api-test-header>
+          <eo-api-test-header [disabled]="['connecting', 'connected'].includes(wsStatus)" class="eo_theme_iblock bbd"
+            [(model)]="model.request.requestHeaders" (modelChange)="emitChangeFun('requestHeaders')">
+          </eo-api-test-header>
         </nz-tab>
         <nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
           <ng-template #queryTitleTmp>
-            <span i18n nz-tooltip [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''"
-              >Query Params</span
-            >
+            <span i18n nz-tooltip
+              [nzTooltipTitle]="wsStatus !== 'disconnect' ? 'Editable only before connection' : ''">Query Params</span>
           </ng-template>
-          <eo-api-test-query
-            class="eo_theme_iblock bbd"
-            [disabled]="['connecting', 'connected'].includes(wsStatus)"
-            [model]="model.request.queryParams"
-            (modelChange)="emitChangeFun('queryParams')"
-          ></eo-api-test-query>
+          <eo-api-test-query class="eo_theme_iblock bbd" [disabled]="['connecting', 'connected'].includes(wsStatus)"
+            [model]="model.request.queryParams" (modelChange)="emitChangeFun('queryParams')"></eo-api-test-query>
         </nz-tab>
         <nz-tab [nzTitle]="messageTmp">
           <ng-template #messageTmp i18n>Message</ng-template>
           <div style="height: calc(100% - 48px)">
-            <eo-monaco-editor
-              [(code)]="model.msg"
-              [config]="editorConfig"
-              [maxLine]="20"
-              [eventList]="['type', 'format', 'copy', 'search', 'replace']"
-              (codeChange)="rawDataChange($event)"
-            >
+            <eo-monaco-editor [(code)]="model.msg" [config]="editorConfig"
+              [eventList]="['type', 'format', 'copy', 'search', 'replace']" (codeChange)="rawDataChange($event)">
             </eo-monaco-editor>
             <div class="flex justify-between p-2">
               <nz-select [(ngModel)]="editorConfig.language">
                 <nz-option nzValue="text" nzLabel="text"></nz-option>
                 <nz-option nzValue="xml" nzLabel="xml"></nz-option>
                 <nz-option nzValue="json" nzLabel="json"></nz-option>
               </nz-select>
-              <button
-                nz-button
-                class="mx-1"
-                nzType="primary"
-                i18n
-                [disabled]="wsStatus !== 'connected' || !model.msg"
-                (click)="handleSendMsg()"
-              >
+              <button nz-button class="mx-1" nzType="primary" i18n [disabled]="wsStatus !== 'connected' || !model.msg"
+                (click)="handleSendMsg()">
                 Send
               </button>
             </div>
@@ -137,56 +84,40 @@
       <ul class="p-2 overflow-auto" style="height: calc(100% - 48px)">
         <li *ngFor="let item of model.response.responseBody; let index = index" class="block w-full">
           <div (click)="expandMessage(index)" class="flex flex-col w-full text-gray-500 top-line">
-            <div
-              *ngIf="item.type === 'send'"
-              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer"
-            >
+            <div *ngIf="item.type === 'send'"
+              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer">
               <span class="flex justify-center w-4 h-4 rounded shrink-0 items-cente send_icon">
                 <eo-iconpark-icon name="arrow-up" size="10"></eo-iconpark-icon>
               </span>
               <div class="px-2">{{ item.msg }}</div>
             </div>
-            <div
-              *ngIf="item.type === 'get'"
-              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer"
-            >
+            <div *ngIf="item.type === 'get'"
+              class="inline-flex items-center px-2 py-3 truncate hover:bg-gray-100 hover:cursor-pointer">
               <span class="flex justify-center w-4 h-4 rounded shrink-0 items-cente get_icon">
                 <eo-iconpark-icon name="arrow-down" size="10"></eo-iconpark-icon>
               </span>
               <div class="px-2">{{ item.msg }}</div>
             </div>
-            <div
-              *ngIf="item.type === 'start'"
-              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer"
-            >
+            <div *ngIf="item.type === 'start'"
+              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer">
               <span class="box-border flex justify-center w-4 h-4 rounded-full items-cente start_icon">
                 <eo-iconpark-icon name="check-small" size="10"></eo-iconpark-icon>
               </span>
               <div class="px-2">{{ item.title }}</div>
             </div>
-            <div
-              *ngIf="item.type === 'end'"
-              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer"
-            >
+            <div *ngIf="item.type === 'end'"
+              class="inline-flex items-center px-2 py-3 hover:bg-gray-100 hover:cursor-pointer">
               <span class="box-border flex justify-center w-4 h-4 rounded-full items-cente end_icon">
                 <eo-iconpark-icon name="close-small" size="10"></eo-iconpark-icon>
               </span>
               <div class="px-2">{{ item.title || item.msg }}</div>
             </div>
           </div>
 
-          <eo-monaco-editor
-            *ngIf="item.isExpand && item.type !== 'start'"
-            [code]="item.msg"
-            [disabled]="true"
-            [config]="{
+          <eo-monaco-editor *ngIf="item.isExpand && item.type !== 'start'" [code]="item.msg" [disabled]="true" [config]="{
               language: 'json',
               readOnly: true
-            }"
-            [maxLine]="20"
-            [eventList]="['type', 'format', 'copy', 'search']"
-            (codeChange)="rawDataChange($event)"
-          >
+            }" [eventList]="['type', 'format', 'copy', 'search']" (codeChange)="rawDataChange($event)">
           </eo-monaco-editor>
           <ng-container *ngIf="item.isExpand && item.type === 'start'">
             <div *ngFor="let k of Object.keys(item.msg); let index = index" class="headers">