Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Pull request #255: RED-1837

Browse Source 
Merge in RED/ui from RED-1837 to master

* commit '5ac10ed63537ad8e5f174165f88bdbf3dbd4374f':
  Selection & bulk delete downloads
  Downloads listing extends base listing
This commit is contained in:
Adina Teudan 2021-07-28 14:43:22 +02:00
commit 8eda919cef
18 changed files with 146 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
View File

@ -1,41 +1,30 @@
<section> <section>
<div class="page-header"> <redaction-page-header [showCloseButton]="true"></redaction-page-header>
<div class="actions flex-1">
<redaction-circle-button
[tooltip]="'common.close' | translate"
icon="red:close"
redactionNavigateLastDossiersScreen
tooltipPosition="below"
></redaction-circle-button>
</div>
</div>
<div class="red-content-inner"> <div class="red-content-inner">
<div class="content-container"> <div class="content-container">
<div class="header-item"> <redaction-table-header
<span class="all-caps-label"> [bulkActions]="bulkActions"
{{ 'downloads-list.table-header.title' | translate: { length: fileDownloadService.downloads.length } }} [hasEmptyColumn]="true"
</span> [selectionEnabled]="true"
</div> [tableColConfigs]="tableColConfigs"
[tableHeaderLabel]="tableHeaderLabel"
<div [class.no-data]="noData" class="table-header" redactionSyncWidth="table-item"> >
<redaction-table-col-name [label]="'downloads-list.table-col-names.name' | translate"></redaction-table-col-name> </redaction-table-header>
<redaction-table-col-name [label]="'downloads-list.table-col-names.size' | translate"></redaction-table-col-name>
<redaction-table-col-name [label]="'downloads-list.table-col-names.date' | translate"></redaction-table-col-name>
<redaction-table-col-name [label]="'downloads-list.table-col-names.status' | translate"></redaction-table-col-name>
<div></div>
<div class="scrollbar-placeholder"></div>
</div>
<redaction-empty-state <redaction-empty-state
*ngIf="noData" *ngIf="screenStateService.noData$ | async"
[text]="'downloads-list.no-data.title' | translate" [text]="'downloads-list.no-data.title' | translate"
icon="red:download" icon="red:download"
></redaction-empty-state> ></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar> <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
<!-- Table lines --> <!-- Table lines -->
<div *cdkVirtualFor="let download of fileDownloadService.downloads" class="table-item"> <div *cdkVirtualFor="let download of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
<div (click)="toggleEntitySelected($event, download)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(download)"></redaction-round-checkbox>
</div>
<div> <div>
<div [class.no-bold]="download.lastDownload" class="table-item-title heading"> <div [class.no-bold]="download.lastDownload" class="table-item-title heading">
{{ download.filename }} {{ download.filename }}
@ -68,7 +57,7 @@
</redaction-circle-button> </redaction-circle-button>
<redaction-circle-button <redaction-circle-button
(action)="deleteItem(download)" (action)="deleteItems([download])"
[tooltip]="'downloads-list.actions.delete' | translate" [tooltip]="'downloads-list.actions.delete' | translate"
icon="red:trash" icon="red:trash"
type="dark-bg" type="dark-bg"
@ -84,3 +73,13 @@
</div> </div>
</div> </div>
</section> </section>
<ng-template #bulkActions>
<redaction-circle-button
(action)="deleteItems()"
*ngIf="screenStateService.areSomeEntitiesSelected$ | async"
[tooltip]="'downloads-list.bulk.delete' | translate"
icon="red:trash"
type="dark-bg"
></redaction-circle-button>
</ng-template>

6
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
View File

@ -1,18 +1,18 @@
.content-container { .content-container {
cdk-virtual-scroll-viewport { cdk-virtual-scroll-viewport {
::ng-deep.cdk-virtual-scroll-content-wrapper { ::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 { .table-item {
> div:not(.scrollbar-placeholder) { > div:not(.scrollbar-placeholder) {
padding-left: 24px; padding-left: 10px;
} }
} }
} }
&.has-scrollbar:hover { &.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper { ::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: 2fr 1fr 1fr 1fr auto; grid-template-columns: auto 2fr 1fr 1fr 1fr auto;
} }
} }
} }

50
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
View File

