Add Filters

This adds a filter input that allows you to filter the pick list by either the request date or the or pickup location.
jhu-library-applications · Nov 15, 2023 · a78210f · a78210f
1 parent 30a4317
commit a78210f
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 22 deletions.
diff --git a/cloudapp/src/app/app.module.ts b/cloudapp/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { MainComponent } from './main/main.component';
 import { PrintButtonComponent } from './print-button/print-button.component';
 import { ApplySortPipe } from './main/apply_sort_pipe';
+import { MatInputModule } from '@angular/material/input';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { ApplySortPipe } from './main/apply_sort_pipe';
   imports: [
     MaterialModule,
     BrowserModule,
+    MatInputModule,
     BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule,

diff --git a/cloudapp/src/app/main/main.component.html b/cloudapp/src/app/main/main.component.html
@@ -2,6 +2,8 @@
   <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
 </div>
 
+
+
 <div *ngIf="requestedResources">
   <mat-card>
     <mat-card-title-group>
@@ -19,7 +21,9 @@
       <div *ngIf="!loading">
         <app-print-button></app-print-button>
 
-        <mat-form-field class="sort" appearance="fill">
+        <br>
+        <br>
+        <mat-form-field class="sort" appearance="outline" class="wide">
           <mat-label>Sort Selection</mat-label>
           <mat-select [(value)]="selectedSort" title="Sort Selection">
             <mat-option value="storageLocationIdSort">Sort by RMST</mat-option>
@@ -28,13 +32,30 @@
         </mat-form-field>
         <br/>
         <br/>
+
+
+
+        <mat-form-field appearance="outline" class="wide">
+          <mat-label>Filter By</mat-label>
+          <mat-select [(value)]="selectedFilterType">
+            <mat-option value="pickupLocation">Pickup Location</mat-option>
+            <mat-option value="requestDate">Request Date</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="wide">
+          <mat-label>Filter Text</mat-label>
+          <input matInput [(ngModel)]="filterText" placeholder="Type to filter...">
+        </mat-form-field>
+
+
       </div>
     </mat-card-content>
   </mat-card>
 
   <div>
-    <div *ngFor="let resource of getVisibleResources() | applySort:selectedSort; index as i">
-      <div *ngIf="resource.location.copy[0]">
+    <div *ngFor="let resource of getFilteredResources() | applySort:selectedSort; index as i">
+      <div>
         <mat-card>
           <mat-card-title-group>
             <mat-card-title><b></b>{{ i+1 }}. {{ resource.resource_metadata.title }} </mat-card-title>
@@ -47,6 +68,11 @@
               <legend>Request {{ request.id }}</legend>
 
               <mat-card-content>
+                <div *ngIf="resource.location.copy.length === 0">
+                  <mat-card>
+                    Warning! No copy information provided with request.
+                  </mat-card>
+                </div>
                 <dl *ngFor="let copy of resource.location.copy">
                   <dt><strong>RMST</strong></dt>
                   <dd>{{ copy.storage_location_id }}</dd>

diff --git a/cloudapp/src/app/main/main.component.scss b/cloudapp/src/app/main/main.component.scss
@@ -10,25 +10,8 @@
   .remove-button {
       display: none;
   }
-
-  dl {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    border-collapse: collapse;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  dt, dd {
-    display: flex;
-    flex: 1 1 auto;
-    justify-content: space-between;
-    align-items: center;
-    margin-left: 0;
-    padding: .25em;
-    box-sizing: border-box;
+  .wide {
+    display: none;
   }
 }
 
@@ -53,3 +36,7 @@ dt, dd {
 dt {
   font-weight: bold;
 }
+
+.wide {
+  width: 95%
+}
diff --git a/cloudapp/src/app/main/main.component.ts b/cloudapp/src/app/main/main.component.ts
@@ -20,6 +20,8 @@ export class MainComponent implements OnInit, OnDestroy {
   currentlyAtLibCode: string;
   curentlyAtCircDeskCode: string;
   selectedSort = 'storageLocationIdSort'; 
+  filterText: string = ''; 
+  selectedFilterType: string = 'pickupLocation';
 
   constructor(
     private alert: AlertService,
@@ -96,6 +98,27 @@ export class MainComponent implements OnInit, OnDestroy {
     }
   }
 
+  getFilteredResources(): RequestedResource[] {
+    if (!this.filterText) {
+      return this.getVisibleResources();
+    }
+
+    return this.getVisibleResources().filter(resource => {
+      return resource.request.some(request => {
+        switch (this.selectedFilterType) {
+          case 'pickupLocation':
+            return request.destination.desc.toLowerCase().includes(this.filterText.toLowerCase());
+          case 'requestDate':
+
+            return new Date(request.request_time).toDateString().toLowerCase().includes(this.filterText.toLowerCase());
+          default:
+            return false;
+        }
+      });
+    });
+  }
+
+
   ngOnDestroy(): void {
   }
 }