-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(theme-shared): add new toaster service
related issue: #2537
- Loading branch information
Showing
1 changed file
with
90 additions
and
9 deletions.
There are no files selected for viewing
99 changes: 90 additions & 9 deletions
99
npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,96 @@ | ||
import { Injectable } from '@angular/core'; | ||
import { AbstractToaster } from '../abstracts/toaster'; | ||
import { Message } from 'primeng/components/common/message'; | ||
import { MessageService } from 'primeng/components/common/messageservice'; | ||
import { Toaster } from '../models'; | ||
import { ReplaySubject } from 'rxjs'; | ||
|
||
@Injectable({ providedIn: 'root' }) | ||
export class ToasterService extends AbstractToaster { | ||
constructor(protected messageService: MessageService) { | ||
super(messageService); | ||
@Injectable({ | ||
providedIn: 'root', | ||
}) | ||
export class ToasterService { | ||
toasts$ = new ReplaySubject<Toaster.Toast[]>(1); | ||
|
||
private lastId = -1; | ||
|
||
private toasts = [] as Toaster.Toast[]; | ||
|
||
/** | ||
* Creates an info toast with given parameters. | ||
* @param message Content of the toast | ||
* @param title Title of the toast | ||
* @param options Spesific style or structural options for individual toast | ||
*/ | ||
info(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) { | ||
return this.show(message, title, 'info', options); | ||
} | ||
|
||
/** | ||
* Creates a success toast with given parameters. | ||
* @param message Content of the toast | ||
* @param title Title of the toast | ||
* @param options Spesific style or structural options for individual toast | ||
*/ | ||
success(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) { | ||
return this.show(message, title, 'success', options); | ||
} | ||
|
||
/** | ||
* Creates a warning toast with given parameters. | ||
* @param message Content of the toast | ||
* @param title Title of the toast | ||
* @param options Spesific style or structural options for individual toast | ||
*/ | ||
warn(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) { | ||
return this.show(message, title, 'warning', options); | ||
} | ||
|
||
/** | ||
* Creates an error toast with given parameters. | ||
* @param message Content of the toast | ||
* @param title Title of the toast | ||
* @param options Spesific style or structural options for individual toast | ||
*/ | ||
error(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) { | ||
return this.show(message, title, 'error', options); | ||
} | ||
|
||
/** | ||
* Creates a toast with given parameters. | ||
* @param message Content of the toast | ||
* @param title Title of the toast | ||
* @param severity Sets color of the toast. "success", "warning" etc. | ||
* @param options Spesific style or structural options for individual toast | ||
*/ | ||
|
||
show( | ||
message: string, | ||
title: string = null, | ||
severity: Toaster.Severity = 'neutral', | ||
options: Partial<Toaster.ToastOptions> = null, | ||
) { | ||
const id = ++this.lastId; | ||
this.toasts.push({ | ||
message, | ||
title, | ||
severity, | ||
options: { closable: true, ...options, id }, | ||
}); | ||
this.toasts$.next(this.toasts); | ||
return id; | ||
} | ||
|
||
/** | ||
* Removes the toast with given id. | ||
* @param id ID of the toast to be removed. | ||
*/ | ||
remove(id: number) { | ||
this.toasts = this.toasts.filter(toast => toast.options.id !== id); | ||
this.toasts$.next(this.toasts); | ||
} | ||
|
||
addAll(messages: Message[]): void { | ||
this.messageService.addAll(messages.map(message => ({ key: this.key, ...message }))); | ||
/** | ||
* Removes all open toasts at once. | ||
*/ | ||
removeAll() { | ||
this.toasts = []; | ||
this.toasts$.next(this.toasts); | ||
} | ||
} |
e8ac235
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have implemented a custom theme and I was able to use the
@abp/ng.core
package but I couldn't previously use@abp/ng.theme.shared
because it used primeng. @thediaval does this mean we no longer rely on primeng in theme-shared?e8ac235
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@olicooper First of all sorry for my late response.
We're still discussing replacing the primeng components with our components. In the mean time you can use our Toast, Confirmation components instead of primeng.
We also developed a table component but it currently uses primeng table styles.
e8ac235
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is great news! Thanks for your hard work :)