Add CSV export for draft jobs, mean, max, arbitrary range (#3564)

Author: marksvc

.github/copilot-instructions.md

@@ -26,6 +26,9 @@ This repository contains three interconnected applications:
 - Error handling with ErrorReportingService
 - Keep related files together in feature folders
 - Follow existing naming conventions
+- Follow MVVM design, where domain objects and business logic are in Models, templates represent information to the user in Views, and ViewModels transform and bridge data between Models and Views.
+- Component templates should be in separate .html files, rather than specified inline in the component decorator.
+- Component template stylesheets should be in separate .scss files, rather than specified inline in the component decorator.
 
 # Frontend localization
 
@@ -35,11 +38,11 @@ This repository contains three interconnected applications:
 - Localizations that a Community Checker user might see should be created or edited in src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json. Only localizations that a Community Checker user will not see can be created or edited in src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/non_checking_en.json.
 - Even if something is a system-wide feature that isn't specific to community checking functionality, it should still be placed in checking_en.json if a community checking user would POSSIBLY see it.
 
-# Testing
+# Frontend testing
 
 - Write unit tests for new components and services
 - Follow existing patterns for mocking dependencies
-- Use TestEnvironment pattern from existing tests
+- Use TestEnvironment pattern from existing tests. Use the TestEnvironment class pattern rather than using a `beforeEach`.
 - Test both online and offline scenarios
 - Test permission boundaries
 
@@ -56,15 +59,21 @@ This repository contains three interconnected applications:
 # TypeScript language
 
 - Use explicit true/false/null/undefined rather than truthy/falsy
-- Never rely on JavaScript's truthy or falsy. Instead, work with actual true, false, null, and undefined values, rather than relying on their interpretation as truthy or falsy. For example, if `count` might be null, or undefined, or zero, don't write code like `if (count)` or `const foo:string = someVariable ? 'a' : 'b'`. Instead, inspect for the null, undefined, or zero rather than letting the value be interpreted as truthy for falsy. For example, use`if (count == null)` or `const foo:string = someVariable != null 'a' : 'b'` or `if (count > 0)`.
+- Never rely on JavaScript's truthy or falsy. Instead, work with actual true, false, null, and undefined values, rather than relying on their interpretation as truthy or falsy. For example, if `count` might be null, or undefined, or zero, don't write code like `if (count)` or `const foo:string = someVariable ? 'a' : 'b'`. Instead, inspect for the null, undefined, or zero rather than letting the value be interpreted as truthy for falsy. For example, use `if (count == null)` or `const foo:string = someVariable != null 'a' : 'b'` or `if (count > 0)`.
 - Specify types where not obvious, such as when declaring variables and arguments, and for function return types.
 - Use `@if {}` syntax rather than `*ngIf` syntax.
+- Although interacting with existing code and APIs may necessitate the use of `null`, when writing new code, prefer using `undefined` rather than `null`.
+- Fields that are of type Subject or BehaviorSubject should have names that end with a `$`.
 
 # Code
 
 - All code that you write should be able to pass eslint linting tests for TypeScript, or csharpier for C#.
 - Don't merely write code for the local context, but make changes that are good overall considering the architecture of the application and structure of the files and classes.
+- It is better to write code that is verbose and understandable than terse and concise.
+- It is better to explicitly check for and handle problems, or prevent problems from happening, than to assume problems will not happen.
+- Corner-cases happen. They should be handled in code.
 
 # Running commands
 
 - If you run frontend tests, run them in the `src/SIL.XForge.Scripture/ClientApp` directory with a command such as `npm run test:headless -- --watch=false --include '**/text.component.spec.ts' --include '**/settings.component.spec.ts'`
+- If you need to run all frontend tests, you can run them in the `src/SIL.XForge.Scripture/ClientApp` directory with command `npm run test:headless -- --watch=false`

src/SIL.XForge.Scripture/ClientApp/src/app/core/sf-project.service.ts

@@ -360,18 +360,18 @@ export class SFProjectService extends ProjectService<SFProject, SFProjectDoc> {
   async onlineAllEventMetricsForConstructingDraftJobs(
     eventTypes: string[],
     projectId?: string,
-    daysBack?: number
+    startDate?: Date,
+    endDate?: Date
   ): Promise<QueryResults<EventMetric> | undefined> {
     const params: any = {
       projectId: projectId ?? null,
       scopes: [3], // Drafting scope
       eventTypes
     };
 
-    if (daysBack != null) {
-      const fromDate = new Date();
-      fromDate.setDate(fromDate.getDate() - daysBack);
-      params.fromDate = fromDate.toISOString();
+    if (startDate != null && endDate != null) {
+      params.fromDate = startDate.toISOString();
+      params.toDate = endDate.toISOString();
     }
 
     return await this.onlineInvoke<QueryResults<EventMetric>>('eventMetrics', params);

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/_draft-jobs-theme.scss

@@ -7,6 +7,8 @@
   --sf-draft-jobs-project-link-color: #{mat.get-theme-color($theme, primary, if($is-dark, 70, 40))};
   --sf-draft-jobs-book-count-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 70, 40))};
   --sf-draft-jobs-disabled-link-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 50, 50))};
