feat: show env params

2024-12-04 04:38:20 +08:00 · 2022-07-13 16:11:25 +08:00 · 2022-07-13 16:11:25 +08:00 · 5a211b4cf3
commit 5a211b4cf3
parent 744e0d38f1
8 changed files with 184 additions and 80 deletions
--- a/src/workbench/browser/src/app/pages/api/api.component.html
+++ b/src/workbench/browser/src/app/pages/api/api.component.html
@ -52,8 +52,18 @@
            </nz-select>
            <ng-template #renderTemplate>
              <nz-divider></nz-divider>
-              <a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n>Manage Environment</a>
+              <a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n
+                >Manage Environment</a
+              >
            </ng-template>
+            <span
+              class="flex items-center justify-center mx-1 icon"
+              i18n-title
+              title="Quick look"
+              (click)="handleShowEnv()"
+            >
+              <eo-iconpark-icon name="eyes"></eo-iconpark-icon>
+            </span>
          </div>
        </div>
        <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
--- a/src/workbench/browser/src/app/pages/api/api.component.scss
+++ b/src/workbench/browser/src/app/pages/api/api.component.scss
@ -93,3 +93,16 @@ nz-divider {
  color: #00785a;
 }

+.icon {
+  -webkit-app-region: no-drag;
+  width: 30px;
+  height: 30px;
+  font-size: 1.5em;
+  color: rgba(0,0,0,0.5);
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all .4s ease;
+  &:hover {
+    background-color: rgba(0,0,0,0.05);
+  }
+}
--- a/src/workbench/browser/src/app/pages/api/api.component.ts
+++ b/src/workbench/browser/src/app/pages/api/api.component.ts
@ -7,7 +7,10 @@ import { Message, MessageService } from '../../shared/services/message';
 import { ApiService } from './api.service';
 import { StorageService } from '../../shared/services/storage';
 import { Change } from '../../shared/store/env.state';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { ModalService } from '../../shared/services/modal.service';
 import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
+import { EnvListComponent } from 'eo/workbench/browser/src/app/shared/components/env-list/env-list.component';

@Component({
  selector: 'eo-api',
@ -47,6 +50,7 @@ export class ApiComponent implements OnInit, OnDestroy {
    private messageService: MessageService,
    private storage: StorageService,
    private remoteService: RemoteService,
+    private modalService: ModalService,
    private store: Store
  ) {}

@ -165,5 +169,13 @@ export class ApiComponent implements OnInit, OnDestroy {
    });
  }

+  handleShowEnv() {
+    const modal: NzModalRef = this.modalService.create({
+      nzTitle: 'Environment',
+      nzContent: EnvListComponent,
+      nzClosable: true,
+      nzFooter: null,
+    });
+  }
  handleEnvSelectStatus(event: boolean) {}
 }
--- a/src/workbench/browser/src/app/pages/navbar/navbar.component.html
+++ b/src/workbench/browser/src/app/pages/navbar/navbar.component.html
@ -6,20 +6,24 @@
    </a>
  </div>
  <div class="flex items-center">
-    <span class="icon mx-1 flex items-center justify-center" i18n-title title="Open Settings" (click)="handleShowModal()">
+    <span
+      class="flex items-center justify-center mx-1 icon"
+      i18n-title
+      title="Open Settings"
+      (click)="handleShowModal()"
+    >
      <eo-iconpark-icon name="setting-two"></eo-iconpark-icon>
    </span>
    <!-- <span
      i18n-title
-      class="icon mx-1 flex items-center justify-center"
+      class="flex items-center justify-center mx-1 icon"
      title="{{ dataSourceText }}数据源"
      (click)="switchDataSource()"
    >
      <eo-iconpark-icon [name]="isRemote ? 'link-cloud-sucess' : 'link-cloud-faild'"></eo-iconpark-icon>
    </span> -->
-    <span class="icon mx-1 flex items-center justify-center" nz-dropdown [nzDropdownMenu]="menu">
-      <eo-iconpark-icon name="help">
-      </eo-iconpark-icon>
+    <span class="flex items-center justify-center mx-1 icon" nz-dropdown [nzDropdownMenu]="menu">
+      <eo-iconpark-icon name="help"> </eo-iconpark-icon>
    </span>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
@ -29,15 +33,32 @@
      </ul>
    </nz-dropdown-menu>
    <div *ngIf="!OS_TYPE.includes('mac') && isElectron">
-      <span nz-tooltip i18n-nzTooltipTitle nzTooltipTitle="Minimize" nzTooltipPlacement="left" class="iconfont icon-jianhao mr10 fs24 cp"
-        (click)="minimize()">
+      <span
+        nz-tooltip
+        i18n-nzTooltipTitle
+        nzTooltipTitle="Minimize"
+        nzTooltipPlacement="left"
+        class="iconfont icon-jianhao mr10 fs24 cp"
+        (click)="minimize()"
+      >
      </span>
