diff --git a/src/app/features/person/components/form/person-form/person-form.component.html b/src/app/features/person/components/form/person-form.component.html
similarity index 100%
rename from src/app/features/person/components/form/person-form/person-form.component.html
rename to src/app/features/person/components/form/person-form.component.html
diff --git a/src/app/features/person/components/form/person-form/person-form.component.scss b/src/app/features/person/components/form/person-form.component.scss
similarity index 100%
rename from src/app/features/person/components/form/person-form/person-form.component.scss
rename to src/app/features/person/components/form/person-form.component.scss
diff --git a/src/app/features/person/components/form/person-form/person-form.component.spec.ts b/src/app/features/person/components/form/person-form.component.spec.ts
similarity index 100%
rename from src/app/features/person/components/form/person-form/person-form.component.spec.ts
rename to src/app/features/person/components/form/person-form.component.spec.ts
diff --git a/src/app/features/person/components/form/person-form/person-form.component.ts b/src/app/features/person/components/form/person-form.component.ts
similarity index 92%
rename from src/app/features/person/components/form/person-form/person-form.component.ts
rename to src/app/features/person/components/form/person-form.component.ts
index bfda1ab..51574f1 100644
--- a/src/app/features/person/components/form/person-form/person-form.component.ts
+++ b/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',
diff --git a/src/app/features/person/pages/create/person-create.component.ts b/src/app/features/person/pages/create/person-create.component.ts
index d0744b6..46048e3 100644
--- a/src/app/features/person/pages/create/person-create.component.ts
+++ b/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']);
- });
}
-}
+}
\ No newline at end of file
diff --git a/src/app/shared/components/toast/toast.component.html b/src/app/shared/components/toast/toast.component.html
new file mode 100644
index 0000000..a1d0ee7
--- /dev/null
+++ b/src/app/shared/components/toast/toast.component.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+ {{ data.person.personName }}
+
+
+
+ {{ data.person.cpf }}
+ •
+ {{ data.person.email }}
+ •
+ registrado agora
+
+
+
+
+
+
+
+ Cadastrar outra
+
+
+
+ Voltar para Pessoas
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/components/toast/toast.component.scss b/src/app/shared/components/toast/toast.component.scss
new file mode 100644
index 0000000..688e939
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/shared/components/toast/toast.component.spec.ts b/src/app/shared/components/toast/toast.component.spec.ts
new file mode 100644
index 0000000..57fa7b6
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ToastComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ToastComponent);
+ component = fixture.componentInstance;
+ await fixture.whenStable();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/toast/toast.component.ts b/src/app/shared/components/toast/toast.component.ts
new file mode 100644
index 0000000..3086cc1
--- /dev/null
+++ b/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
+ ) {}
+
+ @HostListener('document:keydown.escape') handleEscape() {
+ this.snackBarRef.dismiss();
+ }
+
+ close() {
+ this.snackBarRef.dismiss();
+ }
+
+ action(action: string) {
+ this.snackBarRef.dismissWithAction();
+ this.data.onAction(action);
+ }
+
+}
diff --git a/src/styles.scss b/src/styles.scss
index 80d48d7..aebddfe 100644
--- a/src/styles.scss
+++ b/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;
+}
\ No newline at end of file