Merged in feature/SHIBUI-1502 (pull request #379)

SHIBUI-1502 Removed empty sections in comparison Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Sep 26, 2019 · b2c5fee · b2c5fee
2 parents 2712629 + 4cabaf7
commit b2c5fee
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 52 deletions.
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,44 +1,46 @@
-<div *ngIf="configuration">
-    <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">
-                    <span *ngIf="numbered"
-                        class="d-inline-block px-2 py-1 mb-0 h4 number border border-secondary bg-white rounded-lg">
-                        <span *ngIf="i + 1 < 10">0</span>{{ i + 1 }}
-                    </span>
-                    <span class="text ml-2">{{ section.label | translate }}</span>
-                </h2>
-                <div class="actions px-2"
-                    *ngIf="editable && configuration.dates.length === 1">
-                    <button class="btn btn-link edit-link change-view" (click)="edit(section.id)">
-                        <i class="fa fa-edit"></i>&nbsp;
-                        <span translate="action.edit">Edit</span>
-                    </button>
-                </div>
-            </div>
-            <div class="p-2">
-                <ng-container *ngIf="section && section.properties && section.properties.length">
-                    <div class="d-flex border-bottom border-light border-2 py-2">
-                        <strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
-                        <strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
-                            <translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
-                            <span *ngIf="configuration.dates.length > 1">{{ date | date:DATE_FORMAT }}</span>
-                        </strong>
-                    </div>
-                    <object-property
-                        class="d-block"
-                        [property]="section"
-                        [columns]="configuration.dates.length"
-                        (preview)="onPreview($event)">
-                    </object-property>
-                </ng-container>
-                <ng-container *ngIf="!section || !section.properties || !section.properties.length">
-                    <div class="alert">
-                        No Changes
+<div *ngIf="configuration" class="config-section-list">
+    <ng-container *ngFor="let section of configuration.sections; let i = index;">
+        <section class="mb-4 config-section-list-item" *ngIf="section && section.properties && section.properties.length">
+            <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">
+                        <span *ngIf="numbered"
+                            class="d-inline-block px-2 py-1 mb-0 h4 number border border-secondary bg-white rounded-lg">
+                            <span *ngIf="i + 1 < 10">0</span>{{ i + 1 }}
+                        </span>
+                        <span class="text ml-2">{{ section.label | translate }}</span>
+                    </h2>
+                    <div class="actions px-2"
+                        *ngIf="editable && configuration.dates.length === 1">
+                        <button class="btn btn-link edit-link change-view" (click)="edit(section.id)">
+                            <i class="fa fa-edit"></i>&nbsp;
+                            <span translate="action.edit">Edit</span>
+                        </button>
                     </div>
-                </ng-container>
+                </div>
+                <div class="p-2">
+                    <ng-container *ngIf="section && section.properties && section.properties.length">
+                        <div class="d-flex border-bottom border-light border-2 py-2">
+                            <strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
+                            <strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
+                                <translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
+                                <span *ngIf="configuration.dates.length > 1">{{ date | date:DATE_FORMAT }}</span>
+                            </strong>
+                        </div>
+                        <object-property
+                            class="d-block"
+                            [property]="section"
+                            [columns]="configuration.dates.length"
+                            (preview)="onPreview($event)">
+                        </object-property>
+                    </ng-container>
+                </div>
             </div>
+        </section>
+    </ng-container>
+    <ng-container *ngIf="zero">
+        <div class="alert alert-info" role="alert">
+            No changes
         </div>
-    </section>
+    </ng-container>
 </div>
diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts b/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts
@@ -1,16 +1,15 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import { Metadata } from '../../domain/domain.type';
 import { CONFIG_DATE_FORMAT } from '../configuration.values';
 
 @Component({
     selector: 'metadata-configuration',
-    changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './metadata-configuration.component.html',
     styleUrls: ['./metadata-configuration.component.scss']
 })
-export class MetadataConfigurationComponent {
+export class MetadataConfigurationComponent implements OnChanges {
     @Input() configuration: MetadataConfiguration;
     @Input() definition: any;
     @Input() entity: Metadata;
@@ -19,13 +18,19 @@ export class MetadataConfigurationComponent {
 
     @Output() preview: EventEmitter<any> = new EventEmitter();
 
+    zero = false;
+
     DATE_FORMAT = CONFIG_DATE_FORMAT;
 
     constructor(
         private router: Router,
         private activatedRoute: ActivatedRoute
     ) {}
 
+    ngOnChanges(): void {
+        this.zero = this.configuration.sections.some(s => !s.properties.length);
+    }
+
     edit(id: string): void {
         this.router.navigate(['../', 'edit', id], { relativeTo: this.activatedRoute.parent });
     }

diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -39,8 +39,6 @@ export class MetadataComparisonComponent implements OnDestroy {
         this.numVersions$ = this.store.select(getComparisonConfigurationCount);
         this.type$ = this.store.select(fromReducer.getConfigurationModelType);
 
-        this.versions$.subscribe(console.log);
-
         this.sub = this.limiter.pipe(
             withLatestFrom(this.limited$),
             map(([compare, limit]) => new ViewChanged(!limit))

diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -145,6 +145,14 @@ export const getConfigurationModelNameFn =
 export const getConfigurationModelTypeFn =
     (config: Metadata) => config ? ('@type' in config) ? config['@type'] : 'resolver' : null;
 
+export const filterPluginTypes = ['RequiredValidUntil', 'SignatureValidation', 'EntityRoleWhiteList'];
+export const isAdditionalFilter = (type) => filterPluginTypes.indexOf(type) === -1;
+
+export const getVersionModelFiltersFn =
+    (model, kind) => kind === 'provider' ?
+        model.metadataFilters.filter(filter => isAdditionalFilter(filter['@type'])) :
+        null;
+
 // Version History
 
 export const getHistoryState = createSelector(getState, getHistoryStateFn);
@@ -178,8 +186,16 @@ export const getCompareState = createSelector(getState, getCompareStateFn);
 export const getComparisonLoading = createSelector(getCompareState, fromCompare.getComparisonLoading);
 export const getComparisonModels = createSelector(getCompareState, fromCompare.getVersionModels);
 export const getComparisonModelsLoaded = createSelector(getCompareState, fromCompare.getVersionModelsLoaded);
+
+export const getComparisonModelsFilteredFn = (models) => models.map((model) => ({
+    ...model,
+    metadataFilters: getVersionModelFiltersFn(model, model.type)
+}));
+
+export const getComparisonModelsFiltered = createSelector(getComparisonModels, getComparisonModelsFilteredFn);
+
 export const getComparisonConfigurations = createSelector(
-    getComparisonModels,
+    getComparisonModelsFiltered,
     getConfigurationDefinition,
     getConfigurationSchema,
     getConfigurationSectionsFn
@@ -228,13 +244,7 @@ export const getLimitedComparisonConfigurations = createSelector(
 
 export const getRestoreState = createSelector(getState, getRestoreStateFn);
 
-export const filterPluginTypes = ['RequiredValidUntil', 'SignatureValidation', 'EntityRoleWhiteList'];
-export const isAdditionalFilter = (type) => filterPluginTypes.indexOf(type) === -1;
 
-export const getVersionModelFiltersFn =
-    (model, kind) => kind === 'provider' ?
-    model.metadataFilters.filter(filter => isAdditionalFilter(filter['@type'])) :
-    null;
 
 export const getVersionState = createSelector(getState, getVersionStateFn);