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 = '-';
}
}
if (!this.fileAttributes || !this.fileAttributes.attributeIdToValue) {
this.fileAttributes = { attributeIdToValue: {} };
}
}
readonly excludedPagesCount = this.excludedPages?.length ?? 0;
@ -67,7 +70,7 @@ export class FileStatusWrapper implements FileStatus {
readonly hintsOnly = this.hasHints && !this.hasRedactions;
readonly hasNone = !this.hasRedactions && !this.hasHints && !this.hasSuggestions;
readonly isUnassigned = !this.currentReviewer
readonly isUnassigned = !this.currentReviewer;
readonly isError = this.status === FileStatus.StatusEnum.ERROR;
readonly isProcessing = processingStatuses.includes(this.status);
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>
<cdk-virtual-scroll-viewport
#scrollViewport
[itemSize]="itemSize"
redactionHasScrollbar
(mouseenter)="updateGridColumns($event)"
(mouseleave)="updateGridColumns($event)"
>
<cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" redactionHasScrollbar>
<div
*cdkVirtualFor="let fileStatus of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey"
[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/red-mixins';
:root {
--dynamic-columns: '';
}
.file-upload-input {
display: none;
}
@ -17,7 +21,7 @@ iqser-table-column-name::ng-deep {
cdk-virtual-scroll-viewport {
::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 {
> div {
@ -67,7 +71,7 @@ cdk-virtual-scroll-viewport {
&.has-scrollbar:hover {
::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;
}
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() {
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.dynamicColumnsCount = dynamicColumns.length;
this.updateGridColumns();
(this._elementRef.nativeElement as HTMLElement).style.setProperty('--dynamic-columns', `${this.dynamicColumnsCount}`);
}
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",
"API_URL": "https://red-staging.iqser.cloud/redaction-gateway-v1",
"OAUTH_URL": "https://dom1.iqser.cloud/auth/realms/redaction",
"API_URL": "https://dom1.iqser.cloud/redaction-gateway-v1",
"OAUTH_CLIENT_ID": "redaction",
"BACKEND_APP_VERSION": "4.4.40",
"FRONTEND_APP_VERSION": "1.1",

2
libs/common-ui

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