Merge pull request #2622 from bcgov/2475-add-chronology-entry

2475: Setup chronology backend, tab, and initial features

Author: trslater

alcs-frontend/package-lock.json

@@ -19,6 +19,9 @@ import { PropertyComponent } from './property/property.component';
 import { ResponsiblePartiesComponent } from './responsible-parties/responsible-parties.component';
 import { SubmitterComponent } from './submitter/submitter.component';
 import { ComplianceAndEnforcementAssignDialogComponent } from './details/header/assign-dialog/assign-dialog.component';
+import { ComplianceAndEnforcementChronologyComponent } from './details/chronology/chronology.component';
+import { ComplianceAndEnforcementChronologyEntryComponent } from './details/chronology/entry/entry.component';
+import { ComplianceAndEnforcementChronologyEntryDocumentsComponent } from './details/chronology/entry/documents/documents.component';
 
 export const detailsRoutes: (Route & { icon?: string; menuTitle?: string })[] = [
   {
@@ -83,6 +86,13 @@ export const detailsRoutes: (Route & { icon?: string; menuTitle?: string })[] =
       },
     ],
   },
+  {
+    path: 'chronology',
+    icon: 'view_timeline',
+    menuTitle: 'Chronology',
+    component: ComplianceAndEnforcementChronologyComponent,
+    data: { editing: null },
+  },
 ];
 
 const routes: Routes = [
@@ -115,6 +125,9 @@ const routes: Routes = [
     PropertyMapsComponent,
     ResponsiblePartiesDetailsComponent,
     ComplianceAndEnforcementAssignDialogComponent,
+    ComplianceAndEnforcementChronologyComponent,
+    ComplianceAndEnforcementChronologyEntryComponent,
+    ComplianceAndEnforcementChronologyEntryDocumentsComponent,
   ],
   imports: [SharedModule.forRoot(), RouterModule.forChild(routes), MatMomentDateModule, CommonModule, SharedModule],
 })

alcs-frontend/src/app/features/compliance-and-enforcement/compliance-and-enforcement.module.ts

@@ -0,0 +1,34 @@
+<div class="actions">
+  <button *ngIf="entries.length > 0" mat-stroked-button color="primary" type="button" [disabled]="hasDraftEntries()">
+    Close Chronology
+  </button>
+
+  <button mat-flat-button color="primary" type="button" (click)="createDraftEntry()" [disabled]="hasDraftEntries()">
+    + Chronology Entry
+  </button>
+</div>
+
+<div *ngIf="entries.length > 0; else noEntries" class="entries">
+  <app-compliance-and-enforcement-chronology-entry
+    *ngFor="let entry of entries"
+    [entry]="entry"
+    [datesInUse]="datesInUse(entry.uuid)"
+    [editDisabled]="hasDraftEntries()"
+    (edit)="setDraft($event)"
+    (complete)="completeDraftEntry($event)"
+    (delete)="confirmEntryDelete($event)"
+    (addCorrespondence)="openAddCorrespondenceDialog($event)"
+  >
+    <app-compliance-and-enforcement-chronology-entry-documents
+      *ngIf="entry.isDraft || entry?.documents?.length"
+      [isDraft]="entry.isDraft"
+      [documents]="entry.documents"
+      (edit)="openEditDocumentDialog($event)"
+      (delete)="confirmDocumentDelete($event)"
+    />
+  </app-compliance-and-enforcement-chronology-entry>
+</div>
+
+<ng-template #noEntries>
+  <div class="no-entries">No chronology entries</div>
+</ng-template>

alcs-frontend/src/app/features/compliance-and-enforcement/details/chronology/chronology.component.html

@@ -0,0 +1,18 @@
+@use '../../../../../styles/colors';
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.entries {
+  border: 1px solid colors.$grey;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.no-entries {
+  text-align: center;
+}

alcs-frontend/src/app/features/compliance-and-enforcement/details/chronology/chronology.component.scss

@@ -0,0 +1,59 @@
+import { ComplianceAndEnforcementService } from '../../../../services/compliance-and-enforcement/compliance-and-enforcement.service';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComplianceAndEnforcementChronologyComponent } from './chronology.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastService } from '../../../../services/toast/toast.service';
+import { HttpClient } from '@angular/common/http';
+
+describe('ComplianceAndEnforcementChronologyComponent', () => {
+  let component: ComplianceAndEnforcementChronologyComponent;
+  let fixture: ComponentFixture<ComplianceAndEnforcementChronologyComponent>;
+  let mockActivatedRoute: DeepMocked<ActivatedRoute>;
+  let mockRouter: DeepMocked<Router>;
+  let mockService: DeepMocked<ComplianceAndEnforcementService>;
+  let mockToastService: DeepMocked<ToastService>;
+  let mockHttpClient: DeepMocked<HttpClient>;
+
+  beforeEach(async () => {
+    mockActivatedRoute = createMock<ActivatedRoute>();
+    mockRouter = createMock<Router>();
+    mockService = createMock<ComplianceAndEnforcementService>();
+    mockToastService = createMock<ToastService>();
+    mockHttpClient = createMock<HttpClient>();
+
+    TestBed.configureTestingModule({
+      imports: [],
+      declarations: [ComplianceAndEnforcementChronologyComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: mockActivatedRoute,
+        },
+        {
+          provide: Router,
+          useValue: mockRouter,
+        },
+        {
+          provide: ComplianceAndEnforcementService,
+          useValue: mockService,
+        },
+        {
+          provide: ToastService,
+          useValue: mockToastService,
+        },
+        {
+          provide: HttpClient,
+          useValue: mockHttpClient,
+        },
+      ],
+    });
+
+    fixture = TestBed.createComponent(ComplianceAndEnforcementChronologyComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});