minor updates to ui and functionality

This commit is contained in:
Timo Bejan 2020-10-13 16:53:32 +03:00
parent c11f84ab72
commit aa9083a3b9
9 changed files with 226 additions and 121 deletions

View File

@ -123,6 +123,20 @@ export class IconsModule {
'/assets/icons/general/check_icon.svg'
)
);
iconRegistry.addSvgIconInNamespace(
'red',
'idea',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/idea.svg'
)
);
iconRegistry.addSvgIconInNamespace(
'red',
'secret',
sanitizer.bypassSecurityTrustResourceUrl(
'/assets/icons/general/secret.svg'
)
);
}

View File

@ -45,13 +45,13 @@
>
<div class="page-number">Page {{ item.pageNumber }}</div>
<div class="stats-subtitle subtitle mt-5">
<div *ngIf="item.redactions">
<mat-icon svgIcon="red:files"></mat-icon>
{{item.redactions}}
<div *ngIf="item.redactions" class="center">
<mat-icon svgIcon="red:secret"></mat-icon>
{{item.redactions}} Redactions
</div>
<div *ngIf="item.hints">
<mat-icon svgIcon="red:files"></mat-icon>
{{item.hints}}
<div *ngIf="item.hints" class="center">
<mat-icon svgIcon="red:idea"></mat-icon>
{{item.hints}} Hints
</div>
</div>
</div>
@ -69,7 +69,7 @@
class="annotation" [id]="'ann-' + annotation.Id"
(click)="selectAnnotation(annotation)"
[ngClass]="{ active: selectedAnnotation === annotation }">
<div>{{annotation.Id}}</div>
<div class="clamp-1">{{annotation.Id}}</div>
<div>Page {{annotation.getPageNumber()}}</div>
<div>{{annotation.getContents()}}</div>
<div>{{annotation.getStatus()}}</div>

View File

