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

fixes for dialogs

Browse Source
This commit is contained in:
Timo Bejan 2020-10-22 13:18:26 +03:00
parent 3927b7dd9f
commit 95fda2a256
10 changed files with 65 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,7 +55,6 @@ import { AnnotationIconComponent } from './components/annotation-icon/annotation
import { AuthGuard } from './auth/auth.guard';
import { AuthErrorComponent } from './screens/auth-error/auth-error.component';
import { RedRoleGuard } from './auth/red-role.guard';
import { AssignProjectMembersDialogComponent } from './dialogs/assign-project-members-dialog/assign-project-members-dialog.component';
import { MatListModule } from '@angular/material/list';
import { AssignOwnerDialogComponent } from './dialogs/assign-owner-dialog/assign-owner-dialog.component';
@ -75,7 +74,6 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
PdfViewerComponent,
FileDetailsDialogComponent,
ProjectDetailsDialogComponent,
AssignProjectMembersDialogComponent,
AssignOwnerDialogComponent,
FullPageLoadingIndicatorComponent,
InitialsAvatarComponent,

37
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
View File

@ -6,23 +6,26 @@
<form (submit)="saveUsers()" [formGroup]="usersForm">
<div class="dialog-content">
<mat-form-field>
<mat-label>{{'assign-' + data.type + '-owner.dialog.single-user.label' | translate}}</mat-label>
<mat-select formControlName="singleUser">
<mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId">
{{userService.getNameForId(userId)}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="data.type === 'project' ">
<mat-label>{{'assign-' + data.type + '-owner.dialog.multi-user.label' | translate}}</mat-label>
<mat-select formControlName="userList" multiple="true">
<mat-option *ngFor="let userId of multiUsersSelectOptions" [value]="userId">
{{userService.getNameForId(userId)}}
</mat-option>
</mat-select>
</mat-form-field>
<div class="red-input-group">
<mat-form-field>
<mat-label>{{'assign-' + data.type + '-owner.dialog.single-user.label' | translate}}</mat-label>
<mat-select formControlName="singleUser">
<mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId">
{{userService.getNameForId(userId)}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="red-input-group">
<mat-form-field *ngIf="data.type === 'project' ">
<mat-label>{{'assign-' + data.type + '-owner.dialog.multi-user.label' | translate}}</mat-label>
<mat-select formControlName="userList" multiple="true">
<mat-option *ngFor="let userId of multiUsersSelectOptions" [value]="userId">
{{userService.getNameForId(userId)}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>

4
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
View File

@ -0,0 +1,4 @@
.red-input-group {
max-width: 200px;
}

22
apps/red-ui/src/app/dialogs/assign-project-members-dialog/assign-project-members-dialog.component.html
View File

@ -1,22 +0,0 @@
<section class="dialog">
<div [translate]="'project-members.dialog.title.label'"
class="dialog-header heading-l">
</div>
<div class="dialog-content">
<mat-selection-list class="list-50vh" color="primary"
[(ngModel)]="memberIds"
(selectionChange)="selectionChange($event)">
<ng-container *ngFor="let user of userService.allUsers">
<mat-list-option *ngIf="userService.isManager(user) || userService.isUser(user)" [value]="user.userId" checkboxPosition="before">
{{ userService.getNameForId(user.userId) }}
</mat-list-option>
</ng-container>
</mat-selection-list>
</div>
<button (click)="dialogRef.close()" class="dialog-close" mat-icon-button>
<mat-icon svgIcon="red:close"></mat-icon>
</button>
</section>

0
apps/red-ui/src/app/dialogs/assign-project-members-dialog/assign-project-members-dialog.component.scss
View File

55
apps/red-ui/src/app/dialogs/assign-project-members-dialog/assign-project-members-dialog.component.ts
View File

@ -1,55 +0,0 @@
import { Component, Inject } from '@angular/core';
import { Project, ProjectControllerService } from '@redaction/red-ui-http';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AppStateService } from '../../state/app-state.service';
import { UserService } from '../../user/user.service';
import { MatSelectionListChange } from '@angular/material/list';
import { NotificationService, NotificationType } from '../../notification/notification.service';
@Component({
selector: 'redaction-project-details-dialog',
templateUrl: './assign-project-members-dialog.component.html',
styleUrls: ['./assign-project-members-dialog.component.scss']
})
export class AssignProjectMembersDialogComponent {
public memberIds: string[];
constructor(private readonly _projectControllerService: ProjectControllerService,
private readonly _notificationService: NotificationService,
public readonly userService: UserService,
private readonly _appStateService: AppStateService,
public dialogRef: MatDialogRef<AssignProjectMembersDialogComponent>,
@Inject(MAT_DIALOG_DATA) public _project: Project) {
this._loadMembers();
}
private _loadMembers() {
this.memberIds = [...this._project.memberIds];
}
private _reloadProject() {
this._appStateService.addOrUpdateProject(this._project).then(() => {
this._loadMembers();
});
}
public selectionChange($event: MatSelectionListChange) {
const userId = $event.option.value;
const selected = $event.option.selected;
const userName = this.userService.getNameForId(userId);
if (selected) {
this._projectControllerService.addMembersToProject({ memberIds: [userId] }, this._project.projectId).subscribe(() => {
this._notificationService.showToastNotification('Successfully assigned ' + userName + ' to project: ' + this._project.projectName);
}, error => {
this._notificationService.showToastNotification('Failed: ' + error.error.message, null, NotificationType.ERROR);
}).add(() => this._reloadProject());
} else {
this._projectControllerService.deleteMembersToProject({ memberIds: [userId] }, this._project.projectId).subscribe(() => {
this._notificationService.showToastNotification('Successfully removed ' + userName + ' from project: ' + this._project.projectName);
}, error => {
this._notificationService.showToastNotification('Failed: ' + error.error.message, null, NotificationType.ERROR);
}).add(() => this._reloadProject());
}
}
}

43
apps/red-ui/src/app/dialogs/dialog.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import {Injectable} from '@angular/core';
import {FileDetailsDialogComponent} from './file-details-dialog/file-details-dialog.component';
import {MatDialog} from '@angular/material/dialog';
import {
FileStatus,
FileUploadControllerService,
@ -8,16 +8,15 @@ import {
ManualRedactionEntry,
Project
} from '@redaction/red-ui-http';
import { ConfirmationDialogComponent } from '../common/confirmation-dialog/confirmation-dialog.component';
import { NotificationService, NotificationType } from '../notification/notification.service';
import { TranslateService } from '@ngx-translate/core';
import { AppStateService, ProjectWrapper } from '../state/app-state.service';
import { AddEditProjectDialogComponent } from './add-edit-project-dialog/add-edit-project-dialog.component';
import { AssignOwnerDialogComponent } from './assign-owner-dialog/assign-owner-dialog.component';
import { ProjectDetailsDialogComponent } from './project-details-dialog/project-details-dialog.component';
import { AssignProjectMembersDialogComponent } from './assign-project-members-dialog/assign-project-members-dialog.component';
import { ManualRedactionDialogComponent } from './manual-redaction-dialog/manual-redaction-dialog.component';
import { Annotations } from '@pdftron/webviewer';
import {ConfirmationDialogComponent} from '../common/confirmation-dialog/confirmation-dialog.component';
import {NotificationService, NotificationType} from '../notification/notification.service';
import {TranslateService} from '@ngx-translate/core';
import {AppStateService, ProjectWrapper} from '../state/app-state.service';
import {AddEditProjectDialogComponent} from './add-edit-project-dialog/add-edit-project-dialog.component';
import {AssignOwnerDialogComponent} from './assign-owner-dialog/assign-owner-dialog.component';
import {ProjectDetailsDialogComponent} from './project-details-dialog/project-details-dialog.component';
import {ManualRedactionDialogComponent} from './manual-redaction-dialog/manual-redaction-dialog.component';
import {Annotations} from '@pdftron/webviewer';
const dialogConfig = {
width: '600px',
@ -132,11 +131,13 @@ export class DialogService {
});
}
public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
$event.stopPropagation();
public openAssignProjectMembersAndOwnerDialog($event: MouseEvent, project: Project, cb?: Function) {
$event?.stopPropagation();
this._dialog.open(AssignOwnerDialogComponent, {
...dialogConfig,
data: { type: 'project', project: project }
data: {type: 'project', project: project}
}).afterClosed().subscribe(result => {
if (result && cb) cb();
});
}
@ -144,7 +145,7 @@ export class DialogService {
$event.stopPropagation();
this._dialog.open(AssignOwnerDialogComponent, {
...dialogConfig,
data: { type: 'file', file: file }
data: {type: 'file', file: file}
}).afterClosed().subscribe(() => {
if (cb) cb();
});
@ -167,12 +168,4 @@ export class DialogService {
});
}
public openAssignProjectMembersDialog(project: Project, cb?: Function) {
this._dialog.open(AssignProjectMembersDialogComponent, {
...dialogConfig,
data: project
}).afterClosed().subscribe(result => {
if (result && cb) cb();
});
}
}

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

