@hmcts/media-viewer 4.2.0 → 4.2.4-exui-3994-f

package/projects/media-viewer/src/lib/annotations/comment-set/comment/text-highlight/text-highlight.directive.spec.ts

@@ -0,0 +1,37 @@
+import { ElementRef } from '@angular/core';
+import { TextHighlightDirective } from './text-highlight.directive';
+
+describe('TextHighlightDirective', () => {
+  let directive: TextHighlightDirective;
+  const hostElement = document.createElement('div');
+  hostElement.innerText = 'text';
+
+  beforeEach(() => {
+    directive = new TextHighlightDirective(new ElementRef<HTMLElement>(hostElement));
+  });
+
+  it('should highlight text when it matches input', () => {
+    directive.textToHighlight = 'text';
+
+    directive.ngAfterViewChecked();
+
+    expect(hostElement.querySelector('span.mvTextHighlight')).toBeTruthy();
+  });
+
+  it('should not highlight text it does not match input text', () => {
+    directive.textToHighlight = 'not the search word';
+
+    directive.ngAfterViewChecked();
+
+    expect(hostElement.querySelector('span.mvTextHighlight')).toBeFalsy();
+  });
+
+  it('should reset highlight', () => {
+    directive.textToHighlight = 'text';
+
+    directive.ngAfterViewChecked();
+    directive.resetHighlight();
+
+    expect(hostElement.querySelector('span.mvTextHighlight')).toBeFalsy();
+  });
+});

package/projects/media-viewer/src/lib/annotations/comment-set/comment/text-highlight/text-highlight.directive.ts

@@ -0,0 +1,45 @@
+import { AfterViewChecked, Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+    selector: '[mvTextHighlight]',
+    standalone: false
+})
+export class TextHighlightDirective implements AfterViewChecked {
+
+  @Input() textToHighlight: string;
+
+  constructor(private element: ElementRef<HTMLElement>) {}
+
+  ngAfterViewChecked(): void {
+    if (this.textToHighlight) {
+      this.highlightInputText(this.textToHighlight);
+    }
+  }
+
+  highlightInputText(textToHighlight: string) {
+    this.resetHighlight();
+    this.textToHighlight = textToHighlight;
+    const searchPattern = new RegExp(textToHighlight, 'gi');
+    const hostElement = this.element.nativeElement;
+    if (hostElement.innerHTML.match(searchPattern)) {
+      hostElement.innerHTML = hostElement.innerHTML
+        .replace(searchPattern, this.highlightPattern('$&'));
+    }
+    this.textToHighlight = undefined;
+  }
+
+  resetHighlight() {
+    const hostElement = this.element.nativeElement;
+    const searchPattern = new RegExp(this.highlightPattern('(.*?)'), 'gi');
+    while (hostElement.innerHTML.match(searchPattern)) {
+      const matchGroups = searchPattern.exec(hostElement.innerHTML);
+      if (matchGroups) {
+        hostElement.innerHTML = hostElement.innerHTML.replace(matchGroups[0], matchGroups[1]);
+      }
+    }
+  }
+
+  private highlightPattern(dynamicText: string) {
+    return '<span class="mvTextHighlight">' + dynamicText + '</span>';
+  }
+}

package/projects/media-viewer/src/lib/annotations/comment-set/comment/textarea-auto-expand/textarea-auto-expand.directive.spec.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TextareaAutoExpandDirective } from './textarea-auto-expand.directive';
+
+@Component({
+    template: `
+      <form>
+        <textarea mvTextAreaAutoExpand type="text" name="content">
+        </textarea>
+      </form>
+  `,
+    standalone: false
+})
+class TestHostComponent {
+}
+
+describe('TextareaAutoExpandDirective', () => {
+  let component: TestHostComponent;
+  let fixture: ComponentFixture<TestHostComponent>;
+  let textareaEl: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TextareaAutoExpandDirective, TestHostComponent],
+      providers: [],
+      imports: []
+    });
+    fixture = TestBed.createComponent(TestHostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    textareaEl = fixture.debugElement.query(By.css('textarea'));
+  });
+
+  it('input into textarea', () => {
+    textareaEl.nativeElement.value = 'test';
+    const initialHeight = textareaEl.nativeElement.style.height;
+    textareaEl.nativeElement.value = 'testing the comment height when a large amount of text is enter' +
+      ' so the initial height will not be the same as the final height. testing the comment height when a large amount of text is enter' +
+      ' so the initial height will not be the same as the final height, testing the comment height when a large amount of text is enter' +
+      ' so the initial height will not be the same as the final height, testing the comment height when a large amount of text is enter' +
+      ' so the initial height will not be the same as the final height';
+    fixture.detectChanges();
+
+    expect(textareaEl.nativeElement.style.height).not.toEqual(initialHeight);
+  });
+});

