diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index 4e12d8435..417a97cd6 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -25,7 +25,7 @@
[style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'"
>
{{ dataTotal }}
- {{ subtitle | translate }}
+ {{ subtitle | translate }}
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
index e3e8ddbac..cb54c37e8 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
@@ -19,6 +19,10 @@
justify-content: center;
align-items: center;
box-sizing: border-box;
+
+ > div {
+ text-align: center;
+ }
}
.breakdown-container {
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 b2a940dec..0ef07343e 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
@@ -89,7 +89,7 @@
[class.pointer]="canOpenProject(pw)"
>
-
+
{{ pw.project.projectName }}
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 4395556ac..52f377473 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
@@ -123,14 +123,14 @@
-
+
{{ fileStatus.filename }}
@@ -155,11 +159,13 @@
-
- {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
+
+
+ {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
+
-
+
@@ -168,23 +174,38 @@
>
-
+
-
+
+
+
+
{
+ this.appStateService.activateProject(params.projectId);
+ });
+
+ this.appStateService.fileStatusChanged.subscribe(() => {
+ this._calculateChartConfig();
+ });
}
- ];
- public sortingOption: SortingOption = this.sortingOptions[0];
- public documentsChartData: DoughnutChartConfig[] = [];
- constructor(
- public readonly appStateService: AppStateService,
- public readonly userService: UserService,
- private readonly _activatedRoute: ActivatedRoute,
- private readonly _fileUploadControllerService: FileUploadControllerService,
- private readonly _statusControllerService: StatusControllerService,
- private readonly _notificationService: NotificationService,
- private readonly _dialogService: DialogService,
- private readonly _fileUploadService: FileUploadService,
- private readonly _uploadStatusOverlayService: UploadStatusOverlayService,
- private readonly _reanalysisControllerService: ReanalysisControllerService,
- private readonly _router: Router,
- private readonly _fileDropOverlayService: FileDropOverlayService
- ) {
- this._activatedRoute.params.subscribe((params) => {
- this.appStateService.activateProject(params.projectId);
- });
-
- this.appStateService.fileStatusChanged.subscribe(() => {
- this._calculateChartConfig();
- });
- }
-
- ngOnInit(): void {
- this._fileDropOverlayService.initFileDropHandling();
- this._calculateChartConfig();
- }
-
- ngOnDestroy(): void {
- this._fileDropOverlayService.cleanupFileDropHandling();
- }
-
- public get activeProject() {
- return this.appStateService.activeProject.project;
- }
-
- public get user() {
- return this.userService.user;
- }
-
- public get displayMembers() {
- return this.activeProject.memberIds.slice(0, 6);
- }
-
- public get overflowCount() {
- return this.activeProject.memberIds.length > 6
- ? this.activeProject.memberIds.length - 6
- : 0;
- }
-
- private _reloadProjects() {
- this.appStateService.loadAllProjects().then(() => {
- this._calculateChartConfig();
- });
- }
-
- private _calculateChartConfig() {
- const groups = groupBy(this.appStateService.activeProject.files, 'status');
- this.documentsChartData = [];
- for (const key of Object.keys(groups)) {
- this.documentsChartData.push({value: groups[key].length, color: key, label: key});
- }
- }
-
- public toggleFileSelected($event: MouseEvent, file: FileStatus) {
- $event.stopPropagation();
- const idx = this._selectedFileIds.indexOf(file.fileId);
- if (idx === -1) {
- this._selectedFileIds.push(file.fileId);
- } else {
- this._selectedFileIds.splice(idx, 1);
- }
- }
-
- public toggleSelectAll() {
- if (this.areAllFilesSelected()) {
- this._selectedFileIds = [];
- } else {
- this._selectedFileIds = this.appStateService.activeProject.files.map(
- (file) => file.fileId
- );
- }
- }
-
- public areAllFilesSelected() {
- return (
- this.appStateService.activeProject.files.length !== 0 &&
- this._selectedFileIds.length === this.appStateService.activeProject.files.length
- );
- }
-
- public isFileSelected(file: FileStatus) {
- return this._selectedFileIds.indexOf(file.fileId) !== -1;
- }
-
- public openDeleteFileDialog($event: MouseEvent, fileStatus: FileStatus) {
- this._dialogService.openDeleteFileDialog(
- $event,
- fileStatus.projectId,
- fileStatus.fileId,
- () => {
+ ngOnInit(): void {
+ this._fileDropOverlayService.initFileDropHandling();
this._calculateChartConfig();
- }
- );
- }
-
- downloadFileRedactionReport($event: MouseEvent, file: FileStatus) {
- $event.stopPropagation();
- this.appStateService.downloadFileRedactionReport(file);
- }
-
- downloadRedactionReport($event: MouseEvent) {
- $event.stopPropagation();
- this.appStateService.downloadRedactionReport();
- }
-
- public openEditProjectDialog($event: MouseEvent) {
- this._dialogService.openEditProjectDialog(
- $event,
- this.appStateService.activeProject.project
- );
- }
-
- public openDeleteProjectDialog($event: MouseEvent) {
- this._dialogService.openDeleteProjectDialog(
- $event,
- this.appStateService.activeProject.project,
- () => {
- this._router.navigate(['/ui/projects']);
- }
- );
- }
-
- public openAssignProjectMembersDialog() {
- this._dialogService.openAssignProjectMembersAndOwnerDialog(null, this.activeProject, () => {
- this._reloadProjects();
- });
- }
-
- public openAssignFileReviewerDialog($event: MouseEvent, file: FileStatus) {
- this._dialogService.openAssignFileReviewerDialog($event, file, () => {
- this._reloadProjects();
- });
- }
-
- public reanalyseFile($event: MouseEvent, fileStatus: FileStatus) {
- $event.stopPropagation();
- this._reanalysisControllerService
- .reanalyzeFile(this.appStateService.activeProject.project.projectId, fileStatus.fileId)
- .subscribe(() => {
- this._reloadProjects();
- });
- }
-
- public fileId(index, item) {
- return item.fileId;
- }
-
- public uploadFiles(files: FileList | File[]) {
- const uploadFiles: FileUploadModel[] = [];
- for (let i = 0; i < files.length; i++) {
- const file = files[i];
- uploadFiles.push({
- file: file,
- progress: 0,
- completed: false,
- error: null
- });
}
- this._fileUploadService.uploadFiles(uploadFiles);
- this._uploadStatusOverlayService.openStatusOverlay();
- }
+ ngOnDestroy(): void {
+ this._fileDropOverlayService.cleanupFileDropHandling();
+ }
- public canOpenFile(fileStatus: FileStatus): boolean {
- // TODO check correct condition for this
- return fileStatus === 'PROCESSING' || fileStatus === 'REVIEWED' || true;
- }
+ public get activeProject() {
+ return this.appStateService.activeProject.project;
+ }
- public toggleSortByAddedOn() {
- const sortedByRecent: boolean = this.sortingOption === this.sortingOptions[0];
- this.sortingOption = sortedByRecent ? this.sortingOptions[1] : this.sortingOptions[0];
- }
+ public get user() {
+ return this.userService.user;
+ }
+
+ public get displayMembers() {
+ return this.activeProject.memberIds.slice(0, 6);
+ }
+
+ public get overflowCount() {
+ return this.activeProject.memberIds.length > 6
+ ? this.activeProject.memberIds.length - 6
+ : 0;
+ }
+
+ public isPending(fileStatus: FileStatus) {
+ return fileStatus.status === FileStatus.StatusEnum.UNPROCESSED;
+ }
+
+ public isError(fileStatus: FileStatus) {
+ return fileStatus.status === FileStatus.StatusEnum.ERROR;
+ }
+
+ public isProcessing(fileStatus: FileStatus) {
+ return [FileStatus.StatusEnum.REPROCESS, FileStatus.StatusEnum.PROCESSING].includes(
+ fileStatus.status
+ );
+ }
+
+ private _reloadProjects() {
+ this.appStateService.loadAllProjects().then(() => {
+ this._calculateChartConfig();
+ });
+ }
+
+ private _calculateChartConfig() {
+ const groups = groupBy(this.appStateService.activeProject.files, 'status');
+ this.documentsChartData = [];
+ for (const key of Object.keys(groups)) {
+ this.documentsChartData.push({ value: groups[key].length, color: key, label: key });
+ }
+ }
+
+ public toggleFileSelected($event: MouseEvent, file: FileStatus) {
+ $event.stopPropagation();
+ const idx = this._selectedFileIds.indexOf(file.fileId);
+ if (idx === -1) {
+ this._selectedFileIds.push(file.fileId);
+ } else {
+ this._selectedFileIds.splice(idx, 1);
+ }
+ }
+
+ public toggleSelectAll() {
+ if (this.areAllFilesSelected()) {
+ this._selectedFileIds = [];
+ } else {
+ this._selectedFileIds = this.appStateService.activeProject.files.map(
+ (file) => file.fileId
+ );
+ }
+ }
+
+ public areAllFilesSelected() {
+ return (
+ this.appStateService.activeProject.files.length !== 0 &&
+ this._selectedFileIds.length === this.appStateService.activeProject.files.length
+ );
+ }
+
+ public isFileSelected(file: FileStatus) {
+ return this._selectedFileIds.indexOf(file.fileId) !== -1;
+ }
+
+ public openDeleteFileDialog($event: MouseEvent, fileStatus: FileStatus) {
+ this._dialogService.openDeleteFileDialog(
+ $event,
+ fileStatus.projectId,
+ fileStatus.fileId,
+ () => {
+ this._calculateChartConfig();
+ }
+ );
+ }
+
+ downloadFileRedactionReport($event: MouseEvent, file: FileStatus) {
+ $event.stopPropagation();
+ this.appStateService.downloadFileRedactionReport(file);
+ }
+
+ downloadRedactionReport($event: MouseEvent) {
+ $event.stopPropagation();
+ this.appStateService.downloadRedactionReport();
+ }
+
+ public openEditProjectDialog($event: MouseEvent) {
+ this._dialogService.openEditProjectDialog(
+ $event,
+ this.appStateService.activeProject.project
+ );
+ }
+
+ public openDeleteProjectDialog($event: MouseEvent) {
+ this._dialogService.openDeleteProjectDialog(
+ $event,
+ this.appStateService.activeProject.project,
+ () => {
+ this._router.navigate(['/ui/projects']);
+ }
+ );
+ }
+
+ public openAssignProjectMembersDialog() {
+ this._dialogService.openAssignProjectMembersAndOwnerDialog(null, this.activeProject, () => {
+ this._reloadProjects();
+ });
+ }
+
+ public openAssignFileReviewerDialog($event: MouseEvent, file: FileStatus) {
+ this._dialogService.openAssignFileReviewerDialog($event, file, () => {
+ this._reloadProjects();
+ });
+ }
+
+ public reanalyseFile($event: MouseEvent, fileStatus: FileStatus) {
+ $event.stopPropagation();
+ this._reanalysisControllerService
+ .reanalyzeFile(this.appStateService.activeProject.project.projectId, fileStatus.fileId)
+ .subscribe(() => {
+ this._reloadProjects();
+ });
+ }
+
+ public fileId(index, item) {
+ return item.fileId;
+ }
+
+ public uploadFiles(files: FileList | File[]) {
+ const uploadFiles: FileUploadModel[] = [];
+ for (let i = 0; i < files.length; i++) {
+ const file = files[i];
+ uploadFiles.push({
+ file: file,
+ progress: 0,
+ completed: false,
+ error: null
+ });
+ }
+
+ this._fileUploadService.uploadFiles(uploadFiles);
+ this._uploadStatusOverlayService.openStatusOverlay();
+ }
+ public canOpenFile(fileStatus: FileStatus): boolean {
+ // TODO check correct condition for this
+ return !this.isError(fileStatus) && (fileStatus.status === 'PROCESSING' || true);
+ }
+
+ public toggleSortByAddedOn() {
+ const sortedByRecent: boolean = this.sortingOption === this.sortingOptions[0];
+ this.sortingOption = sortedByRecent ? this.sortingOptions[1] : this.sortingOptions[0];
+ }
}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 71254fd63..9689658ca 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -393,6 +393,15 @@
},
"last-updated": {
"label": "Last updated: {{lastUpdated}}"
+ },
+ "file-pending": {
+ "label": "Pending..."
+ },
+ "file-processing": {
+ "label": "Processing..."
+ },
+ "file-error": {
+ "label": "The file has encountered an error and cannot be opened."
}
}
},
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index becfe3218..393c23129 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -32,6 +32,7 @@ body {
.right-fixed-container {
border-left: 1px solid $grey-4;
+ background: $white;
height: 100%;
width: $right-container-inside-width;
padding: $right-container-padding;
diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss
index eaddde42f..42945ee5e 100644
--- a/apps/red-ui/src/assets/styles/red-variables.scss
+++ b/apps/red-ui/src/assets/styles/red-variables.scss
@@ -7,6 +7,7 @@ $grey-3: #aaacb3;
$grey-4: #e2e4e9;
$grey-5: #d3d5da;
$grey-6: #f0f1f4;
+$grey-7: #9398a0;
$blue-1: #4875f7;
$blue-2: #48c9f7;