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

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

@@ -0,0 +1,102 @@
+import { RpxTranslationModule } from 'rpx-xui-translation';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { ToolbarEventService } from '../../../../toolbar/toolbar-event.service';
+import { CommentSearchComponent } from './comment-search.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 * as fromActions from '../../../../store/actions/annotation.actions';
+
+describe('CommentSearch', () => {
+
+  @Component({
+    selector: `mv-host-component`,
+    template: `
+    <mv-comment-search [annotations]="annotations"></mv-comment-search>`,
+    standalone: false
+})
+  class TestHostComponent {
+    annotations = [];
+
+    @ViewChild(CommentSearchComponent, { static: false }) commentSearchComponent: CommentSearchComponent;
+  }
+
+  let hostComponent: TestHostComponent;
+  let component: CommentSearchComponent;
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({}),
+        RpxTranslationModule.forRoot({
+          baseUrl: '',
+          debounceTimeMs: 300,
+          validity: {
+            days: 1
+          },
+          testMode: true
+        })
+      ],
+      declarations: [CommentSearchComponent, TestHostComponent],
+      providers: [ToolbarEventService],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    hostComponent = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  beforeEach(() => {
+    component = hostComponent.commentSearchComponent;
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should focus element', () => {
+    spyOn(component.searchInput.nativeElement, 'focus');
+    component.ngAfterViewInit();
+
+    expect(component.searchInput.nativeElement.focus).toHaveBeenCalled();
+  });
+
+  it('should dispatch search action when search matches',
+    inject([Store], (store) => {
+      hostComponent.annotations = [{ comments: [{ content: 'searchText' }] }];
+      fixture.detectChanges();
+      spyOn(store, 'dispatch');
+
+      component.searchComments('searchText');
+
+      expect(store.dispatch).toHaveBeenCalledWith(new fromActions.SearchComment('searchText'));
+    }));
+
+  it('should not dispatch search action when no results found',
+    inject([Store], (store) => {
+      hostComponent.annotations = [];
+      fixture.detectChanges();
+      spyOn(store, 'dispatch');
+
+      component.searchComments('searchText');
+
+      expect(store.dispatch).not.toHaveBeenCalledWith(new fromActions.SearchComment('searchText'));
+    }));
+
+  it('should clear search',
+    inject([Store], (store) => {
+      spyOn(store, 'dispatch');
+
+      component.clearSearch();
+
+      expect(component.searchString).toBeUndefined();
+      expect(component.searchResults).toEqual([]);
+      expect(component.searchIndex).toBe(0);
+    }));
+});

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

