Trash screen
This commit is contained in:
Adina Țeudan
parent
962542a4ec
commit
3d41e7095a
@ -8,8 +8,7 @@
|
||||
[selectionEnabled]="true"
|
||||
emptyColumnWidth="auto"
|
||||
noDataIcon="red:attribute"
|
||||
>
|
||||
</iqser-table>
|
||||
></iqser-table>
|
||||
|
||||
<ng-template #bulkActions>
|
||||
<ng-container *ngIf="entitiesService.areSomeSelected$ | async">
|
||||
|
||||
@ -32,8 +32,7 @@
|
||||
[showNoDataButton]="currentUser.isAdmin"
|
||||
emptyColumnWidth="1fr"
|
||||
noDataIcon="red:attribute"
|
||||
>
|
||||
</iqser-table>
|
||||
></iqser-table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -29,8 +29,7 @@
|
||||
[selectionEnabled]="true"
|
||||
emptyColumnWidth="1fr"
|
||||
noDataIcon="red:attribute"
|
||||
>
|
||||
</iqser-table>
|
||||
></iqser-table>
|
||||
</div>
|
||||
|
||||
<div class="right-container"></div>
|
||||
|
||||
@ -9,80 +9,14 @@
|
||||
|
||||
<div class="red-content-inner">
|
||||
<div class="content-container">
|
||||
<iqser-table-header
|
||||
<iqser-table
|
||||
[bulkActions]="bulkActions"
|
||||
[itemSize]="80"
|
||||
[noDataText]="'trash.no-data.title' | translate"
|
||||
[noMatchText]="'trash.no-match.title' | translate"
|
||||
[selectionEnabled]="true"
|
||||
[tableColumnConfigs]="tableColumnConfigs"
|
||||
[tableHeaderLabel]="tableHeaderLabel"
|
||||
></iqser-table-header>
|
||||
|
||||
<iqser-empty-state
|
||||
*ngIf="entitiesService.noData$ | async"
|
||||
[text]="'trash.no-data.title' | translate"
|
||||
icon="red:template"
|
||||
></iqser-empty-state>
|
||||
|
||||
<iqser-empty-state *ngIf="noMatch$ | async" [text]="'trash.no-match.title' | translate"></iqser-empty-state>
|
||||
|
||||
<cdk-virtual-scroll-viewport [itemSize]="itemSize" iqserHasScrollbar>
|
||||
<div *cdkVirtualFor="let entity of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
|
||||
<div (click)="toggleEntitySelected($event, entity)" class="selection-column">
|
||||
<iqser-round-checkbox [active]="isSelected(entity)"></iqser-round-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="filename">
|
||||
<div [matTooltip]="entity.dossierName" class="table-item-title heading" matTooltipPosition="above">
|
||||
{{ entity.dossierName }}
|
||||
</div>
|
||||
<div class="small-label stats-subtitle">
|
||||
<div>
|
||||
<mat-icon svgIcon="red:user"></mat-icon>
|
||||
{{ entity.memberIds.length }}
|
||||
</div>
|
||||
<div>
|
||||
<mat-icon svgIcon="red:calendar"></mat-icon>
|
||||
{{ entity.date | date: 'mediumDate' }}
|
||||
</div>
|
||||
<div *ngIf="entity.dueDate">
|
||||
<mat-icon svgIcon="red:lightning"></mat-icon>
|
||||
{{ entity.dueDate | date: 'mediumDate' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-column">
|
||||
<redaction-initials-avatar [userId]="entity.ownerId" [withName]="true"></redaction-initials-avatar>
|
||||
</div>
|
||||
|
||||
<div class="small-label">
|
||||
{{ entity.softDeletedTime | date: 'd MMM. yyyy, hh:mm a' }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="small-label">
|
||||
{{ entity.restoreDate | date: 'timeFromNow' }}
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<iqser-circle-button
|
||||
(action)="restore([entity])"
|
||||
*ngIf="entity.canRestore"
|
||||
[tooltip]="'trash.action.restore' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="red:put-back"
|
||||
></iqser-circle-button>
|
||||
|
||||
<iqser-circle-button
|
||||
(action)="hardDelete([entity])"
|
||||
[tooltip]="'trash.action.delete' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="red:trash"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scrollbar-placeholder"></div>
|
||||
</div>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
noDataIcon="red:template"
|
||||
></iqser-table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -106,3 +40,61 @@
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #filenameTemplate let-entity="entity">
|
||||
<div class="cell filename">
|
||||
<div [matTooltip]="entity.dossierName" class="table-item-title heading" matTooltipPosition="above">
|
||||
{{ entity.dossierName }}
|
||||
</div>
|
||||
<div class="small-label stats-subtitle">
|
||||
<div>
|
||||
<mat-icon svgIcon="red:user"></mat-icon>
|
||||
{{ entity.memberIds.length }}
|
||||
</div>
|
||||
<div>
|
||||
<mat-icon svgIcon="red:calendar"></mat-icon>
|
||||
{{ entity.date | date: 'mediumDate' }}
|
||||
</div>
|
||||
<div *ngIf="entity.dueDate">
|
||||
<mat-icon svgIcon="red:lightning"></mat-icon>
|
||||
{{ entity.dueDate | date: 'mediumDate' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #ownerTemplate let-entity="entity">
|
||||
<div class="cell user-column">
|
||||
<redaction-initials-avatar [userId]="entity.ownerId" [withName]="true"></redaction-initials-avatar>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #deletedTimeTemplate let-entity="entity">
|
||||
<div class="cell small-label">
|
||||
{{ entity.softDeletedTime | date: 'd MMM. yyyy, hh:mm a' }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #restoreDateTemplate let-entity="entity">
|
||||
<div class="cell">
|
||||
<div class="small-label">
|
||||
{{ entity.restoreDate | date: 'timeFromNow' }}
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<iqser-circle-button
|
||||
(action)="restore([entity])"
|
||||
*ngIf="entity.canRestore"
|
||||
[tooltip]="'trash.action.restore' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="red:put-back"
|
||||
></iqser-circle-button>
|
||||
|
||||
<iqser-circle-button
|
||||
(action)="hardDelete([entity])"
|
||||
[tooltip]="'trash.action.delete' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="red:trash"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -8,32 +8,3 @@
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
cdk-virtual-scroll-viewport {
|
||||
::ng-deep.cdk-virtual-scroll-content-wrapper {
|
||||
grid-template-columns: auto 1fr 1fr 1fr 1fr 11px;
|
||||
|
||||
.table-item {
|
||||
> div:not(.scrollbar-placeholder) {
|
||||
padding-left: 10px;
|
||||
|
||||
.table-item-title {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
height: 80px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-scrollbar:hover {
|
||||
::ng-deep.cdk-virtual-scroll-content-wrapper {
|
||||
grid-template-columns: auto 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
|
||||
import { Dossier } from '@redaction/red-ui-http';
|
||||
import { CircleButtonTypes, DefaultListingServices, ListingComponent, LoadingService, Listable, TableColumnConfig } from '@iqser/common-ui';
|
||||
import { CircleButtonTypes, DefaultListingServices, Listable, ListingComponent, LoadingService, TableColumnConfig } from '@iqser/common-ui';
|
||||
import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
|
||||
import * as moment from 'moment';
|
||||
import { DossiersService } from '../../../dossier/services/dossiers.service';
|
||||
@ -21,31 +21,21 @@ interface DossierListItem extends Dossier, Listable {
|
||||
templateUrl: './trash-screen.component.html',
|
||||
styleUrls: ['./trash-screen.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [...DefaultListingServices, DossiersService]
|
||||
providers: [
|
||||
...DefaultListingServices,
|
||||
DossiersService,
|
||||
{ provide: ListingComponent, useExisting: forwardRef(() => TrashScreenComponent) }
|
||||
]
|
||||
})
|
||||
export class TrashScreenComponent extends ListingComponent<DossierListItem> implements OnInit {
|
||||
readonly itemSize = 80;
|
||||
readonly circleButtonTypes = CircleButtonTypes;
|
||||
readonly tableHeaderLabel = _('trash.table-header.title');
|
||||
readonly canRestoreSelected$ = this._canRestoreSelected$;
|
||||
readonly tableColumnConfigs: readonly TableColumnConfig<DossierListItem>[] = [
|
||||
{
|
||||
label: _('trash.table-col-names.name'),
|
||||
sortByKey: 'dossierName'
|
||||
},
|
||||
{
|
||||
label: _('trash.table-col-names.owner'),
|
||||
class: 'user-column'
|
||||
},
|
||||
{
|
||||
label: _('trash.table-col-names.deleted-on'),
|
||||
sortByKey: 'softDeletedTime'
|
||||
},
|
||||
{
|
||||
label: _('trash.table-col-names.time-to-restore'),
|
||||
sortByKey: 'softDeletedTime'
|
||||
}
|
||||
];
|
||||
tableColumnConfigs: TableColumnConfig<DossierListItem>[];
|
||||
@ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
|
||||
@ViewChild('ownerTemplate', { static: true }) ownerTemplate: TemplateRef<never>;
|
||||
@ViewChild('deletedTimeTemplate', { static: true }) deletedTimeTemplate: TemplateRef<never>;
|
||||
@ViewChild('restoreDateTemplate', { static: true }) restoreDateTemplate: TemplateRef<never>;
|
||||
protected readonly _primaryKey = 'dossierName';
|
||||
private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
|
||||
|
||||
@ -68,6 +58,7 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
|
||||
}
|
||||
|
||||
async ngOnInit(): Promise<void> {
|
||||
this._configureTableColumns();
|
||||
this._loadingService.start();
|
||||
await this._loadDossiersData();
|
||||
this._loadingService.stop();
|
||||
@ -96,6 +87,31 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
|
||||
this._loadingService.loadWhile(this._restore(dossiers));
|
||||
}
|
||||
|
||||
private _configureTableColumns() {
|
||||
this.tableColumnConfigs = [
|
||||
{
|
||||
label: _('trash.table-col-names.name'),
|
||||
sortByKey: 'dossierName',
|
||||
template: this.filenameTemplate
|
||||
},
|
||||
{
|
||||
label: _('trash.table-col-names.owner'),
|
||||
class: 'user-column',
|
||||
template: this.ownerTemplate
|
||||
},
|
||||
{
|
||||
label: _('trash.table-col-names.deleted-on'),
|
||||
sortByKey: 'softDeletedTime',
|
||||
template: this.deletedTimeTemplate
|
||||
},
|
||||
{
|
||||
label: _('trash.table-col-names.time-to-restore'),
|
||||
sortByKey: 'softDeletedTime',
|
||||
template: this.restoreDateTemplate
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
private _getRestoreDate(softDeletedTime: string): string {
|
||||
return moment(softDeletedTime).add(this._deleteRetentionHours, 'hours').toISOString();
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user