Skip to content

Commit

Permalink
fix: url required
Browse files Browse the repository at this point in the history
  • Loading branch information
@scarqin
scarqin committed Aug 3, 2022
1 parent be28dae commit 0418bf4
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 66 deletions.
4 changes: 2 additions & 2 deletions src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export class ApiEditService {
modelKey: 'name',
placeholder: $localize`Param Name`,
mark: 'name',
width: 200,
},
{
thKey: $localize`Type`,
Expand Down Expand Up @@ -183,8 +184,7 @@ export class ApiEditService {
type: 'input',
modelKey: 'example',
placeholder: $localize`Param Example`,
width: 200,
hide: 1,
width: 100,
mark: 'example',
},
{
Expand Down
10 changes: 4 additions & 6 deletions src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@
</div>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })" i18n><a>New API</a></li>
<li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"><a i18n>New API</a></li>
<li nz-menu-item (click)="addGroup()"><a i18n>New Group</a></li>
</ul>
</nz-dropdown-menu>
</header>
<!-- Fixed Group -->
<div class="px-2 group_container fixed_group_tree pt10">
<!-- <div class="group_container fixed_group_tree pt10" *ngIf="electron.isElectron"> -->
<div class="px-2 group_container fixed_group_tree pt10" *ngIf="electron.isElectron">
<nz-tree [nzData]="fixedTreeNode" [nzSelectedKeys]="nzSelectedKeys" nzBlockNode (nzClick)="clickTreeItem($event)"
[nzTreeTemplate]="nzFixedTreeTemplate"></nz-tree>
<ng-template #nzFixedTreeTemplate let-node let-origin="origin">
Expand All @@ -29,11 +28,10 @@
</div>
</ng-template>
</div>
<div class="mx-2 bbd"></div>
<!-- <div class="bbd" *ngIf="electron.isElectron"></div> -->
<div class="mx-2 bbd" *ngIf="electron.isElectron"></div>

