Merge pull request #2192 from bcgov/bugfix/ALCS-2549-2

Remove interaction from tag chips in commissioner view
bcgov · Mar 4, 2025 · 97bbfca · 97bbfca
2 parents 011a425 + 64920f1
commit 97bbfca
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/...tend/src/app/shared/tags/commissioner-tags-header/commissioner-tags-header.component.html b/...tend/src/app/shared/tags/commissioner-tags-header/commissioner-tags-header.component.html
@@ -1,3 +1,3 @@
 <div class="tag-container">
-  <app-tag-chip *ngFor="let tag of tags" [tag]="tag" [removable]="false"></app-tag-chip>
+  <app-tag-chip *ngFor="let tag of tags" [tag]="tag" [removable]="false" [isCommissioner]="true"></app-tag-chip>
 </div>
diff --git a/alcs-frontend/src/app/shared/tags/tag-chip/tag-chip.component.html b/alcs-frontend/src/app/shared/tags/tag-chip/tag-chip.component.html
@@ -1,4 +1,12 @@
-<mat-chip (removed)="onRemove()" [ngClass]="{ removable: !removable }" (click)="handleClick($event)">
+<mat-chip
+  (removed)="onRemove()"
+  [ngClass]="{
+    removable: !removable,
+    commissioner: isCommissioner,
+  }"
+  (click)="handleClickOrKeyPress($event)"
+  (keypress)="handleClickOrKeyPress($event)"
+>
   {{ tag.name }}
   <button matChipRemove [attr.aria-label]="'remove ' + tag" *ngIf="removable">
     <mat-icon svgIcon="cancel_filled"></mat-icon>

diff --git a/alcs-frontend/src/app/shared/tags/tag-chip/tag-chip.component.scss b/alcs-frontend/src/app/shared/tags/tag-chip/tag-chip.component.scss
@@ -8,3 +8,31 @@ mat-chip {
 .removable {
   margin: 4px;
 }
+
+.commissioner {
+  pointer-events: none !important;
+
+  &,
+  &:hover,
+  &:active,
+  &:focus {
+    border-color: #929292 !important;
+    background-color: #f3f3f3 !important;
+    box-shadow: none !important;
+    cursor: default !important;
+  }
+
+  &::before,
+  &::after {
+    display: none !important;
+  }
+
+  ::ng-deep .mat-mdc-chip-action,
+  ::ng-deep .mdc-evolution-chip__action {
+    pointer-events: none !important;
+  }
+
+  * {
+    transition: none !important;
+  }
+}
diff --git a/alcs-frontend/src/app/shared/tags/tag-chip/tag-chip.component.ts b/alcs-frontend/src/app/shared/tags/tag-chip/tag-chip.component.ts
@@ -9,13 +9,14 @@ import { TagDto } from '../../../services/tag/tag.dto';
 export class TagChipComponent {
   @Input() tag!: TagDto;
   @Input() removable: boolean = true;
+  @Input() isCommissioner: boolean = false;
   @Output() removeClicked = new EventEmitter<TagDto>();
 
   onRemove() {
     this.removeClicked.emit(this.tag);
   }
 
-  handleClick(event: MouseEvent) {
+  handleClickOrKeyPress(event: MouseEvent | KeyboardEvent) {
     event.preventDefault();
     event.stopPropagation();
   }