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

split needs work badge into separate components

Browse Source
This commit is contained in:
Dan Percic 2021-11-12 13:07:00 +02:00
parent 444ebdf11b
commit a3e44b3d85
15 changed files with 132 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html Normal file
View File

@ -0,0 +1,9 @@
<div class="needs-work">
<redaction-annotation-icon *ngIf="file.analysisRequired" [color]="analysisColor" label="A" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file.hasUpdates" [color]="updatedColor" label="U" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file.hasRedactions" [color]="redactionColor" label="R" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file.hasImages" [color]="imageColor" label="I" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file.hintsOnly" [color]="hintColor" label="H" type="circle"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="file.hasSuggestions" [color]="suggestionColor" label="S" type="rhombus"></redaction-annotation-icon>
<mat-icon *ngIf="file.hasAnnotationComments" svgIcon="red:comment"></mat-icon>
</div>

0
apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.scss → apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.scss
View File

43
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts Normal file
View File

@ -0,0 +1,43 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { AppStateService } from '@state/app-state.service';
import { File } from '@red/domain';
@Component({
selector: 'redaction-file-workload-column',
templateUrl: './file-workload-column.component.html',
styleUrls: ['./file-workload-column.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileWorkloadColumnComponent {
@Input() file: File;
constructor(private readonly _appStateService: AppStateService) {}
get suggestionColor() {
return this._getDictionaryColor('suggestion');
}
get imageColor() {
return this._getDictionaryColor('image');
}
get updatedColor() {
return this._getDictionaryColor('updated');
}
get analysisColor() {
return this._getDictionaryColor('analysis');
}
get hintColor() {
return this._getDictionaryColor('hint');
}
get redactionColor() {
return this._getDictionaryColor('redaction');
}
private _getDictionaryColor(type: string) {
return this._appStateService.getDictionaryColor(type);
}
}

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
View File

@ -30,7 +30,7 @@
</div>
<div *ngIf="!file.isError" class="cell">
<redaction-needs-work-badge [needsWorkInput]="file"></redaction-needs-work-badge>
<redaction-file-workload-column [file]="file"></redaction-file-workload-column>
</div>
<div *ngIf="!file.isError" class="user-column cell">

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

@ -11,6 +11,7 @@ import { DossierDetailsStatsComponent } from './components/dossier-details-stats
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';
const routes = [
{
@ -26,6 +27,7 @@ const routes = [
DossierOverviewBulkActionsComponent,
DossierDetailsComponent,
DossierDetailsStatsComponent,
FileWorkloadColumnComponent,
TableItemComponent,
],
providers: [ConfigService],

20
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html Normal file
View File

@ -0,0 +1,20 @@
<div *ngIf="dossier.stats$ | async as stats" class="needs-work">
<redaction-annotation-icon
*ngIf="stats.hasRedactionsFilePresent"
[color]="redactionColor"
label="R"
type="square"
></redaction-annotation-icon>
<redaction-annotation-icon
*ngIf="stats.hasHintsNoRedactionsFilePresent"
[color]="hintColor"
label="H"
type="circle"
></redaction-annotation-icon>
<redaction-annotation-icon
*ngIf="stats.hasSuggestionsFilePresent"
[color]="suggestionColor"
label="S"
type="rhombus"
></redaction-annotation-icon>
</div>

17
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss Normal file
View File

@ -0,0 +1,17 @@
.needs-work {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
> *:not(:last-child) {
margin-right: 4px;
}
mat-icon {
min-width: 16px;
width: 16px;
height: 16px;
fill-opacity: 0.6;
}
}

27
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts Normal file
View File

@ -0,0 +1,27 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { AppStateService } from '@state/app-state.service';
import { Dossier } from '@red/domain';
@Component({
selector: 'redaction-dossier-workload-column',
templateUrl: './dossier-workload-column.component.html',
styleUrls: ['./dossier-workload-column.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DossierWorkloadColumnComponent {
@Input() dossier: Dossier;
constructor(private readonly _appStateService: AppStateService) {}
get suggestionColor() {
return this._appStateService.getDictionaryColor('suggestion');
}
get hintColor() {
return this._appStateService.getDictionaryColor('hint');
}
get redactionColor() {
return this._appStateService.getDictionaryColor('redaction');
}
}

2
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
View File

@ -2,7 +2,7 @@
<redaction-dossiers-listing-dossier-name [dossier]="dossier"></redaction-dossiers-listing-dossier-name>
</div>
<div class="cell">
<redaction-needs-work-badge [needsWorkInput]="dossier"></redaction-needs-work-badge>
<redaction-dossier-workload-column [dossier]="dossier"></redaction-dossier-workload-column>
</div>
<div class="cell user-column">
<redaction-initials-avatar [user]="dossier.ownerId" [withName]="true"></redaction-initials-avatar>

2
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
View File

@ -11,6 +11,7 @@ import { DossiersListingDossierNameComponent } from './components/dossiers-listi
import { ConfigService } from './config.service';
import { TableItemComponent } from './components/table-item/table-item.component';
import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
import { DossierWorkloadColumnComponent } from './components/dossier-workload-column/dossier-workload-column.component';
const routes = [
{
@ -26,6 +27,7 @@ const routes = [
DossiersListingActionsComponent,
DossiersListingDetailsComponent,
DossiersListingDossierNameComponent,
DossierWorkloadColumnComponent,
TableItemComponent,
],
providers: [ConfigService],

19
apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html
View File

@ -1,19 +0,0 @@
<div class="needs-work">
<redaction-annotation-icon *ngIf="reanalysisRequired()" [color]="analysisColor" label="A" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="hasUpdates" [color]="updatedColor" label="U" type="square"></redaction-annotation-icon>
<redaction-annotation-icon
*ngIf="needsWorkInput.hasRedactions"
[color]="redactionColor"
label="R"
type="square"
></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="hasImages" [color]="imageColor" label="I" type="square"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="needsWorkInput.hintsOnly" [color]="hintColor" label="H" type="circle"></redaction-annotation-icon>
<redaction-annotation-icon
*ngIf="needsWorkInput.hasSuggestions"
[color]="suggestionColor"
label="S"
type="rhombus"
></redaction-annotation-icon>
<mat-icon *ngIf="hasAnnotationComments" svgIcon="red:comment"></mat-icon>
</div>

62
apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts
View File

@ -1,62 +0,0 @@
import { Component, Input } from '@angular/core';
import { AppStateService } from '@state/app-state.service';
import { Dossier, File } from '@red/domain';
@Component({
selector: 'redaction-needs-work-badge',
templateUrl: './needs-work-badge.component.html',
styleUrls: ['./needs-work-badge.component.scss'],
})
export class NeedsWorkBadgeComponent {
@Input() needsWorkInput: File | Dossier;
constructor(private readonly _appStateService: AppStateService) {}
get suggestionColor() {
return this._getDictionaryColor('suggestion');
}
get imageColor() {
return this._getDictionaryColor('image');
}
get updatedColor() {
return this._getDictionaryColor('updated');
}
get analysisColor() {
return this._getDictionaryColor('analysis');
}
get hintColor() {
return this._getDictionaryColor('hint');
}
get redactionColor() {
return this._getDictionaryColor('redaction');
}
get hasImages() {
return this.needsWorkInput instanceof File && this.needsWorkInput.hasImages;
}
get hasUpdates() {
return this.needsWorkInput instanceof File && this.needsWorkInput.hasUpdates;
}
get hasAnnotationComments(): boolean {
return this.needsWorkInput instanceof File && (<any> this.needsWorkInput).hasAnnotationComments;
}
reanalysisRequired() {
if (this.needsWorkInput instanceof Dossier) {
return this.needsWorkInput.reanalysisRequired;
} else {
return this.needsWorkInput.analysisRequired;
}
}
private _getDictionaryColor(type: string) {
return this._appStateService.getDictionaryColor(type);
}
}

3
apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts
View File

@ -2,11 +2,10 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FileActionService } from './services/file-action.service';
import { FileActionsComponent } from './components/file-actions/file-actions.component';
import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component';
import { IqserIconsModule } from '@iqser/common-ui';
import { SharedModule } from '@shared/shared.module';
const components = [FileActionsComponent, NeedsWorkBadgeComponent];
const components = [FileActionsComponent];
@NgModule({
declarations: [...components],

22
apps/red-ui/src/app/utils/filter-utils.ts
View File

@ -44,35 +44,31 @@ export function handleFilterDelta(oldFilters: INestedFilter[], newFilters: INest
});
}
export const annotationFilterChecker = (input: File | Dossier, filter: INestedFilter) => {
export const annotationFilterChecker = (file: File, filter: INestedFilter) => {
switch (filter.id) {
case 'analysis': {
if (input instanceof Dossier) {
return input.reanalysisRequired;
} else {
return input.analysisRequired;
}
return file.analysisRequired;
}
case 'suggestion': {
return input.hasSuggestions;
return file.hasSuggestions;
}
case 'redaction': {
return input.hasRedactions;
return file.hasRedactions;
}
case 'hint': {
return input.hintsOnly;
return file.hintsOnly;
}
case 'none': {
return input.hasNone;
return file.hasNone;
}
case 'updated': {
return input instanceof File && input.hasUpdates;
return file.hasUpdates;
}
case 'image': {
return input instanceof File && input.hasImages;
return file.hasImages;
}
case 'comment': {
return input instanceof File && input.hasAnnotationComments;
return file.hasAnnotationComments;
}
}
};

4
libs/red-domain/src/lib/dossiers/dossier.model.ts
View File

@ -28,7 +28,6 @@ export class Dossier implements IDossier, IListable {
readonly reanalysisRequired = this.files.some(file => file.analysisRequired);
readonly totalNumberOfPages: number;
readonly hintsOnly: boolean;
readonly hasRedactions: boolean;
readonly hasSuggestions: boolean;
@ -62,21 +61,18 @@ export class Dossier implements IDossier, IListable {
let hintsOnly = false;
let hasRedactions = false;
let hasSuggestions = false;
let totalNumberOfPages = 0;
let hasPendingOrProcessing = false;
this.files.forEach(f => {
hintsOnly = hintsOnly || f.hintsOnly;
hasRedactions = hasRedactions || f.hasRedactions;
hasSuggestions = hasSuggestions || f.hasSuggestions;
totalNumberOfPages += f.numberOfPages ?? 0;
hasPendingOrProcessing = hasPendingOrProcessing || f.isPending || f.isProcessing;
});
this.hintsOnly = hintsOnly;
this.hasRedactions = hasRedactions;
this.hasSuggestions = hasSuggestions;
this.totalNumberOfPages = totalNumberOfPages;
this.hasNone = !this.hasSuggestions && !this.hasRedactions && !this.hintsOnly;
}