otf-frontend/client/src/app/layout/feedback/feedback.component.ts

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 import {Component, OnInit} from '@angular/core';\r
  18 import {routerTransition} from 'app/router.animations';\r
  19 import {FormControl, FormGroup, Validators} from '@angular/forms';\r
  20 import {MatDialog} from '@angular/material';\r
  21 import {AlertModalComponent} from '../../shared/modules/alert-modal/alert-modal.component';\r
  22 import {FeedbackService} from "../../shared/services/feedback.service";\r
  23 \r
  24 @Component({\r
  25     selector: 'app-feedback',\r
  26     templateUrl: './feedback.component.pug',\r
  27     styleUrls: ['./feedback.component.scss'],\r
  28     animations: [routerTransition()]\r
  29 })\r
  30 export class FeedbackComponent implements OnInit {\r
  31     private firstName: string;\r
  32     private lastName: string;\r
  33     private email: string;\r
  34     private message: string;\r
  35 \r
  36     public FeedbackFormGroup: FormGroup;\r
  37     private FirstNameFormControl: FormControl;\r
  38     private LastNameFormControl: FormControl;\r
  39     private EmailFormControl: FormControl;\r
  40     private MessageFormControl: FormControl;\r
  41 \r
  42     constructor(\r
  43         private ResponseMatDialog: MatDialog,\r
  44         private feedback: FeedbackService\r
  45     ) {\r
  46     }\r
  47 \r
  48 \r
  49     // @ViewChild('feedbackForm') private FeedBackForm;\r
  50 \r
  51     ngOnInit(): void {\r
  52         this.createFormControls();\r
  53         this.createFormGroup();\r
  54     }\r
  55 \r
  56     private createFormControls() {\r
  57         this.FirstNameFormControl = new FormControl('', [Validators.required]);\r
  58         this.LastNameFormControl = new FormControl('', [Validators.required]);\r
  59         this.EmailFormControl = new FormControl('', [Validators.required, Validators.email]);\r
  60         this.MessageFormControl = new FormControl('', [Validators.required]);\r
  61     }\r
  62 \r
  63     private createFormGroup() {\r
  64         this.FeedbackFormGroup = new FormGroup({\r
  65             firstName: this.FirstNameFormControl,\r
  66             lastName: this.LastNameFormControl,\r
  67             email: this.EmailFormControl,\r
  68             message: this.MessageFormControl\r
  69         });\r
  70     }\r
  71 \r
  72     // submit button action\r
  73     public onSubmitFeedback() {\r
  74         if (!this.FeedbackFormGroup.invalid) {\r
  75             // console.log(this.FeedbackFormGroup.getRawValue())\r
  76             this.feedback.sendFeedback(this.FeedbackFormGroup.getRawValue()).subscribe(\r
  77                 (result) => {\r
  78                     this.sendFeedbackAlert('ok', 'Feedback sent!');\r
  79                 },\r
  80                 (error) => {\r
  81                     this.sendFeedbackAlert('warning', 'Please verify form fields are correct.');\r
  82                 }\r
  83             )        }\r
  84         else{\r
  85             this.sendFeedbackAlert('warning', 'Please verify form fields are correct.');\r
  86         }\r
  87     }\r
  88 \r
  89     private sendFeedbackAlert(type: string, message: string) {\r
  90         this.ResponseMatDialog.open(AlertModalComponent, {\r
  91             width: '250px',\r
  92             data: {\r
  93                 type: type,\r
  94                 message: message\r
  95             }\r
  96         });\r
  97     }\r
  98 }\r