feat(person): implements toast component

src/app/features/person/components/form/person-form/person-form.component.ts → src/app/features/person/components/form/person-form.component.ts

@@ -3,7 +3,7 @@ import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 
-import { ButtonComponent } from '../../../../../shared/components/button/button.component';
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
 
 @Component({
   selector: 'app-person-form',

src/app/features/person/pages/create/person-create.component.ts

@@ -3,12 +3,13 @@ import { Router } from '@angular/router';
 import { PersonService } from '../../person.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
-import { PersonFormComponent } from '../../components/form/person-form/person-form.component';
+import { PersonFormComponent } from '../../components/form/person-form.component';
+import { ToastComponent } from '../../../../shared/components/toast/toast.component';
 
 @Component({
   selector: 'app-person-create.component',
   standalone: true,
-  imports: [PersonFormComponent],
+  imports: [PersonFormComponent, ToastComponent],
   templateUrl: './person-create.component.html',
   styleUrls: ['./person-create.component.scss'],
 })
@@ -48,14 +49,26 @@ export class PersonCreateComponent {
 
   showSuccessToast(person: any) {
 
-    const snackBarRef = this.snackBar.open('Pessoa cadastrada com sucesso',
-      'Ver lista',
-      { duration: 5000 }
-    );
+    this.snackBar.openFromComponent(ToastComponent, {
+    panelClass: 'custom-toast',
+    horizontalPosition: 'center',
+    verticalPosition: 'top',
+    data: {
+      person,
+      onAction: (action: string) => {
+
+        if (action === 'list') {
+          this.router.navigate(['/person']);
+        }
+
+        if (action === 'new') {
+          this.personFormComponent.resetForm();
+        }
+
+      }
+    }
+  });
 
-    snackBarRef.onAction().subscribe(() => {
-      this.router.navigate(['/person']);
-    });
   }
 
-}
+}

src/app/shared/components/toast/toast.component.html

@@ -0,0 +1,49 @@
+<div class="toast">
+
+  <div class="toast-header">
+
+    <div class="toast-icon">
+      ✓
+    </div>
+
+    <div class="toast-title">
+      Cadastro realizado com sucesso
+    </div>
+
+  </div>
+
+  <div class="toast-person">
+
+    <div class="toast-name">
+      {{ data.person.personName }}
+    </div>
+
+    <div class="toast-info">
+      {{ data.person.cpf }}
+      •
+      {{ data.person.email }}
+      •
+      registrado agora
+    </div>
+
+  </div>
+
+  <div class="toast-actions">
+
+    <app-button
+      class="register-btn"
+      (click)="action('new')"
+    >
+      Cadastrar outra
+    </app-button>
+
+    <app-button
+      class="back-to-list-btn" 
+      (click)="action('list')"
+    >
+      Voltar para Pessoas
+    </app-button>
+
+  </div>
+
+</div>

src/app/shared/components/toast/toast.component.scss

@@ -0,0 +1,120 @@
+.toast {
+  width: 420px;
+
+  padding: 20px;
+
+  background: #1B2130;
+
+  border-radius: 10px;
+
+  border: 1px solid rgba(76, 141, 255, 0.15);
+
+  color: #E6EDF7;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  margin: 0 auto;
+}
+
+/* HEADER */
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.toast-icon {
+  width: 28px;
+  height: 28px;
+
+  border-radius: 50%;
+
+  background: #1F8B4C;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-weight: bold;
+  color: white;
+}
+
+.toast-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+/* DADOS */
+
+.toast-person {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.toast-name {
+  font-weight: 500;
+}
+
+.toast-info {
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+/* BOTÕES */
+
+.toast-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.register-btn {
+  padding: 10px 18px;
+
+  background: linear-gradient(
+    90deg,
+    #5A98FF 0%,
+    #2E5599 100%
+  );
+
+  border: 1px solid;
+  border-radius: 6px;
+  border-color: #455A80;
+
+  color: #FFFFFF;
+  font-weight: 500;
+
+  white-space: nowrap;
+}
+
+.register-btn:hover {
+  background: #4C8DFF;
+  filter: brightness(1.1);
+
+  white-space: nowrap;
+}
+
+.back-to-list-btn {
+  padding: 10px 18px;
+
+  background: transparent;
+
+  border: 1px solid;
+  border-radius: 6px;
+  border-color: #455A80;
+
+  color: #9AA6BF;
+  font-weight: 500;
+
+  white-space: nowrap;
+}
+
+.back-to-list-btn:hover {
+  background: rgba(69, 90, 128, 0.1);
+  filter: brightness(1.1);
+
+  white-space: nowrap;
+}

src/app/shared/components/toast/toast.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastComponent } from './toast.component';
+
+describe('ToastComponent', () => {
+  let component: ToastComponent;
+  let fixture: ComponentFixture<ToastComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ToastComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ToastComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/toast/toast.component.ts

@@ -0,0 +1,33 @@
+import { Component, Inject, HostListener } from '@angular/core';
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-toast',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  templateUrl: './toast.component.html',
+  styleUrls: ['./toast.component.scss'],
+})
+export class ToastComponent {
+
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: any,
+    private snackBarRef: MatSnackBarRef<ToastComponent>
+  ) {}
+
+  @HostListener('document:keydown.escape') handleEscape() {
+    this.snackBarRef.dismiss();
+  }
+
+  close() {
+    this.snackBarRef.dismiss();
+  }
+
+  action(action: string) {
+    this.snackBarRef.dismissWithAction();
+    this.data.onAction(action);
+  }
+
+}

src/styles.scss

@@ -25,3 +25,13 @@ body {
   border-color: #2E3A55;
   color: #A9B1C6;
 }
+
+.custom-toast .mat-mdc-snack-bar-container {
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
+.custom-toast {
+  margin-top: 80px;
+}