Skip to content

Commit

Permalink
fix: implement filter in aas-portal
Browse files Browse the repository at this point in the history
  • Loading branch information
@raronpxcsw
raronpxcsw committed Nov 6, 2023
1 parent caf4947 commit 71d002e
Show file tree
Hide file tree
Showing 31 changed files with 2,100 additions and 663 deletions.
15 changes: 11 additions & 4 deletions projects/aas-lib/src/lib/aas-table/aas-table-api.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,19 @@ export class AASTableApiService {
/**
* Returns a page of documents from the specified cursor.
* @param cursor The current cursor.
* @param filter A filter expression.
* @param language The language to used for the filter.
* @returns The document page.
*/
public getDocuments(cursor: AASCursor, filter?: string): Observable<AASPage> {
return this.http.get<AASPage>(filter
? `/api/v1/documents?cursor=${encodeBase64Url(JSON.stringify(cursor))}&filter=${encodeBase64Url(filter)}`
: `/api/v1/documents?cursor=${encodeBase64Url(JSON.stringify(cursor))}`);
public getDocuments(cursor: AASCursor, filter?: string, language?: string): Observable<AASPage> {
let url = `/api/v1/documents?cursor=${encodeBase64Url(JSON.stringify(cursor))}`;
if (filter) {
url += `&filter=${encodeBase64Url(filter)}`;
if (language) {
url += `&language=${language}`;
}
}
return this.http.get<AASPage>(url);
}

/**
Expand Down
43 changes: 10 additions & 33 deletions projects/aas-lib/src/lib/aas-table/aas-table.actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@
*****************************************************************************/

import { createAction, props } from '@ngrx/store';
import { AASDocument, AASPage, aas } from 'common';
import { SortDirection } from '../sortable-header.directive';
import { AASPage } from 'common';
import { AASTableRow } from './aas-table.state';
import { ViewMode } from '../types/view-mode';
import { TypedAction } from '@ngrx/store/src/models';

export enum AASTableActionType {
Expand All @@ -20,19 +18,16 @@ export enum AASTableActionType {
GET_PREVIOUS_PAGE = '[AASTable] previous next page',
SET_PAGE = '[AASTable] set page',
GET_LAST_PAGE = '[AASTable] get last page',
SET_DOCUMENT_CONTENT = '[AASTable] set document content',

UPDATE_ROWS = '[AASTable] Update Rows',
SET_VIEW_MODE = '[AASTable] Set view mode',
SET_SORT_PARAMETER = '[AASTable] Set sort parameter',
SET_FILTER = '[AASTable] Set filter',
EXPAND = '[AASTable] Expand',
COLLAPSE = '[AASTable] Collapse',
TOGGLE_SELECTED = '[AASTable] Toggle selected',
TOGGLE_SELECTIONS = '[AASTable] Toggle selections'
}

export interface ApplyDocumentAction extends TypedAction<AASTableActionType.GET_FIRST_PAGE> {
export interface GetPageAction extends TypedAction<AASTableActionType.GET_FIRST_PAGE> {
limit: number;
filter?: string;
}

Expand All @@ -41,42 +36,24 @@ export const initialize = createAction(

export const getFirstPage = createAction(
AASTableActionType.GET_FIRST_PAGE,
props<{ filter?: string }>());
props<{ limit: number, filter?: string }>());

export const getNextPage = createAction(
AASTableActionType.GET_NEXT_PAGE);
AASTableActionType.GET_NEXT_PAGE,
props<{ limit: number, filter?: string }>());

export const getPreviousPage = createAction(
AASTableActionType.GET_PREVIOUS_PAGE);
AASTableActionType.GET_PREVIOUS_PAGE,
props<{ limit: number, filter?: string }>());

export const getLastPage = createAction(
AASTableActionType.GET_LAST_PAGE);

AASTableActionType.GET_LAST_PAGE,
props<{ limit: number, filter?: string }>());

export const setPage = createAction(
AASTableActionType.SET_PAGE,
props<{ page: AASPage }>());

export const setDocumentContent = createAction(
AASTableActionType.SET_DOCUMENT_CONTENT,
props<{ document: AASDocument; content?: aas.Environment }>());

export const updateRows = createAction(
AASTableActionType.UPDATE_ROWS,
props<{ documents: AASDocument[] }>());

export const setViewMode = createAction(
AASTableActionType.SET_VIEW_MODE,
props<{ documents: AASDocument[]; viewMode: ViewMode }>());

export const setFilter = createAction(
AASTableActionType.SET_FILTER,
props<{ filter?: string }>());

export const setSortParameter = createAction(
AASTableActionType.SET_SORT_PARAMETER,
props<{ column: string; direction: SortDirection }>());

export const expandRow = createAction(
AASTableActionType.EXPAND,
props<{ row: AASTableRow }>());
Expand Down
9 changes: 3 additions & 6 deletions projects/aas-lib/src/lib/aas-table/aas-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,8 @@
<img class="img-fluid" width="24" height="24" [src]="getFormatIcon(row)" alt="" />
</td>
<td>
<a *ngIf="canOpen(row)" class="text-nowrap" href="javascript:void(0);" [name]="row.name"
(click)="open(row)">{{row.name | max:60}}</a>
<div *ngIf="!canOpen(row)" class="text-nowrap text-secondary">{{row.name | max:60}}</div>
<a class="text-nowrap" href="javascript:void(0);" [name]="row.name" (click)="open(row)">{{row.name |
max:60}}</a>
<td>
<div class="text-nowrap" placement="top" [ngbTooltip]="getToolTip(row)">{{row.id | max:80}}</div>
</td>
Expand Down Expand Up @@ -74,9 +73,7 @@
<img class="img-fluid" width="24" height="24" [src]="getFormatIcon(row)" alt="" />
</div>
<div class="ms-2 flex-grow-1">
<a *ngIf="canOpen(row)" class="text-nowrap" href="javascript:void(0);"
(click)="open(row)">{{row.name | max:60}}</a>
<div *ngIf="!canOpen(row)" class="text-nowrap text-secondary">{{row.name | max:60}}</div>
<a class="text-nowrap" href="javascript:void(0);" (click)="open(row)">{{row.name | max:60}}</a>
</div>
</div>
</td>
Expand Down
61 changes: 25 additions & 36 deletions projects/aas-lib/src/lib/aas-table/aas-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*
*****************************************************************************/

import { Component, Input, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { AASDocument } from 'common';
Expand All @@ -21,7 +21,6 @@ import * as AASTableActions from './aas-table.actions';
import { AASQuery } from '../types/aas-query-params';
import { NotifyService } from '../notify/notify.service';
import { ClipboardService } from '../clipboard.service';
import { SortEvent, SortableHeaderDirective } from '../sortable-header.directive';
import { AASTableApiService } from './aas-table-api.service';

@Component({
Expand All @@ -33,6 +32,7 @@ export class AASTableComponent implements AASTable, OnInit, OnChanges, OnDestroy
private readonly store: Store<AASTableFeatureState>;
private readonly subscription: Subscription = new Subscription();
private _filter = '';
private _limit = 10;

constructor(
private readonly router: Router,
Expand All @@ -51,15 +51,15 @@ export class AASTableComponent implements AASTable, OnInit, OnChanges, OnDestroy
this.isLastPage = this.store.select(AASTableSelectors.selectIsLastPage);
}

@ViewChildren(SortableHeaderDirective)
public headers!: QueryList<SortableHeaderDirective>;

@Input()
public viewMode: ViewMode = ViewMode.List;

@Input()
public filter: Observable<string> | null = null;

@Input()
public limit: Observable<number> | null = null;

public readonly isFirstPage: Observable<boolean>;

public readonly isLastPage: Observable<boolean>;
Expand All @@ -77,38 +77,41 @@ export class AASTableComponent implements AASTable, OnInit, OnChanges, OnDestroy
public ngOnChanges(changes: SimpleChanges): void {
if (changes['filter'] && this.filter) {
this.subscription.add(this.filter.subscribe(filter => {
this.store.dispatch(AASTableActions.getFirstPage({ filter }));
if (filter !== this._filter) {
this._filter = filter;
this.store.dispatch(AASTableActions.getFirstPage({ filter, limit: this._limit }));
}
}));
}

// const viewModeChange = changes['viewMode'];
// if (viewModeChange && this.viewMode !== viewModeChange.previousValue) {
// this.documents?.pipe(first())
// .subscribe(documents => this.store.dispatch(AASTableActions.setViewMode({
// documents,
// viewMode: this.viewMode
// })));
// }
if (changes['limit'] && this.limit) {
this.subscription.add(this.limit.subscribe(limit => {
if (limit !== this._limit) {
this._limit = limit;
this.store.dispatch(AASTableActions.getFirstPage({ filter: this._filter, limit }));
}
}));
}
}

public ngOnDestroy(): void {
this.subscription.unsubscribe();
}

public skipStart(): void {
this.store.dispatch(AASTableActions.getFirstPage({}));
this.store.dispatch(AASTableActions.getFirstPage({ filter: this._filter, limit: this._limit }));
}

public skipBackward(): void {
this.store.dispatch(AASTableActions.getPreviousPage())
this.store.dispatch(AASTableActions.getPreviousPage({ filter: this._filter, limit: this._limit }))
}

public skipForward(): void {
this.store.dispatch(AASTableActions.getNextPage())
this.store.dispatch(AASTableActions.getNextPage({ filter: this._filter, limit: this._limit }))
}

public skipEnd(): void {
this.store.dispatch(AASTableActions.getLastPage())
this.store.dispatch(AASTableActions.getLastPage({ filter: this._filter, limit: this._limit }))
}

public expand(row: AASTableRow): void {
Expand All @@ -123,32 +126,18 @@ export class AASTableComponent implements AASTable, OnInit, OnChanges, OnDestroy
}
}

public canOpen(row: AASTableRow): boolean {
return row.document.content != null;
}

public open(row: AASTableRow): void {
const query: AASQuery = {
id: row.document.id,
url: row.document.container
url: this.getUrl(row.document.container)
};

if (this._filter) {
query.search = this._filter.replace(/&&/, '||');
}

this.clipboard.set('AASQuery', query);
this.router.navigateByUrl('/aas?format=AASQuery');
}

public onSort({ column, direction }: SortEvent) {
this.headers.forEach(header => {
if (header.sortable !== column) {
header.direction = '';
}
});

this.store.dispatch(AASTableActions.setSortParameter({ column, direction }));
this.router.navigateByUrl('/aas?format=AASQuery', { skipLocationChange: true });
}

public getFormatIcon(row: AASTableRow): string {
Expand All @@ -174,7 +163,7 @@ export class AASTableComponent implements AASTable, OnInit, OnChanges, OnDestroy
this.store.dispatch(AASTableActions.toggleSelections());
}

private documentsChanged(documents: AASDocument[]): void {
this.store.dispatch(AASTableActions.updateRows({ documents }));
private getUrl(url: string): string {
return url.split('?')[0];
}
}
56 changes: 33 additions & 23 deletions projects/aas-lib/src/lib/aas-table/aas-table.effects.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import * as AASTableSelectors from './aas-table.selectors';
import { AASTableApiService } from './aas-table-api.service';
import { AASTableFeatureState } from './aas-table.state';
import { AuthService } from '../auth/auth.service';
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class AASTableEffects {
Expand All @@ -25,6 +26,7 @@ export class AASTableEffects {
constructor(
private readonly actions: Actions,
store: Store,
private readonly translate: TranslateService,
private readonly api: AASTableApiService,
private readonly auth: AuthService
) {
Expand All @@ -42,57 +44,65 @@ export class AASTableEffects {
return EMPTY;
}

return this.api.getDocuments({ previous: null, limit: state.limit });
return this.api.getDocuments({ previous: null, limit: 10 });
}),
map(page => AASTableActions.setPage({ page })))));
});

