From db56af4758786161396ec05eb2b3496a83788df8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sun, 6 Dec 2020 13:01:07 +0200 Subject: [PATCH] Routing, breadcrumbs, users page --- apps/red-ui/src/app/app.module.ts | 189 ++++++++++-------- apps/red-ui/src/app/auth/red-role.guard.ts | 5 +- .../admin-breadcrumbs.component.html | 26 +++ .../admin-breadcrumbs.component.scss | 3 + .../admin-breadcrumbs.component.ts | 28 +++ .../dictionary-listing-screen.component.html | 9 +- .../dictionary-overview-screen.component.html | 10 +- .../dictionary-overview-screen.component.ts | 4 +- .../users/user-listing-screen.component.html | 46 +++++ .../users/user-listing-screen.component.scss | 23 +++ .../users/user-listing-screen.component.ts | 19 ++ .../base-screen/base-screen.component.html | 22 +- apps/red-ui/src/app/user/user.service.ts | 8 +- apps/red-ui/src/assets/i18n/en.json | 14 +- .../src/assets/styles/red-breadcrumbs.scss | 5 +- 15 files changed, 297 insertions(+), 114 deletions(-) create mode 100644 apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html create mode 100644 apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss create mode 100644 apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts create mode 100644 apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html create mode 100644 apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.scss create mode 100644 apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.ts diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index a924ae422..f8e65170c 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -89,11 +89,112 @@ import { DictionaryOverviewScreenComponent } from './screens/admin/dictionary-ov import { ColorPickerModule } from 'ngx-color-picker'; import { AceEditorModule } from 'ng2-ace-editor'; import { TeamMembersComponent } from './components/team-members/team-members.component'; +import { AdminBreadcrumbsComponent } from './components/admin-page-header/admin-breadcrumbs.component'; +import { UserListingScreenComponent } from './screens/admin/users/user-listing-screen.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); } +const routes = [ + { + path: '', + redirectTo: 'ui/projects', + pathMatch: 'full' + }, + { + path: 'auth-error', + component: AuthErrorComponent, + canActivate: [AuthGuard] + }, + { + path: 'info', + component: AppInfoComponent + }, + { + path: 'ui', + component: BaseScreenComponent, + children: [ + { + path: 'projects', + component: ProjectListingScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { + path: 'projects/:projectId', + component: ProjectOverviewScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { + path: 'projects/:projectId/file/:fileId', + component: FilePreviewScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { + path: 'admin', + children: [ + { path: '', redirectTo: 'dictionaries', pathMatch: 'full' }, + { + path: 'dictionaries', + component: DictionaryListingScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { + path: 'dictionaries/:type', + component: DictionaryOverviewScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { + path: 'users', + component: UserListingScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + } + ] + } + ] + } +]; + +const matImports = [ + MatDialogModule, + MatNativeDateModule, + MatToolbarModule, + MatButtonModule, + MatSlideToggleModule, + MatMenuModule, + MatIconModule, + MatTooltipModule, + MatSnackBarModule, + MatTabsModule, + MatButtonToggleModule, + MatFormFieldModule, + MatProgressSpinnerModule, + MatCheckboxModule, + MatListModule, + MatDatepickerModule, + MatInputModule, + MatSelectModule, + MatSidenavModule +]; + @NgModule({ declarations: [ AppComponent, @@ -116,7 +217,6 @@ export function HttpLoaderFactory(httpClient: HttpClient) { AuthErrorComponent, HumanizePipe, CommentsComponent, - HumanizePipe, ToastComponent, FilterComponent, AppInfoComponent, @@ -144,7 +244,9 @@ export function HttpLoaderFactory(httpClient: HttpClient) { SyncWidthDirective, AddEditDictionaryDialogComponent, DictionaryOverviewScreenComponent, - TeamMembersComponent + TeamMembersComponent, + AdminBreadcrumbsComponent, + UserListingScreenComponent ], imports: [ BrowserModule, @@ -155,8 +257,6 @@ export function HttpLoaderFactory(httpClient: HttpClient) { AuthModule, IconsModule, ApiModule, - MatDialogModule, - MatNativeDateModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, @@ -164,93 +264,16 @@ export function HttpLoaderFactory(httpClient: HttpClient) { deps: [HttpClient] } }), - RouterModule.forRoot([ - { - path: '', - redirectTo: 'ui/projects', - pathMatch: 'full' - }, - { - path: 'auth-error', - component: AuthErrorComponent, - canActivate: [AuthGuard] - }, - { - path: 'info', - component: AppInfoComponent - }, - { - path: 'ui', - component: BaseScreenComponent, - children: [ - { - path: 'projects', - component: ProjectListingScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } - }, - { - path: 'projects/:projectId', - component: ProjectOverviewScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } - }, - { - path: 'projects/:projectId/file/:fileId', - component: FilePreviewScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } - }, - { - path: 'admin-dictionaries', - component: DictionaryListingScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } - }, - { - path: 'dictionary-overview/:type', - component: DictionaryOverviewScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } - } - ] - } - ]), + RouterModule.forRoot(routes), NgpSortModule, - MatToolbarModule, - MatButtonModule, - MatSlideToggleModule, - MatMenuModule, - MatIconModule, - MatTooltipModule, - MatSnackBarModule, - MatTabsModule, - MatButtonToggleModule, - MatFormFieldModule, + ...matImports, ToastrModule.forRoot({ closeButton: true, enableHtml: true, toastComponent: ToastComponent }), - MatSelectModule, - MatSidenavModule, FileUploadModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), - MatProgressSpinnerModule, - MatCheckboxModule, - MatListModule, - MatDatepickerModule, - MatInputModule, ColorPickerModule, AceEditorModule ], diff --git a/apps/red-ui/src/app/auth/red-role.guard.ts b/apps/red-ui/src/app/auth/red-role.guard.ts index bea3612cb..19870efbc 100644 --- a/apps/red-ui/src/app/auth/red-role.guard.ts +++ b/apps/red-ui/src/app/auth/red-role.guard.ts @@ -1,12 +1,9 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; -import { KeycloakService } from 'keycloak-angular'; import { UserService } from '../user/user.service'; import { AppLoadStateService } from '../utils/app-load-state.service'; import { Observable } from 'rxjs'; -class UrlTree {} - @Injectable({ providedIn: 'root' }) @@ -22,7 +19,7 @@ export class RedRoleGuard implements CanActivate { obs.complete(); } else { if (!this._userService.isUser() && state.url.startsWith('/ui/projects')) { - this._router.navigate(['/ui/admin-dictionaries']); + this._router.navigate(['/ui/admin']); obs.next(false); obs.complete(); } diff --git a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html new file mode 100644 index 000000000..fb513b57a --- /dev/null +++ b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html @@ -0,0 +1,26 @@ +
+ + + + + + + + {{ dictionary.type | humanize }} + + +
diff --git a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss new file mode 100644 index 000000000..b2f445392 --- /dev/null +++ b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss @@ -0,0 +1,3 @@ +.ml-32 { + margin-left: 32px; +} diff --git a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts new file mode 100644 index 000000000..8be407e0d --- /dev/null +++ b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { TypeValue } from '@redaction/red-ui-http'; +import { AppStateService } from '../../state/app-state.service'; + +@Component({ + selector: 'redaction-admin-breadcrumbs', + templateUrl: './admin-breadcrumbs.component.html', + styleUrls: ['./admin-breadcrumbs.component.scss'] +}) +export class AdminBreadcrumbsComponent implements OnInit { + public dictionary: TypeValue; + public root: boolean; + public screen: string; + + constructor(private readonly _activatedRoute: ActivatedRoute, private _appStateService: AppStateService) { + this._activatedRoute.params.subscribe((params) => { + const url = this._activatedRoute.snapshot.url; + this.root = url.length === 1; + this.screen = url[0].path; + if (this.screen === 'dictionaries' && url.length === 2) { + this.dictionary = this._appStateService.dictionaryData[params.type]; + } + }); + } + + ngOnInit(): void {} +} diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index 15161d40f..d14caf20b 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -1,9 +1,6 @@
-
- -
 
-
+
-
+
@@ -69,7 +66,7 @@
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html index def455fdf..8c6fa3eba 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html @@ -1,12 +1,6 @@
-
- - - - {{ dictionary.type | humanize }} - -
+
{ this.dictionary = this._appStateService.dictionaryData[params.type]; if (!this.dictionary) { - this._router.navigate(['/ui/admin-dictionaries']); + this._router.navigate(['/ui/admin/dictionaries']); } else { this._initialize(); } @@ -87,7 +87,7 @@ export class DictionaryOverviewScreenComponent { openDeleteDictionaryDialog($event: any) { this._dialogService.openDeleteDictionaryDialog($event, this.dictionary, async () => { await this._appStateService.loadDictionaryData(); - this._router.navigate(['/ui/admin-dictionaries']); + this._router.navigate(['/ui/admin/dictionaries']); }); } diff --git a/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html new file mode 100644 index 000000000..a1c27aba7 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html @@ -0,0 +1,46 @@ +
+
+ +
+ +
+
+ +
+
+
+ + {{ 'user-listing.table-header.title' | translate: { length: users.length } }} + +
+ +
+ + + + +
+
+ +
+ +
+
+ +
+
{{ user.email || '-' }}
+
+
+
+
+ +
+
+
diff --git a/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.scss new file mode 100644 index 000000000..1490c8c20 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.scss @@ -0,0 +1,23 @@ +.left-container { + width: calc(100vw - 353px); + + .grid-container { + grid-template-columns: 1fr 1fr 11px; + + &:hover { + grid-template-columns: 1fr 1fr; + } + + .table-item { + > div { + padding: 0 24px; + } + } + } +} + +.right-container { + display: flex; + width: 353px; + min-width: 353px; +} diff --git a/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.ts new file mode 100644 index 000000000..24cd7caf1 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; +import { PermissionsService } from '../../../common/service/permissions.service'; +import { UserService } from '../../../user/user.service'; +import { User } from '@redaction/red-ui-http'; + +@Component({ + selector: 'redaction-user-listing-screen', + templateUrl: './user-listing-screen.component.html', + styleUrls: ['./user-listing-screen.component.scss'] +}) +export class UserListingScreenComponent implements OnInit { + public users: User[]; + + constructor(public readonly permissionsService: PermissionsService, private readonly userService: UserService) { + this.users = this.userService.allUsers; + } + + ngOnInit(): void {} +} diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html index 354434d38..2071ed4f6 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html @@ -20,9 +20,21 @@
- + - + {{ appStateService.activeProject.project.projectName }} @@ -30,6 +42,8 @@ *ngIf="appStateService.activeFile" class="breadcrumb" [routerLink]="'/ui/projects/' + appStateService.activeProjectId + '/file/' + appStateService.activeFile.fileId" + routerLinkActive="active" + [routerLinkActiveOptions]="{ exact: true }" > {{ appStateService.activeFile.filename }} @@ -47,9 +61,9 @@ diff --git a/apps/red-ui/src/app/user/user.service.ts b/apps/red-ui/src/app/user/user.service.ts index e24dcd13c..a7148bdbc 100644 --- a/apps/red-ui/src/app/user/user.service.ts +++ b/apps/red-ui/src/app/user/user.service.ts @@ -43,19 +43,19 @@ export class UserService { this._keycloakService.logout(window.location.origin); } - get userId() { + get userId(): string { return this._currentUser.id; } - get allUsers() { + get allUsers(): User[] { return this._allUsers; } - get managerUsers() { + get managerUsers(): User[] { return this._allUsers.filter((u) => u.roles.indexOf('RED_MANAGER') >= 0); } - get eligibleUsers() { + get eligibleUsers(): User[] { return this._allUsers.filter((u) => u.roles.indexOf('RED_USER') >= 0 || u.roles.indexOf('RED_MANAGER') >= 0); } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index aef28b041..57e42cda7 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -41,7 +41,7 @@ "projects": "Projects", "my-account": { "children": { - "admin-dictionaries": "Manage Dictionaries", + "admin": "Management", "language": { "label": "Language", "english": "English", @@ -535,5 +535,15 @@ "hint-redaction": "Hint/Redaction" } }, - "dictionaries": "Dictionaries" + "user-listing": { + "table-header": { + "title": "{{length}} users" + }, + "table-col-names": { + "name": "Name", + "email": "Email" + } + }, + "dictionaries": "Dictionaries", + "user-management": "User Management" } diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss index 964999358..5d70ef063 100644 --- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss +++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss @@ -14,9 +14,12 @@ white-space: nowrap; &:last-child { - color: $primary; @include line-clamp(1); } + + &.active { + color: $primary; + } } mat-icon {