FEAT: add toad service global.

timeless-api/src/main/webui/src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet />
+<p-toast position="bottom-right" key="toast"></p-toast>

timeless-api/src/main/webui/src/app/app.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { Toast } from 'primeng/toast';
 import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, Toast],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   providers: [MessageService],

timeless-api/src/main/webui/src/app/pages/sign/sign-in/sign-in.component.html

@@ -42,5 +42,3 @@ <h1 class="text-xl font-thin my-2">
     <a [routerLink]="['sign-up']" class="primary-emphasis font-normal">aqui</a>.
   </p>
 </form>
-
-<p-toast position="bottom-right" key="toast"> </p-toast>

timeless-api/src/main/webui/src/app/pages/sign/sign-in/sign-in.component.ts

@@ -6,10 +6,9 @@ import { Router, RouterLink } from '@angular/router';
 import { CardModule } from 'primeng/card';
 import { TimelessApiService } from '../../../timeless-api.service';
 import { FloatLabel } from 'primeng/floatlabel';
-import { MessageService } from 'primeng/api';
+import { ToastService } from '../../../services/toast.service';
 import { timelessLocalStorageKey } from '../../../constants';
 import { catchError, throwError } from 'rxjs';
-import { Toast } from 'primeng/toast';
 
 @Component({
   selector: 'app-sign-in',
@@ -20,19 +19,17 @@ import { Toast } from 'primeng/toast';
     CardModule,
     RouterLink,
     FloatLabel,
-    Toast,
   ],
   templateUrl: './sign-in.component.html',
   styleUrl: './sign-in.component.scss',
-  providers: [MessageService],
 })
 export class SignInComponent {
   private formBuilder = inject(FormBuilder);
 
   constructor(
     private readonly timelessApiService: TimelessApiService,
     private readonly router: Router,
-    private readonly messageService: MessageService,
+    private readonly toast: ToastService,
   ) {}
 
   form = this.formBuilder.group({
@@ -42,12 +39,10 @@ export class SignInComponent {
 
   onSubmit() {
     if (this.form.invalid) {
-      this.messageService.add({
-        key: 'toast',
-        severity: 'error',
-        summary: 'Algo está errado',
-        detail: 'O formulário de login se encontra inválido',
-      });
+      this.toast.error(
+        'Algo está errado',
+        'O formulário de login se encontra inválido',
+      );
       return;
     }
 
@@ -56,13 +51,10 @@ export class SignInComponent {
       .pipe(
         catchError((error) => {
           console.error('Login error:', error);
-          this.messageService.add({
-            key: 'toast',
-            severity: 'error',
-            summary: 'Erro ao fazer login',
-            detail:
-              'Não foi possível fazer login, verifique suas credenciais e tente novamente.',
-          });
+          this.toast.error(
+            'Erro ao fazer login',
+            'Não foi possível fazer login, verifique suas credenciais e tente novamente.',
+          );
           return throwError(() => error);
         }),
       )

timeless-api/src/main/webui/src/app/pages/sign/sign-up/sign-up.component.ts

@@ -12,7 +12,7 @@ import { Router, RouterLink } from '@angular/router';
 import { FloatLabel } from 'primeng/floatlabel';
 import { TimelessApiService } from '../../../timeless-api.service';
 import { catchError } from 'rxjs';
-import { MessageService } from 'primeng/api';
+import { ToastService } from '../../../services/toast.service';
 
 @Component({
   selector: 'app-sign-up',
@@ -42,7 +42,7 @@ export class SignUpComponent {
   constructor(
     private readonly timelessApiService: TimelessApiService,
     private readonly router: Router,
-    private readonly messageService: MessageService,
+    private readonly toast: ToastService,
   ) {}
 
   onSubmit() {
@@ -52,12 +52,7 @@ export class SignUpComponent {
         .pipe(
           catchError((err: any) => {
             if (err.error.message) {
-              this.messageService.add({
-                key: 'toast',
-                severity: 'error',
-                summary: 'Conflito',
-                detail: err.error.message,
-              });
+              this.toast.error('Conflito', err.error.message);
             }
             return err;
           }),

timeless-api/src/main/webui/src/app/pages/user-config/user-config.component.html

@@ -80,5 +80,3 @@
     </div>
   </p-card>
 </form>
-
-<p-toast position="bottom-right" key="toast"></p-toast>

timeless-api/src/main/webui/src/app/pages/user-config/user-config.component.ts

@@ -10,8 +10,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { TimelessApiService } from '../../timeless-api.service';
-import { MessageService } from 'primeng/api';
-import { Toast } from 'primeng/toast';
+import { ToastService } from '../../services/toast.service';
 
 @Component({
   selector: 'app-user-config',
@@ -21,7 +20,6 @@ import { Toast } from 'primeng/toast';
     InputMask,
     FormsModule,
     ReactiveFormsModule,
-    Toast,
     ButtonDirective,
   ],
   templateUrl: './user-config.component.html',
@@ -40,7 +38,7 @@ export class UserConfigComponent {
 
   constructor(
     private readonly timelessApiService: TimelessApiService,
-    private readonly messageService: MessageService,
+    private readonly toast: ToastService,
   ) {
     this.timelessApiService.userInfo().subscribe((response: any) => {
       this.hasPhoneNumber.set(response.hasPhoneNumber);
@@ -61,12 +59,7 @@ export class UserConfigComponent {
     }
 
     this.timelessApiService.updatePhoneNumber(phoneNumber).subscribe((_) => {
-      this.messageService.add({
-        key: 'toast',
-        severity: 'success',
-        summary: 'Tudo certo!',
-        detail: 'Seus dados foram atualizados',
-      });
+      this.toast.success('Tudo certo!', 'Seus dados foram atualizados');
     });
   }
 }

timeless-api/src/main/webui/src/app/services/toast.service.ts

@@ -0,0 +1,70 @@
+import { Injectable } from '@angular/core';
+import { MessageService } from 'primeng/api';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  private readonly defaultKey = 'toast';
+
+  constructor(private readonly messageService: MessageService) {}
+
+  show(message: ToastMessage) {
+    this.messageService.add({
+      key: this.defaultKey,
+      ...message,
+    });
+  }
+
+  success(summary: string, detail?: string, life = 3000) {
+    this.show({
+      severity: 'success',
+      summary,
+      detail,
+      life,
+    });
+  }
+
+  error(summary: string, detail?: string, life = 5000) {
+    this.show({
+      severity: 'error',
+      summary,
+      detail,
+      life,
+    });
+  }
+
+  info(summary: string, detail?: string, life = 3000) {
+    this.show({
+      severity: 'info',
+      summary,
+      detail,
+      life,
+    });
+  }
+
+  warn(summary: string, detail?: string, life = 4000) {
+    this.show({
+      severity: 'warn',
+      summary,
+      detail,
+      life,
+    });
+  }
+
+  clearAll() {
+    this.messageService.clear();
+  }
+}
+
+export interface ToastMessage {
+  key?: string;
+  severity?: 'success' | 'info' | 'warn' | 'error' | string;
+  summary?: string;
+  detail?: string;
+  life?: number;
+  sticky?: boolean;
+  closable?: boolean;
+  data?: any;
+  id?: any;
+}