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 173e47a3d2
commit 2a2e028b44
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 { cdk-virtual-scroll-viewport {
::ng-deep.cdk-virtual-scroll-content-wrapper { ::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 { .table-item {
> div { > div {
@ -67,7 +67,7 @@ cdk-virtual-scroll-viewport {
&.has-scrollbar:hover { &.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper { ::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;
} }
} }
} }

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

@ -122,9 +122,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
private readonly _dossierAttributesService: DossierAttributesService, private readonly _dossierAttributesService: DossierAttributesService,
private readonly _renderer: Renderer2, private readonly _renderer: Renderer2,
private readonly _elementRef: ElementRef private readonly _elementRef: ElementRef
) // private readonly _renderer: Renderer2, ) {
// private readonly _elementRef: ElementRef,
{
super(_injector); super(_injector);
this._loadEntitiesFromState(); this._loadEntitiesFromState();
@ -260,15 +258,20 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = []; const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
for (const config of this.displayedInFileListAttributes) { for (const config of this.displayedInFileListAttributes) {
if (config.displayedInFileList) { 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.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'); updateGridColumns($event = null) {
// this._renderer.setStyle(element, 'grid-template-columns', 'auto 3fr 1fr 2fr 1fr 2fr 1fr auto 11px'); const element = this._elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper');
// this._renderer.addClass(element, 'has-scrollbar:hover') const gridTemplateColumns = `auto 3fr repeat(${this.dynamicColumnsCount}, 1fr) 2fr 1fr 2fr 1fr auto ${
// console.log('element: ', element); $event?.type === 'mouseenter' ? '' : '11px'
}`;
this._renderer.setStyle(element, 'grid-template-columns', gridTemplateColumns);
} }
get displayedInFileListAttributes() { get displayedInFileListAttributes() {