bastian/keyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard

Browse Source
This commit is contained in:
Bastian Wagner
2025-01-02 15:55:56 +01:00
parent efbfc2eb01
commit 5c6516095b
24 changed files with 490 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
client/src/app/modules/dashboard/dashboard.component.html
View File

@@ -0,0 +1,67 @@
<div class="dashboard-container">
<!-- Welcome Section -->
<div class="welcome-section">
<h1>Willkommen bei Keyvault Pro</h1>
<p>Verwalte deine Schlüssel und Systeme</p>
</div>
<!-- Quick Stats Cards -->
<div class="stats-grid">
<mat-card class="stat-card">
<mat-card-header>
<mat-icon>key</mat-icon>
<mat-card-title>Schlüssel</mat-card-title>
</mat-card-header>
<mat-card-content>
<span class="stat-number">{{ keyCount }}</span>
<p>Aktive Schlüssel</p>
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="/keys">Verwalten</button>
</mat-card-actions>
</mat-card>
<mat-card class="stat-card">
<mat-card-header>
<mat-icon>lock</mat-icon>
<mat-card-title>Zylinder</mat-card-title>
</mat-card-header>
<mat-card-content>
<span class="stat-number">{{ cylinderCount }}</span>
<p>Registrierte Zylinder</p>
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="/cylinders">Verwalten</button>
</mat-card-actions>
</mat-card>
<mat-card class="stat-card">
<mat-card-header>
<mat-icon>admin_panel_settings</mat-icon>
<mat-card-title>Systeme</mat-card-title>
</mat-card-header>
<mat-card-content>
<span class="stat-number">{{ systemCount }}</span>
<p>Aktive Systeme</p>
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="/systems">Verwalten</button>
</mat-card-actions>
</mat-card>
</div>
<!-- Recent Activity Section -->
<div class="recent-activity">
<h2>Letzte Aktivitäten</h2>
<mat-card>
<mat-card-content>
<ag-grid-angular
style="width: 100%; height: 300px;"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
</mat-card-content>
</mat-card>
</div>
</div>

85
client/src/app/modules/dashboard/dashboard.component.scss
View File

@@ -0,0 +1,85 @@
.dashboard-container {
padding: 24px;
height: calc(100% - 48px);
display: flex;
flex-direction: column;
gap: 24px;
.welcome-section {
h1 {
font-size: 24px;
margin: 0;
color: #333;
}
p {
margin: 8px 0 0 0;
color: #666;
}
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
.stat-card {
background: white;
border-radius: 8px;
mat-card-header {
padding: 16px 16px 0;
gap: 12px;
mat-icon {
color: #2D6B05;
}
}
mat-card-content {
padding: 16px;
text-align: center;
.stat-number {
font-size: 36px;
font-weight: 500;
color: #2D6B05;
}
p {
margin: 8px 0 0;
color: #666;
}
}
mat-card-actions {
padding: 8px;
display: flex;
justify-content: center;
}
}
}
.recent-activity {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
h2 {
margin: 0;
font-size: 20px;
color: #333;
}
mat-card {
flex: 1;
min-height: 0;
mat-card-content {
height: 100%;
padding: 16px;
}
}
}
}

55
client/src/app/modules/dashboard/dashboard.component.ts
View File

@@ -1,15 +1,62 @@
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
import { ColDef, GridOptions, GridReadyEvent } from 'ag-grid-community'; // Column Definition Type Interface
import { ApiService } from '../../shared/api.service';
import { MatIconModule } from '@angular/material/icon';
import {MatCardModule} from '@angular/material/card';
import { RouterModule } from '@angular/router';
import { AgLoadingComponent } from '../../shared/ag-grid/components/ag-loading/ag-loading.component';
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [AgGridAngular],
imports: [AgGridAngular, MatIconModule, AgGridAngular, MatCardModule, RouterModule],
providers: [DatePipe],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss'
})
export class DashboardComponent {
private api = inject(ApiService);
private datePipe = inject(DatePipe);
gridOptions: GridOptions = {
columnDefs: [
{ field: 'createdAt', headerName: 'Zeitpunkt', width: 160,
cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) },
{ field: 'message', headerName: 'Aktion', flex: 1 },
{ field: 'user', headerName: 'Benutzer', flex: 0,
cellRenderer: (data: any) => `${data.value?.firstName} ${data.value?.lastName}` }
],
pagination: true,
paginationPageSize: 10,
loading: true,
loadingOverlayComponent: AgLoadingComponent
};
// Stats
keyCount = 0;
cylinderCount = 0;
systemCount = 0;
ngOnInit() {
this.loadStats();
}
loadStats() {
this.api.getStats().subscribe(stats => {
this.keyCount = stats.keys;
this.cylinderCount = stats.cylinders;
this.systemCount = stats.systems;
});
}
onGridReady(params: GridReadyEvent) {
params.api.setGridOption("loading", true);
this.api.getActivities().subscribe(activity => {
params.api.setGridOption("rowData", activity)
params.api.setGridOption("loading", false);
});
}
}

22
client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.html Normal file
View File

@@ -0,0 +1,22 @@
<h2 mat-dialog-title>Manager entfernen</h2>
<mat-dialog-content>
<div class="warning-message">
<mat-icon color="warn">warning</mat-icon>
<p>
<b>{{ manager.firstName }} {{ manager.lastName }}</b> wirklich entfernen?
Der Benutzer hat dann keinen Zugriff mehr auf das System mit allen seinen Daten.
</p>
<p class="additional-info">
<!-- Additional information -->
<small>Diese Aktion kann nicht rückgängig gemacht werden.</small>
</p>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button [mat-dialog-close]="false">Abbrechen</button>
<button mat-raised-button color="warn" [mat-dialog-close]="true">
<mat-icon>delete</mat-icon>
Entfernen
</button>
</mat-dialog-actions>

