BRS-1089 & BRS-1017: updates to pass list (#274)

src/app/pass-management/pass-check-in-list/pass-check-in-list.component.spec.ts

@@ -94,6 +94,7 @@ describe('PassLookupComponent', () => {
 
   it('should check in pass', async () => {
     const checkedOutPass = { ...MockData.mockPass_1 };
+    delete checkedOutPass.checkedIn
     checkedOutPass.passStatus = 'active';
     component.passes = [{ ...MockData.mockPass_1 }];
     await component.checkIn(checkedOutPass);

src/app/pass-management/pass-management-home/pass-management-home.component.html

@@ -4,7 +4,7 @@ <h1>Pass Management</h1>
 <div class="pt-3 container-fluid">
   <div class="pt-md-5 container container-fluid">
     <div class="row">
-      <div class="col" *ngFor="let card of cardConfig">
+      <div class="col-md-6 col-12 mb-3" *ngFor="let card of cardConfig">
         <app-nav-card [cardHeader]="card.cardHeader" [cardTitle]="card.cardTitle" [cardText]="card.cardText"
           [navigation]="card.navigation" [relative]="true"></app-nav-card>
       </div>

src/app/pass-management/pass-management.module.ts

@@ -23,6 +23,7 @@ import { DsFormsModule } from '../shared/components/ds-forms/ds-forms.module';
 import { TableModule } from '../shared/components/table/table.module';
 import { PassesFilterFieldsComponent } from './pass-search/passes-filter/passes-filter-fields/passes-filter-fields.component';
 import { BsModalService } from 'ngx-bootstrap/modal';
+import { PassAccordionComponent } from './pass-search/passes-list/pass-accordion/pass-accordion.component';
 
 @NgModule({
   declarations: [
@@ -37,7 +38,8 @@ import { BsModalService } from 'ngx-bootstrap/modal';
     PassesFilterComponent,
     PassesListComponent,
     PassesUtilityButtonsComponent,
-    PassesFilterFieldsComponent
+    PassesFilterFieldsComponent,
+    PassAccordionComponent,
   ],
   imports: [
     CommonModule,

src/app/pass-management/pass-search/pass-search.component.html

@@ -15,14 +15,19 @@ <h3>Search Results</h3>
       </div>
     </div>
   </div>
+  <div class="m-4">
+    <h2><span *ngIf="currentPark">{{currentPark}}: </span><span *ngIf="currentFacility">{{currentFacility}}</span><span
+        *ngIf="currentPassType"> ({{currentPassType}})</span></h2>
+    <h3 *ngIf="currentDate">{{currentDate | date: 'mediumDate'}}</h3>
+  </div>
   <div class="mx-4 mt-4">
     <div class="row">
       <div class="col-12">
         <app-passes-capacity-bar></app-passes-capacity-bar>
       </div>
     </div>
   </div>
-  <div class="mt-4">
+  <div class="m-4">
     <app-passes-list></app-passes-list>
   </div>
 </section>

src/app/pass-management/pass-search/pass-search.component.spec.ts

@@ -38,18 +38,4 @@ describe('PassSearchComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('gets opening hour text', async () => {
-    component.facility = mockFacility;
-    expect(component.bookingOpeningHourText).toEqual('7 AM');
-    component.facility = null;
-    expect(component.bookingOpeningHourText).toEqual('8 AM');
-  });
-
-  it('gets booking days ahead text', async () => {
-    component.facility = mockFacility;
-    expect(component.bookingDaysAheadText).toEqual('2 days');
-    component.facility = null;
-    expect(component.bookingDaysAheadText).toEqual('Same Day');
-
-  });
 });

src/app/pass-management/pass-search/pass-search.component.ts

@@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
 import { ConfigService } from 'src/app/services/config.service';
 import { DataService } from 'src/app/services/data.service';
 import { FacilityService } from 'src/app/services/facility.service';
+import { ParkService } from 'src/app/services/park.service';
 import { Constants } from 'src/app/shared/utils/constants';
 import { Utils } from 'src/app/shared/utils/utils';
 
@@ -13,61 +14,32 @@ import { Utils } from 'src/app/shared/utils/utils';
 })
 export class PassSearchComponent {
   private subscriptions = new Subscription();
-  public facility;
   public Utils = new Utils();
+  public currentFacility;
+  public currentPark;
+  public currentDate;
+  public currentPassType;
 
   constructor(
     protected dataService: DataService,
     protected configService: ConfigService,
-    protected facilityService: FacilityService
+    protected facilityService: FacilityService,
+    protected parkService: ParkService
   ) {
     this.subscriptions.add(
       dataService
-        .watchItem(Constants.dataIds.CURRENT_FACILITY_KEY)
+        .watchItem(Constants.dataIds.PASS_SEARCH_PARAMS)
         .subscribe((res) => {
           if (res) {
-            this.facility = this.facilityService.getCachedFacility(res);
+            this.currentFacility = res.facilityName;
+            this.currentPark = this.parkService.getCachedPark({pk: 'park', sk: res.park})?.name;
+            this.currentDate = res.date;
+            this.currentPassType = res.passType;
           }
         })
     );
   }
 
-  get bookingOpeningHourText() {
-    const facilityBookingOpeningHour = this.facility
-      ? this.facility.bookingOpeningHour
-      : null;
-    const advanceBookingHour =
-      facilityBookingOpeningHour ||
-      parseInt(this.configService.config['ADVANCE_BOOKING_HOUR'], 10);
-    const { hour, amPm } = this.Utils.convert24hTo12hTime(advanceBookingHour);
-
-    if (hour && amPm) {
-      return `${hour} ${amPm}`;
-    }
-    return '';
-  }
-
-  get bookingDaysAheadText() {
-    let advanceBookingDays = this.facility
-      ? this.facility.bookingDaysAhead
-      : null;
-    if (advanceBookingDays !== 0 && !advanceBookingDays) {
-      advanceBookingDays = parseInt(
-        this.configService.config['ADVANCE_BOOKING_LIMIT'],
-        10
-      );
-    }
-
-    if (advanceBookingDays === 0) {
-      return 'Same Day';
-    }
-    if (advanceBookingDays === 1) {
-      return '1 day';
-    }
-
-    return `${advanceBookingDays} days`;
-  }
-
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }

src/app/pass-management/pass-search/passes-capacity-bar/passes-capacity-bar.component.html

@@ -20,15 +20,17 @@
           <small><i class="bi bi-exclamation-triangle-fill"></i> {{ data.overbooked }} passes overbooked</small>
         </div>
       </div>
-      <div *ngIf="data.modifier > 0 || data.modifier < 0" class="text-muted">
-        <small>Modifier applied</small>
+      <div *ngIf="data.reserved !== null">
+        <small>{{data?.checkInCount ? data.checkInCount : '0'}} pass{{data?.checkInCount === 1 ? '' : 'es'}} checked in</small>
       </div>
     </strong>
+    <div *ngIf="data.modifier > 0 || data.modifier < 0" class="text-muted">
+      <small>Modifier applied</small>
+    </div>
   </label>
-  <ngb-progressbar
-    [showValue]="true"
-    type="{{ data.style }}"
-    [value]="data.capPercent"
-    height="1.5rem"
-  ></ngb-progressbar>
-</div>
+  <div *ngIf="data.reserved !== null">
+    <ngb-progressbar class="capacity-bar-top" [showValue]="true" type="{{ data.style }}" [value]="data.capPercent"
+    height="1.5rem"></ngb-progressbar>
+    <ngb-progressbar class="capacity-bar-bottom" [showValue]="false" type="success" [value]="data.checkInCount" [max]="data.capacity" height="1.0rem"></ngb-progressbar>
+  </div>
+</div>

src/app/pass-management/pass-search/passes-capacity-bar/passes-capacity-bar.component.scss

@@ -0,0 +1,10 @@
+.capacity-bar-top {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.capacity-bar-bottom {
+  border-top: 1px solid #ccc;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}

src/app/pass-management/pass-search/passes-filter/passes-filter.component.ts

@@ -13,6 +13,7 @@ import { ReservationService } from 'src/app/services/reservation.service';
 import { BaseFormComponent } from 'src/app/shared/components/ds-forms/base-form/base-form.component';
 import { Constants } from 'src/app/shared/utils/constants';
 import { DateTime } from 'luxon';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-passes-filter',
@@ -195,7 +196,14 @@ export class PassesFilterComponent extends BaseFormComponent {
 
     // If there are mandatory params in the url, search for them now
     if (this.searchOnPageLoadFlag && this.checkFieldsForSubmission()) {
-      this.onSubmit();
+      // wait for parksAndFacilities to be loaded
+      let autofetchReady = new Subject();
+      this.dataService.watchItem(Constants.dataIds.PARK_AND_FACILITY_LIST).pipe(
+        takeUntil(autofetchReady)
+      ).subscribe(() => {
+        this.onSubmit();
+        autofetchReady.complete();
+      });
     }
     this.searchOnPageLoadFlag = false;
   }
@@ -284,7 +292,7 @@ export class PassesFilterComponent extends BaseFormComponent {
         res.fields?.date || null,
         res.fields?.passType || null
       );
-      this.updateUrl();
+      this.dataService.setItemValue(Constants.dataIds.PASS_SEARCH_PARAMS, this.updateUrl());
     }
   }
 
@@ -325,12 +333,11 @@ export class PassesFilterComponent extends BaseFormComponent {
       }
     }
 
-    // set cached filter params
-    this.dataService.setItemValue(Constants.dataIds.PASS_SEARCH_PARAMS, queryParams);
-
     this.router.navigate(['.'], {
       relativeTo: this.route,
       queryParams: queryParams,
     });
+
+    return queryParams;
   }
 }

