feat: form reset

2024-11-30 02:37:57 +08:00 · 2022-09-13 23:07:13 +08:00 · 2022-09-13 23:07:13 +08:00 · c6261cc039
commit c6261cc039
parent 9b30aa55f4
4 changed files with 135 additions and 40 deletions
--- a/src/workbench/browser/src/app/pages/api/api-tab.service.ts
+++ b/src/workbench/browser/src/app/pages/api/api-tab.service.ts
@ -166,7 +166,8 @@ export class ApiTabService {
      replaceTab.extends.method = model.method;
      if (currentTab.module === 'test') {
        if (currentTab.pathname === '/home/api/ws/test') {
-          replaceTab.extends.method = model.request.protocol.toUpperCase();
+          console.log('model', model);
+          replaceTab.extends.method = model.request.protocol?.toUpperCase();
        } else {
          replaceTab.extends.method = model.request.method;
        }
--- 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,27 +2,53 @@
  <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>
@ -30,31 +56,58 @@
  </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
+            >
+            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.request.requestHeaders)">{{
+              model.request.requestHeaders | apiParamsNum
+            }}</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
+            [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
+            >
+            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.request.queryParams)">{{
+              model.request.queryParams | apiParamsNum
+            }}</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"
-              [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">
@ -62,8 +115,14 @@
                <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>
@ -84,29 +143,37 @@
      <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>
@ -114,10 +181,17 @@
            </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
-            }" [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">
--- a/src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts
+++ b/src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts
@ -12,6 +12,8 @@ import { ElectronService } from 'eo/workbench/browser/src/app/core/services';
 import { Subject, takeUntil } from 'rxjs';
 import { ModalService } from '../../../shared/services/modal.service';
 import { isEmptyObj } from 'eo/workbench/browser/src/app/utils';
+import { ApiParamsNumPipe } from '../../../shared/pipes/api-param-num.pipe';
+
 import { ApiTestHeaders, ApiTestQuery } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.model';
 interface testViewModel {
  requestTabIndex: number;
@ -70,7 +72,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
        const historyData: unknown = await this.testService.getHistory(Number(id.replace('history_', '')));
        this.model = historyData as testViewModel;
      }
-      console.log(this.model);
+      // console.log(this.model);
    }
    this.watchBasicForm();
    this.eoOnInit.emit(this.model);
@ -182,6 +184,10 @@ export class WebsocketComponent implements OnInit, OnDestroy {
    this.listen();
  }

+  bindGetApiParamNum(params) {
+    return new ApiParamsNumPipe().transform(params);
+  }
+
  handleSendMsg() {
    // * 通过 SocketIO 通知后端
    // send a message to the server
@ -246,7 +252,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
        } else {
          this.model.response.responseBody.unshift({
            type: 'end',
-            msg: `Disconnect by ${this.getLink()}`,
+            msg: `Error by ${this.getLink()}`,
            isExpand: false,
          });
          this.wsStatus = 'disconnect';
@ -265,6 +271,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
  }
  checkTabCanLeave = () => {
    if (this.wsStatus === 'disconnect') {
+      this.resetForm();
      return true;
    }
    return new Promise((resolve) => {
@ -278,6 +285,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
            type: 'primary',
            onClick: () => {
              modal.destroy();
+              this.resetForm();
              // * disconnect ws connect
              this.handleConnect('disconnect');
              resolve(true);
@ -299,10 +307,10 @@ export class WebsocketComponent implements OnInit, OnDestroy {
    const link = /^(wss:\/{2})|(ws:\/{2})\S+$/m.test(uri.trim())
      ? uri.trim()
      : protocol + '://' + uri.trim().replace('//', '');
-    console.log('link', link);
+    // console.log('link', link);
    return link;
  }
-  private resetModel() {
+  private resetModel(): testViewModel {
    return {
      requestTabIndex: 2,
      protocol: 'websocket',
@ -320,6 +328,9 @@ export class WebsocketComponent implements OnInit, OnDestroy {
      },
    };
  }
+  resetForm() {
+    this.validateForm.reset();
+  }
  private checkForm(): boolean {
    for (const i in this.validateForm.controls) {
      if (this.validateForm.controls.hasOwnProperty(i)) {
--- a/src/workbench/node/server/socketio.js
+++ b/src/workbench/node/server/socketio.js
@ -11,6 +11,13 @@ const socket = (port = 4301) => {
    // send a message to the client
    socket.emit('ws-client', 'link success');
    let ws = null;
+
+    const unlisten = () => {
+      ws.on('close', null);
+      ws.on('upgrade', null);
+      ws.on('message', null);
+      ws = null;
+    };
    // receive a message from the client
    socket.on('ws-server', ({ type, content }) => {
      if (type === 'connect') {
@ -39,10 +46,11 @@ const socket = (port = 4301) => {
          });
          ws.on('error', (err) => {
            socket.emit('ws-client', { type: 'ws-connect-back', status: -1, content: err });
+            unlisten();
          });
        } catch (error) {
          socket.emit('ws-client', { type: 'ws-connect-back', status: -1, content: error });
-          ws = null;
+          unlisten();
          return;
        }

@ -67,10 +75,11 @@ const socket = (port = 4301) => {

        ws.on('close', () => {
          socket.emit('ws-client', {
-            type: 'ws-message-back',
-            status: 1,
+            type: 'ws-connect-back',
+            status: -1,
            content: 'Server disconnected',
          });
+          unlisten();
        });
      }
      if (type === 'ws-message') {