<!-- Custom Group -->
<div class="px-2 group_container group_tree pt10">
<div class="group_container group_tree pt10">
<nz-tree [nzData]="treeNodes" [nzSelectedKeys]="nzSelectedKeys" #apiGroup [nzSearchValue]="searchValue"
[nzHideUnMatched]="true" [nzExpandedKeys]="expandKeys" (nzClick)="clickTreeItem($event)"
(nzExpandChange)="toggleExpand()" nzDraggable nzBlockNode (nzOnDrop)="treeItemDrop($event)"
Expand Down
155 changes: 103 additions & 52 deletions src/workbench/browser/src/app/pages/api/test/api-test.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,115 @@
<div class="test_wrap">
<eo-split-panel [topStyle]="{ height: initHeight }" (eoDrag)="handleEoDrag($event)">
<div class="top_container scroll_container" top>
<form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm">
<nz-form-item nz-col class="basic_info_container">
<nz-form-control>
<nz-input-group nzCompact>
<nz-select class="w_100" [(ngModel)]="apiData.protocol" formControlName="protocol">
<nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value">
</nz-option>
</nz-select>
<nz-select class="!w-[106px] flex-none" [(ngModel)]="apiData.method" formControlName="method">
<nz-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
</nz-select>
<div *ngIf="env.hostUri" nz-typography nzEllipsis class="env_front_uri" nzTooltipTitle="{{ env.hostUri }}"
nzTooltipPlacement="bottom" nz-tooltip>
{{ env.hostUri }}
</div>
<input type="text" i18n-placeholder placeholder="Enter URL" name="uri" nz-input formControlName="uri"
[(ngModel)]="apiData.uri" (change)="changeUri()" />
<button type="submit" nz-button nzType="primary" class="ml10 w_100" (click)="clickTest()">
<span *ngIf="status !== 'testing'" i18n><span>Send</span></span>
<span *ngIf="status === 'testing'" i18n>Abort</span>
<span *ngIf="status === 'testing' && waitSeconds" class="ml-1">{{ waitSeconds }}</span>
</button>
<button type="button" *ngIf="!apiData.uuid" nz-button nzType="default" (click)="saveTestDataToApi()"
class="ml10" i18n>
Save as API
</button>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm" class="basic_info_container">
<nz-input-group nzCompact>
<nz-select class="w_100" [(ngModel)]="apiData.protocol" formControlName="protocol">
<nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value"> </nz-option>
</nz-select>
<nz-select class="!w-[106px] flex-none" [(ngModel)]="apiData.method" formControlName="method">
<nz-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
</nz-select>
<div
*ngIf="env.hostUri"
nz-typography
nzEllipsis
class="env_front_uri"
nzTooltipTitle="{{ env.hostUri }}"
nzTooltipPlacement="bottom"
nz-tooltip
>
{{ env.hostUri }}
</div>
<nz-form-item nz-col class="fg1">
<nz-form-control i18n-nzErrorTip nzErrorTip="Please enter URL">
<input
type="text"
i18n-placeholder
placeholder="Enter URL"
name="uri"
nz-input
formControlName="uri"
[(ngModel)]="apiData.uri"
(change)="changeUri()"
/>
</nz-form-control>
</nz-form-item>
<button type="submit" nz-button nzType="primary" class="ml10 w_100" (click)="clickTest()">
<span *ngIf="status !== 'testing'" i18n><span>Send</span></span>
<span *ngIf="status === 'testing'" i18n>Abort</span>
<span *ngIf="status === 'testing' && waitSeconds" class="ml-1">{{ waitSeconds }}</span>
</button>
<button
type="button"
*ngIf="!apiData.uuid"
nz-button
nzType="default"
(click)="saveTestDataToApi()"
class="ml10"
i18n
>
Save as API
</button>
</nz-input-group>
</form>
<!-- Request Info -->
<nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [nzAnimated]="false"
[(nzSelectedIndex)]="nzSelectedIndex">
<nz-tabset
[nzTabBarStyle]="{ 'padding-left': '10px' }"
[nzAnimated]="false"
[(nzSelectedIndex)]="nzSelectedIndex"
>
<!-- Request Headers -->
<nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
<ng-template #headerTitleTmp>
<span i18n="@@RequestHeaders">Headers</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.requestHeaders)">{{
apiData.requestHeaders | apiParamsNum
}}</span>
}}</span>
</ng-template>
<eo-api-test-header class="eo_theme_iblock bbd" [(model)]="apiData.requestHeaders"></eo-api-test-header>
</nz-tab>
<!--Request Info -->
<nz-tab [nzTitle]="bodyTitleTmp" [nzForceRender]="true">
<ng-template #bodyTitleTmp>
<span i18n>Body</span>
<span class="eo-tab-theme-icon" *ngIf="
<span
class="eo-tab-theme-icon"
*ngIf="
['formData', 'json', 'xml'].includes(apiData.requestBodyType)
? bindGetApiParamNum(apiData.requestBody)
: apiData.requestBody?.length
"></span>
"
></span>
</ng-template>
<eo-api-test-body class="eo_theme_iblock bbd" [(contentType)]="contentType"
(contentTypeChange)="changeContentType($event)" [(bodyType)]="apiData.requestBodyType"
(bodyTypeChange)="changeBodyType($event)" [(model)]="apiData.requestBody"
[supportType]="['formData', 'raw', 'binary']"></eo-api-test-body>
<eo-api-test-body
class="eo_theme_iblock bbd"
[(contentType)]="contentType"
(contentTypeChange)="changeContentType($event)"
[(bodyType)]="apiData.requestBodyType"
(bodyTypeChange)="changeBodyType($event)"
[(model)]="apiData.requestBody"
[supportType]="['formData', 'raw', 'binary']"
></eo-api-test-body>
</nz-tab>
<nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
<ng-template #queryTitleTmp>
<span i18n>Query</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.queryParams)">{{
apiData.queryParams | apiParamsNum
}}</span>
}}</span>
</ng-template>
<eo-api-test-query class="eo_theme_iblock bbd" [model]="apiData.queryParams"
(modelChange)="changeQuery($event)"></eo-api-test-query>
<eo-api-test-query
class="eo_theme_iblock bbd"
[model]="apiData.queryParams"
(modelChange)="changeQuery($event)"
></eo-api-test-query>
</nz-tab>
<nz-tab [nzTitle]="restTitleTmp" [nzForceRender]="true">
<ng-template #restTitleTmp>
<span i18n>REST</span>
<span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
apiData.restParams | apiParamsNum
}}</span>
}}</span>
</ng-template>
<eo-api-test-rest class="eo_theme_iblock bbd" [model]="apiData.restParams"></eo-api-test-rest>
</nz-tab>
Expand All @@ -83,23 +118,38 @@
<span i18n>Pre-request Script</span>
<span class="eo-tab-theme-icon" *ngIf="beforeScript?.trim()"></span>
</ng-template>
<eo-api-script *ngIf="nzSelectedIndex === 4" [(code)]="beforeScript" [treeData]="BEFORE_DATA"
[completions]="beforeScriptCompletions" class="eo_theme_iblock bbd"></eo-api-script>
<eo-api-script
*ngIf="nzSelectedIndex === 4"
[(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>
<span i18n>After-response Script</span>
<span class="eo-tab-theme-icon" *ngIf="afterScript?.trim()"></span>
</ng-template>
<eo-api-script *ngIf="nzSelectedIndex === 5" [(code)]="afterScript" [treeData]="AFTER_DATA"
[completions]="afterScriptCompletions" class="eo_theme_iblock bbd"></eo-api-script>
<eo-api-script
*ngIf="nzSelectedIndex === 5"
[(code)]="afterScript"
[treeData]="AFTER_DATA"
[completions]="afterScriptCompletions"
class="eo_theme_iblock bbd"
></eo-api-script>
</nz-tab>
</nz-tabset>
</div>
<div class="bottom_container scroll_container" bottom>
<!-- Response -->
<nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [(nzSelectedIndex)]="tabIndexRes" [nzAnimated]="false"
class="mt-2.5 response_container" (nzSelectChange)="handleBottomTabSelect($event)">
<nz-tabset
[nzTabBarStyle]="{ 'padding-left': '10px' }"
[(nzSelectedIndex)]="tabIndexRes"
[nzAnimated]="false"
class="mt-2.5 response_container"
(nzSelectChange)="handleBottomTabSelect($event)"
>
<nz-tab i18n-nzTitle nzTitle="Response">
<eo-api-test-result-response [model]="testResult?.response"></eo-api-test-result-response>
</nz-tab>
Expand All @@ -109,13 +159,14 @@
</nz-tab>
</div>
<nz-tab i18n-nzTitle nzTitle="Body" [nzForceRender]="true">
<eo-api-test-result-request-body *ngIf="tabIndexRes === 2 || isRequestBodyLoaded"
[model]="testResult.request?.requestBody|| ''">
<eo-api-test-result-request-body
*ngIf="tabIndexRes === 2 || isRequestBodyLoaded"
[model]="testResult.request?.requestBody || ''"
>
</eo-api-test-result-request-body>
</nz-tab>
<nz-tab i18n-nzTitle nzTitle="Request Headers">
<eo-api-test-result-header [model]="testResult.request?.requestHeaders ">
</eo-api-test-result-header>
<eo-api-test-result-header [model]="testResult.request?.requestHeaders"> </eo-api-test-result-header>
</nz-tab>
</nz-tabset>
<div id="test-response"></div>
Expand Down
4 changes: 3 additions & 1 deletion src/workbench/browser/src/app/pages/api/test/api-test.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
.ant-input-group.ant-input-group-compact {
display: flex;
}

.ant-select {
height: 32px;
}
.basic_info_container {
padding: 10px;
background-color: var(--MAIN_BG);
Expand Down
20 changes: 17 additions & 3 deletions src/workbench/browser/src/app/pages/api/test/api-test.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,16 @@ export class ApiTestComponent implements OnInit, OnDestroy {
});
}
clickTest() {
//manual set dirty in case user submit directly without edit
for (const i in this.validateForm.controls) {
if (this.validateForm.controls.hasOwnProperty(i)) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
if (this.validateForm.status === 'INVALID') {
return;
}
if (this.status === 'testing') {
this.abort();
return;
Expand Down Expand Up @@ -326,7 +336,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
uuid: 0,
requestBodyType: 'raw',
requestBodyJsonType: 'object',
requestBody: [],
requestBody: '',
queryParams: [],
restParams: [],
requestHeaders: [
Expand All @@ -353,9 +363,13 @@ export class ApiTestComponent implements OnInit, OnDestroy {
private watchEnvChange() {
this.env$.pipe(takeUntil(this.destroy$)).subscribe((data) => {
const { env } = data;
if (env) {
this.env = env;
if (env?.uuid) {
this.validateForm.controls.uri.setValidators([]);
this.validateForm.controls.uri.updateValueAndValidity();
}else{
this.validateForm.controls.uri.setValidators([Validators.required]);
}
this.env = env;
});
}
private watchTabChange() {
Expand Down
2 changes: 1 addition & 1 deletion src/workbench/browser/src/assets/theme/antd.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@border-radius-base: 3px;
@primary-color: @theme-color;
@success-color: @theme-color;
@link-color:rgba (0, 0, 0, 0.8);
@link-color:rgba(0, 0, 0, 0.8);
@processing-color: @theme-color;
@tree-title-height: 30px;
body {
Expand Down
2 changes: 1 addition & 1 deletion src/workbench/browser/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": "../../../",
"paths": {
Expand Down

0 comments on commit 0418bf4

Please sign in to comment.