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

Documents trash

Browse Source
This commit is contained in:
Adina Țeudan 2021-09-06 15:05:16 +03:00
parent 9724575358
commit 23cef69647
4 changed files with 91 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
View File

@ -1,59 +1,19 @@
<iqser-table-header
<iqser-table
[bulkActions]="bulkActions"
[headerTemplate]="headerTemplate"
[itemSize]="50"
[noDataText]="'edit-dossier-dialog.deleted-documents.no-data.title' | translate"
[selectionEnabled]="true"
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
>
noDataIcon="red:document"
></iqser-table>
<ng-template #headerTemplate>
<div
[translateParams]="{ hours: deleteRetentionHours }"
[translate]="'edit-dossier-dialog.deleted-documents.instructions'"
class="instructions"
></div>
</iqser-table-header>
<iqser-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'edit-dossier-dialog.deleted-documents.no-data.title' | translate"
icon="red:document"
></iqser-empty-state>
<cdk-virtual-scroll-viewport *ngIf="(entitiesService.noData$ | async) === false" [itemSize]="itemSize" iqserHasScrollbar>
<div *cdkVirtualFor="let file of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
<div (click)="toggleEntitySelected($event, file)" class="selection-column">
<iqser-round-checkbox [active]="isSelected(file)"></iqser-round-checkbox>
</div>
<div class="filename">
<span>{{ file.filename }}</span>
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:pages"></mat-icon>
{{ file.numberOfPages }}
</div>
</div>
<div class="small-label">{{ file.softDeleted | date: 'exactDate' }}</div>
<div>
<div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
<div class="action-buttons">
<iqser-circle-button
(action)="restore([file])"
*ngIf="file.canRestore"
[tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
[type]="circleButtonTypes.dark"
icon="red:put-back"
></iqser-circle-button>
<iqser-circle-button
(action)="hardDelete([file])"
[tooltip]="'edit-dossier-dialog.deleted-documents.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
</ng-template>
<ng-template #bulkActions>
<div class="bulk-actions">
@ -74,3 +34,44 @@
></iqser-circle-button>
</div>
</ng-template>
<ng-template #filenameTemplate let-file="entity">
<div class="cell filename">
<span>{{ file.filename }}</span>
</div>
</ng-template>
<ng-template #pagesTemplate let-file="entity">
<div class="cell small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:pages"></mat-icon>
{{ file.numberOfPages }}
</div>
</div>
</ng-template>
<ng-template #deletedDateTemplate let-file="entity">
<div class="cell small-label">{{ file.softDeleted | date: 'exactDate' }}</div>
</ng-template>
<ng-template #restoreDateTemplate let-file="entity">
<div class="cell">
<div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
<div class="action-buttons">
<iqser-circle-button
(action)="restore([file])"
*ngIf="file.canRestore"
[tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
[type]="circleButtonTypes.dark"
icon="red:put-back"
></iqser-circle-button>
<iqser-circle-button
(action)="hardDelete([file])"
[tooltip]="'edit-dossier-dialog.deleted-documents.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
</div>
</div>
</ng-template>

24
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
View File

@ -7,27 +7,11 @@
text-align: end;
}
cdk-virtual-scroll-viewport {
height: calc(100% - 81px);
:host ::ng-deep iqser-table cdk-virtual-scroll-viewport {
height: calc(100% - 81px) !important;
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 3fr 1fr 2fr 2fr 11px;
.table-item > div {
height: 50px;
&.filename span {
@include line-clamp(1);
}
//&.stats-subtitle > div {
// width: fit-content;
//}
}
}
&.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 3fr 1fr 2fr 2fr;
.cdk-virtual-scroll-content-wrapper .table-item > div.cell.filename span {
@include line-clamp(1);
}
}

46
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
View File

@ -1,7 +1,7 @@
import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, forwardRef, Injector, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
import { DossierWrapper } from '@state/model/dossier.wrapper';
import { CircleButtonTypes, DefaultListingServices, ListingComponent, Listable, LoadingService, TableColumnConfig } from '@iqser/common-ui';
import { CircleButtonTypes, DefaultListingServices, Listable, ListingComponent, LoadingService, TableColumnConfig } from '@iqser/common-ui';
import { FileManagementControllerService, FileStatus, StatusControllerService } from '@redaction/red-ui-http';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import * as moment from 'moment';
@ -22,7 +22,10 @@ interface FileListItem extends FileStatus, Listable {
selector: 'redaction-edit-dossier-deleted-documents',
templateUrl: './edit-dossier-deleted-documents.component.html',
styleUrls: ['./edit-dossier-deleted-documents.component.scss'],
providers: [...DefaultListingServices]
providers: [
...DefaultListingServices,
{ provide: ListingComponent, useExisting: forwardRef(() => EditDossierDeletedDocumentsComponent) }
]
})
export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileListItem> implements EditDossierSectionInterface, OnInit {
@Input() dossierWrapper: DossierWrapper;
@ -30,16 +33,14 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
readonly changed = false;
readonly canRestoreSelected$ = this._canRestoreSelected$;
disabled: boolean;
readonly tableColumnConfigs: TableColumnConfig<FileListItem>[] = [
{ label: _('edit-dossier-dialog.deleted-documents.table-col-names.name') },
{ label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages') },
{ label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on') },
{ label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore') }
];
tableColumnConfigs: TableColumnConfig<FileListItem>[];
readonly tableHeaderLabel = _('edit-dossier-dialog.deleted-documents.table-header.label');
readonly itemSize = 50;
readonly circleButtonTypes = CircleButtonTypes;
readonly deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
@ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
@ViewChild('pagesTemplate', { static: true }) pagesTemplate: TemplateRef<never>;
@ViewChild('deletedDateTemplate', { static: true }) deletedDateTemplate: TemplateRef<never>;
@ViewChild('restoreDateTemplate', { static: true }) restoreDateTemplate: TemplateRef<never>;
protected readonly _primaryKey = 'fileId';
constructor(
@ -80,6 +81,7 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
}
async ngOnInit() {
this._configureTableColumns();
this._loadingService.start();
const files = await this._statusController.getDeletedFileStatus(this.dossierWrapper.dossierId).toPromise();
this.entitiesService.setEntities(this._toListItems(files));
@ -94,6 +96,30 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
this._loadingService.loadWhile(this._restore(files));
}
private _configureTableColumns() {
this.tableColumnConfigs = [
{
label: _('edit-dossier-dialog.deleted-documents.table-col-names.name'),
template: this.filenameTemplate,
width: '3fr'
},
{
label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages'),
template: this.pagesTemplate
},
{
label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on'),
template: this.deletedDateTemplate,
width: '2fr'
},
{
label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore'),
template: this.restoreDateTemplate,
width: '2fr'
}
];
}
private async _restore(files: FileListItem[]): Promise<void> {
const fileIds = files.map(f => f.fileId);
await this._fileManagementController.restoreFiles(fileIds, this.dossierWrapper.dossierId).toPromise();

2
libs/common-ui

@ -1 +1 @@
Subproject commit af46a45b97a42380a316396635fecc58372b78eb
Subproject commit d8379489b9da22ce463db6bcb4b351ec24287e30