Merge pull request #60 from EngiBeerHub:feature/9-individual-view

Feature/9-individual-view

src/app/app-routing.module.ts

@@ -1,14 +1,27 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { TopPageComponent } from './components/pages/top/top-page.component';
+import { BeerDetailComponent } from './components/pages/beer-detail/beer-detail.component';
+import { HomeComponent } from './components/pages/home/home.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/top', pathMatch: 'prefix' },
-  { path: 'top', component: TopPageComponent },
+  {
+    path: '',
+    component: TopPageComponent,
+    children: [
+      { path: '', redirectTo: '/home', pathMatch: 'full' },
+      { path: 'home', component: HomeComponent },
+      { path: 'detail', component: BeerDetailComponent },
+    ],
+  },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'top',
+    }),
+  ],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.module.ts

@@ -17,9 +17,13 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
 import { BeerCardComponent } from './components/presentationals/beer-card/beer-card.component';
 import { RandomBeerComponent } from './components/containers/random-beer/random-beer.component';
 import { BeerListComponent } from './components/containers/beer-list/beer-list.component';
+import { BeerDetailComponent } from './components/pages/beer-detail/beer-detail.component';
+import { HomeComponent } from './components/pages/home/home.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +32,8 @@ import { BeerListComponent } from './components/containers/beer-list/beer-list.c
     BeerCardComponent,
     RandomBeerComponent,
     BeerListComponent,
+    BeerDetailComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserModule,
@@ -46,6 +52,8 @@ import { BeerListComponent } from './components/containers/beer-list/beer-list.c
     MatPaginatorModule,
     MatInputModule,
     MatButtonModule,
+    MatDividerModule,
+    MatListModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/components/containers/beer-list/beer-list.component.html

@@ -41,13 +41,9 @@
   >
     <mat-grid-tile *ngFor="let beer of displayedBeers">
       <app-beer-card
-        class="beer-card"
         [beer]="beer"
-        [imageUrl]="
-          beer.image_url
-            ? beer.image_url
-            : 'https://images.punkapi.com/v2/keg.png'
-        "
+        [imageUrl]="beer.image_url ? beer.image_url : altImageUrl"
+        (click)="onClickCard(beer!)"
       ></app-beer-card>
     </mat-grid-tile>
   </mat-grid-list>

src/app/components/containers/beer-list/beer-list.component.scss

@@ -17,9 +17,11 @@ mat-chip-listbox {
   align-items: center;
 }
 
