255 lines
12 KiB
HTML
255 lines
12 KiB
HTML
<redaction-project-overview-empty (uploadFiles)="uploadFiles($event)" *ngIf="!appStateService.activeProject?.hasFiles"></redaction-project-overview-empty>
|
|
<section *ngIf="appStateService.activeProject?.hasFiles">
|
|
<div *ngIf="appStateService.activeProject" class="page-header">
|
|
<div class="filters">
|
|
<div translate="filters.filter-by"></div>
|
|
<redaction-filter
|
|
(filtersChanged)="filtersChanged()"
|
|
[filterLabel]="'filters.status'"
|
|
[filters]="statusFilters"
|
|
[icon]="'red:status'"
|
|
></redaction-filter>
|
|
<redaction-filter
|
|
(filtersChanged)="filtersChanged()"
|
|
[filterLabel]="'filters.assigned-people'"
|
|
[filters]="peopleFilters"
|
|
[icon]="'red:user'"
|
|
></redaction-filter>
|
|
<redaction-filter
|
|
(filtersChanged)="filtersChanged()"
|
|
[filterLabel]="'filters.needs-work'"
|
|
[filterTemplate]="needsWorkTemplate"
|
|
[filters]="needsWorkFilters"
|
|
[icon]="'red:needs-work'"
|
|
></redaction-filter>
|
|
<form [formGroup]="searchForm">
|
|
<div class="red-input-group">
|
|
<input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon" />
|
|
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<redaction-circle-button
|
|
*ngIf="permissionsService.isManagerAndOwner()"
|
|
(action)="openEditProjectDialog($event)"
|
|
tooltip="project-overview.header-actions.edit"
|
|
tooltipPosition="below"
|
|
icon="red:edit"
|
|
></redaction-circle-button>
|
|
<redaction-circle-button
|
|
*ngIf="permissionsService.canDeleteProject()"
|
|
(action)="openDeleteProjectDialog($event)"
|
|
tooltip="project-overview.header-actions.delete"
|
|
tooltipPosition="below"
|
|
icon="red:trash"
|
|
></redaction-circle-button>
|
|
<redaction-circle-button
|
|
*ngIf="permissionsService.isManagerAndOwner()"
|
|
(action)="openAssignProjectMembersDialog()"
|
|
tooltip="project-overview.header-actions.assign"
|
|
tooltipPosition="below"
|
|
icon="red:assign"
|
|
></redaction-circle-button>
|
|
<redaction-circle-button
|
|
*ngIf="permissionsService.isManagerAndOwner()"
|
|
(action)="downloadRedactionReport($event)"
|
|
[tooltip]="appStateService.activeProject.allFilesApproved ? 'report.action' : 'report.unavailable'"
|
|
[disabled]="!appStateService.activeProject.allFilesApproved"
|
|
tooltipPosition="below"
|
|
icon="red:report"
|
|
></redaction-circle-button>
|
|
<redaction-circle-button
|
|
*ngIf="permissionsService.displayReanalyseBtn()"
|
|
(action)="reanalyseProject()"
|
|
[tooltip]="'project-overview.new-rule.toast.actions.reanalyse-all'"
|
|
type="warn"
|
|
tooltipClass="warn small"
|
|
tooltipPosition="below"
|
|
icon="red:refresh"
|
|
></redaction-circle-button>
|
|
<redaction-circle-button
|
|
class="ml-14"
|
|
(action)="fileInput.click()"
|
|
tooltip="project-overview.header-actions.upload-document"
|
|
tooltipPosition="below"
|
|
icon="red:upload"
|
|
type="primary"
|
|
></redaction-circle-button>
|
|
<redaction-circle-button
|
|
class="ml-6"
|
|
[routerLink]="['/ui/projects/']"
|
|
tooltip="common.close"
|
|
tooltipPosition="before"
|
|
icon="red:close"
|
|
></redaction-circle-button>
|
|
|
|
<input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
|
|
</div>
|
|
</div>
|
|
<div class="flex red-content-inner">
|
|
<div class="left-container" [class.extended]="collapsedDetails">
|
|
<div class="grid-container">
|
|
<div class="header-item span-7">
|
|
<div class="select-all-container">
|
|
<div
|
|
(click)="toggleSelectAll()"
|
|
[class.active]="areAllFilesSelected"
|
|
class="select-oval always-visible"
|
|
*ngIf="!areAllFilesSelected && !areSomeFilesSelected"
|
|
></div>
|
|
<mat-icon *ngIf="areAllFilesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
|
|
<mat-icon
|
|
*ngIf="areSomeFilesSelected && !areAllFilesSelected"
|
|
(click)="toggleSelectAll()"
|
|
class="selection-icon"
|
|
svgIcon="red:radio-indeterminate"
|
|
></mat-icon>
|
|
</div>
|
|
|
|
<span class="all-caps-label">
|
|
{{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }}
|
|
</span>
|
|
|
|
<redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
|
|
</div>
|
|
|
|
<!-- Table column names-->
|
|
<div class="select-oval-placeholder placeholder-bottom-border"></div>
|
|
|
|
<redaction-table-col-name
|
|
(toggleSort)="toggleSort($event)"
|
|
[activeSortingOption]="sortingOption"
|
|
[withSort]="true"
|
|
column="filename"
|
|
label="project-overview.table-col-names.name"
|
|
></redaction-table-col-name>
|
|
|
|
<redaction-table-col-name
|
|
(toggleSort)="toggleSort($event)"
|
|
[activeSortingOption]="sortingOption"
|
|
[withSort]="true"
|
|
column="added"
|
|
label="project-overview.table-col-names.added-on"
|
|
></redaction-table-col-name>
|
|
|
|
<redaction-table-col-name label="project-overview.table-col-names.needs-work"></redaction-table-col-name>
|
|
|
|
<redaction-table-col-name
|
|
(toggleSort)="toggleSort($event)"
|
|
[activeSortingOption]="sortingOption"
|
|
[withSort]="true"
|
|
column="reviewerName"
|
|
label="project-overview.table-col-names.assigned-to"
|
|
></redaction-table-col-name>
|
|
|
|
<redaction-table-col-name
|
|
(toggleSort)="toggleSort($event)"
|
|
[activeSortingOption]="sortingOption"
|
|
[withSort]="true"
|
|
column="pages"
|
|
label="project-overview.table-col-names.pages"
|
|
></redaction-table-col-name>
|
|
|
|
<redaction-table-col-name
|
|
(toggleSort)="toggleSort($event)"
|
|
[activeSortingOption]="sortingOption"
|
|
[withSort]="true"
|
|
class="flex-end"
|
|
column="statusSort"
|
|
label="project-overview.table-col-names.status"
|
|
></redaction-table-col-name>
|
|
|
|
<div *ngIf="displayedFiles?.length === 0" class="no-data heading-l" translate="project-overview.no-files-match"></div>
|
|
|
|
<div
|
|
*ngFor="let fileStatus of displayedFiles | sortBy: sortingOption.order:sortingOption.column"
|
|
[class.pointer]="permissionsService.canOpenFile(fileStatus)"
|
|
[routerLink]="fileLink(fileStatus)"
|
|
class="table-item"
|
|
>
|
|
<div class="pr-0" (click)="toggleFileSelected($event, fileStatus)">
|
|
<div *ngIf="!isFileSelected(fileStatus)" class="select-oval"></div>
|
|
<mat-icon class="selection-icon active" *ngIf="isFileSelected(fileStatus)" svgIcon="red:radio-selected"></mat-icon>
|
|
</div>
|
|
|
|
<div [title]="'[' + fileStatus.status + '] ' + fileStatus.filename">
|
|
<div class="filename-wrapper">
|
|
<div [class.disabled]="fileStatus.isPending || fileStatus.isProcessing" [class.error]="fileStatus.isError" class="table-item-title">
|
|
{{ fileStatus.filename }}
|
|
</div>
|
|
<!-- <span *ngIf="permissionsService.fileRequiresReanalysis(fileStatus)" class="pill" translate="project-overview.new-rule.label"></span>-->
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div [class.error]="fileStatus.isError" class="small-label">
|
|
{{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!fileStatus.isError">
|
|
<redaction-needs-work-badge [needsWorkInput]="fileStatus"></redaction-needs-work-badge>
|
|
</div>
|
|
<div *ngIf="!fileStatus.isError" class="assigned-to">
|
|
<redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
|
|
</div>
|
|
|
|
<div *ngIf="!fileStatus.isError" class="pages">
|
|
<mat-icon svgIcon="red:pages"></mat-icon>
|
|
{{ fileStatus.numberOfPages }}
|
|
</div>
|
|
|
|
<div [class.extend-cols]="fileStatus.isError" class="status-container">
|
|
<div *ngIf="fileStatus.isError" class="small-label error" translate="project-overview.file-listing.file-entry.file-error"></div>
|
|
<div *ngIf="fileStatus.isPending" class="small-label" translate="project-overview.file-listing.file-entry.file-pending"></div>
|
|
<div *ngIf="fileStatus.isProcessing" class="small-label" translate="project-overview.file-listing.file-entry.file-processing"></div>
|
|
<redaction-status-bar
|
|
*ngIf="fileStatus.isWorkable"
|
|
[config]="[
|
|
{
|
|
color: fileStatus.status,
|
|
length: 1
|
|
}
|
|
]"
|
|
></redaction-status-bar>
|
|
|
|
<div class="action-buttons">
|
|
<redaction-file-actions
|
|
[fileStatus]="fileStatus"
|
|
(actionPerformed)="calculateData()"
|
|
*ngIf="!fileStatus.isProcessing"
|
|
class="mr-4"
|
|
></redaction-file-actions>
|
|
<redaction-status-bar
|
|
*ngIf="fileStatus.isWorkable"
|
|
[config]="[
|
|
{
|
|
color: fileStatus.status,
|
|
length: 1
|
|
}
|
|
]"
|
|
></redaction-status-bar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-fixed-container" [class.collapsed]="collapsedDetails">
|
|
<redaction-project-details
|
|
#projectDetailsComponent
|
|
(openAssignProjectMembersDialog)="openAssignProjectMembersDialog()"
|
|
[filters]="detailsContainerFilters"
|
|
(filtersChanged)="filtersChanged($event)"
|
|
(toggleCollapse)="toggleCollapsedDetails()"
|
|
></redaction-project-details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<ng-template #needsWorkTemplate let-filter="filter">
|
|
<redaction-type-filter [filter]="filter"></redaction-type-filter>
|
|
</ng-template>
|