Feature/set up notification service (#3663)
* Set up notification service * Update changelogpull/3667/head
Thomas Kaul
2 months ago
committed by
GitHub
parent
9246a73f41
commit
2893d71377
@ -0,0 +1,27 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
import { IAlertDialogParams } from './interfaces/interfaces';
|
||||
|
||||
@Component({
|
||||
imports: [CommonModule, MatButtonModule, MatDialogModule],
|
||||
selector: 'gf-alert-dialog',
|
||||
standalone: true,
|
||||
styleUrls: ['./alert-dialog.scss'],
|
||||
templateUrl: './alert-dialog.html'
|
||||
})
|
||||
export class GfAlertDialogComponent {
|
||||
public discardLabel: string;
|
||||
public message: string;
|
||||
public title: string;
|
||||
|
||||
public constructor(public dialogRef: MatDialogRef<GfAlertDialogComponent>) {}
|
||||
|
||||
public initialize(aParams: IAlertDialogParams) {
|
||||
this.discardLabel = aParams.discardLabel;
|
||||
this.message = aParams.message;
|
||||
this.title = aParams.title;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
@if (title) {
|
||||
<div mat-dialog-title [innerHTML]="title"></div>
|
||||
}
|
||||
|
||||
@if (message) {
|
||||
<div mat-dialog-content [innerHTML]="message"></div>
|
||||
}
|
||||
|
||||
<div align="end" mat-dialog-actions>
|
||||
<button mat-button (click)="dialogRef.close()">{{ discardLabel }}</button>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
:host {
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
export interface IAlertDialogParams {
|
||||
confirmLabel?: string;
|
||||
discardLabel?: string;
|
||||
message?: string;
|
||||
title: string;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, HostListener } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
import { ConfirmationDialogType } from './confirmation-dialog.type';
|
||||
import { IConfirmDialogParams } from './interfaces/interfaces';
|
||||
|
||||
@Component({
|
||||
imports: [CommonModule, MatButtonModule, MatDialogModule],
|
||||
selector: 'gf-confirmation-dialog',
|
||||
standalone: true,
|
||||
styleUrls: ['./confirmation-dialog.scss'],
|
||||
templateUrl: './confirmation-dialog.html'
|
||||
})
|
||||
export class GfConfirmationDialogComponent {
|
||||
public confirmLabel: string;
|
||||
public confirmType: ConfirmationDialogType;
|
||||
public discardLabel: string;
|
||||
public message: string;
|
||||
public title: string;
|
||||
|
||||
public constructor(
|
||||
public dialogRef: MatDialogRef<GfConfirmationDialogComponent>
|
||||
) {}
|
||||
|
||||
@HostListener('window:keyup', ['$event'])
|
||||
public keyEvent(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter') {
|
||||
this.dialogRef.close('confirm');
|
||||
}
|
||||
}
|
||||
|
||||
public initialize(aParams: IConfirmDialogParams) {
|
||||
this.confirmLabel = aParams.confirmLabel;
|
||||
this.confirmType = aParams.confirmType;
|
||||
this.discardLabel = aParams.discardLabel;
|
||||
this.message = aParams.message;
|
||||
this.title = aParams.title;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
@if (title) {
|
||||
<div mat-dialog-title [innerHTML]="title"></div>
|
||||
}
|
||||
|
||||
@if (message) {
|
||||
<div mat-dialog-content [innerHTML]="message"></div>
|
||||
}
|
||||
|
||||
<div align="end" mat-dialog-actions>
|
||||
<button mat-button (click)="dialogRef.close('discard')">
|
||||
{{ discardLabel }}
|
||||
</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="confirmType"
|
||||
(click)="dialogRef.close('confirm')"
|
||||
>
|
||||
{{ confirmLabel }}
|
||||
</button>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
:host {
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
export enum ConfirmationDialogType {
|
||||
Accent = 'accent',
|
||||
Primary = 'primary',
|
||||
Warn = 'warn'
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import { ConfirmationDialogType } from '../confirmation-dialog.type';
|
||||
|
||||
export interface IConfirmDialogParams {
|
||||
confirmLabel?: string;
|
||||
confirmType: ConfirmationDialogType;
|
||||
discardLabel?: string;
|
||||
message?: string;
|
||||
title: string;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { ConfirmationDialogType } from '../confirmation-dialog/confirmation-dialog.type';
|
||||
|
||||
export interface IAlertParams {
|
||||
discardFn?: () => void;
|
||||
discardLabel?: string;
|
||||
message?: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface IConfirmParams {
|
||||
confirmFn: () => void;
|
||||
confirmLabel?: string;
|
||||
confirmType?: ConfirmationDialogType;
|
||||
disableClose?: boolean;
|
||||
discardFn?: () => void;
|
||||
discardLabel?: string;
|
||||
message?: string;
|
||||
title: string;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
|
||||
import { GfAlertDialogComponent } from './alert-dialog/alert-dialog.component';
|
||||
import { GfConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
|
||||
import { NotificationService } from './notification.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
GfAlertDialogComponent,
|
||||
GfConfirmationDialogComponent,
|
||||
MatDialogModule
|
||||
],
|
||||
providers: [NotificationService]
|
||||
})
|
||||
export class GfNotificationModule {}
|
||||
@ -0,0 +1,83 @@
|
||||
import { translate } from '@ghostfolio/ui/i18n';
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { isFunction } from 'lodash';
|
||||
|
||||
import { GfAlertDialogComponent } from './alert-dialog/alert-dialog.component';
|
||||
import { GfConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
|
||||
import { ConfirmationDialogType } from './confirmation-dialog/confirmation-dialog.type';
|
||||
import { IAlertParams, IConfirmParams } from './interfaces/interfaces';
|
||||
|
||||
@Injectable()
|
||||
export class NotificationService {
|
||||
private dialogMaxWidth: string;
|
||||
private dialogWidth: string;
|
||||
|
||||
public constructor(private matDialog: MatDialog) {}
|
||||
|
||||
public alert(aParams: IAlertParams) {
|
||||
if (!aParams.discardLabel) {
|
||||
aParams.discardLabel = translate('CLOSE');
|
||||
}
|
||||
|
||||
const dialog = this.matDialog.open(GfAlertDialogComponent, {
|
||||
autoFocus: false,
|
||||
maxWidth: this.dialogMaxWidth,
|
||||
width: this.dialogWidth
|
||||
});
|
||||
|
||||
dialog.componentInstance.initialize({
|
||||
discardLabel: aParams.discardLabel,
|
||||
message: aParams.message,
|
||||
title: aParams.title
|
||||
});
|
||||
|
||||
return dialog.afterClosed().subscribe((result) => {
|
||||
if (isFunction(aParams.discardFn)) {
|
||||
aParams.discardFn();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public confirm(aParams: IConfirmParams) {
|
||||
if (!aParams.confirmLabel) {
|
||||
aParams.confirmLabel = translate('YES');
|
||||
}
|
||||
|
||||
if (!aParams.discardLabel) {
|
||||
aParams.discardLabel = translate('CANCEL');
|
||||
}
|
||||
|
||||
const dialog = this.matDialog.open(GfConfirmationDialogComponent, {
|
||||
autoFocus: false,
|
||||
disableClose: aParams.disableClose || false,
|
||||
maxWidth: this.dialogMaxWidth,
|
||||
width: this.dialogWidth
|
||||
});
|
||||
|
||||
dialog.componentInstance.initialize({
|
||||
confirmLabel: aParams.confirmLabel,
|
||||
confirmType: aParams.confirmType || ConfirmationDialogType.Primary,
|
||||
discardLabel: aParams.discardLabel,
|
||||
message: aParams.message,
|
||||
title: aParams.title
|
||||
});
|
||||
|
||||
return dialog.afterClosed().subscribe((result) => {
|
||||
if (result === 'confirm' && isFunction(aParams.confirmFn)) {
|
||||
aParams.confirmFn();
|
||||
} else if (result === 'discard' && isFunction(aParams.discardFn)) {
|
||||
aParams.discardFn();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public setDialogMaxWidth(aDialogMaxWidth: string) {
|
||||
this.dialogMaxWidth = aDialogMaxWidth;
|
||||
}
|
||||
|
||||
public setDialogWidth(aDialogWidth: string) {
|
||||
this.dialogWidth = aDialogWidth;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue