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

package/projects/media-viewer/src/lib/toolbar/main-toolbar/main-toolbar.component.spec.ts

@@ -0,0 +1,298 @@
+import { RpxTranslationModule } from 'rpx-xui-translation';
+import { By } from '@angular/platform-browser';
+import { Component } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MainToolbarComponent } from './main-toolbar.component';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { reducers } from '../../store/reducers/reducers';
+import { SearchBarComponent } from '../search-bar/search-bar.component';
+import { StoreModule } from '@ngrx/store';
+import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
+import { ToolbarEventService } from '../toolbar-event.service';
+import { RouterTestingModule } from '@angular/router/testing';
+
+
+describe('MainToolbarComponent', () => {
+  let component: MainToolbarComponent;
+  let fixture: ComponentFixture<MainToolbarComponent>;
+  let nativeElement;
+  let toolbarService: ToolbarEventService;
+
+  beforeEach(() => {
+    return TestBed.configureTestingModule({
+      declarations: [
+        MainToolbarComponent,
+        SearchBarComponent
+      ],
+      imports: [
+        FormsModule,
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({}),
+        OverlayModule,
+        RouterTestingModule,
+        RpxTranslationModule.forRoot({
+          baseUrl: '',
+          debounceTimeMs: 300,
+          validity: {
+            days: 1
+          },
+          testMode: true
+        })
+      ],
+      providers: [ToolbarButtonVisibilityService, ToolbarEventService]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainToolbarComponent);
+    component = fixture.componentInstance;
+    toolbarService = TestBed.inject(ToolbarEventService);
+    nativeElement = fixture.debugElement.nativeElement;
+    component.toolbarButtons.showHighlightButton = true;
+    component.toolbarButtons.showDrawButton = true;
+    component.toolbarButtons.showRotate = true;
+    component.toolbarButtons.showZoom = true;
+    component.toolbarButtons.showPrint = true;
+    component.toolbarButtons.showDownload = true;
+    component.toolbarButtons.showCommentSummary = true;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle searchbar visible', fakeAsync((done) => {
+    component.toggleSearchBar();
+
+    component.toolbarEvents.searchBarHidden.asObservable()
+      .subscribe(
+        searchBarHidden => expect(searchBarHidden).toBeFalsy()
+        , error => done(error)
+      );
+  }));
+
+  it('should get the page number of the current page', () => {
+    component.ngOnInit();
+    toolbarService.setCurrentPageInputValueSubject.next(2);
+
+    expect(component.pageNumber).toEqual(2);
+  });
+
+  it('should not show sidebar', fakeAsync((done) => {
+    component.toolbarEvents.sidebarOpen.asObservable()
+      .subscribe(
+        sidebarOpen => expect(sidebarOpen).toBeFalsy()
+        , error => done(error)
+      );
+  }));
+
+  it('should toggle sidebar open', fakeAsync((done) => {
+    component.toggleIndexSideBar();
+
+    component.toolbarEvents.sidebarOpen.asObservable()
+      .subscribe(
+        sidebarOpen => expect(sidebarOpen).toBeTruthy()
+        , error => done(error)
+      );
+    component.toolbarEvents.sidebarOutlineView.asObservable()
+      .subscribe(
+        sidebarOutlineView => expect(sidebarOutlineView).toBeTruthy()
+        , error => done(error)
+      );
+  }));
+
+  it('should toggle bookmarks sidebar open', fakeAsync((done) => {
+    component.toggleBookmarksSideBar();
+
+    component.toolbarEvents.sidebarOpen.asObservable()
+      .subscribe(
+        sidebarOpen => expect(sidebarOpen).toBeTruthy()
+        , error => done(error)
+      );
+    component.toolbarEvents.sidebarOutlineView.asObservable()
+      .subscribe(
+        sidebarOutlineView => expect(sidebarOutlineView).toBeFalsy()
+        , error => done(error)
+      );
+  }));
+
+  it('should not show searchbar', fakeAsync((done) => {
+    component.toolbarEvents.searchBarHidden.asObservable()
+      .subscribe(
+        searchBarHidden => expect(searchBarHidden).toBeTruthy()
+        , error => done(error)
+      );
+  }));
+
+  it('should go to next page', () => {
+    const pageChangerSpy = spyOn(component.toolbarEvents.changePageByDeltaSubject, 'next');
+    component.increasePageNumber();
+    expect(pageChangerSpy).toHaveBeenCalledWith(1);
+  });
+
+  it('should go to previous page', () => {
+    const pageChangerSpy = spyOn(component.toolbarEvents.changePageByDeltaSubject, 'next');
+    component.decreasePageNumber();
+    expect(pageChangerSpy).toHaveBeenCalledWith(-1);
+  });
+
+  describe('onPageNumberInputChange', () => {
+    it('should go to selected page', () => {
+      const pageChangerSpy = spyOn(component.toolbarEvents.setCurrentPageSubject, 'next');
+      component.pageCount = 21;
+      component.onPageNumberInputChange('4');
+      expect(pageChangerSpy).toHaveBeenCalledWith(4);
+    });
+
+    it('should emit pageNumber as 1 when given value < 1', () => {
+      component.pageCount = 4;
+      const setPageSpy = spyOn(toolbarService, 'setPage');
+      component.onPageNumberInputChange('0');
+
+      expect(setPageSpy).toHaveBeenCalledWith(1);
+    });
+
+    it('should emit pageCount value when provided value too big', () => {
+      component.pageCount = 4;
+      const setPageSpy = spyOn(toolbarService, 'setPage');
+      component.onPageNumberInputChange('5');
+
+      expect(setPageSpy).toHaveBeenCalledWith(4);
+    });
+
+    it('should mvPresentBtn width is greater than mvToolbarMain width then "button-hidden-on-toolbar" should be return', () => {
+
+      const mockMvToolbarMain = jasmine.createSpyObj("ElementRef", [], { 'nativeElement': { 'offsetWidth': 10 } })
+      component.mvToolbarMain = mockMvToolbarMain;
+      component.widthRequiredForBtn['mvPresentBtn'] = 11;
+      const result = component.onToolBarOffSetChange('mvPresentBtn');
+
+      expect(result).toEqual("button-hidden-on-toolbar");
+    });
+
+    it('should mvPresentBtn width is less than mvToolbarMain width then "button-hidden-on-dropdown" should be return', () => {
+
+      const mockMvToolbarMain = jasmine.createSpyObj("ElementRef", [], { 'nativeElement': { 'offsetWidth': 12 } })
+      component.mvToolbarMain = mockMvToolbarMain;
+      component.widthRequiredForBtn['mvPresentBtn'] = 11;
+      const result = component.onToolBarOffSetChange('mvPresentBtn');
+
+      expect(result).toEqual("button-hidden-on-dropdown");
+    });
+  });
+
+  it('should update page number', () => {
+    component.toolbarEvents.setPage(4);
+    expect(component.pageNumber).toEqual(4);
+  });
+
+  it('should toggle highlight toolbar', () => {
+    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).not.toHaveClass('toggled');
+    component.onClickHighlightToggle();
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).toHaveClass('toggled');
+  });
+
+  it('should toggle off the highlight toolbar', () => {
+    component.onClickHighlightToggle();
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).toHaveClass('toggled');
+    component.onClickHighlightToggle();
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).not.toHaveClass('toggled');
+  });
+
+  it('should emit rotate event with 90 degrees', () => {
+    const rotateSpy = spyOn(component.toolbarEvents.rotateSubject, 'next');
+    const rotateClkwiseBtn = nativeElement.querySelector('button[id=mvRotateRightBtn]');
+    rotateClkwiseBtn.click();
+
+    expect(rotateSpy).toHaveBeenCalledWith(90);
+  });
+
+  it('should emit rotate event with 270 degrees', () => {
+    const rotateSpy = spyOn(component.toolbarEvents.rotateSubject, 'next');
+    const rotateCtrClkwiseBtn = nativeElement.querySelector('button[id=mvRotateLeftBtn]');
+    rotateCtrClkwiseBtn.click();
+
+    expect(rotateSpy).toHaveBeenCalledWith(270);
+  });
+
+  it('should emit zoom out event', () => {
+    const stepZoom = spyOn(component.toolbarEvents.stepZoomSubject, 'next');
+    const zoomOutButton = nativeElement.querySelector('button[id=mvMinusBtn]');
+    zoomOutButton.click();
+
+    expect(stepZoom).toHaveBeenCalledWith(-0.1);
+  });
+
+  it('should emit step zoom in event', () => {
+    const stepZoom = spyOn(component.toolbarEvents.stepZoomSubject, 'next');
+    const zoomInButton = nativeElement.querySelector('button[id=mvPlusBtn]');
+    zoomInButton.click();
+
+    expect(stepZoom).toHaveBeenCalledWith(0.1);
+  });
+
+  it('should emit zoom in event', () => {
+    const zoomSpy = spyOn(component.toolbarEvents.zoomSubject, 'next');
+    component.zoom('25');
+
+    expect(zoomSpy).toHaveBeenCalledWith(25);
+  });
+
+  it('should emit print event', () => {
+    const printSpy = spyOn(component.toolbarEvents.printSubject, 'next');
+    const printButton = nativeElement.querySelector('button[id=mvPrintBtn]');
+    printButton.click();
+
+    expect(printSpy).toHaveBeenCalledWith();
+  });
+
+  it('should emit download event', () => {
+    const downloadSpy = spyOn(component.toolbarEvents.downloadSubject, 'next');
+    const downloadButton = nativeElement.querySelector('button[id=mvDownloadBtn]');
+    downloadButton.click();
+
+    expect(downloadSpy).toHaveBeenCalledWith();
+  });
+
+  it('should return true is contentType equals pdf', () => {
+    component.contentType = 'pdf';
+
+    expect(component.isPdf()).toBeTrue();
+  });
+
+  it('should invert toggleCommentsPanel value', () => {
+    const value = toolbarService.commentsPanelVisible.getValue();
+    const toggleCommentsPanelSpy = spyOn(toolbarService, 'toggleCommentsPanel');
+    component.toggleCommentsPanel();
+
+    expect(toggleCommentsPanelSpy).toHaveBeenCalledWith(!value);
+  });
+
+  it('should call toggleRedactionMode', () => {
+    const toggleRedactionModeSpy = spyOn(toolbarService, 'toggleRedactionMode');
+    component.toggleRedactBar();
+
+    expect(toggleRedactionModeSpy).toHaveBeenCalled();
+  });
+
+  it('should call toggleGrabNDrag', () => {
+    const toggleGrabNDragSpy = spyOn(toolbarService, 'toggleGrabNDrag');
+    component.toggleGrabNDrag();
+
+    expect(toggleGrabNDragSpy).toHaveBeenCalled();
+  });
+
+  it('should call onControlPrint', () => {
+    const togglePrint = spyOn(toolbarService, 'print');
+    const mockEvent = jasmine.createSpyObj('event', ['preventDefault']);
+    component.onControlPrint(mockEvent);
+
+    expect(togglePrint).toHaveBeenCalled();
+  });
+});

