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

Add Tags and File Status to Commissioner View

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>

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

@@ -4,3 +4,7 @@ mat-chip-row {
   border: 1px solid;
   background-color: #f3f3f3 !important;
 }
+
+.removable {
+  margin: 4px;
+}

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

@@ -8,6 +8,7 @@ import { TagDto } from '../../../services/tag/tag.dto';
 })
 export class TagChipComponent {
   @Input() tag!: TagDto;
+  @Input() removable: boolean = true;
   @Output() removeClicked = new EventEmitter<TagDto>();
 
   onRemove() {

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

@@ -50,7 +50,6 @@ export class TagsHeaderComponent implements OnInit, OnChanges {
   @ViewChild(MatAutocompleteTrigger) autoCompleteTrigger!: MatAutocompleteTrigger;
 
   @Input() application: ApplicationDto | CommissionerApplicationDto | NoticeOfIntentDto | NotificationDto | undefined;
-  @Input() service: FileTagService | undefined;
   @Input() isHidden: boolean = false;
 
   constructor(

services/apps/alcs/src/alcs/application/application-tag/application-tag.controller.ts

@@ -16,7 +16,7 @@ import * as config from 'config';
 import { ApplicationTagService } from './application-tag.service';
 import { ApplicationTagDto } from './application-tag.dto';
 import { UserRoles } from '../../../common/authorization/roles.decorator';
-import { ROLES_ALLOWED_APPLICATIONS } from '../../../common/authorization/roles';
+import { ANY_AUTH_ROLE, ROLES_ALLOWED_APPLICATIONS } from '../../../common/authorization/roles';
 
 @Controller('application/:fileNumber/tag')
 @ApiOAuth2(config.get<string[]>('KEYCLOAK.SCOPES'))
@@ -25,7 +25,7 @@ export class ApplicationTagController {
   constructor(private service: ApplicationTagService) {}
 
   @Get('')
-  @UserRoles(...ROLES_ALLOWED_APPLICATIONS)
+  @UserRoles(...ANY_AUTH_ROLE)
   async getApplicationTags(@Param('fileNumber') fileNumber: string) {
     return await this.service.getApplicationTags(fileNumber);
   }

services/apps/alcs/src/alcs/tag/tag-category/tag-category.controller.ts

@@ -3,7 +3,7 @@ import { ApiOAuth2 } from '@nestjs/swagger';
 import * as config from 'config';
 import { RolesGuard } from '../../../common/authorization/roles-guard.service';
 import { UserRoles } from '../../../common/authorization/roles.decorator';
-import { ANY_ROLE_BUT_COMMISSIONER, AUTH_ROLE } from '../../../common/authorization/roles';
+import { ANY_AUTH_ROLE, AUTH_ROLE } from '../../../common/authorization/roles';
 import { TagCategoryDto } from './tag-category.dto';
 import { TagCategoryService } from './tag-category.service';
 
@@ -14,7 +14,7 @@ export class TagCategoryController {
   constructor(private service: TagCategoryService) {}
 
   @Get('')
-  @UserRoles(...ANY_ROLE_BUT_COMMISSIONER)
+  @UserRoles(...ANY_AUTH_ROLE)
   async fetch(
     @Query('pageIndex') pageIndex: number,
     @Query('itemsPerPage') itemsPerPage: number,

services/apps/alcs/src/alcs/tag/tag.controller.ts

@@ -4,7 +4,7 @@ import * as config from 'config';
 import { RolesGuard } from '../../common/authorization/roles-guard.service';
 import { UserRoles } from '../../common/authorization/roles.decorator';
 import { TagService } from './tag.service';
-import { ANY_ROLE_BUT_COMMISSIONER, AUTH_ROLE } from '../../common/authorization/roles';
+import { ANY_AUTH_ROLE, ANY_ROLE_BUT_COMMISSIONER, AUTH_ROLE } from '../../common/authorization/roles';
 import { TagDto } from './tag.dto';
 
 @Controller('tag')
@@ -14,7 +14,7 @@ export class TagController {
   constructor(private service: TagService) {}
 
   @Get('')
-  @UserRoles(...ANY_ROLE_BUT_COMMISSIONER)
+  @UserRoles(...ANY_AUTH_ROLE)
   async fetch(
     @Query('pageIndex') pageIndex: number,
     @Query('itemsPerPage') itemsPerPage: number,