package/projects/media-viewer/src/lib/annotations/comment-set/comment/textarea-auto-expand/textarea-auto-expand.directive.ts

@@ -0,0 +1,27 @@
+import { AfterContentChecked, Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[mvTextAreaAutoExpand]',
+    standalone: false
+})
+export class TextareaAutoExpandDirective implements AfterContentChecked {
+
+  constructor(private el: ElementRef) {
+  }
+
+  ngAfterContentChecked(): void {
+    this.adjustHeight();
+  }
+
+  @HostListener('input') onMouseDown() {
+    this.adjustHeight();
+  }
+
+  adjustHeight(): void {
+    const nativeElement = this.el.nativeElement;
+    nativeElement.style.overflow = 'hidden';
+    nativeElement.style.height = 'auto';
+    nativeElement.style.height = nativeElement.scrollHeight - 5 + 'px';
+  }
+
+}

package/projects/media-viewer/src/lib/annotations/comment-set/comment-navigate/comments-navigate.component.html

@@ -0,0 +1,13 @@
+<p class="comment-search">
+  <span class="comment-search__item">
+    Showing {{ index + 1 }} of {{ navigationList.length }}
+  </span>
+  <a [routerLink]="[]"
+     class="comment-search__item"
+     title="Previous comment"
+     (click)="prevItem()">Prev</a>
+  <a [routerLink]="[]"
+     class="comment-search__item"
+     title="Next comment'"
+     (click)="nextItem()">Next</a>
+</p>

package/projects/media-viewer/src/lib/annotations/comment-set/comment-navigate/comments-navigate.component.spec.ts