+  --sf-draft-jobs-statistics-background: #{mat.get-theme-color($theme, neutral-variant, if($is-dark, 30, 90))};
+  --sf-draft-jobs-statistics-text: #{mat.get-theme-color($theme, on-surface)};
 }
 
 @mixin theme($theme) {

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.html

@@ -0,0 +1,21 @@
+<mat-form-field class="date-range-field">
+  <mat-label>Date range</mat-label>
+  <mat-date-range-input [formGroup]="dateRangeForm" [rangePicker]="dateRangePicker" [dateFilter]="disableFutureDates">
+    <input matStartDate matInput formControlName="start" [max]="maxSelectableDate" placeholder="Start date" />
+    <input matEndDate matInput formControlName="end" [max]="maxSelectableDate" placeholder="End date" />
+  </mat-date-range-input>
+  <mat-datepicker-toggle matIconSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
+  <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
+  @if (dateRangeFormatHint != null) {
+    <mat-hint align="start" class="date-format-hint">{{ dateRangeFormatHint }}</mat-hint>
+  }
+  @if (dateRangeForm.get("start")?.hasError("futureDate")) {
+    <mat-error>Start date cannot be in the future.</mat-error>
+  }
+  @if (dateRangeForm.get("end")?.hasError("futureDate")) {
+    <mat-error>End date cannot be in the future.</mat-error>
+  }
+  @if (dateRangeForm.invalid) {
+    <mat-error>Select a valid date range ending no later than today.</mat-error>
+  }
+</mat-form-field>

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.scss

@@ -0,0 +1,3 @@
+.date-range-field {
+  min-width: 260px;
+}

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.spec.ts

@@ -0,0 +1,100 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { DateAdapter, provideNativeDateAdapter } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BehaviorSubject } from 'rxjs';
+import { I18nService } from 'xforge-common/i18n.service';
+import { Locale } from 'xforge-common/models/i18n-locale';
+import { DateRangePickerComponent } from './date-range-picker.component';
+
+describe('DateRangePickerComponent', () => {
+  it('should initialize with default date range', () => {
+    const env = new TestEnvironment();
+    env.fixture.detectChanges();
+    const formValue = env.component.dateRangeForm.value;
+    expect(formValue.start).toBeTruthy();
+    expect(formValue.end).toBeTruthy();
+    expect(formValue.start!.getTime()).toBeLessThan(formValue.end!.getTime());
+  });
+
+  it('should disable future dates', () => {
+    const env = new TestEnvironment();
+    const today = new Date();
+    const tomorrow = new Date(today);
+    tomorrow.setDate(today.getDate() + 1);
+
+    expect(env.component.disableFutureDates(today)).toBe(true);
+    expect(env.component.disableFutureDates(tomorrow)).toBe(false);
+  });
+
+  it('should show format hint for locale', () => {
+    const env = new TestEnvironment();
+    env.fixture.detectChanges();
+    expect(env.component.dateRangeFormatHint).toBeDefined();
+  });
+
+  describe('date adapter localization', () => {
+    it('should mirror i18n locale changes in the date adapter', () => {
+      const env = new TestEnvironment();
+      const dateAdapter = TestBed.inject(DateAdapter);
+      spyOn(dateAdapter, 'setLocale');
+
+      const updatedLocale: Locale = {
+        canonicalTag: 'fr',
+        direction: 'ltr',
+        englishName: 'French',
+        localName: 'Français',
+        production: true,
+        tags: ['fr']
+      };
+
+      env.localeSubject.next(updatedLocale);
+
+      expect(dateAdapter.setLocale).toHaveBeenCalledWith('fr');
+    });
+  });
+});
+
+class TestEnvironment {
+  readonly localeSubject: BehaviorSubject<Locale>;
+  readonly i18nStub: Partial<I18nService>;
+  readonly fixture: ComponentFixture<DateRangePickerComponent>;
+  readonly component: DateRangePickerComponent;
+
+  constructor() {
+    const initialLocale: Locale = {
+      canonicalTag: 'en-US',
+      direction: 'ltr',
+      englishName: 'English',
+      localName: 'English',
+      production: true,
+      tags: ['en-US']
+    };
+
+    this.localeSubject = new BehaviorSubject<Locale>(initialLocale);
+
+    this.i18nStub = {
+      localeCode: 'en-US',
+      locale$: this.localeSubject.asObservable()
+    };
+
+    TestBed.configureTestingModule({
+      imports: [
+        DateRangePickerComponent,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatDatepickerModule,
+        NoopAnimationsModule
+      ],
+      providers: [provideNativeDateAdapter(), FormBuilder, { provide: I18nService, useValue: this.i18nStub }]
+    }).compileComponents();
+
+    this.fixture = TestBed.createComponent(DateRangePickerComponent);
+    this.component = this.fixture.componentInstance;
+    this.fixture.detectChanges();
+  }
+}