src/app/pass-management/pass-search/passes-list/pass-accordion/pass-accordion.component.html

@@ -0,0 +1,62 @@
+<section>
+  <div *ngIf="isHeader && getCurrentScreenSize() > 2" class="d-flex row text-nowrap border border-2 border-white">
+    <div class="fw-bold px-3 pb-1 accordion-header overflow-hidden {{col?.columnClasses}}"
+      *ngFor="let col of getHeaderColumns()" [attr.id]="col?.id">
+      <div *ngIf="col?.displayHeader">
+        {{col?.displayHeader}}
+      </div>
+    </div>
+    <div class="col-auto" id="cancelButton">
+      <!-- Empty col for cancel button header -->
+    </div>
+    <hr class="mb-1">
+  </div>
+  <div *ngIf="!isHeader" class="d-flex row mt-2 text-nowrap justify-content-between">
+    <div class="col">
+      <div class="row d-flex border border-2 accordion-item align-items-center"
+        [ngClass]="pass?.isOverbooked ? 'border-danger' : 'border-secondary'">
+        <div *ngFor="let col of getHeaderColumns()" class="p-3 overflow-hidden {{col?.columnClasses}}"
+          [attr.id]="col?.id" [ngClass]="[pass?.isOverbooked ? 'overbooked text-danger' : '']" data-bs-toggle="collapse"
+          [attr.data-bs-target]="'#p' + pass?.sk">
+          <div *ngIf="col?.display">
+            {{col?.display(pass)}}
+          </div>
+          <div *ngIf="col?.template">
+            <ng-container [ngTemplateOutlet]="col.template" [ngTemplateOutletContext]="{pass: pass}">
+            </ng-container>
+          </div>
+          <div *ngIf="!col?.display && !col?.template">
+            {{pass[col?.key]}}
+          </div>
+        </div>
+      </div>
+      <!-- Dropdown template for when you click on the pass row -->
+      <!-- You can't have an id tag that starts with a digit -->
+      <div *ngIf="!isHeader" [attr.id]="'p'+pass?.sk" class="collapse">
+        <div class="d-flex row overflow-hidden accordion-item" data-bs-toggle="collapse"
+          [attr.data-bs-target]="'#p' + pass?.sk">
+          <div class="bg-light">
+            <div class="row">
+              <div class="col-xs-12 col-sm-auto p-3" *ngFor="let col of getDropdownColumns()">
+                <strong>{{col?.displayHeader}}</strong>
+                <div *ngIf="col?.display && !col?.template">
+                  {{col?.display(pass)}}
+                </div>
+                <div *ngIf="col?.template">
+                  <ng-container [ngTemplateOutlet]="col.template" [ngTemplateOutletContext]="{pass: pass}">
+                  </ng-container>
+                </div>
+                <div *ngIf="!col?.display && !col?.template">
+                  {{pass[col?.key]}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-auto pt-2 border border-2 border-white" id="cancelButton">
+      <ng-container [ngTemplateOutlet]="cancelTemplate" [ngTemplateOutletContext]="{pass: pass}"></ng-container>
+    </div>
+  </div>
+</section>

src/app/pass-management/pass-search/passes-list/pass-accordion/pass-accordion.component.scss

@@ -0,0 +1,3 @@
+.accordion-item {
+  cursor: pointer;
+}