From bea3623c3ec176e89419b93d3aa9aaccc5e349eb Mon Sep 17 00:00:00 2001
From: RIHTARSIC Joze <joze.rihtarsic@ext.ec.europa.eu>
Date: Mon, 21 Oct 2024 08:01:36 +0200
Subject: [PATCH] [EDELIVERY-13955] fix table headers
---
.../smp-table/smp-table-coldef.model.ts | 3 ++-
.../components/smp-table/smp-table.component.css | 16 +++++++++++++++-
.../smp-table/smp-table.component.html | 6 ++++--
.../components/smp-table/smp-table.component.ts | 7 +++++++
.../document-events-panel.component.ts | 10 +++++-----
.../document-properties-panel.component.ts | 4 ++--
.../document-versions-panel.component.ts | 8 ++++----
.../admin-domain/admin-domain.component.css | 7 +++++++
.../admin-domain/admin-domain.component.html | 2 +-
.../domain-properties-panel.component.html | 6 +++---
.../domain-properties-panel.component.scss | 8 ++++++++
.../admin-extension/extension.component.css | 8 ++++++++
.../admin-extension/extension.component.html | 6 +++---
.../admin-keystore/admin-keystore.component.css | 8 ++++++++
.../admin-keystore/admin-keystore.component.html | 4 ++--
.../admin-truststore.component.css | 8 +++++++-
.../admin-truststore.component.html | 2 +-
.../admin-users/admin-user.component.css | 7 +++++++
.../admin-users/admin-user.component.html | 4 ++--
smp-angular/src/assets/i18n/en.json | 3 +++
20 files changed, 99 insertions(+), 28 deletions(-)
diff --git a/smp-angular/src/app/common/components/smp-table/smp-table-coldef.model.ts b/smp-angular/src/app/common/components/smp-table/smp-table-coldef.model.ts
index 6c6b0ec5a..c07f9f957 100644
--- a/smp-angular/src/app/common/components/smp-table/smp-table-coldef.model.ts
+++ b/smp-angular/src/app/common/components/smp-table/smp-table-coldef.model.ts
@@ -7,5 +7,6 @@ export interface SmpTableColDef {
header: string;
cell?: (row: any) => any;
tooltip?: (row: any) => any;
- style?:string ;
+ style?:string;
+ headerStyle?: string;
}
diff --git a/smp-angular/src/app/common/components/smp-table/smp-table.component.css b/smp-angular/src/app/common/components/smp-table/smp-table.component.css
index 2dd459cb2..570453242 100644
--- a/smp-angular/src/app/common/components/smp-table/smp-table.component.css
+++ b/smp-angular/src/app/common/components/smp-table/smp-table.component.css
@@ -16,9 +16,19 @@
padding-right: 5px;
}
-.smp-table-cell {
+.smp-table-cell {
word-break: break-all;
word-wrap: break-word;
+ font-size: 0.8em;
+ padding: 1px 5px;
+
+}
+
+.smp-table-cell-header {
+ font-weight: bold;
+ font-size: 0.9em;
+ padding: 1px 5px;
+ text-align: left;
}
.smp-table-row {
@@ -40,4 +50,8 @@
padding-top: 1em;
}
+.smp-table-header-row{
+ min-height: 36px;
+}
+
diff --git a/smp-angular/src/app/common/components/smp-table/smp-table.component.html b/smp-angular/src/app/common/components/smp-table/smp-table.component.html
index 46eb8d088..abef78ba5 100644
--- a/smp-angular/src/app/common/components/smp-table/smp-table.component.html
+++ b/smp-angular/src/app/common/components/smp-table/smp-table.component.html
@@ -14,7 +14,8 @@
<ng-container *ngFor="let colDef of columnDefList; let colIndex = index"
matColumnDef="{{colDef.columnDef}}">
<mat-header-cell *matHeaderCellDef
- [style]="colDef.style">{{ colDef.header | translate }}
+ class="smp-table-cell-header"
+ [style]="getHeaderStyle(colDef)">{{ colDef.header | translate }}
</mat-header-cell>
<mat-cell class="smp-table-cell" *matCellDef="let row"
@@ -23,7 +24,8 @@
>{{ colDef.cell(row) }}</mat-cell>
</ng-container>
<!-- configure table header -->
- <mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></mat-header-row>
+ <mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"
+ class="smp-table-header-row"></mat-header-row>
<!-- configure table rows -->
<mat-row class="smp-table-row" *matRowDef="let odd = odd; let row; columns: displayedColumns;"
(click)="onRowClickedEvent(row)"
diff --git a/smp-angular/src/app/common/components/smp-table/smp-table.component.ts b/smp-angular/src/app/common/components/smp-table/smp-table.component.ts
index c4e3667d4..dfb2aebe7 100644
--- a/smp-angular/src/app/common/components/smp-table/smp-table.component.ts
+++ b/smp-angular/src/app/common/components/smp-table/smp-table.component.ts
@@ -114,4 +114,11 @@ export class SmpTableComponent implements AfterViewInit {
}
}
+ getHeaderStyle(col: SmpTableColDef): string {
+ if (!col) {
+ return '';
+ }
+ return ( col?.style?col.style:'') + ' ' +( col?.headerStyle?col.headerStyle:'') ;
+ }
+
}
diff --git a/smp-angular/src/app/common/panels/document-events-panel/document-events-panel.component.ts b/smp-angular/src/app/common/panels/document-events-panel/document-events-panel.component.ts
index 14728cb91..052f5a201 100644
--- a/smp-angular/src/app/common/panels/document-events-panel/document-events-panel.component.ts
+++ b/smp-angular/src/app/common/panels/document-events-panel/document-events-panel.component.ts
@@ -80,33 +80,33 @@ export class DocumentEventsPanelComponent implements AfterViewInit, BeforeLeaveG
columnDef: 'date',
header: 'document.events.panel.label.date',
cell: (row: DocumentVersionEventRo) => this.dateTimeService.formatDateTimeForUserLocal(row.eventOn),
- style: 'font-size: 0.8em; flex-grow: 0;flex-basis: 80px; padding: 5px;justify-content : center;'
+ style: 'flex-basis: 150px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'eventType',
header: 'document.events.panel.label.type',
cell: (row: DocumentVersionEventRo) => row.eventType,
- style: 'font-size: 0.8em; padding: 5px;justify-content : center;flex-grow: 0;flex-basis:80px;'
+ style: 'flex-basis:80px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'status',
header: 'document.events.panel.label.status',
cell: (row: DocumentVersionEventRo) => row.documentVersionStatus,
- style: 'font-size: 0.8em; padding: 5px;justify-content : center;flex-grow: 0;flex-basis:80px;'
+ style: 'flex-basis:80px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'username',
header: 'document.events.panel.label.username',
cell: (row: DocumentVersionEventRo) => row.username,
- style: 'font-size: 0.8em; padding: 5px;justify-content : center;'
+ style: 'flex-grow: 1;'
} as SmpTableColDef,
{
columnDef: 'eventSource',
header: 'document.events.panel.label.source',
cell: (row: DocumentVersionEventRo) => row.eventSourceType,
- style: 'font-size: 0.8em; flex-grow: 0;flex-basis:100px;padding: 5px;justify-content : center;'
+ style: 'flex-basis:60px;flex-grow: 0;'
} as SmpTableColDef,
];
}
diff --git a/smp-angular/src/app/common/panels/document-properties-panel/document-properties-panel.component.ts b/smp-angular/src/app/common/panels/document-properties-panel/document-properties-panel.component.ts
index 0ddbb73be..cb2ec0004 100644
--- a/smp-angular/src/app/common/panels/document-properties-panel/document-properties-panel.component.ts
+++ b/smp-angular/src/app/common/panels/document-properties-panel/document-properties-panel.component.ts
@@ -76,13 +76,13 @@ export class DocumentPropertiesPanelComponent implements BeforeLeaveGuard, Contr
header: 'document.properties.panel.label.property',
cell: (row: DocumentPropertyRo) => row.property,
tooltip: (row: DocumentPropertyRo) => row.desc,
- style: 'font-size: 0.8em; padding: 0 5px;flex-grow: 0;flex-basis:40%;'
+ style: 'flex-grow: 0;flex-basis:40%;'
} as SmpTableColDef,
{
columnDef: 'value',
header: 'document.properties.panel.label.value',
cell: (row: DocumentPropertyRo) => row.value,
- style: 'font-size: 0.8em; padding: 0 5px;'
+ style: 'flex-grow: 1;'
} as SmpTableColDef
];
}
diff --git a/smp-angular/src/app/common/panels/document-versions-panel/document-versions-panel.component.ts b/smp-angular/src/app/common/panels/document-versions-panel/document-versions-panel.component.ts
index 7bc7d181d..7fbc82ca9 100644
--- a/smp-angular/src/app/common/panels/document-versions-panel/document-versions-panel.component.ts
+++ b/smp-angular/src/app/common/panels/document-versions-panel/document-versions-panel.component.ts
@@ -82,25 +82,25 @@ export class DocumentVersionsPanelComponent implements BeforeLeaveGuard, Control
columnDef: 'version',
header: 'document.versions.panel.label.version',
cell: (row: DocumentVersionRo) => row.version,
- style: 'font-size: 0.8em;padding: 5px;justify-content : center;flex-grow: 0;flex-basis:70px;'
+ style: 'flex-grow: 0;flex-basis:70px;'
} as SmpTableColDef,
{
columnDef: 'status',
header: 'document.versions.panel.label.status',
cell: (row: DocumentVersionRo) => row.versionStatus,
- style: 'font-size: 0.8em;padding: 5px;justify-content:center;flex-grow: 0;flex-basis:100px;'
+ style: 'flex-grow: 1;'
} as SmpTableColDef,
{
columnDef: 'createdOn',
header: 'document.versions.panel.label.created',
cell: (row: DocumentVersionRo) => this.dateTimeService.formatDateTimeForUserLocal(row.createdOn),
- style: 'font-size: 0.8em; padding: 5px;justify-content:center;'
+ style: 'flex-basis: 150px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'lastUpdatedOn',
header: 'document.versions.panel.label.updated',
cell: (row: DocumentVersionRo) => this.dateTimeService.formatDateTimeForUserLocal(row.lastUpdatedOn),
- style: 'font-size: 0.8em; padding: 5px;justify-content:center;'
+ style: 'flex-basis: 150px;flex-grow: 0;'
} as SmpTableColDef
];
}
diff --git a/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.css b/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.css
index 6957aefc1..7151e5ab7 100644
--- a/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.css
+++ b/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.css
@@ -31,3 +31,10 @@
height: 100%;
max-width: 800px
}
+
+.domain-table-cell-header {
+ font-weight: bold;
+ font-size: 0.9em;
+ padding: 1px 5px;
+ text-align: center;
+}
diff --git a/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html b/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html
index 02515ab53..b28d87f30 100644
--- a/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html
+++ b/smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html
@@ -92,7 +92,7 @@
<table class="mat-elevation-z2" id="admin-domain-table" mat-table
[dataSource]="dataSource" matSort>
<ng-container matColumnDef="domainCode">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "admin.domain.label.domain.code" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="domain-table-cell-header">{{ "admin.domain.label.domain.code" | translate }}</th>
<td mat-cell *matCellDef="let row"
[matTooltip]="row.domainCode">{{ row.domainCode }}
</td>
diff --git a/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.html b/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.html
index 1e930d08e..ba9d9ed3b 100644
--- a/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.html
+++ b/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.html
@@ -4,19 +4,19 @@
<table id="admin-domain-properties-table" mat-table
[dataSource]="propertyDataSource" matSort>
<ng-container matColumnDef="systemDefault">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "domain.properties.label.system.default" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="domprop-table-cell-header">{{ "domain.properties.label.system.default" | translate }}</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox checked="{{row.systemDefault}}" disabled></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="property">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "domain.properties.label.domain.property" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="domprop-table-cell-header">{{ "domain.properties.label.domain.property" | translate }}</th>
<td mat-cell *matCellDef="let row"
[matTooltip]="row.desc">{{ row.property }}
</td>
</ng-container>
<ng-container matColumnDef="value">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "domain.properties.label.domain.value" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="domprop-table-cell-header">{{ "domain.properties.label.domain.value" | translate }}</th>
<td mat-cell *matCellDef="let row">{{ getTableRowValue(row) }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.scss b/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.scss
index 5c3239f12..35ce0c474 100644
--- a/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.scss
+++ b/smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.scss
@@ -24,3 +24,11 @@
.table-row {
font-weight: normal;
}
+
+
+.domprop-table-cell-header {
+ font-weight: bold;
+ font-size: 0.9em;
+ padding: 1px 5px;
+ text-align: left;
+}
diff --git a/smp-angular/src/app/system-settings/admin-extension/extension.component.css b/smp-angular/src/app/system-settings/admin-extension/extension.component.css
index 0e0da6ace..0565053d9 100644
--- a/smp-angular/src/app/system-settings/admin-extension/extension.component.css
+++ b/smp-angular/src/app/system-settings/admin-extension/extension.component.css
@@ -19,3 +19,11 @@
padding-top: 1em;
}
+
+.extension-table-cell-header {
+ font-weight: bold;
+ font-size: 0.9em;
+ padding: 1px 5px;
+ text-align: left;
+ align-self: start;
+}
diff --git a/smp-angular/src/app/system-settings/admin-extension/extension.component.html b/smp-angular/src/app/system-settings/admin-extension/extension.component.html
index 2e3c841b4..e01c66539 100644
--- a/smp-angular/src/app/system-settings/admin-extension/extension.component.html
+++ b/smp-angular/src/app/system-settings/admin-extension/extension.component.html
@@ -22,13 +22,13 @@
<!-- Name Column -->
<ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "extensions.label.name" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="extension-table-cell-header">{{ "extensions.label.name" | translate }}</th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<!-- Version Column -->
- <ng-container matColumnDef="version">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "extensions.label.version" | translate }}</th>
+ <ng-container matColumnDef="version" class="extension-table-cell-header">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="extension-table-cell-header">{{ "extensions.label.version" | translate }}</th>
<td mat-cell *matCellDef="let row"> {{row.version}}</td>
</ng-container>
diff --git a/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.css b/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.css
index 21030caf7..02ce8bc3f 100644
--- a/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.css
+++ b/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.css
@@ -26,3 +26,11 @@
display: block;
cursor: pointer;
}
+
+.keystore-table-cell-header {
+ font-weight: bold;
+ font-size: 0.9em;
+ padding: 1px 5px;
+ text-align: left;
+ align-self: start;
+}
diff --git a/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.html b/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.html
index 7ed7c193f..046f4a11d 100644
--- a/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.html
+++ b/smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.html
@@ -37,14 +37,14 @@
<table class="mat-elevation-z2" id="admin-keystore-table" mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="alias" [matTooltip]="selected?.certificateId">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "admin.keystore.label.alias" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="keystore-table-cell-header">{{ "admin.keystore.label.alias" | translate }}</th>
<td mat-cell *matCellDef="let row"
[ngClass]="{'datatable-row-error': row.invalid}"
[matTooltip]="row.certificateId">{{row.alias}}</td>
</ng-container>
<ng-container matColumnDef="entry-type">
- <th mat-header-cell *matHeaderCellDef>{{ "admin.keystore.label.type" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef class="keystore-table-cell-header">{{ "admin.keystore.label.type" | translate }}</th>
<td mat-cell *matCellDef="let row"
[ngClass]="{'datatable-row-error': row.invalid}"
[matTooltip]="(row.containingKey ? 'admin.keystore.label.key.pair': 'admin.keystore.label.certificate') | translate">
diff --git a/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.css b/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.css
index b37a8e949..bd7605689 100644
--- a/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.css
+++ b/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.css
@@ -12,7 +12,6 @@
padding-top: 1em;
}
-
#admin-truststore-table {
width: 100%;
padding-top: 1em;
@@ -26,3 +25,10 @@
display: block;
cursor: pointer;
}
+
+.truststore-table-cell-header {
+ font-weight: bold;
+ font-size: 0.9em;
+ padding: 1px 5px;
+ text-align: center;
+}
diff --git a/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.html b/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.html
index 42a6b5075..aadc7e90a 100644
--- a/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.html
+++ b/smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.html
@@ -49,7 +49,7 @@
<!-- Name Column -->
<ng-container matColumnDef="alias">
- <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "admin.truststore.label.alias" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef mat-sort-header class="truststore-table-cell-header">{{ "admin.truststore.label.alias" | translate }}</th>
<td mat-cell *matCellDef="let row"
[ngClass]="{'datatable-row-error': row.invalid}"
[matTooltip]="row.certificateId">{{row.alias}}</td>
diff --git a/smp-angular/src/app/system-settings/admin-users/admin-user.component.css b/smp-angular/src/app/system-settings/admin-users/admin-user.component.css
index b65965b4b..0283c14de 100644
--- a/smp-angular/src/app/system-settings/admin-users/admin-user.component.css
+++ b/smp-angular/src/app/system-settings/admin-users/admin-user.component.css
@@ -17,3 +17,10 @@
width: 100%;
padding-top: 1em;
}
+
+.user-table-cell-header {
+ font-weight: bold;
+ font-size: 0.9em;
+ padding: 1px 5px;
+ text-align: left;
+}
diff --git a/smp-angular/src/app/system-settings/admin-users/admin-user.component.html b/smp-angular/src/app/system-settings/admin-users/admin-user.component.html
index 0dbddc6cc..287dc0a32 100644
--- a/smp-angular/src/app/system-settings/admin-users/admin-user.component.html
+++ b/smp-angular/src/app/system-settings/admin-users/admin-user.component.html
@@ -41,12 +41,12 @@
</mat-toolbar>
<table class="mat-elevation-z2" id="admin-user-table" mat-table [dataSource]="userData" >
<ng-container matColumnDef="username">
- <th mat-header-cell *matHeaderCellDef >{{ "admin.user.label.username" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef class="user-table-cell-header" >{{ "admin.user.label.username" | translate }}</th>
<td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.username}}</td>
</ng-container>
<ng-container matColumnDef="fullName">
- <th mat-header-cell *matHeaderCellDef >{{ "admin.user.label.full.name" | translate }}</th>
+ <th mat-header-cell *matHeaderCellDef class="user-table-cell-header" >{{ "admin.user.label.full.name" | translate }}</th>
<td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.fullName}}</td>
</ng-container>
diff --git a/smp-angular/src/assets/i18n/en.json b/smp-angular/src/assets/i18n/en.json
index 3a9d41d65..1b233fc15 100644
--- a/smp-angular/src/assets/i18n/en.json
+++ b/smp-angular/src/assets/i18n/en.json
@@ -634,10 +634,13 @@
"domain.properties.button.reset": "Reset",
"domain.properties.button.save": "Save",
+ "domain.properties.label.filter": "Filter by prop. name",
+ "domain.properties.placeholder.filter": "Filter by property name",
"domain.properties.label.domain.property": "Domain property",
"domain.properties.label.domain.value": "Domain value",
"domain.properties.label.system.default": "Sys. Def.",
"domain.properties.label.no.properties.found": "No Domain properties found",
+ "domain.properties.label.no.filter.found": "No data matching the filter {{filterValue}}\"",
"domain.properties.panel.title": "Domain properties",
"domain.resource.type.panel.button.reset": "Reset",
--
GitLab