Merge pull request #2633 from bcgov/2475-add-chronology-entry-qa-1

2475: Add chronology entry QA 1

Author: trslater

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

@@ -11,6 +11,7 @@
   border: 1px solid colors.$grey;
   border-radius: 8px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
 }
 
 .no-entries {

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

@@ -41,7 +41,6 @@ export class ComplianceAndEnforcementChronologyComponent implements OnInit, Afte
     allowsFileEdit: true,
     allowedDocumentSources: Object.values(DOCUMENT_SOURCE),
     allowedDocumentTypes: Object.values(DOCUMENT_TYPE),
-    defaultDocumentSource: DOCUMENT_SOURCE.PUBLIC,
     defaultDocumentType: DOCUMENT_TYPE.CORRESPONDENCE_FROM_PUBLIC,
   };
 

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

@@ -15,7 +15,7 @@
           <mat-datepicker #datePicker type="date"></mat-datepicker>
         </mat-form-field>
 
-        <div *ngIf="date.errors">
+        <div *ngIf="showErrors && date.errors">
           <app-error-message *ngIf="date.errors['required']" message="This field is required"></app-error-message>
           <app-error-message *ngIf="date.errors['dateInUse']" message="Date is already in use"></app-error-message>
         </div>
@@ -44,7 +44,7 @@
             <textarea matInput formControlName="description" rows="3"></textarea>
           </mat-form-field>
 
-          <div *ngIf="description.touched && description.errors">
+          <div *ngIf="showErrors && description.errors">
             <app-error-message
               *ngIf="description.errors['required']"
               message="This field is required"
@@ -54,7 +54,7 @@
       </ng-container>
 
       <ng-template #descriptionViewTemplate>
-        <div>{{ entry?.description }}</div>
+        <div class="description-view">{{ entry?.description }}</div>
       </ng-template>
 
       <div *ngIf="entry?.isDraft" class="c-and-e-action-list">
@@ -96,13 +96,8 @@
           mat-flat-button
           color="primary"
           type="button"
-          [disabled]="!entry?.uuid || !form.valid"
-          (click)="
-            complete.emit({
-              uuid: entry?.uuid!,
-              updateDto: dtoFromForm(),
-            })
-          "
+          [disabled]="!entry?.uuid"
+          (click)="onCompleteButtonClick()"
         >
           Complete
         </button>

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

@@ -64,6 +64,10 @@ form {
   flex-direction: column;
 }
 
+.description-view {
+  white-space: pre-line;
+}
+
 .c-and-e-action-list {
   .no-data {
     color: colors.$grey;

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

@@ -49,6 +49,8 @@ export class ComplianceAndEnforcementChronologyEntryComponent implements OnInit,
   isPatching = false;
   isSubscribed = false;
 
+  showErrors = false;
+
   date: FormControl<moment.Moment | null> = new FormControl<moment.Moment | null>(null, [
     Validators.required,
     this.dateInUseValidator.bind(this),
@@ -119,6 +121,21 @@ export class ComplianceAndEnforcementChronologyEntryComponent implements OnInit,
     return !control.value || !this.datesInUse?.includes(control.value.toDate().getTime()) ? null : { dateInUse: true };
   }
 
+  onCompleteButtonClick(): void {
+    if (this.form.invalid) {
+      this.date.markAsTouched();
+      this.description.markAsTouched();
+      this.showErrors = true;
+      return;
+    }
+    this.showErrors = false;
+
+    this.complete.emit({
+      uuid: this.entry?.uuid!,
+      updateDto: this.dtoFromForm(),
+    });
+  }
+
   ngOnDestroy(): void {
     this.$destroy.next();
     this.$destroy.complete();