Skip to content

Commit

Permalink
SHIBUI-1332 Implemented filter component
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed Jul 23, 2019
1 parent 7409589 commit 03fc51c
Show file tree
Hide file tree
Showing 25 changed files with 421 additions and 82 deletions.
7 changes: 7 additions & 0 deletions backend/src/main/resources/i18n/messages.properties
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ action.copy=Copy
action.choose-file=Choose File
action.search-by=Search By
action.preview=Preview
action.preview-xml=Preview XML
action.select-metadata-filter-type=Select a metadata filter type
action.add-authentication-method=Add Authentication Method
action.move-up=Move Up
Expand All @@ -51,6 +52,9 @@ action.manage-filters=Manage Filters
action.version-history=Version History
action.options=Options
action.xml=XML
action.manage=Manage
action.close=Close
action.back-to-top=Back to Top

value.enabled=Enabled
value.disabled=Disabled
Expand Down Expand Up @@ -240,6 +244,7 @@ label.filter-enabled=Filter Enabled
label.filter-target=FilterTarget
label.filter-type=Filter Type
label.option=Option
label.options=Options
label.value=Value
label.binding-type=Binding Type
label.sign-assertion=Sign Assertions
Expand All @@ -261,6 +266,8 @@ label.make-default=Make Default
label.metadata-provider-name-dashboard-display-only=Metadata Provider Name (Dashboard Display Only)
label.default-authentication-methods=Default Authentication Method(s)
label.new-of-type=New { type }
label.filters=Filters
label.attributes=Attributes

label.metadata-filter-name=Metadata Filter Name (Dashboard Display Only)
label.filter-enable=Enable this Filter?
Expand Down
3 changes: 2 additions & 1 deletion ui/src/app/app.routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ const routes: Routes = [

@NgModule({
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules
preloadingStrategy: PreloadAllModules,
anchorScrolling: 'enabled'
})],
exports: [RouterModule]
})
Expand Down
27 changes: 1 addition & 26 deletions ui/src/app/metadata/configuration/action/configuration.action.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@ import { Schema } from '../model/schema';
import { Wizard } from '../../../wizard/model';