@ -63,6 +63,8 @@ export class FilePreviewScreenComponent implements OnInit {
}
public ngOnInit(): void {
// PDFTRON cache fix
localStorage.clear();
this._viewerSyncService.activateViewer('ANNOTATED');
}
@ -99,7 +101,7 @@ export class FilePreviewScreenComponent implements OnInit {
public handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
this._changeDetectorRef.detectChanges();
for (const annotation of annotations) {
if (annotation.Id.indexOf(':') >= 0) {
if (annotation.Id.startsWith('hint:') || annotation.Id.startsWith('redaction:')) {
this.annotations.push(annotation);
const pageNumber = annotation.getPageNumber();
let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);

View File

@ -1,3 +1,3 @@
<div class="page">
<div #viewer [id]="fileId" class="viewer"></div>
<div #viewer [id]="fileId+fileType" class="viewer"></div>
</div>

View File

@ -151,9 +151,9 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
const selectedQuads = this.wvInstance.docViewer.getSelectedTextQuads();
const text = this.wvInstance.docViewer.getSelectedText();
const entry: ManualRedactionEntry = {positions: []};
for (let key of Object.keys(selectedQuads)) {
for (let quad of selectedQuads[key]) {
entry.positions.push(this.toPosition(parseInt(key), quad));
for (const key of Object.keys(selectedQuads)) {
for (const quad of selectedQuads[key]) {
entry.positions.push(this.toPosition(parseInt(key,10), quad));
}
}
entry.value = text;

View File

@ -1,132 +1,139 @@
<div *ngIf="!appStateService.activeProject"
[innerHTML]="'project-overview.no-project.label' | translate:{projectId: projectId}"
class="heading-l"></div>
<div *ngIf="!appStateService.activeProject"
[innerHTML]="'project-overview.no-project.label' | translate:{projectId: projectId}"
class="heading-l"></div>
<div *ngIf="appStateService.activeProject" class="page-header">
<div class="filters flex-row">
<span translate="filters.filter-by.label"></span>
<div translate="filters.status.label"></div>
<div translate="filters.people.label"></div>
<div translate="filters.due-date.label"></div>
<div translate="filters.document.label"></div>
</div>
<button (click)="fileInput.click()" color="warn" mat-flat-button
translate="project-overview.upload-document.label"></button>
<input #fileInput (change)="uploadFiles($event.target.files)" class="file-upload-input" multiple="true"
type="file">
<div *ngIf="appStateService.activeProject" class="page-header">
<div class="filters flex-row">
<span translate="filters.filter-by.label"></span>
<div translate="filters.status.label"></div>
<div translate="filters.people.label"></div>
<div translate="filters.due-date.label"></div>
<div translate="filters.document.label"></div>
</div>
<button (click)="fileInput.click()" color="warn" mat-flat-button
translate="project-overview.upload-document.label"></button>
<input #fileInput (change)="uploadFiles($event.target.files)" class="file-upload-input" multiple="true"
type="file">
</div>
<div class="flex red-content-inner">
<div class="left-container">
<div class="table-header">
<div class="flex red-content-inner">
<div class="left-container">
<div class="table-header">
<span class="subheading">
{{'project-overview.table-header.title.label'| translate:{ length: appStateService.activeProject?.files.length || 0 } }}
{{'project-overview.table-header.title.label'| translate:{length: appStateService.activeProject?.files.length || 0} }}
</span>
<div class="actions">
<div translate="project-overview.table-header.bulk-select.label"></div>
<div translate="project-overview.table-header.recent.label"></div>
</div>
</div>
<div class="table-col-names">
<div class="flex-3 subtitle min-width" translate="project-overview.table-col-names.name.label"></div>
<div class="flex-2 subtitle min-width" translate="project-overview.table-col-names.added-on.label"></div>
<div class="flex-1 subtitle min-width" translate="project-overview.table-col-names.added-by.label"></div>
<div class="flex-1 subtitle min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
<div class="subtitle status-container" translate="project-overview.table-col-names.status.label"></div>
</div>
<div class="table-item"
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sorting.order:sorting.name; trackBy:fileId"
[routerLink]="fileStatus.status === 'PROCESSED' ? ['/ui/projects/'+projectId+'/file/'+fileStatus.fileId] : []">
<div class="flex-3 table-item-title min-width">
{{ fileStatus.filename }}
</div>
<div class="subtitle flex-2 min-width">
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
</div>
<div class="subtitle flex-1 min-width">
Timo Bejan
</div>
<div class="subtitle flex-1 min-width">
<redaction-initials-avatar
withName="true"
></redaction-initials-avatar>
</div>
<div class=" status-container">
<div class="status-bar-wrapper">
<redaction-status-bar
[config]="[{ color: 'under-review', length: 1 }]"
></redaction-status-bar>
</div>
</div>
<div class="on-hover-wrapper">
<div class="on-hover">
<div>d</div>
<div>s</div>
<div>v</div>
</div>
</div>
<div class="actions">
<div translate="project-overview.table-header.bulk-select.label"></div>
<div translate="project-overview.table-header.recent.label"></div>
</div>
</div>
<div class="project-details-container right-fixed-container">
<div class="actions-row">
<div (click)="deleteProject($event)">
<mat-icon svgIcon="red:delete"></mat-icon>
</div>
<div (click)="editProject($event)">
<mat-icon svgIcon="red:edit"></mat-icon>
</div>
<div (click)="showDetailsDialog($event)">
<mat-icon svgIcon="red:stats"></mat-icon>
</div>
<div class="table-col-names">
<div class="flex-3 subtitle min-width" translate="project-overview.table-col-names.name.label"></div>
<div class="flex-2 subtitle min-width" translate="project-overview.table-col-names.added-on.label"></div>
<div class="flex-1 subtitle min-width" translate="project-overview.table-col-names.added-by.label"></div>
<div class="flex-1 subtitle min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
<div class="subtitle status-container" translate="project-overview.table-col-names.status.label"></div>
</div>
<div class="table-item"
[class.pointer]="fileStatus.status === 'PROCESSED'"
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sorting.order:sorting.name; 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 }}
</div>
<div class="subtitle stats-subtitle mt-20">
<div>
{{ appStateService.activeProject.files.length }}
</div>
<div>9</div>
<div>
{{ appStateService.activeProject.project.date | date:'d MMM. yyyy' }}
</div>
<div class="subtitle flex-2 min-width">
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
</div>
<div class="heading-xl mt-20">
{{ appStateService.activeProject.project.projectName }}
<div class="subtitle flex-1 min-width">
Timo Bejan
</div>
<div class="owner flex-row mt-20">
<redaction-initials-avatar username="Timo Bejan"
size="large"
withName="true"
<div class="subtitle flex-1 min-width">
<redaction-initials-avatar
withName="true"
></redaction-initials-avatar>
</div>
<div class="mt-20">
{{ appStateService.activeProject.project.description }}
<div class=" status-container">
<div class="status-bar-wrapper">
<redaction-status-bar
[config]="[{ color: (fileStatus.status === 'PROCESSED' ? 'finished': fileStatus.status ==='ERROR'?'under-approval' : 'under-review'), length: 1 }]"
></redaction-status-bar>
</div>
</div>
<div class="project-team mt-20">
<div class="subheading" translate="project-overview.project-details.project-team.label"></div>
<div class="flex mt-20 members-container">
<div *ngFor="let username of ['S H', 'D O', 'E G', 'D V', 'J A', 'T H', 'P B']" class="member">
<redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
</div>
<div class="member">
<div class="oval large">+2</div>
</div>
<div class="member">
<div class="oval red large">+</div>
</div>
<div class="on-hover-wrapper">
<div class="on-hover">
<button (click)="deleteFile($event,fileStatus)" color="accent" mat-icon-button
[matTooltip]="'project-overview.delete.action.label'|translate">
<mat-icon svgIcon="red:delete"></mat-icon>
</button>
<button (click)="reanalyseFile($event,fileStatus)" color="accent" mat-icon-button
[matTooltip]="'project-overview.reanalyse.action.label'|translate">
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
</div>
</div>
</div>
</div>
<div class="project-details-container right-fixed-container">
<div class="actions-row">
<div (click)="deleteProject($event)">
<mat-icon svgIcon="red:delete"></mat-icon>
</div>
<div (click)="editProject($event)">
<mat-icon svgIcon="red:edit"></mat-icon>
</div>
<div (click)="showDetailsDialog($event)">
<mat-icon svgIcon="red:stats"></mat-icon>
</div>
</div>
<div class="subtitle stats-subtitle mt-20">
<div>
{{ appStateService.activeProject.files.length }}
</div>
<div>9</div>
<div>
{{ appStateService.activeProject.project.date | date:'d MMM. yyyy' }}
</div>
</div>
<div class="heading-xl mt-20">
{{ appStateService.activeProject.project.projectName }}
</div>
<div class="owner flex-row mt-20">
<redaction-initials-avatar [username]="user.name"
size="large"
color="gray-red"
withName="true"
></redaction-initials-avatar>
</div>
<div class="mt-20">
{{ appStateService.activeProject.project.description }}
</div>
<div class="project-team mt-20">
<div class="subheading" translate="project-overview.project-details.project-team.label"></div>
<div class="flex mt-20 members-container">
<div *ngFor="let username of ['S H', 'D O', 'E G', 'D V', 'J A', 'T H', 'P B']" class="member">
<redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
</div>
<div class="member">
<div class="oval large">+2</div>
</div>
<div class="member">
<div class="oval red large">+</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -18,6 +18,7 @@ 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";
import {UserService} from "../../user/user.service";
@Component({
@ -61,9 +62,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
private readonly _notificationService: NotificationService,
private readonly _dialog: MatDialog,
private readonly _fileUploadService: FileUploadService,
private _uploadStatusOverlayService: UploadStatusOverlayService,
private readonly _uploadStatusOverlayService: UploadStatusOverlayService,
private readonly _reanalysisControllerService: ReanalysisControllerService,
private readonly _router: Router,
private readonly _userService: UserService,
private readonly _fileDropOverlayService: FileDropOverlayService,
private readonly _fileUploadControllerService: FileUploadControllerService,
private readonly _projectControllerService: ProjectControllerService) {
@ -73,6 +75,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
});
}
get user() {
return this._userService.user;
}
ngOnInit(): void {
this._fileDropOverlayService.initFileDropHandling();
this._fileStatusInterval = setInterval(() => {

View File

@ -0,0 +1 @@
<svg height="511pt" viewBox="-76 1 511 511.99935" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m94.324219 336.6875v132.660156c0 .121094.058593.214844.066406.332032.042969.875.21875 1.738281.519531 2.5625.078125.1875.121094.375.199219.5625.074219.1875.058594.210937.109375.3125l17.0625 34.121093c1.429688 2.910157 4.390625 4.753907 7.632812 4.761719h119.421876c3.25.015625 6.226562-1.8125 7.679687-4.71875l17.058594-34.121094c.050781-.101562.058593-.210937.109375-.3125.050781-.105468.121094-.375.199218-.566406.300782-.820312.476563-1.683594.519532-2.558594 0-.117187.066406-.210937.066406-.332031v-132.703125c86.996094-47.109375 119.332031-155.824219 72.21875-242.820312-47.109375-86.996094-155.824219-119.328126-242.820312-72.21875-86.996094 47.109374-119.328126 155.824218-72.21875 242.820312 16.554687 30.570312 41.648437 55.664062 72.21875 72.21875zm139.738281 158.25h-108.878906l-8.527344-17.058594h125.9375zm13.804688-34.117188h-136.484376v-17.0625h119.421876v-17.058593h-119.421876v-17.0625h119.421876v-17.058594h-119.421876v-17.058594h136.484376zm-122.484376-246.746093c-2.113281-1.695313-4.90625-2.289063-7.523437-1.59375-2.109375.601562-4.285156.925781-6.476563.960937-14.085937.050782-25.542968-11.328125-25.59375-25.414062-.035156-10.917969 6.878907-20.648438 17.199219-24.203125 4.445313-1.558594 6.789063-6.425781 5.226563-10.875-.238282-.675781-.558594-1.324219-.960938-1.921875-7.90625-11.714844-4.820312-27.621094 6.894532-35.527344 8.648437-5.839844 19.980468-5.839844 28.632812 0 3.917969 2.621094 9.214844 1.570312 11.835938-2.34375.398437-.597656.722656-1.242188.960937-1.921875 4.507813-13.261719 18.910156-20.355469 32.171875-15.847656 5.785156 1.964843 10.667969 5.953125 13.746094 11.234375 2.414062 4.042968 7.648437 5.367187 11.695312 2.953125.40625-.242188.789063-.515625 1.152344-.820313 10.574219-9.160156 26.574219-8.015625 35.734375 2.5625 2.761719 3.1875 4.683594 7.015625 5.59375 11.136719.730469 3.191406 3.222656 5.683594 6.414063 6.414063 13.664062 3.011718 22.300781 16.527343 19.289062 30.191406-.863281 3.914062-2.640625 7.566406-5.191406 10.660156-2.519532 3.125-2.519532 7.585938 0 10.714844 3.71875 4.488281 5.769531 10.121094 5.800781 15.949218 0 14.132813-11.457031 25.589844-25.589844 25.589844-2.355469-.042968-4.699219-.421875-6.949219-1.117187-4.53125-1.289063-9.25 1.339843-10.539062 5.871093-.054688.1875-.101562.378907-.144531.570313-2.542969 11.792969-12.953125 20.226563-25.015625 20.265625-4.511719-.019531-8.929688-1.253906-12.796875-3.570312-4.078125-2.359376-9.296875-.960938-11.652344 3.121093-.746094 1.289063-1.140625 2.753907-1.144531 4.246094v107.097656h-17.058594v-103.574219c-.003906-4.710937-3.828125-8.527343-8.539062-8.519531-.71875 0-1.433594.089844-2.132813.269531-13.40625 3.742188-27.3125-4.09375-31.050781-17.503906-.601563-2.15625-.914063-4.386718-.925782-6.625 0-.292968.125-1.144531.132813-1.433594.105469-2.707031-1.078125-5.304687-3.195313-6.996093zm54.242188-196.824219c89.457031-.050781 162.019531 72.429688 162.070312 161.890625.03125 61.226563-34.457031 117.238281-89.144531 144.769531-2.875 1.453125-4.6875 4.398438-4.683593 7.617188v26.929687h-42.652344v-94.683593c2.808594.578124 5.664062.863281 8.53125.851562 17-.066406 32.359375-10.171875 39.144531-25.761719 23.332031 2.070313 43.921875-15.167969 45.992187-38.5.117188-1.324219.171876-2.652343.164063-3.980469.007813-7.507812-2.011719-14.875-5.851563-21.324218 3.839844-6.453125 5.859376-13.820313 5.851563-21.328125.078125-17.984375-11.207031-34.058594-28.148437-40.089844-7.820313-22.03125-32.019532-33.546875-54.046876-25.726563-2.085937.738282-4.105468 1.640626-6.050781 2.695313-8-8.746094-19.324219-13.703125-31.175781-13.648437-14.585938.035156-28.140625 7.539062-35.910156 19.882812-21.996094-8.4375-46.664063 2.554688-55.097656 24.546875-3.773438 9.835937-3.773438 20.714844 0 30.550781-19.890626 12.519532-25.867188 38.792969-13.347657 58.683594 7.96875 12.664062 22.007813 20.210938 36.964844 19.878906 4.082031 19.84375 21.539063 34.09375 41.800781 34.121094v93.828125h-42.652344v-26.929687c0-3.21875-1.808593-6.164063-4.683593-7.617188-79.90625-40.222656-112.070313-137.609375-71.84375-217.515625 27.53125-54.683594 83.542969-89.175781 144.769531-89.140625zm0 0"/></svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<g>
<path d="M423.617,131.695H177.353c-4.153,0-7.519,3.366-7.519,7.519c0,4.153,3.366,7.519,7.519,7.519h246.264
c4.153,0,7.519-3.366,7.519-7.519C431.136,135.061,427.77,131.695,423.617,131.695z"/>
</g>
</g>
<g>
<g>
<path d="M142.367,131.694H88.382c-4.153,0-7.519,3.366-7.519,7.519s3.366,7.519,7.519,7.519h53.985
c4.153,0,7.519-3.366,7.519-7.519S146.52,131.694,142.367,131.694z"/>
</g>
</g>
<g>
<g>
<path d="M327.181,80.229H88.382c-4.153,0-7.519,3.366-7.519,7.519c0,4.153,3.367,7.519,7.519,7.519h238.799
c4.153,0,7.519-3.366,7.519-7.519S331.334,80.229,327.181,80.229z"/>
</g>
</g>
<g>
<g>
<path d="M497.203,222.692h-16.771V107.689c0-0.097-0.011-0.192-0.014-0.289c-0.003-0.139-0.01-0.276-0.021-0.414
c-0.005-0.056-0.014-0.111-0.021-0.167c-0.171-1.69-0.894-3.312-2.147-4.565l-96.35-96.351c-1.401-1.401-3.264-2.149-5.169-2.187
c-0.1-0.004-0.199-0.015-0.299-0.015H48.795c-9.5,0-17.228,7.729-17.228,17.228v148.198h-16.77C6.638,169.127,0,175.765,0,183.923
v309.581c0,8.158,6.638,14.797,14.797,14.797h482.407c8.159,0,14.797-6.638,14.797-14.797V237.488
C512,229.33,505.362,222.692,497.203,222.692z M384.081,29.585h0.001c18.547,18.595,45.934,45.939,70.526,70.467H392.82
c-4.818,0-8.739-3.92-8.739-8.738V29.585z M46.605,20.929c0-1.207,0.982-2.189,2.19-2.189h320.248v72.575
c0,13.111,10.666,23.776,23.777,23.776h72.574v107.601H245.402c-6.869,0-13.408-3.296-17.493-8.819l-22.063-29.83
c-6.908-9.34-17.967-14.916-29.583-14.916H46.605V20.929z M15.038,493.262V184.165h161.224c6.869,0,13.408,3.297,17.493,8.82
l22.063,29.83c6.908,9.339,17.967,14.915,29.583,14.915h251.56v255.533H15.038z"/>
</g>
</g>
<g>
<g>
<path d="M420.744,295.018H91.256c-8.676,0-15.735,7.059-15.735,15.735v106.882c0,8.676,7.059,15.735,15.735,15.735h243.45
c4.153,0,7.519-3.366,7.519-7.519s-3.367-7.519-7.519-7.519H91.256c-0.384,0-0.697-0.312-0.697-0.697V310.753
c0-0.385,0.312-0.697,0.697-0.697h329.488c0.384,0,0.697,0.312,0.697,0.697v106.882c0,0.385-0.312,0.697-0.697,0.697h-51.052
c-4.153,0-7.519,3.366-7.519,7.519s3.366,7.519,7.519,7.519h51.052c8.676,0,15.735-7.059,15.735-15.735V310.753
C436.479,302.077,429.42,295.018,420.744,295.018z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB