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

Refactor dashboard component to use ng-template for dynamic panel rendering; update counts and labels for better data representation

Browse Source
This commit is contained in:
Christian Werner 2025-10-22 02:57:13 +02:00
parent 30c7c5ea76
commit e14420420f
2 changed files with 30 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/angular/frontend/src/app/components/dashboard/dashboard.component.html
View File

@ -1,52 +1,21 @@
<app-panel class="neutral-80"> <ng-container *ngTemplateOutlet="panel; context: {count: 122, label: 'Users', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}"></ng-container>
<div class="panel-header"> <ng-container *ngTemplateOutlet="panel; context: {count: 44, label: 'Tenants', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}"></ng-container>
<span class="count">55</span> <ng-container *ngTemplateOutlet="panel; context: {count: 56, label: 'Apps', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}"></ng-container>
<span class="label">Users</span> <ng-container *ngTemplateOutlet="panel; context: {count: 155, label: 'Groups', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}"></ng-container>
</div> <ng-container *ngTemplateOutlet="panel; context: {count: 1166, label: 'Roles', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}"></ng-container>
<span class="description"> <ng-container *ngTemplateOutlet="panel; context: {count: 3580, label: 'Authorities', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}"></ng-container>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span> <ng-template #panel let-count="count" let-label="label" let-description="description">
</app-panel> <app-panel class="neutral-80">
<app-panel class="neutral-80"> <div class="panel-header">
<div class="panel-header"> <span class="count" [title]="count">{{count | shortNumber : 2}}</span>
<span class="count">55</span> <span class="label">{{label}}</span>
<span class="label">Tenants</span> </div>
</div> <span class="description">
<span class="description"> {{description}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</span> <div class="actions">
</app-panel> <app-link [href]="'/' + label.toLowerCase()">View {{label}}</app-link>
<app-panel class="neutral-80"><div class="panel-header"> </div>
<span class="count">55</span> </app-panel>
<span class="label">Apps</span> </ng-template>
</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>

10
src/angular/frontend/src/app/components/dashboard/dashboard.component.ts
View File

@ -1,10 +1,18 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {PanelComponent} from '../panel/panel.component'; import {PanelComponent} from '../panel/panel.component';
import {RouterLink} from '@angular/router';
import {NgTemplateOutlet} from '@angular/common';
import {LinkComponent} from '../link/link.component';
import {ShortNumberPipe} from '../../pipes/short-number.pipe';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
imports: [ imports: [
PanelComponent PanelComponent,
RouterLink,
NgTemplateOutlet,
LinkComponent,
ShortNumberPipe
], ],
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss' styleUrl: './dashboard.component.scss'