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

add separate components for file name column and added date column

Browse Source
This commit is contained in:
Dan Percic 2021-11-17 00:17:59 +02:00
parent 82271be7cc
commit 0d4552876b
19 changed files with 119 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
View File

@ -39,7 +39,7 @@
icon="red:undo"
></iqser-circle-button>
<redaction-file-download-btn [dossier]="dossier" [files]="selectedFiles"></redaction-file-download-btn>
<redaction-file-download-btn [files]="selectedFiles"></redaction-file-download-btn>
<!-- Approved-->
<iqser-circle-button

6
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.html
View File

@ -5,11 +5,7 @@
[showCloseButton]="true"
[viewModeSelection]="viewModeSelection"
>
<redaction-file-download-btn
[dossier]="dossier"
[files]="entitiesService.all$ | async"
tooltipPosition="below"
></redaction-file-download-btn>
<redaction-file-download-btn [files]="entitiesService.all$ | async" tooltipPosition="below"></redaction-file-download-btn>
<iqser-circle-button
(action)="exportFilesAsCSV()"

3
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.html Normal file
View File

@ -0,0 +1,3 @@
<div [class.error]="file.isError" class="small-label">
{{ file.added | date: 'd MMM. yyyy, hh:mm a' }}
</div>

0
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.scss Normal file
View File

12
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts Normal file
View File

