This commit is contained in:
Michele Artini 2023-01-26 08:28:12 +01:00
parent 0a8a1ec118
commit f4f076dc6a
4 changed files with 32 additions and 9 deletions

View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { FilterPipe } from './pipes/filter.pipe';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { FormsModule,ReactiveFormsModule } from '@angular/forms'; import { FormsModule,ReactiveFormsModule } from '@angular/forms';
@ -31,6 +31,7 @@ import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDi
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
FilterPipe,
MainMenuPanelsComponent, MainMenuPanelsComponent,
MainMenuTreeComponent, MainMenuTreeComponent,
InfoComponent, InfoComponent,

View File

@ -0,0 +1,25 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'searchFilter' })
export class FilterPipe implements PipeTransform {
/**
* Pipe filters the list of elements based on the search text provided
*
* @param items list of elements to search in
* @param searchText search string
* @returns list of elements filtered by search text or []
*/
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.trim().toLocaleLowerCase();
return items.filter(obj => {
return Object.keys(obj).reduce((acc, curr) => {
return acc || String(obj[curr]).toLowerCase().includes(searchText);
}, false);
});
}
}

View File

@ -3,11 +3,12 @@
<button mat-stroked-button color="primary" (click)="openNewDialog()">create a new resource</button> <button mat-stroked-button color="primary" (click)="openNewDialog()">create a new resource</button>
<mat-form-field style="width: 100%; margin-top: 10px;"> <mat-form-field style="width: 100%; margin-top: 10px;">
<mat-label>Filter</mat-label> <mat-label><b>Filter</b> (Total: {{(resources | searchFilter: searchText).length}})</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input /> <input matInput [(ngModel)]="searchText" placeholder="Filter..." autofocus />
</mat-form-field> </mat-form-field>
<mat-card class="example-card" *ngFor="let r of resources" style="margin-top: 10px;">
<mat-card class="example-card" *ngFor="let r of resources | searchFilter: searchText" style="margin-top: 10px;">
<mat-card-header> <mat-card-header>
<mat-card-title title="{{r.id}}">{{r.name}} <span class="badge-label badge-info" style="font-size: 0.7em;">{{type.contentType}}</span></mat-card-title> <mat-card-title title="{{r.id}}">{{r.name}} <span class="badge-label badge-info" style="font-size: 0.7em;">{{type.contentType}}</span></mat-card-title>
</mat-card-header> </mat-card-header>

View File

@ -20,6 +20,7 @@ export class ResourcesComponent implements OnInit {
typeId:string = ''; typeId:string = '';
type:ResourceType = { id: '', name: '', contentType: '', count: 0, simple: true }; type:ResourceType = { id: '', name: '', contentType: '', count: 0, simple: true };
resources:SimpleResource[] = []; resources:SimpleResource[] = [];
searchText:string = '';
constructor(public service: ISService, public route: ActivatedRoute, public newDialog: MatDialog, public contentDialog: MatDialog, public metadataDialog: MatDialog) { constructor(public service: ISService, public route: ActivatedRoute, public newDialog: MatDialog, public contentDialog: MatDialog, public metadataDialog: MatDialog) {
} }
@ -47,11 +48,6 @@ export class ResourcesComponent implements OnInit {
} }
} }
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
//this.historyDatasource.filter = filterValue;
}
openNewDialog(): void { openNewDialog(): void {
const dialogRef = this.newDialog.open(ResCreateNewDialog, { const dialogRef = this.newDialog.open(ResCreateNewDialog, {
data: { data: {