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

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

@@ -1,118 +0,0 @@
-<div class="redaction">
-  <label class="govuk-label redaction-title" data-l10n-id="redaction_options">{{
-    "Redaction options" | rpxTranslate
-  }}</label>
-  <button
-    id="toggleDrawButton"
-    class="mv-button redaction-button--draw mv-tooltip"
-    [attr.data-tooltip]="'Draw a box' | rpxTranslate"
-    data-l10n-id="toggleDrawButton"
-    (click)="toggleDrawMode()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span data-l10n-id="toggleDrawButton_label">{{
-      "Draw a box" | rpxTranslate
-    }}</span>
-  </button>
-  <button
-    id="redactPageButton"
-    class="mv-button redaction-button--redact-page mv-tooltip"
-    [attr.data-tooltip]="'Redact page' | rpxTranslate"
-    data-l10n-id="redactPageButton"
-    (click)="redactPage()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span data-l10n-id="redactPageButton_label">{{
-      "Redact page" | rpxTranslate
-    }}</span>
-  </button>
-  <button
-    *ngIf="showRedactSearch"
-    id="mvRedactFromSearchBtn"
-    class="mv-button redaction-button--search mv-tooltip"
-    [attr.data-tooltip]="'From search' | rpxTranslate"
-    data-l10n-id="fromSearchButton"
-    (click)="onRedactAllSearch()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span style="width: 5rem" data-l10n-id="fromSearchButton_label">{{
-      "From search" | rpxTranslate
-    }}</span>
-  </button>
-
-  <button
-    *ngIf="toolbarButtons.showHighlightButton"
-    id="toggleHighlightButton"
-    class="mv-button redaction-button--redact mv-tooltip"
-    aria-pressed="false"
-    [attr.data-tooltip]="'Redact text' | rpxTranslate"
-    data-l10n-id="toggleTextRedactionButton"
-    (click)="toggleTextRedactionMode()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span data-l10n-id="toggleTextRedactionButton_label">{{
-      "Redact text" | rpxTranslate
-    }}</span>
-  </button>
-
-  <button
-    [disabled]="!hasRedactions || redactionAllInProgress"
-    id="mvClearBtn"
-    #mvClearBtn
-    class="mv-button redaction-button--clear mv-tooltip"
-    aria-pressed="false"
-    [attr.data-tooltip]="'Clear all' | rpxTranslate"
-    data-l10n-id="toggleClearAllButton"
-    (click)="unmarkAll()"
-  >
-    <span data-l10n-id="Clear all">{{ "Clear all" | rpxTranslate }}</span>
-  </button>
-
-  <button
-    [disabled]="!hasRedactions || redactionAllInProgress"
-    id="mvPreviewBtn"
-    class="mv-button mv-tooltip"
-    [class.redaction-button--preview]="!preview"
-    [class.redaction-button--hide-preview]="preview"
-    redaction-button--preview
-    aria-pressed="false"
-    [attr.data-tooltip]="'Preview' | rpxTranslate"
-    data-l10n-id="togglePreviewButton"
-    (click)="togglePreview()"
-  >
-    <span *ngIf="!preview" data-l10n-id="redaction-preview_label">{{
-      "Preview" | rpxTranslate
-    }}</span>
-    <span *ngIf="preview" data-l10n-id="redaction-hide-preview_label">{{
-      "Hide preview" | rpxTranslate
-    }}</span>
-  </button>
-
-  <button
-    [disabled]="!hasRedactions || redactionAllInProgress"
-    id="mvRedactBtn"
-    class="mv-button redaction-button--download mv-tooltip"
-    aria-pressed="false"
-    [attr.data-tooltip]="'Save document' | rpxTranslate"
-    data-l10n-id="mvRedactBtn"
-    (click)="redact()"
-  >
-    <span data-l10n-id="Save Document">{{
-      "Save document" | rpxTranslate
-    }}</span>
-  </button>
-
-  <button
-    id="mvCloseBtn"
-    #mvCloseBtn
-    class="mv-button redaction-button--close mv-tooltip"
-    [attr.data-tooltip]="'Close Redaction' | rpxTranslate"
-    data-l10n-id="mvRedactBtn"
-    (click)="toggleRedactBar()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span data-l10n-id="Close Redaction">{{
-      "Close Redaction" | rpxTranslate
-    }}</span>
-  </button>
-</div>

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

