From ffa6dbd9694022f57a9fc6d465a1196ac6a2bbc5 Mon Sep 17 00:00:00 2001 From: Timo Bejan Date: Mon, 12 Oct 2020 13:37:05 +0300 Subject: [PATCH] work in progress ui fine tune --- apps/red-ui/proxy.conf.json | 12 +- apps/red-ui/src/app/app.component.html | 1 + apps/red-ui/src/app/app.component.ts | 4 + apps/red-ui/src/app/app.module.ts | 124 ++++++++------ apps/red-ui/src/app/auth/auth.guard.ts | 15 +- .../initials-avatar.component.html | 2 +- .../initials-avatar.component.scss | 2 +- .../initials-avatar.component.ts | 7 +- apps/red-ui/src/app/icons/icons.module.ts | 25 +++ .../interceptor/auth-interceptor.service.ts | 24 +++ apps/red-ui/src/app/logo/logo.component.html | 4 + apps/red-ui/src/app/logo/logo.component.scss | 0 apps/red-ui/src/app/logo/logo.component.ts | 15 ++ .../base-screen/base-screen.component.html | 26 ++- .../base-screen/base-screen.component.scss | 16 ++ .../base-screen/base-screen.component.ts | 10 +- .../file-preview-screen.component.ts | 3 +- .../add-edit-project-dialog.component.ts | 27 +-- .../project-listing-screen.component.html | 118 +++++++------ .../project-listing-screen.component.scss | 14 ++ .../project-listing-screen.component.ts | 48 +++--- .../project-details-dialog.component.ts | 10 +- .../project-overview-screen.component.html | 28 ++-- .../project-overview-screen.component.ts | 103 ++++++++---- .../simple-doughnut-chart.component.html | 14 ++ .../simple-doughnut-chart.component.scss | 0 .../simple-doughnut-chart.component.ts | 108 ++++++++++++ apps/red-ui/src/app/state/app-state.guard.ts | 21 +++ .../red-ui/src/app/state/app-state.service.ts | 155 +++++++++++++----- .../src/app/upload/file-upload.service.ts | 4 +- apps/red-ui/src/app/user/user.service.ts | 13 +- .../src/app/utils/app-load-state.service.ts | 17 ++ .../src/app/utils/composite-route.guard.ts | 49 ++++++ apps/red-ui/src/assets/i18n/de.json | 3 + apps/red-ui/src/assets/i18n/en.json | 3 + .../src/assets/icons/general/calendar.svg | 31 ++++ .../assets/icons/general/drop-down-arrow.svg | 9 + .../red-ui/src/assets/icons/general/files.svg | 13 ++ apps/red-ui/src/assets/icons/general/info.svg | 30 ---- .../src/assets/icons/general/plus_icon.svg | 3 - .../red-ui/src/assets/icons/general/stats.svg | 14 ++ apps/red-ui/src/assets/icons/general/user.svg | 10 ++ .../src/assets/styles/red-components.scss | 14 +- .../src/assets/styles/red-controls.scss | 5 + apps/red-ui/src/assets/styles/red-logo.scss | 24 +++ .../src/assets/styles/red-page-layout.scss | 41 ++++- apps/red-ui/src/assets/styles/red-theme.scss | 1 + package.json | 2 + yarn.lock | 51 +++++- 49 files changed, 957 insertions(+), 316 deletions(-) create mode 100644 apps/red-ui/src/app/interceptor/auth-interceptor.service.ts create mode 100644 apps/red-ui/src/app/logo/logo.component.html create mode 100644 apps/red-ui/src/app/logo/logo.component.scss create mode 100644 apps/red-ui/src/app/logo/logo.component.ts create mode 100644 apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html create mode 100644 apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss create mode 100644 apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts create mode 100644 apps/red-ui/src/app/state/app-state.guard.ts create mode 100644 apps/red-ui/src/app/utils/app-load-state.service.ts create mode 100644 apps/red-ui/src/app/utils/composite-route.guard.ts create mode 100644 apps/red-ui/src/assets/icons/general/calendar.svg create mode 100644 apps/red-ui/src/assets/icons/general/drop-down-arrow.svg create mode 100644 apps/red-ui/src/assets/icons/general/files.svg create mode 100644 apps/red-ui/src/assets/icons/general/stats.svg create mode 100644 apps/red-ui/src/assets/icons/general/user.svg create mode 100644 apps/red-ui/src/assets/styles/red-logo.scss diff --git a/apps/red-ui/proxy.conf.json b/apps/red-ui/proxy.conf.json index a24dbe123..fb4e0b5f5 100644 --- a/apps/red-ui/proxy.conf.json +++ b/apps/red-ui/proxy.conf.json @@ -1,36 +1,36 @@ { "/project": { - "target": "http://ingress.redaction-timo-dev-latest.178.63.47.73.xip.io", + "target": "https://timo-redaction-dev.iqser.cloud/", "secure": false, "changeOrigin": true, "logLevel": "debug" }, "/reanalyse": { - "target": "http://ingress.redaction-timo-dev-latest.178.63.47.73.xip.io", + "target": "https://timo-redaction-dev.iqser.cloud/", "secure": false, "changeOrigin": true, "logLevel": "debug" }, "/upload": { - "target": "http://ingress.redaction-timo-dev-latest.178.63.47.73.xip.io", + "target": "https://timo-redaction-dev.iqser.cloud/", "secure": false, "changeOrigin": true, "logLevel": "debug" }, "/download": { - "target": "http://ingress.redaction-timo-dev-latest.178.63.47.73.xip.io", + "target": "https://timo-redaction-dev.iqser.cloud/", "secure": false, "changeOrigin": true, "logLevel": "debug" }, "/delete": { - "target": "http://ingress.redaction-timo-dev-latest.178.63.47.73.xip.io", + "target": "https://timo-redaction-dev.iqser.cloud/", "secure": false, "changeOrigin": true, "logLevel": "debug" }, "/status": { - "target": "http://ingress.redaction-timo-dev-latest.178.63.47.73.xip.io", + "target": "https://timo-redaction-dev.iqser.cloud/", "secure": false, "changeOrigin": true, "logLevel": "debug" diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html index 0680b43f9..80f9c88ad 100644 --- a/apps/red-ui/src/app/app.component.html +++ b/apps/red-ui/src/app/app.component.html @@ -1 +1,2 @@ + diff --git a/apps/red-ui/src/app/app.component.ts b/apps/red-ui/src/app/app.component.ts index ad9861ea0..5300be8bb 100644 --- a/apps/red-ui/src/app/app.component.ts +++ b/apps/red-ui/src/app/app.component.ts @@ -1,4 +1,5 @@ import {Component} from '@angular/core'; +import {AppLoadStateService} from "./utils/app-load-state.service"; @Component({ selector: 'redaction-root', @@ -7,5 +8,8 @@ import {Component} from '@angular/core'; }) export class AppComponent { + constructor(public appLoadStateService: AppLoadStateService){ + + } } diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index edbb49309..3e5463bb8 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -1,50 +1,56 @@ -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 { RouterModule } from '@angular/router'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { 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 { AuthGuard } from './auth/auth.guard'; -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 {AppComponent} from './app.component'; +import {RouterModule} from '@angular/router'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {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 {AuthGuard} from './auth/auth.guard'; +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 {AuthInterceptorService} from "./interceptor/auth-interceptor.service"; +import {CompositeRouteGuard} from "./utils/composite-route.guard"; +import {AppStateGuard} from "./state/app-state.guard"; +import {ChartsModule} from "ng2-charts"; +import { SimpleDoughnutChartComponent } from './simple-doughnut-chart/simple-doughnut-chart.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -64,11 +70,14 @@ export function HttpLoaderFactory(httpClient: HttpClient) { ProjectDetailsDialogComponent, FullPageLoadingIndicatorComponent, InitialsAvatarComponent, - StatusBarComponent + StatusBarComponent, + LogoComponent, + SimpleDoughnutChartComponent ], imports: [ BrowserModule, BrowserAnimationsModule, + ChartsModule, ReactiveFormsModule, HttpClientModule, AuthModule, @@ -95,17 +104,26 @@ export function HttpLoaderFactory(httpClient: HttpClient) { { path: 'projects', component: ProjectListingScreenComponent, - canActivate: [AuthGuard] + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, AppStateGuard], + } }, { path: 'projects/:projectId', component: ProjectOverviewScreenComponent, - canActivate: [AuthGuard] + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, AppStateGuard], + } }, { path: 'projects/:projectId/file/:fileId', component: FilePreviewScreenComponent, - canActivate: [AuthGuard] + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, AppStateGuard], + } } ] } @@ -125,13 +143,17 @@ 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 ], providers: [{ provide: HTTP_INTERCEPTORS, multi: true, useClass: ApiPathInterceptorService + }, { + provide: HTTP_INTERCEPTORS, + multi: true, + useClass: AuthInterceptorService }, { provide: APP_INITIALIZER, multi: true, diff --git a/apps/red-ui/src/app/auth/auth.guard.ts b/apps/red-ui/src/app/auth/auth.guard.ts index 505ab2b60..d5c3459c8 100644 --- a/apps/red-ui/src/app/auth/auth.guard.ts +++ b/apps/red-ui/src/app/auth/auth.guard.ts @@ -5,14 +5,19 @@ import {AuthConfig, OAuthService} from "angular-oauth2-oidc"; import {AppConfigKey, AppConfigService} from "../app-config/app-config.service"; import {map} from "rxjs/operators"; import {JwksValidationHandler} from "angular-oauth2-oidc-jwks"; +import {UserService} from "../user/user.service"; -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class AuthGuard implements CanActivate { private _configured = false; - constructor(private readonly _oauthService: OAuthService, private readonly _appConfigService: AppConfigService) { + constructor(private readonly _oauthService: OAuthService, + private readonly _userService: UserService, + private readonly _appConfigService: AppConfigService) { } private async _configure() { @@ -32,12 +37,16 @@ export class AuthGuard implements CanActivate { return this._checkToken(); } - private _checkToken() { + private async _checkToken() { const expired = this._oauthService.getAccessTokenExpiration() - new Date().getTime() < 0; if (!this._oauthService.getAccessToken() || expired) { this._oauthService.initLoginFlow(); return false; } + if (!this._userService.user) { + await this._userService.loadCurrentUser(); + return true; + } return true; } diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html index 98decd5c8..d5fc3d609 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html @@ -1,4 +1,4 @@
{{initials}}
-
{{username || ('initials-avatar.unassigned.label' | translate)}}
+
{{username || ('initials-avatar.unassigned.label' | translate)}}
diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss index cba6e1ef9..3952ae0d8 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss @@ -1,6 +1,6 @@ @import "../../../assets/styles/red-variables"; -* { +.name { font-size: 13px; line-height: 16px; } diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts index a799c774f..253df0d9d 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'redaction-initials-avatar', @@ -10,7 +10,7 @@ export class InitialsAvatarComponent implements OnInit { public username: string; @Input() - public color: 'gray' | 'red' = 'gray'; + public color: 'red-white' | 'gray-red' | 'gray-dark' = 'gray-dark'; @Input() public size: 'small' | 'large' = 'small'; @@ -18,7 +18,8 @@ export class InitialsAvatarComponent implements OnInit { @Input() public withName = false; - constructor() { } + constructor() { + } ngOnInit(): void { } diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index b0f331769..b90b85c98 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -13,6 +13,31 @@ export class IconsModule { private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer ) { + iconRegistry.addSvgIconInNamespace( + 'red', + 'calendar', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/calendar.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'files', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/files.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'user', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/user.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'stats', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/stats.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'drop-down', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/drop-down-arrow.svg') + ); iconRegistry.addSvgIconInNamespace( 'red', 'plus', diff --git a/apps/red-ui/src/app/interceptor/auth-interceptor.service.ts b/apps/red-ui/src/app/interceptor/auth-interceptor.service.ts new file mode 100644 index 000000000..32bee4a6f --- /dev/null +++ b/apps/red-ui/src/app/interceptor/auth-interceptor.service.ts @@ -0,0 +1,24 @@ +import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Observable, of} from 'rxjs'; +import {AppConfigService} from "../app-config/app-config.service"; +import {catchError} from "rxjs/operators"; +import {OAuthService} from "angular-oauth2-oidc"; + +@Injectable() +export class AuthInterceptorService implements HttpInterceptor { + + constructor(private readonly _appConfigService: AppConfigService, private readonly _oauthService: OAuthService) { + } + + intercept(req: HttpRequest, next: HttpHandler): Observable> { + return next.handle(req).pipe(catchError((err: any) => { + if (err instanceof HttpErrorResponse) { + if (err.status === 401) { + this._oauthService.initLoginFlow(); + } + } + return of(err); + })); + } +} diff --git a/apps/red-ui/src/app/logo/logo.component.html b/apps/red-ui/src/app/logo/logo.component.html new file mode 100644 index 000000000..2537c4456 --- /dev/null +++ b/apps/red-ui/src/app/logo/logo.component.html @@ -0,0 +1,4 @@ + diff --git a/apps/red-ui/src/app/logo/logo.component.scss b/apps/red-ui/src/app/logo/logo.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/logo/logo.component.ts b/apps/red-ui/src/app/logo/logo.component.ts new file mode 100644 index 000000000..bda159df5 --- /dev/null +++ b/apps/red-ui/src/app/logo/logo.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'redaction-logo', + templateUrl: './logo.component.html', + styleUrls: ['./logo.component.scss'] +}) +export class LogoComponent implements OnInit { + + constructor() { } + + 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 0123f9eff..289c23222 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 @@ -9,33 +9,43 @@ translate="top-bar.navigation-items.projects.label"> + [routerLink]="'/ui/projects/'+appStateService.activeProject.project.projectId" + mat-menu-item>{{appStateService.activeProject.project.projectName}}
+ translate="top-bar.navigation-items.projects.label">
- {{appStateService.activeProject.projectName}} + [routerLink]="'/ui/projects/'+appStateService.activeProject.project.projectId"> + {{appStateService.activeProject.project.projectName}}
+ [routerLink]="'/ui/projects/'+appStateService.activeProject.project.projectId+'/file/'+appStateService.activeFile.fileId"> {{appStateService.activeFile.filename}}
+
+ +
+
- + +
+
+ +
+
+
+
+
+ +
-
+
-
-
-
+
+
+
- {{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }} + {{'projects.table-header.title.label'| translate:{length: appStateService.allProjects?.length || 0} }} -
-
-
-
+
+
+
+
-
-
-
-
- {{project.projectName}} -
-
-
12
-
9
-
25 Dec. 2020
-
+
+
+
+
+ {{pw.project.projectName}}
-
- -
-
- -
+
+
{{documentCount(pw)}}
+
{{userCount(pw)}}
+
{{pw.project.date | date:'mediumDate'}}
+
+
+
+ +
+
+ +
-
-
-
d
-
s
+
+
+
+ +
+
+ +
+
+
- -
- - +
+ + + + +
+
+ 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 ce8355379..3c707e309 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 @@ -2,8 +2,22 @@ .stats-subtitle { margin-top: 6px; + + mat-icon { + width: 12px; + height: 12px; + margin-right: 4px; + } } .stats-bar { width: 160px; } + +.add-project-btn { + mat-icon { + width: 14px; + margin-right: 10px; + color: $white; + } +} 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 31c439ef6..214029a0c 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 @@ -4,8 +4,10 @@ import {MatDialog} from "@angular/material/dialog"; import {AddEditProjectDialogComponent} from "./add-edit-project-dialog/add-edit-project-dialog.component"; import {ConfirmationDialogComponent} from "../../common/confirmation-dialog/confirmation-dialog.component"; import {TranslateService} from "@ngx-translate/core"; -import {NotificationService, NotificationType} from "../../notification/notification.service"; -import {AppStateService} from "../../state/app-state.service"; +import {NotificationService} from "../../notification/notification.service"; +import {AppStateService, ProjectWrapper} from "../../state/app-state.service"; +import {UserService} from "../../user/user.service"; +import {ProjectDetailsDialogComponent} from "../project-overview-screen/project-details-dialog/project-details-dialog.component"; @Component({ selector: 'redaction-project-listing-screen', @@ -14,30 +16,29 @@ import {AppStateService} from "../../state/app-state.service"; }) export class ProjectListingScreenComponent implements OnInit { - viewReady = false; - constructor( public readonly appStateService: AppStateService, + private readonly _userService: UserService, private readonly _projectControllerService: ProjectControllerService, private readonly _translateService: TranslateService, private readonly _notificationService: NotificationService, private readonly _dialog: MatDialog) { } + get user() { + return this._userService.user; + } + ngOnInit(): void { - this._reloadProjects(true); + this.appStateService.reset(); } openAddProjectDialog(project?: Project): void { - const dialogRef = this._dialog.open(AddEditProjectDialogComponent, { + this._dialog.open(AddEditProjectDialogComponent, { width: '400px', maxWidth: '90vw', data: project }); - - dialogRef.afterClosed().subscribe(result => { - this._reloadProjects(); - }); } editProject($event: MouseEvent, project: Project) { @@ -54,21 +55,26 @@ export class ProjectListingScreenComponent implements OnInit { dialogRef.afterClosed().subscribe(result => { if (result) { - this._projectControllerService.deleteProject(project.projectId).subscribe(() => { - this._reloadProjects(); - }, () => { - this._notificationService.showToastNotification(this._translateService.instant('projects.delete.delete-failed.label', project), null, NotificationType.ERROR) - }); + this.appStateService.deleteProject(project); } }); } - private _reloadProjects(initial: boolean = false) { - this.appStateService.reset(); - this.appStateService.loadAllProjects().subscribe(() => { - if (initial) { - this.viewReady = true; - } + showDetailsDialog($event: MouseEvent, project: ProjectWrapper) { + $event.stopPropagation(); + this._dialog.open(ProjectDetailsDialogComponent, { + width: '600px', + maxWidth: '90vw', + data: project }); } + + + documentCount(project: ProjectWrapper) { + return project.files.length; + } + + userCount(project: ProjectWrapper) { + return 1; + } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details-dialog/project-details-dialog.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details-dialog/project-details-dialog.component.ts index 8ec829948..27343d785 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details-dialog/project-details-dialog.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details-dialog/project-details-dialog.component.ts @@ -1,12 +1,8 @@ import {Component, Inject, OnInit} from '@angular/core'; -import {FileStatus, FileUploadControllerService, Project, ReanalysisControllerService} from "@redaction/red-ui-http"; +import {FileUploadControllerService, ReanalysisControllerService} from "@redaction/red-ui-http"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {download} from "../../../utils/file-download-utils"; - -export interface ProjectDetails { - project: Project; - files: FileStatus[]; -} +import {ProjectWrapper} from "../../../state/app-state.service"; @Component({ selector: 'redaction-project-details-dialog', @@ -19,7 +15,7 @@ export class ProjectDetailsDialogComponent implements OnInit { private readonly _fileUploadControllerService: FileUploadControllerService, private readonly _reanalysisControllerService: ReanalysisControllerService, public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public projectDetails: ProjectDetails) { + @Inject(MAT_DIALOG_DATA) public projectDetails: ProjectWrapper) { } ngOnInit(): void { 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 89477b61b..8502d10e5 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,4 +1,3 @@ -
@@ -22,7 +21,7 @@
- {{'project-overview.table-header.title.label'| translate:{ length: appStateService.projectFiles?.length || 0 } }} + {{'project-overview.table-header.title.label'| translate:{ length: appStateService.activeProject?.files.length || 0 } }}
@@ -43,7 +42,7 @@
{{ fileStatus.filename }} @@ -83,23 +82,29 @@
-
Edit
-
Delete
-
View
+
+ +
+
+ +
+
+ +
- {{ appStateService.projectFiles.length }} + {{ appStateService.activeProject.files.length }}
9
- {{ appStateService.activeProject.date | date:'d MMM. yyyy' }} + {{ appStateService.activeProject.project.date | date:'d MMM. yyyy' }}
- {{ appStateService.activeProject.projectName }} + {{ appStateService.activeProject.project.projectName }}
@@ -110,7 +115,7 @@
- {{ appStateService.activeProject.description }} + {{ appStateService.activeProject.project.description }}
@@ -129,6 +134,3 @@
-
- - 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 1a6416b9c..d608202ad 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 @@ -1,5 +1,5 @@ -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; import { FileStatus, FileUploadControllerService, @@ -7,13 +7,17 @@ import { ReanalysisControllerService, StatusControllerService } from '@redaction/red-ui-http'; -import { NotificationService, NotificationType } from '../../notification/notification.service'; -import { TranslateService } from '@ngx-translate/core'; -import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component'; -import { MatDialog } from '@angular/material/dialog'; -import { AppStateService } from '../../state/app-state.service'; -import { ProjectDetailsDialogComponent } from './project-details-dialog/project-details-dialog.component'; -import { FileDropOverlayService } from '../../upload/file-drop/service/file-drop-overlay.service'; +import {NotificationService, NotificationType} from '../../notification/notification.service'; +import {TranslateService} from '@ngx-translate/core'; +import {ConfirmationDialogComponent} from '../../common/confirmation-dialog/confirmation-dialog.component'; +import {MatDialog} from '@angular/material/dialog'; +import {AppStateService} from '../../state/app-state.service'; +import {ProjectDetailsDialogComponent} from './project-details-dialog/project-details-dialog.component'; +import {FileDropOverlayService} from '../../upload/file-drop/service/file-drop-overlay.service'; +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 {AddEditProjectDialogComponent} from "../project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component"; @Component({ @@ -23,26 +27,25 @@ import { FileDropOverlayService } from '../../upload/file-drop/service/file-drop }) export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { - viewReady = false; - @ViewChild('dropzoneComponent', { static: true }) dropZoneComponent; + @ViewChild('dropzoneComponent', {static: true}) dropZoneComponent; dragActive = false; sortOptions: any[] = [{ - value: { name: 'lastUpdated', order: 'desc' }, + value: {name: 'lastUpdated', order: 'desc'}, label: 'project-overview.sorting.last-updated-desc.label', icon: 'red:sort-desc' }, { - value: { name: 'lastUpdated', order: 'asc' }, + value: {name: 'lastUpdated', order: 'asc'}, label: 'project-overview.sorting.last-updated-asc.label', icon: 'red:sort-asc' }, { - value: { name: 'filename', order: 'desc' }, + value: {name: 'filename', order: 'desc'}, label: 'project-overview.sorting.file-name-desc.label', icon: 'red:sort-desc' }, { - value: { name: 'filename', order: 'asc' }, + value: {name: 'filename', order: 'asc'}, label: 'project-overview.sorting.file-name-asc.label', icon: 'red:sort-asc' }]; @@ -57,6 +60,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private readonly _translateService: TranslateService, private readonly _notificationService: NotificationService, private readonly _dialog: MatDialog, + private readonly _fileUploadService: FileUploadService, + private _uploadStatusOverlayService: UploadStatusOverlayService, private readonly _reanalysisControllerService: ReanalysisControllerService, private readonly _router: Router, private readonly _fileDropOverlayService: FileDropOverlayService, @@ -64,7 +69,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private readonly _projectControllerService: ProjectControllerService) { this._activatedRoute.params.subscribe(params => { this.projectId = params.projectId; - this._loadProject(true); + this.appStateService.activateProject(this.projectId); }); } @@ -101,16 +106,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { showDetailsDialog($event: MouseEvent) { $event.stopPropagation(); - const dialogRef = this._dialog.open(ProjectDetailsDialogComponent, { + this._dialog.open(ProjectDetailsDialogComponent, { width: '600px', maxWidth: '90vw', - data: { - project: this.appStateService.activeProject, - files: this.appStateService.projectFiles - } - }); - dialogRef.afterClosed().subscribe(result => { - this._getFileStatus(); + data: this.appStateService.activeProject }); } @@ -124,29 +123,61 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { reanalyseFile($event: MouseEvent, fileStatus: FileStatus) { $event.stopPropagation(); - this._reanalysisControllerService.reanalyseFile(this.appStateService.activeProject.projectId, fileStatus.fileId).subscribe(() => { + this._reanalysisControllerService.reanalyseFile(this.appStateService.activeProject.project.projectId, fileStatus.fileId).subscribe(() => { this._getFileStatus(); }); } - private _loadProject(initial: boolean = false) { - this.appStateService.activateProject(this.projectId).subscribe(() => { - if (initial) { - this.viewReady = true; - } - }); - } - private _getFileStatus() { - this.appStateService.getActiveProjectStatus(true).subscribe(() => { - }); + this.appStateService.reloadActiveProjectFiles(); } fileId(index, item) { return item.fileId; } - uploadFiles(files: any) { + 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) { + $event.stopPropagation(); + this._dialog.open(AddEditProjectDialogComponent, { + width: '400px', + maxWidth: '90vw', + data: this.appStateService.activeProject.project + }); + } + + deleteProject($event: MouseEvent) { + $event.stopPropagation(); + const dialogRef = this._dialog.open(ConfirmationDialogComponent, { + width: '400px', + maxWidth: '90vw', + }); + + dialogRef.afterClosed().subscribe(result => { + if (result) { + this.appStateService.deleteProject(this.appStateService.activeProject.project); + this.ngOnDestroy(); + this._router.navigate(['/ui/projects']); + console.log('navigate?'); + } + }); + } + + } diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html new file mode 100644 index 000000000..a91b3ca35 --- /dev/null +++ b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html @@ -0,0 +1,14 @@ + + + + + + diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts new file mode 100644 index 000000000..5d7fc699d --- /dev/null +++ b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -0,0 +1,108 @@ +import {Component, Input, OnInit} from '@angular/core'; + + +@Component({ + selector: 'redaction-simple-doughnut-chart', + templateUrl: './simple-doughnut-chart.component.html', + styleUrls: ['./simple-doughnut-chart.component.scss'] +}) +export class SimpleDoughnutChartComponent implements OnInit { + + @Input() initialValues: []; + @Input() angleOffset: number = -90; + @Input() colors: string[] = ["#6495ED", "goldenrod", "#cd5c5c", "thistle", "lightgray"]; + @Input() cx: number = 80; + @Input() cy: number = 80; + @Input() radius: number = 60; + @Input() strokeWidth: 30; + + chartData: any[] = []; + sortedValues: number[] = []; + perimeter: number; + data: any[] = []; + + constructor() { + } + + ngOnInit() { + this.sortInitialValues(); + this.calculateChartData(); + } + + get adjustedCircumference() { + return this.circumference - 2 + }; + + get circumference() { + return 2 * Math.PI * this.radius + }; + + get dataTotal() { + return this.sortedValues.reduce((acc, val) => acc + val) + }; + + calculateChartData() { + this.sortedValues.forEach((dataVal, index) => { + const {x, y} = this.calculateTextCoords(dataVal, this.angleOffset) + // start at -90deg so that the largest segment is perpendicular to top + const data = { + degrees: this.angleOffset, + textX: x, + textY: y + } + this.chartData.push(data) + this.angleOffset = this.dataPercentage(dataVal) * 360 + this.angleOffset + }) + } + + calculateStrokeDashOffset(dataVal, circumference) { + const strokeDiff = this.dataPercentage(dataVal) * circumference + return circumference - strokeDiff + } + + + calculateTextCoords(dataVal, angleOffset) { + // t must be radians + // x(t) = r cos(t) + j + // y(t) = r sin(t) + j + + const angle = (this.dataPercentage(dataVal) * 360) / 2 + angleOffset + const radians = this.degreesToRadians(angle) + + const textCoords = { + x: this.radius * Math.cos(radians) + this.cx, + y: this.radius * Math.sin(radians) + this.cy + } + return textCoords + } + + + degreesToRadians(angle) { + return angle * (Math.PI / 180) + } + + + dataPercentage(dataVal) { + return dataVal / this.dataTotal + } + + + percentageString(dataVal) { + return `${Math.round(this.dataPercentage(dataVal) * 100)}%` + } + + returnCircleTransformValue(index) { + return `rotate(${this.chartData[index].degrees}, ${this.cx}, ${this.cy})` + } + + + segmentBigEnough(dataVal) { + return Math.round(this.dataPercentage(dataVal) * 100) > 5 + } + + sortInitialValues() { + return this.sortedValues = this.initialValues.sort((a, b) => b - a) + } + + +} diff --git a/apps/red-ui/src/app/state/app-state.guard.ts b/apps/red-ui/src/app/state/app-state.guard.ts new file mode 100644 index 000000000..bd7b81c08 --- /dev/null +++ b/apps/red-ui/src/app/state/app-state.guard.ts @@ -0,0 +1,21 @@ +import {Injectable} from "@angular/core"; +import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree} from "@angular/router"; +import {Observable} from "rxjs"; +import {AppStateService} from "./app-state.service"; + + +@Injectable({ + providedIn: 'root' +}) +export class AppStateGuard implements CanActivate { + + constructor(private readonly _appStateService: AppStateService) { + } + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { + return this._appStateService.loadAllProjects().then(t => { + return true; + }) + } + +} 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 13c510cf7..9cb3d367b 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -1,72 +1,147 @@ import {Injectable} from "@angular/core"; import {FileStatus, Project, ProjectControllerService, StatusControllerService} from "@redaction/red-ui-http"; -import {map, mergeMap, tap} from "rxjs/operators"; +import {NotificationService, NotificationType} from "../notification/notification.service"; +import {TranslateService} from "@ngx-translate/core"; +import {Router} from "@angular/router"; + + +export interface AppState { + + projects: ProjectWrapper[]; + activeProject: ProjectWrapper; + activeFile: FileStatus; + totalAnalysedPages?: number; + totalDocuments?: number; +} + +export class ProjectWrapper { + constructor(public project: Project, public files: FileStatus[]) { + + } + + get projectDate() { + return this.project.date; + } +} @Injectable({ providedIn: 'root' }) export class AppStateService { - private _projects: Project[]; - private _activeProjectFiles: FileStatus[]; - private _activeProject: Project; - private _activeFile: FileStatus; + private _appState: AppState; - constructor(private readonly _projectControllerService: ProjectControllerService, - private readonly _statusControllerService: StatusControllerService) { + constructor( + private readonly _router: Router, + private readonly _projectControllerService: ProjectControllerService, + private readonly _notificationService: NotificationService, + private readonly _translateService: TranslateService, + private readonly _statusControllerService: StatusControllerService) { + this._appState = { + projects: [], + activeProject: null, + activeFile: null + } } + get activeProject(): ProjectWrapper { + return this._appState.activeProject; + } - get activeProject(): Project { - return this._activeProject; + get allProjects(): ProjectWrapper[] { + return this._appState.projects; } get activeFile(): FileStatus { - return this._activeFile; + return this._appState.activeFile; } - get allProjects(): Project[] { - return this._projects; + async loadAllProjects() { + const projects = await this._projectControllerService.getProjects().toPromise(); + this._appState.projects = projects.map(p => { + return new ProjectWrapper(p, []); + }); + for (let project of projects) { + await this.getFiles(project.projectId); + } + this._computeStats(); } - get projectFiles(): FileStatus[] { - return this._activeProjectFiles; + async getFiles(projectId: string) { + const files = await this._statusControllerService.getProjectStatus(projectId).toPromise(); + const project = this._appState.projects.find(p => p.project.projectId === projectId); + project.files = files; + this._computeStats(); + return files; } - loadAllProjects() { - return this._projectControllerService.getProjects().pipe(tap((projects: Project[]) => { - this._projects = projects; - })); - } activateProject(projectId: string) { - this._activeProjectFiles = null; - this._activeFile = null; - return this._projectControllerService.getProject(projectId).pipe(tap(project => { - this._activeProject = project; - })).pipe(mergeMap(() => { - return this.getActiveProjectStatus(); - })); - } - - getActiveProjectStatus(update: boolean = false) { - return this._statusControllerService.getProjectStatus(this._activeProject.projectId).pipe(tap((files: FileStatus[]) => { - this._activeProjectFiles = files; - })) + this._appState.activeFile = null; + this._appState.activeProject = this._appState.projects.find(p => p.project.projectId === projectId); + if (!this._appState.activeProject) { + this._router.navigate(['/ui/projects']); + } + return this._appState.activeProject; } activateFile(projectId: string, fileId: string) { - return this.activateProject(projectId).pipe(map((files: FileStatus[]) => { - const file = files.find(f => f.fileId === fileId); - this._activeFile = file; - return file; - })); + this._appState.activeFile = null; + this._appState.activeProject = this._appState.projects.find(p => p.project.projectId === projectId); + this._appState.activeFile = this._appState.activeProject.files.find(f => f.fileId === fileId); } reset() { - this._activeProject = null; - this._activeProjectFiles = null; - this._activeFile = null; + this._appState.activeFile = null; + this._appState.activeProject = null; } + deleteProject(project: Project) { + this._projectControllerService.deleteProject(project.projectId).subscribe(() => { + const index = this._appState.projects.findIndex(p => p.project.projectId === project.projectId); + this._appState.projects.splice(index, 1); + this._appState.projects = [...this._appState.projects]; + }, () => { + this._notificationService.showToastNotification(this._translateService.instant('projects.delete.delete-failed.label', project), null, NotificationType.ERROR) + }); + } + + async addOrUpdateProject(project: Project) { + try { + let updatedProject; + if (project?.projectId) { + updatedProject = await this._projectControllerService.updateProject(project, project.projectId).toPromise(); + } else { + updatedProject = await this._projectControllerService.createProject(project).toPromise(); + } + const foundProject = this._appState.projects.find(p => p.project.projectId === updatedProject.projectId); + if (foundProject) { + Object.assign(foundProject.project, updatedProject); + } else { + this._appState.projects.push(new ProjectWrapper(updatedProject, [])); + } + this._appState.projects = [...this._appState.projects]; + } catch (error) { + this._notificationService.showToastNotification(this._translateService.instant('projects.add-edit-dialog.errors.save'), null, NotificationType.ERROR); + } + } + + private _computeStats() { + let totalAnalysedPages = 0; + let totalDocuments = 0; + this._appState.projects.forEach(p => { + totalDocuments += p.files.length; + p.files.forEach(f => { + totalAnalysedPages += f.numberOfPages; + }) + }) + + this._appState.totalAnalysedPages = totalAnalysedPages; + this._appState.totalDocuments = totalDocuments; + + } + + async reloadActiveProjectFiles() { + await this.getFiles(this._appState.activeProject.project.projectId); + } } diff --git a/apps/red-ui/src/app/upload/file-upload.service.ts b/apps/red-ui/src/app/upload/file-upload.service.ts index 8ad52725a..a43d37e77 100644 --- a/apps/red-ui/src/app/upload/file-upload.service.ts +++ b/apps/red-ui/src/app/upload/file-upload.service.ts @@ -21,7 +21,7 @@ export class FileUploadService { uploadFiles(files: FileUploadModel[]) { this.files.push(...files); files.forEach(newFile => { - this._fileUploadControllerService.uploadFileForm(newFile.file, this._appStateService.activeProject.projectId, 'events', true).subscribe((event) => { + this._fileUploadControllerService.uploadFileForm(newFile.file, this._appStateService.activeProject.project.projectId, 'events', true).subscribe((event) => { if (event.type === HttpEventType.UploadProgress) { newFile.progress = Math.round((event.loaded / (event.total || event.loaded) * 100)); } @@ -42,6 +42,6 @@ export class FileUploadService { } stopAllUploads() { - + this.files = []; } } diff --git a/apps/red-ui/src/app/user/user.service.ts b/apps/red-ui/src/app/user/user.service.ts index d422b58cb..8da70bd68 100644 --- a/apps/red-ui/src/app/user/user.service.ts +++ b/apps/red-ui/src/app/user/user.service.ts @@ -1,11 +1,13 @@ import {Injectable} from "@angular/core"; -import {OAuthService} from "angular-oauth2-oidc"; +import {OAuthService, UserInfo} from "angular-oauth2-oidc"; @Injectable({ providedIn: 'root' }) export class UserService { + private _currentUser: UserInfo; + constructor(private _oauthService: OAuthService) { } @@ -13,4 +15,13 @@ export class UserService { this._oauthService.logOut(); } + async loadCurrentUser() { + this._currentUser = await this._oauthService.loadUserProfile(); + } + + get user() { + return this._currentUser; + } + + } diff --git a/apps/red-ui/src/app/utils/app-load-state.service.ts b/apps/red-ui/src/app/utils/app-load-state.service.ts new file mode 100644 index 000000000..66de6cc4a --- /dev/null +++ b/apps/red-ui/src/app/utils/app-load-state.service.ts @@ -0,0 +1,17 @@ +import { EventEmitter, Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class AppLoadStateService { + private _loadingEvent = new EventEmitter(); + + get loading(): Observable { + return this._loadingEvent; + } + + pushLoadingEvent(event: boolean) { + this._loadingEvent.next(event); + } +} diff --git a/apps/red-ui/src/app/utils/composite-route.guard.ts b/apps/red-ui/src/app/utils/composite-route.guard.ts new file mode 100644 index 000000000..6a62a009d --- /dev/null +++ b/apps/red-ui/src/app/utils/composite-route.guard.ts @@ -0,0 +1,49 @@ +import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; +import { Injectable, Injector } from '@angular/core'; +import { Observable, of } from 'rxjs'; +import { catchError, mergeMap, tap } from 'rxjs/operators'; +import {AppLoadStateService} from "./app-load-state.service"; + +@Injectable({ + providedIn: 'root' +}) +export class CompositeRouteGuard implements CanActivate { + + + constructor(protected router: Router, protected injector: Injector, private appLoadStateService: AppLoadStateService) {} + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + this.appLoadStateService.pushLoadingEvent(true); + let compositeCanActivateObservable: Observable = of(true); + + const routeGuards = route.data.routeGuards; + + if (routeGuards) { + for (let i = 0; i < routeGuards.length; i++) { + const routeGuard = this.injector.get(routeGuards[i]); + const canActivateObservable: Observable = routeGuard.canActivate(route, state); + compositeCanActivateObservable = compositeCanActivateObservable.pipe( + mergeMap(bool => { + if (!bool) { + return of(false); + } else { + return canActivateObservable; + } + }) + ); + } + } + + compositeCanActivateObservable = compositeCanActivateObservable.pipe( + tap(() => { + this.appLoadStateService.pushLoadingEvent(false); + }), + catchError(() => { + this.appLoadStateService.pushLoadingEvent(false); + return of(false); + }) + ); + + return compositeCanActivateObservable; + } +} diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index ece105c09..549b5c936 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -1,4 +1,7 @@ { + "app-name": { + "label": "Redacto" + }, "common": { "confirmation-dialog": { "title": { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index fa41f5aef..26d104643 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -1,4 +1,7 @@ { + "app-name": { + "label": "Redacto" + }, "upload-status": { "dialog": { "title": { diff --git a/apps/red-ui/src/assets/icons/general/calendar.svg b/apps/red-ui/src/assets/icons/general/calendar.svg new file mode 100644 index 000000000..690f2b259 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/calendar.svg @@ -0,0 +1,31 @@ + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg b/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg new file mode 100644 index 000000000..5d405f9e8 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/files.svg b/apps/red-ui/src/assets/icons/general/files.svg new file mode 100644 index 000000000..4234a53f8 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/files.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/info.svg b/apps/red-ui/src/assets/icons/general/info.svg index 8fa239c81..2a5ae4e0a 100644 --- a/apps/red-ui/src/assets/icons/general/info.svg +++ b/apps/red-ui/src/assets/icons/general/info.svg @@ -10,35 +10,5 @@ C485.371,388.667,512,324.38,512,256S485.371,123.333,437.02,74.98z M256,70c30.327,0,55,24.673,55,55c0,30.327-24.673,55-55,55 c-30.327,0-55-24.673-55-55C201,94.673,225.673,70,256,70z M326,420H186v-30h30V240h-30v-30h110v180h30V420z"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/plus_icon.svg b/apps/red-ui/src/assets/icons/general/plus_icon.svg index 3789e2152..546d1a2e1 100644 --- a/apps/red-ui/src/assets/icons/general/plus_icon.svg +++ b/apps/red-ui/src/assets/icons/general/plus_icon.svg @@ -1,8 +1,5 @@ - - - diff --git a/apps/red-ui/src/assets/icons/general/stats.svg b/apps/red-ui/src/assets/icons/general/stats.svg new file mode 100644 index 000000000..d6a198b7c --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/stats.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/user.svg b/apps/red-ui/src/assets/icons/general/user.svg new file mode 100644 index 000000000..5d1a85a26 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/user.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index ddd72c182..0123248b5 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -10,6 +10,11 @@ border-radius: 12px; font-size: 10px; border: 1px solid #E2E4E9; + font-family: Inter, sans-serif; + letter-spacing: 0; + line-height: 12px; + text-align: center; + &.large { height: 32px; @@ -18,12 +23,17 @@ font-size: 13px; } - &.gray { + &.gray-dark { background-color: $grey-4; border: none; } - &.red { + &.gray-red { + background-color: $grey-4; + border: none; + } + + &.red-white { background-color: $red-1; color: $white; border: none; diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss index f51bf1b1d..85930a2fa 100644 --- a/apps/red-ui/src/assets/styles/red-controls.scss +++ b/apps/red-ui/src/assets/styles/red-controls.scss @@ -34,3 +34,8 @@ } } + +.icon-10 { + width: 10px; + height: 10px; +} diff --git a/apps/red-ui/src/assets/styles/red-logo.scss b/apps/red-ui/src/assets/styles/red-logo.scss new file mode 100644 index 000000000..bb61aa598 --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-logo.scss @@ -0,0 +1,24 @@ +@import "red-variables"; + +.redacto-logo { + height: 14px; + width: 22px; + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-direction: column; + + .line-1 { + height: 6px; + width: 16px; + border-radius: 3px; + background-color: $red-1; + } + + .line-2 { + height: 6px; + width: 22px; + border-radius: 6px; + background-color: $red-1; + } +} 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 75f893978..e1d6ad22e 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -41,18 +41,28 @@ html, body { > div { padding: 10px; + + mat-icon { + cursor: pointer; + width: 20px; + height: 20px; + + &:hover { + color: $primary; + } + } } } } .filters { - font-size: 13px; - line-height: 14px; + font-size: 13px; + line-height: 14px; - > div { - padding: 10px 14px; - } - } + > div { + padding: 10px 14px; + } +} .flex-row { display: flex; @@ -106,7 +116,7 @@ html, body { font-size: 14px; letter-spacing: 0; line-height: 14px; - height: 18px; + padding: 4px; } .red-top-bar { @@ -122,6 +132,23 @@ html, body { justify-content: space-between; padding: 0 24px; + .center { + display: flex; + align-items: center; + justify-content: center; + } + + .app-name { + margin-left: 16px; + height: 20px; + color: #283241; + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 600; + letter-spacing: 0; + line-height: 20px; + } + .menu { display: flex; align-items: center; diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 2db368afb..af02f0d7b 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -10,3 +10,4 @@ @import "red-tables"; @import "red-components"; @import "red-controls"; +@import "red-logo"; diff --git a/package.json b/package.json index c5c7f5360..afa682269 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,9 @@ "@pdftron/webviewer": "^7.0.1", "angular-oauth2-oidc": "^10.0.3", "angular-oauth2-oidc-jwks": "^9.0.0", + "chart.js": "^2.9.3", "file-saver": "^2.0.2", + "ng2-charts": "^2.4.2", "ng2-file-upload": "^1.4.0", "ngp-sort-pipe": "^0.0.4", "ngx-dropzone": "^2.2.2", diff --git a/yarn.lock b/yarn.lock index 6e3215bc0..b363400cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1808,6 +1808,13 @@ dependencies: "@babel/types" "^7.3.0" +"@types/chart.js@^2.9.24": + version "2.9.25" + resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.25.tgz#a22d18f6f7cb5b4499f39de600c4c520f635a58f" + integrity sha512-SPgPISpaGM42WL9Dezms4+8fInHxAXDzTs8DwPxhGuJT+jETXlVITTbe8bvK1n+sMmyyelR9B4w0lwMkA24oJg== + dependencies: + moment "^2.10.2" + "@types/color-name@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" @@ -3203,6 +3210,29 @@ chardet@^0.7.0: resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== +chart.js@^2.9.3: + version "2.9.3" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7" + integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw== + dependencies: + chartjs-color "^2.1.0" + moment "^2.10.2" + +chartjs-color-string@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" + integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A== + dependencies: + color-name "^1.0.0" + +chartjs-color@^2.1.0: + version "2.4.1" + resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0" + integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w== + dependencies: + chartjs-color-string "^0.6.0" + color-convert "^1.9.3" + check-more-types@^2.24.0: version "2.24.0" resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600" @@ -3430,7 +3460,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.9.0, color-convert@^1.9.1: +color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -7142,6 +7172,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash-es@^4.17.15: + version "4.17.15" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78" + integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ== + lodash.clonedeep@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" @@ -7554,6 +7589,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdir dependencies: minimist "^1.2.5" +moment@^2.10.2: + version "2.29.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" + integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== + moment@^2.27.0, moment@^2.28.0: version "2.28.0" resolved "https://registry.yarnpkg.com/moment/-/moment-2.28.0.tgz#cdfe73ce01327cee6537b0fafac2e0f21a237d75" @@ -7694,6 +7734,15 @@ ng-packagr@^10.1.2: stylus "^0.54.7" terser "^5.0.0" +ng2-charts@^2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/ng2-charts/-/ng2-charts-2.4.2.tgz#6b2d0a1a66911247c2e8c3d8602ba9aa7339bf22" + integrity sha512-mY3C2uKCaApHCQizS2YxEOqQ7sSZZLxdV6N1uM9u/VvUgVtYvlPtdcXbKpN52ak93ZE22I73DiLWVDnDNG4/AQ== + dependencies: + "@types/chart.js" "^2.9.24" + lodash-es "^4.17.15" + tslib "^2.0.0" + ng2-file-upload@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.4.0.tgz#8dea28d573234c52af474ad2a4001b335271e5c4"