feat(user-representation.component): Hinzufügen von Zeilenklassenfunktionalität für die Klassifizierung von Zeiträumen in der Benutzerdarstellungskomponente

This commit is contained in:
Developer 02 2024-11-12 10:02:33 +01:00
parent acfd9b4fb8
commit 0657bbe2c4
4 changed files with 30 additions and 4 deletions

View File

@ -1,8 +1,8 @@
import { Component, Inject } from '@angular/core';
import { Component } from '@angular/core';
import { UserRep } from '../../../models/user-management.api.models';
import { UserRepService } from '../../../services/api/user-representation.service';
import { BaseTableComponent } from '../base-table/base-table.component';
import { GuiGridModule, GuiColumn } from '@generic-ui/ngx-grid';
import { GuiGridModule } from '@generic-ui/ngx-grid';
import { ColorModeService } from '../../../services/button/color-mode.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

View File

@ -27,7 +27,7 @@
<div class="col-3">
<mat-tab-group>
<mat-tab label="{{useRepLabel}}">
<app-user-rep-table #userReps [initData]="initWithoutData" [onSelectedRows]="repOnSelectedRows"></app-user-rep-table>
<app-user-rep-table #userReps [initData]="initWithoutData" [onSelectedRows]="repOnSelectedRows" [rowClass]="rep_row_class"></app-user-rep-table>
</mat-tab>
</mat-tab-group>
</div>

View File

@ -1,5 +1,5 @@
import { AfterViewInit, Component, ViewChild, inject } from '@angular/core';
import { GuiColumn, GuiSelectedRow } from '@generic-ui/ngx-grid/gui/grid/src/core/api/gui.grid.public-api';
import { GuiColumn, GuiRowClass, GuiRowStyle, GuiSelectedRow } from '@generic-ui/ngx-grid/gui/grid/src/core/api/gui.grid.public-api';
import { UserTableComponent } from '../../components/tables/user-table/user-table.component';
import { UserRepTableComponent } from '../../components/tables/user-rep-table/user-rep-table.component';
import { GroupTableComponent } from '../../components/tables/group-table/group-table.component';
@ -32,6 +32,20 @@ export class UserRepresentationComponent extends BasePageComponent implements Af
private readonly dialog: MatDialog = inject(MatDialog);
rep_row_class: GuiRowClass = {
classFunction(source, index) {
const now = new Date()
return (!source.validFrom && !source.validTo)
? "current-period-row"
: (new Date(source.validFrom) > now)
? "future-period-row"
: (new Date(source.validTo) < now)
? "past-period-row"
: "current-period-row";
}
}
initWithoutData = () => { }
constructor(private userRepService: UserRepService) {

View File

@ -104,3 +104,15 @@ code {
width: #{$i * 5 + "%"} !important;
}
}
.future-period-row {
background: #6E6E4C !important;
}
.current-period-row {
background: #4C6E4C !important;
}
.past-period-row {
background: #6E4C4C !important;
}