public getFirstPage = createEffect(() => {
return this.actions.pipe(
ofType(AASTableActions.AASTableActionType.GET_FIRST_PAGE),
exhaustMap(() => this.store.select(AASTableSelectors.selectState).pipe(
first(),
mergeMap(state => this.api.getDocuments({ previous: null, limit: state.limit })),
map(page => AASTableActions.setPage({ page })))));
ofType<AASTableActions.GetPageAction>(AASTableActions.AASTableActionType.GET_FIRST_PAGE),
exhaustMap(action => this.api.getDocuments(
{ previous: null, limit: action.limit },
action.filter,
this.translate.currentLang).pipe(
map(page => AASTableActions.setPage({ page })))));
});

public getLastPage = createEffect(() => {
return this.actions.pipe(
ofType(AASTableActions.AASTableActionType.GET_LAST_PAGE),
exhaustMap(() => this.store.select(AASTableSelectors.selectState).pipe(
first(),
mergeMap(state => this.api.getDocuments({ next: null, limit: state.limit })),
map(page => AASTableActions.setPage({ page })))));
ofType<AASTableActions.GetPageAction>(AASTableActions.AASTableActionType.GET_LAST_PAGE),
exhaustMap(action => this.api.getDocuments(
{ next: null, limit: action.limit },
action.filter,
this.translate.currentLang).pipe(
map(page => AASTableActions.setPage({ page })))));
});

