fix: sync-api not reactive

src/workbench/browser/src/app/modules/extension-select/sync-api/sync-api.component.ts

@@ -8,6 +8,7 @@ import { ApiService } from 'eo/workbench/browser/src/app/shared/services/storage
 import { TraceService } from 'eo/workbench/browser/src/app/shared/services/trace.service';
 import { EffectService } from 'eo/workbench/browser/src/app/shared/store/effect.service';
 import { StoreService } from 'eo/workbench/browser/src/app/shared/store/state.service';
+import { debounce } from 'lodash-es';
 import { Subject, takeUntil } from 'rxjs';
 
 import { eoDeepCopy } from '../../../utils/index.utils';
@@ -17,7 +18,7 @@ import { SYNC_API_SCHEMA } from './schema';
   selector: 'eo-sync-api',
   template: `
     <extension-feedback [extensionLength]="supportList.length" suggest="@feature:pullAPI">
-      <eo-schema-form #schemaForm [model]="model" [configuration]="schemaJson" />
+      <eo-schema-form #schemaForm [model]="model" [configuration]="schemaJson" (valueChanges)="handleValueChanges($event)" />
     </extension-feedback>
   `
 })
@@ -69,10 +70,24 @@ export class SyncApiComponent implements OnInit, OnChanges {
     }
   }
 
