SHIBUI-1270 Fixed issue with array layouts

TIER · Jul 15, 2019 · db62acb · db62acb
1 parent 1fc94d1
commit db62acb
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 17 deletions.
diff --git a/ui/src/app/metadata/configuration/component/array-property.component.html b/ui/src/app/metadata/configuration/component/array-property.component.html
@@ -1,23 +1,24 @@
 <div>
     <ng-container *ngIf="property.items.type === 'object'">
         <div class="p-2" role="term" [translate]="property.name">{{ property.name }}</div>
-        <div class="p-2" *ngIf="property.value && property.value.length">
-            <div *ngFor="let value of property.value; let i = index;" class="mb-2 bg-lighter">
-                <div *ngFor="let prop of getKeys(property.items); let n = index;"
-                    class="d-flex p-2">
-                    <div [ngStyle]="{'width': width}">
-                        <span [class.invisible]="n">{{ i + 1 }}.&nbsp;</span>
-                        <span [translate]="property.items.properties[prop].title">{{ property.items.properties[prop].title }}</span>
-                    </div>
-                    <div *ngFor="let v of value"
-                        [ngbPopover]="value[prop]"
+        <div *ngFor="let item of range; let i = index;" class="p-2 bg-lighter border-top">
+            <div *ngFor="let prop of getKeys(property.items); let n = index;" class="d-flex py-2">
+                <div [ngStyle]="{'width': width}">
+                    <span [translate]="property.items.properties[prop].title">{{ property.items.properties[prop].title }}</span>
+                </div>
+                <ng-container *ngFor="let version of property.value">
+                    <div *ngIf="version[i]"
+                        [ngbPopover]="version[i][prop]"
                         triggers="mouseenter:mouseleave"
                         container="body"
                         placement="left"
                         [ngStyle]="{'width': width}">
-                        {{ v[prop] }}
+                        {{ version[i][prop] }}
                     </div>
-                </div>
+                    <div *ngIf="!version[i]" [ngStyle]="{'width': width}">
+                        &mdash;
+                    </div>
+                </ng-container>
             </div>
         </div>
     </ng-container>

diff --git a/ui/src/app/metadata/configuration/component/array-property.component.ts b/ui/src/app/metadata/configuration/component/array-property.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { Property } from '../../domain/model/property';
 import { Observable, of } from 'rxjs';
 import { AttributesService } from '../../domain/service/attributes.service';
@@ -10,15 +10,22 @@ import { ConfigurationPropertyComponent } from './configuration-property.compone
     styleUrls: []
 })
 
-export class ArrayPropertyComponent extends ConfigurationPropertyComponent {
+export class ArrayPropertyComponent extends ConfigurationPropertyComponent implements OnChanges {
     @Input() property: Property;
 
+    range = [];
+
     constructor(
         private attrService: AttributesService
     ) {
         super();
     }
 
+    ngOnChanges(): void {
+        const keys = this.property.value.reduce((val, version) => version ? version.length > val ? version.length : val : val, 0);
+        this.range = [...Array(keys).keys()];
+    }
+
     get attributeList$(): Observable<{ key: string, label: string }[]> {
         if (this.property.widget && this.property.widget.hasOwnProperty('data')) {
             return of(this.property.widget.data);

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="configuration">
-    <section *ngFor="let section of configuration.sections; let i = index;">
+    <section *ngFor="let section of configuration.sections; let i = index;" class="mb-4">
         <div class="config-group">
             <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
                 <h2 class="title h4 m-0 flex-grow-1">

diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.ts b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
@@ -28,7 +28,11 @@ export class MetadataHistoryComponent {
         this.router.navigate(
             ['../', 'compare'],
             {
-                queryParams: { versions: versions.map(v => v.id) },
+                queryParams: { versions: versions.sort((a, b) => {
+                    const aDate = new Date(a.date).getTime();
+                    const bDate = new Date(b.date).getTime();
+                    return aDate === bDate ? 0 : aDate < bDate ? -1 : 1;
+                }).map(v => v.id) },
                 relativeTo: this.route
             }
         );

diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -61,7 +61,6 @@ export const assignValueToProperties = (models, properties): any[] => {
 };
 
 export const getConfigurationSectionsFn = (models, definition, schema): MetadataConfiguration => {
-    console.log(models);
     return !definition || !schema ? null :
         ({
             dates: models.map(m => m.updatedDate),

diff --git a/ui/tsconfig.json b/ui/tsconfig.json
@@ -8,6 +8,7 @@
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "allowSyntheticDefaultImports": true,
+        "downlevelIteration": true,
         "target": "es5",
         "typeRoots": [
             "node_modules/@types"