Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Pull request #10: Sorting

Browse Source 
Merge in RED/ui from sorting to master

* commit '6ccf61c21fe505663bd47afca7c4e82607f1259d':
  Sort files & translations
  Sort projects list
  Style mat-select
This commit is contained in:
Timo Bejan 2020-10-14 12:16:33 +02:00
commit e8fc1b282f
15 changed files with 178 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
apps/red-ui/src/app/app.module.ts
View File

@ -1,57 +1,57 @@
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 {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 {SimpleDoughnutChartComponent} from './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 { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule, FormsModule } 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 { 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';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -74,11 +74,12 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
StatusBarComponent,
LogoComponent,
SimpleDoughnutChartComponent,
ManualRedactionDialogComponent
ManualRedactionDialogComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
AuthModule,
@ -107,7 +108,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
component: ProjectListingScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, AppStateGuard],
routeGuards: [AuthGuard, AppStateGuard]
}
},
{
@ -115,7 +116,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
component: ProjectOverviewScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, AppStateGuard],
routeGuards: [AuthGuard, AppStateGuard]
}
},
{
@ -123,7 +124,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
component: FilePreviewScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, AppStateGuard],
routeGuards: [AuthGuard, AppStateGuard]
}
}
]
@ -144,7 +145,7 @@ 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
],

0
apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html → apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
View File

2
apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss → apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
View File

