From 1d7a26e69a546725e3864772a4aa2553351043ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 25 Nov 2020 21:12:49 +0200 Subject: [PATCH 1/4] View last reviewer permissions --- .../file/file-preview-screen/file-preview-screen.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 34c47dbcd..b2e6ce185 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -58,7 +58,7 @@ - +
From 532e1d15ec3a76255ad6ad897f931a03777a021e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 25 Nov 2020 22:26:06 +0200 Subject: [PATCH 2/4] Dictionaries initial --- .../simple-doughnut-chart.component.html | 3 +- .../simple-doughnut-chart.component.ts | 5 ++ .../status-bar/status-bar.component.html | 7 ++- .../dictionary-listing-screen.component.html | 46 ++++++++++++++++++- .../dictionary-listing-screen.component.scss | 32 ++++++++----- .../dictionary-listing-screen.component.ts | 41 ++++++++++++++++- apps/red-ui/src/assets/i18n/en.json | 7 +++ apps/red-ui/src/assets/styles/red-grid.scss | 4 ++ 8 files changed, 127 insertions(+), 18 deletions(-) diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html index 10b936a07..7a8994f74 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html @@ -6,6 +6,7 @@ attr.cy="{{ cy }}" attr.r="{{ radius }}" [class]="value.color" + [attr.stroke]="value.color.includes('#') ? value.color : ''" attr.stroke-width="{{ strokeWidth }}" attr.stroke-dasharray="{{ circumference }}" attr.stroke-dashoffset="{{ calculateStrokeDashOffset(value.value) }}" @@ -16,7 +17,7 @@
-
{{ dataTotal }}
+
{{ displayedDataTotal }}
{{ subtitle | translate }}
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts index 590b2209f..87e33ce4b 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -22,6 +22,7 @@ export class SimpleDoughnutChartComponent implements OnChanges { @Input() strokeWidth = 20; @Input() direction: 'row' | 'column' = 'column'; @Input() filter: FilterModel[]; + @Input() totalType: 'sum' | 'count' = 'sum'; @Output() public toggleFilter = new EventEmitter(); public chartData: any[] = []; @@ -47,6 +48,10 @@ export class SimpleDoughnutChartComponent implements OnChanges { return this.config.map((v) => v.value).reduce((acc, val) => acc + val, 0); } + get displayedDataTotal() { + return this.totalType === 'sum' ? this.dataTotal : this.config.length; + } + calculateChartData() { const newData = []; let angleOffset = -90; diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.html b/apps/red-ui/src/app/components/status-bar/status-bar.component.html index 0a134aaa4..df1a62d31 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.html +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.html @@ -1,6 +1,11 @@
-
+
{{ rect.label }}
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index 7b2b46b92..b120fd914 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -1,4 +1,46 @@
-

Under Construction

- +
+
+
+ +
+
+
+
+ + {{ 'project-listing.table-header.title' | translate: { length: 0 } }} + +
+ + + + +
+
+
+ {{ dict.name }} +
+
+
+ + {{ dict.entries }} +
+
+
+
2
+
+
+
+ +
+ +
+
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss index 6d948fc45..18d12335e 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss @@ -1,17 +1,25 @@ @import '../../../../assets/styles/red-variables'; -section { - display: flex; - justify-content: center; - align-items: center; - color: $red-1; - flex-direction: column; - gap: 20px; - height: calc(100vh - 61px); +.left-container { + width: calc(100vw - 353px); - mat-icon { - color: $grey-1; - height: 100px; - width: 100px; + .grid-container { + grid-template-columns: 1fr 2fr; + } + + .stats-subtitle { + margin-top: 6px; } } + +.right-fixed-container { + display: flex; + width: calc(353px); + height: calc(100vh - 110px); + padding: 0; + justify-content: center; +} + +.mt-50 { + margin-top: 50px; +} diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts index ed149a9d7..c970f36cd 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts @@ -1,4 +1,12 @@ import { Component, OnInit } from '@angular/core'; +import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; +import { Dictionary, DictionaryControllerService } from '@redaction/red-ui-http'; +import { TranslateChartService } from '../../../utils/translate-chart.service'; +import { SortingService } from '../../../utils/sorting.service'; +import { DialogService } from '../../../dialogs/dialog.service'; +import { AppStateService } from '../../../state/app-state.service'; +import { groupBy } from '../../../utils/functions'; +import { StatusSorter } from '../../../common/sorters/status-sorter'; @Component({ selector: 'redaction-dictionary-listing-screen', @@ -6,7 +14,36 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./dictionary-listing-screen.component.scss'] }) export class DictionaryListingScreenComponent implements OnInit { - constructor() {} + public chartData: DoughnutChartConfig[] = []; + public dictionaries = [ + { id: '0', name: 'Vertebrates', entries: 330, type: 'hint', hexColor: '#00ff00' }, + { id: '1', name: 'Another Type', entries: 550, type: 'redaction', hexColor: '#ff0000' }, + { id: '2', name: 'Hint only', entries: 120, type: 'hint', hexColor: '#0000ff' } + ]; + public displayedDictionaries: any[]; - ngOnInit(): void {} + constructor( + public readonly appStateService: AppStateService, + private readonly _dialogService: DialogService, + public readonly sortingService: SortingService, + public readonly translateChartService: TranslateChartService + ) {} + + ngOnInit(): void { + this.appStateService.reset(); + this.displayedDictionaries = this.dictionaries; + this._calculateData(); + } + + private _calculateData() { + this.chartData = []; + for (const dict of this.dictionaries) { + this.chartData.push({ + value: dict.entries, + color: dict.hexColor, + label: dict.name, + key: dict.id + }); + } + } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 9ab765545..88e8dc4b4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -466,5 +466,12 @@ "title": "Confirm deletion", "question": "Do you wish to proceed?" } + }, + "dictionary-listing": { + "stats": { + "charts": { + "types": "Types" + } + } } } diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss index 416046ea9..b4297bf81 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -19,6 +19,10 @@ gap: 25px; } + &.span-2 { + grid-column-end: span 2; + } + &.span-3 { grid-column-end: span 3; } From d67a0424ce3ee472325190236e99fb92a272e979 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 26 Nov 2020 15:21:01 +0200 Subject: [PATCH 3/4] Dictionary listing UI updates --- apps/red-ui/src/app/icons/icons.module.ts | 1 + .../dictionary-listing-screen.component.html | 62 +++++++++++++++---- .../dictionary-listing-screen.component.scss | 38 ++++++++++-- .../dictionary-listing-screen.component.ts | 46 +++++++++++++- .../project-overview-screen.component.html | 4 +- .../project-overview-screen.component.scss | 4 -- apps/red-ui/src/app/utils/sorting.service.ts | 9 ++- apps/red-ui/src/assets/i18n/en.json | 10 ++- .../src/assets/icons/general/entries.svg | 17 +++++ apps/red-ui/src/assets/styles/red-grid.scss | 7 --- .../src/assets/styles/red-page-layout.scss | 5 ++ apps/red-ui/src/assets/styles/red-tables.scss | 2 +- 12 files changed, 167 insertions(+), 38 deletions(-) create mode 100644 apps/red-ui/src/assets/icons/general/entries.svg diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 6cdb35fd1..67eb0bd25 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -27,6 +27,7 @@ export class IconsModule { 'double-chevron-right', 'download', 'edit', + 'entries', 'error', 'folder', 'info', diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index b120fd914..060279b45 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -6,28 +6,64 @@
-
+
+
+
+ + +
+ - {{ 'project-listing.table-header.title' | translate: { length: 0 } }} + {{ 'dictionary-listing.table-header.title' | translate: { length: 0 } }}
- - + +
+ + + +
+ + +
+
+
+ +
-
-
- {{ dict.name }} -
-
-
- - {{ dict.entries }} +
+
+
+ {{ dict.name }} +
+
+
+ + {{ dict.entries }} +
-
2
+
2
+
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss index 18d12335e..c69ebabed 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss @@ -4,11 +4,41 @@ width: calc(100vw - 353px); .grid-container { - grid-template-columns: 1fr 2fr; - } + grid-template-columns: auto 1fr 1fr 2fr; - .stats-subtitle { - margin-top: 6px; + .header-item { + padding: 0 24px 0 10px; + } + + redaction-table-col-name::ng-deep { + > div { + padding-left: 10px; + } + } + + .table-item { + > div { + display: flex; + flex-direction: row; + padding-left: 10px; + align-items: center; + justify-content: flex-start; + } + + .color-square { + width: 16px; + height: 16px; + margin-right: 16px; + } + + .analyzed { + justify-content: center; + } + } + + .stats-subtitle { + margin-top: 4px; + } } } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts index c970f36cd..4ae069f42 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts @@ -2,11 +2,12 @@ import { Component, OnInit } from '@angular/core'; import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; import { Dictionary, DictionaryControllerService } from '@redaction/red-ui-http'; import { TranslateChartService } from '../../../utils/translate-chart.service'; -import { SortingService } from '../../../utils/sorting.service'; +import { SortingOption, SortingService } from '../../../utils/sorting.service'; import { DialogService } from '../../../dialogs/dialog.service'; import { AppStateService } from '../../../state/app-state.service'; import { groupBy } from '../../../utils/functions'; import { StatusSorter } from '../../../common/sorters/status-sorter'; +import { FileStatusWrapper } from '../../file/model/file-status.wrapper'; @Component({ selector: 'redaction-dictionary-listing-screen', @@ -21,11 +22,12 @@ export class DictionaryListingScreenComponent implements OnInit { { id: '2', name: 'Hint only', entries: 120, type: 'hint', hexColor: '#0000ff' } ]; public displayedDictionaries: any[]; + public selectedDictionariesIds: string[] = []; constructor( - public readonly appStateService: AppStateService, private readonly _dialogService: DialogService, - public readonly sortingService: SortingService, + private readonly _sortingService: SortingService, + public readonly appStateService: AppStateService, public readonly translateChartService: TranslateChartService ) {} @@ -46,4 +48,42 @@ export class DictionaryListingScreenComponent implements OnInit { }); } } + + public get sortingOption(): SortingOption { + return this._sortingService.getSortingOption('dictionary-listing'); + } + + public toggleSort($event) { + this._sortingService.toggleSort('dictionary-listing', $event); + } + + toggleDictSelected($event: MouseEvent, dict: any) { + $event.stopPropagation(); + const idx = this.selectedDictionariesIds.indexOf(dict.id); + if (idx === -1) { + this.selectedDictionariesIds.push(dict.id); + } else { + this.selectedDictionariesIds.splice(idx, 1); + } + } + + public toggleSelectAll() { + if (this.areSomeDictsSelected) { + this.selectedDictionariesIds = []; + } else { + this.selectedDictionariesIds = this.displayedDictionaries.map((dict) => dict.id); + } + } + + public get areAllDictsSelected() { + return this.displayedDictionaries.length !== 0 && this.selectedDictionariesIds.length === this.displayedDictionaries.length; + } + + public get areSomeDictsSelected() { + return this.selectedDictionariesIds.length > 0; + } + + public isDictSelected(dict: any) { + return this.selectedDictionariesIds.indexOf(dict.id) !== -1; + } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 40d84f66c..6042f1339 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -72,7 +72,7 @@
-
+
-
+
+ + D2E1BFB9-9086-46E0-98F5-F3E2898811B0 + + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss index b4297bf81..1af3e49d1 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -19,17 +19,10 @@ gap: 25px; } - &.span-2 { - grid-column-end: span 2; - } - &.span-3 { grid-column-end: span 3; } - &.span-7 { - grid-column-end: span 7; - } &.span-4 { grid-column-end: span 4; } diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index c3f2516c8..a630c4b06 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -62,6 +62,11 @@ body { justify-content: flex-end; } +.flex-center { + display: flex; + justify-content: center; +} + .flex-1 { flex: 1; } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index 58d592ca6..d3370acd9 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -17,7 +17,7 @@ redaction-table-col-name, .grid-container { display: grid; - .select-oval-placeholder { + .placeholder-bottom-border { border-bottom: 1px solid $separator; } From f53ad67956d4b73aee3c59c4f0785297ad834ccf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 26 Nov 2020 17:25:22 +0200 Subject: [PATCH 4/4] Dictionary listing data --- apps/red-ui/src/app/app.module.ts | 2 +- .../annotation-icon.component.html | 4 +- .../annotation-icon.component.ts | 10 ++++ .../needs-work-badge.component.html | 0 .../needs-work-badge.component.scss | 0 .../needs-work-badge.component.ts | 8 +-- .../simple-doughnut-chart.component.html | 2 +- .../simple-doughnut-chart.component.scss | 4 ++ .../simple-doughnut-chart.component.ts | 8 ++- .../dictionary-listing-screen.component.html | 16 +++--- .../dictionary-listing-screen.component.scss | 11 ++-- .../dictionary-listing-screen.component.ts | 50 ++++++++----------- .../project-overview-screen.component.scss | 2 +- .../red-ui/src/app/state/app-state.service.ts | 2 +- apps/red-ui/src/app/utils/sorting.service.ts | 2 +- apps/red-ui/src/assets/i18n/en.json | 5 +- 16 files changed, 70 insertions(+), 56 deletions(-) rename apps/red-ui/src/app/{screens/common => components}/needs-work-badge/needs-work-badge.component.html (100%) rename apps/red-ui/src/app/{screens/common => components}/needs-work-badge/needs-work-badge.component.scss (100%) rename apps/red-ui/src/app/{screens/common => components}/needs-work-badge/needs-work-badge.component.ts (75%) diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 58b91609d..6ecd1907f 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -67,7 +67,7 @@ import { AppInfoComponent } from './screens/app-info/app-info.component'; import { TableColNameComponent } from './components/table-col-name/table-col-name.component'; import { ProjectDetailsComponent } from './screens/project-overview-screen/project-details/project-details.component'; import { PageIndicatorComponent } from './screens/file/page-indicator/page-indicator.component'; -import { NeedsWorkBadgeComponent } from './screens/common/needs-work-badge/needs-work-badge.component'; +import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component'; import { ProjectOverviewEmptyComponent } from './screens/empty-states/project-overview-empty/project-overview-empty.component'; import { ProjectListingEmptyComponent } from './screens/empty-states/project-listing-empty/project-listing-empty.component'; import { AnnotationActionsComponent } from './screens/file/annotation-actions/annotation-actions.component'; diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html index ceea1ffe9..c17e65ef3 100644 --- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html +++ b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html @@ -1,3 +1,3 @@ -
- {{ label }} +
+ {{ label || dictType.label.charAt(0) }}
diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts index 560ae5812..f5957ab6e 100644 --- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts +++ b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core'; +import { TypeValue } from '@redaction/red-ui-http'; @Component({ selector: 'redaction-annotation-icon', @@ -9,6 +10,15 @@ export class AnnotationIconComponent { @Input() color: string; @Input() type: 'square' | 'rhombus' | 'circle'; @Input() label: string; + @Input() dictType: TypeValue; constructor() {} + + public get isHint() { + return this.type === 'circle' || this.dictType?.type === 'hint'; + } + + public get isRequest() { + return this.type === 'rhombus' || this.dictType?.type === 'redaction'; + } } diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.html similarity index 100% rename from apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.html rename to apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.html diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss similarity index 100% rename from apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.scss rename to apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss diff --git a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.ts similarity index 75% rename from apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts rename to apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.ts index 9ac060fc5..123fb44a0 100644 --- a/apps/red-ui/src/app/screens/common/needs-work-badge/needs-work-badge.component.ts +++ b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.ts @@ -1,8 +1,8 @@ import { Component, Input, OnInit } from '@angular/core'; -import { AppStateService } from '../../../state/app-state.service'; -import { PermissionsService } from '../../../common/service/permissions.service'; -import { FileStatusWrapper } from '../../file/model/file-status.wrapper'; -import { ProjectWrapper } from '../../../state/model/project.wrapper'; +import { AppStateService } from '../../state/app-state.service'; +import { PermissionsService } from '../../common/service/permissions.service'; +import { FileStatusWrapper } from '../../screens/file/model/file-status.wrapper'; +import { ProjectWrapper } from '../../state/model/project.wrapper'; @Component({ selector: 'redaction-needs-work-badge', diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html index 7a8994f74..d512d9a4b 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html @@ -30,7 +30,7 @@ { length: val.value, color: val.color, - label: val.value + ' ' + val.label + label: getLabel(val) } ]" > diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss index d93be42b3..682cc947c 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss @@ -1,5 +1,9 @@ @import '../../../assets/styles/red-variables'; +:host { + height: fit-content; +} + .container { position: relative; display: flex; diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts index 87e33ce4b..e1cef0c3a 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -23,7 +23,9 @@ export class SimpleDoughnutChartComponent implements OnChanges { @Input() direction: 'row' | 'column' = 'column'; @Input() filter: FilterModel[]; @Input() totalType: 'sum' | 'count' = 'sum'; - @Output() public toggleFilter = new EventEmitter(); + @Input() counterText: string; + @Output() + public toggleFilter = new EventEmitter(); public chartData: any[] = []; public perimeter: number; @@ -87,4 +89,8 @@ export class SimpleDoughnutChartComponent implements OnChanges { checked: this.filter?.find((f) => f.key === el.key)?.checked })); } + + public getLabel(config: DoughnutChartConfig): string { + return this.totalType === 'sum' ? `${config.value} ${config.label}` : `${config.label} (${config.value} ${this.counterText})`; + } } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index 060279b45..1503747c5 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -33,16 +33,16 @@ - +
-
+
@@ -52,17 +52,19 @@
- {{ dict.name }} + {{ dict.label }}
- {{ dict.entries }} + 300
-
2
+
+ +
@@ -70,12 +72,12 @@
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss index c69ebabed..b3c7e3856 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss @@ -1,4 +1,5 @@ @import '../../../../assets/styles/red-variables'; +@import '../../../../assets/styles/red-mixins'; .left-container { width: calc(100vw - 353px); @@ -43,13 +44,11 @@ } .right-fixed-container { + overflow-y: scroll; + @include no-scroll-bar(); display: flex; width: calc(353px); - height: calc(100vh - 110px); - padding: 0; + height: calc(100vh - 110px - 2 * 50px); justify-content: center; -} - -.mt-50 { - margin-top: 50px; + padding: 50px 0; } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts index 4ae069f42..6bae3e722 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts @@ -1,13 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; -import { Dictionary, DictionaryControllerService } from '@redaction/red-ui-http'; -import { TranslateChartService } from '../../../utils/translate-chart.service'; +import { TypeValue } from '@redaction/red-ui-http'; import { SortingOption, SortingService } from '../../../utils/sorting.service'; import { DialogService } from '../../../dialogs/dialog.service'; import { AppStateService } from '../../../state/app-state.service'; -import { groupBy } from '../../../utils/functions'; -import { StatusSorter } from '../../../common/sorters/status-sorter'; -import { FileStatusWrapper } from '../../file/model/file-status.wrapper'; @Component({ selector: 'redaction-dictionary-listing-screen', @@ -16,24 +12,19 @@ import { FileStatusWrapper } from '../../file/model/file-status.wrapper'; }) export class DictionaryListingScreenComponent implements OnInit { public chartData: DoughnutChartConfig[] = []; - public dictionaries = [ - { id: '0', name: 'Vertebrates', entries: 330, type: 'hint', hexColor: '#00ff00' }, - { id: '1', name: 'Another Type', entries: 550, type: 'redaction', hexColor: '#ff0000' }, - { id: '2', name: 'Hint only', entries: 120, type: 'hint', hexColor: '#0000ff' } - ]; - public displayedDictionaries: any[]; - public selectedDictionariesIds: string[] = []; + public dictionaries: TypeValue[]; + public selectedDictKeys: string[] = []; constructor( private readonly _dialogService: DialogService, private readonly _sortingService: SortingService, - public readonly appStateService: AppStateService, - public readonly translateChartService: TranslateChartService + private readonly _appStateService: AppStateService ) {} ngOnInit(): void { - this.appStateService.reset(); - this.displayedDictionaries = this.dictionaries; + this._appStateService.reset(); + const dicts = this._appStateService.dictionaryData; + this.dictionaries = Object.keys(dicts).map((key) => dicts[key]); this._calculateData(); } @@ -41,12 +32,13 @@ export class DictionaryListingScreenComponent implements OnInit { this.chartData = []; for (const dict of this.dictionaries) { this.chartData.push({ - value: dict.entries, + value: 100, color: dict.hexColor, - label: dict.name, - key: dict.id + label: dict.label, + key: dict.type }); } + this.chartData.sort((a, b) => (a.label < b.label ? -1 : 1)); } public get sortingOption(): SortingOption { @@ -57,33 +49,33 @@ export class DictionaryListingScreenComponent implements OnInit { this._sortingService.toggleSort('dictionary-listing', $event); } - toggleDictSelected($event: MouseEvent, dict: any) { + toggleDictSelected($event: MouseEvent, dict: TypeValue) { $event.stopPropagation(); - const idx = this.selectedDictionariesIds.indexOf(dict.id); + const idx = this.selectedDictKeys.indexOf(dict.type); if (idx === -1) { - this.selectedDictionariesIds.push(dict.id); + this.selectedDictKeys.push(dict.type); } else { - this.selectedDictionariesIds.splice(idx, 1); + this.selectedDictKeys.splice(idx, 1); } } public toggleSelectAll() { if (this.areSomeDictsSelected) { - this.selectedDictionariesIds = []; + this.selectedDictKeys = []; } else { - this.selectedDictionariesIds = this.displayedDictionaries.map((dict) => dict.id); + this.selectedDictKeys = this.dictionaries.map((dict) => dict.type); } } public get areAllDictsSelected() { - return this.displayedDictionaries.length !== 0 && this.selectedDictionariesIds.length === this.displayedDictionaries.length; + return this.dictionaries.length !== 0 && this.selectedDictKeys.length === this.dictionaries.length; } public get areSomeDictsSelected() { - return this.selectedDictionariesIds.length > 0; + return this.selectedDictKeys.length > 0; } - public isDictSelected(dict: any) { - return this.selectedDictionariesIds.indexOf(dict.id) !== -1; + public isDictSelected(dict: TypeValue) { + return this.selectedDictKeys.indexOf(dict.type) !== -1; } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index db96fe90c..24adb1f22 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -6,7 +6,7 @@ } .grid-container { - grid-template-columns: 3fr 2fr 1fr 1fr 2fr auto; + grid-template-columns: auto 3fr 2fr 1fr 1fr 2fr auto; .header-item { padding: 0 24px 0 10px; diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index e1981cc25..bf310a947 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -81,7 +81,7 @@ export class AppStateService { return this._appState.ruleVersion; } - get dictionaryData() { + get dictionaryData(): { [key: string]: TypeValue } { return this._dictionaryData; } diff --git a/apps/red-ui/src/app/utils/sorting.service.ts b/apps/red-ui/src/app/utils/sorting.service.ts index c751f8030..ab9bbf996 100644 --- a/apps/red-ui/src/app/utils/sorting.service.ts +++ b/apps/red-ui/src/app/utils/sorting.service.ts @@ -14,7 +14,7 @@ export class SortingService { private _options: { [key: string]: SortingOption } = { 'project-listing': { column: 'project.projectName', order: 'asc' }, 'project-overview': { column: 'filename', order: 'asc' }, - 'dictionary-listing': { column: 'name', order: 'asc' } + 'dictionary-listing': { column: 'label', order: 'asc' } }; constructor() {} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 7a063b39d..fc8a63ef4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -470,7 +470,8 @@ "dictionary-listing": { "stats": { "charts": { - "types": "Types" + "types": "Types", + "entries": "Entries" } }, "table-header": { @@ -478,7 +479,7 @@ }, "table-col-names": { "type": "Type", - "analyzed": "Analyzed" + "hint-redaction": "Hint/Redaction" } }, "dictionaries": "Dictionaries"