254: Date range filter added to admin

src/app/export-reports/export-reports.component.html

@@ -1,4 +1,4 @@
-<div class="container mt-5">
+<div class="container mt-5 mb-5">
   <div class="card">
     <div class="card-body m-3">
       <h1>Export Report</h1>
@@ -26,12 +26,37 @@ <h1>Export Report</h1>
           <div>
             <h3 class="card-title">Export all</h3>
             <p class="card-text text-muted">
-              Generate a full report with no filters.
+              Export all records or choose a date range.
             </p>
           </div>
 
           <hr />
+          <div class="my-4 py-3">
+            <ngds-toggle-input
+              [control]="form?.controls?.['exportAllCheck']"
+              [label]="'Export all'">
+            </ngds-toggle-input>
+          </div>
+          <div class="row mb-3">
+            <div class="col-md-12 col-lg-4">
+              <ngds-date-input
+                [control]="form?.controls?.['dateRange']"
+                [dateRange]="true"
+                [hideSecondCalendar]="true"
+                [minMode]="1"
+                [rangeSeparator]="'-'"
+                [dateFormat]="dateFormat"
+                [dateDisplayFormat]="'LLLL yyyy'"
+                [placeholder]="'Select date range'"
+                [maxDate]="maxDate">
+                <div
+                  ngdsInputPrepend
+                  class="bi bi-calendar px-2"></div>
+              </ngds-date-input>
+            </div>
+          </div>
         </div>
+
         <div class="tab-pane fade" id="variance" role="tabpanel" aria-labelledby="variance-tab">
           <div>
             <h3 class="card-title">Export variance data</h3>
@@ -94,19 +119,18 @@ <h3 class="card-title">Export missing data</h3>
                 </ngds-date-input>
 
                 <div class="my-4 py-3">
-                  <label class="d-flex align-items-center">
-                    <input type="checkbox" [(ngModel)]="exportAllCheck" (click)="toggleExportAllCheck()"/>
-                    <div class="col-10 mx-2 card-text fs-6">Export all</div>
-                  </label>
+                  <ngds-toggle-input
+                    [control]="form?.controls?.['exportAllCheckMissing']"
+                    [label]="'Export all'">
+                  </ngds-toggle-input>
                 </div>
-                <div class="col-md-12 col-lg-8">
+                <div class="col-12">
                   <ngds-typeahead-input
                     [control]="form?.controls?.['park']"
                     [label]="'Park'"
                     [selectionListItems]="_parks?.value"
                     [resetButton]="true"
                     [placeholder]="'Search by park name'"
-                    [disabled]="exportAllCheck"
                   >
                   </ngds-typeahead-input>
 

src/app/export-reports/export-reports.component.spec.ts

@@ -99,7 +99,7 @@ describe('ExportReportsComponent', () => {
     expect(component.status).toEqual('Standing by');
     expect(component.percentageComplete).toEqual(0);
     expect(component.progressBarTextOverride).toEqual(undefined);
-    expect(component.disableGenerate).toEqual(false);
+    expect(component.disableGenerate).toEqual(true);
     expect(component.disableDownload).toEqual(true);
     expect(component.currentState).toEqual(0);
     expect(component.progressBarColour).toEqual('secondary');

src/app/export-reports/export-reports.component.ts

@@ -9,6 +9,7 @@
   UntypedFormGroup,
   FormsModule,
 } from '@angular/forms';
+import { end } from '@popperjs/core';
 
 @Component({
   selector: 'app-export-reports',
@@ -45,8 +46,7 @@
   public defaultRangeString = 'Select fiscal year';
   public fiscalYearRangeString = this.defaultRangeString;
   public modelDate = NaN;
-  public activeTab = '';
-  public exportAllCheck = true;
+  public activeTab = 'standard';
 
   public tz = Constants.timezone;
   public maxDate = DateTime.now().setZone(this.tz);
@@ -57,6 +57,10 @@
   public form = new UntypedFormGroup({
     year: new UntypedFormControl(null),
     park: new UntypedFormControl(null),
+    dateRange: new UntypedFormControl(null),
+    exportAllCheck: new UntypedFormControl(false),
+    exportAllCheckMissing: new UntypedFormControl(true),
+
   });
 
   public exportMessage = 'Last export: -';
@@ -94,6 +98,23 @@
         );
       }),
     );