@@ -0,0 +1,95 @@
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { CommentsNavigateComponent } from './comments-navigate.component';
+import { FormsModule } from '@angular/forms';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { Store, StoreModule } from '@ngrx/store';
+import {reducers} from '../../../store/reducers/reducers';
+import {RouterTestingModule} from '@angular/router/testing';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+
+describe('CommentsNavigateComponent', () => {
+
+  @Component({
+    selector: `mv-host-component`,
+    template: `<mv-comments-navigate [annotationList]="annotationList"></mv-comments-navigate>`,
+    standalone: false
+})
+  class TestHostComponent {
+    annotationList = [];
+
+    @ViewChild(CommentsNavigateComponent, {static: false}) commentsNavigateComponent;
+  }
+
+  let hostComponent: TestHostComponent;
+  let component: CommentsNavigateComponent;
+  let fixture: ComponentFixture<TestHostComponent>;
+  const annotationList = [
+    { annotationId: 'annoId1', comments: [{ content: 'comment 1' }], page: 1, rectangles: [{ y: 20, x: 30 }, { y: 10, x: 30 }] },
+    { annotationId: 'annoId2', comments: [{ content: 'comment 2' }], page: 1, rectangles: [{ y: 20, x: 40 }] },
+    { annotationId: 'annoId2', comments: [{ content: 'comment 3' }], page: 1, rectangles: [{ y: 30, x: 40 }] },
+    { annotationId: 'annoId2', comments: [{ content: 'comment 4' }], page: 2, rectangles: [{ y: 10, x: 40 }] }
+  ];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({}),
+        RouterTestingModule
+      ],
+      declarations: [CommentsNavigateComponent, TestHostComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    hostComponent = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  beforeEach(() => {
+    component = hostComponent.commentsNavigateComponent;
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should init nagivation list',
+    inject([Store, ToolbarEventService], (store, toolbarEvents) => {
+      spyOn(store, 'dispatch');
+      spyOn(toolbarEvents, 'setPage');
+      component.autoSelect = true;
+      hostComponent.annotationList = annotationList;
+      fixture.detectChanges();
+
+      expect(component.navigationList).toBeTruthy();
+      expect(component.navigationList[0].rectangle.y).toBe(20);
+      expect(component.navigationList[3].rectangle.y).toBe(10);
+      expect(toolbarEvents.setPage).toHaveBeenCalledWith(1);
+      expect(store.dispatch).toHaveBeenCalled();
+  }));
+
+  it('should navigate to next item',
+    inject([Store], (store) => {
+      spyOn(store, 'dispatch');
+      component.index = 0;
+      component.navigationList = [{ page: 1, annotationId: 'annoId1' }, { page: 2, annotationId: 'annoId2'}];
+      component.nextItem();
+
+      expect(component.index).toBe(1);
+      expect(store.dispatch).toHaveBeenCalled();
+  }));
+
+  it('should navigate to previous item',
+    inject([Store], (store) => {
+      spyOn(store, 'dispatch');
+      component.index = 1;
+      component.navigationList = [{ page: 1, annotationId: 'annoId1' }, { page: 2, annotationId: 'annoId2'}];
+      component.prevItem();
+
+      expect(component.index).toBe(0);
+      expect(store.dispatch).toHaveBeenCalled();
+  }));
+});

package/projects/media-viewer/src/lib/annotations/comment-set/comment-navigate/comments-navigate.component.ts

@@ -0,0 +1,96 @@
+import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Rectangle } from '../../annotation-set/annotation-view/rectangle/rectangle.model';
+import { Annotation } from '../../annotation-set/annotation-view/annotation.model';
+import {Store} from '@ngrx/store';
+import * as fromStore from '../../../store/reducers/reducers';
+import * as fromActions from '../../../store/actions/annotation.actions';
+import {ToolbarEventService} from '../../../toolbar/toolbar-event.service';
+
+@Component({
+    selector: 'mv-comments-navigate',
+    templateUrl: './comments-navigate.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class CommentsNavigateComponent implements OnChanges {
+
+  @Input() public annotationList: Annotation[];
+  @Input() autoSelect = false;
+
+  navigationList: any[] = [];
+  index = 0;
+
+  constructor(private store: Store<fromStore.AnnotationSetState>, public readonly toolbarEvents: ToolbarEventService) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.annotationList) {
+      this.initNavigationList();
+    }
+  }
+
+  initNavigationList(): void {
+    this.index = 0;
+    this.navigationList = [...this.annotationList || []]
+      .map(annotation => ({
+        content: annotation.comments[0].content,
+        annotationId: annotation.id,
+        page: annotation.page,
+        rectangle: this.upperRectangle(annotation.rectangles),
+      }))
+      .sort(this.sortComments);
+
+    if (this.autoSelect) {
+      this.toolbarEvents.setPage(Number.parseInt(this.navigationList[0].page, 0));
+      this.store.dispatch(new fromActions.SelectedAnnotation({
+        annotationId: this.navigationList[0].annotationId,
+        editable: false,
+        selected: true
+      }));
+    }
+  }
+
+  sortComments(mappedCommentA, mappedCommentB) {
+    if (mappedCommentA.page !== mappedCommentB.page) {
+      return mappedCommentA.page - mappedCommentB.page;
+    } else {
+      const rectA = mappedCommentA.rectangle;
+      const rectB = mappedCommentB.rectangle;
+      if (rectA.y !== rectB.y) {
+        return rectA.y - rectB.y;
+      } else {
+        return rectA.x - rectB.x;
+      }
+    }
+  }
+
+  nextItem() {
+    this.index += 1;
+    if (this.index === this.annotationList.length) {
+      this.index = 0;
+    }
+
+    this.toolbarEvents.setPage(Number.parseInt(this.navigationList[this.index].page, 0));
+    this.store.dispatch(new fromActions.SelectedAnnotation({
+      annotationId: this.navigationList[this.index].annotationId, editable: false, selected: true
+    }));
+  }
+
+
+  prevItem() {
+    this.index -= 1;
+    if (this.index < 0) {
+      this.index = this.navigationList.length - 1;
+    }
+    this.toolbarEvents.setPage(Number.parseInt(this.navigationList[this.index].page, 0));
+    this.store.dispatch(new fromActions.SelectedAnnotation({
+      annotationId: this.navigationList[this.index].annotationId,
+      editable: false,
+      selected: true
+    }));
+  }
+
+  upperRectangle(rectangles: Rectangle[]) {
+    [...rectangles].sort((rect1, rect2) => rect1.y - rect2.y);
+    return { x: rectangles[0].x, y: rectangles[0].y };
+  }
+}

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set-header/comment-filter/comment-filter.component.html

