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

Selection & bulk delete downloads

Browse Source
This commit is contained in:
Adina Țeudan 2021-07-28 15:37:42 +03:00
parent b350b2a933
commit 5ac10ed635
18 changed files with 93 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,10 +4,13 @@
<div class="red-content-inner">
<div class="content-container">
<redaction-table-header
[bulkActions]="bulkActions"
[hasEmptyColumn]="true"
[selectionEnabled]="true"
[tableColConfigs]="tableColConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></redaction-table-header>
>
</redaction-table-header>
<redaction-empty-state
*ngIf="screenStateService.noData$ | async"
@ -18,6 +21,10 @@
<cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
<!-- Table lines -->
<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 }}
@ -50,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"
@ -66,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;
}
}
}

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

@ -43,8 +43,9 @@ export class DownloadsListScreenComponent extends BaseListingComponent<DownloadS
await this.fileDownloadService.performDownload(download);
}
async deleteItem(download: DownloadStatusWrapper) {
await this._downloadControllerService.deleteDownload({ storageIds: [download.storageId] }).toPromise();
async deleteItems(downloads?: DownloadStatusWrapper[]) {
const storageIds = (downloads || this.screenStateService.selectedEntities).map(d => d.storageId);
await this._downloadControllerService.deleteDownload({ storageIds }).toPromise();
await this._loadData();
}

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

15
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"

4
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';
@ -12,6 +12,8 @@ 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>) {}
}

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

@ -727,6 +727,9 @@
"delete": "Delete",
"download": "Download"
},
"bulk": {
"delete": "Delete Selected Downloads"
},
"no-data": {
"title": "No active downloads."
},

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 {