@ -1,4 +1,4 @@
@import "../../assets/styles/red-variables";
@import "../../../assets/styles/red-variables";
.container {
position: relative;

2
apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts → apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
View File

@ -1,5 +1,5 @@
import {Component, Input, OnInit} from '@angular/core';
import { Color } from '../utils/types';
import { Color } from '../../utils/types';
export class DoughnutChartConfig {
value: number;

10
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -24,12 +24,18 @@
</span>
<div class="actions">
<div translate="projects.table-header.bulk-select.label"></div>
<div translate="projects.table-header.recent.label"></div>
<mat-form-field appearance="none" class="red-select">
<mat-select [(ngModel)]="sortingOption" panelClass="red-select-panel">
<mat-option *ngFor="let option of sortingOptions" [value]="option">
{{option.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="table-content">
<div *ngFor="let pw of appStateService.allProjects | sortBy:'desc':'projectDate'"
<div *ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
[routerLink]="'/ui/projects/'+pw.project.projectId"
class="table-item pointer"
>

2
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
View File

@ -45,7 +45,7 @@
mat-icon {
height: 16px;
width: 16px;
margin-top: 3px;
margin-top: 2px;
}
}
}

12
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -8,7 +8,8 @@ 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';
import { DoughnutChartConfig } from '../../simple-doughnut-chart/simple-doughnut-chart.component';
import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
import { SortingOption } from '../../utils/types';
@Component({
selector: 'redaction-project-listing-screen',
@ -16,8 +17,13 @@ import { DoughnutChartConfig } from '../../simple-doughnut-chart/simple-doughnut
styleUrls: ['./project-listing-screen.component.scss']
})
export class ProjectListingScreenComponent implements OnInit {
projectsChartData: DoughnutChartConfig [] = [];
documentsChartData: DoughnutChartConfig [] = [];
public projectsChartData: DoughnutChartConfig [] = [];
public documentsChartData: DoughnutChartConfig [] = [];
public sortingOptions: SortingOption[] = [
{ label: 'projects.sorting.recent.label', order: 'desc', column: 'projectDate' },
{ label: 'projects.sorting.alphabetically.label', order: 'asc', column: 'project.projectName' }
];
public sortingOption: SortingOption = this.sortingOptions[0];
constructor(
public readonly appStateService: AppStateService,

10
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -25,7 +25,13 @@
</span>
<div class="actions">
<div translate="project-overview.table-header.bulk-select.label"></div>
<div translate="project-overview.table-header.recent.label"></div>
<mat-form-field appearance="none" class="red-select">
<mat-select [(ngModel)]="sortingOption" panelClass="red-select-panel">
<mat-option *ngFor="let option of sortingOptions" [value]="option">
{{option.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
@ -39,7 +45,7 @@
<div class="table-item"
[class.pointer]="fileStatus.status === 'PROCESSED'"
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sorting.order:sorting.name; trackBy:fileId"
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sortingOption.order:sortingOption.column; trackBy:fileId"
[routerLink]="fileStatus.status === 'PROCESSED' ? ['/ui/projects/'+projectId+'/file/'+fileStatus.fileId] : []">
<div class="flex-3 table-item-title min-width" [matTooltip]="'['+fileStatus.status+'] '+fileStatus.filename ">
{{ fileStatus.filename }}

37
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -19,6 +19,7 @@ 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";
import {UserService} from "../../user/user.service";
import { SortingOption } from '../../utils/types';
@Component({
@ -27,30 +28,19 @@ import {UserService} from "../../user/user.service";
styleUrls: ['./project-overview-screen.component.scss']
})
export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
@ViewChild('dropzoneComponent', {static: true}) dropZoneComponent;
@ViewChild('dropzoneComponent', {static: true})
dropZoneComponent;
dragActive = false;
sortOptions: any[] = [{
value: {name: 'lastUpdated', order: 'desc'},
label: 'project-overview.sorting.last-updated-desc.label',
icon: 'red:sort-desc'
}, {
value: {name: 'lastUpdated', order: 'asc'},
label: 'project-overview.sorting.last-updated-asc.label',
icon: 'red:sort-asc'
}, {
value: {name: 'filename', order: 'desc'},
label: 'project-overview.sorting.file-name-desc.label',
icon: 'red:sort-desc'
}, {
value: {name: 'filename', order: 'asc'},
label: 'project-overview.sorting.file-name-asc.label',
icon: 'red:sort-asc'
}];
sorting: any = this.sortOptions[0].value;
public sortingOptions: SortingOption[] = [
{ label: 'project-overview.sorting.recent.label', order: 'desc', column: 'lastUpdated' },
{ label: 'project-overview.sorting.alphabetically.label', order: 'asc', column: 'filename' },
{ label: 'project-overview.sorting.number-of-pages.label', order: 'asc', column: 'numberOfPages' },
{ label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' },
];
public sortingOption: SortingOption = this.sortingOptions[0];
projectId: string;
private _fileStatusInterval;
@ -105,11 +95,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
});
}
sortingChanged($event) {
this.sorting = $event;
}
showDetailsDialog($event: MouseEvent) {
$event.stopPropagation();
this._dialog.open(ProjectDetailsDialogComponent, {

7
apps/red-ui/src/app/utils/types.d.ts vendored
View File

@ -8,3 +8,10 @@ export type Color =
'finished' |
'active' |
'archived';
export class SortingOption {
label: string;
order: string;
column: string;
}

25
apps/red-ui/src/assets/i18n/en.json
View File

@ -179,6 +179,14 @@
},
"no-projects": {
"label": "You currently have no projects. You can start your work by creating a new one!"
},
"sorting": {
"recent": {
"label": "Recent"
},
"alphabetically": {
"label": "Alphabetically"
}
}
},
"file-details": {
@ -243,18 +251,17 @@
}
},
"sorting": {
"label": "Sorting",
"last-updated-desc": {
"label": "Last Updated (Desc)"
"recent": {
"label": "Recent"
},
"last-updated-asc": {
"label": "Last Updated (Asc)"
"alphabetically": {
"label": "Alphabetically"
},
"file-name-desc": {
"label": "Name (Desc)"
"number-of-pages": {
"label": "Number of pages"
},
"file-name-asc": {
"label": "Name (Desc)"
"number-of-analyses": {
"label": "Number of analyses"
}
},
"upload-error": {

1
apps/red-ui/src/assets/styles/red-controls.scss
View File

@ -11,7 +11,6 @@
background: $white;
font-family: Inter, sans-serif;
font-size: 13px;
letter-spacing: 0;
line-height: 14px;
padding: 10px 14px;
transition: color 0.25s ease-in-out;

52
apps/red-ui/src/assets/styles/red-select.scss Normal file
View File

@ -0,0 +1,52 @@
@import "red-variables";
.red-select {
.mat-select-value-text {
font-family: Inter, sans-serif;
color: $grey-1;
font-size: 13px;
line-height: 14px;
}
.mat-form-field-wrapper {
padding-bottom: 0;
}
.mat-form-field-infix {
padding: 0;
border: none;
width: fit-content;
}
.mat-select-value {
max-width: none;
}
.mat-select-arrow-wrapper {
padding-left: 5px;
.mat-select-arrow {
color: $grey-1 !important;
}
}
}
.red-select-panel {
border-radius: 0 !important;
.mat-option {
background: $white !important;
font-family: Inter, sans-serif;
color: $grey-1;
font-size: 13px;
line-height: 14px;
&.mat-selected.mat-active {
color: $red-1;
}
&:hover {
background: #F4F5F7 !important;
}
}
}

9
apps/red-ui/src/assets/styles/red-tables.scss
View File

@ -3,17 +3,16 @@
.table-header {
background-color: rgba(226, 228, 233, 0.9);
padding: 7px 24px 9px;
height: 50px;
padding: 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
.actions {
display: flex;
div {
padding: 10px 14px;
}
align-items: center;
gap: 25px;
}
}

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -6,6 +6,7 @@
@import "red-text-styles";
@import "red-dialog";
@import "red-input";
@import "red-select";
@import "red-media-queries";
@import "red-tables";
@import "red-components";