SHIBUI-1365 Added mock-up of filter comparison

ui/src/app/metadata/configuration/component/filter-version-list.component.html

@@ -1,10 +1,44 @@
-<ul class="list-group list-group-flush" *ngIf="filters.length > 0">
-    <li *ngFor="let filter of filters; let i = index; first as isFirst; last as isLast;"
-        class="list-group-item">
-        {{ filter | json }}
-    </li>
-</ul>
-<div class="alert alert-info m-4" *ngIf="filters && filters.length < 1">
+<ng-container *ngIf="filters.dates.length > 0">
+    <div class="d-flex border-bottom border-light border-2 py-2">
+        <span [ngStyle]="{'width.%': width}">Order</span>
+        <strong *ngFor="let date of filters.dates" [ngStyle]="{'width.%': width}">
+            {{ date | date:'medium' }}
+        </strong>
+    </div>
+    <div class="">
+        <ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
+            class="list-group-item">
+            <div class="d-flex border-bottom border-light">
+                <div [ngStyle]="{'width.%': width}" class="py-2">
+                    {{ i + 1 }}
+                </div>
+                <div *ngFor="let filter of version; let i = index; even as isEven"
+                    [ngStyle]="{'width.%': width}"
+                    class="border-primary p-2 d-flex align-items-center"
+                    [ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
+                    <div class="w-50">
+                        <p>{{ filter.name }}</p>
+                        <p class="mb-0 text-muted">{{ filter.type }}</p>
+                    </div>
+                    <button class="btn btn-link mx-auto"
+                        *ngIf="filter.comparable"
+                        (click)="selected = (selected !== filter.id) ? filter.id : null">
+                        <i class="fa fa-lg"
+                            [ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
+                            aria-hidden="true"></i>
+                        <span class="sr-only">Compare</span>
+                    </button>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+    <div class="d-flex justify-content-end my-2">
+        <button class="btn btn-primary" [disabled]="!selected">
+            <translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
+        </button>
+    </div>
+</ng-container>
+<div class="alert alert-info m-4" *ngIf="filters && filters.dates.length < 1">
     <h3 translate="message.no-filters">No Filters</h3>
     <p translate="message.no-filters-added">No filters have been added to this Metadata Provider</p>
 </div>

ui/src/app/metadata/configuration/component/filter-version-list.component.ts

@@ -1,8 +1,68 @@
 import { Component } from '@angular/core';
-import { FilterListComponent } from '../../filter/component/filter-list.component';
+
+const data = {
+    dates: ['2019-08-02T12:50:54.282', '2019-08-02T12:12:54.282'],
+    filters: [
+        [
+            {
+                id: '1',
+                name: 'Example Filter 1',
+                type: 'EntityAttributesFilter',
+                comparable: true
+            },
+            {
+                id: '2',
+                name: 'Example Filter 2',
+                type: 'NameIdFilter',
+                comparable: true
+            }
+        ],
+        [
+            {
+                id: '2',
+                name: 'Example Filter 2',
+                type: 'NameIdFilter',
+                comparable: true
+            },
+            {
+                id: '1',
+                name: 'Example Filter 1',
+                type: 'EntityAttributesFilter',
+                comparable: true
+            }
+        ],
+        [
+            {
+                id: '4',
+                name: 'Example Filter 4',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            },
+            {
+                id: '3',
+                name: 'Example Filter 3',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            }
+        ]
+    ]
+};
 
 @Component({
     selector: 'filter-version-list',
     templateUrl: './filter-version-list.component.html'
 })
-export class FilterVersionListComponent extends FilterListComponent { }
+export class FilterVersionListComponent {
+
+    filters = data;
+    selected: string;
+
+    constructor() {
+
+    }
+
+    get width(): string {
+        const columns = this.filters.dates.length;
+        return `${Math.floor(100 / (columns + 1))}`;
+    }
+}

ui/src/app/metadata/configuration/container/metadata-comparison.component.html

@@ -14,15 +14,8 @@
             <h2 class="title h4 m-0 ml-2 flex-grow-1">
                 <span class="text" translate="label.filters">Filters</span>
             </h2>
-            <div class="actions px-2">
-                <a class="btn btn-link edit-link change-view"
-                    [routerLink]="['/', 'metadata', 'provider', id, 'filter', 'new']">
-                    <i class="fa fa-gear"></i>&nbsp;
-                    <span translate="action.add-filter">Add Filter</span>
-                </a>
-            </div>
+            <div class="actions p-2 invisible">-</div>
         </div>
-        <filter-version-list
-            [filters]="filters$ | async"></filter-version-list>
+        <filter-version-list class="d-block p-2"></filter-version-list>
     </div>
 </div>

ui/src/theme/utility.scss

@@ -6,6 +6,10 @@
     background: #FAFAFA !important;
 }
 
+.bg-primary-light {
+    background: lighten($brand-primary, 75%);
+}
+
 .w-15 {
     width: 15%;
 }