diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index a99349460..4de33a1c0 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -1,60 +1,62 @@ -import {BrowserModule} from '@angular/platform-browser'; -import {APP_INITIALIZER, NgModule} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { APP_INITIALIZER, NgModule } from '@angular/core'; -import {AppComponent} from './app.component'; -import {ActivatedRoute, Router, RouterModule} from '@angular/router'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http'; -import {BaseScreenComponent} from './screens/base-screen/base-screen.component'; -import {ProjectListingScreenComponent} from './screens/project-listing-screen/project-listing-screen.component'; -import {ProjectOverviewScreenComponent} from './screens/project-overview-screen/project-overview-screen.component'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {ApiModule} from '@redaction/red-ui-http'; -import {ApiPathInterceptorService} from './interceptor/api-path-interceptor.service'; -import {MatButtonModule} from '@angular/material/button'; -import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; -import {TranslateHttpLoader} from '@ngx-translate/http-loader'; -import {MatMenuModule} from '@angular/material/menu'; -import {languageInitializer} from './i18n/language.initializer'; -import {LanguageService} from './i18n/language.service'; -import {MatIconModule} from '@angular/material/icon'; -import {IconsModule} from './icons/icons.module'; -import {AddEditProjectDialogComponent} from './screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component'; -import {MatDialogModule} from '@angular/material/dialog'; -import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {ConfirmationDialogComponent} from './common/confirmation-dialog/confirmation-dialog.component'; -import {FilePreviewScreenComponent} from './screens/file/file-preview-screen/file-preview-screen.component'; -import {PdfViewerComponent} from './screens/file/pdf-viewer/pdf-viewer.component'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {NgpSortModule} from 'ngp-sort-pipe'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatSelectModule} from '@angular/material/select'; -import {MatSidenavModule} from '@angular/material/sidenav'; -import {FileDetailsDialogComponent} from './screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component'; -import {ToastrModule} from 'ngx-toastr'; -import {ServiceWorkerModule} from '@angular/service-worker'; -import {environment} from '../environments/environment'; -import {ProjectDetailsDialogComponent} from './screens/project-overview-screen/project-details-dialog/project-details-dialog.component'; -import {AuthModule} from './auth/auth.module'; -import {FileUploadModule} from './upload/file-upload.module'; -import {FullPageLoadingIndicatorComponent} from './utils/full-page-loading-indicator/full-page-loading-indicator.component'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import {InitialsAvatarComponent} from './common/initials-avatar/initials-avatar.component'; -import {StatusBarComponent} from './components/status-bar/status-bar.component'; -import {LogoComponent} from './logo/logo.component'; -import {CompositeRouteGuard} from './utils/composite-route.guard'; -import {AppStateGuard} from './state/app-state.guard'; -import {SimpleDoughnutChartComponent} from './components/simple-doughnut-chart/simple-doughnut-chart.component'; -import {ManualRedactionDialogComponent} from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatSlideToggleModule} from '@angular/material/slide-toggle'; -import {AnnotationIconComponent} from './components/annotation-icon/annotation-icon.component'; -import {AuthGuard} from "./auth/auth.guard"; -import {AuthErrorComponent} from './screens/auth-error/auth-error.component'; -import {RedRoleGuard} from "./auth/red-role.guard"; +import { AppComponent } from './app.component'; +import { ActivatedRoute, Router, RouterModule } from '@angular/router'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http'; +import { BaseScreenComponent } from './screens/base-screen/base-screen.component'; +import { ProjectListingScreenComponent } from './screens/project-listing-screen/project-listing-screen.component'; +import { ProjectOverviewScreenComponent } from './screens/project-overview-screen/project-overview-screen.component'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { ApiModule } from '@redaction/red-ui-http'; +import { ApiPathInterceptorService } from './interceptor/api-path-interceptor.service'; +import { MatButtonModule } from '@angular/material/button'; +import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { TranslateHttpLoader } from '@ngx-translate/http-loader'; +import { MatMenuModule } from '@angular/material/menu'; +import { languageInitializer } from './i18n/language.initializer'; +import { LanguageService } from './i18n/language.service'; +import { MatIconModule } from '@angular/material/icon'; +import { IconsModule } from './icons/icons.module'; +import { AddEditProjectDialogComponent } from './screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { ConfirmationDialogComponent } from './common/confirmation-dialog/confirmation-dialog.component'; +import { FilePreviewScreenComponent } from './screens/file/file-preview-screen/file-preview-screen.component'; +import { PdfViewerComponent } from './screens/file/pdf-viewer/pdf-viewer.component'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { NgpSortModule } from 'ngp-sort-pipe'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { FileDetailsDialogComponent } from './screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component'; +import { ToastrModule } from 'ngx-toastr'; +import { ServiceWorkerModule } from '@angular/service-worker'; +import { environment } from '../environments/environment'; +import { ProjectDetailsDialogComponent } from './screens/project-overview-screen/project-details-dialog/project-details-dialog.component'; +import { AuthModule } from './auth/auth.module'; +import { FileUploadModule } from './upload/file-upload.module'; +import { FullPageLoadingIndicatorComponent } from './utils/full-page-loading-indicator/full-page-loading-indicator.component'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { InitialsAvatarComponent } from './common/initials-avatar/initials-avatar.component'; +import { StatusBarComponent } from './components/status-bar/status-bar.component'; +import { LogoComponent } from './logo/logo.component'; +import { CompositeRouteGuard } from './utils/composite-route.guard'; +import { AppStateGuard } from './state/app-state.guard'; +import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component'; +import { ManualRedactionDialogComponent } from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component'; +import { AuthGuard } from './auth/auth.guard'; +import { AuthErrorComponent } from './screens/auth-error/auth-error.component'; +import { RedRoleGuard } from './auth/red-role.guard'; +import { ProjectMembersDialogComponent } from './screens/project-overview-screen/project-members-dialog/project-members-dialog.component'; +import { MatListModule } from '@angular/material/list'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -72,6 +74,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { PdfViewerComponent, FileDetailsDialogComponent, ProjectDetailsDialogComponent, + ProjectMembersDialogComponent, FullPageLoadingIndicatorComponent, InitialsAvatarComponent, StatusBarComponent, @@ -79,7 +82,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { SimpleDoughnutChartComponent, ManualRedactionDialogComponent, AnnotationIconComponent, - AuthErrorComponent, + AuthErrorComponent ], imports: [ BrowserModule, @@ -156,9 +159,10 @@ export function HttpLoaderFactory(httpClient: HttpClient) { MatSelectModule, MatSidenavModule, FileUploadModule, - ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}), + ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), MatProgressSpinnerModule, - MatCheckboxModule + MatCheckboxModule, + MatListModule ], providers: [{ provide: HTTP_INTERCEPTORS, @@ -181,12 +185,12 @@ export class AppModule { queryParams: { 'state': null, 'session_state': null, - 'code': null, + 'code': null }, queryParamsHandling: 'merge' - }) + }); } - }) + }); } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.html new file mode 100644 index 000000000..2c5d8e95e --- /dev/null +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.html @@ -0,0 +1,20 @@ +
+
+ +
+ +
+ + + +

