fix: close #184 Rest not change with uri

src/workbench/browser/src/app/pages/api/http/edit/api-edit-util.service.ts

@@ -2,9 +2,8 @@ import { Injectable } from '@angular/core';
 import { ModalService } from '../../../../shared/services/modal.service';
 import { ApiParamsExtraSettingComponent } from './extra-setting/api-params-extra-setting.component';
 import { listToTreeHasLevel } from 'eo/workbench/browser/src/app/utils/tree/tree.utils';
-import { ApiData, ApiEditRest } from '../../../../shared/services/storage/index.model';
+import { ApiData } from '../../../../shared/services/storage/index.model';
 import { treeToListHasLevel } from '../../../../utils/tree/tree.utils';
-import { getRest } from '../../../../utils/api';
 import { eoDeepCopy } from 'eo/workbench/browser/src/app/utils/index.utils';
 @Injectable()
 export class ApiEditUtilService {
@@ -243,26 +242,7 @@ export class ApiEditUtilService {
     result.groupID = (result.groupID === 0 ? -1 : result.groupID || -1).toString();
     return result;
   }
-  /**
-   * Generate Rest Param From Url
-   */
-  generateRestFromUrl(url, rest): ApiEditRest[] {
-    const result = rest;
-    const rests = getRest(url);
-    rests.forEach((newRest) => {
-      if (result.find((val: ApiEditRest) => val.name === newRest)) {
-        return;
-      }
-      const restItem: ApiEditRest = {
-        name: newRest,
-        required: true,
-        example: '',
-        description: '',
-      };
-      result.splice(result.length - 1, 0, restItem);
-    });
-    return result;
-  }
+
   private formatApiData(formData, filterArrFun): ApiData {
     const result = eoDeepCopy(formData);
     result.groupID = Number(result.groupID === '-1' ? '0' : result.groupID);

src/workbench/browser/src/app/pages/api/http/edit/api-edit.component.ts

@@ -25,6 +25,7 @@ import { ApiEditService } from 'eo/workbench/browser/src/app/pages/api/http/edit
 import { ApiEditUtilService } from './api-edit-util.service';
 import { EoMessageService } from '../../../../eoui/message/eo-message.service';
 import { after } from 'lodash-es';
+import { generateRestFromUrl } from 'eo/workbench/browser/src/app/utils/api';
 @Component({
   selector: 'eo-api-edit-edit',
   templateUrl: './api-edit.component.html',
@@ -84,8 +85,9 @@ export class ApiEditComponent implements OnInit, OnDestroy {
         this.model = result;
       }
     }
-    //! Rest may generate from url
-    this.watchUri();
+    //* Rest need generate from url from initial model
+    this.resetRestFromUrl(this.model.uri);
+
     //Storage origin api data
     if (!this.initialModel) {
       if (!id) {
@@ -175,13 +177,8 @@ export class ApiEditComponent implements OnInit, OnDestroy {
     this.destroy$.next();
     this.destroy$.complete();
   }
-  private watchUri() {
-    this.validateForm
-      .get('uri')
-      ?.valueChanges.pipe(debounceTime(300), takeUntil(this.destroy$))
-      .subscribe((url) => {
-        this.apiEditUtil.generateRestFromUrl(url, this.model.restParams);
-      });
+  private resetRestFromUrl(url: string) {
+    this.model.restParams = generateRestFromUrl(url, this.model.restParams);
   }
   private getApiGroup() {
     this.groups = [];
@@ -250,5 +247,12 @@ export class ApiEditComponent implements OnInit, OnDestroy {
         this.modelChange.emit(this.model);
       }, 0);
     });
+    //watch uri
+    this.validateForm
+      .get('uri')
+      ?.valueChanges.pipe(debounceTime(300), takeUntil(this.destroy$))
+      .subscribe((url) => {
+        this.resetRestFromUrl(url);
+      });
   }
 }

src/workbench/browser/src/app/pages/api/http/test/api-test.component.html

@@ -34,7 +34,6 @@
                 nz-input
                 formControlName="uri"
                 [(ngModel)]="model.request.uri"
-                (change)="changeUri()"
               />
             </nz-form-control>
           </nz-form-item>

src/workbench/browser/src/app/pages/api/http/test/api-test.component.ts

@@ -13,7 +13,7 @@ import {
 import { MessageService } from '../../../../shared/services/message';
 
 import { interval, Subscription, Observable, Subject } from 'rxjs';
-import { takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 
 import { TestServerService } from '../../../../shared/services/api-test/test-server.service';
 import { ApiTestUtilService } from './api-test-util.service';
@@ -31,7 +31,7 @@ import {
 } from 'eo/workbench/browser/src/app/shared/components/api-script/constant';
 import { LanguageService } from 'eo/workbench/browser/src/app/core/services/language/language.service';
 import { ContentTypeByAbridge } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.model';
-import { transferUrlAndQuery } from 'eo/workbench/browser/src/app/utils/api';
+import { generateRestFromUrl, transferUrlAndQuery } from 'eo/workbench/browser/src/app/utils/api';
 import { getGlobals, setGlobals } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.utils';
 import { ApiTestResultResponseComponent } from 'eo/workbench/browser/src/app/pages/api/http/test/result-response/api-test-result-response.component';
 import { isEmpty } from 'lodash-es';
@@ -106,17 +106,6 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     public statusS: StatusService,
     private lang: LanguageService
   ) {
-    // TODO Select demo api when first open Eoapi
-    // if (!window.localStorage.getItem('local_TabCache')) {
-    //   const utm = new URLSearchParams(window.location.search);
-    //   this.router.navigate(['/home/api/http/test'], {
-    //     queryParams: { pageID: Date.now(), uuid: 1, ...Object.fromEntries(utm) },
-    //   });
-    //   setTimeout(() => {
-    //     const testBtn = document.getElementById('btn-test');
-    //     testBtn && testBtn.click();
-    //   }, 600);
-    // }
     this.initBasicForm();
     this.testServer.init((message) => {
       this.receiveMessage(message);
@@ -222,19 +211,24 @@ export class ApiTestComponent implements OnInit, OnDestroy {
       replaceType: 'replace',
     }).url;
   }
-  changeUri() {
-    this.model.request.queryParams = transferUrlAndQuery(this.model.request.uri, this.model.request.queryParams, {
-      base: 'url',
-      replaceType: 'replace',
-    }).query;
-  }
   watchBasicForm() {
     this.validateForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((x) => {
       // Settimeout for next loop, when triggle valueChanges, apiData actually isn't the newest data
       setTimeout(() => {
         this.modelChange.emit(this.model);
       }, 0);
     });
+    //watch uri
+    this.validateForm
+      .get('uri')
+      ?.valueChanges.pipe(debounceTime(300), takeUntil(this.destroy$))
+      .subscribe((url) => {
+        this.model.request.queryParams = transferUrlAndQuery(this.model.request.uri, this.model.request.queryParams, {
+          base: 'url',
+          replaceType: 'replace',
+        }).query;
+        this.model.request.restParams = generateRestFromUrl(this.model.request.uri, this.model.request.restParams);
+      });
   }
   bindGetApiParamNum(params) {
     return new ApiParamsNumPipe().transform(params);

src/workbench/browser/src/app/utils/api.ts

@@ -1,4 +1,5 @@
 import { ApiTestQuery } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.model';
+import { ApiEditRest } from 'eo/workbench/browser/src/app/shared/services/storage/index.model';
 
 /**
  * get rest param from url,format like {restName}
@@ -69,3 +70,24 @@ export const transferUrlAndQuery = (
     query: result,
   };
 };
+
+/**
+ * Generate Rest Param From Url
+ */
+export const generateRestFromUrl = (url, rest): ApiEditRest[] => {
+  const result = rest;
+  const rests = getRest(url);
+  rests.forEach((newRest) => {
+    if (result.find((val: ApiEditRest) => val.name === newRest)) {
+      return;
+    }
+    const restItem: ApiEditRest = {
+      name: newRest,
+      required: true,
+      example: '',
+      description: '',
+    };
+    result.splice(result.length - 1, 0, restItem);
+  });
+  return result;
+};

wiki/README.en.md

@@ -18,7 +18,7 @@ English | [简体中文](README.md)
 
 ![](https://docs.eoapi.io/images/eoapi-demo-en.png)
 
-> Eoapi（pronounced: E-O-API)
+> Eoapi (pronounced: E-O-API)
 
 # Try it!