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 10b936a07..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 @@ -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 }}
@@ -29,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 590b2209f..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 @@ -22,7 +22,10 @@ export class SimpleDoughnutChartComponent implements OnChanges { @Input() strokeWidth = 20; @Input() direction: 'row' | 'column' = 'column'; @Input() filter: FilterModel[]; - @Output() public toggleFilter = new EventEmitter(); + @Input() totalType: 'sum' | 'count' = 'sum'; + @Input() counterText: string; + @Output() + public toggleFilter = new EventEmitter(); public chartData: any[] = []; public perimeter: number; @@ -47,6 +50,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; @@ -82,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/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/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 7b2b46b92..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 @@ -1,4 +1,84 @@
-

Under Construction

- +
+
+
+ +
+
+
+
+
+
+ + +
+ + + {{ 'dictionary-listing.table-header.title' | translate: { length: 0 } }} + +
+ + +
+ + + +
+ + +
+
+
+ +
+ +
+
+
+
+ {{ dict.label }} +
+
+
+ + 300 +
+
+
+
+
+ +
+
+
+
+
+ +
+ +
+
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..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,17 +1,54 @@ @import '../../../../assets/styles/red-variables'; +@import '../../../../assets/styles/red-mixins'; -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: auto 1fr 1fr 2fr; + + .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; + } } } + +.right-fixed-container { + overflow-y: scroll; + @include no-scroll-bar(); + display: flex; + width: calc(353px); + height: calc(100vh - 110px - 2 * 50px); + justify-content: center; + 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 ed149a9d7..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,4 +1,9 @@ import { Component, OnInit } from '@angular/core'; +import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; +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'; @Component({ selector: 'redaction-dictionary-listing-screen', @@ -6,7 +11,71 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./dictionary-listing-screen.component.scss'] }) export class DictionaryListingScreenComponent implements OnInit { - constructor() {} + public chartData: DoughnutChartConfig[] = []; + public dictionaries: TypeValue[]; + public selectedDictKeys: string[] = []; - ngOnInit(): void {} + constructor( + private readonly _dialogService: DialogService, + private readonly _sortingService: SortingService, + private readonly _appStateService: AppStateService + ) {} + + ngOnInit(): void { + this._appStateService.reset(); + const dicts = this._appStateService.dictionaryData; + this.dictionaries = Object.keys(dicts).map((key) => dicts[key]); + this._calculateData(); + } + + private _calculateData() { + this.chartData = []; + for (const dict of this.dictionaries) { + this.chartData.push({ + value: 100, + color: dict.hexColor, + label: dict.label, + key: dict.type + }); + } + this.chartData.sort((a, b) => (a.label < b.label ? -1 : 1)); + } + + public get sortingOption(): SortingOption { + return this._sortingService.getSortingOption('dictionary-listing'); + } + + public toggleSort($event) { + this._sortingService.toggleSort('dictionary-listing', $event); + } + + toggleDictSelected($event: MouseEvent, dict: TypeValue) { + $event.stopPropagation(); + const idx = this.selectedDictKeys.indexOf(dict.type); + if (idx === -1) { + this.selectedDictKeys.push(dict.type); + } else { + this.selectedDictKeys.splice(idx, 1); + } + } + + public toggleSelectAll() { + if (this.areSomeDictsSelected) { + this.selectedDictKeys = []; + } else { + this.selectedDictKeys = this.dictionaries.map((dict) => dict.type); + } + } + + public get areAllDictsSelected() { + return this.dictionaries.length !== 0 && this.selectedDictKeys.length === this.dictionaries.length; + } + + public get areSomeDictsSelected() { + return this.selectedDictKeys.length > 0; + } + + public isDictSelected(dict: TypeValue) { + return this.selectedDictKeys.indexOf(dict.type) !== -1; + } } 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 @@
- +
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 416046ea9..1af3e49d1 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -23,9 +23,6 @@ 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; }