export enum ConfigurationActionTypes {
LOAD_METADATA_REQUEST = '[Metadata Configuration] Load Metadata Request',
LOAD_METADATA_SUCCESS = '[Metadata Configuration] Load Metadata Success',
LOAD_METADATA_ERROR = '[Metadata Configuration] Load Metadata Error',

LOAD_SCHEMA_REQUEST = '[Metadata Configuration] Load Schema Request',
LOAD_SCHEMA_SUCCESS = '[Metadata Configuration] Load Schema Success',
LOAD_SCHEMA_ERROR = '[Metadata Configuration] Load Schema Error',
Expand All @@ -26,24 +22,6 @@ export enum ConfigurationActionTypes {
CLEAR = '[Metadata Configuration] Clear'
}

export class LoadMetadataRequest implements Action {
readonly type = ConfigurationActionTypes.LOAD_METADATA_REQUEST;

constructor(public payload: { id: string, type: string }) { }
}

export class LoadMetadataSuccess implements Action {
readonly type = ConfigurationActionTypes.LOAD_METADATA_SUCCESS;

constructor(public payload: Metadata) { }
}

export class LoadMetadataError implements Action {
readonly type = ConfigurationActionTypes.LOAD_METADATA_ERROR;

constructor(public payload: any) { }
}

export class LoadSchemaRequest implements Action {
readonly type = ConfigurationActionTypes.LOAD_SCHEMA_REQUEST;

Expand Down Expand Up @@ -83,7 +61,7 @@ export class LoadXmlError implements Action {
export class SetMetadata implements Action {
readonly type = ConfigurationActionTypes.SET_METADATA;

constructor(public payload: Metadata) { }
constructor(public payload: { id: string, type: string }) { }
}

export class SetDefinition implements Action {
Expand Down Expand Up @@ -113,9 +91,6 @@ export class ClearConfiguration implements Action {
}

export type ConfigurationActionsUnion =
| LoadMetadataRequest
| LoadMetadataSuccess
| LoadMetadataError
| LoadSchemaRequest
| LoadSchemaSuccess
| LoadSchemaError
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<div class="d-flex justify-content-start align-items-center">
<span class="mr-2">{{ index + 1 }}</span>
<div class="d-flex justify-content-between">
<button class="btn btn-link btn-sm" (click)="onUpdateOrderUp.emit(filter)" [disabled]="isFirst">
<i class="fa fa-arrow-circle-up fa-2x sr-hidden"></i>
<span class="sr-only" translate="action.move-up">Move Up</span>
</button>
<button class="btn btn-link btn-sm" (click)="onUpdateOrderDown.emit(filter)" [disabled]="isLast">
<i class="fa fa-arrow-circle-down fa-2x sr-hidden"></i>
<span class="sr-only" translate="action.move-up">Move Down</span>
</button>
</div>
<button class="btn btn-link mx-4" (click)="open = !open">{{ filter.name }}</button>
<span class="">{{ filter['@type'] }}</span>
<span class="ml-4">
<span class="badge badge-primary" *ngIf="filter.filterEnabled">Enabled</span>
<span class="badge badge-primary" *ngIf="!filter.filterEnabled">Disabled</span>
</span>
</div>
<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']">
<i class="fa fa-edit sr-hidden"></i>&nbsp;
<translate-i18n key="action.edit">Edit</translate-i18n>
</a>
<button class="btn btn-link"
(click)="onRemove.emit(filter.resourceId)">
<i class="fa fa-trash sr-hidden"></i>&nbsp;
<translate-i18n key="action.delete">Delete</translate-i18n>
</button>
</div>
</div>
<metadata-configuration
[numbered]="false"
[editable]="false"
[configuration]="configuration"></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>
</button>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { MetadataFilter } from '../../domain/model';
import { MetadataConfigurationService } from '../service/configuration.service';
import { Wizard } from '../../../wizard/model';
import { MetadataConfiguration } from '../model/metadata-configuration';

@Component({
selector: 'filter-configuration-list-item',
templateUrl: './filter-configuration-list-item.component.html'
})
export class FilterConfigurationListItemComponent implements OnChanges {
@Input() filter: MetadataFilter;
@Input() index: number;
@Input() isFirst: boolean;
@Input() isLast: boolean;

@Output() onUpdateOrderUp: EventEmitter<MetadataFilter> = new EventEmitter();
@Output() onUpdateOrderDown: EventEmitter<MetadataFilter> = new EventEmitter();
@Output() onRemove: EventEmitter<string> = new EventEmitter();

open = false;
configuration: MetadataConfiguration;

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.configuration = this.configService.getMetadataConfiguration(
this.filter,
definition,
schema
);
});
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<ul class="list-group list-group-flush">
<li *ngFor="let filter of filters; let i = index; first as isFirst; last as isLast;"
class="list-group-item">
<filter-configuration-list-item
[filter]="filter"
[index]="i"
[isFirst]="isFirst"
[isLast]="isLast"
(onUpdateOrderDown)="onUpdateOrderDown.emit($event)"
(onUpdateOrderUp)="onUpdateOrderUp.emit($event)"
(onRemove)="onRemove.emit($event)"></filter-configuration-list-item>
</li>
</ul>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Component } from '@angular/core';
import { FilterListComponent } from '../../filter/container/filter-list.component';

@Component({
selector: 'filter-configuration-list',
templateUrl: './filter-configuration-list.component.html'
})
export class FilterConfigurationListComponent extends FilterListComponent { }
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<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">
<div class="numbered-header d-flex justify-content-start bg-light align-items-center"
[ngClass]="{'py-2': !editable}">
<h2 class="title h4 m-0 flex-grow-1">
<span class="d-inline-block px-2 py-1 mr-2 mb-0 h4 number border border-secondary bg-white rounded-lg">
<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">{{ section.label | translate }}</span>
<span class="text ml-2">{{ section.label | translate }}</span>
</h2>
<div class="actions px-2" *ngIf="configuration.dates.length === 1">
<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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { Observable, of } from 'rxjs';
})
export class MetadataConfigurationComponent {
@Input() configuration: MetadataConfiguration;
@Input() numbered = true;
@Input() editable = true;

constructor(
private router: Router,
Expand Down
6 changes: 5 additions & 1 deletion ui/src/app/metadata/configuration/configuration.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import { DomainModule } from '../domain/domain.module';
import { MetadataComparisonComponent } from './container/metadata-comparison.component';
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';

@NgModule({
declarations: [
Expand All @@ -40,7 +42,9 @@ import { FilterModule } from '../filter/filter.module';
MetadataHeaderComponent,
MetadataHistoryComponent,
HistoryListComponent,
MetadataComparisonComponent
MetadataComparisonComponent,
FilterConfigurationListComponent,
FilterConfigurationListItemComponent
],
entryComponents: [],
imports: [
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="container-fluid p-3">
<div class="container-fluid p-3" id="configuration">
<section class="section" tabindex="0">
<div class="section-body px-4 pb-4 border border-info">
<nav aria-label="breadcrumb">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Observable, Subject } from 'rxjs';

import * as fromConfiguration from '../reducer';

import { LoadMetadataRequest, ClearConfiguration } from '../action/configuration.action';
import { ClearConfiguration, SetMetadata } from '../action/configuration.action';
import { LoadHistoryRequest, ClearHistory, SelectVersion } from '../action/history.action';
import * as fromReducer from '../reducer';

Expand All @@ -20,15 +20,15 @@ export class ConfigurationComponent implements OnDestroy {
private ngUnsubscribe: Subject<void> = new Subject<void>();

name$: Observable<string>;
type$: Observable<string>
type$: Observable<string>;

constructor(
private store: Store<fromConfiguration.ConfigurationState>,
private routerState: ActivatedRoute
) {
this.routerState.params.pipe(
takeUntil(this.ngUnsubscribe),
map(params => new LoadMetadataRequest({id: params.id, type: params.type}))
map(params => new SetMetadata({id: params.id, type: params.type}))
).subscribe(store);

this.routerState.params.pipe(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<div class="container">
<div class="container" id="header">
<metadata-header
[isEnabled]="isEnabled$ | async"
[version]="version$ | async"
[versionNumber]="versionNumber$ | async"
[isCurrent]="isCurrent$ | async"></metadata-header>
<div class="px-3 my-3 d-flex justify-content-between">
<a class="btn btn-link" routerLink="../history">
<i class="fa fa-history sr-hidden"></i>&nbsp;
<translate-i18n key="action.version-history">Version History</translate-i18n>
</a>
<div>
<a class="btn btn-link" routerLink="../history">
<i class="fa fa-history sr-hidden"></i>&nbsp;
<translate-i18n key="action.version-history">Version History</translate-i18n>
</a>
<a class="btn btn-link" [routerLink]="['./']" fragment="filters">
<i class="fa fa-arrow-down sr-hidden"></i>&nbsp;
<translate-i18n key="label.filters">Filters</translate-i18n>
</a>
</div>
<div class="btn-group" *ngIf="hasXml$ | async">
<a class="btn"
routerLink="../options"
Expand All @@ -23,5 +29,27 @@
<metadata-configuration
[configuration]="configuration$ | async">
</metadata-configuration>
<filter-list [filters]="filters$ | async"></filter-list>
<div *ngIf="kind === 'provider'" id="filters">
<div class="numbered-header d-flex justify-content-start bg-light align-items-center">
<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>
<filter-configuration-list
(onUpdateOrderDown)="updateOrderDown($event)"
(onUpdateOrderUp)="updateOrderUp($event)"
(onRemove)="removeFilter($event)"
[filters]="filters$ | async"></filter-configuration-list>
</div>
<a class="btn btn-link" [routerLink]="['./']" fragment="configuration">
<i class="fa fa-chevron-up sr-hidden"></i>&nbsp;
<translate-i18n key="action.back-to-top">Back to Top</translate-i18n>
</a>
</div>
Loading

0 comments on commit 03fc51c

Please sign in to comment.