fix: pre & after script history issues

This commit is contained in:
renqian805 2022-07-14 23:00:17 +08:00
parent 7e708bdcab
commit 080e0f9734
8 changed files with 70 additions and 95 deletions

View File

@ -13,14 +13,6 @@ import 'brace/mode/html';
import 'brace/mode/xml';
import 'brace/ext/searchbox';
import ace from 'brace';
import { completions } from 'eo/workbench/browser/src/app/shared/components/api-script/constant';
const langTools = ace.acequire('ace/ext/language_tools');
console.log('langTools', langTools);
langTools.addCompleter({
// this.aceEditorServiceService.getAutocomplete(this.autocompleteData),
getCompletions: (editor, session, pos, prefix, callback) => callback(null, completions),
});
type EventType = 'format' | 'copy' | 'search' | 'replace' | 'type' | 'download' | 'newTab';
@ -62,6 +54,7 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
@Input() editorType = 'json';
@Input() autoFormat = false;
@Input() disabled = false;
@Input() completions = [];
@Output() codeChange = new EventEmitter<string>();
@ViewChild(AceComponent, { static: false }) aceRef?: AceComponent;
@ViewChild(AceDirective, { static: false }) directiveRef?: AceDirective;
@ -125,6 +118,12 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
event: it,
...eventHash.get(it),
}));
const langTools = ace.acequire('ace/ext/language_tools');
langTools.setCompleters([]);
langTools.addCompleter({
// this.aceEditorServiceService.getAutocomplete(this.autocompleteData),
getCompletions: (editor, session, pos, prefix, callback) => callback(null, this.completions),
});
}
log(event, txt) {
console.log('ace event', event, txt);

View File

@ -77,20 +77,16 @@
<nz-tab [nzTitle]="preScriptTitleTmp" [nzForceRender]="true">
<ng-template #preScriptTitleTmp>
Pre-request Script
<span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
apiData.restParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-script [(code)]="beforeScript" class="eo_theme_iblock bbd"></eo-api-script>
<eo-api-script [(code)]="beforeScript" [treeData]="BEFORE_DATA" [completions]="beforeScriptCompletions"
class="eo_theme_iblock bbd"></eo-api-script>
</nz-tab>
<nz-tab [nzTitle]="suffixScriptTitleTmp" [nzForceRender]="true">
<ng-template #suffixScriptTitleTmp>
After-response Script
<span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
apiData.restParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-script [(code)]="afterScript" class="eo_theme_iblock bbd"></eo-api-script>
<eo-api-script [(code)]="afterScript" [treeData]="AFTER_DATA" [completions]="afterScriptCompletions"
class="eo_theme_iblock bbd"></eo-api-script>
</nz-tab>
</nz-tabset>
<!-- Response -->
@ -113,7 +109,7 @@
</nz-tabset>
</div>
</div>
<div class="invisible">
<div class="invisible" hidden>
<eo-api-test-history [apiID]="apiData.uuid" (clickItem)="restoreHistory($event)" #historyComponent>
</eo-api-test-history>
</div>

View File

@ -28,6 +28,12 @@ import { TestServerLocalNodeService } from '../../../shared/services/api-test/lo
import { TestServerServerlessService } from '../../../shared/services/api-test/serverless-node/test-connect.service';
import { TestServerRemoteService } from 'eo/workbench/browser/src/app/shared/services/api-test/remote-node/test-connect.service';
import { ApiTestRes } from 'eo/workbench/browser/src/app/shared/services/api-test/test-server.model';
import {
BEFORE_DATA,
AFTER_DATA,
beforeScriptCompletions,
afterScriptCompletions,
} from 'eo/workbench/browser/src/app/shared/components/api-script/constant';
@Component({
selector: 'eo-api-test',
@ -43,6 +49,10 @@ export class ApiTestComponent implements OnInit, OnDestroy {
parameters: [],
hostUri: '',
};
BEFORE_DATA = BEFORE_DATA;
AFTER_DATA = AFTER_DATA;
beforeScriptCompletions = beforeScriptCompletions;
afterScriptCompletions = afterScriptCompletions;
beforeScript = '';
afterScript = '';
status: 'start' | 'testing' | 'tested' = 'start';
@ -99,6 +109,8 @@ export class ApiTestComponent implements OnInit, OnDestroy {
console.log('restoreHistory', result);
//restore request
this.apiData = result.testData;
this.beforeScript = result.response?.beforeScript;
this.afterScript = result.response?.afterScript;
this.changeUri();
//restore response
this.tabIndexRes = 0;
@ -112,6 +124,21 @@ export class ApiTestComponent implements OnInit, OnDestroy {
}
});
}
loadTestHistory(id) {
if (!id) {
this.beforeScript = '';
this.afterScript = '';
return;
}
this.storage.run('apiTestHistoryLoadAllByApiDataID', [id], (result: StorageRes) => {
let history = {} as any;
if (result.status === StorageResStatus.success) {
history = result.data.reduce((prev, curr) => (prev.updatedAt > curr.updatedAt ? prev : curr), {});
}
this.beforeScript = history.beforeScript || '';
this.afterScript = history.afterScript || '';
});
}
saveTestDataToApi() {
const apiData = this.apiTest.getApiFromTestData({
history: this.testResult,
@ -136,7 +163,9 @@ export class ApiTestComponent implements OnInit, OnDestroy {
return new ApiParamsNumPipe().transform(params);
}
ngOnInit(): void {
this.initApi(Number(this.route.snapshot.queryParams.uuid));
const apiDataId = Number(this.route.snapshot.queryParams.uuid);
this.initApi(apiDataId);
this.loadTestHistory(apiDataId);
this.watchTabChange();
this.watchEnvChange();
this.messageService.get().subscribe(({ type, data }) => {
@ -293,6 +322,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
},
});
this.initApi(nextTab.key);
this.loadTestHistory(nextTab.key);
});
}
/**

View File

@ -31,7 +31,7 @@
router-outlet + * {
display: block;
height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height));
overflow: auto;
// overflow: auto;
}
}
}

View File

@ -3,8 +3,8 @@
<div class="flex justify-between p-3">
<div i18n>Snippets</div>
<div>
<a href="https://eoapi.io/docs/script-function" class="text-blue-400" target="_blank"
rel="noopener noreferrer" i18n>Learn more</a>
<a href="https://eoapi.io/docs/script-function" class="text-blue-400" target="_blank" rel="noopener noreferrer"
i18n>Learn more</a>
</div>
</div>
<nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzBlockNode]="true">
@ -13,13 +13,8 @@
<nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="false" (nzClick)="insertCode(node)">
<span class="text-sm text-blue-400"> {{ node.name }}</span>
<ng-container *ngIf="node.note">
<span
[nzTooltipTitle]="titleTemplate"
[nzTooltipPlacement]="['topLeft', 'leftTop']"
class="text-blue-400"
nzTooltipColor="black"
nz-tooltip
>
<span [nzTooltipTitle]="titleTemplate" [nzTooltipPlacement]="['topLeft', 'leftTop']" class="text-blue-400"
nzTooltipColor="black" nz-tooltip>
[?]
</span>
<ng-template #titleTemplate let-thing>
@ -53,12 +48,8 @@
</nz-tree-view>
</div>
<div class="flex-1">
<eo-editor
[(code)]="code"
editorType="javascript"
[eventList]="['format', 'copy', 'search', 'replace']"
(codeChange)="handleChange($event)"
>
<eo-editor [(code)]="code" editorType="javascript" [eventList]="['format', 'copy', 'search', 'replace']"
(codeChange)="handleChange($event)" [completions]="completions">
</eo-editor>
</div>
</div>

View File

@ -7,7 +7,7 @@ import { EoEditorComponent } from 'eo/workbench/browser/src/app/eoui/editor/eo-e
import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';
import type { TreeNode, FlatNode } from './constant';
import { BEFORE_DATA } from './constant';
@Component({
selector: 'eo-api-script',
templateUrl: './api-script.component.html',
@ -15,6 +15,8 @@ import { BEFORE_DATA } from './constant';
})
export class ApiScriptComponent implements OnInit {
@Input() code = '';
@Input() treeData = [];
@Input() completions = [];
@Output() codeChange: EventEmitter<any> = new EventEmitter();
@ViewChild(EoEditorComponent, { static: false }) eoEditor?: EoEditorComponent;
@ -42,13 +44,13 @@ export class ApiScriptComponent implements OnInit {
// @ts-ignore
dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener);
constructor() {
this.dataSource.setData(BEFORE_DATA);
constructor() {}
ngOnInit(): void {
this.dataSource.setData(this.treeData);
this.treeControl.expandAll();
}
ngOnInit(): void {}
hasChild = (_: number, node: FlatNode): boolean => node.expandable;
handleChange(code) {

View File

@ -573,7 +573,6 @@ const COMMON_DATA: TreeNode[] = [
];
export const BEFORE_DATA: TreeNode[] = [
...COMMON_DATA,
{
name: $localize`HTTP API request`,
children: [
@ -753,10 +752,10 @@ if (raw_api_demo_1_result.response !== "") {
},
],
},
...COMMON_DATA,
];
export const AFTER_DATA: TreeNode[] = [
...COMMON_DATA,
{
name: $localize`HTTP API request`,
children: [
@ -781,60 +780,18 @@ export const AFTER_DATA: TreeNode[] = [
},
],
},
{
name: $localize`Custom Global Variable`,
children: [
{
name: $localize`Set Global Variable`,
caption: 'eo.globals.set',
value: 'eo.globals.set("param_key","param_value")',
note: {
code: 'eo.globals.set("param_key","param_value")',
desc: $localize`Set Global Variable`,
input: [
{ key: 'param_key', value: $localize`parameter name` },
{ key: 'param_value', value: $localize`parameter value` },
],
},
},
{
name: $localize`Get global variable value`,
caption: 'eo.globals.get',
value: 'eo.globals.get("param_key")',
note: {
code: 'eo.globals.set("param_key","param_value")',
desc: $localize`Get global variable value`,
input: [
{ key: 'param_key', value: $localize`parameter name` },
{ key: 'param_value', value: $localize`parameter value` },
],
output: $localize`Global Variable Value`,
},
},
{
name: $localize`Delete Global Variable`,
caption: 'eo.globals.unset',
value: 'eo.globals.unset("param_key")',
note: {
code: 'eo.globals.unset("param_key")',
desc: $localize`Delete Global Variable`,
input: [{ key: 'param_key', value: $localize`parameter name` }],
},
},
{
name: $localize`Clear All Global Variables`,
caption: 'eo.globals.clear',
value: 'eo.globals.clear()',
note: {
code: 'eo.globals.clear()',
desc: $localize`Clear All Global Variables`,
},
},
],
},
...COMMON_DATA,
];
export const completions: Completion[] = AFTER_DATA.flatMap((n) => n.children).reduce((prev, curr) => {
export const beforeScriptCompletions: Completion[] = BEFORE_DATA.flatMap((n) => n.children).reduce((prev, curr) => {
const { caption, value } = curr;
if (caption) {
prev.push({ caption, value });
}
return prev;
}, []);
export const afterScriptCompletions: Completion[] = AFTER_DATA.flatMap((n) => n.children).reduce((prev, curr) => {
const { caption, value } = curr;
if (caption) {
prev.push({ caption, value });

View File

@ -485,7 +485,7 @@ export class IndexedDBStorage extends Dexie implements StorageInterface {
* @param apiDataID
*/
apiTestHistoryLoadAllByApiDataID(apiDataID: number | string): Observable<object> {
return this.loadAllByConditions(this.apiTestHistory, { apiDataID });
return this.loadAllByConditions(this.apiTestHistory, { apiDataID: Number(apiDataID) });
}
/**
@ -493,7 +493,7 @@ export class IndexedDBStorage extends Dexie implements StorageInterface {
* @param apiDataID
*/
apiMockLoadAllByApiDataID(apiDataID: number | string): Observable<object> {
return this.loadAllByConditions(this.mock, { apiDataID });
return this.loadAllByConditions(this.mock, { apiDataID: Number(apiDataID) });
}
/**