+  handleValueChanges(val) {
+    if (val.__formater !== this.currentFormater?.pluginId) {
+      this.model.__formater = val.__formater;
+      this.updateExtensionModel();
+    }
+  }
+
   updateExtensionModel() {
-    this.currentFormater = this.store.getSyncSettingList.find(n => n.pluginId === this.model.__formater);
-    if (this.currentFormater) {
-      Object.assign(this.model, JSON.parse(this.currentFormater.pluginSettingJson), { __crontab: this.currentFormater.crontab });
+    const currentFormater = this.store.getSyncSettingList.find(n => n.pluginId === this.model.__formater);
+    // console.log('currentFormater', { ...currentFormater });
+    if (currentFormater && this.currentFormater !== currentFormater) {
+      this.currentFormater = currentFormater;
+      this.model = {
+        ...this.model,
+        ...JSON.parse(this.currentFormater.pluginSettingJson),
+        __formater: this.currentFormater.pluginId,
+        __crontab: this.currentFormater.crontab
+      };
     }
   }
 
@@ -81,7 +96,7 @@ export class SyncApiComponent implements OnInit, OnChanges {
     this.updateExtensionModel();
   }
 
-  initData = () => {
+  initData = debounce(() => {
     this.featureMap = this.extensionService.getValidExtensionsByFature('pullAPI');
     this.supportList = [];
     this.featureMap?.forEach((data: FeatureInfo, key: string) => {
@@ -94,6 +109,7 @@ export class SyncApiComponent implements OnInit, OnChanges {
     if (!this.supportList.length) {
       return;
     }
+    this.schemaJson = { ...SYNC_API_SCHEMA };
 
     const { key } = this.supportList?.at(0);
     this.currentExtension = key || '';
@@ -131,7 +147,7 @@ export class SyncApiComponent implements OnInit, OnChanges {
         }
       });
     }
-  };
+  });
 
   async syncNow(): Promise<boolean | string> {
     if (!this.validateForm?.valid) {

src/workbench/browser/src/app/shared/components/schema-form/schema-form.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup, UntypedFormControl, Validators } from '@angular/forms';
+import { debounce } from 'lodash-es';
 
 const compMap = {
   string: 'input',
@@ -10,7 +11,7 @@ const compMap = {
 @Component({
   selector: 'eo-schema-form',
   template: `
-    <form nz-form [formGroup]="validateForm" [nzNoColon]="true" class="form">
+    <form *ngIf="isInit && validateForm" nz-form [formGroup]="validateForm" [nzNoColon]="true" class="form">
       <nz-form-item nz-col class="flex-1" *ngFor="let field of objectKeys(properties)">
         <ng-container *ngIf="properties[field]?.label">
           <nz-form-label
@@ -73,9 +74,9 @@ const compMap = {
               [nzDisabled]="properties[field]?.disabled"
               formControlName="{{ field }}"
             >
-              <label *ngFor="let item of properties[field]?.oneOf" eo-ng-radio [nzValue]="item.default || item.const">{{
-                item.title
-              }}</label>
+              <label *ngFor="let item of properties[field]?.oneOf" eo-ng-radio [nzValue]="item.default ?? item.const">
+                {{ item.title }}
+              </label>
             </eo-ng-radio-group>
           </ng-container>
         </nz-form-control>
@@ -83,27 +84,46 @@ const compMap = {
     </form>
   `
 })
-export class EoSchemaFormComponent implements OnInit {
+export class EoSchemaFormComponent implements OnChanges {
   @Input() configuration = {} as any;
   @Input() model = {} as Record<string, any>;
+  @Output() readonly valueChanges: EventEmitter<any> = new EventEmitter<any>();
   validateForm!: FormGroup;
   objectKeys = Object.keys;
   properties = {};
   compMap = compMap;
+  isInit = true;
 
-  constructor(private fb: FormBuilder) {}
-
-  ngOnInit(): void {
-    this.init();
+  constructor(private fb: FormBuilder) {
+    this.validateForm = this.fb.group({});
+    this.initEmitter();
   }
 
-  init() {
-    this.validateForm = this.fb.group({});
+  ngOnChanges(changes: SimpleChanges) {
+    const modelIsNotEqual = !Object.is(changes.model?.previousValue, changes.model?.currentValue);
+    const configurationIsNotEqual = !Object.is(changes.configuration?.previousValue, changes.configuration?.currentValue);
+    if (modelIsNotEqual || configurationIsNotEqual) {
+      this.init();
+    }
+  }
 
+  init = debounce(() => {
+    this.isInit = false;
     this.formatProperties();
     this.initIfThenElse(this.configuration);
 
-    this.setSettingsModel(this.properties);
+    setTimeout(() => {
+      this.isInit = true;
+      this.setSettingsModel(this.properties);
+    });
+  }, 50);
+
+  initEmitter() {
+    this.validateForm.valueChanges.subscribe(
+      debounce(val => {
+        this.valueChanges.emit(val);
+      })
+    );
   }
 
   updateControls() {
@@ -141,7 +161,8 @@ export class EoSchemaFormComponent implements OnInit {
       configuration.allOf.forEach(item => {
         if (item.if?.properties) {
           Object.entries<any>(item.if.properties).forEach(([key, value]) => {
-            let __value;
+            let isInit = true;
+            let __value = this.model[key];
             Object.defineProperty(this.model, key, {
               configurable: true,
               get: () => {
@@ -149,9 +170,10 @@ export class EoSchemaFormComponent implements OnInit {
               },
               set: val => {
                 const conf = ifFields[key]?.[val]?.then;
-                if (val !== this.model[key]) {
+                if (isInit || val !== this.model[key]) {
                   if (conf?.properties) {
                     this.formatProperties({ ...configuration?.properties, ...conf.properties });
+                    isInit = false;
                   }
                   if (conf) {
                     this.initIfThenElse(conf);

src/workbench/browser/src/app/shared/services/extensions/webExtension.service.ts

@@ -32,7 +32,7 @@ export class WebExtensionService {
   resourceUrl = 'https://unpkg.com';
   constructor(private web: WebService, private language: LanguageService, private store: ExtensionStoreService) {
     const isDevEnv = !APP_CONFIG.production || this.web.isVercel || 'http://52.76.76.88:8080'.includes(window.location.hostname);
-    this.debugExtensionNames = isDevEnv ? ['postcat-sync-swagger'] : [];
+    this.debugExtensionNames = isDevEnv ? [] : [];
   }
   async installExtension(extName: string, { version = 'latest' }) {
     //Get package.json