From f6fe392462dae8e0bb729835b66701f1a99d3fd1 Mon Sep 17 00:00:00 2001
From: Jane Sandberg <js7389@princeton.edu>
Date: Sun, 14 May 2023 00:58:17 -0700
Subject: [PATCH] LP2002343: cash reports end date cannot come before start
 date

To test:
1. Log in as a staff member with a branch-level home library (global admin account will work only if you change it from CONS to, say, BR1)
2. As that staff member, bill some patrons and then accept some payments from them
3. Go to admin > local admin > cash reports
4. Try to set the end date before the start date.
5. Note that you get an alert, and cannot press the Submit button.
6. Confirm that when you enter valid dates and select your staff member's home ou, the reports display as usual.

Signed-off-by: Jane Sandberg <js7389@princeton.edu>
---
 .../app/share/date-select/date-select.component.ts |  2 +-
 .../local/cash-reports/cash-reports.component.html | 18 ++++---
 .../cash-reports/cash-reports.component.spec.ts    | 60 ++++++++++++++++++++++
 .../local/cash-reports/cash-reports.component.ts   | 25 ++++-----
 4 files changed, 81 insertions(+), 24 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.spec.ts

diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
index 5de9628050..07acc59b86 100644
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef} from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter, forwardRef} from '@angular/core';
 import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {DateUtil} from '@eg/share/util/date';
diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html
index 251fc936c3..d4224cff04 100644
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html
@@ -2,25 +2,29 @@
 </eg-staff-banner>
 
 <div class="mb-5">
-  <div>
+  <form #criteria="ngForm" egDateFieldOrderList="startDate,endDate">
     <div class="row">
       <div class="input-group col-lg-3">
-          <div class="input-group-text" i18n>Start Date</div> 
-          <eg-date-select [initialDate]="today" (onChangeAsYmd)="onStartDateChange($event)"></eg-date-select>
+          <label class="input-group-text" i18n for="start-date">Start Date</label>
+          <eg-date-select [initialDate]="today" domId="start-date" name="startDate" [(ngModel)]="startDate"></eg-date-select>
       </div>
       <div class="input-group col-lg-3">
-          <div class="input-group-text" i18n>End Date</div> 
-          <eg-date-select [initialDate]="today" (onChangeAsYmd)="onEndDateChange($event)"></eg-date-select>
+          <label class="input-group-text" i18n for="end-date">End Date</label>
+          <eg-date-select [initialDate]="today" domId="end-date" name="endDate" [(ngModel)]="endDate"></eg-date-select>
       </div>
       <div class="input-group col-lg-4">
           <div class="input-group-text" i18n>View reports for</div>
         <eg-org-select [applyDefault]="true" [disableOrgs]="disabledOrgs" (onChange)="onOrgChange($event)"></eg-org-select>
       </div>
       <div class="col-lg-2">
-        <button class="btn btn-primary" (click)="searchForData(startDate, endDate)">Submit</button>
+        <button class="btn btn-primary" (click)="searchForData()" [disabled]="!criteria.valid">Submit</button>
       </div>
     </div>
-  </div>
+    <div role="alert" class="alert alert-danger" id="dateOutOfOrderAlert" *ngIf="criteria.errors?.['datesOutOfOrder'] && (criteria.touched || criteria.dirty)">
+      <span class="material-icons" aria-hidden="true">error</span>
+      <span i18n>Start date must be before end date</span>
+    </div>
+  </form>
 </div>
 
 <ul ngbNav #cashReportsNav="ngbNav" class="nav-tabs"  [keyboard]="true" [roles]="false" role="tablist"
diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.spec.ts b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.spec.ts
new file mode 100644
index 0000000000..ca734e1e95
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.spec.ts
@@ -0,0 +1,60 @@
+import { TestBed } from '@angular/core/testing';
+import { AuthService } from '@eg/core/auth.service';
+import { IdlService } from '@eg/core/idl.service';
+import { NetService } from '@eg/core/net.service';
+import { OrgService } from '@eg/core/org.service';
+import { CashReportsComponent } from './cash-reports.component';
+import { DateSelectComponent } from '@eg/share/date-select/date-select.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgbDatepickerModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { of } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+import { DatesInOrderValidatorDirective } from '@eg/share/validators/dates_in_order_validator.directive';
+
+const mockIdlObject = {a: null,
+    classname: null,
+    _isfieldmapper: null,
+    id: () => {null},
+    ws_ou: () => {null}};
+const mockNet = jasmine.createSpyObj<NetService>(['request']);
+mockNet.request.and.returnValue(of());
+const mockOrg = jasmine.createSpyObj<OrgService>(['get', 'filterList']);
+const mockAuth = jasmine.createSpyObj<AuthService>(['user', 'token']);
+mockAuth.user.and.returnValue(mockIdlObject);
+
+describe('CashReportsComponent', () => {
+  it('alerts the user if end date is before start date', async () => {
+    await TestBed.configureTestingModule({
+        declarations: [
+            CashReportsComponent,
+            DateSelectComponent,
+            DatesInOrderValidatorDirective
+        ],
+        providers: [
+            {provide: IdlService, useValue: {}},
+            {provide: NetService, useValue: mockNet},
+            {provide: OrgService, useValue: mockOrg},
+            {provide: AuthService, useValue: mockAuth}
+        ],
+        imports: [
+            NgbNavModule,
+            NgbDatepickerModule,
+            FormsModule
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CashReportsComponent);
+    const component = fixture.componentInstance;
+    const element = fixture.nativeElement;
+    component.selectedOrg = mockIdlObject;
+    fixture.detectChanges();
+    
+    element.querySelector('#start-date').value = '2022-01-01';
+    element.querySelector('#end-date').value = '2021-01-01';
+    component.criteria.form.setErrors({datesOutOfOrder: true});
+    component.criteria.form.markAsDirty();
+    fixture.detectChanges();
+    expect(element.querySelector('#dateOutOfOrderAlert').innerText).toContain('Start date must be before end date');
+  });
+});
diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts
index cef34be2d4..00e07389e1 100644
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.ts
@@ -5,6 +5,7 @@ import {IdlService} from '@eg/core/idl.service';
 import {NetService} from '@eg/core/net.service';
 import {AuthService} from '@eg/core/auth.service';
 import {OrgService} from '@eg/core/org.service';
+import { NgForm } from '@angular/forms';
 
 class DeskTotals {
     cash_payment = 0;
@@ -31,9 +32,8 @@ export class CashReportsComponent implements OnInit {
     deskIdlClass = 'mwps';
     userIdlClass = 'mups';
     selectedOrg = this.org.get(this.auth.user().ws_ou());
-    today = new Date();
-    startDate = `${this.today.getFullYear()}-${String(this.today.getMonth() + 1).padStart(2, '0')}-${String(this.today.getDate()).padStart(2, '0')}`;
-    endDate = `${this.today.getFullYear()}-${String(this.today.getMonth() + 1).padStart(2, '0')}-${String(this.today.getDate()).padStart(2, '0')}`;
+    startDate = new Date();
+    endDate = new Date();
     deskTotals = new DeskTotals();
     userTotals = new UserTotals();
     disabledOrgs = [];
@@ -46,6 +46,7 @@ export class CashReportsComponent implements OnInit {
     @ViewChild('deskPaymentGrid') deskPaymentGrid: GridComponent;
     @ViewChild('userPaymentGrid') userPaymentGrid: GridComponent;
     @ViewChild('userGrid') userGrid: GridComponent;
+    @ViewChild('criteria') criteria: NgForm;
 
     constructor(
         private idl: IdlService,
@@ -55,26 +56,26 @@ export class CashReportsComponent implements OnInit {
 
     ngOnInit() {
         this.disabledOrgs = this.getFilteredOrgList();
-        this.searchForData(this.startDate, this.endDate);
+        this.searchForData();
 
         this.cellTextGenerator = {
             card: row => row.user.card()
         };
     }
 
-    searchForData(start, end) {
+    searchForData() {
         this.userDataSource.data = [];
         this.fillGridData(this.deskIdlClass, 'deskPaymentDataSource',
             this.net.request(
                 'open-ils.circ',
                 'open-ils.circ.money.org_unit.desk_payments',
-                this.auth.token(), this.selectedOrg.id(), start, end));
+                this.auth.token(), this.selectedOrg.id(), this.startDate.toISOString().split('T')[0], this.endDate.toISOString().split('T')[0]));
 
         this.fillGridData(this.userIdlClass, 'userPaymentDataSource',
             this.net.request(
                 'open-ils.circ',
                 'open-ils.circ.money.org_unit.user_payments',
-                this.auth.token(), this.selectedOrg.id(), start, end));
+                this.auth.token(), this.selectedOrg.id(), this.startDate.toISOString().split('T')[0], this.endDate.toISOString().split('T')[0]));
     }
 
     fillGridData(idlClass, dataSource, data) {
@@ -142,16 +143,8 @@ export class CashReportsComponent implements OnInit {
         return this.org.filterList(orgFilter, true);
     }
 
-    onStartDateChange(date) {
-        this.startDate = date;
-    }
-
-    onEndDateChange(date) {
-        this.endDate = date;
-    }
-
     onOrgChange(org) {
         this.selectedOrg = org;
-        this.searchForData(this.startDate, this.endDate);
+        this.searchForData();
     }
 }
-- 
2.11.0