-.beer-card {
+app-beer-card {
   // necessary to show outline of cards when using guttersize
   margin: 0 8px;
+  height: 456px;
+  cursor: pointer;
 }
 
 mat-paginator {

src/app/components/containers/beer-list/beer-list.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/material/chips';
 import { ThemePalette } from '@angular/material/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { Router } from '@angular/router';
 import { Beer } from 'src/app/models/beer';
 import { BeerService } from 'src/app/services/beer.service';
 
@@ -27,6 +28,7 @@ export class BeerListComponent implements OnInit {
   filteredBeers?: Beer[]; // Beers filtered by chip
   displayedBeers?: Beer[]; // Beers displayed filtered and paged
   isLoading?: boolean; // show spinner when true
+  altImageUrl = 'https://images.punkapi.com/v2/keg.png';
 
   /** Paginator */
   @ViewChild('paginator') paginator!: MatPaginator;
@@ -69,6 +71,7 @@ export class BeerListComponent implements OnInit {
   constructor(
     private beerService: BeerService,
     private breakpointObserver: BreakpointObserver,
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
@@ -215,4 +218,12 @@ export class BeerListComponent implements OnInit {
     // coordinate pagination accordingly
     this.resetPagination();
   }
+
+  /**
+   * Handle clicking card
+   * @param beer shown beer
+   */
+  onClickCard(beer: Beer) {
+    this.router.navigate(['/detail'], { state: { beer: beer } });
+  }
 }

src/app/components/containers/random-beer/random-beer.component.html

@@ -7,5 +7,6 @@
     [beer]="beer"
     [imageUrl]="imageUrl"
     [error]="error"
+    (click)="onClickCard(beer!)"
   ></app-beer-card>
 </ng-template>

src/app/components/containers/random-beer/random-beer.component.scss

@@ -11,7 +11,9 @@
   }
 
   app-beer-card {
+    height: 456px;
     margin-top: 8px;
     max-width: 936px;
+    cursor: pointer;
   }
 }

src/app/components/containers/random-beer/random-beer.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { Beer } from 'src/app/models/beer';
 import { BeerService } from 'src/app/services/beer.service';
 
@@ -14,7 +15,10 @@ export class RandomBeerComponent implements OnInit {
   imageUrl?: string;
   readonly altImageUrl = 'https://images.punkapi.com/v2/keg.png';
 
-  constructor(private beerService: BeerService) {}
+  constructor(
+    private beerService: BeerService,
+    private router: Router,
+  ) {}
 
   ngOnInit(): void {
     // start loading to show spinner
@@ -37,4 +41,12 @@ export class RandomBeerComponent implements OnInit {
       complete: () => console.log('getRandomBeer completed.'),
     });
   }
+
+  /**
+   * Handle clicking card
+   * @param beer shown beer
+   */
+  onClickCard(beer: Beer) {
+    this.router.navigate(['/detail'], { state: { beer: beer } });
+  }
 }

src/app/components/pages/beer-detail/beer-detail.component.html

@@ -0,0 +1,74 @@
+<div class="container">
+  <app-beer-card
+    class="beer-card"
+    [beer]="beer"
+    [imageUrl]="beer.image_url ? beer.image_url : altImageUrl"
+  ></app-beer-card>
+
+  <mat-list>
+    <mat-list-item>
+      <span matListItemTitle>First Brewed</span>
+      <span>{{ beer.first_brewed }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <mat-list-item>
+      <span matListItemTitle>Ph</span>
+      <span>{{ beer.ph }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <mat-list-item>
+      <span matListItemTitle>Contributed By</span>
+      <span>{{ beer.contributed_by }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <mat-list-item [lines]="matListItemLine">
+      <span matListItemTitle>Brewers Tips</span>
+      <span>{{ beer.brewers_tips }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <mat-list-item [lines]="matListItemLine">
+      <span matListItemTitle>Food Pairing</span>
+      <span>{{ foodPairings }}</span>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+
+    <div mat-subheader>
+      Ingredients
+
+      <div mat-subheader>
+        Malt
+        <div *ngFor="let malt of beer.ingredients.malt">
+          <mat-list-item>
+            <span matListItemTitle>{{ malt.name }}</span>
+            <span>{{ malt.amount.value }}{{ malt.amount.unit }}</span>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+        </div>
+      </div>
+
+      <div mat-subheader>
+        Hops
+        <div *ngFor="let hop of beer.ingredients.hops">
+          <mat-list-item>
+            <span matListItemTitle>{{ hop.name }}</span>
+            <span
+              >{{ hop.amount.value }}{{ hop.amount.unit }}, {{ hop.attribute }},
+              added at {{ hop.add }}</span
+            >
+          </mat-list-item>
+          <mat-divider></mat-divider>
+        </div>
+      </div>
+
+      <mat-list-item>
+        <span matListItemTitle>Yeast</span>
+        <span>{{ beer.ingredients.yeast }}</span>
+      </mat-list-item>
+      <mat-divider></mat-divider>
+    </div>
+  </mat-list>
+</div>

src/app/components/pages/beer-detail/beer-detail.component.scss

@@ -0,0 +1,8 @@
+.container {
+  margin-top: -8px;
+  padding: 0 8px;
+
+  mat-list {
+    max-width: 100%;
+  }
+}

src/app/components/pages/beer-detail/beer-detail.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BeerDetailComponent } from './beer-detail.component';
+
+describe('DetailComponent', () => {
+  let component: BeerDetailComponent;
+  let fixture: ComponentFixture<BeerDetailComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BeerDetailComponent],
+    });
+    fixture = TestBed.createComponent(BeerDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/pages/beer-detail/beer-detail.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Beer } from 'src/app/models/beer';
+
+@Component({
+  templateUrl: './beer-detail.component.html',
+  styleUrls: ['./beer-detail.component.scss'],
+})
+export class BeerDetailComponent implements OnInit {
+  beer!: Beer;
+  altImageUrl = 'https://images.punkapi.com/v2/keg.png';
+  foodPairings!: string;
+  matListItemLine = 3; // pc default lines
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.beer = (history.state as BeerState).beer;
+    this.foodPairings = this.beer.food_pairing.join(', ');
+  }
+}
+
+/**
+ * state passed from parent component
+ */
+export interface BeerState {
+  beer: Beer;
+}

src/app/components/pages/home/home.component.html

@@ -0,0 +1,9 @@
+<div class="main-content">
+  <h1>Today's Beer</h1>
+
+  <app-random-beer></app-random-beer>
+
+  <h1>All Beers</h1>
+
+  <app-beer-list></app-beer-list>
+</div>

src/app/components/pages/home/home.component.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+@import '../../../../styles.scss';
+
+h1 {
+  font-size: 32px;
+  margin-top: 24px;
+  margin-left: 8px;
+  color: mat.get-color-from-palette($primary);
+}
+
+app-random-beer {
+  margin: 0 8px;
+}

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

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

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

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent {}

src/app/components/pages/top/top-page.component.html

@@ -3,19 +3,14 @@
     <mat-icon>sports_bar</mat-icon>
 
     <div class="title-toolbar">
-      <span>Ever Beer</span>
+      <span (click)="onClickTitle()">Ever Beer</span>
     </div>
   </mat-toolbar>
 </header>
 
 <main>
   <div class="main-content">
-    <h1>Today's Beer</h1>
-
-    <app-random-beer></app-random-beer>
-
-    <h1>All Beers</h1>
-
-    <app-beer-list></app-beer-list>
+    <!-- child router -->
+    <router-outlet></router-outlet>
   </div>
 </main>