Config-editor-ui: revert reordering due to bugs (#734)

G-Research · Jul 21, 2022 · 7861644 · 7861644
1 parent ca521ae
commit 7861644
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 40 deletions.
diff --git a/config-editor/config-editor-ui/package.json b/config-editor/config-editor-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rule-editor.ui",
-  "version": "2.6.5-dev",
+  "version": "2.6.6-dev",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/tab-array.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/tab-array.type.component.ts
@@ -6,12 +6,7 @@ import { FieldArrayType } from '@ngx-formly/core';
   template: `
     <div>
       <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab">
-        <mat-tab *ngFor="let tab of field.fieldGroup; let i = index">
-          <ng-template mat-tab-label>
-            <mat-icon *ngIf="i != 0" (click)="moveDown(i)">arrow_left</mat-icon>
-            {{ getUnionType(i) }}
-            <mat-icon *ngIf="i != field.fieldGroup.length - 1" (click)="moveUp(i)">arrow_right</mat-icon>
-          </ng-template>
+        <mat-tab *ngFor="let tab of field.fieldGroup; let i = index" [label]="getUnionType(tab?.model)">
           <span class="align-right">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -65,52 +60,52 @@ import { FieldArrayType } from '@ngx-formly/core';
         display: table;
         padding-top: 5px;
       }
-
-      ::ng-deep .mat-tab-label {
-        padding: 0 4px;
-      }
-
-      ::ng-deep .mat-tab-label .mat-tab-label-content {
-        width: 100%;
-        justify-content: space-around;
-      }
     `,
   ],
 })
 export class TabArrayTypeComponent extends FieldArrayType {
   selectedTab = 0;
 
-  getUnionType(index: number): string {
-    return this.form.value.evaluators[index].evaluator_type;
+  getUnionType(model): string {
+    const keys = Object.keys(model);
+    return keys[keys.length - 1];
   }
 
-
-  add(index: number, unionModel = undefined) {
-    super.add(index, unionModel);
-    this.selectedTab = index;
-    this.options.build();
+  add(i: number) {
+    const modelLength = this.model ? this.model.length : 0;
+    super.add(modelLength);
+    this.selectedTab = i;
+    for (let j = this.model.length - 1; j >= i; j--) {
+      this.moveDown(j);
+    }
   }
 
-  moveDown(index: number) {
-    if (index === 0) {
+  moveDown(i: number) {
+    if (i === this.model.length - 1) {
       return;
     }
 
-    this.reorder(index - 1, index);
+    this.reorder(i, i + 1);
   }
 
-  moveUp(index: number) {
-    if (index === this.model.length - 1) {
-      return;
-    }
-
-    this.reorder(index, index + 1);
+  private reorder(oldI: number, newI: number) {
+    this.reorderFields(this.field.fieldGroup, oldI, newI);
+    this.reorderItems(this.model, oldI, newI);
+    this.reorderItems(this.formControl.controls, oldI, newI);
   }
 
-  private reorder(oldIndex: number, newIndex: number) {
-    const unionModel = this.model[oldIndex];
-    this.remove(oldIndex);
-    this.add(newIndex, unionModel);
+  private reorderItems(obj: any[], oldI: number, newI: number) {
+    const old = obj[oldI];
+    obj[oldI] = obj[newI];
+    obj[newI] = old;
   }
 
-}
+  private reorderFields(obj: any[], oldI: number, newI: number) {
+    const old = obj[oldI];
+    obj[oldI] = obj[newI];
+    obj[oldI].key = `${oldI}`;
+
+    obj[newI] = old;
+    obj[newI].key = `${newI}`;
+  }
+}
diff --git a/config-editor/config-editor-ui/src/app/services/schema/config-schema-service.ts b/config-editor/config-editor-ui/src/app/services/schema/config-schema-service.ts
@@ -11,8 +11,12 @@ export class ConfigSchemaService extends SchemaService {
 
   constructor(protected uiMetadata: UiMetadata, protected user: string, protected originalSchema: JSONSchema7) {
     super(uiMetadata, user, originalSchema);
+    if (this.uiMetadata.unionType) {
+      this.unionPath = this.uiMetadata.unionType.unionPath ?? undefined;
+      this.selectorName = this.uiMetadata.unionType.unionSelectorName ?? undefined;
+    }
 
-    //NOTE: we need to modify the schema to handle optionals and remove metadata
+    //NOTE: we need to modify the schema to handle optionals, unions and remove metadata
     this._schema = this.returnSubTree(this.originalSchema, this.uiMetadata.perConfigSchemaPath) as JSONSchema7;
     this.wrapOptionalsInSchema(this._schema, '', '');
     this.formatTitlesInSchema(this._schema, '');
@@ -71,4 +75,4 @@ export class ConfigSchemaService extends SchemaService {
     cfg = omitEmpty(cfg);
     return cfg;
   }
-}
+}
diff --git a/config-editor/config-editor-ui/src/app/services/schema/schema.service.ts b/config-editor/config-editor-ui/src/app/services/schema/schema.service.ts
@@ -7,6 +7,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 
 export class SchemaService {
   titleCasePipe: TitleCasePipe = new TitleCasePipe();
+  protected unionPath: string;
   protected selectorName: string;
   private optionalObjects: string[] = [];
   private modelOrder = {};
@@ -28,11 +29,17 @@ export class SchemaService {
   wrapConfig(obj: any): any {
     const ret = cloneDeep(obj);
     this.wrapOptionalsInArray(ret);
+    if (this.unionPath && Object.keys(ret).length !== 0) {
+      this.wrapUnionConfig(ret, this.unionPath);
+    }
     return ret;
   }
 
   unwrapConfig(obj: any): any {
     let returnObject = cloneDeep(obj);
+    if (this.unionPath) {
+      returnObject = this.unwrapConfigFromUnion(returnObject, this.unionPath);
+    }
     return this.unwrapOptionalsFromArrays(returnObject);
   }
 
@@ -169,6 +176,10 @@ export class SchemaService {
       }
     } else if (obj.type === 'array') {
       path = path === '/' ? path : path + '/';
+      if (obj.items.hasOwnProperty('oneOf')) {
+        this.wrapSchemaUnion(obj.items.oneOf);
+        this.unionPath = path + propKey;
+      }
       if (obj.items.type === 'object') {
         this.wrapOptionalsInSchema(obj.items, propKey, path);
       }
@@ -180,6 +191,20 @@ export class SchemaService {
     }
   }
 
+  private wrapUnionConfig(obj, oneOfPath: string) {
+    const path = oneOfPath.split('/').filter(f => f !== '');
+    let sub = obj;
+    for (const part of path) {
+      sub = sub[part];
+    }
+    if (sub) {
+        for (let i = 0; i < sub.length; i++) {
+        const temp = sub[i];
+        sub[i] = { [sub[i][this.selectorName]]: temp };
+      }
+    }
+  }
+
   private wrapOptionalsInArray(obj: any) {
     for (const optional of this.optionalObjects) {
       this.findAndWrap(obj, optional);
@@ -199,6 +224,32 @@ export class SchemaService {
     }
   }
 
+  private unwrapConfigFromUnion(obj, oneOfPath: string): any {
+    const path = oneOfPath.split('/').filter(f => f !== '');
+    let sub = obj;
+    for (const part of path) {
+      sub = sub[part];
+    }
+    if (sub) {
+      for (let i = 0; i < sub.length; i++) {
+        const keys = Object.keys(sub[i]);
+        const temp = sub[i][keys[0]];
+        sub[i][keys[0]] = undefined;
+        sub[i] = { ...temp };
+      }
+    }
+    return obj;
+  }
+
+  private wrapSchemaUnion(obj: any): any {
+    for (const item of obj) {
+      const temp = item.properties;
+      const required = item.required;
+      item.properties = { [item.title]: { properties: temp, required, type: 'object' } };
+      item.required = [item.title];
+    }
+  }
+
   private unwrapOptionalsFromArrays(obj: any) {
     if (obj === undefined || obj === null || typeof obj !== typeof {}) {
       return obj;
@@ -215,4 +266,4 @@ export class SchemaService {
 
     return obj;
   }
-}
+}