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>
<div class="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>
<redaction-page-header [showCloseButton]="true"></redaction-page-header>
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">
<span class="all-caps-label">
{{ 'downloads-list.table-header.title' | translate: { length: fileDownloadService.downloads.length } }}
</span>
</div>
<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-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-table-header
[bulkActions]="bulkActions"
[hasEmptyColumn]="true"
[selectionEnabled]="true"
[tableColConfigs]="tableColConfigs"
[tableHeaderLabel]="tableHeaderLabel"
>
</redaction-table-header>
<redaction-empty-state
*ngIf="noData"
*ngIf="screenStateService.noData$ | async"
[text]="'downloads-list.no-data.title' | translate"
icon="red:download"
></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
<!-- 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 [class.no-bold]="download.lastDownload" class="table-item-title heading">
{{ download.filename }}
@ -68,7 +57,7 @@
</redaction-circle-button>
<redaction-circle-button
(action)="deleteItem(download)"
(action)="deleteItems([download])"
[tooltip]="'downloads-list.actions.delete' | translate"
icon="red:trash"
type="dark-bg"
@ -84,3 +73,13 @@
</div>
</div>
</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 {
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;
}
}
}

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 { 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<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(
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);
}
}

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="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<span class="all-caps-label">
{{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }}
</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="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<span class="all-caps-label">
{{ '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 *ngIf="(screenStateService.noData$ | async) === false" class="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<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="content-container">
<div class="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<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="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<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="content-container">
<div class="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<span class="all-caps-label">
{{ '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]
})
export class TrashScreenComponent extends BaseListingComponent<Dossier> implements OnInit {
readonly itemSize = 85;
readonly itemSize = 80;
protected readonly _primaryKey = 'dossierName';
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.extended]="collapsedDetails" class="content-container">
<div class="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<span class="all-caps-label">
{{ '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.extended]="collapsedDetails" class="content-container">
<div class="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
</div>
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
<span class="all-caps-label">
{{ '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">
{{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}
</span>
<ng-container *ngIf="bulkActions" [ngTemplateOutlet]="bulkActions"></ng-container>
<redaction-quick-filters></redaction-quick-filters>
</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
*ngFor="let config of tableColConfigs"
[class]="config.class"
@ -18,5 +29,7 @@
[withSort]="config.withSort"
></redaction-table-col-name>
<div *ngIf="hasEmptyColumn"></div>
<div class="scrollbar-placeholder"></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 { ScreenStateService } from '@shared/services/screen-state.service';
@ -11,6 +11,9 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
export class TableHeaderComponent<T> {
@Input() tableHeaderLabel: string;
@Input() tableColConfigs: TableColConfig[];
@Input() hasEmptyColumn = false;
@Input() selectionEnabled = false;
@Input() bulkActions: TemplateRef<any>;
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}",
"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",

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

@ -24,4 +24,8 @@
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;
}
.select-all-container {
display: flex;
align-items: center;
}
.mr-8 {
margin-right: 8px !important;
}

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

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