@@ -0,0 +1,102 @@
+<div class="comment-filter">
+  <div class="hmcts-filter__content">
+    <div class="hmcts-filter__toggle-filters">
+      <p
+        class="hmcts-filter__toggle-filters-link"
+        [ngClass]="{ 'govuk-accordion__section--expanded': isPreview }"
+        (click)="onToggleFilterView()"
+      >
+        <strong>{{ "Filter options" | rpxTranslate }}</strong
+        ><span class="govuk-accordion__icon"></span>
+      </p>
+    </div>
+
+    <ng-container *ngIf="filter$ | async as filters">
+      <div class="hmcts-filter__selected-heading" *ngIf="filters.length">
+        <div class="hmcts-filter__heading-action">
+          <p>
+            <a
+              (click)="onClearFilters()"
+              class="govuk-link govuk-link--no-visited-state"
+              [routerLink]="[]"
+              >{{ "Clear filters" | rpxTranslate }}</a
+            >
+          </p>
+        </div>
+      </div>
+
+      <h4
+        class="govuk-heading-s govuk-!-margin-bottom-0"
+        *ngIf="filters.length"
+      >
+        {{ "Tag filters" | rpxTranslate }}
+      </h4>
+
+      <ul class="hmcts-filter-tags" *ngIf="filters.length">
+        <li *ngFor="let tagName of filters">
+          <a
+            class="hmcts-filter__tag"
+            [routerLink]="[]"
+            (click)="onRemoveFilter(tagName)"
+          >
+            <span class="govuk-visually-hidden">{{
+              "Remove this filter" | rpxTranslate
+            }}</span
+            >{{ tagName | unsnake }}</a
+          >
+        </li>
+      </ul>
+    </ng-container>
+
+    <div class="hmcts-filter__options" [ngClass]="{ isVisible: isPreview }">
+      <div class="govuk-form-group">
+        <label class="govuk-label govuk-label--s" for="keywords">
+          {{ "Search Tags" | rpxTranslate }}
+        </label>
+        <input
+          class="govuk-input"
+          id="keywords"
+          name="keywords"
+          type="text"
+          [ngModel]="searchValue"
+          (ngModelChange)="searchValue = $event"
+        />
+      </div>
+
+      <div class="govuk-form-group">
+        <div [formGroup]="tagGroup">
+          <fieldset class="govuk-fieldset" formGroupName="tagFilters">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+              Tags
+            </legend>
+            <div class="govuk-checkboxes--scroll">
+              <div class="govuk-checkboxes govuk-checkboxes--small">
+                <div
+                  class="govuk-checkboxes__item"
+                  *ngFor="
+                    let item of allTags$ | async | filter : searchValue : 'key'
+                  "
+                >
+                  <input
+                    [formControlName]="item.key"
+                    [id]="item.key"
+                    class="govuk-checkboxes__input"
+                    [value]="false"
+                    [attr.aria-describedby]="item.key"
+                    type="checkbox"
+                  />
+                  <label
+                    class="govuk-label govuk-checkboxes__label"
+                    [for]="item.key"
+                  >
+                    {{ item.key | unsnake }} ({{ item.length }})
+                  </label>
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set-header/comment-filter/comment-filter.component.ts

