diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 8d6ee58f2..e80b66f50 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -68,6 +68,7 @@ import { FilterComponent } from './common/filter/filter.component'; import { AppInfoComponent } from './screens/app-info/app-info.component'; import { SortingComponent } from './components/sorting/sorting.component'; import { TableColNameComponent } from './components/table-col-name/table-col-name.component'; +import { ProjectDetailsComponent } from './screens/project-overview-screen/project-details/project-details.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -101,7 +102,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) { FilterComponent, AppInfoComponent, SortingComponent, - TableColNameComponent + TableColNameComponent, + ProjectDetailsComponent ], imports: [ BrowserModule, 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 6a39b63a9..c02763969 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 @@ -9,7 +9,7 @@ } .left-container { - width: calc(100vw - #{$right-container-width} - 130px); + width: calc(100vw - #{$right-container-width} - 90px); .grid-container { grid-template-columns: 2fr 1fr auto; @@ -37,7 +37,7 @@ .right-fixed-container { display: flex; - width: 470px; + width: 430px; padding-top: 50px; > div { diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html new file mode 100644 index 000000000..95ffde48c --- /dev/null +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html @@ -0,0 +1,127 @@ +
+ + + +
+ +
+ {{ appStateService.activeProject.project.projectName }} +
+ +
+ +
+ +
+
+
+ +
+
+
+{{ overflowCount }}
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+ + {{ 'project-overview.legend.contains-hints.label' | translate }} +
+
+ + {{ 'project-overview.legend.contains-redactions.label' | translate }} +
+
+ + {{ 'project-overview.legend.contains-suggestions.label' | translate }} +
+
+ +
+
+ + {{ + 'project-overview.project-details.stats.documents.label' + | translate: { count: appStateService.activeProject.files.length } + }} +
+
+ + {{ + 'project-overview.project-details.stats.people.label' + | translate: { count: appStateService.activeProject.project.memberIds.length } + }} +
+
+ + {{ + 'project-overview.project-details.stats.analysed-pages.label' + | translate: { count: appStateService.activeProject.totalNumberOfPages } + }} +
+
+ + {{ + 'project-overview.project-details.stats.created-on.label' + | translate + : { date: appStateService.activeProject.project.date | date: 'd MMM. yyyy' } + }} + +
+
+ + {{ + 'project-overview.project-details.stats.due-date.label' + | translate + : { date: appStateService.activeProject.project.dueDate | date: 'd MMM. yyyy' } + }} +
+
+ +
+
+
{{ appStateService.activeProject.project.description }}
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss new file mode 100644 index 000000000..2a0234af9 --- /dev/null +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss @@ -0,0 +1,37 @@ +.members-container { + gap: 5px; +} + +.legend { + display: flex; + flex-direction: column; + gap: 8px; + + > div { + display: flex; + gap: 8px; + align-items: center; + } +} + +.stats-subtitle { + gap: 0; + flex-direction: column; + align-items: flex-start; +} + +.mt-8 { + margin-top: 8px; +} + +.mt-16 { + margin-top: 16px; +} + +.mt-24 { + margin-top: 24px; +} + +.mt-32 { + margin-top: 32px; +} diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts new file mode 100644 index 000000000..3beee9eee --- /dev/null +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts @@ -0,0 +1,82 @@ +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { AppStateService } from '../../../state/app-state.service'; +import { UserService } from '../../../user/user.service'; +import { groupBy } from '../../../utils/functions'; +import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; +import { DialogService } from '../../../dialogs/dialog.service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'redaction-project-details', + templateUrl: './project-details.component.html', + styleUrls: ['./project-details.component.scss'] +}) +export class ProjectDetailsComponent implements OnInit { + public documentsChartData: DoughnutChartConfig[] = []; + @Output() public reloadProjects = new EventEmitter(); + + constructor( + public readonly appStateService: AppStateService, + public readonly userService: UserService, + private readonly _dialogService: DialogService, + private readonly _router: Router + ) {} + + ngOnInit(): void {} + + public get user() { + return this.userService.user; + } + + public get displayMembers() { + return this.appStateService.activeProject.project.memberIds.slice(0, 6); + } + + public get overflowCount() { + return this.appStateService.activeProject.project.memberIds.length > 6 + ? this.appStateService.activeProject.project.memberIds.length - 6 + : 0; + } + + 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.appStateService.activeProject.project, + () => { + this.reloadProjects.emit(); + } + ); + } + + public downloadRedactionReport($event: MouseEvent) { + $event.stopPropagation(); + this.appStateService.downloadRedactionReport(); + } + + public calculateChartConfig() { + if (this.appStateService.activeProject) { + 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 }); + } + } + } +} 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 8ac32aad1..30297db76 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 @@ -1,7 +1,8 @@
@@ -141,7 +142,12 @@ " [routerLink]=" canOpenFile(fileStatus) - ? ['/ui/projects/' + activeProject.projectId + '/file/' + fileStatus.fileId] + ? [ + '/ui/projects/' + + appStateService.activeProject.project.projectId + + '/file/' + + fileStatus.fileId + ] : [] " > @@ -277,120 +283,10 @@ -
-
- - - -
- -
-
- - {{ appStateService.activeProject.files.length }} -
-
- - {{ appStateService.activeProject.totalNumberOfPages }} -
-
- - {{ appStateService.activeProject.project.memberIds.length }} -
-
- - {{ appStateService.activeProject.project.date | date: 'd MMM. yyyy' }} -
-
- - {{ appStateService.activeProject.project.dueDate | date: 'mediumDate' }} -
-
- -
- {{ appStateService.activeProject.project.projectName }} -
- -
- -
- -
- {{ appStateService.activeProject.project.description }} -
- -
-
-
-
- -
-
-
+{{ overflowCount }}
-
-
-
+
-
-
-
- -
- -
- -
-
- - {{ 'project-overview.legend.contains-hints.label' | translate }} -
-
- - {{ 'project-overview.legend.contains-redactions.label' | translate }} -
-
- - {{ 'project-overview.legend.contains-suggestions.label' | translate }} -
-
+
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index 8204dc11c..a94a1dd50 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -1,4 +1,5 @@ @import '../../../assets/styles/red-variables'; +@import '../../../assets/styles/red-mixins'; .file-upload-input { display: none; @@ -57,24 +58,7 @@ } } -.project-details-container { - .members-container { - gap: 5px; - } -} - -.legend { - display: flex; - flex-direction: column; - gap: 8px; - - > div { - display: flex; - gap: 8px; - align-items: center; - } -} - -.mt-32 { - margin-top: 32px; +.right-fixed-container { + overflow-y: scroll; + @include no-scroll-bar(); } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index a17c7ba68..40480c482 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -13,14 +13,14 @@ import { FileUploadModel } from '../../upload/model/file-upload.model'; import { FileUploadService } from '../../upload/file-upload.service'; import { UploadStatusOverlayService } from '../../upload/upload-status-dialog/service/upload-status-overlay.service'; import { UserService } from '../../user/user.service'; -import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; -import { groupBy, humanize } from '../../utils/functions'; +import { humanize } from '../../utils/functions'; import { DialogService } from '../../dialogs/dialog.service'; import { TranslateService } from '@ngx-translate/core'; import { FileActionService } from '../file/service/file-action.service'; import { FilterModel } from '../../common/filter/model/filter.model'; import * as moment from 'moment'; import { SortingComponent, SortingOption } from '../../components/sorting/sorting.component'; +import { ProjectDetailsComponent } from './project-details/project-details.component'; @Component({ selector: 'redaction-project-overview-screen', @@ -29,8 +29,6 @@ import { SortingComponent, SortingOption } from '../../components/sorting/sortin }) export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private _selectedFileIds: string[] = []; - - public documentsChartData: DoughnutChartConfig[] = []; public bulkSelectActive = false; public statusFilters: FilterModel[]; @@ -39,6 +37,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public displayedFiles: FileStatus[] = []; + @ViewChild('projectDetailsComponent', { static: true }) + private _projectDetailsComponent: ProjectDetailsComponent; + @ViewChild('sortingComponent', { static: true }) public sortingComponent: SortingComponent; public sortingOption: SortingOption = { column: 'added', order: 'desc' }; @@ -78,24 +79,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { 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; - } - public isPending(fileStatus: FileStatus) { return fileStatus.status === FileStatus.StatusEnum.UNPROCESSED; } @@ -138,9 +125,11 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { ), action: () => this._reanalysisControllerService - .reanalyzeProject(this.activeProject.projectId) + .reanalyzeProject( + this.appStateService.activeProject.project.projectId + ) .toPromise() - .then(() => this._reloadProjects()) + .then(() => this.reloadProjects()) }, { title: this._translateService.instant( @@ -152,7 +141,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { ); } - private _reloadProjects() { + public reloadProjects() { this.appStateService.loadAllProjects().then(() => { this._calculateData(); }); @@ -161,17 +150,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private _calculateData(): void { this._computeAllFilters(); this._filterFiles(); - this._calculateChartConfig(); - } - - private _calculateChartConfig() { - if (this.appStateService.activeProject) { - 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 }); - } - } + this._projectDetailsComponent.calculateChartConfig(); } public toggleFileSelected($event: MouseEvent, file: FileStatus) { @@ -221,37 +200,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { 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 assignReviewer($event: MouseEvent, file: FileStatus) { $event.stopPropagation(); - this._fileActionService.assignProjectReviewer(file, () => this._reloadProjects()); + this._fileActionService.assignProjectReviewer(file, () => this.reloadProjects()); } public reanalyseFile($event: MouseEvent, fileStatus: FileStatus) { @@ -259,7 +210,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this._reanalysisControllerService .reanalyzeFile(this.appStateService.activeProject.project.projectId, fileStatus.fileId) .subscribe(() => { - this._reloadProjects(); + this.reloadProjects(); }); } diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 7845c2700..b17b43a7d 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -397,9 +397,6 @@ } }, "project-details": { - "project-team": { - "label": "Projektteam" - }, "charts": { "total-documents": { "label": "Dokumente insgesamt" diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index adf94761b..8b3dd79c1 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -411,13 +411,30 @@ } }, "project-details": { - "project-team": { - "label": "Review Team" - }, "charts": { "total-documents": { "label": "Total Documents" } + }, + "stats": { + "documents": { + "label": "{{count}} documents" + }, + "analysed-pages": { + "label": "{{count}} analysed pages" + }, + "people": { + "label": "{{count}} people" + }, + "created-on": { + "label": "Created on {{date}}" + }, + "due-date": { + "label": "Due {{date}}" + } + }, + "description": { + "label": "Description" } }, "header": { diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index f61275622..1bfe2fc02 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -55,18 +55,17 @@ .stats-subtitle { display: flex; + gap: 12px; > div { display: flex; justify-content: center; align-items: center; - } - gap: 12px; - - mat-icon { - width: 10px; - margin-right: 4px; + mat-icon { + width: 10px; + margin-right: 4px; + } } } 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 db111d584..d0c4b62c5 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -33,7 +33,7 @@ body { .right-fixed-container { border-left: 1px solid $grey-4; background: $white; - height: 100%; + height: calc(100vh - 110px - 2 * #{$right-container-padding}); width: $right-container-inside-width; padding: $right-container-padding; position: fixed; diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index 7063c3ac8..c4876cd03 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -28,7 +28,7 @@ $dark: $black; $separator: rgba(226, 228, 233, 0.9); $right-container-inside-width: 340px; -$right-container-padding: 16px; +$right-container-padding: 24px; $right-container-width: calc( #{$right-container-inside-width} + 2 *#{$right-container-padding} + 1px ); diff --git a/tools/auto-i18n/de.json b/tools/auto-i18n/de.json index b1d8b9b29..2c40eb9a2 100644 --- a/tools/auto-i18n/de.json +++ b/tools/auto-i18n/de.json @@ -192,7 +192,6 @@ } }, "project-details": { - "project-team": { "label": "Projektteam" }, "charts": { "total-documents": { "label": "Dokumente insgesamt" } } }, "header": { "label": "Projektübersicht" },