From 0d4552876b698d93af50bac4985b700c93ac38f4 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Wed, 17 Nov 2021 00:17:59 +0200 Subject: [PATCH] add separate components for file name column and added date column --- ...ssier-overview-bulk-actions.component.html | 2 +- .../screen-header.component.html | 6 +-- .../added-column/added-column.component.html | 3 ++ .../added-column/added-column.component.scss | 0 .../added-column/added-column.component.ts | 12 +++++ .../file-name-column.component.html | 15 ++++++ .../file-name-column.component.scss | 10 ++++ .../file-name-column.component.ts | 12 +++++ .../file-workload-column.component.html | 0 .../file-workload-column.component.scss | 0 .../file-workload-column.component.ts | 0 .../table-item/table-item.component.html | 45 ++++++----------- .../table-item/table-item.component.scss | 49 +++++++------------ .../dossier-overview.module.ts | 10 ++-- .../dossier-overview-screen.component.html | 12 ++--- .../dossiers-listing-actions.component.html | 6 +-- .../file-actions/file-actions.component.html | 3 +- .../file-actions/file-actions.component.ts | 28 ++--------- .../file-download-btn.component.ts | 25 ++++------ 19 files changed, 119 insertions(+), 119 deletions(-) create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.html create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.scss create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts rename apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/{ => table-item}/file-workload-column/file-workload-column.component.html (100%) rename apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/{ => table-item}/file-workload-column/file-workload-column.component.scss (100%) rename apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/{ => table-item}/file-workload-column/file-workload-column.component.ts (100%) diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html index 691762c9e..0dd90ce37 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html @@ -39,7 +39,7 @@ icon="red:undo" > - + - + + {{ file.added | date: 'd MMM. yyyy, hh:mm a' }} + diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts new file mode 100644 index 000000000..594582c75 --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts @@ -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; +} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html new file mode 100644 index 000000000..b8e13117d --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html @@ -0,0 +1,15 @@ +
+
+ {{ file.filename }} +
+
+ +
+
+ + {{ file.primaryAttribute }} + +
+
+ + diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss new file mode 100644 index 000000000..bcbf74f08 --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss @@ -0,0 +1,10 @@ +@use 'common-mixins'; + +.table-item-title { + max-width: 25vw; +} + +.primary-attribute { + padding-top: 6px; + @include common-mixins.line-clamp(1); +} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts new file mode 100644 index 000000000..bc764a9c7 --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts @@ -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; +} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.html similarity index 100% rename from apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.html rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.html diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.scss similarity index 100% rename from apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.scss rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.scss diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.ts similarity index 100% rename from apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-workload-column/file-workload-column.component.ts rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.ts diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html index 2f70675c9..1a9f75c89 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html @@ -1,24 +1,9 @@
-
-
- {{ file.filename }} -
-
-
-
- - {{ file.primaryAttribute }} - -
-
- - +
-
- {{ file.added | date: 'd MMM. yyyy, hh:mm a' }} -
+
@@ -30,22 +15,24 @@
-
- -
+ +
+ +
-
- -
+
+ +
-
-
-
- - {{ file.numberOfPages }} +
+
+
+ + {{ file.numberOfPages }} +
-
+
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss index 6ab93129d..7d90c974d 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss @@ -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; } } } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts index 9684e944e..3d7b9fb5c 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts @@ -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], diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html index 15dc5a84b..9ee22c1c1 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html @@ -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" >
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html index 945e987e9..84d706661 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html @@ -17,9 +17,5 @@ icon="iqser:refresh" > - +
diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html index 929ab7bf8..7955ceb8f 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html @@ -2,8 +2,8 @@
@@ -55,7 +55,6 @@ (); - dossier$: Observable; 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'); } } diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts index 76ae7a6b7..d80079779 100644 --- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts @@ -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; @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')); } }