Merge pull request #1787 from bcgov/feature/ALCS-2043

Make applicant editable and change label

alcs-frontend/src/app/features/application/application.component.html

@@ -6,6 +6,8 @@
       [reconsiderations]="reconsiderations"
       [showStatus]="true"
       [submissionStatusService]="applicationStatusService"
+      [applicationDetailService]="applicationDetailService"
+      [applicationSubmissionService]="applicationSubmissionService"
       days="Business Days"
       heading="Application"
     ></app-details-header>

alcs-frontend/src/app/features/application/application.component.ts

@@ -188,8 +188,8 @@ export class ApplicationComponent implements OnInit, OnDestroy {
   showSubmittedToLfngMenuItems = false;
 
   constructor(
-    private applicationDetailService: ApplicationDetailService,
-    private applicationSubmissionService: ApplicationSubmissionService,
+    public applicationDetailService: ApplicationDetailService,
+    public applicationSubmissionService: ApplicationSubmissionService,
     private reconsiderationService: ApplicationReconsiderationService,
     private modificationService: ApplicationModificationService,
     private route: ActivatedRoute,

alcs-frontend/src/app/features/search/application-search-table/application-search-table.component.html

@@ -24,7 +24,7 @@
     </ng-container>
 
     <ng-container matColumnDef="ownerName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Owner Name</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
       <td mat-cell *matCellDef="let element">
         {{ element.ownerName | emptyColumn }}
       </td>

alcs-frontend/src/app/services/application/application.dto.ts

@@ -96,6 +96,7 @@ export interface ApplicationParcelDto {
 
 export interface UpdateApplicationSubmissionDto {
   subProposedLots?: ProposedLot[];
+  applicant?: string;
 }
 
 export interface ApplicationSubmissionDto {

alcs-frontend/src/app/shared/details-header/details-header.component.html

@@ -4,7 +4,19 @@
   </div>
   <div *ngIf="_application" class="first-row">
     <div class="title">
-      <h5>{{ _application.fileNumber }} ({{ applicant }})</h5>
+      <h5 class="detail-heading">
+        <div class="file-number">{{ _application.fileNumber }}</div>
+        <div class="open-paren">(</div>
+        <app-inline-text
+          *ngIf="applicationDetailService"
+          (save)="onSaveApplicant($event ?? undefined)"
+          [value]="_application.applicant"
+          [required]="true"
+          [isFixedHeight]="true"
+          class="applicant-inline-field"
+        /><ng-container *ngIf="!applicationDetailService">{{ _application.applicant }}</ng-container>
+        <div class="close-paren">)</div>
+      </h5>
       <app-application-legacy-id [legacyId]="legacyId"></app-application-legacy-id>
       <div class="labels">
         <app-application-type-pill *ngFor="let type of types" [type]="type"></app-application-type-pill>

alcs-frontend/src/app/shared/details-header/details-header.component.scss

@@ -64,3 +64,12 @@
   flex-direction: row-reverse;
   align-items: flex-end;
 }
+
+.detail-heading {
+  display: flex;
+  align-items: center;
+
+  .file-number {
+    margin-right: 8px;
+  }
+}

alcs-frontend/src/app/shared/details-header/details-header.component.ts

@@ -21,6 +21,8 @@ import {
   RETROACTIVE_TYPE_LABEL,
 } from '../application-type-pill/application-type-pill.constants';
 import { TimeTrackable } from '../time-tracker/time-tracker.component';
+import { ApplicationDetailService } from '../../services/application/application-detail.service';
+import { ApplicationSubmissionService } from '../../services/application/application-submission/application-submission.service';
 
 @Component({
   selector: 'app-details-header[application]',
@@ -38,23 +40,21 @@ export class DetailsHeaderComponent {
     | NoticeOfIntentSubmissionStatusService
     | NotificationSubmissionStatusService;
 
+  @Input() applicationDetailService?: ApplicationDetailService;
+  @Input() applicationSubmissionService?: ApplicationSubmissionService;
+
   legacyId?: string;
 
   _application: ApplicationDto | CommissionerApplicationDto | NoticeOfIntentDto | NotificationDto | undefined;
   types: ApplicationTypeDto[] | NoticeOfIntentTypeDto[] = [];
   timeTrackable?: TimeTrackable;
-  applicant?: string;
 
   @Input() set application(
     application: ApplicationDto | CommissionerApplicationDto | NoticeOfIntentDto | NotificationDto | undefined,
   ) {
     if (application) {
       this._application = application;
 
-      if ('applicant' in application) {
-        this.applicant = application.applicant;
-      }
-
       if ('retroactive' in application) {
         this.isNOI = true;
       }
@@ -161,4 +161,11 @@ export class DetailsHeaderComponent {
 
     this.linkedCards = result;
   }
+
+  async onSaveApplicant(applicant: string | undefined) {
+    if (this._application?.fileNumber) {
+      await this.applicationDetailService?.updateApplication(this._application?.fileNumber, { applicant });
+      await this.applicationSubmissionService?.update(this._application?.fileNumber, { applicant });
+    }
+  }
 }

alcs-frontend/src/app/shared/inline-editors/inline-text/inline-text.component.html

@@ -1,4 +1,4 @@
-<div class="inline-number-wrapper">
+<div class="inline-number-wrapper" [ngClass]="{ 'fixed-height': isFixedHeight }">
   <span class="left" *ngIf="!isEditing">
     <a (click)="startEdit()" class="add" *ngIf="!value"> Add text </a>
     <span *ngIf="value && !mask">
@@ -18,7 +18,7 @@
     }"
   >
     <form>
-      <mat-form-field appearance="outline">
+      <mat-form-field [appearance]="isFixedHeight ? 'fill' : 'outline'">
         <input
           matInput
           class="editable"

alcs-frontend/src/app/shared/inline-editors/inline-text/inline-text.component.scss

@@ -2,14 +2,33 @@
 
 .inline-number-wrapper {
   padding-top: 4px;
-}
 
-.editing {
-  display: inline-block;
+  &.fixed-height {
+    padding-top: 0;
+
+    .editing {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  .editing.hidden {
+    display: none;
+  }
 }
 
-.editing.hidden {
-  display: none;
+::ng-deep {
+  .inline-number-wrapper .editing {
+    .mat-mdc-form-field-infix {
+      padding: 0 !important;
+      min-height: 0 !important;
+    }
+
+    .mdc-text-field {
+      padding-inline: 8px;
+    }
+  }
 }
 
 .edit-button {

alcs-frontend/src/app/shared/inline-editors/inline-text/inline-text.component.ts

@@ -22,6 +22,7 @@ export class InlineTextComponent implements AfterContentChecked, OnInit {
   @Input() placeholder: string = 'Enter a value';
   @Input() required = false;
   @Input() isEmail = false;
+  @Input() isFixedHeight = false;
   @Output() save = new EventEmitter<string | null>();
   @Input() mask?: string | undefined;
   @Input() maxLength: number | null = null;

portal-frontend/src/app/features/home/inbox/inbox-table/inbox-table.component.html

@@ -33,7 +33,7 @@
       </ng-container>
 
       <ng-container matColumnDef="applicant">
-        <th mat-header-cell *matHeaderCellDef>{{ type === 'Notifications' ? 'Transferee' : 'Owner Name' }}</th>
+        <th mat-header-cell *matHeaderCellDef>{{ type === 'Notifications' ? 'Transferee' : 'Name' }}</th>
         <td mat-cell *matCellDef="let row">{{ row.ownerName || '(Unknown)' }}</td>
       </ng-container>
 

portal-frontend/src/app/features/public/search/application-search-table/application-search-table.component.html

@@ -17,7 +17,7 @@
     </ng-container>
 
     <ng-container matColumnDef="ownerName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Owner Name</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
       <td mat-cell *matCellDef="let element">
         {{ element.ownerName | emptyColumn }}
       </td>

services/apps/alcs/src/alcs/application/application-submission/application-submission.dto.ts

@@ -9,4 +9,8 @@ export class AlcsApplicationSubmissionUpdateDto {
   @IsString()
   @IsOptional()
   returnComment?: string;
+
+  @IsString()
+  @IsOptional()
+  applicant?: string;
 }

services/apps/alcs/src/alcs/application/application-submission/application-submission.service.ts

@@ -121,6 +121,10 @@ export class ApplicationSubmissionService {
       updateDto.returnComment,
       submission.returnedToLfngComment,
     );
+    submission.applicant = filterUndefined(
+      updateDto.applicant,
+      submission.applicant,
+    );
 
     await this.applicationSubmissionRepository.save(submission);
   }

services/templates/emails/partials/header.template.ts

@@ -4,7 +4,7 @@ export const header = `
   <mj-section background-color="white" padding="40px 0px 0px 0px">
     <mj-column width="400px">
       <mj-text font-size="21px"><b>{{ parentTypeLabel }} ID #{{fileNumber}}</b></mj-text>
-      <mj-text font-size="15px">Owner Name: <b>{{applicantName}}</b></mj-text>
+      <mj-text font-size="15px">Name: <b>{{applicantName}}</b></mj-text>
       <mj-text font-size="15px">Status: <b>{{status}}</b></mj-text>
     </mj-column>
     <mj-column width="200px">