public getNextPage = createEffect(() => {
return this.actions.pipe(
ofType(AASTableActions.AASTableActionType.GET_NEXT_PAGE),
exhaustMap(() => this.store.select(AASTableSelectors.selectState).pipe(
ofType<AASTableActions.GetPageAction>(AASTableActions.AASTableActionType.GET_NEXT_PAGE),
exhaustMap(action => this.store.select(AASTableSelectors.selectState).pipe(
first(),
mergeMap(state => {
if (state.rows.length === 0) return EMPTY;

return this.api.getDocuments({
next: this.getId(state.rows[state.rows.length - 1].document),
limit: state.limit
});
return this.api.getDocuments(
{
next: this.getId(state.rows[state.rows.length - 1].document),
limit: action.limit
},
action.filter,
this.translate.currentLang);
}),
map(page => AASTableActions.setPage({ page })))));
});

public getPreviousPage = createEffect(() => {
return this.actions.pipe(
ofType(AASTableActions.AASTableActionType.GET_PREVIOUS_PAGE),
exhaustMap(() => this.store.select(AASTableSelectors.selectState).pipe(
ofType<AASTableActions.GetPageAction>(AASTableActions.AASTableActionType.GET_PREVIOUS_PAGE),
exhaustMap(action => this.store.select(AASTableSelectors.selectState).pipe(
first(),
mergeMap(state => {
if (state.rows.length === 0) return EMPTY;

return this.api.getDocuments({
previous: this.getId(state.rows[0].document),
limit: state.limit
});
return this.api.getDocuments(
{
previous: this.getId(state.rows[0].document),
limit: action.limit
},
action.filter,
this.translate.currentLang);
}),
map(page => AASTableActions.setPage({ page })))));
});
Expand Down
Loading

0 comments on commit 71d002e

Please sign in to comment.