@@ -0,0 +1,71 @@
+import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+
+import {select, Store} from '@ngrx/store';
+import * as fromStore from '../../../../store/reducers/reducers';
+import * as fromSelectors from '../../../../store/selectors/tag.selectors';
+import * as fromActions from '../../../../store/actions/tag.actions';
+import {Observable, Subscription} from 'rxjs';
+import {UntypedFormGroup, UntypedFormBuilder, UntypedFormControl} from '@angular/forms';
+import {auditTime, tap} from 'rxjs/operators';
+
+
+@Component({
+    selector: 'mv-comment-filter',
+    templateUrl: './comment-filter.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class CommentFilterComponent implements OnInit, OnDestroy {
+  tagGroup: UntypedFormGroup;
+  $subscriptions: Subscription;
+  filter$: Observable<string[]>;
+  allTags$: Observable<any>;
+  searchValue: string;
+  isPreview = false;
+  constructor(
+    private store: Store<fromStore.State>,
+    private fb: UntypedFormBuilder) {}
+
+  ngOnInit(): void {
+    this.tagGroup = this.fb.group({
+      'tagFilters': this.fb.group({}),
+    });
+    this.filter$ = this.store.pipe(select(fromSelectors.getTagFilters));
+    this.$subscriptions = this.tagGroup.valueChanges.pipe(auditTime(5)).subscribe(value => {
+      const tagFilters = value['tagFilters'];
+      this.store.dispatch(new fromActions.AddFilterTags(tagFilters));
+    });
+    this.buildFrom();
+
+  }
+
+  buildFrom() {
+    const checkboxes = <UntypedFormGroup>this.tagGroup.get('tagFilters');
+    this.allTags$ = this.store.pipe(select(fromSelectors.getAllTagsArr)).pipe(tap(tags => {
+      this.tagGroup.reset();
+      tags.forEach((value) => {
+        checkboxes.addControl(value.key, new UntypedFormControl(false));
+      });
+    }));
+  }
+
+  onClearFilters() {
+    this.tagGroup.reset();
+    this.store.dispatch(new fromActions.ClearFilterTags());
+  }
+
+  ngOnDestroy(): void {
+    this.$subscriptions.unsubscribe();
+  }
+
+  onRemoveFilter(tagName) {
+    const checkboxes = <UntypedFormGroup>this.tagGroup.get('tagFilters');
+    checkboxes.controls[tagName].setValue(false);
+  }
+
+  onToggleFilterView() {
+    this.isPreview = !this.isPreview;
+  }
+
+
+}

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set-header/comment-search/comment-search.component.html

@@ -0,0 +1,26 @@
+<input
+  #searchInput
+  type="text"
+  class="govuk-input comment-search__item"
+  id="search-comments-input"
+  name="searchString"
+  aria-label="search comments input"
+  [ngModel]="searchString"
+  (ngModelChange)="searchString = $event"
+/>
+<button
+  type="button"
+  [class.govuk-button--disabled]="searchInput?.value.length <= 2"
+  class="govuk-button comment-search__item"
+  (click)="searchComments(searchInput.value.trim())"
+>
+  {{ "Search" | rpxTranslate }}
+</button>
+<ng-container *ngIf="searchResults.length > 0">
+  <mv-comments-navigate [annotationList]="searchResults"></mv-comments-navigate>
+</ng-container>
+<ng-container *ngIf="searchString && searchResults?.length === 0">
+  <p class="comment-search__item">
+    {{ "No matches have been found" | rpxTranslate }}
+  </p>
+</ng-container>

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set-header/comment-search/comment-search.component.ts

@@ -0,0 +1,56 @@
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Annotation } from '../../../annotation-set/annotation-view/annotation.model';
+import { Store } from '@ngrx/store';
+import * as fromStore from '../../../../store/reducers/reducers';
+import * as fromActions from '../../../../store/actions/annotation.actions';
+
+@Component({
+    selector: 'mv-comment-search',
+    templateUrl: './comment-search.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class CommentSearchComponent implements AfterViewInit, OnDestroy {
+
+  @Input() public annotations: Annotation[];
+
+  @ViewChild('searchInput', {static: false}) searchInput: ElementRef<HTMLInputElement>;
+
+  searchString: string;
+  searchResults: Annotation[] = [];
+  searchIndex = 0;
+
+  constructor(private store: Store<fromStore.AnnotationSetState>) {}
+
+  ngAfterViewInit(): void {
+    if (this.searchInput) {
+      this.searchInput.nativeElement.focus();
+    }
+  }
+
+  ngOnDestroy(): void {
+    // TODO workaround for tab error
+    setTimeout(() => {this.store.dispatch(new fromActions.SearchComment('')); }, 250);
+  }
+
+  searchComments(searchText: string): void {
+    this.clearSearch();
+    if (searchText.length > 2) {
+      this.searchString = searchText;
+      this.searchResults = this.annotations
+        .filter(annotation => annotation.comments.length > 0)
+        .filter(annotation =>
+          annotation.comments[0].content.toLowerCase().includes(this.searchString.toLowerCase()));
+      if (this.searchResults.length > 0) {
+        this.store.dispatch(new fromActions.SearchComment(searchText));
+      }
+    }
+  }
+
+  clearSearch() {
+    this.searchString = undefined;
+    this.searchResults = [];
+    this.searchIndex = 0;
+    this.store.dispatch(new fromActions.SearchComment(''));
+  }
+}