+    this.subscriptions.add(
+      this.form.controls['dateRange'].valueChanges.subscribe((changes) => {
+        if (changes) {
+          const startDate = DateTime.fromFormat(changes[0], 'yyyy-LL').startOf('day');
+          const endDate = DateTime.fromFormat(changes[1], 'yyyy-LL').startOf('day');
+          this.form.controls['dateRange'].setValue(
+            [
+              startDate.toFormat(this.dateFormat),
+              endDate.toFormat(this.dateFormat),
+            ],
+            {
+              emitEvent: false,
+            },
+          );
+        }
+      }),
+    );
     this.subscriptions.add(
       this.dataService
         .watchItem(Constants.dataIds.EXPORT_ALL_POLLING_DATA)
@@ -128,6 +149,26 @@
           this.jobUpdate(res);
         }),
     );
+    this.subscriptions.add(
+      this.form.get('exportAllCheck').valueChanges.subscribe(value => {
+        if (value) {
+          this.form.get('dateRange').disable();
+          this.form.controls['dateRange'].setValue(null);
+       } else {
+          this.form.get('dateRange').enable();
+       }
+      })
+    );
+    this.subscriptions.add(
+      this.form.get('exportAllCheckMissing').valueChanges.subscribe(value => {
+        if (value) {
+          this.form.get('park').disable();
+          this.form.controls['park'].setValue('');
+       } else {
+          this.form.get('park').enable();
+       }
+      })
+    );
   }
 
   setMaxDate() {
@@ -158,12 +199,6 @@
     return list;
   }
 
-  toggleExportAllCheck() {
-    this.exportAllCheck = !this.exportAllCheck;
-    // Remove any park that was selected
-    this.form.controls['park'].setValue('');
-  }
-
   jobUpdate(res) {
     if (res) {
       this.initialLoad = false;
@@ -233,9 +268,15 @@
         },
       );
     } else {
+      const dateRangeStart = this.form.controls['dateRange'].value?.[0] || null ;
+      const dateRangeEnd = this.form.controls['dateRange'].value?.[1] || null ;
       this.exportService.generateReport(
         Constants.dataIds.EXPORT_ALL_POLLING_DATA,
         'standard',
+        {
+          dateRangeStart: dateRangeStart,
+          dateRangeEnd: dateRangeEnd,
+        },
       );
     }
   }
@@ -369,13 +410,29 @@
   }
 
   disableGenerateButton() {
-    if (
-      (this.activeTab === 'variance' || this.activeTab === 'missing') &&
-      !this.form?.controls?.['year'].value
-    ) {
+    if (this.activeTab === 'variance' && !this.form?.controls?.['year'].value) {
       return true;
     }
 
+    if (this.activeTab === 'missing') {
+      if (!this.form?.controls?.['year'].value) {
+        return true;
+      } else if (this.form.controls['exportAllCheckMissing'].value === true) {
+        return false;
+      } else if (!this.form?.controls?.['park'].value) {
+        return true;
+      }
+    }
+
+    if (this.activeTab === 'standard') {
+      if (this.form.controls['exportAllCheck'].value === true) {
+        return false;
+      }
+      if (!this.form?.controls?.['dateRange'].value) {
+        return true;
+      }
+    }
+
     if (this.currentState === 3) {
       return false;
     }
@@ -386,8 +443,12 @@
     return false;
   }
 
   ngOnInit() {
     this.setMaxDate();
+
+    if (this.form.controls['exportAllCheckMissing'].value) {
+      this.form.get('park').disable();
+    }
   }
 
   ngOnDestroy() {

src/app/services/export.service.ts

@@ -79,7 +79,12 @@ export class ExportService {
           throw 'Missing fiscal year end property';
         }
       } else {
-        res = await firstValueFrom(this.apiService.get('export'));
+        res = await firstValueFrom(
+          this.apiService.get('export', {
+            dateRangeStart: params?.dateRangeStart,
+            dateRangeEnd: params?.dateRangeEnd
+          })
+        );
       }
       if (res.error) {
         throw res.error;