@@ -0,0 +1,58 @@
+<div class="govuk-tabs commentSummaryHeader" [ngClass]="{'icp-mode': icpEventService.enabled | async}" data-module="govuk-tabs">
+  <ul class="govuk-tabs__list">
+    <li *ngFor="let tab of tabs; let i = index" class="govuk-tabs__list-item govuk-tabs__list-item"
+        [ngClass]="{'govuk-tabs__list-item--selected': tabSelected === tab.label}">
+      <a id="commentSubPane{{ i }}" (click)="selectTab(tab.label)" [routerLink]="[]" [ngClass]="{'govuk-tabs__list-item--filtered': tab.isFiltered}"
+         class="govuk-tabs__tab" [hidden]="isHidden">
+        {{ tab.label | titlecase }}
+      </a>
+    </li>
+    <li>
+      <button id="mvCloseBtn" #mvCloseBtn class="mv-button commentSummaryHeader-button--close"
+        title="Close Comments" (click)="toggleCommentsPanel()" [hidden]="isHidden">
+      </button>
+    </li>
+  </ul>
+  <div class="govuk-tabs__panel" [hidden]="!tabSelected">
+    <ng-container *ngIf="tabSelected === 'comments'">
+      <div style="width: 100%">
+        <div class="hmcts-banner" *ngIf="navigationList?.length === 0">
+          <svg alt="" class="hmcts-banner__icon" fill="currentColor" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25">
+            <path d="M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8
+C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z" /></svg>
+          <div class="hmcts-banner__message">
+            <span class="hmcts-banner__assistive">information</span>
+            Select text to add a comment or highlight.
+          </div>
+        </div>
+        <button type="button" class="govuk-button"
+                id="commentSummary" tabindex="0"
+                data-l10n-id="commentSummary"
+                title="Open collate summary"
+                (click)="toggleCommentsSummary()">Collate comments</button>
+      </div>
+      <ng-container *ngIf="navigationList?.length > 0">
+        <mv-comments-navigate
+          [annotationList]="navigationList">
+        </mv-comments-navigate>
+      </ng-container>
+      <p class="aui-comment__private-text">
+        <span class="aui-comment__private">private</span>
+        All comments can only be seen by you
+      </p>
+    </ng-container>
+    <div [hidden]="tabSelected !== 'filter'">
+      <div class="govuk-tabs__panel--container">
+        <mv-comment-filter></mv-comment-filter>
+        <mv-comments-navigate
+          *ngIf="navigationList?.length > 0"
+          [annotationList]="navigationList">
+        </mv-comments-navigate>
+      </div>
+    </div>
+
+    <div [hidden]="tabSelected !== 'search'">
+      <mv-comment-search [annotations]="navigationList"></mv-comment-search>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,80 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {CommentSetHeaderComponent} from './comment-set-header.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {RouterTestingModule} from '@angular/router/testing';
+import {StoreModule} from '@ngrx/store';
+import {reducers} from '../../../store/reducers/reducers';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+import { CommentService } from '../comment/comment.service';
+
+describe('CommentSetHeader', () => {
+  let component: CommentSetHeaderComponent;
+  let fixture: ComponentFixture<CommentSetHeaderComponent>;
+  let nativeElement;
+  let toolbarService: ToolbarEventService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({})],
+      declarations: [CommentSetHeaderComponent],
+      providers: [
+        CommentService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CommentSetHeaderComponent);
+    nativeElement = fixture.debugElement.nativeElement;
+    toolbarService = TestBed.inject(ToolbarEventService);
+    component = fixture.componentInstance;
+    component.showCommentSummary = true;
+    component.tabSelected = 'comments';
+    fixture.detectChanges();
+  });
+
+  it('should emit toggleCommentsSummary event', () => {
+    const commentSummarySpy = spyOn(component.showCommentSummaryDialog, 'emit');
+    const commentSummaryButton = nativeElement.querySelector('#commentSummary');
+
+    commentSummaryButton.click();
+
+    expect(commentSummarySpy).toHaveBeenCalled();
+  });
+
+  it('should set tabSelected', () => {
+    component.tabSelected = 'comments';
+    component.selectTab('tab1');
+    expect(component.tabSelected).toEqual('tab1');
+  });
+
+  it('should reset tabSelected', () => {
+    component.tabSelected = 'tab1';
+    component.selectTab('tab1');
+    expect(component.tabSelected).toBeUndefined();
+  });
+
+  it('should invert toggleCommentsPanel value', () => {
+    const value = toolbarService.commentsPanelVisible.getValue();
+    const toggleCommentsPanelSpy = spyOn(toolbarService, 'toggleCommentsPanel');
+    component.toggleCommentsPanel();
+
+    expect(toggleCommentsPanelSpy).toHaveBeenCalledWith(!value);
+  });
+
+  it('should set marginToComment to true if tab is selected', () => {
+    component.tabSelected = 'comments';
+    component.selectTab('tab1');
+    expect(component.marginToComment).toBeTruthy();
+  });
+
+  it('should set marginToComment to false if tab is not selected', () => {
+    component.tabSelected = 'tab1';
+    component.selectTab('tab1');
+    expect(component.marginToComment).toBeFalsy();
+  });
+
+
+});

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

