feat(with-server-demo): improve demo with a version of filters local

manudss · Jan 28, 2021 · fd708fc · fd708fc
1 parent 24aeced
commit fd708fc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/src/app/with-server/with-server-demo.component.html b/src/app/with-server/with-server-demo.component.html
@@ -8,12 +8,18 @@
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Limit</mat-label>
-      <input matInput placeholder="enter limit" [(ngModel)]="limit">
+      <input matInput type="number" min="1" max="5000" placeholder="enter limit" [(ngModel)]="limit"  [ngModelOptions]="{updateOn: 'blur'}">
       <mat-icon matSuffix>last_page</mat-icon>
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Album id</mat-label>
-      <input matInput placeholder="0 -> 99" [(ngModel)]="albumId">
+      <input matInput type="number" min="1" max="99" placeholder="1 -> 99" [(ngModel)]="albumId"  [ngModelOptions]="{updateOn: 'blur'}">
+      <mat-icon matSuffix>collections</mat-icon>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Album id filter in local</mat-label>
+      <input matInput type="number" min="1" max="99" placeholder="1 -> 99" [(ngModel)]="albumIdLocal"  [ngModelOptions]="{updateOn: 'blur'}">
       <mat-icon matSuffix>collections</mat-icon>
     </mat-form-field>
     <mat-slide-toggle (change)="updatePaginator($event)" [checked]="usePaginator">Use pagninator </mat-slide-toggle>
@@ -56,7 +62,7 @@
       <!-- Name Column -->
       <ng-container matColumnDef="thumbnailUrl">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
-        <td mat-cell *matCellDef="let row"><img [src]="row.thumbnailUrl" height="30" width="30"/></td>
+        <td mat-cell *matCellDef="let row"><img [src]="row.thumbnailUrl" height="80" width="80"/></td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

diff --git a/src/app/with-server/with-server-demo.component.ts b/src/app/with-server/with-server-demo.component.ts
@@ -28,7 +28,7 @@ export class WithServerDemoComponent implements OnInit {
     this.dataSource = new AkitaMatDataSource<PhotosState>(this.photosQuery, this.photosService);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
-    this.photosService.load();
+    this.limit = '30';
   }
 
   constructor(
@@ -48,7 +48,7 @@ export class WithServerDemoComponent implements OnInit {
     if (searchQuery === '') {
       this.photosService.removeFilter('title_like');
     } else {
-      this.photosService.setFilter({id: 'title_like', value: searchQuery, server: true, name: searchQuery});
+      this.photosService.setFilter({id: 'title_like', value: searchQuery, name: searchQuery});
     }
   }
 
@@ -59,7 +59,7 @@ export class WithServerDemoComponent implements OnInit {
     if (searchQuery === '') {
       this.photosService.removeFilter('_limit');
     } else {
-      this.photosService.setFilter({id: '_limit', value: searchQuery, server: true, name: `Limit : ${searchQuery}`});
+      this.photosService.setFilter({id: '_limit', value: searchQuery, name: `Limit : ${searchQuery}`});
     }
   }
 
@@ -70,7 +70,18 @@ export class WithServerDemoComponent implements OnInit {
     if (searchQuery === '') {
       this.photosService.removeFilter('albumId');
     } else {
-      this.photosService.setFilter({id: 'albumId', value: searchQuery, server: true, name: `Album : ${searchQuery}`});
+      this.photosService.setFilter({id: 'albumId', server: true, value: searchQuery, name: `Album : ${searchQuery}`});
+    }
+  }
+
+  get albumIdLocal() {
+    return this.photosService.getFilterValue('albumIdLocal');
+  }
+  set albumIdLocal(searchQuery: string) {
+    if (searchQuery === '') {
+      this.photosService.removeFilter('albumIdLocal');
+    } else {
+      this.photosService.setFilter({id: 'albumIdLocal', server: false, value: searchQuery, name: `[local] Album  : ${searchQuery}`, predicate: entity => entity.albumId === parseInt(searchQuery, 10)});
     }
   }
 

diff --git a/src/app/with-server/with-server/photos-filters.service.ts b/src/app/with-server/with-server/photos-filters.service.ts
@@ -17,8 +17,5 @@ export class PhotosFiltersService extends AkitaFiltersPlugin<PhotosState> {
     });
   }
 
-  load() {
-    this.setFilter({id: '_limit', server: true, value: '30' });
-  }
 
 }
-Original file line number
+Diff line change
@@ Expand Up @@
         });
       }
-      load() {
-        this.setFilter({id: '_limit', server: true, value: '30' });
-      }
     }