19
client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.scss Normal file
View File

@@ -0,0 +1,19 @@
.warning-message {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
mat-icon {
font-size: 48px;
height: 48px;
width: 48px;
margin-bottom: 1rem;
}
.additional-info {
margin-top: 1rem;
color: rgba(0, 0, 0, 0.6);
}
}

34
client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.spec.ts Normal file
View File

@@ -0,0 +1,34 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RemoveManagerPopupComponent } from './remove-manager-popup.component';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
describe('RemoveManagerPopupComponent', () => {
let component: RemoveManagerPopupComponent;
let fixture: ComponentFixture<RemoveManagerPopupComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [RemoveManagerPopupComponent],
providers: [
{
provide: MatDialogRef,
useValue: []
},
{
provide: MAT_DIALOG_DATA,
useValue: ''
},
]
})
.compileComponents();
fixture = TestBed.createComponent(RemoveManagerPopupComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

18
client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { IUser } from '../../../../model/interface/user.interface';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'app-remove-manager-popup',
standalone: true,
imports: [MatButtonModule, MatDialogModule, MatIconModule],
templateUrl: './remove-manager-popup.component.html',
styleUrl: './remove-manager-popup.component.scss'
})
export class RemoveManagerPopupComponent {
readonly dialogRef = inject(MatDialogRef<RemoveManagerPopupComponent>);
readonly manager = inject<IUser>(MAT_DIALOG_DATA);
}

13
client/src/app/modules/system/components/system-manager/system-manager.component.html
View File

@@ -11,13 +11,20 @@
/>
</div>
<div class="flex gap-2 items-center">
<div class="flex gap-2 items-center p-4 bg-gray-50 rounded-md shadow-sm">
<mat-form-field class="flex-1">
<mat-label>Email</mat-label>
<input matInput [(ngModel)]="email">
<input matInput [(ngModel)]="email" placeholder="beispiel@email.com">
<mat-hint>Emailadresse des neuen Users eingeben</mat-hint>
<mat-icon matPrefix class="text-gray-400 mr-2">email</mat-icon>
</mat-form-field>
<button mat-button (click)="addManagerByEmail()" [disabled]="email == '' || email == null">Hinzufügen</button>
<button mat-raised-button
color="primary"
(click)="addManagerByEmail()"
[disabled]="email == '' || email == null">
<mat-icon>person_add</mat-icon>
Hinzufügen
</button>
</div>
</div>
</mat-dialog-content>

28
client/src/app/modules/system/components/system-manager/system-manager.component.scss
View File

@@ -1,3 +1,31 @@
:host {
min-height: 500px;
}
::ng-deep .ag-theme-alpine {
--ag-row-hover-color: rgb(243 244 246);
--ag-selected-row-background-color: rgb(229 231 235);
}
.p-4 {
padding: 1rem;
}
.bg-gray-50 {
background-color: rgb(249 250 251);
}
.rounded-md {
border-radius: 0.375rem;
}
.shadow-sm {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.text-gray-400 {
color: rgb(156 163 175);
}
.mr-2 {
margin-right: 0.5rem;
}

30
client/src/app/modules/system/components/system-manager/system-manager.component.ts
View File

@@ -12,17 +12,20 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AuthService } from '../../../../core/auth/auth.service';
import { HttpErrorResponse } from '@angular/common/http';
import { RemoveManagerPopupComponent } from '../remove-manager-popup/remove-manager-popup.component';
import { IUser } from '../../../../model/interface/user.interface';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'app-system-manager',
standalone: true,
imports: [AgGridAngular, MatDialogModule, MatButtonModule, MatInputModule, MatFormFieldModule, CommonModule, FormsModule],
imports: [AgGridAngular, MatDialogModule, MatButtonModule, MatInputModule, MatFormFieldModule, CommonModule, FormsModule, MatIconModule],
templateUrl: './system-manager.component.html',
styleUrl: './system-manager.component.scss'
})
export class SystemManagerComponent {
gridApi!: GridApi;
gridApi!: GridApi;
gridOptions: GridOptions = HELPER.getGridOptions();
readonly dialogRef = inject(MatDialogRef<SystemManagerComponent>);
@@ -51,7 +54,7 @@ export class SystemManagerComponent {
return;
}
if (event.colDef.colId == 'delete') {
this.removeManagerByEmail(event.data.username);
this.removeManager(event.data);
}
},
}
@@ -95,12 +98,25 @@ export class SystemManagerComponent {
});
}
removeManagerByEmail(username: string) {
const resume = confirm('Soll der Manager wirklich entfernt werden?');
if (!resume) return;
openPopup(manager: IUser): Promise<boolean> {
return new Promise(resolve => {
this.dialog.open(RemoveManagerPopupComponent, {
data: manager,
disableClose: false,
autoFocus: false,
}).afterClosed().subscribe({
next: (n: boolean) => resolve(n)
})
})
}
async removeManager(manager: IUser) {
const resume = await this.openPopup(manager);
if (!resume) return;
this.gridApi.setGridOption("loading", true);
this.api.removeManager(this.system.id, username)
this.api.removeManager(this.system.id, manager.username)
.pipe(
this.toast.observe({
loading: 'Manager entfernen',