@ -94,6 +94,6 @@ export class ProjectListingScreenComponent implements OnInit {
}
public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
this._dialogService.openAssignProjectOwnerDialog($event, project);
this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project);
}
}

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

@ -167,7 +167,7 @@
<div *ngFor="let username of displayMembers" class="member">
<redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
</div>
<div class="member">
<div class="member" *ngIf="overflowCount">
<div class="oval large white-dark">+{{overflowCount}}</div>
</div>
<div class="member pointer" (click)="openAssignProjectMembersDialog()">

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

@ -1,17 +1,17 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FileStatus, ReanalysisControllerService, StatusControllerService } from '@redaction/red-ui-http';
import { NotificationService } from '../../notification/notification.service';
import { AppStateService } from '../../state/app-state.service';
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 { UserService } from '../../user/user.service';
import { SortingOption } from '../../utils/types';
import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
import { groupBy } from '../../utils/functions';
import { DialogService } from '../../dialogs/dialog.service';
import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {FileStatus, ReanalysisControllerService, StatusControllerService} from '@redaction/red-ui-http';
import {NotificationService} from '../../notification/notification.service';
import {AppStateService} from '../../state/app-state.service';
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 {UserService} from '../../user/user.service';
import {SortingOption} from '../../utils/types';
import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
import {groupBy} from '../../utils/functions';
import {DialogService} from '../../dialogs/dialog.service';
@Component({
@ -24,10 +24,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
private _selectedFileIds: string[] = [];
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' }
{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];
public documentsChartData: DoughnutChartConfig[] = [];
@ -81,7 +81,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
}
public get overflowCount() {
return this.members.length - 6;
return this.members.length > 6 ? this.members.length - 6 : 0;
}
public get ownerName() {
@ -98,7 +98,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
const groups = groupBy(this.appStateService.activeProject.files, 'status');
this.documentsChartData = [];
for (const key of Object.keys(groups)) {
this.documentsChartData.push({ value: groups[key].length, color: key, label: key });
this.documentsChartData.push({value: groups[key].length, color: key, label: key});
}
}
@ -149,7 +149,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
}
public openAssignProjectMembersDialog() {
this._dialogService.openAssignProjectMembersDialog(this.activeProject,() => {
this._dialogService.openAssignProjectMembersAndOwnerDialog(null, this.activeProject, () => {
this._getFileStatus();
});
}