@ -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 { FileDownloadService } from '@upload-download/services/file-download.service';
import { DownloadStatusWrapper } from '@upload-download/model/download-status.wrapper'; import { DownloadStatusWrapper } from '@upload-download/model/download-status.wrapper';
import { DownloadControllerService } from '@redaction/red-ui-http'; 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({ @Component({
selector: 'redaction-downloads-list-screen', selector: 'redaction-downloads-list-screen',
templateUrl: './downloads-list-screen.component.html', 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<DownloadStatusWrapper> 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( constructor(
readonly fileDownloadService: FileDownloadService, readonly fileDownloadService: FileDownloadService,
private readonly _downloadControllerService: DownloadControllerService private readonly _downloadControllerService: DownloadControllerService,
) {} protected readonly _injector: Injector
) {
get noData(): boolean { super(_injector);
return this.fileDownloadService.downloads.length === 0;
} }
ngOnInit(): void { async ngOnInit() {
this.fileDownloadService.getDownloadStatus().subscribe(); await this._loadData();
} }
async downloadItem(download: DownloadStatusWrapper) { async downloadItem(download: DownloadStatusWrapper) {
await this.fileDownloadService.performDownload(download); await this.fileDownloadService.performDownload(download);
} }
deleteItem(download: DownloadStatusWrapper) { async deleteItems(downloads?: DownloadStatusWrapper[]) {
this._downloadControllerService const storageIds = (downloads || this.screenStateService.selectedEntities).map(d => d.storageId);
.deleteDownload({ storageIds: [download.storageId] }) await this._downloadControllerService.deleteDownload({ storageIds }).toPromise();
.subscribe(() => this.fileDownloadService.getDownloadStatus().subscribe()); await this._loadData();
}
private async _loadData() {
await this.fileDownloadService.getDownloadStatus().toPromise();
this.screenStateService.setEntities(this.fileDownloadService.downloads);
} }
} }

12
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
View File

@ -1,11 +1,9 @@
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }} {{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }}
</span> </span>

12
apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
View File

@ -21,13 +21,11 @@
<div class="content-container"> <div class="content-container">
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }} {{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}

12
apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
View File

@ -21,13 +21,11 @@
<div class="content-container"> <div class="content-container">
<div *ngIf="(screenStateService.noData$ | async) === false" class="header-item"> <div *ngIf="(screenStateService.noData$ | async) === false" class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ {{

12
apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
View File

@ -12,13 +12,11 @@
<div class="red-content-inner"> <div class="red-content-inner">
<div class="content-container"> <div class="content-container">
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ {{

12
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
View File

@ -21,13 +21,11 @@
<div class="content-container"> <div class="content-container">
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ {{

12
apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
View File

@ -6,13 +6,11 @@
<div class="red-content-inner"> <div class="red-content-inner">
<div class="content-container"> <div class="content-container">
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }} {{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}

2
apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
View File

@ -19,7 +19,7 @@ import { DossiersService } from '../../../dossier/services/dossiers.service';
providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService] providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService]
}) })
export class TrashScreenComponent extends BaseListingComponent<Dossier> implements OnInit { export class TrashScreenComponent extends BaseListingComponent<Dossier> implements OnInit {
readonly itemSize = 85; readonly itemSize = 80;
protected readonly _primaryKey = 'dossierName'; protected readonly _primaryKey = 'dossierName';
private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS); private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);

