feat: RefreshService hinzugefügt und in der Navigation integriert
- Implementiert den RefreshService zur Verwaltung und Ausführung von Aktionen. - Aktualisiert den Konstruktor, um RefreshService zu nutzen. - Hinzugefügt einen Button zur Ausführung aller Aktionen des RefreshService mit einer Rotationsanimation im Navbar.
This commit is contained in:
parent
95d2832ef8
commit
bf2356e10a
@ -92,4 +92,17 @@ html {
|
|||||||
|
|
||||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-icon:hover {
|
||||||
|
animation: rotate 1s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -30,6 +30,9 @@
|
|||||||
<!-- Right menu -->
|
<!-- Right menu -->
|
||||||
<div class="navbar-collapse justify-content-end me-5">
|
<div class="navbar-collapse justify-content-end me-5">
|
||||||
<a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
|
<a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
|
||||||
|
<button class="btn" (click)="refreshService.executeAll()">
|
||||||
|
<mat-icon>sync</mat-icon>
|
||||||
|
</button>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
|
||||||
aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()">
|
aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
|||||||
@ -7,10 +7,12 @@ import { LoginComponent } from '../login/login.component';
|
|||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { ColorModeBttnComponent } from '../components/common/color-mode-bttn/color-mode-bttn.component';
|
import { ColorModeBttnComponent } from '../components/common/color-mode-bttn/color-mode-bttn.component';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { RefreshService } from '../services/refresh.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [RouterModule, CommonModule, ColorModeBttnComponent],
|
imports: [RouterModule, CommonModule, ColorModeBttnComponent, MatIconModule],
|
||||||
selector: 'app-nav-menu',
|
selector: 'app-nav-menu',
|
||||||
templateUrl: './nav-menu.component.html',
|
templateUrl: './nav-menu.component.html',
|
||||||
styleUrls: ['./nav-menu.component.css']
|
styleUrls: ['./nav-menu.component.css']
|
||||||
@ -21,7 +23,7 @@ export class NavMenuComponent {
|
|||||||
}
|
}
|
||||||
isExpanded = false;
|
isExpanded = false;
|
||||||
|
|
||||||
constructor(public dialog: MatDialog, private authService: AuthenticationService) {
|
constructor(public dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService) {
|
||||||
this.authService.isAuthenticated().then().catch()
|
this.authService.isAuthenticated().then().catch()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { RefreshService } from './refresh.service';
|
||||||
|
|
||||||
|
describe('RefreshService', () => {
|
||||||
|
let service: RefreshService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(RefreshService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class RefreshService {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
private actions: Array<() => void> = [];
|
||||||
|
|
||||||
|
add(action: () => void): void {
|
||||||
|
this.actions.push(action);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeAll(): void {
|
||||||
|
this.actions = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
executeAll(): void {
|
||||||
|
this.actions.forEach(action => action());
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user