diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html index 4e159a38e..4ccc08dcc 100644 --- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html +++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html @@ -1,41 +1,30 @@
- +
-
- - {{ 'downloads-list.table-header.title' | translate: { length: fileDownloadService.downloads.length } }} - -
- -
- - - - -
-
-
+ + - + -
+
+
+ +
+
{{ download.filename }} @@ -68,7 +57,7 @@
+ + + + diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss index 23bddbc23..ce9b00a52 100644 --- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss +++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss @@ -1,18 +1,18 @@ .content-container { cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: 2fr 1fr 1fr 1fr auto 11px; + grid-template-columns: auto 2fr 1fr 1fr 1fr auto 11px; .table-item { > div:not(.scrollbar-placeholder) { - padding-left: 24px; + padding-left: 10px; } } } &.has-scrollbar:hover { ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: 2fr 1fr 1fr 1fr auto; + grid-template-columns: auto 2fr 1fr 1fr 1fr auto; } } } diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts index fad82258c..2d998ecb0 100644 --- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts +++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts @@ -1,34 +1,56 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Injector, OnInit } from '@angular/core'; import { FileDownloadService } from '@upload-download/services/file-download.service'; import { DownloadStatusWrapper } from '@upload-download/model/download-status.wrapper'; import { DownloadControllerService } from '@redaction/red-ui-http'; +import { BaseListingComponent } from '@shared/base/base-listing.component'; +import { FilterService } from '@shared/services/filter.service'; +import { SearchService } from '@shared/services/search.service'; +import { ScreenStateService } from '@shared/services/screen-state.service'; +import { SortingService } from '@services/sorting.service'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component'; @Component({ selector: 'redaction-downloads-list-screen', templateUrl: './downloads-list-screen.component.html', - styleUrls: ['./downloads-list-screen.component.scss'] + styleUrls: ['./downloads-list-screen.component.scss'], + providers: [FilterService, SearchService, ScreenStateService, SortingService] }) -export class DownloadsListScreenComponent implements OnInit { +export class DownloadsListScreenComponent extends BaseListingComponent implements OnInit { + itemSize = 80; + tableColConfigs: TableColConfig[] = [ + { label: _('downloads-list.table-col-names.name') }, + { label: _('downloads-list.table-col-names.size') }, + { label: _('downloads-list.table-col-names.date') }, + { label: _('downloads-list.table-col-names.status') } + ]; + protected readonly _primaryKey = 'storageId'; + protected _tableHeaderLabel = _('downloads-list.table-header.title'); + constructor( readonly fileDownloadService: FileDownloadService, - private readonly _downloadControllerService: DownloadControllerService - ) {} - - get noData(): boolean { - return this.fileDownloadService.downloads.length === 0; + private readonly _downloadControllerService: DownloadControllerService, + protected readonly _injector: Injector + ) { + super(_injector); } - ngOnInit(): void { - this.fileDownloadService.getDownloadStatus().subscribe(); + async ngOnInit() { + await this._loadData(); } async downloadItem(download: DownloadStatusWrapper) { await this.fileDownloadService.performDownload(download); } - deleteItem(download: DownloadStatusWrapper) { - this._downloadControllerService - .deleteDownload({ storageIds: [download.storageId] }) - .subscribe(() => this.fileDownloadService.getDownloadStatus().subscribe()); + async deleteItems(downloads?: DownloadStatusWrapper[]) { + const storageIds = (downloads || this.screenStateService.selectedEntities).map(d => d.storageId); + await this._downloadControllerService.deleteDownload({ storageIds }).toPromise(); + await this._loadData(); + } + + private async _loadData() { + await this.fileDownloadService.getDownloadStatus().toPromise(); + this.screenStateService.setEntities(this.fileDownloadService.downloads); } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html index 089ebd3e7..7931d54a7 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html @@ -1,11 +1,9 @@
-
- -
+ {{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }} diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html index b6cac2fd1..7cbbd7459 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html @@ -21,13 +21,11 @@
-
- -
+ {{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }} diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html index fd8b8381d..ea9deed98 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html @@ -21,13 +21,11 @@
-
- -
+ {{ diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html index f5394e270..c2bf9a694 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html @@ -12,13 +12,11 @@
-
- -
+ {{ diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html index 6b4280c2d..8391272b9 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html @@ -21,13 +21,11 @@
-
- -
+ {{ diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html index e82bc8d48..64ac343e5 100644 --- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html @@ -6,13 +6,11 @@
-
- -
+ {{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }} diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts index 562efdc83..d58b7a614 100644 --- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts @@ -19,7 +19,7 @@ import { DossiersService } from '../../../dossier/services/dossiers.service'; providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService] }) export class TrashScreenComponent extends BaseListingComponent implements OnInit { - readonly itemSize = 85; + readonly itemSize = 80; protected readonly _primaryKey = 'dossierName'; private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS); diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html index 66eefc267..eafd86902 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html @@ -34,13 +34,11 @@
-
- -
+ {{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html index 8d62c4de0..cee6e3f62 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html @@ -37,13 +37,11 @@
-
- -
+ {{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }} diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html index cb09ccf3e..3b0b92d8f 100644 --- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html +++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html @@ -1,12 +1,23 @@ -
+
+ + {{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }} + +
-
+
+
+ +
+
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts index e1b8b7b32..671e9ad91 100644 --- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core'; import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component'; import { ScreenStateService } from '@shared/services/screen-state.service'; @@ -11,6 +11,9 @@ import { ScreenStateService } from '@shared/services/screen-state.service'; export class TableHeaderComponent { @Input() tableHeaderLabel: string; @Input() tableColConfigs: TableColConfig[]; + @Input() hasEmptyColumn = false; + @Input() selectionEnabled = false; + @Input() bulkActions: TemplateRef; constructor(readonly screenStateService: ScreenStateService) {} } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 1f92dd1a5..2af385c72 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -181,6 +181,10 @@ "error": "Failed to recategorize image: {error}", "success": "Image recategorized." }, + "remove": { + "error": "Failed to remove redaction: {error}", + "success": "Redaction removed!" + }, "request-change-legal-basis": { "error": "Failed to request annotation reason change: {error}", "success": "Annotation reason change requested." @@ -193,6 +197,10 @@ "error": "Failed to request image recategorization: {error}", "success": "Image recategorization requested." }, + "request-remove": { + "error": "Failed to request removal of redaction: {error}", + "success": "Requested to remove redaction!" + }, "suggest": { "error": "Failed to save redaction suggestion: {error}", "success": "Redaction suggestion saved" @@ -200,14 +208,6 @@ "undo": { "error": "Failed to undo: {error}", "success": "Undo successful" - }, - "remove": { - "error": "Failed to remove redaction: {error}", - "success": "Redaction removed!" - }, - "request-remove": { - "error": "Failed to request removal of redaction: {error}", - "success": "Requested to remove redaction!" } } }, @@ -727,6 +727,9 @@ "delete": "Delete", "download": "Download" }, + "bulk": { + "delete": "Delete Selected Downloads" + }, "no-data": { "title": "No active downloads." }, @@ -957,10 +960,10 @@ "error": "Re-processing required", "excluded": "Excluded", "full-reprocess": "Processing", + "indexing": "Processing", "ocr-processing": "OCR Processing", "processing": "Processing", "reprocess": "Processing", - "indexing": "Processing", "unassigned": "Unassigned", "under-approval": "Under Approval", "under-review": "Under Review", diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss index 41380d7de..8f11626e9 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -24,4 +24,8 @@ margin-right: 16px; } } + + &.selection-enabled { + padding-left: 10px; + } } 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 379d333e6..f3cd96c22 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -349,11 +349,6 @@ section.settings { cursor: pointer; } -.select-all-container { - display: flex; - align-items: center; -} - .mr-8 { margin-right: 8px !important; } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index 5c6a6c628..ba093c1d9 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -25,6 +25,10 @@ padding-right: 13px; } } + + &.selection-enabled redaction-table-col-name > div { + padding-left: 10px; + } } cdk-virtual-scroll-viewport {