Sorting options

jhu-library-applications · Nov 7, 2023 · e7ebdb1 · e7ebdb1
1 parent 2759143
commit e7ebdb1
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 29 deletions.
diff --git a/cloudapp/src/app/main/main.component.html b/cloudapp/src/app/main/main.component.html
@@ -6,6 +6,7 @@
   <mat-card>
     <mat-card-title-group>
       <mat-card-title>RMST Pick List</mat-card-title>
+
     </mat-card-title-group>
     <mat-card-content>
       <ul>
@@ -15,16 +16,28 @@
         <li>
           <p><b>Total</b>: {{ getTotalVisible() }}</p>
         </li>
+
       </ul>
+
       <div *ngIf="!loading">
+        <mat-label><b>Sorting Options</b></mat-label>
+        <br>
+        <mat-select [(value)]="sortOption">
+          <mat-option value="storageLocationIdSort">Sort by Storage Location ID</mat-option>
+          <mat-option value="storageLocationIdSortWithDate">Sort by Storage Location ID and Request Date (Oldest
+            First)</mat-option>
+          <mat-option value="requestDateSort">Sort by Request Date (Oldest First)</mat-option>
+        </mat-select>
+        <br>
         <app-print-button></app-print-button>
       </div>
     </mat-card-content>
   </mat-card>
 
   <div>
-    <div *ngFor="let resource of getVisibleResources() | storageLocationIdSort: 'asc'; index as i">
-      <div *ngIf="resource.location.copy[0]">
+    <div *ngFor="let resource of getVisibleResources() index as i">
+
+      <div *ngIf="resource.location">
         <mat-card>
           <mat-card-title-group>
             <mat-card-title><b></b>{{ i+1 }}. {{ resource.resource_metadata.title }} </mat-card-title>
@@ -33,30 +46,39 @@
             </button>
           </mat-card-title-group>
           <ng-container *ngFor="let request of resource.request">
-            <mat-card-content>
-              <dl *ngFor="let copy of resource.location.copy">
-                <dt><strong>RMST</strong></dt>
-                <dd>{{ copy.storage_location_id }}</dd>
-                <dt><strong>Barcode</strong></dt>
-                <dd>{{ copy.barcode }}</dd>
-                <dt><strong>Status</strong></dt>
-                <dd>{{ copy.base_status.desc }}</dd>
-              </dl>
-
-              <dl>
-                <dt><strong>Description</strong></dt>
-                <dd>{{ request.description }}</dd>
-                <dt><strong>Pickup Location</strong></dt>
-                <dd>{{ request.destination.desc }}</dd>
-                <dt><strong>Requester</strong></dt>
-                <dd>{{ request.requester.desc }}</dd>
-                <div *ngIf="request.email">
-                  <dt>Requester Email</dt>
-                  <dd>{{ request.email }}</dd>
-                </div>
-              </dl>
-            </mat-card-content>
-          </ng-container>          
+            <fieldset>
+              <legend>Request {{ request.id }}</legend>
+
+              <mat-card-content>
+                <dl *ngFor="let copy of resource.location.copy">
+                  <dt><strong>RMST</strong></dt>
+                  <dd>{{ copy.storage_location_id }}</dd>
+                  <dt><strong>Barcode</strong></dt>
+                  <dd>{{ copy.barcode }}</dd>
+                  <dt><strong>Status</strong></dt>
+                  <dd>{{ copy.base_status.desc }}</dd>
+                </dl>
+
+                <dl>
+                  <div *ngIf="request.description">
+                    <dt><strong>Description</strong></dt>
+                    <dd>{{ request.description }}</dd>
+                  </div>
+                  <dt><strong>Pickup Location</strong></dt>
+                  <dd>{{ request.destination.desc }}</dd>
+                  <dt><strong>Requester</strong></dt>
+                  <dd>{{ request.requester.desc }}</dd>
+                  <dt> Request Date </dt>
+                  <dd>{{ request.request_time | date: 'short' : 'EST' }}</dd>
+                  <div *ngIf="request.email">
+                    <dt>Requester Email</dt>
+                    <dd>{{ request.email }}</dd>
+                  </div>
+                </dl>
+              </mat-card-content>
+            </fieldset>
+            <br>
+          </ng-container>
         </mat-card>
       </div>
     </div>

diff --git a/cloudapp/src/app/main/main.component.ts b/cloudapp/src/app/main/main.component.ts
@@ -19,6 +19,7 @@ export class MainComponent implements OnInit, OnDestroy {
   requestedResources: RequestedResources;
   currentlyAtLibCode: string;
   curentlyAtCircDeskCode: string;
+  sortOption: any;
 
   constructor(
     private alert: AlertService,
@@ -29,6 +30,8 @@ export class MainComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.sortOption = 'storageLocationIdSort';
+
     this.requestedResourcesService.isLoading().subscribe(
       loading => this.loading = loading
     );
@@ -38,7 +41,8 @@ export class MainComponent implements OnInit, OnDestroy {
         this.requestedResourcesService.getRequestedResources(data.user.currentlyAtLibCode,
           data.user['currentlyAtCircDesk'], 100, this.alert).subscribe(
             result => {
-              this.requestedResources = result
+              this.requestedResources = result;
+
 
               this.requestedResources.requested_resource.forEach(resource => {
                 console.log('Resource:', resource)
@@ -80,8 +84,39 @@ export class MainComponent implements OnInit, OnDestroy {
   }
 
   getVisibleResources(): RequestedResource[] {
-    return this.requestedResources.requested_resource
-  }
+    switch (this.sortOption) {
+      case "storageLocationIdSort'":
+        return this.requestedResources.requested_resource.sort((a, b) => {
+          console.log(a);
+          const storageLocationIdA = a.location?.copy?.length ? a.location.copy[0].storage_location_id : '';
+          const storageLocationIdB = b.location?.copy?.length ? b.location.copy[0].storage_location_id : '';
+          return storageLocationIdA.localeCompare(storageLocationIdB);
+        });
+
+        case "storageLocationIdSortWithDate":
+          return this.requestedResources.requested_resource.sort((a, b) => {
+            const storageLocationIdA = a.location?.copy?.[0]?.storage_location_id || '';
+            const storageLocationIdB = b.location?.copy?.[0]?.storage_location_id || '';
+            const comparison = storageLocationIdA.localeCompare(storageLocationIdB);
+            if (comparison !== 0) return comparison;
+
+            const dateA = new Date(a.request[0]?.request_time);
+            const dateB = new Date(b.request[0]?.request_time);
+            return dateA.getTime() - dateB.getTime();
+          });
+
+        case "requestDateSort":
+          return this.requestedResources.requested_resource.sort((a, b) => {
+            const dateA = new Date(a.request[0]?.request_time);
+            const dateB = new Date(b.request[0]?.request_time);
+            return dateA.getTime() - dateB.getTime();
+          });
+
+        default:
+          return this.requestedResources.requested_resource;
+      }
+
+}
 
   getTotalVisible(): number {
     return this.getVisibleResources().length;