Files
nfflow/front/src/app/service/msg.service.ts
2024-03-31 20:09:20 +08:00

215 lines
5.6 KiB
TypeScript

import { Injectable, Inject } from '@angular/core';
import { Component } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import {
MatSnackBar,
MatSnackBarHorizontalPosition,
MatSnackBarVerticalPosition,
} from '@angular/material/snack-bar';
import {MatIconModule} from "@angular/material/icon";
interface SnackMessage {
type: "success" | "error" | "warning" | "info"
duration: number
data: string
}
@Injectable({
providedIn: 'root'
})
export class MsgService {
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'top';
constructor(
private _snackBar: MatSnackBar
) { }
success(data: string) {
this.open({ type: "success", duration: 1500, data: data })
}
info(data: string) {
this.open({ type: "info", duration: 2000, data: data })
}
warning(data: string) {
this.open({ type: "warning", duration: 3000, data: data })
}
error(data: string) {
this.open({ type: "error", duration: 3500, data: data })
}
open(msg: SnackMessage) {
switch (msg.type) {
case "success":
this._snackBar.openFromComponent(SnackMessageSuccess, {
data: msg.data,
duration: msg.duration,
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['success-snackbar'],
})
break;
case "info":
this._snackBar.openFromComponent(SnackMessageInfo, {
data: msg.data,
duration: msg.duration,
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['info-snackbar'],
})
break
case "warning":
this._snackBar.openFromComponent(SnackMessageWarning, {
data: msg.data,
duration: msg.duration,
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['warning-snackbar'],
})
break
case "error":
this._snackBar.openFromComponent(SnackMessageError, {
data: msg.data,
duration: msg.duration,
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['error-snackbar'],
})
break
default:
this._snackBar.openFromComponent(SnackMessageInfo, {
data: msg.data,
duration: msg.duration,
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['info-snackbar'],
})
break;
}
}
}
@Component({
selector: 'snack-message-success',
template: `
<div class="snack-message-success snack-message">
<div>
<mat-icon>cancel</mat-icon>
</div>
<div class="snack-message-content">
{{ data }}
</div>
</div>
`,
standalone: true,
imports: [
MatIconModule
],
styles: [`
.snack-message-success {
}
`]
})
export class SnackMessageSuccess {
constructor(
@Inject(MAT_SNACK_BAR_DATA) public data: string,
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
) { }
}
@Component({
selector: 'snack-message-info',
template: `
<div class="snack-message-info snack-message">
<div>
<mat-icon>cancel</mat-icon>
</div>
<div class="snack-message-content">
{{ data }}
</div>
</div>
`,
standalone: true,
imports: [
MatIconModule
],
styles: [`
.snack-message-info {
}
`]
})
export class SnackMessageInfo {
constructor(
@Inject(MAT_SNACK_BAR_DATA) public data: string,
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
) { }
}
@Component({
selector: 'snack-message-warning',
template: `
<div class="snack-message-warning snack-message">
<div>
<mat-icon>cancel</mat-icon>
</div>
<div class="snack-message-content">
{{ data }}
</div>
</div>
`,
standalone: true,
imports: [
MatIconModule
],
styles: [`
.snack-message-warning {
}
`]
})
export class SnackMessageWarning {
constructor(
@Inject(MAT_SNACK_BAR_DATA) public data: string,
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
) { }
}
@Component({
selector: 'snack-message-error',
template: `
<div class="snack-message-error snack-message">
<div>
<mat-icon>cancel</mat-icon>
</div>
<div class="snack-message-content">
{{ data }}
</div>
</div>
`,
standalone: true,
imports: [
MatIconModule
],
styles: [`
`]
})
export class SnackMessageError {
constructor(
@Inject(MAT_SNACK_BAR_DATA) public data: string,
@Inject(MAT_SNACK_BAR_DATA) public duration: number,
@Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
@Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
) { }
}