diff --git a/apps/red-ui/src/app/common/filter/filter.component.html b/apps/red-ui/src/app/common/filter/filter.component.html index 8c91c5b1f..3573e1023 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.html +++ b/apps/red-ui/src/app/common/filter/filter.component.html @@ -29,7 +29,7 @@
-
+
diff --git a/apps/red-ui/src/app/common/filter/filter.component.ts b/apps/red-ui/src/app/common/filter/filter.component.ts index 66db2bb09..f1ea84a5b 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.ts +++ b/apps/red-ui/src/app/common/filter/filter.component.ts @@ -7,7 +7,6 @@ import { SimpleChanges, TemplateRef } from '@angular/core'; -import { ManualRedactions } from '@redaction/red-ui-http'; import { AppStateService } from '../../state/app-state.service'; import { FilterModel } from './model/filter.model'; import { handleCheckedValue } from './utils/filter-utils'; @@ -42,11 +41,11 @@ export class FilterComponent implements OnChanges { } activateAllFilters() { - this._setAlLFilters(true); + this._setAllFilters(true); } deactivateAllFilters() { - this._setAlLFilters(false); + this._setAllFilters(false); } get hasActiveFilters(): boolean { @@ -67,11 +66,11 @@ export class FilterComponent implements OnChanges { filter.expanded = !filter.expanded; } - private _setAlLFilters(value: boolean) { + private _setAllFilters(value: boolean) { this.filters?.forEach((f) => { f.checked = value; - f.indeterminate = value; - f.filters.forEach((ff) => { + f.indeterminate = false; + f.filters?.forEach((ff) => { ff.checked = value; }); }); diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts index 5f049d3eb..6114a8ece 100644 --- a/apps/red-ui/src/app/dialogs/dialog.service.ts +++ b/apps/red-ui/src/app/dialogs/dialog.service.ts @@ -99,7 +99,7 @@ export class DialogService { return ref; } - public acceptSuggestion( + public openAcceptSuggestionModal( $event: MouseEvent, annotation: AnnotationWrapper ): MatDialogRef { @@ -115,7 +115,7 @@ export class DialogService { return ref; } - public rejectSuggestion( + public openRejectSuggestionModal( $event: MouseEvent, annotation: AnnotationWrapper, rejectCallback: () => void diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 61c3f2114..650ab0a9f 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -1,7 +1,7 @@
- + {{ 'file-preview.view-toggle.label' | translate }}
@@ -13,9 +13,9 @@
@@ -23,49 +23,49 @@ -
@@ -74,68 +74,68 @@
{{ pageNumber }}
-
+
{{ page }}
+ +
+ + +
+
+
+ + +
+
+ diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss index f320fc099..132adff7b 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss @@ -104,22 +104,7 @@ redaction-pdf-viewer { background-color: #f9fafb; .annotation-actions { - background: linear-gradient( - to right, - transparent 0%, - #f9fafb, - #f9fafb, - #f9fafb - ); display: flex; - align-items: center; - justify-content: flex-end; - width: 120px; - padding-right: 16px; - - .confirm { - color: $green-2; - } } } @@ -133,7 +118,25 @@ redaction-pdf-viewer { top: 0; bottom: 0; display: none; - width: 40px; + align-items: center; + justify-content: flex-end; + width: 120px; + padding-right: 16px; + background: linear-gradient( + to right, + transparent 0%, + #f9fafb, + #f9fafb, + #f9fafb + ); + + .confirm.active { + background-color: $grey-2; + } + + &.visible { + display: flex; + } } } } diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index 7b9195f45..e495a7234 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -29,6 +29,7 @@ import { FileActionService } from '../service/file-action.service'; import { AnnotationDrawService } from '../service/annotation-draw.service'; import { AnnotationProcessingService } from '../service/annotation-processing.service'; import { FilterModel } from '../../../common/filter/model/filter.model'; +import { MatMenuTrigger } from '@angular/material/menu'; const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; @@ -38,24 +39,6 @@ const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; styleUrls: ['./file-preview-screen.component.scss'] }) export class FilePreviewScreenComponent implements OnInit { - private projectId: string; - private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED'; - private instance: WebViewerInstance; - private _dialogRef: MatDialogRef; - - @ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent; - @ViewChild('annotationsElement') private _annotationsElement: ElementRef; - @ViewChild('quickNavigation') private _quickNavigationElement: ElementRef; - - public fileData: FileDataModel; - public fileId: string; - public annotations: AnnotationWrapper[] = []; - public displayedAnnotations: { [key: number]: { annotations: AnnotationWrapper[] } } = {}; - public selectedAnnotation: AnnotationWrapper; - public pagesPanelActive = true; - public viewReady = false; - filters: FilterModel[]; - constructor( public readonly appStateService: AppStateService, public readonly userService: UserService, @@ -90,6 +73,38 @@ export class FilePreviewScreenComponent implements OnInit { this._activeViewer = value ? 'REDACTED' : 'ANNOTATED'; } + public get activeViewer() { + return this.instance; + } + + public get displayedPages(): number[] { + return Object.keys(this.displayedAnnotations).map((key) => Number(key)); + } + + get activeViewerPage() { + return this.instance?.docViewer?.getCurrentPage(); + } + private projectId: string; + private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED'; + private instance: WebViewerInstance; + private _dialogRef: MatDialogRef; + + @ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent; + @ViewChild('annotationsElement') private _annotationsElement: ElementRef; + @ViewChild('quickNavigation') private _quickNavigationElement: ElementRef; + @ViewChild('menu') private _matMenuTrigger: MatMenuTrigger; + + public fileData: FileDataModel; + public fileId: string; + public annotations: AnnotationWrapper[] = []; + public displayedAnnotations: { [key: number]: { annotations: AnnotationWrapper[] } } = {}; + public selectedAnnotation: AnnotationWrapper; + public pagesPanelActive = true; + public viewReady = false; + public filters: FilterModel[]; + + private _activeSuggestion: AnnotationWrapper; + public ngOnInit(): void { this._loadFileData(); this.appStateService.fileStatusChanged.subscribe((fileStatus) => { @@ -152,14 +167,6 @@ export class FilePreviewScreenComponent implements OnInit { this._fileActionService.assignProjectReviewer(); } - public get activeViewer() { - return this.instance; - } - - public get displayedPages(): number[] { - return Object.keys(this.displayedAnnotations).map((key) => Number(key)); - } - public handleAnnotationSelected(annotationId: string) { this.selectedAnnotation = this.annotations.find((a) => a.id === annotationId); this.scrollToSelectedAnnotation(); @@ -197,10 +204,6 @@ export class FilePreviewScreenComponent implements OnInit { }); } - get activeViewerPage() { - return this.instance?.docViewer?.getCurrentPage(); - } - @debounce() private _scrollViews() { this._scrollQuickNavigation(); @@ -242,18 +245,36 @@ export class FilePreviewScreenComponent implements OnInit { } } + public isSuggestionVisible(annotation: AnnotationWrapper) { + return annotation.id === this._activeSuggestion?.id; + } + public acceptSuggestion($event: MouseEvent, annotation: AnnotationWrapper) { this.ngZone.run(() => { - this._dialogRef = this._dialogService.acceptSuggestion($event, annotation); + this._dialogRef = this._dialogService.openAcceptSuggestionModal($event, annotation); }); } + public openAcceptSuggestionMenu($event: MouseEvent, annotation: AnnotationWrapper) { + $event.preventDefault(); + this._activeSuggestion = annotation; + this._matMenuTrigger.openMenu(); + } + + public onSuggestionMenuClose() { + this._activeSuggestion = null; + } + public rejectSuggestion($event: MouseEvent, annotation: AnnotationWrapper) { this.ngZone.run(() => { - this._dialogRef = this._dialogService.rejectSuggestion($event, annotation, () => { - // TODO DELETE ANNOTATIOn - //this.activeViewer.annotManager.deleteAnnotation(annotation, false, true); - }); + this._dialogRef = this._dialogService.openRejectSuggestionModal( + $event, + annotation, + () => { + // TODO DELETE ANNOTATIOn + //this.activeViewer.annotManager.deleteAnnotation(annotation, false, true); + } + ); }); } @@ -418,6 +439,8 @@ export class FilePreviewScreenComponent implements OnInit { } preventArrowDefault($event: KeyboardEvent) { - $event.preventDefault(); + if (KEY_ARRAY.includes($event.key)) { + $event.preventDefault(); + } } } diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index c3e16403b..61c600699 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -52,14 +52,28 @@
- - {{ - 'project-listing.table-header.title.label' - | translate: { length: appStateService.allProjects?.length || 0 } - }} - +
+
+ + {{ + 'project-listing.table-header.title.label' + | translate: { length: appStateService.allProjects?.length || 0 } + }} + +
+
-
+
@@ -70,7 +84,9 @@
-
+
+
+
+
+
+
+
{{ pw.project.projectName }} diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss index ca0443bde..6a39b63a9 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss @@ -13,6 +13,10 @@ .grid-container { grid-template-columns: 2fr 1fr auto; + + &.bulk-select { + grid-template-columns: auto 2fr 1fr auto; + } } .stats-subtitle { @@ -22,6 +26,13 @@ .status-container { width: 160px; } + + .actions { + .active { + font-weight: 600; + color: $primary; + } + } } .right-fixed-container { diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index 098f7070e..b13d9372e 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Project } from '@redaction/red-ui-http'; +import { FileStatus, Project } from '@redaction/red-ui-http'; import { AppStateService, ProjectWrapper } from '../../state/app-state.service'; import { UserService } from '../../user/user.service'; import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; @@ -15,6 +15,8 @@ import * as moment from 'moment'; styleUrls: ['./project-listing-screen.component.scss'] }) export class ProjectListingScreenComponent implements OnInit { + private _selectedProjectIds: string[] = []; + public projectsChartData: DoughnutChartConfig[] = []; public documentsChartData: DoughnutChartConfig[] = []; public sortingOptions: SortingOption[] = [ @@ -26,6 +28,7 @@ export class ProjectListingScreenComponent implements OnInit { } ]; public sortingOption: SortingOption = this.sortingOptions[0]; + public bulkSelectActive = false; statusFilters: FilterModel[]; dueDateFilters: FilterModel[]; @@ -118,6 +121,10 @@ export class ProjectListingScreenComponent implements OnInit { this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project); } + public toggleBulkSelect() { + this.bulkSelectActive = !this.bulkSelectActive; + } + public getProjectStatusConfig(pw: ProjectWrapper) { const obj = pw.files.reduce((acc, file) => { const status = file.status; @@ -248,4 +255,35 @@ export class ProjectListingScreenComponent implements OnInit { } return filterMatched; } + + public toggleProjectSelected($event: MouseEvent, pw: ProjectWrapper) { + $event.stopPropagation(); + const idx = this._selectedProjectIds.indexOf(pw.project.projectId); + if (idx === -1) { + this._selectedProjectIds.push(pw.project.projectId); + } else { + this._selectedProjectIds.splice(idx, 1); + } + } + + public toggleSelectAll() { + if (this.areAllProjectsSelected()) { + this._selectedProjectIds = []; + } else { + this._selectedProjectIds = this.appStateService.allProjects.map( + (pw) => pw.project.projectId + ); + } + } + + public areAllProjectsSelected(): boolean { + return ( + this.appStateService.allProjects.length !== 0 && + this._selectedProjectIds.length === this.appStateService.allProjects.length + ); + } + + public isProjectSelected(pw: ProjectWrapper): boolean { + return this._selectedProjectIds.indexOf(pw.project.projectId) !== -1; + } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index b55b25408..75acce1d5 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -9,24 +9,36 @@
- - - - - - + + + + + + + + + + + +