@@ -1,126 +0,0 @@
-import { RpxTranslationModule } from 'rpx-xui-translation';
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { StoreModule } from '@ngrx/store';
-import { reducers } from '../../store/reducers/reducers';
-import { RedactionToolbarComponent } from './redaction-toolbar.component';
-import { SearchType, ToolbarEventService } from '../toolbar-event.service';
-import { RedactionSearch } from '../redaction-search-bar/redaction-search.model';
-import { Subject } from 'rxjs';
-
-describe('RedactionToolbarComponent', () => {
-  let component: RedactionToolbarComponent;
-  let fixture: ComponentFixture<RedactionToolbarComponent>;
-  let toolbarEvents: ToolbarEventService;
-  const redactAllInProgressSubject: Subject<RedactionSearch> = new Subject<RedactionSearch>();
-
-  const toolbarEventsMock = {
-    openRedactionSearch: { next: () => { } },
-    highlightModeSubject: { next: () => { } },
-    drawModeSubject: { next: () => { } },
-    toggleRedactionPreview: () => { },
-    unmarkAll: () => { },
-    applyRedactionToDocument: () => { },
-    redactPage: () => { },
-    toggleRedactionMode: () => { },
-    redactAllInProgressSubject: redactAllInProgressSubject.asObservable()
-  };
-
-  beforeEach(() => {
-    return TestBed.configureTestingModule({
-      declarations: [RedactionToolbarComponent],
-      imports: [
-        FormsModule,
-        StoreModule.forFeature('media-viewer', reducers),
-        StoreModule.forRoot({}),
-        RpxTranslationModule.forRoot({
-          baseUrl: '',
-          debounceTimeMs: 300,
-          validity: {
-            days: 1
-          },
-          testMode: true
-        })
-      ],
-      providers: [{ provide: ToolbarEventService, useValue: toolbarEventsMock }]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RedactionToolbarComponent);
-    component = fixture.componentInstance;
-    toolbarEvents = TestBed.inject(ToolbarEventService);
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should enableSearchRedactionMode', () => {
-    spyOn(toolbarEvents.openRedactionSearch, 'next');
-
-    component.onRedactAllSearch();
-
-    expect(toolbarEvents.openRedactionSearch.next).toHaveBeenCalledOnceWith({ modeType: SearchType.Redact, isOpen: true});
-  });
-
-  it('should toggleTextRedactionMode', () => {
-    spyOn(toolbarEvents.highlightModeSubject, 'next');
-
-    component.toggleTextRedactionMode();
-
-    expect(toolbarEvents.highlightModeSubject.next).toHaveBeenCalled();
-  });
-
-  it('should toggleDrawMode', () => {
-    spyOn(toolbarEvents.drawModeSubject, 'next');
-
-    component.toggleDrawMode();
-
-    expect(toolbarEvents.drawModeSubject.next).toHaveBeenCalled();
-  });
-
-  it('should togglePreview', () => {
-    spyOn(toolbarEvents, 'toggleRedactionPreview');
-
-    component.togglePreview();
-
-    expect(toolbarEvents.toggleRedactionPreview).toHaveBeenCalled();
-  });
-
-  it('should unmarkAll', () => {
-    spyOn(toolbarEvents, 'unmarkAll');
-
-    component.unmarkAll();
-
-    expect(toolbarEvents.unmarkAll).toHaveBeenCalled();
-  });
-
-  it('should redact', () => {
-    spyOn(toolbarEvents, 'applyRedactionToDocument');
-
-    component.redact();
-
-    expect(toolbarEvents.applyRedactionToDocument).toHaveBeenCalled();
-  });
-
-  it('should redact page', () => {
-    spyOn(toolbarEvents, 'redactPage');
-    spyOn(toolbarEvents.drawModeSubject, 'next');
-
-    component.redactPage();
-
-    expect(toolbarEvents.redactPage).toHaveBeenCalled();
-    expect(toolbarEvents.drawModeSubject.next).toHaveBeenCalled();
-  });
-
-  it('should call toggleRedactionMode', () => {
-    const toggleRedactionModeSpy = spyOn(toolbarEvents, 'toggleRedactionMode');
-    component.toggleRedactBar();
-
-    expect(toggleRedactionModeSpy).toHaveBeenCalled();
-  });
-});

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

@@ -1,77 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { SearchType, ToolbarEventService } from '../toolbar-event.service';
-import { select, Store } from '@ngrx/store';
-import * as fromRedactSelectors from '../../store/selectors/redaction.selectors';
-import * as fromStore from '../../store/reducers/reducers';
-import { Subscription } from 'rxjs';
-import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
-
-
-@Component({
-    selector: 'mv-redaction-toolbar',
-    templateUrl: './redaction-toolbar.component.html',
-    standalone: false
-})
-export class RedactionToolbarComponent implements OnInit, OnDestroy {
-
-  @Input() showRedactSearch: boolean;
-
-  preview = false;
-  hasRedactions = false;
-
-  private subscriptions: Subscription[] = [];
-  redactionAllInProgress: boolean;
-
-  constructor(public readonly toolbarEventService: ToolbarEventService,
-    public readonly toolbarButtons: ToolbarButtonVisibilityService,
-    private store: Store<fromStore.AnnotationSetState>) { }
-
-  ngOnInit(): void {
-    this.subscriptions.push(this.store.pipe(select(fromRedactSelectors.getRedactionArray)).subscribe(redactions => {
-      this.hasRedactions = !!redactions.redactions.length;
-    }));
-    this.subscriptions.push(this.toolbarEventService.redactAllInProgressSubject.subscribe(inprogress => {
-      this.redactionAllInProgress = inprogress;
-    }));
-  }
-
-  onRedactAllSearch() {
-    this.toolbarEventService.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: true });
-  }
-
-  toggleTextRedactionMode() {
-    this.toolbarEventService.highlightModeSubject.next(true);
-  }
-
-  toggleDrawMode() {
-    this.toolbarEventService.drawModeSubject.next(true);
-  }
-
-  togglePreview() {
-    this.preview = !this.preview;
-    this.toolbarEventService.toggleRedactionPreview(this.preview);
-  }
-
-  unmarkAll() {
-    this.toolbarEventService.unmarkAll();
-  }
-
-  redact() {
-    this.toolbarEventService.applyRedactionToDocument();
-  }
-
-  toggleRedactBar() {
-    this.toolbarEventService.toggleRedactionMode();
-  }
-
-  redactPage() {
-    this.toolbarEventService.drawModeSubject.next(true);
-    this.toolbarEventService.redactPage();
-  }
-
-  ngOnDestroy(): void {
-    for (const subscription of this.subscriptions) {
-      subscription.unsubscribe();
-    }
-  }
-}

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

