Merge pull request #2499 from bcgov/2416-create-complaint-referral-tab-from-submission-qa-1

2416 QA 1: Fix cancel button, fix overview edit title, add anonymous template

Author: trslater

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

@@ -46,7 +46,7 @@ const routes: Routes = [
   {
     path: ':fileNumber',
     component: ComplianceAndEnforcementComponent,
-    children: detailsRoutes.concat([]),
+    children: detailsRoutes,
   },
   {
     path: ':fileNumber/draft',

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

@@ -25,11 +25,12 @@
 <ng-container *ngIf="editing === 'overview'">
   <form [formGroup]="form">
     <section class="form-section">
+      <h3>Overview / Referral > Edit Overview</h3>
       <app-compliance-and-enforcement-overview #overviewComponent [parentForm]="form" [file]="file" />
     </section>
 
     <div class="button-container">
-      <a mat-flat-button [routerLink]="'../..'">Cancel</a>
+      <a mat-stroked-button color="warn" [routerLink]="'../..'">Cancel</a>
       <button mat-flat-button color="primary" (click)="save()">Save</button>
     </div>
   </form>

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

@@ -34,3 +34,9 @@ section.file-section {
   font-weight: 700 !important;
   text-transform: uppercase;
 }
+
+a[mat-stroked-button] {
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  text-transform: uppercase;
+}

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/overview/overview.component.scss

@@ -7,7 +7,7 @@
 .inset {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  gap: 24px;
 
   background-color: colors.$grey-light;
   padding: 24px;
@@ -16,7 +16,6 @@
 
 .field {
   width: 100%;
-  margin-bottom: 16px;
 
   &.full-width {
     grid-column: span 2;

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/submitters/submitters.component.html

@@ -5,41 +5,51 @@ <h3>Submitters</h3>
 </ng-template>
 
 <div class="inset" *ngFor="let submitter of submitters">
-  <div class="header">
-    <h4>{{ submitter.name }}</h4>
+  <ng-container *ngIf="!submitter.isAnonymous; else anonymous">
+    <div class="header">
+      <h4>{{ submitter.name }}</h4>
 
-    <div class="date-added">Added: {{ formatDate(submitter.dateAdded) }}</div>
-  </div>
+      <div class="date-added">Added: {{ formatDate(submitter.dateAdded) }}</div>
+    </div>
 
-  <div class="field">
-    <div class="field-heading">Email</div>
+    <div class="field">
+      <div class="field-heading">Email</div>
 
-    <ng-container *ngIf="submitter.email; else noData">
-      {{ submitter.email }}
-    </ng-container>
-  </div>
+      <ng-container *ngIf="submitter.email; else noData">
+        {{ submitter.email }}
+      </ng-container>
+    </div>
 
-  <div class="field">
-    <div class="field-heading">Telephone</div>
+    <div class="field">
+      <div class="field-heading">Telephone</div>
 
-    <ng-container *ngIf="submitter.telephoneNumber; else noData">
-      {{ submitter.telephoneNumber | mask: '(000) 000-0000' }}
-    </ng-container>
-  </div>
+      <ng-container *ngIf="submitter.telephoneNumber; else noData">
+        {{ submitter.telephoneNumber | mask: '(000) 000-0000' }}
+      </ng-container>
+    </div>
 
-  <div class="field">
-    <div class="field-heading">Affiliation</div>
+    <div class="field">
+      <div class="field-heading">Affiliation</div>
 
-    <ng-container *ngIf="submitter.affiliation; else noData">
-      {{ submitter.affiliation }}
-    </ng-container>
-  </div>
+      <ng-container *ngIf="submitter.affiliation; else noData">
+        {{ submitter.affiliation }}
+      </ng-container>
+    </div>
 
-  <div class="field">
-    <div class="field-heading">Additional Contact Information</div>
+    <div class="field">
+      <div class="field-heading">Additional Contact Information</div>
 
-    <ng-container *ngIf="submitter.additionalContactInformation; else noData">
-      {{ submitter.additionalContactInformation }}
-    </ng-container>
-  </div>
+      <ng-container *ngIf="submitter.additionalContactInformation; else noData">
+        {{ submitter.additionalContactInformation }}
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <ng-template #anonymous>
+    <div class="header">
+      <h4>Anonymous</h4>
+
+      <div class="date-added">Added: {{ formatDate(submitter.dateAdded) }}</div>
+    </div>
+  </ng-template>
 </div>

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/submitters/submitters.component.scss

@@ -7,7 +7,7 @@
 .inset {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  gap: 24px;
 
   background-color: colors.$grey-light;
   padding: 24px;
@@ -18,13 +18,15 @@
     justify-content: space-between;
     align-items: center;
     grid-column: span 2;
-    margin-bottom: 24px;
+
+    // &:has(+ *) {
+    //   margin-bottom: 24px;
+    // }
   }
 }
 
 .field {
   width: 100%;
-  margin-bottom: 16px;
 
   &.full-width {
     grid-column: span 2;

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

@@ -3,7 +3,10 @@ <h2>C&E File ID: {{ file?.fileNumber }}</h2>
 
   <form [formGroup]="form">
     <section class="form-section">
-      <app-compliance-and-enforcement-overview #overviewComponent [parentForm]="form" [file]="file" />
+      <div>
+        <h3>Overview</h3>
+        <app-compliance-and-enforcement-overview #overviewComponent [parentForm]="form" [file]="file" />
+      </div>
       <app-compliance-and-enforcement-submitter
         #submitterComponent
         [parentForm]="form"

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

@@ -1,5 +1,3 @@
-<h3>Overview</h3>
-
 <form [formGroup]="form">
   <mat-form-field appearance="outline" class="date-picker">
     <mat-label>Date Submitted</mat-label>