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 @@ +
+ +
+ +
+ ✓ +
+ +
+ Cadastro realizado com sucesso +
+ +
+ +
+ +
+ {{ 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