Merge pull request #2045 from bcgov/feature/ALCS-2351

Add Tags and File Status to Commissioner View

Author: Abradat

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

@@ -1,6 +1,13 @@
 <div class="layout">
   <div class="application">
-    <app-details-header [application]="application" heading="Application" days="Business Days"></app-details-header>
+    <app-details-header
+      [application]="application"
+      heading="Application"
+      days="Business Days"
+      [isTagSectionHidden]="false"
+      [submissionStatusService]="applicationStatusService"
+      [showStatus]="true"
+    ></app-details-header>
     <section class="content">
       <app-commissioner-decisions
         *ngIf="application?.decisions"

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

@@ -5,14 +5,17 @@ import { createMock, DeepMocked } from '@golevelup/ts-jest';
 import { CommissionerService } from '../../../services/commissioner/commissioner.service';
 
 import { CommissionerApplicationComponent } from './commissioner-application.component';
+import { ApplicationSubmissionStatusService } from '../../../services/application/application-submission-status/application-submission-status.service';
 
 describe('CommissionerApplicationComponent', () => {
   let component: CommissionerApplicationComponent;
   let fixture: ComponentFixture<CommissionerApplicationComponent>;
   let mockCommissionerService: DeepMocked<CommissionerService>;
+  let mockApplicationSubmissionStatusService: DeepMocked<ApplicationSubmissionStatusService>;
 
   beforeEach(async () => {
     mockCommissionerService = createMock();
+    mockApplicationSubmissionStatusService = createMock();
 
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule],
@@ -22,6 +25,10 @@ describe('CommissionerApplicationComponent', () => {
           provide: CommissionerService,
           useValue: mockCommissionerService,
         },
+        {
+          provide: ApplicationSubmissionStatusService,
+          useValue: mockApplicationSubmissionStatusService,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();

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

@@ -6,11 +6,15 @@ import { DOCUMENT_TYPE } from '../../../shared/document/document.dto';
 import { environment } from '../../../../environments/environment';
 import { CommissionerApplicationDto } from '../../../services/commissioner/commissioner.dto';
 import { CommissionerService } from '../../../services/commissioner/commissioner.service';
+import { FileTagService } from '../../../services/common/file-tag.service';
+import { ApplicationTagService } from '../../../services/application/application-tag/application-tag.service';
+import { ApplicationSubmissionStatusService } from '../../../services/application/application-submission-status/application-submission-status.service';
 
 @Component({
   selector: 'app-commissioner-application',
   templateUrl: './commissioner-application.component.html',
   styleUrls: ['./commissioner-application.component.scss'],
+  providers: [{ provide: FileTagService, useClass: ApplicationTagService }],
 })
 export class CommissionerApplicationComponent implements OnInit, OnDestroy {
   destroy = new Subject<void>();
@@ -20,6 +24,7 @@ export class CommissionerApplicationComponent implements OnInit, OnDestroy {
 
   constructor(
     private commissionerService: CommissionerService,
+    public applicationStatusService: ApplicationSubmissionStatusService,
     private route: ActivatedRoute,
     private titleService: Title,
   ) {}

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

@@ -43,7 +43,11 @@ <h5 class="detail-heading">
         </div>
       </div>
       <div class="tag-container">
-        <app-tags-header [application]="_application" *ngIf="!isTagSectionHidden"></app-tags-header>
+        <app-tags-header [application]="_application" *ngIf="!isTagSectionHidden && !isCommissioner"></app-tags-header>
+        <app-commissioner-tags-header
+          [application]="_application"
+          *ngIf="!isTagSectionHidden && isCommissioner"
+        ></app-commissioner-tags-header>
       </div>
     </div>
   </div>

alcs-frontend/src/app/shared/shared.module.ts

@@ -78,6 +78,7 @@ import { TagsHeaderComponent } from './tags/tags-header/tags-header.component';
 import { MatChipsModule } from '@angular/material/chips';
 import { TagChipComponent } from './tags/tag-chip/tag-chip.component';
 import { DomSanitizer } from '@angular/platform-browser';
+import { CommissionerTagsHeaderComponent } from './tags/commissioner-tags-header/commissioner-tags-header.component';
 
 @NgModule({
   declarations: [
@@ -121,6 +122,7 @@ import { DomSanitizer } from '@angular/platform-browser';
     TruncatePipe,
     TagsHeaderComponent,
     TagChipComponent,
+    CommissionerTagsHeaderComponent,
   ],
   imports: [
     CommonModule,

alcs-frontend/src/app/shared/tags/commissioner-tags-header/commissioner-tags-header.component.html

@@ -0,0 +1,8 @@
+<div
+  class="tag-container"
+  [ngClass]="{ hovered: hovered, clicked: clicked }"
+  (mouseleave)="hovered = false"
+  (mouseenter)="hovered = true"
+>
+  <app-tag-chip *ngFor="let tag of tags" [tag]="tag" [removable]="false"></app-tag-chip>
+</div>

alcs-frontend/src/app/shared/tags/commissioner-tags-header/commissioner-tags-header.component.scss

@@ -0,0 +1,20 @@
+.tag-container {
+  width: 100%;
+  margin-left: -10px;
+  margin-top: -5px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 5px;
+
+  &.hovered {
+    border: 1px solid #aaaaaa;
+  }
+
+  &.clicked {
+    border: 1px solid #929292;
+  }
+}
+
+.category {
+  color: #a0a0a0;
+}

alcs-frontend/src/app/shared/tags/commissioner-tags-header/commissioner-tags-header.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommissionerTagsHeaderComponent } from './commissioner-tags-header.component';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { FileTagService } from '../../../services/common/file-tag.service';
+
+describe('CommissionerTagsHeaderComponent', () => {
+  let component: CommissionerTagsHeaderComponent;
+  let fixture: ComponentFixture<CommissionerTagsHeaderComponent>;
+  let mockFileTagService: DeepMocked<FileTagService>;
+
+  beforeEach(async () => {
+    mockFileTagService = createMock();
+
+    await TestBed.configureTestingModule({
+      declarations: [CommissionerTagsHeaderComponent],
+      providers: [
+        {
+          provide: FileTagService,
+          useValue: mockFileTagService,
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CommissionerTagsHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alcs-frontend/src/app/shared/tags/commissioner-tags-header/commissioner-tags-header.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { TagDto } from '../../../services/tag/tag.dto';
+import { FileTagService } from '../../../services/common/file-tag.service';
+import { ApplicationDto } from '../../../services/application/application.dto';
+import { CommissionerApplicationDto } from '../../../services/commissioner/commissioner.dto';
+import { NoticeOfIntentDto } from '../../../services/notice-of-intent/notice-of-intent.dto';
+import { NotificationDto } from '../../../services/notification/notification.dto';
+
+@Component({
+  selector: 'app-commissioner-tags-header',
+  templateUrl: './commissioner-tags-header.component.html',
+  styleUrl: './commissioner-tags-header.component.scss',
+})
+export class CommissionerTagsHeaderComponent implements OnInit, OnChanges {
+  tags: TagDto[] = [];
+
+  hovered = false;
+  clicked = false;
+
+  @Input() application: ApplicationDto | CommissionerApplicationDto | NoticeOfIntentDto | NotificationDto | undefined;
+  @Input() isHidden: boolean = false;
+
+  constructor(private fileTagService: FileTagService) {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['application'] && changes['application'].currentValue !== undefined) {
+      this.initFileTags();
+    }
+  }
+  async initFileTags() {
+    const res = await this.fileTagService.getTags(this.application?.fileNumber!);
+    this.tags = res!;
+  }
+}

alcs-frontend/src/app/shared/tags/tag-chip/tag-chip.component.html

@@ -1,6 +1,6 @@
-<mat-chip-row (removed)="onRemove()"
+<mat-chip-row (removed)="onRemove()" [ngClass]="{ removable: !removable }"
   >{{ tag.name }}
-  <button matChipRemove [attr.aria-label]="'remove ' + tag">
+  <button matChipRemove [attr.aria-label]="'remove ' + tag" *ngIf="removable">
     <mat-icon svgIcon="cancel_filled"></mat-icon>
   </button>
 </mat-chip-row>