-      <span nz-tooltip i18n-nzTooltipTitle [nzTooltipTitle]="isMaximized ? 'Restore' : 'Maximize'" nzTooltipPlacement="left"
+      <span
+        nz-tooltip
+        i18n-nzTooltipTitle
+        [nzTooltipTitle]="isMaximized ? 'Restore' : 'Maximize'"
+        nzTooltipPlacement="left"
        class="iconfont icon-{{ isMaximized ? 'copy' : 'duoxuanweixuanzhong' }} mr10 fs24 cp"
-        (click)="toggleMaximize()">
+        (click)="toggleMaximize()"
+      >
      </span>
-      <span nz-tooltip i18n-nzTooltipTitle nzTooltipTitle="Close" nzTooltipPlacement="left" class="iconfont icon-guanbi pr15 fs24 cp"
-        (click)="close()">
+      <span
+        nz-tooltip
+        i18n-nzTooltipTitle
+        nzTooltipTitle="Close"
+        nzTooltipPlacement="left"
+        class="iconfont icon-guanbi pr15 fs24 cp"
+        (click)="close()"
+      >
      </span>
    </div>
    <div *ngIf="!isElectron">
--- a/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts
+++ b/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts
@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { it_IT } from 'ng-zorro-antd/i18n';
+import { StorageRes, StorageResStatus } from '../../../shared/services/storage/index.model';
+import { StorageService } from '../../services/storage';
+
+@Component({
+  selector: '',
+  template: ` <span class="text-gray-400">Environment variable</span>
+    <!-- <span class="my-2">{{ item.name }}</span> -->
+    <div *ngFor="let it of envParams" class="flex items-center justify-between h-8">
+      <span class="w-1/3 text-gray-500">{{ it.name }}</span>
+      <span class="w-2/3 text-gray-500">{{ it.description }}</span>
+    </div>`,
+  styleUrls: [],
+})
+export class EnvListComponent implements OnInit {
+  envParams: any = [];
+  constructor(private storage: StorageService) {}
+  async ngOnInit() {
+    const uuid = Number(localStorage.getItem('env:selected')) || null;
+    if (uuid == null) {
+      this.envParams = [];
+      return;
+    }
+    const envList = (await this.getAllEnv()) as [];
+    const [env]: any[] = envList.filter((it: any) => it.uuid === uuid);
+    console.log(env, envList);
+    this.envParams = env.parameters.filter((it: any) => it.name && it.value);
+  }
+  getAllEnv(uuid?: number) {
+    const projectID = 1;
+    return new Promise((resolve) => {
+      this.storage.run('environmentLoadAllByProjectID', [projectID], async (result: StorageRes) => {
+        if (result.status === StorageResStatus.success) {
+          return resolve(result.data || []);
+        }
+        return resolve([]);
+      });
+    });
+  }
+}
--- a/src/workbench/browser/src/app/shared/components/env/env.component.html
+++ b/src/workbench/browser/src/app/shared/components/env/env.component.html
@ -1,18 +1,25 @@
 <div class="flex flex-col">
  <div class="flex items-center justify-between h-10 px-2 header">
    <span class="font-bold" i18n>Environment</span>
-    <div class="flex items-center justify-center text-base btn shrink-0 h-7" (click)="handleAddEnv()" nz-tooltip
-      i18n-nzTooltipTitle="@@New Environment" nzTooltipTitle="New Environment">
-      <eo-iconpark-icon name="plus">
-      </eo-iconpark-icon>
+    <div
+      class="flex items-center justify-center text-base btn shrink-0 h-7"
+      (click)="handleAddEnv()"
+      nz-tooltip
+      i18n-nzTooltipTitle="@@New Environment"
+      nzTooltipTitle="New Environment"
+    >
+      <eo-iconpark-icon name="plus"> </eo-iconpark-icon>
    </div>
  </div>
  <div *ngFor="let item of envList" class="flex items-center justify-between p-2 env-item">
    <span class="flex-1 name" (click)="handleEditEnv(item.uuid)">{{ item.name }}</span>
-    <a nz-popconfirm i18n-nzPopconfirmTitle nzPopconfirmTitle="Are you sure you want to delete?"
-      (nzOnConfirm)="handleDeleteEnv($event, item.uuid)">
-      <eo-iconpark-icon name="delete">
-      </eo-iconpark-icon>
+    <a
+      nz-popconfirm
+      i18n-nzPopconfirmTitle
+      nzPopconfirmTitle="Are you sure you want to delete?"
+      (nzOnConfirm)="handleDeleteEnv($event, item.uuid)"
+    >
+      <eo-iconpark-icon name="delete"> </eo-iconpark-icon>
    </a>
  </div>
 </div>
