From 0373f1a7b96bb950a4cbe16a63a7a2f87c6365c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 6 Dec 2021 15:21:29 +0200 Subject: [PATCH] Fix some stuff, break other stuff --- .../workflow-item.component.html | 20 +++-- .../workflow-item.component.scss | 80 ++++++++++--------- .../workflow-item/workflow-item.component.ts | 25 +++++- .../dossier-overview/config.service.ts | 2 +- .../dossier-overview-screen.component.html | 4 +- .../file-download-btn.component.html | 2 +- .../file-download-btn.component.ts | 20 ++--- libs/common-ui | 2 +- 8 files changed, 91 insertions(+), 64 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html index ec7481294..a5f36933f 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html @@ -1,5 +1,5 @@
-
+
{{ file.filename }} @@ -20,11 +20,17 @@
- +
+ +
+ +
+ +
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss index 74a119427..60fd71e08 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss @@ -3,42 +3,6 @@ .workflow-item { padding: 10px 10px 8px 10px; - > div { - display: flex; - justify-content: space-between; - - .details { - max-width: calc(100% - 28px); - - .filename { - font-weight: 600; - line-height: 18px; - @include common-mixins.line-clamp(1); - } - } - - .user { - display: flex; - align-items: flex-end; - } - } - - redaction-file-workload { - margin-top: 10px; - display: block; - min-height: 16px; - } - - .file-actions { - margin-top: 8px; - min-height: 34px; - overflow: hidden; - } - - redaction-file-actions:not(.keep-visible) { - display: none; - } - &:hover .filename { text-decoration: underline; } @@ -48,6 +12,50 @@ } } +.details-wrapper { + display: flex; + justify-content: space-between; + + .details { + max-width: calc(100% - 28px); + + .filename { + font-weight: 600; + line-height: 18px; + @include common-mixins.line-clamp(1); + } + } + + .user { + display: flex; + align-items: flex-end; + } +} + +redaction-file-workload { + margin-top: 10px; + display: block; + min-height: 16px; +} + +.file-actions { + margin-top: 8px; + min-height: 34px; + overflow: hidden; + align-items: center; + display: flex; +} + +.actions-wrapper { + border: 1px solid; + overflow: hidden; + flex: 1; +} + +redaction-file-actions:not(.keep-visible) { + //display: none; +} + .mt-4 { margin-top: 4px; } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts index b7b4c79d2..7c3916b84 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts @@ -1,6 +1,6 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { File, IFileAttributeConfig } from '@red/domain'; -import { Required } from '@iqser/common-ui'; +import { Debounce, Required } from '@iqser/common-ui'; @Component({ selector: 'redaction-workflow-item', @@ -8,8 +8,25 @@ import { Required } from '@iqser/common-ui'; styleUrls: ['./workflow-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class WorkflowItemComponent { +export class WorkflowItemComponent implements OnInit { @Input() @Required() file!: File; @Input() @Required() displayedAttributes!: IFileAttributeConfig[]; - @Input() width: number; + width: number; + + @ViewChild('actionsWrapper', { static: true }) private _actionsWrapper: ElementRef; + + constructor(private readonly _changeRef: ChangeDetectorRef) {} + + ngOnInit(): void { + const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => { + this._updateItemWidth(entries[0]); + }); + _observer.observe(this._actionsWrapper.nativeElement); + } + + @Debounce(30) + private _updateItemWidth(entry: ResizeObserverEntry): void { + this.width = entry.contentRect.width; + this._changeRef.detectChanges(); + } } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts index e00b5d3a9..72e1ac733 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts @@ -32,7 +32,7 @@ import { noop } from 'lodash'; @Injectable() export class ConfigService { readonly listingMode$: Observable; - private readonly _listingMode$ = new BehaviorSubject(ListingModes.table); + private readonly _listingMode$ = new BehaviorSubject(ListingModes.workflow); constructor( private readonly _fileAssignService: FileAssignService, 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 f59df8959..1010b0c02 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 @@ -78,6 +78,6 @@ - - + + diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html index d006ab32c..87eb0a2a2 100644 --- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html +++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html @@ -3,7 +3,7 @@ [disabled]="disabled || !canDownloadFiles" [tooltipClass]="tooltipClass" [tooltipPosition]="tooltipPosition" - [tooltip]="tooltip" + [tooltip]="tooltip | translate: { count: this.files.length }" [type]="type" icon="iqser:download" > 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 97645d398..2a3f107ab 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,9 +1,8 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { File } from '@red/domain'; import { FileDownloadService } from '@upload-download/services/file-download.service'; import { CircleButtonType, CircleButtonTypes, Toaster } from '@iqser/common-ui'; -import { TranslateService } from '@ngx-translate/core'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; export type MenuState = 'OPEN' | 'CLOSED'; @@ -14,28 +13,25 @@ export type MenuState = 'OPEN' | 'CLOSED'; styleUrls: ['./file-download-btn.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FileDownloadBtnComponent { +export class FileDownloadBtnComponent implements OnChanges { @Input() files: File[]; @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above'; @Input() type: CircleButtonType = CircleButtonTypes.default; @Input() tooltipClass: string; @Input() disabled = false; + tooltip: string; + canDownloadFiles: boolean; + constructor( private readonly _permissionsService: PermissionsService, private readonly _fileDownloadService: FileDownloadService, private readonly _toaster: Toaster, - private readonly _translateService: TranslateService, ) {} - get canDownloadFiles() { - return this._permissionsService.canDownloadFiles(this.files); - } - - get tooltip() { - return this.canDownloadFiles - ? this._translateService.instant('dossier-overview.download-file') - : this._translateService.instant('dossier-overview.download-file-disabled', { count: this.files.length }); + ngOnChanges(): void { + this.canDownloadFiles = this._permissionsService.canDownloadFiles(this.files); + this.tooltip = this.canDownloadFiles ? _('dossier-overview.download-file') : _('dossier-overview.download-file-disabled'); } async downloadFiles($event: MouseEvent) { diff --git a/libs/common-ui b/libs/common-ui index 4c119e2a7..7ec9b548f 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 4c119e2a7870d0778457d22d50ac380316c68e29 +Subproject commit 7ec9b548fa77f9ce36b285626b702efb8981bb39