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

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

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

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

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

@@ -1,15 +0,0 @@
-.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;
-}