{{ userService.getNameForId(user.userId) }}

+ + + +
+ + +
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.scss new file mode 100644 index 000000000..705f562e1 --- /dev/null +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.scss @@ -0,0 +1,4 @@ +mat-selection-list { + overflow-y: scroll; + max-height: 50vh; +} diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.ts new file mode 100644 index 000000000..db14679bb --- /dev/null +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-members-dialog/project-members-dialog.component.ts @@ -0,0 +1,57 @@ +import { Component, Inject } from '@angular/core'; +import { Project, ProjectControllerService } from '@redaction/red-ui-http'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { AppStateService, ProjectWrapper } from '../../../state/app-state.service'; +import { UserService } from '../../../user/user.service'; +import { MatSelectionListChange } from '@angular/material/list'; +import { NotificationService, NotificationType } from '../../../notification/notification.service'; + +@Component({ + selector: 'redaction-project-details-dialog', + templateUrl: './project-members-dialog.component.html', + styleUrls: ['./project-members-dialog.component.scss'] +}) +export class ProjectMembersDialogComponent { + private _project: Project; + public memberIds: string[]; + + constructor(private readonly _projectControllerService: ProjectControllerService, + private readonly _notificationService: NotificationService, + public readonly userService: UserService, + private readonly _appStateService: AppStateService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public projectDetails: ProjectWrapper) { + this._loadProject(); + } + + private _loadProject() { + this._project = this._appStateService.activeProject.project; + this.memberIds = [...this._project.memberIds]; + } + + private _reloadProject() { + this._appStateService.addOrUpdateProject(this._project).then(() => { + this._loadProject(); + }); + } + + public selectionChange($event: MatSelectionListChange) { + const userId = $event.option.value; + const selected = $event.option.selected; + const userName = this.userService.getNameForId(userId); + + if (selected) { + this._projectControllerService.addMembersToProject({ memberIds: [userId] }, this._project.projectId).subscribe(() => { + this._notificationService.showToastNotification('Successfully assigned ' + userName + ' to project: ' + this._project.projectName); + }, error => { + this._notificationService.showToastNotification('Failed: ' + error.error.message, null, NotificationType.ERROR); + }).add(() => this._reloadProject()); + } else { + this._projectControllerService.deleteMembersToProject({ memberIds: [userId] }, this._project.projectId).subscribe(() => { + this._notificationService.showToastNotification('Successfully removed ' + userName + ' from project: ' + this._project.projectName); + }, error => { + this._notificationService.showToastNotification('Failed: ' + error.error.message, null, NotificationType.ERROR); + }).add(() => this._reloadProject()); + } + } +} 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 e03aa8716..d2502aa14 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,5 +1,5 @@
@@ -53,14 +53,14 @@
-
+ [routerLink]="canOpenFile(fileStatus.status) ? ['/ui/projects/'+activeProject.projectId+'/file/'+fileStatus.fileId] : []">
{{ fileStatus.filename }}
@@ -77,7 +77,7 @@
@@ -88,7 +88,7 @@
- @@ -110,13 +110,13 @@
- - -
@@ -141,7 +141,7 @@
-
-
+
- - - +
+
+
+
+
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 11cad4cba..0a91f19ab 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 @@ -8,6 +8,11 @@ min-width: 60px; } +.header-flex-end { + display: flex; + justify-content: flex-end; +} + .table-item { .needs-work { display: flex; 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 a6d6ed2c3..60e65ad1f 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 @@ -22,6 +22,7 @@ import { UserService } from '../../user/user.service'; import { SortingOption } from '../../utils/types'; import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; import {groupBy} from "../../utils/functions"; +import { ProjectMembersDialogComponent } from './project-members-dialog/project-members-dialog.component'; @Component({ @@ -30,10 +31,7 @@ import {groupBy} from "../../utils/functions"; styleUrls: ['./project-overview-screen.component.scss'] }) export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { - @ViewChild('dropzoneComponent', { static: true }) - dropZoneComponent; - - dragActive = false; + private _fileStatusInterval; public sortingOptions: SortingOption[] = [ { label: 'project-overview.sorting.recent.label', order: 'desc', column: 'lastUpdated' }, @@ -42,12 +40,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { { label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' } ]; public sortingOption: SortingOption = this.sortingOptions[0]; - public documentsChartData: DoughnutChartConfig[] = []; - projectId: string; - private _fileStatusInterval; - constructor(public readonly appStateService: AppStateService, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _activatedRoute: ActivatedRoute, @@ -64,15 +58,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private readonly _fileUploadControllerService: FileUploadControllerService, private readonly _projectControllerService: ProjectControllerService) { this._activatedRoute.params.subscribe(params => { - this.projectId = params.projectId; - this.appStateService.activateProject(this.projectId); + this.appStateService.activateProject(params.projectId); }); } - get user() { - return this._userService.user; - } - ngOnInit(): void { this._fileDropOverlayService.initFileDropHandling(); this._calculateChartConfig(); @@ -81,7 +70,45 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }, 5000); } - deleteFile($event: MouseEvent, fileStatus: FileStatus) { + ngOnDestroy(): void { + this._fileDropOverlayService.cleanupFileDropHandling(); + if (this._fileStatusInterval) { + this._fileStatusInterval = null; + clearInterval(this._fileStatusInterval); + } + } + + public get activeProject() { + return this.appStateService.activeProject.project; + } + + public get user() { + return this._userService.user; + } + + public get members() { + return this.activeProject.memberIds.map(m => this._userService.getName(this._userService.getUserById(m))) + } + + public get ownerName() { + return this._userService.getNameForId(this.activeProject.ownerId); + } + + private _getFileStatus() { + this.appStateService.reloadActiveProjectFiles().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 openDeleteFileDialog($event: MouseEvent, fileStatus: FileStatus) { $event.stopPropagation(); const dialogRef = this._dialog.open(ConfirmationDialogComponent, { width: '400px', @@ -100,7 +127,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }); } - showDetailsDialog($event: MouseEvent) { + public openDetailsDialog($event: MouseEvent) { $event.stopPropagation(); this._dialog.open(ProjectDetailsDialogComponent, { width: '600px', @@ -109,57 +136,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }); } - ngOnDestroy(): void { - this._fileDropOverlayService.cleanupFileDropHandling(); - if (this._fileStatusInterval) { - this._fileStatusInterval = null; - clearInterval(this._fileStatusInterval); - } - } - - reanalyseFile($event: MouseEvent, fileStatus: FileStatus) { - $event.stopPropagation(); - this._reanalysisControllerService.reanalyzeFile(this.appStateService.activeProject.project.projectId, fileStatus.fileId).subscribe(() => { - this._getFileStatus(); - }); - } - - private _getFileStatus() { - this.appStateService.reloadActiveProjectFiles().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}); - } - } - - fileId(index, item) { - return item.fileId; - } - - 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(); - } - - editProject($event: MouseEvent) { + public openEditProjectDialog($event: MouseEvent) { $event.stopPropagation(); this._dialog.open(AddEditProjectDialogComponent, { width: '400px', @@ -168,7 +145,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }); } - deleteProject($event: MouseEvent) { + public openDeleteProjectDialog($event: MouseEvent) { $event.stopPropagation(); const dialogRef = this._dialog.open(ConfirmationDialogComponent, { width: '400px', @@ -184,24 +161,54 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }); } + public openAssignProjectMembersDialog() { + this._dialog.open(ProjectMembersDialogComponent, { + width: '400px', + maxWidth: '90vw', + autoFocus: false + }); + } - canOpenFile(fileStatus: FileStatus): boolean { + public reanalyseFile($event: MouseEvent, fileStatus: FileStatus) { + $event.stopPropagation(); + this._reanalysisControllerService.reanalyzeFile(this.appStateService.activeProject.project.projectId, fileStatus.fileId).subscribe(() => { + this._getFileStatus(); + }); + } + + 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 fileStatus === 'PROCESSING' || fileStatus === 'REVIEWED' || true; } - assignPeopleToFile($event: MouseEvent, fileStatus: FileStatus) { + public assignPeopleToFile($event: MouseEvent, fileStatus: FileStatus) { $event.stopPropagation(); this._statusControllerService.assignProjectOwner1(this.appStateService.activeProjectId, fileStatus.fileId, this.user.id).subscribe(()=>{ this._notificationService.showToastNotification("Successfully assigned " + this.user.name + " to file: " + fileStatus.filename); }); } - getMembers(){ - return this.appStateService.activeProject.project.memberIds.map(m => this._userService.getName(this._userService.getUserById(m))) - } - - getUsername(fileStatus: FileStatus) { + public getFileOwnerUsername(fileStatus: FileStatus) { return undefined; } } diff --git a/apps/red-ui/src/app/user/user.service.ts b/apps/red-ui/src/app/user/user.service.ts index a1ab79e39..94f0de68a 100644 --- a/apps/red-ui/src/app/user/user.service.ts +++ b/apps/red-ui/src/app/user/user.service.ts @@ -1,8 +1,8 @@ -import {Injectable} from "@angular/core"; -import {KeycloakService} from "keycloak-angular"; -import {KeycloakProfile} from "keycloak-js"; -import jwt_decode from "jwt-decode"; -import {User, UserControllerService} from "@redaction/red-ui-http"; +import { Injectable } from '@angular/core'; +import { KeycloakService } from 'keycloak-angular'; +import { KeycloakProfile } from 'keycloak-js'; +import jwt_decode from 'jwt-decode'; +import { User, UserControllerService } from '@redaction/red-ui-http'; export class UserWrapper { @@ -10,21 +10,21 @@ export class UserWrapper { } get name() { - return this._currentUser.firstName + " " + this._currentUser.lastName; + return this._currentUser.firstName + ' ' + this._currentUser.lastName; } get isManager() { - return this.roles.indexOf("RED_MANAGER") >= 0; + return this.roles.indexOf('RED_MANAGER') >= 0; } get isUser() { - return this.roles.indexOf("RED_USER") >= 0; + return this.roles.indexOf('RED_USER') >= 0; } get isAdmin() { - return this.roles.indexOf("RED_ADMIn") >= 0; + return this.roles.indexOf('RED_ADMIN') >= 0; } get hasAnyREDRoles() { @@ -37,11 +37,11 @@ export class UserWrapper { providedIn: 'root' }) export class UserService { - private _currentUser: UserWrapper; private _allUsers: User[]; - constructor(private readonly _keycloakService: KeycloakService, private readonly _userControllerService: UserControllerService) { + constructor(private readonly _keycloakService: KeycloakService, + private readonly _userControllerService: UserControllerService) { } logout() { @@ -65,7 +65,6 @@ export class UserService { return allUsers; } - async loadCurrentUser() { const token = await this._keycloakService.getToken(); const decoded = jwt_decode(token); @@ -77,15 +76,25 @@ export class UserService { return this._currentUser; } - getUserById(id: string) { return this._allUsers.find(u => u.userId === id); } + getNameForId(userId: string) { + return this.getName(this.getUserById(userId)); + } + getName(user?: User) { - if (user) { - return user.firstName + " " + user.lastName; - } - return undefined; + return user ? + (user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.username) : + undefined; + } + + isManager(user: User) { + return user.roles.indexOf('RED_MANAGER') >= 0; + } + + isUser(user: User) { + return user.roles.indexOf('RED_USER') >= 0; } } diff --git a/apps/red-ui/src/assets/styles/red-list.scss b/apps/red-ui/src/assets/styles/red-list.scss new file mode 100644 index 000000000..df3a3919f --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-list.scss @@ -0,0 +1,8 @@ +@import "red-variables"; + +.mat-list-item { + font-family: Inter, sans-serif; + color: $grey-1 !important; + font-size: 13px !important; + line-height: 16px !important; +} diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 61e61229d..74b2b37d5 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -9,6 +9,7 @@ @import "red-input"; @import "red-button"; @import "red-select"; +@import "red-list"; @import "red-checkbox"; @import "red-toggle"; @import "red-menu";