@@ -1,157 +0,0 @@
-<div
-  class="searchbar govuk-!-padding-3"
-  [hidden]="toolbarEvents.searchBarHidden | async"
->
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-full">
-      <input
-        class="govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5"
-        type="text"
-        aria-label="Search document"
-        #findInput
-        [ngModel]="searchText"
-        (ngModelChange)="searchText = $event"
-        (keydown.escape)="onEscapeKeyPress($event)"
-        (keydown.enter)="onEnterKeyPress($event)"
-        title="Search document"
-        placeholder="Search document for…"
-        tabindex="0"
-        data-l10n-id="find_input"
-      />
-      <button
-        class="govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4"
-        data-module="govuk-button"
-        (click)="search()"
-        style="position: absolute; top: 40px; right: 10px"
-      >
-        Search
-      </button>
-    </div>
-  </div>
-
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-three-quarters">
-      <span
-        id="findResultsCount"
-        class="govuk-!-display-inline-block govuk-!-margin-right-4"
-        role="status"
-        >{{ resultsText }}</span
-      >
-      <a
-        *ngIf="resultCount > 0"
-        id="findPrevious"
-        [routerLink]="[]"
-        role="button"
-        class="govuk-link govuk-link--no-visited-state govuk-!-margin-right-2"
-        (click)="searchPrev()"
-        title="Find the previous occurrence of the phrase"
-        data-l10n-id="find_previous"
-        >{{ "Prev" | rpxTranslate }}</a
-      >
-      <a
-        *ngIf="resultCount > 0"
-        id="findNext"
-        #findNext
-        [routerLink]="[]"
-        role="button"
-        class="govuk-link govuk-link--no-visited-state"
-        (click)="searchNext()"
-        title="Find the next occurrence of the phrase"
-        data-l10n-id="find_next"
-        >{{ "Next" | rpxTranslate }}</a
-      >
-    </div>
-    <div class="govuk-grid-column-one-quarter">
-      <a
-        [routerLink]="[]"
-        class="govuk-link govuk-link--no-visited-state"
-        role="button"
-        (click)="toggleAdvancedSearch()"
-        title="Advanced"
-        [attr.aria-expanded]="advancedSearchVisible"
-        aria-controls="advancedSearchVisible"
-        data-l10n-id="find_advanced"
-        style="position: absolute; top: 95px; right: 15px"
-        >{{ "Advanced" | rpxTranslate }}</a
-      >
-    </div>
-  </div>
-
-  <div
-    id="advancedSearchVisible"
-    class="govuk-grid-row"
-    *ngIf="advancedSearchVisible"
-  >
-    <div class="govuk-grid-column-full">
-      <div
-        class="govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1"
-      >
-        <fieldset class="govuk-fieldset" aria-describedby="advanced">
-          <div class="govuk-checkboxes">
-            <div class="govuk-checkboxes__item">
-              <input
-                class="govuk-checkboxes__input"
-                id="findHighlightAll"
-                name="findHighlightAll"
-                type="checkbox"
-                (change)="highlightAll = !highlightAll; search()"
-                [checked]="highlightAll"
-              />
-              <label
-                class="govuk-label govuk-checkboxes__label"
-                for="findHighlightAll"
-                data-l10n-id="find_highlight"
-              >
-                {{ "Highlight all" | rpxTranslate }}
-              </label>
-            </div>
-            <div class="govuk-checkboxes__item">
-              <input
-                class="govuk-checkboxes__input"
-                id="findMatchCase"
-                name="findMatchCase"
-                type="checkbox"
-                (change)="matchCase = !matchCase; search()"
-                [checked]="matchCase"
-              />
-              <label
-                class="govuk-label govuk-checkboxes__label"
-                for="findMatchCase"
-                data-l10n-id="find_match_case_label"
-              >
-                {{ "Match text (exact case)" | rpxTranslate }}
-              </label>
-            </div>
-            <div class="govuk-checkboxes__item">
-              <input
-                class="govuk-checkboxes__input"
-                id="findEntireWord"
-                name="findMatchCase"
-                type="checkbox"
-                (change)="wholeWord = !wholeWord; search()"
-                [checked]="wholeWord"
-              />
-              <label
-                class="govuk-label govuk-checkboxes__label"
-                for="findEntireWord"
-                data-l10n-id="find_entire_word_label"
-              >
-                {{ "Match whole words or sentences" | rpxTranslate }}
-              </label>
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    </div>
-  </div>
-  <div>
-    <button
-      id="mvCloseBtn"
-      #mvCloseBtn
-      class="mv-button searchbar-button--close"
-      title="Close Search"
-      data-l10n-id="mvRedactBtn"
-      (click)="toggleSearchBar()"
-    ></button>
-  </div>
-</div>

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

