205 lines
8.6 KiB
HTML
205 lines
8.6 KiB
HTML
<div *ngIf="!appStateService.activeProject"
|
|
[innerHTML]="'project-overview.no-project.label' | translate:{projectId: activeProject.projectId}"
|
|
class="heading-l"></div>
|
|
|
|
<div *ngIf="appStateService.activeProject" class="page-header">
|
|
<div class="filters flex-row">
|
|
<div translate="filters.filter-by.label"></div>
|
|
<button mat-button translate="filters.status.label">
|
|
<mat-icon svgIcon="red:status"></mat-icon>
|
|
</button>
|
|
<button mat-button translate="filters.people.label">
|
|
<mat-icon svgIcon="red:user"></mat-icon>
|
|
</button>
|
|
<button mat-button translate="filters.due-date.label">
|
|
<mat-icon svgIcon="red:lightning"></mat-icon>
|
|
</button>
|
|
<button mat-button translate="filters.created-on.label">
|
|
<mat-icon svgIcon="red:calendar"></mat-icon>
|
|
</button>
|
|
<button mat-button translate="filters.project.label">
|
|
<mat-icon svgIcon="red:folder"></mat-icon>
|
|
</button>
|
|
<button mat-button translate="filters.document.label">
|
|
<mat-icon svgIcon="red:document"></mat-icon>
|
|
</button>
|
|
</div>
|
|
<button (click)="fileInput.click()" color="primary" 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="select-all-container">
|
|
<div class="select-oval" [class.active]="areAllFilesSelected()" (click)="toggleSelectAll()"></div>
|
|
<span class="all-caps-label">
|
|
{{'project-overview.table-header.title.label'| translate:{ length: appStateService.activeProject?.files.length || 0 } }}
|
|
</span>
|
|
</div>
|
|
<div class="actions">
|
|
<div translate="project-overview.table-header.bulk-select.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-col-names">
|
|
<div class="select-oval placeholder"></div>
|
|
<div class="flex-6 small-label min-width" translate="project-overview.table-col-names.name.label"></div>
|
|
<div class="flex-4 small-label min-width" translate="project-overview.table-col-names.added-on.label"></div>
|
|
<div class="flex-2 small-label min-width" translate="project-overview.table-col-names.needs-work.label"></div>
|
|
<div class="flex-2 small-label min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
|
|
<div class="flex-1 small-label header-flex-end min-width"
|
|
translate="project-overview.table-col-names.status.label"></div>
|
|
</div>
|
|
|
|
<div class="table-item"
|
|
[class.pointer]="canOpenFile(fileStatus.status)"
|
|
*ngFor="let fileStatus of appStateService.activeProject.files | sortBy: sortingOption.order:sortingOption.column; trackBy:fileId"
|
|
[routerLink]="canOpenFile(fileStatus.status) ? ['/ui/projects/'+activeProject.projectId+'/file/'+fileStatus.fileId] : []">
|
|
|
|
<div class="select-oval"
|
|
[class.active]="isFileSelected(fileStatus)"
|
|
(click)="toggleFileSelected($event, fileStatus)"></div>
|
|
|
|
<div class="flex-6 table-item-title min-width" [matTooltip]="'['+fileStatus.status+'] '+fileStatus.filename ">
|
|
{{ fileStatus.filename }}
|
|
</div>
|
|
|
|
<div class="small-label flex-4 min-width">
|
|
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
|
|
</div>
|
|
|
|
<div class="flex-2 min-width needs-work">
|
|
<redaction-annotation-icon type="redaction"></redaction-annotation-icon>
|
|
<redaction-annotation-icon type="hint"></redaction-annotation-icon>
|
|
</div>
|
|
|
|
<div class="small-label flex-2 assigned-to min-width">
|
|
<redaction-initials-avatar
|
|
withName="true"
|
|
[username]="getFileOwnerUsername(fileStatus)"
|
|
></redaction-initials-avatar>
|
|
</div>
|
|
|
|
<div class="status-container flex-1 min-width">
|
|
<redaction-status-bar
|
|
[config]="[{ color: (fileStatus.status === 'PROCESSED' ? 'finished': fileStatus.status ==='ERROR'?'under-approval' : 'under-review'), length: 1 }]"
|
|
></redaction-status-bar>
|
|
</div>
|
|
|
|
<div class="action-buttons flex-3 min-width">
|
|
<button (click)="openDeleteFileDialog($event,fileStatus)" color="accent" mat-icon-button
|
|
[matTooltip]="'project-overview.delete.action.label'|translate">
|
|
<mat-icon svgIcon="red:trash"></mat-icon>
|
|
</button>
|
|
<button (click)="$event.stopPropagation()" color="accent" mat-icon-button
|
|
[matTooltip]="'project-overview.report.action.label'|translate">
|
|
<mat-icon svgIcon="red:report"></mat-icon>
|
|
</button>
|
|
<button (click)="openAssignFileOwnerDialog($event,fileStatus)" color="accent" mat-icon-button
|
|
[matTooltip]="'project-overview.assign.action.label'|translate">
|
|
<mat-icon svgIcon="red:assign"></mat-icon>
|
|
</button>
|
|
<button (click)="reanalyseFile($event,fileStatus)" color="accent" mat-icon-button
|
|
[matTooltip]="'project-overview.bar-charts.action.label'|translate">
|
|
<mat-icon svgIcon="red:analyse"></mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-details-container right-fixed-container">
|
|
<div class="actions-row">
|
|
<button mat-icon-button (click)="openDeleteProjectDialog($event)">
|
|
<mat-icon svgIcon="red:trash"></mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="openEditProjectDialog($event)">
|
|
<mat-icon svgIcon="red:edit"></mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="openDetailsDialog($event)">
|
|
<mat-icon svgIcon="red:report"></mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="small-label stats-subtitle mt-20">
|
|
<div>
|
|
<mat-icon svgIcon="red:pages"></mat-icon>
|
|
{{ appStateService.activeProject.files.length }}
|
|
</div>
|
|
<div>
|
|
<mat-icon svgIcon="red:user"></mat-icon>
|
|
{{ appStateService.activeProject.project.memberIds.length }}
|
|
</div>
|
|
<div>
|
|
<mat-icon svgIcon="red:calendar"></mat-icon>
|
|
{{ 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]="ownerName"
|
|
size="large"
|
|
color="lightgray-red"
|
|
withName="true"
|
|
></redaction-initials-avatar>
|
|
</div>
|
|
|
|
<div class="mt-20">
|
|
{{ appStateService.activeProject.project.description }}
|
|
</div>
|
|
|
|
<div class="project-team mt-20">
|
|
<div class="all-caps-label" translate="project-overview.project-details.project-team.label"></div>
|
|
<div class="flex mt-20 members-container">
|
|
<div *ngFor="let username of displayMembers" class="member">
|
|
<redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
|
|
</div>
|
|
<div class="member">
|
|
<div class="oval large white-dark">+{{overflowCount}}</div>
|
|
</div>
|
|
<div class="member pointer" (click)="openAssignProjectMembersDialog()">
|
|
<div class="oval red-white large">+</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-32">
|
|
<redaction-simple-doughnut-chart [config]="documentsChartData"
|
|
[strokeWidth]="15"
|
|
[radius]="70"
|
|
[subtitle]="'project-overview.project-details.charts.total-documents.label'"
|
|
direction="row"
|
|
></redaction-simple-doughnut-chart>
|
|
</div>
|
|
|
|
<div class="mt-32 legend">
|
|
<div>
|
|
<redaction-annotation-icon type="hint"></redaction-annotation-icon>
|
|
{{ 'project-overview.legend.contains-hints.label' | translate }}
|
|
</div>
|
|
<div>
|
|
<redaction-annotation-icon type="redaction"></redaction-annotation-icon>
|
|
{{ 'project-overview.legend.contains-redactions.label' | translate }}
|
|
</div>
|
|
<div>
|
|
<redaction-annotation-icon type="suggestion"></redaction-annotation-icon>
|
|
{{ 'project-overview.legend.contains-suggestions.label' | translate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|