feat: Hinzufügen der Benutzer-Zusammenfassungs-Komponente mit Bottom Sheet-Funktionalität
- Implementierung der `UserSummaryComponent` zur Anzeige von Benutzer-Stammdaten in einem Bottom Sheet. - Einbindung von Angular Material `MatBottomSheet` zur Darstellung der Benutzer-Zusammenfassung. - Ergänzung der `UserComponent` um eine Funktion `openBottomSheet`, die die Benutzer-Zusammenfassungs-Komponente öffnet, wenn eine Tabellenzeile angeklickt wird. - Hinzufügen von Datenbindung und Material-Design-Komponenten für die Benutzeroberfläche.
This commit is contained in:
parent
6e973a494e
commit
eea1090711
@ -0,0 +1,23 @@
|
|||||||
|
<h2 class="card-header">Benutzer-Stammdaten</h2>
|
||||||
|
<div class="card-body">
|
||||||
|
<table class="table table-striped table-hover">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">DatumsFormat</th>
|
||||||
|
<td>{{user.dateFormat}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Kommentar</th>
|
||||||
|
<td>{{user.comment}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Hinzugefügt wer</th>
|
||||||
|
<td colspan="2">{{user.addedWho}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Geändert wenn</th>
|
||||||
|
<td colspan="2">{{user.changedWho}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UserSummaryComponent } from './user-summary.component';
|
||||||
|
|
||||||
|
describe('UserSummaryComponent', () => {
|
||||||
|
let component: UserSummaryComponent;
|
||||||
|
let fixture: ComponentFixture<UserSummaryComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [UserSummaryComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(UserSummaryComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { Component, Inject } from '@angular/core';
|
||||||
|
import { MatListModule } from '@angular/material/list';
|
||||||
|
import { User } from '../../../models/user-management.api.models'
|
||||||
|
import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'user-summary',
|
||||||
|
standalone: true,
|
||||||
|
imports: [MatListModule],
|
||||||
|
templateUrl: './user-summary.component.html',
|
||||||
|
styleUrl: './user-summary.component.scss'
|
||||||
|
})
|
||||||
|
export class UserSummaryComponent {
|
||||||
|
|
||||||
|
constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public user: User) {
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { AfterViewInit, Component, ViewChild } from '@angular/core';
|
import { AfterViewInit, Component, ViewChild, inject } from '@angular/core';
|
||||||
import { GuiCellEdit, GuiSelectedRow } from '@generic-ui/ngx-grid';
|
import { GuiCellEdit, GuiSelectedRow } from '@generic-ui/ngx-grid';
|
||||||
import { UserTableComponent } from '../../components/tables/user-table/user-table.component';
|
import { UserTableComponent } from '../../components/tables/user-table/user-table.component';
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
@ -11,9 +11,13 @@ import { firstValueFrom, forkJoin } from 'rxjs';
|
|||||||
import Swal from 'sweetalert2';
|
import Swal from 'sweetalert2';
|
||||||
import { env } from '../../../environments/environment'
|
import { env } from '../../../environments/environment'
|
||||||
|
|
||||||
|
import { UserSummaryComponent } from '../../components/summaries/user-summary/user-summary.component'
|
||||||
|
import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [UserTableComponent, MatTabsModule, GroupTableComponent, ModuleTableComponent],
|
imports: [UserTableComponent, MatTabsModule, GroupTableComponent, ModuleTableComponent, MatButtonModule, MatBottomSheetModule],
|
||||||
selector: 'app-user',
|
selector: 'app-user',
|
||||||
templateUrl: './user.component.html',
|
templateUrl: './user.component.html',
|
||||||
styleUrl: './user.component.css'
|
styleUrl: './user.component.css'
|
||||||
@ -36,6 +40,8 @@ export class UserComponent extends BasePageComponent implements AfterViewInit {
|
|||||||
|
|
||||||
private sUsername = null;
|
private sUsername = null;
|
||||||
|
|
||||||
|
private _bottomSheet = inject(MatBottomSheet);
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
ngAfterViewInit(): void {
|
||||||
this.buttonVisibilityService.setVisibleOnly(this.refreshService, this.creationService, this.updateService)
|
this.buttonVisibilityService.setVisibleOnly(this.refreshService, this.creationService, this.updateService)
|
||||||
this.refreshService.removeAll()
|
this.refreshService.removeAll()
|
||||||
@ -63,6 +69,7 @@ export class UserComponent extends BasePageComponent implements AfterViewInit {
|
|||||||
if (this.sUsername != null) {
|
if (this.sUsername != null) {
|
||||||
this.groupTable.fetchDataByUsername(this.sUsername);
|
this.groupTable.fetchDataByUsername(this.sUsername);
|
||||||
this.moduleTable.fetchDataByUsername(this.sUsername)
|
this.moduleTable.fetchDataByUsername(this.sUsername)
|
||||||
|
this.openBottomSheet(rows[0].source);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -102,4 +109,10 @@ export class UserComponent extends BasePageComponent implements AfterViewInit {
|
|||||||
public get detailed_user_columns() {
|
public get detailed_user_columns() {
|
||||||
return env.columnNames.user.detailed
|
return env.columnNames.user.detailed
|
||||||
}
|
}
|
||||||
|
|
||||||
|
openBottomSheet(user: User): void {
|
||||||
|
this._bottomSheet.open(UserSummaryComponent, {
|
||||||
|
data: user
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user