Working on forms

src/app/modules/contact/components/contact/contact.component.html

@@ -1 +1,20 @@
-<h1>Contact page</h1>
+<mat-grid-list cols="1" rowHeight="2:1">
+  <form [formGroup]="contactForm" (ngSubmit)="onSubmitContactForm();">
+    <mat-form-field>
+      <input matInput formControlName="name" placeholder="Enter your first name..." />
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput formControlName="email" placeholder="Enter your email..." />
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput formControlName="subject" placeholder="Enter your subject..." />
+    </mat-form-field>
+
+    <mat-form-field>
+      <textarea matInput formControlName="body" placeholder="Message body..."></textarea>
+    </mat-form-field>
+    <button mat-raised-button color="primary" type="submit">Submit</button>
+  </form>
+</mat-grid-list>

src/app/modules/contact/components/contact/contact.component.ts

@@ -2,20 +2,73 @@ import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { LoadingService } from '../../../shared/services/loading/loading.service';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.css']
 })
 export class ContactComponent implements OnInit {
-  public contactForm: FormGroup = new FormGroup({
-    name: new FormControl('', [Validators.required])
+  public readonly contactForm: FormGroup = new FormGroup({
+    name: new FormControl('', [Validators.required]),
+    email: new FormControl('', [Validators.required, Validators.minLength(5), Validators.email]),
+    subject: new FormControl('', [Validators.required, Validators.minLength(5)]),
+    body: new FormControl('', [Validators.required, Validators.minLength(5)])
   });
 
-  constructor(private readonly titleService: Title, private readonly loadingService: LoadingService) {}
+  constructor(
+    private readonly titleService: Title,
+    private readonly loadingService: LoadingService,
+    private readonly snackBar: MatSnackBar
+  ) {}
 
-  ngOnInit() {
+  public ngOnInit(): void {
     this.titleService.setTitle('VideoGamer | Contact');
   }
+
+  public openSuccessSnackBar(): void {
+    const options: MatSnackBarConfig = {
+      direction: 'ltr',
+      duration: 4000,
+      horizontalPosition: 'end',
+      panelClass: ['success']
+    };
+
+    this.snackBar.open('You have successfully contacted VideoGamer.', '', options);
+  }
+
+  public openErrorSnackBar(): void {
+    const options: MatSnackBarConfig = {
+      direction: 'ltr',
+      duration: 4000,
+      horizontalPosition: 'end',
+      panelClass: ['danger']
+    };
+
+    this.snackBar.open('Fill the form properly.', null, options);
+  }
+
+  public onSubmitContactForm(): void {
+    if (this.contactForm.invalid) {
+      console.log(this.contactForm.errors);
+      console.log('errors');
+      this.openErrorSnackBar();
+      // show errors
+      // snack bar error
+    } else {
+      console.log(this.contactForm.getRawValue());
+
+      // // Clear contact form
+      this.contactForm.reset();
+
+      this.contactForm.markAsPristine();
+      this.contactForm.markAsUntouched();
+
+      // Show success snack bar
+      this.openSuccessSnackBar();
+    }
+  }
+
+  public onSubmitBugReportForm(): void {}
 }

src/app/modules/contact/contact.module.ts

@@ -2,6 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ContactComponent } from './components/contact/contact.component';
 import { Routes, RouterModule } from '@angular/router';
+import { MaterialModule } from '../shared-components/material/material.module';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 const routes: Routes = [
   {
@@ -12,7 +19,27 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [ContactComponent],
-  imports: [CommonModule, RouterModule.forChild(routes)],
-  exports: [ContactComponent, RouterModule]
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    MaterialModule,
+    ReactiveFormsModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatSnackBarModule
+  ],
+  exports: [
+    ContactComponent,
+    RouterModule,
+    MaterialModule,
+    ReactiveFormsModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatSnackBarModule
+  ]
 })
 export class ContactModule {}

src/app/modules/home/components/home/home.component.ts

@@ -23,7 +23,7 @@ export class HomeComponent implements OnInit {
     this.loadingService.setLoading(true);
     this.titleService.setTitle('VideoGamer | Home');
     this.openSnackBar();
-    this.subscription = this.gamesService.all().subscribe(data => {
+    this.subscription = this.gamesService.getGames().subscribe(data => {
       console.log(data);
     });
   }

src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.css

@@ -0,0 +1,13 @@
+.text-center {
+  text-align: center !important;
+}
+
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.html

@@ -0,0 +1,17 @@
+<h1 mat-dialog-title class="text-center">Bug Report</h1>
+<div mat-dialog-content class="text-center">
+  <form class="example-form">
+    <mat-form-field class="example-full-width">
+      <input matInput placeholder="Favorite food" [(ngModel)]="data.fullName">
+    </mat-form-field>
+
+    <mat-form-field class="example-full-width">
+      <textarea matInput placeholder="Report a bug..." [(ngModel)]="data.bug"></textarea>
+    </mat-form-field>
+  </form>
+
+</div>
+<div mat-dialog-actions>
+  <button mat-raised-button color="primary" [mat-dialog-close]="data.fullName" cdkFocusInitial>Submit bug</button>
+  <button mat-raised-button color="warn" (click)="onNoClick()">Cancel</button>
+</div>

src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.spec.ts

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

src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { HeaderComponent } from '..';
+import { FormGroup, Validators, FormControl } from '@angular/forms';
+
+export interface BugReport {
+  fullName: string;
+  bug: string;
+}
+
+@Component({
+  selector: 'app-bug-report-dialog',
+  templateUrl: './bug-report-dialog.component.html',
+  styleUrls: ['./bug-report-dialog.component.css']
+})
+export class BugReportDialogComponent implements OnInit {
+  public readonly bugReportForm: FormGroup = new FormGroup({
+    fullName: new FormControl('', [Validators.required]),
+    bug: new FormControl('', [Validators.required, Validators.minLength(5)])
+  });
+
+  constructor(
+    public readonly dialogRef: MatDialogRef<HeaderComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: BugReport
+  ) {}
+
+  ngOnInit() {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

src/app/modules/shared-components/components/header/header.component.html

@@ -39,13 +39,6 @@
             </button>
           </mat-menu>
         </ng-template>
-
-        <!-- <ng-template #standard>
-          <button mat-button [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" class="nav-link
-            light-text">
-            <mat-icon>{{ link.icon }}</mat-icon>
-            <span class="spacy">{{ link.name }}</span>
-        </ng-template> -->
       </ng-container>
 
       <button class="light-text" mat-button [matMenuTriggerFor]="menu">
@@ -61,6 +54,10 @@
           <mat-icon>star</mat-icon>
           <span>Star it on Github</span>
         </a>
+        <button mat-menu-item href="https://github.com/CerealKiller97/NG-VideoGamer" (click)="openReportBugDialog();">
+          <mat-icon>bug_report</mat-icon>
+          <span>Report a bug</span>
+        </button>
       </mat-menu>
 
       <!-- TODO: Toggle dark mode -->
@@ -69,7 +66,6 @@
       </div>
 
       <small class="light-text spacy">Dark Theme</small> -->
-
     </nav>
   </span>
 </mat-toolbar>

src/app/modules/shared-components/components/header/header.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CustomIconService } from '@service/icons/custom-icons.service';
+import { MatDialog } from '@angular/material/dialog';
+import { BugReportDialogComponent, BugReport } from '../bug-report-dialog/bug-report-dialog.component';
 export interface Link {
   name: string;
   path: string;
@@ -24,6 +26,8 @@ export interface Platform {
   styleUrls: ['./header.component.css']
 })
 export class HeaderComponent implements OnInit {
+  public bugReport: BugReport;
+
   public readonly links: Link[] = [
     { name: 'Home', path: '', icon: 'home' },
     { name: 'Gaming', path: 'gaming', icon: 'games' },
@@ -50,10 +54,23 @@ export class HeaderComponent implements OnInit {
     { name: 'Android', icon: 'android', slug: 'android' }
   ];
 
-  constructor(private readonly customIconsService: CustomIconService) {}
+  constructor(private readonly customIconsService: CustomIconService, private readonly dialogService: MatDialog) {}
 
   ngOnInit(): void {
     this.customIconsService.registerPlatformIcons();
+    // this.dialogService.open();
+  }
+
+  public openReportBugDialog(): void {
+    const dialogRef = this.dialogService.open(BugReportDialogComponent, {
+      width: '500px',
+      data: { bug: this.bugReport }
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed');
+      this.bugReport = result;
+    });
   }
 
   trackByFunc(index: number, item: Link): string {

src/app/modules/shared-components/material/material.module.ts

@@ -7,7 +7,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
 @NgModule({
   declarations: [],
   imports: [
@@ -17,8 +18,19 @@ import { MatMenuModule } from '@angular/material/menu';
     MatTabsModule,
     MatGridListModule,
     MatIconModule,
-    MatMenuModule
+    MatMenuModule,
+    MatDialogModule,
+    MatFormFieldModule
   ],
-  exports: [MatToolbarModule, MatButtonModule, MatTabsModule, MatGridListModule, MatIconModule, MatMenuModule]
+  exports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatTabsModule,
+    MatGridListModule,
+    MatIconModule,
+    MatMenuModule,
+    MatDialogModule,
+    MatFormFieldModule
+  ]
 })
 export class MaterialModule {}

src/app/modules/shared-components/shared-components.module.ts

@@ -9,10 +9,21 @@ import { MaterialModule } from './material/material.module';
 import { NotificationComponent } from './components/notification/notification.component';
 import { CustomIconService } from '@serviceicons/custom-icons.service';
 import { HeroComponent } from './components/hero/hero.component';
+import { BugReportDialogComponent } from './components/bug-report-dialog/bug-report-dialog.component';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
 @NgModule({
-  declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent, NotificationComponent, HeroComponent],
-  imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule],
+  declarations: [
+    HeaderComponent,
+    FooterComponent,
+    LoadingSpinnerComponent,
+    NotificationComponent,
+    HeroComponent,
+    BugReportDialogComponent
+  ],
+  imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule, FormsModule, MatInputModule],
   exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent],
-  providers: [CustomIconService]
+  providers: [CustomIconService],
+  entryComponents: [BugReportDialogComponent]
 })
 export class SharedComponentsModule {}