fix: data source save reload immediately

Postcatlab · Aug 2, 2022 · e02f371 · e02f371
1 parent 9e37e85
commit e02f371
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 33 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts
@@ -103,7 +103,6 @@ export class ApiComponent implements OnInit, OnDestroy {
         }
       }
     });
-    console.log('dyWidth', this.dyWidth);
   }
   ngOnDestroy() {
     this.destroy$.next();

diff --git a/src/workbench/browser/src/app/shared/components/setting/common/data-storage.component.ts b/src/workbench/browser/src/app/shared/components/setting/common/data-storage.component.ts
@@ -1,6 +1,8 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ElectronService } from 'eo/workbench/browser/src/app/core/services/electron/electron.service';
+import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
+import { uniqueSlash } from 'eo/workbench/browser/src/app/utils/api';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
@@ -66,10 +68,17 @@ import { NzMessageService } from 'ng-zorro-antd/message';
 export class DataStorageComponent implements OnInit, OnChanges {
   @Input() model: Record<string, any> = {};
   @Output() modelChange: EventEmitter<any> = new EventEmitter();
+
+  oldDataStorageType: 'local' | 'http';
   validateForm!: FormGroup;
   loading = false;
 
-  constructor(private fb: FormBuilder, private message: NzMessageService, private electronService: ElectronService) {}
+  constructor(
+    private fb: FormBuilder,
+    private message: NzMessageService,
+    private electronService: ElectronService,
+    private remoteService: RemoteService
+  ) {}
 
   ngOnInit(): void {
     this.validateForm = this.fb.group({
@@ -83,6 +92,7 @@ export class DataStorageComponent implements OnInit, OnChanges {
         [Validators.required],
       ],
     });
+    this.oldDataStorageType = this.validateForm.value['eoapi-common.dataStorage'];
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -115,7 +125,7 @@ export class DataStorageComponent implements OnInit, OnChanges {
     }
 
     try {
-      const url = `${remoteUrl}/system/status`.replace(/(?<!:)\/{2,}/g, '/');
+      const url = uniqueSlash(`${remoteUrl}/system/status`);
       const response = await fetch(url, {
         headers: {
           'x-api-key': token,
@@ -137,23 +147,30 @@ export class DataStorageComponent implements OnInit, OnChanges {
   }
 
   async submitForm() {
-    if (!this.electronService.isElectron && this.validateForm.value['eoapi-common.dataStorage'] === 'http') {
+    const dataStorage = this.validateForm.value['eoapi-common.dataStorage'];
+    const isRemote = dataStorage === 'http';
+    const isValid = this.validateForm.valid;
+
+    if (!this.electronService.isElectron && isRemote) {
       return this.message.error(
         $localize`Only the client can connect to the remote server. You need to download the client first.`
       );
     }
-    if (this.validateForm.valid) {
+
+    if (this.oldDataStorageType === dataStorage) {
+      return;
+    }
+
+    if (isValid && isRemote) {
       console.log('submit', this.validateForm.value);
       this.loading = true;
       const result = await this.pingRmoteServerUrl().finally(() => (this.loading = false));
       if (Object.is(result, true)) {
         this.message.success($localize`The remote data source connection is successful!`);
       }
-      this.model = {
-        ...this.model,
-        ...this.validateForm.value,
-      };
-      this.modelChange.emit(this.model);
+      this.updateDataSource();
+    } else if (isValid) {
+      this.updateDataSource();
     } else {
       Object.values(this.validateForm.controls).forEach((control) => {
         if (control.invalid) {
@@ -164,6 +181,15 @@ export class DataStorageComponent implements OnInit, OnChanges {
     }
   }
 
+  async updateDataSource() {
+    this.model = {
+      ...this.model,
+      ...this.validateForm.value,
+    };
+    this.modelChange.emit(this.model);
+    await this.remoteService.switchDataSource();
+  }
+
   setFormValue(model = {}) {
     Object.keys(model).forEach((key) => {
       this.validateForm.get(key)?.setValue(model[key]);

diff --git a/src/workbench/browser/src/app/shared/components/setting/setting.component.ts b/src/workbench/browser/src/app/shared/components/setting/setting.component.ts
@@ -143,6 +143,7 @@ export class SettingComponent implements OnInit {
       .subscribe((inArg: Message) => {
         switch (inArg.type) {
           case 'toggleSettingModalVisible': {
+            console.log('inArg.data.isShow', inArg.data.isShow);
             inArg.data.isShow ? this.handleShowModal() : this.handleCancel();
             break;
           }
@@ -268,27 +269,9 @@ export class SettingComponent implements OnInit {
   };
 
   async handleCancel() {
-    try {
-      const isUpdateRemoteInfo =
-        this.remoteServerUrl !== this.settings['eoapi-common.remoteServer.url'] ||
-        this.remoteServerToken !== this.settings['eoapi-common.remoteServer.token'] ||
-        this.oldDataStorage !== this.settings['eoapi-common.dataStorage'];
-
-      if (isUpdateRemoteInfo) {
-        this.message.success(
-          'You have modified the data source related information, the page will refresh in 2 seconds...'
-        );
-        setTimeout(() => {
-          this.remoteService.switchDataSource();
-          this.remoteService.refreshComponent();
-        }, 2000);
-      }
-    } catch (error) {
-    } finally {
-      this.handleSave();
+    this.handleSave();
 
-      this.isShowModal = false;
-      this.isShowModalChange.emit(false);
-    }
+    this.isShowModal = false;
+    this.isShowModalChange.emit(false);
   }
 }
diff --git a/src/workbench/browser/src/app/shared/services/storage/storage.service.ts b/src/workbench/browser/src/app/shared/services/storage/storage.service.ts
@@ -3,7 +3,7 @@ import { StorageResStatus } from './index.model';
 import { IndexedDBStorage } from './IndexedDB/lib';
 import { HttpStorage } from './http/lib';
 import { MessageService } from '../../../shared/services/message';
-import { SettingService } from 'eo/workbench/browser/src/app/core/services/settings/settings.service';
+import { getSettings, SettingService } from 'eo/workbench/browser/src/app/core/services/settings/settings.service';
 
 export type DataSourceType = 'local' | 'http';
 /** is show local data source tips */
@@ -16,7 +16,7 @@ export const IS_SHOW_REMOTE_SERVER_NOTIFICATION = 'IS_SHOW_REMOTE_SERVER_NOTIFIC
 @Injectable({ providedIn: 'root' })
 export class StorageService {
   private instance;
-  dataSourceType: DataSourceType = 'local';
+  dataSourceType: DataSourceType = getSettings()['eoapi-common.dataStorage'] || 'local';
   constructor(
     private injector: Injector,
     private messageService: MessageService,