fix: should be auto format after response result change

This commit is contained in:
buqiyuan 2022-09-13 11:20:59 +08:00
parent f0e3457ad1
commit a308c5015e
9 changed files with 100 additions and 225 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -7,10 +7,8 @@
</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>
@ -18,24 +16,15 @@
</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>

View File

@ -2,53 +2,27 @@
<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>
@ -56,52 +30,31 @@
</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">
@ -109,14 +62,8 @@
<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,37 +84,29 @@
<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>
@ -175,18 +114,10 @@
</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">

View File

@ -5,6 +5,8 @@ import { Message, MessageService } from 'eo/workbench/browser/src/app/shared/ser
import { debounceTime, distinctUntilChanged, takeUntil, Subject } from 'rxjs';
import { ExtensionGroupType } from '../extension.model';
import { ExtensionService } from '../extension.service';
import { NzModalService } from 'ng-zorro-antd/modal';
class ExtensionList {
list = [];
constructor(list) {
@ -34,17 +36,21 @@ export class ExtensionListComponent implements OnInit {
public electron: ElectronService,
private route: ActivatedRoute,
private router: Router,
private messageService: MessageService
private messageService: MessageService,
private modal: NzModalService
) {
this.type = this.route.snapshot.queryParams.type;
this.seachChanged$.pipe(debounceTime(300), distinctUntilChanged()).subscribe(async (keyword) => {
this.renderList = await this.searchPlugin(keyword);
this.getPluginList(keyword);
});
}
async ngOnInit() {
this.watchSearchConditionChange();
this.watchSearchKeywordChange();
}
async getPluginList(keyword: string) {
this.renderList = await this.searchPlugin(keyword);
}
async searchPlugin(keyword = '') {
const timer = setTimeout(() => (this.loading = true), 80);
const timeStart = Date.now();
@ -62,6 +68,11 @@ export class ExtensionListComponent implements OnInit {
}
return new ExtensionList(res.data).search(keyword);
} catch (error) {
this.modal.confirm({
nzTitle: '插件列表加载失败',
nzOkText: '重试',
nzOnOk: () => this.getPluginList(keyword),
});
} finally {
clearTimeout(timer);
const timeout = Date.now() - timeStart > 300 ? 0 : 300;

View File

@ -48,7 +48,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
this.setCode(val);
}
/** Scroll bars appear over 20 lines */
@Input() maxLine = 200;
@Input() maxLine: number;
@Input() config: JoinedEditorOptions = {};
@Input() editorType = 'json';
@Input() autoFormat = false;
@ -180,7 +180,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
code = String(val);
}
if (code && this.isFirstFormat && this.autoFormat) {
if (code && (this.config?.readOnly || (this.isFirstFormat && this.autoFormat))) {
requestAnimationFrame(async () => {
this.$$code = await this.formatCode();
this.isFirstFormat = false;
@ -216,10 +216,10 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
});
}
// this.codeEdtor.onDidChangeModelDecorations(() => {
// updateEditorHeight(); // typing
// requestAnimationFrame(updateEditorHeight); // folding
// });
this.codeEdtor.onDidChangeModelDecorations(() => {
updateEditorHeight(); // typing
requestAnimationFrame(updateEditorHeight); // folding
});
this.codeEdtor.onDidChangeModelContent((e) => {
this.handleChange();
@ -229,25 +229,27 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
this.handleBlur();
});
// let prevHeight = 0;
let prevHeight = 0;
// const updateEditorHeight = () => {
// const editorElement = this.codeEdtor.getDomNode();
const updateEditorHeight = () => {
if (this.maxLine) {
const editorElement = this.codeEdtor.getDomNode();
// if (!editorElement) {
// return;
// }
if (!editorElement) {
return;
}
// const lineHeight = this.codeEdtor.getOption(editor.EditorOption.lineHeight);
// const lineCount = this.codeEdtor.getModel()?.getLineCount() || 1;
// const height = this.codeEdtor.getTopForLineNumber(Math.min(lineCount, this.maxLine)) + lineHeight;
const lineHeight = this.codeEdtor.getOption(editor.EditorOption.lineHeight);
const lineCount = this.codeEdtor.getModel()?.getLineCount() || 1;
const height = this.codeEdtor.getTopForLineNumber(Math.min(lineCount, this.maxLine)) + lineHeight;
// if (prevHeight !== height) {
// prevHeight = height;
// editorElement.style.height = `${height}px`;
// this.codeEdtor.layout();
// }
// };
if (prevHeight !== height) {
prevHeight = height;
editorElement.style.height = `${height}px`;
this.codeEdtor.layout();
}
}
};
}
log(event, txt) {
console.log('ace event', event, txt);

View File

@ -13,21 +13,12 @@
</ul>
</nz-dropdown-menu> -->
<nz-modal
[(nzVisible)]="isVisible"
i18n-[nzTitle]
[nzTitle]="'Import ' + (modalTitle || contentTypeTitle)"
[nzStyle]="{ width: '800px' }"
(nzOnCancel)="handleCancel()"
>
<nz-modal [(nzVisible)]="isVisible" i18n-[nzTitle] [nzTitle]="'Import ' + (modalTitle || contentTypeTitle)"
[nzStyle]="{ width: '800px' }" (nzOnCancel)="handleCancel()">
<div *nzModalContent>
<pre class="eg" i18n>Import like this:<br />{{ eg }}</pre>
<eo-monaco-editor
[(code)]="paramCode"
[editorType]="contenTypeEditor"
[maxLine]="16"
[eventList]="['type', 'format', 'copy', 'search', 'replace']"
></eo-monaco-editor>
<eo-monaco-editor [(code)]="paramCode" [editorType]="contenTypeEditor"
[eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
</div>
<div *nzModalFooter style="text-align: left">
<button nz-button nzType="default" (click)="handleImport('mixin')" i18n>Replace Changed</button>