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

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

@@ -1,102 +0,0 @@
-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

@@ -1,58 +0,0 @@
-<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

@@ -1,80 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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>