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

updated grid columns based on dynamic columns

Browse Source
This commit is contained in:
Valentin 2021-08-23 10:38:27 +03:00 committed by Timo Bejan
parent 232f2df003
commit 8c1fc0624f
3 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,13 @@
<redaction-empty-state *ngIf="noMatch$ | async" [text]="'dossier-overview.no-match.title' | translate"></redaction-empty-state>
<cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" redactionHasScrollbar>
<cdk-virtual-scroll-viewport
#scrollViewport
[itemSize]="itemSize"
redactionHasScrollbar
(mouseenter)="updateGridColumns($event)"
(mouseleave)="updateGridColumns($event)"
>
<div
*cdkVirtualFor="let fileStatus of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey"
[class.disabled]="fileStatus.excluded"

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

@ -17,7 +17,7 @@ iqser-table-column-name::ng-deep {
cdk-virtual-scroll-viewport {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 3fr 1fr 2fr 1fr 2fr 1fr auto 11px;
grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto 11px;
.table-item {
> div {
@ -67,7 +67,7 @@ cdk-virtual-scroll-viewport {
&.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 3fr 1fr 2fr 1fr 2fr 1fr auto;
grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto;
}
}
}

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

@ -1,4 +1,15 @@
import { ChangeDetectorRef, Component, ElementRef, HostListener, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import {
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
Injector,
OnDestroy,
OnInit,
Renderer2,
TemplateRef,
ViewChild
} from '@angular/core';
import { Toaster } from '@services/toaster.service';
import { AppStateService } from '@state/app-state.service';
import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
@ -82,6 +93,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
dossierAttributes: DossierAttributeWithValue[] = [];
fileAttributeConfigs: FileAttributeConfig[];
protected readonly _primaryKey = 'filename';
dynamicColumnsCount = 0;
@ViewChild(DossierDetailsComponent, { static: false })
private readonly _dossierDetailsComponent: DossierDetailsComponent;
@ -107,10 +119,10 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
private readonly _statusOverlayService: StatusOverlayService,
private readonly _userPreferenceService: UserPreferenceService,
private readonly _fileDropOverlayService: FileDropOverlayService,
private readonly _dossierAttributesService: DossierAttributesService
) // private readonly _renderer: Renderer2,
// private readonly _elementRef: ElementRef,
{
private readonly _dossierAttributesService: DossierAttributesService,
private readonly _renderer: Renderer2,
private readonly _elementRef: ElementRef
) {
super(_injector);
this._loadEntitiesFromState();
@ -246,15 +258,20 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
for (const config of this.displayedInFileListAttributes) {
if (config.displayedInFileList) {
dynamicColumns.push({ label: config.label });
dynamicColumns.push({ label: config.label, notTranslatable: true });
}
}
this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)];
this.dynamicColumnsCount = dynamicColumns.length;
this.updateGridColumns();
}
// const element = this._elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper');
// this._renderer.setStyle(element, 'grid-template-columns', 'auto 3fr 1fr 2fr 1fr 2fr 1fr auto 11px');
// this._renderer.addClass(element, 'has-scrollbar:hover')
// console.log('element: ', element);
updateGridColumns($event = null) {
const element = this._elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper');
const gridTemplateColumns = `auto 3fr repeat(${this.dynamicColumnsCount}, 1fr) 2fr 1fr 2fr 1fr auto ${
$event?.type === 'mouseenter' ? '' : '11px'
}`;
this._renderer.setStyle(element, 'grid-template-columns', gridTemplateColumns);
}
get displayedInFileListAttributes() {