Implementação do componente de contato

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { PqrComponent } from './simulator/pqr/pqr.component';
 import { QualityComponent } from './quality/quality.component';
 import { HasErrorGuard } from './shared/guards/has-error/has-error.guard';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
+import { ContactComponent } from './contact/contact.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, canDeactivate: [HasErrorGuard] },
@@ -16,6 +17,7 @@ const routes: Routes = [
   { path: 'about', component: AboutComponent },
   { path: 'quality', component: QualityComponent },
   { path: 'team', component: TeamComponent },
+  { path: 'contact', component: ContactComponent },
   { path: 'reset-password/:token', component: ResetPasswordComponent },
   { path: 'notfound', component: NotFoundComponent },
   { path: '**', pathMatch: 'full', redirectTo: 'notfound' }

src/app/app.component.html

@@ -54,8 +54,8 @@
           <li routerLinkActive="active">
             <a routerLink="team" queryParamsHandling="merge">Equipe</a>
           </li>
-          <li>
-            <a href="http://dadoseducacionais.c3sl.ufpr.br/#/contato" target="_blank">Contato</a>
+          <li routerLinkActive="active">
+            <a routerLink="contact" queryParamsHandling="merge">Contato</a>
           </li>
           <div class="pull-left">
             <app-profile [isInverseColor]="isInverseColor"></app-profile>
@@ -116,7 +116,7 @@
               <a routerLink="team" queryParamsHandling="merge">Equipe</a>
             </li>
             <li>
-              <a href="http://dadoseducacionais.c3sl.ufpr.br/#/contato" target="_blank">Contato</a>
+              <a routerLink="contact" queryParamsHandling="merge">Contato</a>
             </li>
             <li class="disabled">
               <a>Legislação</a>

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { ProfileComponent } from './profile/profile.component';
 import { AboutComponent } from './about/about.component';
 import { QualityComponent } from './quality/quality.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
+import { ContactComponent } from './contact/contact.component';
 
 registerLocaleData(localePt, 'pt');
 
@@ -44,7 +45,8 @@ registerLocaleData(localePt, 'pt');
     ProfileComponent,
     AboutComponent,
     QualityComponent,
-    ResetPasswordComponent
+    ResetPasswordComponent,
+    ContactComponent
   ],
   entryComponents: [
     LoginComponent,

src/app/contact/contact.component.html

+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-lg-offset-2">
+            <h2 class="title">Dúvidas e/ou sugestões?</h2>
+            <h2 class="title">Envie pra gente!</h2>
+            <hr>
+            <div class="form-group">
+                <label for="fullName">Nome completo</label>
+                <input type="text" class="form-control" id="fullName" [(ngModel)]="fullName"
+                    placeholder="Insira seu nome completo">
+            </div>
+            <div class="form-group">
+                <label for="email">E-mail</label>
+                <input type="email" class="form-control" id="email" [(ngModel)]="email" placeholder="Insira seu e-mail">
+            </div>
+            <div class="form-group">
+                <label for="message">Mensagem</label>
+                <textarea class="form-control message" rows="10" id="message" [(ngModel)]="message"
+                    placeholder="Escreva sua dúvida e/ou sugestão"></textarea>
+            </div>
+            <div class="text-center">
+                <button type="button" class="btn btn-primary send" (click)="send()">Enviar</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/contact/contact.component.scss

+@import "../shared/styles/variables.scss";
+
+.title {
+    color: $navbar-color;
+}
+
+.message {
+    resize: none;
+}
+
+.send {
+    width: 120px;
+}
\ No newline at end of file

src/app/contact/contact.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contact/contact.component.ts

+import { Component, OnInit } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+
+import { NotificationService } from '../shared/services/notification/notification.service';
+import { UtilitiesService } from '../shared/services/utilities/utilities.service';
+import { HttpService } from '../shared/services/http/http.service';
+import { BaseUnsubscribe } from '../shared/entities/base/base-unsubscribe';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent extends BaseUnsubscribe implements OnInit {
+
+  fullName: string;
+  email: string;
+  message: string;
+
+  private notificationTitle: string = 'Atenção!';
+
+  constructor(private notificationService: NotificationService, private utilitiesService: UtilitiesService, private httpService: HttpService) {
+    super();
+  }
+
+  ngOnInit() {
+  }
+
+  send() {
+    if (this.contactIsValid()) {
+      const postBody: any = {
+        name: this.fullName,
+        email: this.email,
+        contents: this.message,
+        origin: 'SimCAQ'
+      };
+
+      this.httpService.post<any>(`${this.httpService.apiEndpointDadosEducacionaisHomV1}/message`, postBody).pipe(
+        takeUntil(this.unsubscribe))
+        .subscribe(
+          () => {
+            this.fullName = null;
+            this.email = null;
+            this.message = null;
+            this.notificationService.showSuccess('Obrigado pelo seu contato!', 'Contato enviado com sucesso!');
+          },
+          error => {
+            if (error && error.errorBody && error.errorBody.error && error.errorBody.text) {
+              this.notificationService.showError(error.errorBody.text, error.errorBody.error);
+            } else {
+              this.notificationService.showError('Tente mais tarde!', 'Erro ao enviar o contato!');
+            }
+          });
+    }
+  }
+
+  private contactIsValid(): boolean {
+    if (!this.fullName || !this.email || !this.message) {
+      this.notificationService.showError('Todos os campos devem ser informados!', this.notificationTitle);
+      return false;
+    }
+
+    if (!this.utilitiesService.emailIsValid(this.email)) {
+      this.notificationService.showError('Email inválido!', this.notificationTitle);
+      return false;
+    }
+
+    return true;
+  }
+
+}