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

extract file stats and workflow item from dossier-overview component

Browse Source
This commit is contained in:
Dan Percic 2021-11-15 17:18:54 +02:00
parent ea07ca5b21
commit bf0e1631b7
9 changed files with 106 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.html Normal file
View File

@ -0,0 +1,14 @@
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="iqser:pages"></mat-icon>
{{ file.numberOfPages }}
</div>
<div>
<mat-icon svgIcon="red:exclude-pages"></mat-icon>
{{ file.excludedPages.length }}
</div>
<div *ngIf="file.lastOCRTime" [matTooltipPosition]="'above'" [matTooltip]="'dossier-overview.ocr-performed' | translate">
<mat-icon svgIcon="iqser:ocr"></mat-icon>
{{ file.lastOCRTime | date: 'mediumDate' }}
</div>
</div>

0
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.scss Normal file
View File

12
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.ts Normal file
View File

@ -0,0 +1,12 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { File } from '@red/domain';
@Component({
selector: 'redaction-file-stats',
templateUrl: './file-stats.component.html',
styleUrls: ['./file-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileStatsComponent {
@Input() file: File;
}

22
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html Normal file
View File

@ -0,0 +1,22 @@
<div class="workflow-item">
<div>
<div class="details">
<div [matTooltip]="file.filename" class="filename" matTooltipPosition="above">
{{ file.filename }}
</div>
<ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
</div>
<div class="user">
<redaction-initials-avatar [user]="file.currentReviewer"></redaction-initials-avatar>
</div>
</div>
<redaction-file-actions
(actionPerformed)="actionPerformed.emit($event)"
*ngIf="!file.isProcessing"
[file]="file"
type="dossier-overview-workflow"
></redaction-file-actions>
</div>

34
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss Normal file
View File

@ -0,0 +1,34 @@
@use 'common-mixins';
.workflow-item {
padding: 10px;
> div {
display: flex;
justify-content: space-between;
.details {
max-width: calc(100% - 28px);
.filename {
font-weight: 600;
line-height: 18px;
@include common-mixins.line-clamp(1);
}
}
.user {
display: flex;
align-items: flex-end;
}
}
redaction-file-actions {
margin-top: 10px;
display: none;
}
&:hover redaction-file-actions {
display: block;
}
}

14
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { File } from '@red/domain';
@Component({
selector: 'redaction-workflow-item',
templateUrl: './workflow-item.component.html',
styleUrls: ['./workflow-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WorkflowItemComponent {
@Input() file: File;
@Input() statsTemplate: TemplateRef<unknown>;
@Output() readonly actionPerformed = new EventEmitter<string>();
}

4
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
View File

@ -12,6 +12,8 @@ import { TableItemComponent } from './components/table-item/table-item.component
import { ConfigService } from './config.service';
import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
import { FileWorkloadColumnComponent } from './components/file-workload-column/file-workload-column.component';
import { FileStatsComponent } from './components/file-stats/file-stats.component';
import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
const routes = [
{
@ -29,6 +31,8 @@ const routes = [
DossierDetailsStatsComponent,
FileWorkloadColumnComponent,
TableItemComponent,
FileStatsComponent,
WorkflowItemComponent,
],
providers: [ConfigService],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],

39
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
View File

@ -131,40 +131,13 @@
</ng-template>
<ng-template #workflowItemTemplate let-entity="entity">
<div *ngIf="cast(entity) as file" class="workflow-item">
<div>
<div class="details">
<div [matTooltip]="file.filename" class="filename" matTooltipPosition="above">
{{ file.filename }}
</div>
<ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
</div>
<div class="user">
<redaction-initials-avatar [user]="file.currentReviewer"></redaction-initials-avatar>
</div>
</div>
<redaction-file-actions
(actionPerformed)="actionPerformed($event, file)"
*ngIf="!file.isProcessing"
[file]="file"
type="dossier-overview-workflow"
></redaction-file-actions>
</div>
<redaction-workflow-item
(actionPerformed)="actionPerformed($event, entity)"
[file]="entity"
[statsTemplate]="statsTemplate"
></redaction-workflow-item>
</ng-template>
<ng-template #statsTemplate let-file="entity">
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="iqser:pages"></mat-icon>
{{ file.numberOfPages }}
</div>
<div>
<mat-icon svgIcon="red:exclude-pages"></mat-icon>
{{ file.excludedPages.length }}
</div>
<div *ngIf="file.lastOCRTime" [matTooltipPosition]="'above'" [matTooltip]="'dossier-overview.ocr-performed' | translate">
<mat-icon svgIcon="iqser:ocr"></mat-icon>
{{ file.lastOCRTime | date: 'mediumDate' }}
</div>
</div>
<redaction-file-stats [file]="file"></redaction-file-stats>
</ng-template>

33
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
View File

@ -59,36 +59,3 @@
margin-right: 8px;
}
}
.workflow-item {
padding: 10px;
> div {
display: flex;
justify-content: space-between;
.details {
max-width: calc(100% - 28px);
.filename {
font-weight: 600;
line-height: 18px;
@include common-mixins.line-clamp(1);
}
}
.user {
display: flex;
align-items: flex-end;
}
}
redaction-file-actions {
margin-top: 10px;
display: none;
}
&:hover redaction-file-actions {
display: block;
}
}