SHIBUI-1332 Implemented preview for filters

backend/src/main/resources/entity-attributes-filters-ui-schema.json

@@ -46,7 +46,7 @@
             },
             "properties": {
                 "entityAttributesFilterTargetType": {
-                    "title": "",
+                    "title": "label.filter-target-type",
                     "type": "string",
                     "default": "ENTITY",
                     "oneOf": [
@@ -71,6 +71,7 @@
                     ]
                 },
                 "value": {
+                    "title": "label.filter-target-value",
                     "type": "array",
                     "buttons": [
                         {

backend/src/main/resources/i18n/messages.properties

@@ -243,6 +243,9 @@ label.filter-name=Filter Name
 label.filter-enabled=Filter Enabled
 label.filter-target=FilterTarget
 label.filter-type=Filter Type
+label.filter-target-type=Filter Target Type
+label.filter-target-value=Filter Target Value
+label.target=Filter Target
 label.option=Option
 label.options=Options
 label.value=Value
@@ -465,6 +468,9 @@ message.required-for-regex=Required for Regex
 message.file-doesnt-exist=The requested file to be processed does not exist on the server.
 message.database-constraint=There was a database constraint problem processing the request. Check the request to ensure that fields that must be unique are truly unique.
 
+message.no-filters=No Filters
+message.no-filters-added=No filters have been added to this Metadata Provider
+
 tooltip.entity-id=Entity ID
 tooltip.service-provider-name=Service Provider Name (Dashboard Display Only)
 tooltip.force-authn=Disallows use (or reuse) of authentication results and login flows that don\u0027t provide a real-time proof of user presence in the login process

ui/src/app/app.routing.ts

@@ -16,7 +16,7 @@ const routes: Routes = [
 @NgModule({
     imports: [RouterModule.forRoot(routes, {
         preloadingStrategy: PreloadAllModules,
-        anchorScrolling: 'enabled'
+        scrollOffset: [0, 64]
     })],
     exports: [RouterModule]
 })

ui/src/app/metadata/configuration/component/array-property.component.html

@@ -22,40 +22,61 @@
             </div>
         </div>
     </ng-container>
-    <ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property.items)">
+    <ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property)">
         <ng-container *ngSwitchCase="'datalist'">
             <ng-template [ngTemplateOutlet]="listref"></ng-template>
         </ng-container>
         <ng-container *ngSwitchCase="'select'">
             <ng-template [ngTemplateOutlet]="listref"></ng-template>
         </ng-container>
         <ng-container *ngSwitchDefault>
-            <div *ngFor="let attr of attributeList$ | async" class="d-flex justify-content-between border-bottom border-light">
-                <span class="p-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.label }}</span>
-                <div *ngFor="let v of property.value"
-                    class="p-2"
-                    [ngStyle]="{'width': width}">
-                    <span *ngIf="v && v.indexOf(attr.key) > -1" translate="value.true">
-                        true
-                    </span>
-                    <span *ngIf="!v || !(v.indexOf(attr.key) > -1)" translate="value.false">
-                        false
-                    </span>
+            <div *ngIf="!property.widget || !property.widget.id">
+                <ng-template [ngTemplateOutlet]="listref"></ng-template>
+            </div>
+            <div *ngIf="property.widget && property.widget.dataUrl">
+                <div *ngFor="let attr of attributeList$ | async" class="d-flex justify-content-between border-bottom border-light">
+                    <span class="p-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.label }}</span>
+                    <div *ngFor="let v of property.value" class="p-2" [ngStyle]="{'width': width}">
+                        <span *ngIf="v && v.indexOf(attr.key) > -1" translate="value.true">
+                            true
+                        </span>
+                        <span *ngIf="!v || !(v.indexOf(attr.key) > -1)" translate="value.false">
+                            false
+                        </span>
+                    </div>
                 </div>
             </div>
         </ng-container>
     </ng-container>
 </div>
 <ng-template #listref>
-    <div class="d-flex border-bottom border-light">
+    <div class="d-flex align-items-center border-bottom border-light">
         <span class="p-2" role="term" [translate]="property.name" [ngStyle]="{'width': width}">{{ property.name }}</span>
         <ng-container *ngFor="let v of property.value">
-            <p [ngStyle]="{'width': width}" class="text-secondary p-2" *ngIf="!v || !v.length">&mdash;</p>
-            <ul [ngStyle]="{'width': width}" class="list-unstyled py-2" *ngIf="v && v.length">
-                <li *ngFor="let item of v">
+            <p [ngStyle]="{'width': width}" class="text-secondary" *ngIf="!v || !v.length">&mdash;</p>
+            <span class="text-secondary" *ngIf="v && v.length && v.length === 1">{{ v }}</span>
+            <ul [ngStyle]="{'width': width}"
+                class="list-unstyled py-2"
+                *ngIf="v && v.length > 1"
+                [ngbPopover]="popContent"
+                triggers="mouseenter:mouseleave"
+                popoverClass="popover-lg">
+                <li *ngFor="let item of v; odd as isOdd" class="text-truncate" [ngClass]="{'bg-light': isOdd, 'p-2': v.length > 1}">
+                    <ng-container *ngIf="preview.observers.length > 0 && isUrl(item)">
+                        <button class="btn btn-link" (click)="preview.emit(item)">
+                            <i class="fa fa-eye fa-lg text-success"></i>
+                        </button>&nbsp;
+                    </ng-container>
                     {{ item }}
                 </li>
             </ul>
+            <ng-template #popContent>
+                <ul class="list-unstyled">
+                    <li *ngFor="let item of v; odd as isOdd" [ngClass]="{'bg-light': isOdd}" class="p-2">
+                        {{ item }}
+                    </li>
+                </ul>
+            </ng-template>
         </ng-container>
     </div>
 </ng-template>

ui/src/app/metadata/configuration/component/array-property.component.ts

@@ -1,18 +1,21 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, Output, EventEmitter } from '@angular/core';
 import { Property } from '../../domain/model/property';
 import { Observable, of } from 'rxjs';
 import { AttributesService } from '../../domain/service/attributes.service';
 import { ConfigurationPropertyComponent } from './configuration-property.component';
+import UriValidator from '../../../shared/validation/uri.validator';
 
 @Component({
     selector: 'array-property',
     templateUrl: './array-property.component.html',
-    styleUrls: []
+    styleUrls: ['./array-property.component.scss']
 })
 
 export class ArrayPropertyComponent extends ConfigurationPropertyComponent implements OnChanges {
     @Input() property: Property;
 
+    @Output() preview: EventEmitter<any> = new EventEmitter();
+
     range = [];
 
     constructor(
@@ -26,6 +29,10 @@ export class ArrayPropertyComponent extends ConfigurationPropertyComponent imple
         this.range = [...Array(keys).keys()];
     }
 
+    isUrl(str: string): boolean {
+        return UriValidator.isUri(str);
+    }
+
     get attributeList$(): Observable<{ key: string, label: string }[]> {
         if (this.property.widget && this.property.widget.hasOwnProperty('data')) {
             return of(this.property.widget.data);

ui/src/app/metadata/configuration/component/configuration-property.component.ts

@@ -16,7 +16,8 @@ export class ConfigurationPropertyComponent {
         return Object.keys(schema.properties);
     }
 
-    getItemType(items: Property): string {
+    getItemType(property: Property): string {
+        const items = property.items;
         return items.widget ? items.widget.id : 'default';
     }
 

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

@@ -20,10 +20,6 @@
 <div *ngIf="open">
     <hr class="my-2" />
     <div class="d-flex justify-content-between mb-2">
-        <a class="btn btn-link" routerLink="">
-            <i class="fa fa-eye sr-hidden"></i>&nbsp;
-            <translate-i18n key="action.preview-xml">Preview XML</translate-i18n>
-        </a>
         <div class="d-flex justify-content-between">
             <a class="btn btn-link"
                 [routerLink]="['../../', 'filter', filter.resourceId, 'edit']">
@@ -40,7 +36,9 @@
     <metadata-configuration
         [numbered]="false"
         [editable]="false"
-        [configuration]="configuration"></metadata-configuration>
+        [configuration]="configuration"
+        [entity]="filter"
+        [definition]="definition"></metadata-configuration>
     <button class="btn btn-link btn-sm" (click)="open = !open" [disabled]="isLast">
         <i class="fa fa-chevron-up sr-hidden"></i>&nbsp;
         <span translate="action.close">Close</span>

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

@@ -20,18 +20,19 @@ export class FilterConfigurationListItemComponent implements OnChanges {
 
     open = false;
     configuration: MetadataConfiguration;
+    definition: any;
 
     constructor(
         private configService: MetadataConfigurationService
     ) {}
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.filter) {
-            const definition = this.configService.getDefinition(this.filter['@type']);
-            this.configService.loadSchema(definition.schema).subscribe(schema => {
+            this.definition = this.configService.getDefinition(this.filter['@type']);
+            this.configService.loadSchema(this.definition.schema).subscribe(schema => {
                 this.configuration = this.configService.getMetadataConfiguration(
                     this.filter,
-                    definition,
+                    this.definition,
                     schema
                 );
             });

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

@@ -1,4 +1,4 @@
-<ul class="list-group list-group-flush">
+<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-configuration-list-item
@@ -10,4 +10,8 @@
             (onUpdateOrderUp)="onUpdateOrderUp.emit($event)"
             (onRemove)="onRemove.emit($event)"></filter-configuration-list-item>
     </li>
-</ul>
+</ul>
+<div class="alert alert-info m-4" *ngIf="filters && filters.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-target-property.component.html

@@ -0,0 +1,9 @@
+<ng-container *ngFor="let prop of property.properties">
+    <ng-container [ngSwitch]="prop.type">
+        <primitive-property *ngSwitchDefault [property]="prop" [columns]="columns"></primitive-property>
+        <array-property *ngSwitchCase="'array'"
+            [property]="prop"
+            [columns]="columns"
+            (preview)="onPreview($event)"></array-property>
+    </ng-container>
+</ng-container>

ui/src/app/metadata/configuration/component/filter-target-property.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Property } from '../../domain/model/property';
+import { ConfigurationPropertyComponent } from './configuration-property.component';
+
+@Component({
+    selector: 'filter-target-property',
+    templateUrl: './filter-target-property.component.html',
+    styleUrls: []
+})
+export class FilterTargetPropertyComponent extends ConfigurationPropertyComponent {
+    @Input() parent: Property;
+
+    @Output() preview: EventEmitter<any> = new EventEmitter();
+
+    constructor() {
+        super();
+    }
+
+    onPreview(data: any) {
+        this.preview.emit({
+            parent: this.parent,
+            data
+        });
+    }
+}
+

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

@@ -1,4 +1,4 @@
-<div *ngIf="configuration">
+<div *ngIf="configuration" id="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"
@@ -29,7 +29,8 @@ <h2 class="title h4 m-0 flex-grow-1">
                 class="d-block"
                 *ngIf="section"
                 [property]="section"
-                [columns]="configuration.dates.length">
+                [columns]="configuration.dates.length"
+                (preview)="onPreview($event)">
             </object-property>
         </div>
     </section>

ui/src/app/metadata/configuration/component/metadata-configuration.component.ts

@@ -3,6 +3,10 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import { Property } from '../../domain/model/property';
 import { Observable, of } from 'rxjs';
+import { Metadata } from '../../domain/domain.type';
+import { PreviewEntity } from '../../domain/action/entity.action';
+import { ConfigurationState } from '../reducer';
+import { Store } from '@ngrx/store';
 
 @Component({
     selector: 'metadata-configuration',
@@ -12,18 +16,28 @@ import { Observable, of } from 'rxjs';
 })
 export class MetadataConfigurationComponent {
     @Input() configuration: MetadataConfiguration;
+    @Input() definition: any;
+    @Input() entity: Metadata;
     @Input() numbered = true;
     @Input() editable = true;
 
     constructor(
         private router: Router,
-        private activatedRoute: ActivatedRoute
-    ) { }
+        private activatedRoute: ActivatedRoute,
+        private store: Store<ConfigurationState>
+    ) {}
 
     edit(id: string): void {
         this.router.navigate(['../', 'edit', id], { relativeTo: this.activatedRoute.parent });
     }
 
+    onPreview($event): void {
+        this.store.dispatch(new PreviewEntity({
+            id: $event.data,
+            entity: this.definition.getEntity(this.entity)
+        }));
+    }
+
     get width(): string {
         const columns = this.configuration.dates.length;
         return `${Math.floor(100 / (columns + 1)) }%`;

ui/src/app/metadata/configuration/component/object-property.component.html

@@ -2,6 +2,16 @@
     <ng-container [ngSwitch]="prop.type">
         <primitive-property *ngSwitchDefault [property]="prop" [columns]="columns"></primitive-property>
         <array-property *ngSwitchCase="'array'" [property]="prop" [columns]="columns"></array-property>
-        <object-property *ngSwitchCase="'object'" [property]="prop" [columns]="columns"></object-property>
+        <ng-container *ngSwitchCase="'object'">
+            <object-property *ngIf="!prop.widget || !prop.widget.id || prop.widget.id !=='filter-target'"
+                [property]="prop"
+                [columns]="columns"></object-property>
+            <filter-target-property *ngIf="prop.widget && prop.widget.id && prop.widget.id ==='filter-target'"
+                [property]="prop"
+                [parent]="property"
+                [columns]="columns"
+                (preview)="preview.emit($event)">
+            </filter-target-property>
+        </ng-container>
     </ng-container>
 </ng-container>

ui/src/app/metadata/configuration/component/object-property.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Property } from '../../domain/model/property';
 import { ConfigurationPropertyComponent } from './configuration-property.component';
 
@@ -10,6 +10,7 @@ import { ConfigurationPropertyComponent } from './configuration-property.compone
 
 export class ObjectPropertyComponent extends ConfigurationPropertyComponent {
     @Input() property: Property;
+    @Output() preview: EventEmitter<any> = new EventEmitter();
 
     constructor() {
         super();

ui/src/app/metadata/configuration/configuration.module.ts

@@ -28,6 +28,8 @@ import { CompareVersionEffects } from './effect/compare.effect';
 import { FilterModule } from '../filter/filter.module';
 import { FilterConfigurationListComponent } from './component/filter-configuration-list.component';
 import { FilterConfigurationListItemComponent } from './component/filter-configuration-list-item.component';
+import { SharedModule } from '../../shared/shared.module';
+import { FilterTargetPropertyComponent } from './component/filter-target-property.component';
 
 @NgModule({
     declarations: [
@@ -44,7 +46,8 @@ import { FilterConfigurationListItemComponent } from './component/filter-configu
         HistoryListComponent,
         MetadataComparisonComponent,
         FilterConfigurationListComponent,
-        FilterConfigurationListItemComponent
+        FilterConfigurationListItemComponent,
+        FilterTargetPropertyComponent
     ],
     entryComponents: [],
     imports: [
@@ -53,7 +56,8 @@ import { FilterConfigurationListItemComponent } from './component/filter-configu
         NgbPopoverModule,
         RouterModule,
         DomainModule,
-        FilterModule
+        FilterModule,
+        SharedModule
     ],
     exports: [],
     providers: []

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

@@ -1,4 +1,4 @@
-<div class="container-fluid p-3" id="configuration">
+<div class="container-fluid p-3">
     <section class="section" tabindex="0">
         <div class="section-body px-4 pb-4 border border-info">
             <nav aria-label="breadcrumb">