package/projects/media-viewer/src/lib/toolbar/main-toolbar/main-toolbar.component.ts

@@ -0,0 +1,239 @@
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ToolbarEventService } from '../toolbar-event.service';
+import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
+import { NumberHelperService } from '../../../lib/shared/util/services/number.helper.service';
+import { IcpEventService } from '../icp-event.service';
+import { HtmlTemplatesHelper } from '../../shared/util/helpers/html-templates.helper';
+
+@Component({
+    selector: 'mv-main-toolbar',
+    templateUrl: './main-toolbar.component.html',
+    standalone: false
+})
+export class MainToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
+
+  @Input() enableAnnotations = false;
+  @Input() enableRedactions = false;
+  @Input() enableICP = false;
+  @Input() contentType = null;
+
+  @ViewChild('zoomSelect', { static: false }) public zoomSelect: ElementRef;
+  @ViewChild('mvToolbarMain', { static: false }) public mvToolbarMain: ElementRef<HTMLElement>;
+  @ViewChild('dropdownMenu', { static: false }) public mvMenuItems: ElementRef<HTMLElement>;
+
+  private readonly subscriptions: Subscription[] = [];
+
+  public icpEnabled = false;
+  public redactionEnabled = false;
+  public showCommentsPanel: boolean;
+  public redactAllInProgress: boolean;
+
+  public pageNumber = 1;
+  public pageCount = 0;
+  public isDropdownMenuOpen = false;
+  public isBookmarksOpen = false;
+  public isIndexOpen = false;
+  public isRedactOpen = false;
+  public isCommentsOpen = false;
+  public dropdownMenuPositions = [
+    new ConnectionPositionPair(
+      {
+        originX: 'end',
+        originY: 'bottom'
+      },
+      {
+        overlayX: 'end',
+        overlayY: 'top'
+      },
+      0,
+      3)
+  ];
+
+  public zoomScales = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2.5, 3, 5];
+
+  allButtonsWidth = 0;
+  widthRequiredForBtn: { [id: string]: number } = {};
+
+  public constructor(
+    public readonly toolbarEvents: ToolbarEventService,
+    public readonly toolbarButtons: ToolbarButtonVisibilityService,
+    private readonly cdr: ChangeDetectorRef,
+    private readonly numberHelper: NumberHelperService,
+    private readonly icpEventService: IcpEventService
+  ) {
+  }
+
+  public ngOnInit() {
+    this.subscriptions.push(
+      this.toolbarEvents.setCurrentPageSubject.subscribe(pageNumber => this.setCurrentPage(pageNumber)),
+      this.toolbarEvents.setCurrentPageInputValueSubject.subscribe(pageNumber => this.pageNumber = pageNumber),
+      this.toolbarEvents.getPageCount().subscribe(count => this.pageCount = count),
+      this.icpEventService.enabled.subscribe(enabled => {
+        this.icpEnabled = enabled;
+        if (this.icpEnabled) {
+          this.toolbarEvents.toggleCommentsPanel(!enabled);
+          this.toolbarEvents.sidebarOpen.next(false);
+        }
+      }),
+      this.toolbarEvents.redactionMode.subscribe(enabled => {
+        this.redactionEnabled = enabled;
+      }),
+      this.toolbarEvents.redactAllInProgressSubject.subscribe(disable => {
+        this.redactAllInProgress = disable;
+      }),
+    );
+  }
+
+  public ngOnDestroy(): void {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+
+  public ngAfterViewInit() {
+    Array.from(this.mvToolbarMain.nativeElement.children).forEach((button: HTMLElement) => {
+      this.allButtonsWidth += HtmlTemplatesHelper.getAdjustedBoundingRect(button).width;
+      this.widthRequiredForBtn[button.id] = this.allButtonsWidth;
+    });
+    this.cdr.detectChanges();
+  }
+
+  @HostListener('window:resize', [])
+  public onResize() {
+    this.cdr.detectChanges();
+  }
+
+  @HostListener('document:keydown.control.p', ['$event'])
+  @HostListener('document:keydown.meta.p', ['$event'])
+  public onControlPrint(event: KeyboardEvent) {
+    event.preventDefault();
+    this.printFile();
+  }
+
+  public onClickHighlightToggle() {
+    this.toolbarEvents.toggleHighlightToolbar();
+  }
+  public onClickDrawToggle() {
+    this.toolbarEvents.toggleDrawMode();
+  }
+
+  public toggleIndexSideBar() {
+    const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+    const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+    if (!(sidebarOpen && !sidebarView)) {
+      this.toolbarEvents.toggleSideBar(!sidebarOpen);
+    }
+    this.toolbarEvents.toggleSideBarView(true);
+    this.isIndexOpen = !this.isIndexOpen;
+  }
+
+  public onToolBarOffSetChange(buttonId: string) {
+    if (this.mvToolbarMain && this.mvToolbarMain.nativeElement.offsetWidth < this.widthRequiredForBtn[buttonId]) {
+      return "button-hidden-on-toolbar";
+
+    }
+    return "button-hidden-on-dropdown";
+  }
+
+  public toggleBookmarksSideBar() {
+    const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+    const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+    if (!(sidebarOpen && sidebarView)) {
+      this.toolbarEvents.toggleSideBar(!sidebarOpen);
+    }
+    this.toolbarEvents.toggleSideBarView(false);
+    this.isBookmarksOpen = !this.isBookmarksOpen;
+  }
+
+  public togglePresentBar() {
+    this.toolbarEvents.searchBarHidden.next(true);
+    this.icpEventService.enable();
+  }
+
+  public increasePageNumber() {
+    this.toolbarEvents.incrementPage(1);
+  }
+
+  public decreasePageNumber() {
+    this.toolbarEvents.incrementPage(-1);
+  }
+
+  public onPageNumberInputChange(pageNumber: string) {
+    if (Number(pageNumber) < 1) {
+      pageNumber = '1';
+    }
+    if (Number(pageNumber) > this.pageCount) {
+      pageNumber = this.pageCount.toString();
+    }
+
+    this.toolbarEvents.setPage(Number.parseInt(pageNumber, 10));
+  }
+
+  private setCurrentPage(pageNumber: number) {
+    this.pageNumber = pageNumber;
+  }
+
+  public rotate(rotation: number) {
+    this.toolbarEvents.rotate(rotation);
+  }
+
+  public printFile() {
+    this.toolbarEvents.print();
+  }
+
+  public downloadFile() {
+    this.toolbarEvents.download();
+  }
+
+  public zoom(zoomFactor: string) {
+    this.toolbarEvents.zoom(+zoomFactor);
+  }
+
+  public stepZoom(zoomFactor: number) {
+    this.toolbarEvents.stepZoom(zoomFactor);
+    this.zoomSelect.nativeElement.selected = 'selected';
+  }
+
+  public toggleCommentsPanel() {
+    this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+    this.isCommentsOpen = !this.isCommentsOpen;
+  }
+
+  public toggleRedactBar() {
+    this.toolbarEvents.toggleRedactionMode();
+    this.isRedactOpen = !this.isRedactOpen;
+  }
+
+  public toggleGrabNDrag() {
+    this.toolbarEvents.toggleGrabNDrag();
+  }
+
+  public isPdf() {
+    return this.contentType === 'pdf';
+  }
+
+  public toggleSearchBar() {
+    this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+  }
+
+  public toggleMoreOptions() {
+    this.isDropdownMenuOpen = !this.isDropdownMenuOpen;
+    setTimeout(() => {
+      if (this.mvMenuItems) {
+        this.mvMenuItems.nativeElement.focus();
+      }
+    }, 100);
+  }
+}

package/projects/media-viewer/src/lib/toolbar/redaction-search-bar/redaction-search-bar.component.html

@@ -0,0 +1,76 @@
+<div
+  *ngIf="openSearchModal"
+  class="searchbar redaction-search-bar govuk-!-padding-3"
+>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full govuk-!-padding-right-0">
+      <div class="redaction-search-buttons-area">
+        <button
+          id="mvCloseBtn"
+          #mvCloseBtn
+          class="mv-button searchbar-button--close"
+          title="Close Search"
+          data-l10n-id="mvRedactBtn"
+          (click)="onCloseSearchModal()"
+        ></button>
+      </div>
+      <input
+        id="search_input"
+        class="govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5"
+        type="text"
+        aria-label="Redact from search"
+        #findInput
+        title="Redact from search"
+        placeholder="{{ titleText + ' from search...' | rpxTranslate }}"
+        data-l10n-id="search_input"
+        [ngModel]="searchText"
+        (ngModelChange)="searchText = $event"
+        (keydown.escape)="onEscapeKeyPress($event)"
+        (keydown.enter)="onEnterKeyPress($event)"
+      />
+      <div class="redaction-search-buttons-area">
+        <button
+          id="mvSearchAllBtn"
+          class="govuk-button govuk-!-margin-bottom-0"
+          data-module="govuk-button"
+          (click)="search()"
+          [disabled]="redactAllInProgress"
+        >
+          {{ "Search" | rpxTranslate }}
+        </button>
+        <button
+          id="mvRedactAllBtn"
+          class="govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0"
+          data-module="govuk-button"
+          (click)="search(false)"
+          [disabled]="redactAllInProgress || resultCount <= 0"
+        >
+          {{ titleText + " all" | rpxTranslate }}
+        </button>
+      </div>
+      <div
+        class="govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text"
+      >
+        <span
+          id="findRedactResultsCount"
+          class="govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0"
+          ><h4
+            class="govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1"
+            *ngIf="redactAllInProgress"
+          >
+            {{ inProgressText + " in progress" | rpxTranslate }}
+          </h4>
+          {{ redactAllInProgress ? "" : resultsText }}</span
+        >
+        <span>
+          <h5
+            id="redactAllInProgressCount"
+            class="govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1"
+          >
+            {{ redactAllInProgress ? redactAllText : "" }}
+          </h5>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

package/projects/media-viewer/src/lib/toolbar/redaction-search-bar/redaction-search-bar.component.scss

@@ -0,0 +1,15 @@
+.redaction-search-buttons-area {
+  display: flex;
+  flex-direction: row;
+  padding-top: 0.5rem;
+}
+
+.redaction-search-bar {
+  width: 20rem;
+  left: 73%;
+  top: 2%;
+}
+
+.redaction-status-text {
+  height: 2.6rem;
+}