Skip to content

Commit

Permalink
feat: form reset
Browse files Browse the repository at this point in the history
  • Loading branch information
@kungfuboy
kungfuboy committed Sep 13, 2022
1 parent 9b30aa5 commit c6261cc
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 40 deletions.
3 changes: 2 additions & 1 deletion src/workbench/browser/src/app/pages/api/api-tab.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
138 changes: 106 additions & 32 deletions src/workbench/browser/src/app/pages/api/websocket/websocket.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,127 @@
<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
>
<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">
<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>
Expand All @@ -84,40 +143,55 @@
<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
}" [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">
Expand Down
19 changes: 15 additions & 4 deletions src/workbench/browser/src/app/pages/api/websocket/websocket.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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';
Expand All @@ -265,6 +271,7 @@ export class WebsocketComponent implements OnInit, OnDestroy {
}
checkTabCanLeave = () => {
if (this.wsStatus === 'disconnect') {
this.resetForm();
return true;
}
return new Promise((resolve) => {
Expand All @@ -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);
Expand All @@ -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',
Expand All @@ -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)) {
Expand Down
15 changes: 12 additions & 3 deletions src/workbench/node/server/socketio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down Expand Up @@ -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;
}

Expand All @@ -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') {
Expand Down

0 comments on commit c6261cc

Please sign in to comment.