diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index b9e4ee43a..d2975bc4a 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -71,6 +71,8 @@ import { TableColNameComponent } from './components/table-col-name/table-col-nam import { ProjectDetailsComponent } from './screens/project-overview-screen/project-details/project-details.component'; import { PageIndicatorComponent } from './screens/file/page-indicator/page-indicator.component'; import { NeedsWorkBadgeComponent } from './screens/common/needs-work-badge/needs-work-badge.component'; +import { ProjectOverviewEmptyComponent } from './screens/empty-states/project-overview-empty/project-overview-empty.component'; +import { ProjectListingEmptyComponent } from './screens/empty-states/project-listing-empty/project-listing-empty.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -107,7 +109,9 @@ export function HttpLoaderFactory(httpClient: HttpClient) { TableColNameComponent, ProjectDetailsComponent, PageIndicatorComponent, - NeedsWorkBadgeComponent + NeedsWorkBadgeComponent, + ProjectOverviewEmptyComponent, + ProjectListingEmptyComponent ], imports: [ BrowserModule, diff --git a/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.html b/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.html new file mode 100644 index 000000000..a2fd1faef --- /dev/null +++ b/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.html @@ -0,0 +1,13 @@ +
+
+ +
diff --git a/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.scss b/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.ts b/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.ts new file mode 100644 index 000000000..1cae7a6c4 --- /dev/null +++ b/apps/red-ui/src/app/screens/empty-states/project-listing-empty/project-listing-empty.component.ts @@ -0,0 +1,13 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { UserService } from '../../../user/user.service'; + +@Component({ + selector: 'redaction-project-listing-empty', + templateUrl: './project-listing-empty.component.html', + styleUrls: ['./project-listing-empty.component.scss'] +}) +export class ProjectListingEmptyComponent { + @Output() addProjectRequest = new EventEmitter(); + + constructor(public userService: UserService) {} +} diff --git a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html new file mode 100644 index 000000000..99532d0a2 --- /dev/null +++ b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html @@ -0,0 +1,34 @@ +
+
+ +
+
+ + + + + +
+
diff --git a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss new file mode 100644 index 000000000..450d3794e --- /dev/null +++ b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss @@ -0,0 +1,9 @@ +.file-upload-input { + display: none; +} + +.close-btn { + position: absolute; + top: 10px; + right: 14px; +} diff --git a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts new file mode 100644 index 000000000..22b3cb17f --- /dev/null +++ b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts @@ -0,0 +1,13 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { AppStateService } from '../../../state/app-state.service'; + +@Component({ + selector: 'redaction-project-overview-empty', + templateUrl: './project-overview-empty.component.html', + styleUrls: ['./project-overview-empty.component.scss'] +}) +export class ProjectOverviewEmptyComponent { + @Output() uploadFiles = new EventEmitter(); + + constructor(public appStateService: AppStateService) {} +} 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 cd66efaa6..afc46f403 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 @@ -1,266 +1,279 @@ -
-
-
- - - - -
- -
- -
-
-
-
-
- - {{ - 'project-listing.table-header.title' - | translate: { length: displayedProjects.length || 0 } - }} - -
- -
-
- - -
+
+
+
+
+ + + +
+ +
-
-
- - - - - - - - - -
- -
-
+
+
+
+
+ + {{ + 'project-listing.table-header.title' + | translate: { length: displayedProjects.length || 0 } + }} +
-
-
- {{ pw.project.projectName }} +
+
+ + +
+
+ +
+
+ + + + + + + + + +
+ +
+
+
-
-
- - {{ documentCount(pw) }} + +
+
+ {{ pw.project.projectName }}
-
- - {{ pw.totalNumberOfPages }} -
-
- - {{ userCount(pw) }} -
-
- - {{ pw.project.date | date: 'mediumDate' }} -
-
- - {{ pw.project.dueDate | date: 'mediumDate' }} +
+
+ + {{ documentCount(pw) }} +
+
+ + {{ pw.totalNumberOfPages }} +
+
+ + {{ userCount(pw) }} +
+
+ + {{ pw.project.date | date: 'mediumDate' }} +
+
+ + {{ pw.project.dueDate | date: 'mediumDate' }} +
-
-
- -
-
- -
-
- +
+ +
+
+ +
+
+ -
- +
+ - + - - - + + + +
-
-
-
- +
+
+ -
-
- -
-
{{ totalPages }}
-
+
+
+ +
+
{{ totalPages }}
+
+
-
-
- -
-
{{ totalPeople }}
-
+
+ +
+
{{ totalPeople }}
+
+
-
-
- +
+ +
-
+
+ + 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 70381e9fb..b86c2a2a8 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 @@ -37,7 +37,6 @@ export class ProjectListingScreenComponent implements OnInit { public needsWorkFilters: FilterModel[]; public displayedProjects: ProjectWrapper[] = []; - @ViewChild('sortingComponent', { static: true }) public sortingComponent: SortingComponent; public sortingOption: SortingOption = { column: 'projectDate', order: 'desc' }; constructor( @@ -49,7 +48,6 @@ export class ProjectListingScreenComponent implements OnInit { ) {} public ngOnInit(): void { - this.sortingComponent.setOption(this.sortingOption); this.appStateService.reset(); this._calculateData(); this.appStateService.fileStatusChanged.subscribe(() => { 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 index 384cf25af..171c22094 100644 --- 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 @@ -1,4 +1,4 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; import { AppStateService } from '../../../state/app-state.service'; import { UserService } from '../../../user/user.service'; import { groupBy } from '../../../utils/functions'; @@ -18,11 +18,17 @@ export class ProjectDetailsComponent implements OnInit { constructor( public readonly appStateService: AppStateService, public readonly userService: UserService, + private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _dialogService: DialogService, private readonly _router: Router ) {} - ngOnInit(): void {} + ngOnInit(): void { + this.calculateChartConfig(); + this.appStateService.fileStatusChanged.subscribe((event) => { + this.calculateChartConfig(); + }); + } public get user() { return this.userService.user; @@ -77,6 +83,7 @@ export class ProjectDetailsComponent implements OnInit { for (const key of Object.keys(groups)) { this.documentsChartData.push({ value: groups[key].length, color: key, label: key }); } + this._changeDetectorRef.detectChanges(); } } 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 ae76eb713..33e8f65e0 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,339 +1,338 @@ -
- -
-
-
-
-
-
- - - -
- -
- - - - -
-
- -
-
-
-
-
- - {{ - 'project-overview.table-header.title' - | translate: { length: displayedFiles.length || 0 } - }} - -
-
-
- -
+ +
+
+
+
+ + +
-
- -
- - - - - - - - - - - - - -
- -
+ + + + +
+
+ +
+
+
+
+ + {{ + 'project-overview.table-header.title' + | translate: { length: displayedFiles.length || 0 } + }} +
+
+
+ +
+
+ +
+ +
+ + + + + + + + + + + +
+ +
-
+
- {{ fileStatus.filename }} + (click)="toggleFileSelected($event, fileStatus)" + [class.active]="isFileSelected(fileStatus)" + class="select-oval" + >
+
+ +
+
+
+ {{ fileStatus.filename }} +
+
-
-
-
-
- {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }} +
+
+ {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }} +
-
-
- -
-
- -
+
+ +
+
+ +
-
- - {{ fileStatus.numberOfPages }} -
+
+ + {{ fileStatus.numberOfPages }} +
-
-
-
-
- +
+
+
+
+ -
- - - - - - +
+ + + + + + +
-
-
- +
+ +
-
+
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 e7575d68a..d766a693f 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,10 +1,6 @@ @import '../../../assets/styles/red-variables'; @import '../../../assets/styles/red-mixins'; -.file-upload-input { - display: none; -} - .actions { .active { font-weight: 600; 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 4f0df4abb..c75ed9256 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 @@ -19,12 +19,11 @@ 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 { SortingOption } from '../../components/sorting/sorting.component'; import { ProjectDetailsComponent } from './project-details/project-details.component'; import { FileStatusWrapper } from '../file/model/file-status.wrapper'; import { annotationFilterChecker, - fileAddedFilterChecker, getFilteredEntities, keyChecker } from '../../common/filter/utils/filter-utils'; @@ -40,12 +39,11 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public statusFilters: FilterModel[]; public peopleFilters: FilterModel[]; - // public addedDateFilters: FilterModel[]; public needsWorkFilters: FilterModel[]; public displayedFiles: FileStatusWrapper[] = []; - @ViewChild('projectDetailsComponent', { static: true }) + @ViewChild('projectDetailsComponent', { static: false }) private _projectDetailsComponent: ProjectDetailsComponent; public sortingOption: SortingOption = { column: 'added', order: 'desc' }; @@ -161,7 +159,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private _calculateData(): void { this._computeAllFilters(); this._filterFiles(); - this._projectDetailsComponent.calculateChartConfig(); + console.log('calculate parent'); + this._projectDetailsComponent?.calculateChartConfig(); this._changeDetectorRef.detectChanges(); } diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index 98316e2e8..8c8f59105 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -215,6 +215,10 @@ export class AppStateService { return this._appState.projects; } + get hasProjects() { + return this.allProjects?.length > 0; + } + get activeFile(): FileStatusWrapper { return this._appState.activeFile; } @@ -281,6 +285,9 @@ export class AppStateService { .toPromise(); const oldFiles = [...project.files]; + const fileStatusChangedEvent = []; + const fileReanalysedEvent = []; + for (const file of files) { let found = false; for (const oldFile of oldFiles) { @@ -291,10 +298,10 @@ export class AppStateService { file, this._userService.getNameForId(file.currentReviewer) ); - this.fileStatusChanged.emit(fileStatusWrapper); + fileStatusChangedEvent.push(fileStatusWrapper); if (oldFile.lastProcessed !== file.lastProcessed) { - this.fileReanalysed.emit(fileStatusWrapper); + fileReanalysedEvent.push(fileStatusWrapper); } } found = true; @@ -303,12 +310,11 @@ export class AppStateService { } // emit for new file if (!found) { - this.fileStatusChanged.emit( - new FileStatusWrapper( - file, - this._userService.getNameForId(file.currentReviewer) - ) + const fsw = new FileStatusWrapper( + file, + this._userService.getNameForId(file.currentReviewer) ); + fileStatusChangedEvent.push(fsw); } } @@ -317,6 +323,10 @@ export class AppStateService { ); this._computeStats(); + + fileReanalysedEvent.forEach((file) => this.fileReanalysed.emit(file)); + fileStatusChangedEvent.forEach((file) => this.fileStatusChanged.emit(file)); + return files; } diff --git a/apps/red-ui/src/app/user/user.service.ts b/apps/red-ui/src/app/user/user.service.ts index 8dc7ee8e8..4fa907af4 100644 --- a/apps/red-ui/src/app/user/user.service.ts +++ b/apps/red-ui/src/app/user/user.service.ts @@ -105,11 +105,17 @@ export class UserService { : undefined; } - isManager(user: User): boolean { + isManager(user?: User): boolean { + if (!user) { + user = this.user; + } return user.roles.indexOf('RED_MANAGER') >= 0; } - isUser(user: User): boolean { + isUser(user?: User): boolean { + if (!user) { + user = this.user; + } return user.roles.indexOf('RED_USER') >= 0; } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index be31eb3e7..63eaeb401 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -142,7 +142,7 @@ "delete-failed": "Failed to delete project: {{projectName}}" }, "add-new": "New Project", - "no-projects": "You currently have no projects. You can start your work by creating a new one!", + "no-projects": "You currently have no projects.", "no-projects-match": "No Projects match your current filters" }, "file-details": { @@ -172,6 +172,7 @@ "no-files": "Project is empty!", "no-files-match": "No File match your current filters", "upload-files": "Drop files anywhere for upload!", + "upload-files-btn": "Upload Files", "new-rule": { "label": "Outdated", "toast": { 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 d0c4b62c5..fb2a0b9ac 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -195,3 +195,13 @@ body { .pr-0 { padding-right: 0 !important; } + +.empty-state-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 12px; + height: calc(100vh - 61px); + position: relative; +}