54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { AfterViewInit, Component, OnDestroy } from "@angular/core";
|
|
import { Subject, takeUntil } from "rxjs";
|
|
import { INotification } from "../../services/notification/notification.dto";
|
|
import { NotificationService } from "../../services/notification/notification.service";
|
|
|
|
@Component({
|
|
standalone: true,
|
|
selector: "app-notification",
|
|
templateUrl: "./notification.component.html",
|
|
styleUrls: ["./notification.component.less"],
|
|
imports: [CommonModule],
|
|
})
|
|
export class NotificationComponent implements AfterViewInit, OnDestroy {
|
|
show_notification = false;
|
|
isError = false;
|
|
private closeNotificationTimer: ReturnType<typeof setTimeout> | null = null;
|
|
notification: INotification = { isError: false, message: "", name: "", time: 0 };
|
|
|
|
private destroy$ = new Subject<void>();
|
|
|
|
constructor(private notificationService: NotificationService) {}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.notificationService.notification$
|
|
.asObservable()
|
|
.pipe(takeUntil(this.destroy$))
|
|
.subscribe((data) => {
|
|
if (!data) return;
|
|
this.notification = data;
|
|
this.show_notification = true;
|
|
if (this.closeNotificationTimer) {
|
|
clearTimeout(this.closeNotificationTimer);
|
|
}
|
|
this.closeNotificationTimer = setTimeout(() => {
|
|
this.show_notification = false;
|
|
}, data.time);
|
|
});
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.destroy$.next();
|
|
this.destroy$.complete();
|
|
}
|
|
|
|
closeNotification() {
|
|
this.show_notification = false;
|
|
}
|
|
|
|
get borderColor(): string {
|
|
return this.notification.isError ? "border-red-600" : "border-green-600";
|
|
}
|
|
}
|