12
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -34,13 +34,11 @@
<div class="red-content-inner"> <div class="red-content-inner">
<div [class.extended]="collapsedDetails" class="content-container"> <div [class.extended]="collapsedDetails" class="content-container">
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }} {{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}

12
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
View File

@ -37,13 +37,11 @@
<div class="red-content-inner"> <div class="red-content-inner">
<div [class.extended]="collapsedDetails" class="content-container"> <div [class.extended]="collapsedDetails" class="content-container">
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <redaction-round-checkbox
<redaction-round-checkbox (click)="toggleSelectAll()"
(click)="toggleSelectAll()" [active]="screenStateService.areAllEntitiesSelected$ | async"
[active]="screenStateService.areAllEntitiesSelected$ | async" [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async" ></redaction-round-checkbox>
></redaction-round-checkbox>
</div>
<span class="all-caps-label"> <span class="all-caps-label">
{{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }} {{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}

17
apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
View File

@ -1,12 +1,23 @@
<div class="header-item"> <div [class.selection-enabled]="selectionEnabled" class="header-item">
<redaction-round-checkbox
(click)="screenStateService.selectEntities()"
*ngIf="selectionEnabled"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<span class="all-caps-label"> <span class="all-caps-label">
{{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }} {{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}
</span> </span>
<ng-container *ngIf="bulkActions" [ngTemplateOutlet]="bulkActions"></ng-container>
<redaction-quick-filters></redaction-quick-filters> <redaction-quick-filters></redaction-quick-filters>
</div> </div>
<div class="table-header" redactionSyncWidth="table-item"> <div [class.selection-enabled]="selectionEnabled" class="table-header" redactionSyncWidth="table-item">
<div *ngIf="selectionEnabled" class="select-oval-placeholder"></div>
<redaction-table-col-name <redaction-table-col-name
*ngFor="let config of tableColConfigs" *ngFor="let config of tableColConfigs"
[class]="config.class" [class]="config.class"
@ -18,5 +29,7 @@
[withSort]="config.withSort" [withSort]="config.withSort"
></redaction-table-col-name> ></redaction-table-col-name>
<div *ngIf="hasEmptyColumn"></div>
<div class="scrollbar-placeholder"></div> <div class="scrollbar-placeholder"></div>
</div> </div>

5
apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
View File

@ -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 { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
import { ScreenStateService } from '@shared/services/screen-state.service'; import { ScreenStateService } from '@shared/services/screen-state.service';
@ -11,6 +11,9 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
export class TableHeaderComponent<T> { export class TableHeaderComponent<T> {
@Input() tableHeaderLabel: string; @Input() tableHeaderLabel: string;
@Input() tableColConfigs: TableColConfig[]; @Input() tableColConfigs: TableColConfig[];
@Input() hasEmptyColumn = false;
@Input() selectionEnabled = false;
@Input() bulkActions: TemplateRef<any>;
constructor(readonly screenStateService: ScreenStateService<T>) {} constructor(readonly screenStateService: ScreenStateService<T>) {}
} }

21
apps/red-ui/src/assets/i18n/en.json
View File

@ -181,6 +181,10 @@
"error": "Failed to recategorize image: {error}", "error": "Failed to recategorize image: {error}",
"success": "Image recategorized." "success": "Image recategorized."
}, },
"remove": {
"error": "Failed to remove redaction: {error}",
"success": "Redaction removed!"
},
"request-change-legal-basis": { "request-change-legal-basis": {
"error": "Failed to request annotation reason change: {error}", "error": "Failed to request annotation reason change: {error}",
"success": "Annotation reason change requested." "success": "Annotation reason change requested."
@ -193,6 +197,10 @@
"error": "Failed to request image recategorization: {error}", "error": "Failed to request image recategorization: {error}",
"success": "Image recategorization requested." "success": "Image recategorization requested."
}, },
"request-remove": {
"error": "Failed to request removal of redaction: {error}",
"success": "Requested to remove redaction!"
},
"suggest": { "suggest": {
"error": "Failed to save redaction suggestion: {error}", "error": "Failed to save redaction suggestion: {error}",
"success": "Redaction suggestion saved" "success": "Redaction suggestion saved"
@ -200,14 +208,6 @@
"undo": { "undo": {
"error": "Failed to undo: {error}", "error": "Failed to undo: {error}",
"success": "Undo successful" "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", "delete": "Delete",
"download": "Download" "download": "Download"
}, },
"bulk": {
"delete": "Delete Selected Downloads"
},
"no-data": { "no-data": {
"title": "No active downloads." "title": "No active downloads."
}, },
@ -957,10 +960,10 @@
"error": "Re-processing required", "error": "Re-processing required",
"excluded": "Excluded", "excluded": "Excluded",
"full-reprocess": "Processing", "full-reprocess": "Processing",
"indexing": "Processing",
"ocr-processing": "OCR Processing", "ocr-processing": "OCR Processing",
"processing": "Processing", "processing": "Processing",
"reprocess": "Processing", "reprocess": "Processing",
"indexing": "Processing",
"unassigned": "Unassigned", "unassigned": "Unassigned",
"under-approval": "Under Approval", "under-approval": "Under Approval",
"under-review": "Under Review", "under-review": "Under Review",

4
apps/red-ui/src/assets/styles/red-grid.scss
View File

@ -24,4 +24,8 @@
margin-right: 16px; margin-right: 16px;
} }
} }
&.selection-enabled {
padding-left: 10px;
}
} }

5
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -349,11 +349,6 @@ section.settings {
cursor: pointer; cursor: pointer;
} }
.select-all-container {
display: flex;
align-items: center;
}
.mr-8 { .mr-8 {
margin-right: 8px !important; margin-right: 8px !important;
} }

4
apps/red-ui/src/assets/styles/red-tables.scss
View File

@ -25,6 +25,10 @@
padding-right: 13px; padding-right: 13px;
} }
} }
&.selection-enabled redaction-table-col-name > div {
padding-left: 10px;
}
} }
cdk-virtual-scroll-viewport { cdk-virtual-scroll-viewport {