Adding profile component (de)activation logic

src/app/app-routing.module.ts

@@ -1,8 +1,8 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import { GamenightComponent } from './pages/gamenight/gamenight.component';
+import {GamenightComponent} from './pages/gamenight/gamenight.component';
 import {HomeComponent} from './pages/home/home.component';
-import { StatsComponent } from './pages/stats/stats.component';
+import {StatsComponent} from './pages/stats/stats.component';
 
 const routes: Routes = [
 	{path: '', component: HomeComponent, pathMatch: 'full'},

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {Player} from './models/player';
 
 @Component({

src/app/app.module.ts

@@ -3,20 +3,20 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
-import { HomeComponent } from './pages/home/home.component';
+import {HomeComponent} from './pages/home/home.component';
-import { StatsComponent } from './pages/stats/stats.component';
+import {StatsComponent} from './pages/stats/stats.component';
-import { GamenightComponent } from './pages/gamenight/gamenight.component';
+import {GamenightComponent} from './pages/gamenight/gamenight.component';
-import { HeaderComponent } from './components/header/header.component';
+import {HeaderComponent} from './components/header/header.component';
-import { ProfileComponent } from './components/profile/profile.component';
+import {ProfileComponent} from './components/profile/profile.component';
 
 @NgModule({
 	declarations: [
 		AppComponent,
-  HomeComponent,
+		HomeComponent,
-  StatsComponent,
+		StatsComponent,
-  GamenightComponent,
+		GamenightComponent,
-  HeaderComponent,
+		HeaderComponent,
-  ProfileComponent
+		ProfileComponent
 	],
 	imports: [
 		BrowserModule,

src/app/components/header/header.component.html

@@ -4,5 +4,5 @@
 		<p>Paddy</p>
 		<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
 	</span>
-	<app-profile *ngIf="showProfilePopover"></app-profile>
+	<app-profile (showProfilePopoverChange)="closeProfile()" *ngIf="showProfilePopover"></app-profile>
 </div>

src/app/components/header/header.component.spec.ts

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

src/app/components/header/header.component.ts

@@ -16,8 +16,10 @@ export class HeaderComponent implements OnInit {
 	}
 
 	openProfile(): void {
-		console.log('Called');
+		this.showProfilePopover = true;
-		this.showProfilePopover = !this.showProfilePopover;
 	}
 
+	closeProfile(): void {
+		this.showProfilePopover = false;
+	}
 }

src/app/components/profile/profile.component.html

@@ -1,3 +1,11 @@
 <div id="profile-popover">
-	<p>Test</p>
+	<div *ngIf="isLoggedIn">
+		<h2 class="heading">Hello, Paddy!</h2>
+		<p>You're successfully logged in.</p>
+		<p>Your id is: 1</p>
+	</div>
+	<div *ngIf="!isLoggedIn">
+		<h2 class="heading">Not logged in</h2>
+		<p>Please log in to continue</p>
+	</div>
 </div>

src/app/components/profile/profile.component.scss

@@ -8,6 +8,11 @@
 	color: $text;
 	background-color: $secondary;
 	width: 15em;
-	height: 20em;
 	border-radius: 1em;
+	padding: 1em;
+}
+
+h2.heading {
+	text-align: center;
+	font-weight: bold;
 }

src/app/components/profile/profile.component.spec.ts

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

src/app/components/profile/profile.component.ts

@@ -1,15 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from '@angular/core';
 
 @Component({
-  selector: 'app-profile',
+	selector: 'app-profile',
-  templateUrl: './profile.component.html',
+	templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+	styleUrls: ['./profile.component.scss']
 })
 export class ProfileComponent implements OnInit {
 
-  constructor() { }
+	initialClick = true;
+	@Output() showProfilePopoverChange = new EventEmitter<boolean>();
 
-  ngOnInit(): void {
+	isLoggedIn = true;
-  }
+
+	constructor(private eRef: ElementRef) {
+	}
+
+	ngOnInit(): void {
+	}
+
+	/**
+	 * Used to close Profile component when user clicks outside the component
+	 * @param event
+	 */
+	@HostListener('document:click', ['$event'])
+	@HostListener('document:touchstart', ['$event'])
+	handleOutsideClick(event: any) {
+		if (this.initialClick) {
+			this.initialClick = false;
+			return;
+		}
+
+		if (!this.eRef.nativeElement.contains(event.target)) {
+			this.showProfilePopoverChange.emit(false);
+		}
+	}
 
 }

src/app/models/game.ts

@@ -1,6 +1,6 @@
 import {Player} from './player';
 import {Announcement} from './enums/announcement';
-import { Solo } from './enums/solo';
+import {Solo} from './enums/solo';
 
 export interface Game {
 	gameId: number;

src/app/pages/gamenight/gamenight.component.spec.ts

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

src/app/pages/gamenight/gamenight.component.ts

@@ -1,15 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
-  selector: 'app-gamenight',
+	selector: 'app-gamenight',
-  templateUrl: './gamenight.component.html',
+	templateUrl: './gamenight.component.html',
-  styleUrls: ['./gamenight.component.scss']
+	styleUrls: ['./gamenight.component.scss']
 })
 export class GamenightComponent implements OnInit {
 
-  constructor() { }
+	constructor() {
+	}
 
-  ngOnInit(): void {
+	ngOnInit(): void {
-  }
+	}
 
 }

src/app/pages/home/home.component.spec.ts

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

src/app/pages/home/home.component.ts

@@ -1,21 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
 @Component({
-  selector: 'app-home',
+	selector: 'app-home',
-  templateUrl: './home.component.html',
+	templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+	styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
 
-  constructor(
+	constructor(
-	  private route: ActivatedRoute
+		private route: ActivatedRoute
-  ) { }
+	) {
+	}
 
-  ngOnInit(): void {
+	ngOnInit(): void {
-	  this.route.queryParams.subscribe(params => {
+		this.route.queryParams.subscribe(params => {
-		  console.table(params);
+			// Read params
-	  })
+		});
-  }
+	}
 
 }

src/app/pages/stats/stats.component.spec.ts

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

src/app/pages/stats/stats.component.ts

@@ -1,15 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
-  selector: 'app-stats',
+	selector: 'app-stats',
-  templateUrl: './stats.component.html',
+	templateUrl: './stats.component.html',
-  styleUrls: ['./stats.component.scss']
+	styleUrls: ['./stats.component.scss']
 })
 export class StatsComponent implements OnInit {
 
-  constructor() { }
+	constructor() {
+	}
 
-  ngOnInit(): void {
+	ngOnInit(): void {
-  }
+	}
 
 }

src/app/services/storage.service.ts

@@ -14,7 +14,7 @@ export class StorageService {
 			firstName: firstName,
 			token: token,
 			sessionKey: sessionKey
-		}
+		};
 	}
 
 	setUserInfo(user: User): void {