@@ -1,191 +0,0 @@
-import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
-import { SearchBarComponent } from './search-bar.component';
-import { FormsModule } from '@angular/forms';
-import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
-import { ToolbarEventService } from '../toolbar-event.service';
-import { RouterTestingModule } from '@angular/router/testing';
-import { RpxTranslationModule } from 'rpx-xui-translation';;
-
-describe('SearchBarComponent', () => {
-  let component: SearchBarComponent;
-  let fixture: ComponentFixture<SearchBarComponent>;
-  let nativeElement, searchInput;
-
-  beforeEach(() => {
-    return TestBed.configureTestingModule({
-      declarations: [SearchBarComponent],
-      imports: [
-        FormsModule,
-        RouterTestingModule,
-        RpxTranslationModule.forRoot({
-          baseUrl: '',
-          debounceTimeMs: 300,
-          validity: {
-            days: 1
-          },
-          testMode: true
-        })
-      ],
-      providers: [ToolbarButtonVisibilityService, ToolbarEventService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SearchBarComponent);
-    component = fixture.componentInstance;
-    nativeElement = fixture.debugElement.nativeElement;
-    searchInput = component.findInput.nativeElement;
-
-    searchInput.value = 'searchTerm';
-
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should not show searchbar', () => {
-    component.toolbarEvents.searchBarHidden.next(true);
-    fixture.detectChanges();
-
-    const searchbar = nativeElement.querySelector('.searchbar');
-
-    expect(searchbar.getAttribute('hidden')).toBeDefined();
-  });
-
-  it('should show searchbar after f3 keypress', fakeAsync(() => {
-    component.toolbarEvents.searchBarHidden.next(true);
-    fixture.detectChanges();
-
-    const searchbar = nativeElement.querySelector('.searchbar');
-    expect(searchbar.getAttribute('hidden')).toBeDefined();
-
-    const event = new KeyboardEvent('keydown', { 'code': 'F3' });
-    window.dispatchEvent(event);
-    // Drain the 200ms focus timeout scheduled in onWindowKeyDown
-    tick(200);
-    fixture.detectChanges();
-
-    expect(searchbar.getAttribute('hidden')).toBeNull();
-    flush();
-  }));
-
-  it('should run search event', () => {
-    const searchSpy = spyOn(component.toolbarEvents.searchSubject, 'next');
-    component.searchText = 'searchTerm';
-    const mockSearchOperation = {
-      searchTerm: 'searchTerm',
-      highlightAll: component.highlightAll,
-      matchCase: component.matchCase,
-      wholeWord: component.wholeWord,
-      previous: false,
-      reset: true
-    };
-    component.search();
-    expect(searchSpy).toHaveBeenCalledWith(mockSearchOperation);
-  });
-
-  it('should close the searchbar on escape', () => {
-    component.toolbarEvents.searchBarHidden.next(false);
-    fixture.detectChanges();
-
-    const searchbar = nativeElement.querySelector('.searchbar');
-    expect(searchbar.getAttribute('hidden')).toBeNull();
-
-    const event = new KeyboardEvent('keydown', { 'key': 'Escape' });
-    searchInput.dispatchEvent(event);
-    fixture.detectChanges();
-
-    expect(searchbar.getAttribute('hidden')).toBeDefined();
-  });
-
-  it('should not close the searchbar on non-escape keypress)', () => {
-    component.toolbarEvents.searchBarHidden.next(false);
-    fixture.detectChanges();
-
-    const searchbar = nativeElement.querySelector('.searchbar');
-    expect(searchbar.getAttribute('hidden')).toBeNull();
-
-    const event = new KeyboardEvent('keydown', { 'key': 'F' });
-    searchInput.dispatchEvent(event);
-    fixture.detectChanges();
-
-    expect(searchbar.getAttribute('hidden')).toBeNull();
-  });
-
-  it('should emit search next event', () => {
-    component.toolbarEvents.searchBarHidden.next(false);
-    const searchSpy = spyOn(component.toolbarEvents.searchSubject, 'next');
-    component.searchText = 'searchTerm';
-    component.searchNext();
-
-    const mockSearchOperation = {
-      searchTerm: 'searchTerm',
-      highlightAll: true,
-      matchCase: false,
-      wholeWord: false,
-      previous: false,
-      reset: false
-    };
-
-    expect(searchSpy).toHaveBeenCalledWith(mockSearchOperation);
-  });
-
-  it('should emit search previous event', () => {
-    component.toolbarEvents.searchBarHidden.next(false);
-    const searchSpy = spyOn(component.toolbarEvents.searchSubject, 'next');
-    component.searchText = 'searchTerm';
-    component.searchPrev();
-
-    const mockSearchOperation = {
-      searchTerm: 'searchTerm',
-      highlightAll: true,
-      matchCase: false,
-      wholeWord: false,
-      previous: true,
-      reset: false
-    };
-
-    expect(searchSpy).toHaveBeenCalledWith(mockSearchOperation);
-  });
-
-  it('should set search result count with results found', fakeAsync(() => {
-
-    component.toolbarEvents.searchResultsCountSubject.next({ current: 1, total: 4, isPrevious: false });
-    fixture.detectChanges();
-
-    const findNextEl = nativeElement.querySelector('#findNext') as HTMLAnchorElement;
-    expect(findNextEl).toBeTruthy();
-
-    const focusSpy = spyOn(findNextEl, 'focus');
-
-    expect(component.resultCount).toBeTruthy();
-    expect(component.resultsText).toEqual('Found 1 of 4');
-
-    tick(1000);
-    expect(focusSpy).toHaveBeenCalled();
-
-    flush(); // safety
-  }));
-
-  it('should set search result count with no results found', () => {
-    component.toolbarEvents.searchResultsCountSubject.next({ current: null, total: null, isPrevious: false });
-    expect(component.resultCount).toBeFalsy();
-    expect(component.resultsText).toEqual('No results found');
-  });
-
-  it('should toggle searchbar visible', () => {
-    component.toolbarEvents.searchBarHidden.next(true);
-
-    const values: boolean[] = [];
-    const sub = component.toolbarEvents.searchBarHidden.asObservable()
-      .subscribe(v => values.push(v));
-
-    component.toggleSearchBar(); // flips true -> false synchronously
-
-    expect(values[values.length - 1]).toBeFalse();
-    sub.unsubscribe();
-  });
-});