@ -33,11 +40,13 @@
          </nz-form-control>
        </nz-form-item>
        <p class="mb-[8px]" i18n>Environment variable：can be referenced by using {{ varName }} in Document or Test</p>
-        <eo-table [(model)]="envInfo.parameters" [columns]="envListColumns"
-          [dataModel]="{ name: '', value: '', description: '' }">
+        <eo-table
+          [(model)]="envInfo.parameters"
+          [columns]="envListColumns"
+          [dataModel]="{ name: '', value: '', description: '' }"
+        >
          <ng-template cell="action" let-scope="scope" let-index="index">
-            <eo-iconpark-icon class="cursor-pointer" name="delete">
-            </eo-iconpark-icon>
+            <eo-iconpark-icon class="cursor-pointer" name="delete"> </eo-iconpark-icon>
          </ng-template>
        </eo-table>
      </form>
--- a/src/workbench/browser/src/app/shared/shared.module.ts
+++ b/src/workbench/browser/src/app/shared/shared.module.ts
@ -25,6 +25,7 @@ import { EoIconparkIconModule } from 'eo/workbench/browser/src/app/eoui/iconpark
 import { ApiScriptComponent } from './components/api-script/api-script.component';
 import { EouiModule } from 'eo/workbench/browser/src/app/eoui/eoui.module';
 import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
+import { EnvListComponent } from 'eo/workbench/browser/src/app/shared/components/env-list/env-list.component';

 const COMPONENTS = [
  ToolbarComponent,
@ -54,7 +55,7 @@ const COMPONENTS = [
    EouiModule,
    NzTreeViewModule,
  ],
-  declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent],
+  declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, EnvListComponent],
  providers: [ModalService],
  exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, EoIconparkIconModule],
 })
--- a/src/workbench/browser/src/index.html
+++ b/src/workbench/browser/src/index.html
@ -1,62 +1,59 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Eoapi</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_19.ba5ba4245a69248024047f0b7ba96bbb.js"></script>
+    <link rel="icon" type="image/x-icon" href="assets/icons/icon.ico" />
+  </head>
+  <!-- Angular Cli need for node modules -->
+  <script>
+    var global = global || window;
+    var Buffer = Buffer || [];
+    var process = process || {
+      env: { DEBUG: undefined },
+      version: [],
+    };
+  </script>

-<head>
-  <meta charset="utf-8" />
-  <title>Eoapi</title>
-  <base href="/" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script
-    src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_18.e98aaa4d03d4378a3a2c18bfd1670872.js"></script>
-  <link rel="icon" type="image/x-icon" href="assets/icons/icon.ico" />
-</head>
-<!-- Angular Cli need for node modules -->
-<script>
-  var global = global || window;
-  var Buffer = Buffer || [];
-  var process = process || {
-    env: { DEBUG: undefined },
-    version: [],
-  };
-</script>
-
-<body eo-drop-root>
-  <eo-root>
-    <div class="loading_container f_column">
-      <img src="assets/images/logo.svg" />
-      <div class="mt10 ant-spin ant-spin-spinning ant-spin-lg">
-        <span class="ant-spin-dot ant-spin-dot-spin ng-star-inserted">
-          <i class="ant-spin-dot-item"></i>
-          <i class="ant-spin-dot-item"></i>
-          <i class="ant-spin-dot-item"></i>
-          <i class="ant-spin-dot-item"></i>
-        </span>
+  <body eo-drop-root>
+    <eo-root>
+      <div class="loading_container f_column">
+        <img src="assets/images/logo.svg" />
+        <div class="mt10 ant-spin ant-spin-spinning ant-spin-lg">
+          <span class="ant-spin-dot ant-spin-dot-spin ng-star-inserted">
+            <i class="ant-spin-dot-item"></i>
+            <i class="ant-spin-dot-item"></i>
+            <i class="ant-spin-dot-item"></i>
+            <i class="ant-spin-dot-item"></i>
+          </span>
+        </div>
      </div>
-    </div>
-  </eo-root>
-  <div id="mask"></div>
-</body>
-<style>
-  #mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    z-index: 99999;
-    display: none;
-  }
+    </eo-root>
+    <div id="mask"></div>
+  </body>
+  <style>
+    #mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 99999;
+      display: none;
+    }

-  .loading_container {
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .loading_container img {
-    width: 200px;
-  }
-</style>
+    .loading_container {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translateX(-50%);
+    }

+    .loading_container img {
+      width: 200px;
+    }
+  </style>
 </html>