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

Downloads listing

Browse Source
This commit is contained in:
Adina Țeudan 2021-09-01 15:44:35 +03:00
parent 3d41e7095a
commit 9724575358
7 changed files with 92 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,70 +6,15 @@
<div class="red-content-inner">
<div class="content-container">
<iqser-table-header
<iqser-table
[actionsTemplate]="actionsTemplate"
[bulkActions]="bulkActions"
[hasEmptyColumn]="true"
[itemSize]="80"
[noDataText]="'downloads-list.no-data.title' | translate"
[selectionEnabled]="true"
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<iqser-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'downloads-list.no-data.title' | translate"
icon="red:download"
></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="itemSize" iqserHasScrollbar>
<!-- Table lines -->
<div *cdkVirtualFor="let download of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
<div (click)="toggleEntitySelected($event, download)" class="selection-column">
<iqser-round-checkbox [active]="isSelected(download)"></iqser-round-checkbox>
</div>
<div>
<div [class.no-bold]="download.lastDownload" class="table-item-title heading">
{{ download.filename }}
</div>
</div>
<div>
<div class="small-label">
{{ download.size }}
</div>
</div>
<div>
<div class="small-label">
{{ download.creationDate | date: 'd MMM. yyyy, hh:mm a' }}
</div>
</div>
<div>
<div class="small-label">
{{ download.status }}
</div>
</div>
<div class="actions-container">
<div [class.active]="download.inProgress" class="action-buttons">
<iqser-circle-button
(action)="downloadItem(download)"
*ngIf="download.status === 'READY' && !download.inProgress"
[tooltip]="'downloads-list.actions.download' | translate"
[type]="circleButtonTypes.dark"
icon="red:download"
></iqser-circle-button>
<iqser-circle-button
(action)="deleteItems([download])"
[tooltip]="'downloads-list.actions.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
<mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
emptyColumnWidth="auto"
noDataIcon="red:download"
></iqser-table>
</div>
</div>
</section>
@ -83,3 +28,56 @@
icon="red:trash"
></iqser-circle-button>
</ng-template>
<ng-template #filenameTemplate let-download="entity">
<div class="cell">
<div [class.no-bold]="download.lastDownload" class="table-item-title heading">
{{ download.filename }}
</div>
</div>
</ng-template>
<ng-template #sizeTemplate let-download="entity">
<div class="cell">
<div class="small-label">
{{ download.size }}
</div>
</div>
</ng-template>
<ng-template #creationDateTemplate let-download="entity">
<div class="cell">
<div class="small-label">
{{ download.creationDate | date: 'd MMM. yyyy, hh:mm a' }}
</div>
</div>
</ng-template>
<ng-template #statusTemplate let-download="entity">
<div class="cell">
<div class="small-label">
{{ download.status }}
</div>
</div>
</ng-template>
<ng-template #actionsTemplate let-download="entity">
<div [class.active]="download.inProgress" class="action-buttons">
<iqser-circle-button
(action)="downloadItem(download)"
*ngIf="download.status === 'READY' && !download.inProgress"
[tooltip]="'downloads-list.actions.download' | translate"
[type]="circleButtonTypes.dark"
icon="red:download"
></iqser-circle-button>
<iqser-circle-button
(action)="deleteItems([download])"
[tooltip]="'downloads-list.actions.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
<mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
</div>
</ng-template>

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

@ -1,23 +1,3 @@
.content-container {
cdk-virtual-scroll-viewport {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 2fr 1fr 1fr 1fr auto 11px;
.table-item {
> div:not(.scrollbar-placeholder) {
padding-left: 10px;
}
}
}
&.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 2fr 1fr 1fr 1fr auto;
}
}
}
}
.page-header .actions {
justify-content: flex-end;
}

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

@ -1,4 +1,4 @@
import { Component, Injector, OnInit } from '@angular/core';
import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } 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';
@ -11,18 +11,16 @@ import { RouterHistoryService } from '@services/router-history.service';
selector: 'redaction-downloads-list-screen',
templateUrl: './downloads-list-screen.component.html',
styleUrls: ['./downloads-list-screen.component.scss'],
providers: [...DefaultListingServices]
providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DownloadsListScreenComponent) }]
})
export class DownloadsListScreenComponent extends ListingComponent<DownloadStatusWrapper> implements OnInit {
readonly itemSize = 80;
readonly circleButtonTypes = CircleButtonTypes;
readonly tableHeaderLabel = _('downloads-list.table-header.title');
readonly tableColumnConfigs: readonly TableColumnConfig<DownloadStatusWrapper>[] = [
{ 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') }
];
tableColumnConfigs: TableColumnConfig<DownloadStatusWrapper>[];
@ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
@ViewChild('sizeTemplate', { static: true }) sizeTemplate: TemplateRef<never>;
@ViewChild('creationDateTemplate', { static: true }) creationDateTemplate: TemplateRef<never>;
@ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<never>;
protected readonly _primaryKey = 'storageId';
constructor(
@ -36,10 +34,13 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
}
async ngOnInit() {
this._loadingService.loadWhile(this._loadData());
this._configureTableColumns();
this._loadingService.start();
await this._loadData();
this.addSubscription = timer(0, 5000).subscribe(async () => {
await this._loadData();
});
this._loadingService.stop();
}
downloadItem(download: DownloadStatusWrapper) {
@ -50,6 +51,15 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
this._loadingService.loadWhile(this._deleteItems(downloads));
}
private _configureTableColumns() {
this.tableColumnConfigs = [
{ label: _('downloads-list.table-col-names.name'), width: '2fr', template: this.filenameTemplate },
{ label: _('downloads-list.table-col-names.size'), template: this.sizeTemplate },
{ label: _('downloads-list.table-col-names.date'), template: this.creationDateTemplate },
{ label: _('downloads-list.table-col-names.status'), template: this.statusTemplate }
];
}
private async _deleteItems(downloads?: DownloadStatusWrapper[]) {
const storageIds = (downloads || this.entitiesService.selected).map(d => d.storageId);
await this._downloadControllerService.deleteDownload({ storageIds }).toPromise();

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

@ -84,7 +84,7 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
}
itemMouseEnterFn = (field: Field) => this.setHoveredColumn.emit(field.csvColumn);
itemMouseLeaveFn = (field: Field) => this.setHoveredColumn.emit();
itemMouseLeaveFn = () => this.setHoveredColumn.emit();
private _configureTableColumns() {
this.tableColumnConfigs = [

6
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
View File

@ -73,7 +73,11 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
template: this.nameTemplate,
width: '2fr'
},
{ label: _('default-colors-screen.table-col-names.color'), class: 'flex-center', template: this.colorTemplate }
{
label: _('default-colors-screen.table-col-names.color'),
class: 'flex-center',
template: this.colorTemplate
}
];
}

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

@ -82,7 +82,11 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
sortByKey: 'name',
template: this.nameTemplate
},
{ label: _('dossier-templates-listing.table-col-names.created-by'), class: 'user-column', template: this.userTemplate },
{
label: _('dossier-templates-listing.table-col-names.created-by'),
class: 'user-column',
template: this.userTemplate
},
{
label: _('dossier-templates-listing.table-col-names.created-on'),
sortByKey: 'dateAdded',

1
apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss
View File

@ -11,6 +11,7 @@
}
mat-icon {
min-width: 16px;
width: 16px;
height: 16px;
fill-opacity: 0.6;