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; }