@ -0,0 +1,12 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { File } from '@red/domain';
@Component({
selector: 'redaction-added-column',
templateUrl: './added-column.component.html',
styleUrls: ['./added-column.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddedColumnComponent {
@Input() file: File;
}

15
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html Normal file
View File

@ -0,0 +1,15 @@
<div>
<div [class.error]="file.isError" [matTooltip]="file.filename" class="table-item-title" matTooltipPosition="above">
{{ file.filename }}
</div>
</div>
<div *ngIf="file.primaryAttribute" class="small-label">
<div class="primary-attribute">
<span [matTooltip]="file.primaryAttribute" matTooltipPosition="above">
{{ file.primaryAttribute }}
</span>
</div>
</div>
<redaction-file-stats [file]="file"></redaction-file-stats>

10
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss Normal file
View File

@ -0,0 +1,10 @@
@use 'common-mixins';
.table-item-title {
max-width: 25vw;
}
.primary-attribute {
padding-top: 6px;
@include common-mixins.line-clamp(1);
}

12
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts Normal file
View File

@ -0,0 +1,12 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { File } from '@red/domain';
@Component({
selector: 'redaction-file-name-column',
templateUrl: './file-name-column.component.html',
styleUrls: ['./file-name-column.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileNameColumnComponent {
@Input() file: File;
}

0
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html → apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.html
View File

0
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.scss → apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.scss
View File

0
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts → apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.ts
View File

45
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
View File

@ -1,24 +1,9 @@
<div class="cell">
<div>
<div [class.error]="file.isError" [matTooltip]="file.filename" class="table-item-title" matTooltipPosition="above">
{{ file.filename }}
</div>
</div>
<div *ngIf="file.primaryAttribute" class="small-label">
<div class="primary-attribute">
<span [matTooltip]="file.primaryAttribute" matTooltipPosition="above">
{{ file.primaryAttribute }}
</span>
</div>
</div>
<redaction-file-stats [file]="file"></redaction-file-stats>
<redaction-file-name-column [file]="file"></redaction-file-name-column>
</div>
<div class="cell">
<div [class.error]="file.isError" class="small-label">
{{ file.added | date: 'd MMM. yyyy, hh:mm a' }}
</div>
<redaction-added-column [file]="file"></redaction-added-column>
</div>
<div *ngFor="let config of displayedAttributes" class="cell">
@ -30,22 +15,24 @@
<redaction-annotation-icon color="#dd4d50" label="A" type="square"></redaction-annotation-icon>
</div>
<div *ngIf="!file.isError" class="cell">
<redaction-file-workload-column [file]="file"></redaction-file-workload-column>
</div>
<ng-container *ngIf="!file.isError">
<div class="cell">
<redaction-file-workload-column [file]="file"></redaction-file-workload-column>
</div>
<div *ngIf="!file.isError" class="user-column cell">
<redaction-initials-avatar [user]="file.currentReviewer" [withName]="true"></redaction-initials-avatar>
</div>
<div class="user-column cell">
<redaction-initials-avatar [user]="file.currentReviewer" [withName]="true"></redaction-initials-avatar>
</div>
<div *ngIf="!file.isError" class="cell">
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="iqser:pages"></mat-icon>
{{ file.numberOfPages }}
<div class="cell">
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="iqser:pages"></mat-icon>
{{ file.numberOfPages }}
</div>
</div>
</div>
</div>
</ng-container>
<div [class.extend-cols]="file.isError" class="status-container cell">
<div *ngIf="file.isError" class="small-label error" translate="dossier-overview.file-listing.file-entry.file-error"></div>

49
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss
View File

@ -1,41 +1,30 @@
@use 'common-mixins';
@use 'variables';
.cell {
.error {
color: variables.$primary;
}
.error {
color: variables.$primary;
}
.table-item-title {
max-width: 25vw;
}
.extend-cols {
grid-column-end: span 3;
align-items: flex-end;
}
.primary-attribute {
padding-top: 6px;
@include common-mixins.line-clamp(1);
}
.status-container {
align-items: flex-end;
&.extend-cols {
grid-column-end: span 3;
align-items: flex-end;
}
.status-wrapper {
display: flex;
align-items: center;
&.status-container {
align-items: flex-end;
> *:not(:last-child) {
margin-right: 16px;
}
.status-wrapper {
display: flex;
align-items: center;
> *:not(:last-child) {
margin-right: 16px;
}
.spinning > mat-icon {
height: 10px;
width: 10px;
opacity: 0.5;
}
.spinning > mat-icon {
height: 10px;
width: 10px;
opacity: 0.5;
}
}
}

10
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
import { SharedModule } from '@shared/shared.module';
import { IqserIconsModule } from '@iqser/common-ui';
import { TranslateModule } from '@ngx-translate/core';
@ -11,13 +11,15 @@ import { DossierDetailsStatsComponent } from './components/dossier-details-stats
import { TableItemComponent } from './components/table-item/table-item.component';
import { ConfigService } from './config.service';
import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
import { FileWorkloadColumnComponent } from './components/file-workload-column/file-workload-column.component';
import { FileWorkloadColumnComponent } from './components/table-item/file-workload-column/file-workload-column.component';
import { FileStatsComponent } from './components/file-stats/file-stats.component';
import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
import { ScreenHeaderComponent } from './components/screen-header/screen-header.component';
import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component';
import { FileNameColumnComponent } from './components/table-item/file-name-column/file-name-column.component';
import { AddedColumnComponent } from './components/table-item/added-column/added-column.component';
const routes = [
const routes: Routes = [
{
path: '',
component: DossierOverviewScreenComponent,
@ -40,6 +42,8 @@ const routes = [
WorkflowItemComponent,
ScreenHeaderComponent,
ViewModeSelectionComponent,
FileNameColumnComponent,
AddedColumnComponent,
],
providers: [ConfigService],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],

12
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
View File

@ -16,31 +16,31 @@
[bulkActions]="bulkActions"
[hasScrollButton]="true"
[itemSize]="80"
[noDataButtonIcon]="'iqser:upload'"
[noDataButtonLabel]="'dossier-overview.no-data.action' | translate"
[noDataIcon]="'iqser:document'"
[noDataText]="'dossier-overview.no-data.title' | translate"
[noMatchText]="'dossier-overview.no-match.title' | translate"
[selectionEnabled]="true"
[showNoDataButton]="true"
[tableItemClasses]="{ disabled: disabledFn, 'last-opened': lastOpenedFn }"
noDataButtonIcon="iqser:upload"
noDataIcon="iqser:document"
></iqser-table>
<iqser-workflow
(addElement)="fileInput.click()"
(noDataAction)="fileInput.click()"
*ngIf="mode === listingModes.workflow"
[addElementIcon]="'iqser:upload'"
[config]="workflowConfig"
[itemClasses]="{ disabled: disabledFn }"
[itemHeight]="'56px'"
[itemTemplate]="workflowItemTemplate"
[noDataButtonIcon]="'iqser:upload'"
[noDataButtonLabel]="'dossier-overview.no-data.action' | translate"
[noDataIcon]="'iqser:document'"
[noDataText]="'dossier-overview.no-data.title' | translate"
[showNoDataButton]="true"
addElementColumn="UNASSIGNED"
addElementIcon="iqser:upload"
itemHeight="56px"
noDataButtonIcon="iqser:upload"
noDataIcon="iqser:document"
></iqser-workflow>
</div>

6
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
View File

@ -17,9 +17,5 @@
icon="iqser:refresh"
></iqser-circle-button>
<redaction-file-download-btn
[dossier]="dossier"
[files]="filesMapService.get(dossier.id)"
[type]="circleButtonTypes.dark"
></redaction-file-download-btn>
<redaction-file-download-btn [files]="filesMapService.get(dossier.id)" [type]="circleButtonTypes.dark"></redaction-file-download-btn>
</div>

3
apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html
View File

@ -2,8 +2,8 @@
<ng-container *ngTemplateOutlet="actions"></ng-container>
<div
*ngIf="showStatusBar && file.isProcessing"
[matTooltip]="'file-status.processing' | translate"
class="spinning"
matTooltip="{{ 'file-status.processing' | translate }}"
matTooltipPosition="above"
>
<mat-icon svgIcon="red:reanalyse"></mat-icon>
@ -55,7 +55,6 @@
<!-- download redacted file-->
<redaction-file-download-btn
[dossier]="dossier$ | async"
[files]="[file]"
[tooltipClass]="'small'"
[tooltipPosition]="tooltipPosition"

28
apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { Dossier, File } from '@red/domain';
import { File } from '@red/domain';
import { AppStateService } from '@state/app-state.service';
import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
import {
@ -20,9 +20,6 @@ import { LongPressEvent } from '@shared/directives/long-press.directive';
import { FileActionService } from '../../services/file-action.service';
import { DossiersService } from '@services/entity-services/dossiers.service';
import { FileManagementService } from '../../services/file-management.service';
import { FilesMapService } from '@services/entity-services/files-map.service';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Component({
selector: 'redaction-file-actions',
@ -30,7 +27,7 @@ import { tap } from 'rxjs/operators';
styleUrls: ['./file-actions.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnDestroy {
export class FileActionsComponent extends AutoUnsubscribe implements OnDestroy {
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
@ -42,7 +39,6 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
@Input() @Required() type: 'file-preview' | 'dossier-overview-list' | 'dossier-overview-workflow';
@Output() readonly actionPerformed = new EventEmitter<string>();
dossier$: Observable<Dossier>;
toggleTooltip?: string;
assignTooltip?: string;
buttonType?: CircleButtonType;
@ -71,7 +67,6 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
private readonly _fileActionService: FileActionService,
private readonly _loadingService: LoadingService,
private readonly _fileManagementService: FileManagementService,
private readonly _filesMapService: FilesMapService,
private readonly _userService: UserService,
private readonly _toaster: Toaster,
private readonly _userPreferenceService: UserPreferenceService,
@ -107,15 +102,6 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
return this.file?.excluded ? _('file-preview.toggle-analysis.enable') : _('file-preview.toggle-analysis.disable');
}
ngOnInit(): void {
this.setup();
this.dossier$ = this.dossiersService.getEntityChanged$(this.file.dossierId).pipe(tap(() => this.setup()));
this.addSubscription = this._filesMapService.watch$(this.file.dossierId, this.file.fileId).subscribe(file => {
this.file = file;
this.setup();
});
}
toggleViewDocumentInfo() {
this.actionPerformed.emit('view-document-info');
}
@ -263,11 +249,7 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
}
private async _setFileApproved() {
await this._fileActionService
.setFilesApproved([this.file])
.toPromise()
.then(() => {
this.reloadFiles('set-approved');
});
await this._fileActionService.setFilesApproved([this.file]).toPromise();
this.reloadFiles('set-approved');
}
}

25
apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
View File

@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component, Input, OnDestroy } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { Dossier, File } from '@red/domain';
import { File } from '@red/domain';
import { FileDownloadService } from '@upload-download/services/file-download.service';
import { AutoUnsubscribe, CircleButtonType, CircleButtonTypes, List, Toaster } from '@iqser/common-ui';
import { CircleButtonType, CircleButtonTypes, List, Toaster } from '@iqser/common-ui';
import { TranslateService } from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@ -14,8 +14,7 @@ export type MenuState = 'OPEN' | 'CLOSED';
styleUrls: ['./file-download-btn.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileDownloadBtnComponent extends AutoUnsubscribe implements OnDestroy {
@Input() dossier: Dossier;
export class FileDownloadBtnComponent {
@Input() files: List<File>;
@Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
@Input() type: CircleButtonType = CircleButtonTypes.default;
@ -27,9 +26,7 @@ export class FileDownloadBtnComponent extends AutoUnsubscribe implements OnDestr
private readonly _fileDownloadService: FileDownloadService,
private readonly _toaster: Toaster,
private readonly _translateService: TranslateService,
) {
super();
}
) {}
get canDownloadFiles() {
return this.files.length > 0 && this.files.reduce((acc, file) => acc && this._permissionsService.canDownloadFiles(file), true);
@ -41,13 +38,11 @@ export class FileDownloadBtnComponent extends AutoUnsubscribe implements OnDestr
: this._translateService.instant('dossier-overview.download-file-disabled', { count: this.files.length });
}
downloadFiles($event: MouseEvent) {
async downloadFiles($event: MouseEvent) {
$event.stopPropagation();
this.addSubscription = this._fileDownloadService
.downloadFiles(
this.files.map(f => f.fileId),
this.dossier.dossierId,
)
.subscribe(() => this._toaster.info(_('download-status.queued')));
const dossierId = this.files[0].dossierId;
const filesIds = this.files.map(f => f.fileId);
await this._fileDownloadService.downloadFiles(filesIds, dossierId).toPromise();
this._toaster.info(_('download-status.queued'));
}
}