From a3e44b3d85441ee262e27c82d4044fa29a6dd9b8 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 12 Nov 2021 13:07:00 +0200 Subject: [PATCH] split needs work badge into separate components --- .../file-workload-column.component.html | 9 +++ .../file-workload-column.component.scss} | 0 .../file-workload-column.component.ts | 43 +++++++++++++ .../table-item/table-item.component.html | 2 +- .../dossier-overview.module.ts | 2 + .../dossier-workload-column.component.html | 20 ++++++ .../dossier-workload-column.component.scss | 17 +++++ .../dossier-workload-column.component.ts | 27 ++++++++ .../table-item/table-item.component.html | 2 +- .../dossiers-listing.module.ts | 2 + .../needs-work-badge.component.html | 19 ------ .../needs-work-badge.component.ts | 62 ------------------- .../dossier/shared/shared-dossiers.module.ts | 3 +- apps/red-ui/src/app/utils/filter-utils.ts | 22 +++---- .../src/lib/dossiers/dossier.model.ts | 4 -- 15 files changed, 132 insertions(+), 102 deletions(-) create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html rename apps/red-ui/src/app/modules/dossier/{shared/components/needs-work-badge/needs-work-badge.component.scss => screens/dossier-overview/components/file-workload-column/file-workload-column.component.scss} (100%) create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts delete mode 100644 apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html delete mode 100644 apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html new file mode 100644 index 000000000..f5d0bc0e4 --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html @@ -0,0 +1,9 @@ +
+ + + + + + + +
diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.scss similarity index 100% rename from apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.scss rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.scss diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts new file mode 100644 index 000000000..37fa2250a --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts @@ -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); + } +} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html index 9662de4d3..8d5a5db03 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html @@ -30,7 +30,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts index 8a0293c3a..e3cfb523c 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts @@ -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], diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html new file mode 100644 index 000000000..ab348134d --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html @@ -0,0 +1,20 @@ +
+ + + +
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss new file mode 100644 index 000000000..ab462620f --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss @@ -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; + } +} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts new file mode 100644 index 000000000..4bf84b8af --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts @@ -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'); + } +} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html index 8bc85208b..b9b84e571 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html @@ -2,7 +2,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts index fb95409d3..0ede8b3e4 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts @@ -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], diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html deleted file mode 100644 index 26af32665..000000000 --- a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html +++ /dev/null @@ -1,19 +0,0 @@ -
- - - - - - - -
diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts deleted file mode 100644 index 847c1e6c1..000000000 --- a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts +++ /dev/null @@ -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 && ( 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); - } -} diff --git a/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts index 2691d256e..4645adce4 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts +++ b/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts @@ -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], diff --git a/apps/red-ui/src/app/utils/filter-utils.ts b/apps/red-ui/src/app/utils/filter-utils.ts index 0e011eeaa..5348dc015 100644 --- a/apps/red-ui/src/app/utils/filter-utils.ts +++ b/apps/red-ui/src/app/utils/filter-utils.ts @@ -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; } } }; diff --git a/libs/red-domain/src/lib/dossiers/dossier.model.ts b/libs/red-domain/src/lib/dossiers/dossier.model.ts index 52c8bab64..23f831db0 100644 --- a/libs/red-domain/src/lib/dossiers/dossier.model.ts +++ b/libs/red-domain/src/lib/dossiers/dossier.model.ts @@ -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; }