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

updated grid layout for dynamic columns

Browse Source
This commit is contained in:
Timo Bejan 2021-08-23 11:47:22 +03:00
parent a4ae61fcac
commit fed8d963d7
6 changed files with 15 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/models/file/file-status.wrapper.ts
View File

@ -57,6 +57,9 @@ export class FileStatusWrapper implements FileStatus {
this.primaryAttribute = '-'; this.primaryAttribute = '-';
} }
} }
if (!this.fileAttributes || !this.fileAttributes.attributeIdToValue) {
this.fileAttributes = { attributeIdToValue: {} };
}
} }
readonly excludedPagesCount = this.excludedPages?.length ?? 0; readonly excludedPagesCount = this.excludedPages?.length ?? 0;
@ -67,7 +70,7 @@ export class FileStatusWrapper implements FileStatus {
readonly hintsOnly = this.hasHints && !this.hasRedactions; readonly hintsOnly = this.hasHints && !this.hasRedactions;
readonly hasNone = !this.hasRedactions && !this.hasHints && !this.hasSuggestions; readonly hasNone = !this.hasRedactions && !this.hasHints && !this.hasSuggestions;
readonly isUnassigned = !this.currentReviewer readonly isUnassigned = !this.currentReviewer;
readonly isError = this.status === FileStatus.StatusEnum.ERROR; readonly isError = this.status === FileStatus.StatusEnum.ERROR;
readonly isProcessing = processingStatuses.includes(this.status); readonly isProcessing = processingStatuses.includes(this.status);
readonly isApproved = this.status === FileStatus.StatusEnum.APPROVED; readonly isApproved = this.status === FileStatus.StatusEnum.APPROVED;

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

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

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

@ -1,6 +1,10 @@
@import '../../../../../assets/styles/variables'; @import '../../../../../assets/styles/variables';
@import '../../../../../assets/styles/red-mixins'; @import '../../../../../assets/styles/red-mixins';
:root {
--dynamic-columns: '';
}
.file-upload-input { .file-upload-input {
display: none; display: none;
} }
@ -17,7 +21,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 2fr 1fr 2fr 1fr auto 11px; grid-template-columns: auto 3fr repeat(var(--dynamic-columns), 1fr) 2fr 1fr 2fr 1fr auto 11px;
.table-item { .table-item {
> div { > div {
@ -67,7 +71,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 2fr 1fr 2fr 1fr auto; grid-template-columns: auto 3fr repeat(var(--dynamic-columns), 1fr) 2fr 1fr 2fr 1fr auto;
} }
} }
} }

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

@ -254,16 +254,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
this.collapsedDetails = !this.collapsedDetails; this.collapsedDetails = !this.collapsedDetails;
} }
updateGridColumns($event = null) {
if (this.dynamicColumnsCount) {
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() { get displayedInFileListAttributes() {
return this.fileAttributeConfigs.filter(config => config.displayedInFileList); return this.fileAttributeConfigs.filter(config => config.displayedInFileList);
} }
@ -280,7 +270,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
} }
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.dynamicColumnsCount = dynamicColumns.length;
this.updateGridColumns(); (this._elementRef.nativeElement as HTMLElement).style.setProperty('--dynamic-columns', `${this.dynamicColumnsCount}`);
} }
private _loadEntitiesFromState() { private _loadEntitiesFromState() {

4
apps/red-ui/src/assets/config/config.json
View File

@ -1,6 +1,6 @@
{ {
"OAUTH_URL": "https://red-staging.iqser.cloud/auth/realms/redaction", "OAUTH_URL": "https://dom1.iqser.cloud/auth/realms/redaction",
"API_URL": "https://red-staging.iqser.cloud/redaction-gateway-v1", "API_URL": "https://dom1.iqser.cloud/redaction-gateway-v1",
"OAUTH_CLIENT_ID": "redaction", "OAUTH_CLIENT_ID": "redaction",
"BACKEND_APP_VERSION": "4.4.40", "BACKEND_APP_VERSION": "4.4.40",
"FRONTEND_APP_VERSION": "1.1", "FRONTEND_APP_VERSION": "1.1",

2
libs/common-ui

@ -1 +1 @@
Subproject commit 4527494d728d622bdd5d85aea72a7770fa1a8f14 Subproject commit bb51a90738eaec334172a757c97744885ea474b5