Suspectus/gandalf-reborn
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add DashboardComponent with layout and styling; update routing to include dashboard

Browse Source
This commit is contained in:
Christian Werner 2025-10-21 03:48:02 +02:00
parent debe82afdb
commit 3d4f86c6a0
6 changed files with 113 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/angular/frontend/src/app/app.routes.ts
View File

@ -4,6 +4,7 @@ import {HomeComponent} from './components/home/home.component';
import {authGuard} from './guards/auth.guard';
import {ShellComponent} from './components/shell/shell.component';
import {subjectResolver} from './resolvers/subject.resolver';
import {DashboardComponent} from './components/dashboard/dashboard.component';
export const routes: Routes = [
{
@ -24,7 +25,7 @@ export const routes: Routes = [
{
title: 'Dashboard',
path: 'dashboard',
component: HomeComponent,
component: DashboardComponent,
data: { showInNav: true },
children: [
{
@ -62,7 +63,7 @@ export const routes: Routes = [
]
}
]
},
}
],
canActivate: [authGuard],
resolve: {

52
src/angular/frontend/src/app/components/dashboard/dashboard.component.html Normal file
View File

@ -0,0 +1,52 @@
<app-panel class="neutral-80">
<div class="panel-header">
<span class="count">55</span>
<span class="label">Users</span>
</div>
<span class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</app-panel>
<app-panel class="neutral-80">
<div class="panel-header">
<span class="count">55</span>
<span class="label">Tenants</span>
</div>
<span class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</app-panel>
<app-panel class="neutral-80"><div class="panel-header">
<span class="count">55</span>
<span class="label">Apps</span>
</div>
<span class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span></app-panel>
<app-panel class="neutral-80">
<div class="panel-header">
<span class="count">55</span>
<span class="label">Groups</span>
</div>
<span class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</app-panel>
<app-panel class="neutral-80">
<div class="panel-header">
<span class="count">55</span>
<span class="label">Roles</span>
</div>
<span class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</app-panel>
<app-panel class="neutral-80">
<div class="panel-header">
<span class="count">55</span>
<span class="label">Authorities</span>
</div>
<span class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</app-panel>

21
src/angular/frontend/src/app/components/dashboard/dashboard.component.scss Normal file
View File

@ -0,0 +1,21 @@
:host {
display: flex;
flex-direction: row;
gap: 1rem;
flex-wrap: wrap;
app-panel {
flex: 1 1 calc(20% - 1rem);
flex-direction: column;
min-width: 350px;
.panel-header {
display: flex;
gap: 1rem;
font-size: 2rem;
}
.description {
color: var(--neutral-30);
}
}
}

23
src/angular/frontend/src/app/components/dashboard/dashboard.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [DashboardComponent]
})
.compileComponents();
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
src/angular/frontend/src/app/components/dashboard/dashboard.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
import {PanelComponent} from '../panel/panel.component';
@Component({
selector: 'app-dashboard',
imports: [
PanelComponent
],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss'
})
export class DashboardComponent {
}

3
src/angular/frontend/src/app/components/panel/panel.component.scss
View File

@ -4,12 +4,9 @@
gap: 1rem;
padding: 1rem;
align-items: center;
background-color: var(--bg-color);
color: var(--text-color);
border-radius: 0.5rem;
margin: 1rem;
}