@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Annotation } from '../../annotation-set/annotation-view/annotation.model';
+import { select, Store } from '@ngrx/store';
+import * as fromStore from '../../../store/reducers/reducers';
+import * as fromTagSelectors from '../../../store/selectors/tag.selectors';
+import * as fromAnnoSelector from '../../../store/selectors/annotation.selectors';
+import { combineLatest, Subscription } from 'rxjs';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+import { CommentService } from '../comment/comment.service';
+import { IcpEventService } from '../../../toolbar/icp-event.service';
+
+@Component({
+    selector: 'mv-comment-set-header',
+    templateUrl: './comment-set-header.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class CommentSetHeaderComponent implements OnInit, OnDestroy {
+
+  @Input() public showCommentSummary: boolean;
+  @Input() public isHidden: boolean;
+  @Output() public readonly showCommentSummaryDialog = new EventEmitter();
+
+  marginToComment: boolean;
+  tabs: {isFiltered?: boolean; label: string}[] = [];
+  tabSelected = '';
+  isFiltered: boolean;
+  navigationList: Annotation[];
+  $subscriptions: Subscription;
+
+  constructor(private store: Store<fromStore.State>,
+              private commentService: CommentService,
+              public toolbarEvents: ToolbarEventService,
+              public readonly icpEventService: IcpEventService) {}
+
+  ngOnInit(): void {
+    const tagFilter$ = this.store.pipe(select(fromTagSelectors.getTagFilters));
+    const filteredAnnotation$ = this.store.pipe(select(fromAnnoSelector.getFilteredAnnotations));
+
+    this.$subscriptions = combineLatest([tagFilter$, filteredAnnotation$]).subscribe(([formData, filteredAnno]) => {
+      this.navigationList = filteredAnno;
+      this.tabs = this.navigationList.length > 0 ?
+        [{label: 'comments'}, {label: 'filter'}, {label: 'search'}] : [{label: 'comments'}];
+      this.isFiltered = !formData.length;
+      this.tabs = [...this.tabs].map((tab) => {
+        return !this.isFiltered && tab.label === 'filter' ? {...tab, isFiltered: true} : {...tab, isFiltered: false};
+      });
+    });
+  }
+
+  public toggleCommentsSummary(): void {
+    this.showCommentSummaryDialog.emit();
+  }
+
+  selectTab(tab: string) {
+    this.tabSelected = tab !== this.tabSelected ? tab : undefined;
+    if (this.tabSelected) {
+      this.marginToComment = true;
+      this.commentService.createMarginToCommentEvent(this.marginToComment);
+    } else {
+      this.marginToComment = false;
+      this.commentService.createMarginToCommentEvent(this.marginToComment);
+    }
+  }
+
+  public toggleCommentsPanel() {
+    this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+  }
+
+  ngOnDestroy(): void {
+    this.$subscriptions.unsubscribe();
+  }
+}

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set-render.service.spec.ts

@@ -0,0 +1,85 @@
+import { CommentSetRenderService } from './comment-set-render.service';
+import { inject, TestBed } from '@angular/core/testing';
+import { CommentComponent } from './comment/comment.component';
+
+describe('CommentSetRenderService', () => {
+  const componentList = [
+    {
+      page: 1,
+      _rectangle: { x: 70, y: 30, height: 150, width: 200 },
+      form: { nativeElement: {
+          getBoundingClientRect: () =>  ({ height: 45 })
+      }}
+    },
+    {
+      page: 1,
+      _rectangle: { x: 40, y: 60, height: 100, width: 250 },
+      form: { nativeElement: {
+        getBoundingClientRect: () => ({ height: 55 })
+      }}
+    }
+  ] as CommentComponent[];
+
+  const pageHeights = [1000, 1000, 1000];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CommentSetRenderService]
+    })
+      .compileComponents();
+  });
+
+  it('should sort comment components, rotation 90',
+    inject([CommentSetRenderService], (service: CommentSetRenderService) => {
+      const commentList = [...componentList];
+
+      service.sortComponents(commentList, pageHeights, 90, 1);
+
+      expect(commentList[0].rectTop).toBe(40);
+  }));
+
+  it('should sort comment components, rotation 180',
+    inject([CommentSetRenderService], (service: CommentSetRenderService) => {
+      const commentList = [...componentList];
+
+      service.sortComponents(commentList, pageHeights, 180, 1);
+
+      expect(commentList[0].rectTop).toBe(840);
+  }));
+
+  it('should sort comment components, rotation 270',
+    inject([CommentSetRenderService], (service: CommentSetRenderService) => {
+      const commentList = [...componentList];
+
+      service.sortComponents(commentList, pageHeights, 270, 1);
+
+      expect(commentList[0].rectTop).toBe(710);
+  }));
+
+  it('should sort comment components, rotation 0',
+    inject([CommentSetRenderService], (service: CommentSetRenderService) => {
+      const commentList = [...componentList];
+
+      service.sortComponents(commentList, pageHeights, 0, 1);
+
+      expect(commentList[0].rectTop).toBe(60);
+  }));
+
+  it('should sort comment components, zoomed 200%',
+    inject([CommentSetRenderService], (service: CommentSetRenderService) => {
+      const commentList = [...componentList];
+
+      service.sortComponents(commentList, pageHeights, 0, 2);
+
+      expect(commentList[0].rectTop).toBe(60);
+    }));
+
+  it('should sort components and call adjustIfOverlapping',
+    inject([CommentSetRenderService], (service: CommentSetRenderService) => {
+      const beforeCommentList = [...componentList];
+
+      service.redrawComponents(beforeCommentList, pageHeights, 0, 2);
+      expect(beforeCommentList).toEqual([componentList[1], componentList[0]]);
+    })
+  );
+});

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set-render.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { CommentComponent } from './comment/comment.component';
+import { HtmlTemplatesHelper } from '../../shared/util/helpers/html-templates.helper';
+
+@Injectable()
+export class CommentSetRenderService {
+
+  redrawComponents(commentComponents: CommentComponent[], pageHeights: any[], rotate: number, zoom: number) {
+    let prevComment: CommentComponent;
+    this.sortComponents(commentComponents, pageHeights, rotate, zoom).forEach((comment: CommentComponent) => {
+      this.adjustIfOverlapping(comment, prevComment, zoom);
+      prevComment = comment;
+    });
+  }
+
+  sortComponents(commentComponents: CommentComponent[], pageHeights: any[], rotate: number, zoom: number) {
+    return commentComponents.sort((a: CommentComponent, b: CommentComponent) => {
+      a.rectTop = this.top(a._rectangle, pageHeights[a.page - 1], rotate, zoom);
+      b.rectTop = this.top(b._rectangle, pageHeights[b.page - 1], rotate, zoom);
+      return this.processSort(a, b);
+    });
+  }
+
+  private adjustIfOverlapping(comment: CommentComponent, prevComment: CommentComponent, zoom: number): void {
+    if (prevComment) {
+      const endOfPrevComment = prevComment.commentTop + this.height(prevComment);
+      if (comment.commentTop <= endOfPrevComment) {
+        comment.rectTop = (endOfPrevComment - comment.totalPrevPagesHeight) / zoom;
+      }
+    }
+  }
+
+  private processSort(a: CommentComponent, b: CommentComponent): number {
+    if (this.onSameLine(a, b)) {
+      return a.rectLeft >= b.rectLeft ? 1 : -1;
+    }
+    return a.commentTop >= b.commentTop ? 1 : -1;
+  }
+
+  private onSameLine(a: CommentComponent, b: CommentComponent): boolean {
+    return this.difference(a.commentTop, b.commentTop) === 0;
+  }
+
+  private top(rectangle: { x, y, height, width }, height: number, rotate: number, zoom: number) {
+    const actualHeight = height / zoom;
+    switch (rotate) {
+      case 90: return rectangle.x;
+      case 180: return actualHeight - (rectangle.y + rectangle.height);
+      case 270: return actualHeight - (rectangle.x + rectangle.width);
+      default: return rectangle.y;
+    }
+  }
+
+  private height(element: any) {
+    return HtmlTemplatesHelper.getAdjustedBoundingRect(element.form.nativeElement)?.height | 0;
+  }
+
+  private difference(a: number, b: number): number { return Math.abs(a - b); }
+}

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

@@ -0,0 +1,23 @@
+<div #container [ngClass]="{'comments': showCommentsPanel}">
+  <div #panel [ngClass]="{ 'comments-panel comment-container': true, 'expanded': showCommentsPanel }"
+     [style.height.px]="height"
+     (click)="onContainerClick($event)">
+    <ng-container *ngFor="let comment of (comments$ | async); let i = index;">
+      <mv-anno-comment
+        [ngStyle]="showCommentsPanel ? {} : {'display':'none'}"
+        #commentComponent
+        (commentClick)="onSelect($event)"
+        (delete)="onCommentDelete($event)"
+        (updated)="onCommentUpdate($event)"
+        (changes)="allCommentsSaved()"
+        [zoom]="zoom"
+        [rotate]="rotate"
+        [index]="i"
+        [page]="comment.page"
+        [comment]="comment"
+        [annotation]="(annoEntities$ | async)[comment.annotationId]"
+        (renderComments)="redrawComments()">
+      </mv-anno-comment>
+    </ng-container>
+  </div>
+</div>