Skip to content

task#18 load one auction from api

Jump to bottom
bacn edited this page Sep 16, 2020 · 1 revision

Load Auction Data from the api

  • Extend AuctionDataService service with getAuctionById(id: number)
  • Load data from component and show them in the view

Result

Start the test-auction-api server in a second console with

$ test-auction-api

if not yet running.

Compile and start the application with

$ ng serve

Open project in browser

  • Open your browser with the address http://localhost:4200/
  • Click in the list on a auction-list-detail item. It shall navigate to a AuctionDetail (/auctions/id)
  • You should see a page like the following illustration.

auction-detail-temp.png

Hints

File auction-data.service.ts

Create a method public getHttpAuction(id: number): Observable<Auction> {} in class AuctionDetailComponent.

The following code contains all CRUD operations with its standard names (list, get, create, update, delete) for auction.

import { Injectable } from '@angular/core';
import {Auction} from './auction';
import {AUCTION_DATA} from './auction-data';
import {Observable, of} from 'rxjs';
import {HttpClient} from "@angular/common/http";



@Injectable({
  providedIn: 'root'
})
export class AuctionDataService {

  private auctions: Auction[] = AUCTION_DATA;
  private URL='http://localhost:4730/auctions';

  constructor(private httpClient: HttpClient) {}

  public getAuctions() {
    return this.auctions;
  }

  getObservableAuctions(): Observable<Auction[]> {
    return of(this.auctions);
  }

  public getHttpAuctions(): Observable<Array<Auction>> {
    return this.httpClient.get<Array<Auction>>(this.URL);
  }

  public getHttpAuction(id: number): Observable<Auction> {
    return this.httpClient.get<Auction>(this.URL + '/' + id);
  }

  public create(auction: Auction): Observable<Auction> {
    return this.httpClient.post<Auction>(this.URL, auction);
  }

  public delete(auction: Auction): Observable<Auction> {
    return this.httpClient.delete<Auction>(`${this.URL}/${auction.id}`);
  }

  public get(id: number): Observable<Auction> {
    return this.httpClient.get<Auction>(this.URL + '/' + id);
  }

  public list(): Observable<Array<Auction>> {
    return this.httpClient.get<Array<Auction>>(this.URL);
  }

  public update(auction: Auction): Observable<Auction> {
    return this.httpClient.put<Auction>(`${this.URL}/${auction.id}`, auction);
  }

}

File auction-detail.component.ts

We expand the class AuctionDetailComponent with the subscription to the AuctionDataService.

import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {AuctionDataService} from '../shared/auction-data.service';
import {Subscription} from 'rxjs';
import {Auction} from "../shared/auction";

@Component({
  selector: 'app-auction-detail',
  templateUrl: './auction-detail.component.html',
  styleUrls: ['./auction-detail.component.scss']
})
export class AuctionDetailComponent implements OnInit, OnDestroy {

  auction: Auction;
  private routeSubscription: Subscription;
  private subscription: Subscription;

  constructor(private auctionDataService: AuctionDataService,
              private route: ActivatedRoute,
              private router: Router) {

  }

  ngOnInit() {
    this.routeSubscription = this.route.params.subscribe(params => {
      console.log(params['id']);
      this.subscription = this.auctionDataService.getHttpAuction(params['id']).subscribe(
        auction => {
          this.auction = auction;
          // console.log('auction: ' + auction);
          // this.adjustDate();
        },
        err => console.log(err)
      );

    });
  }

  ngOnDestroy() {

    if (this.routeSubscription != null) {
      this.routeSubscription.unsubscribe();
    }

    if (this.subscription != null)  {
      this.subscription.unsubscribe();
    }
  }

  onContainerClick() {
    this.router.navigate(['/auctions/' + this.auction.id]);
  }
}

File auction-detail.component.html

We display for the moment some data like:

  • auction.auctionItem.title
  • auction.auctionItem.description
  • auction.auctionItem.picture,
  • auction.endDateTime
<div *ngIf="auction" class="container top bottom" (click)="onContainerClick()" >

  <div class="row ">
    <!-- Image  ---------------------------------------------------------------- -->
    <div class="col-sm-7" align="center">
      <img class="auction-image" src="assets/{{auction.auctionItem.picture}}"/>
    </div>

    <!-- Right column  ---------------------------------------------------------- -->
    <div class="col-sm-5">
      <!-- Title  --------------------------------------------------------------- -->

      <div class="row">
        <div class="col col-nolr-padding">
          <p class=" top-line title"><b>{{auction.auctionItem.title}}</b></p>
          <p class="text">{{auction.auctionItem.description}}</p><br/>
        </div>
      </div>

      <!-- End Date ------------------------------------------------------------- -->
      <div class="row top">
         <div class="col">
          <p class="text-date"> <i class="fa fa-calendar"></i> {{" " + auction.endDateTime}}</p>
        </div>
      </div>

    </div>
  </div>

</div>

File auction-detail.component.scss

Add the folloing styles ro the file auction-detail.component.scss

.container{
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: auto;
  margin-bottom: auto;
  @media screen and (max-width: 699px) {
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
  }
}

.auction-image{

  width:400px;
  margin-right:10px;
  margin-left:10px;

  @media screen and (max-width: 992px) {
    width:320px;
  }

  @media screen and (max-width: 768px) {
    width:280px;
  }
}


.title{
  font-size: 16px;
  @media screen and (max-width: 699px) {
    font-size: 14px;
  }
}

.text{
  margin-bottom: 5px;
  @media screen and (max-width: 699px) {
    font-size: 12px;
    margin-bottom: 5px;
  }
}
.text-fixed-price{
  font-size: 20px;
  color: yellowgreen;
  @media screen and (max-width: 699px) {
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.text-auction-price{
  padding-top: 10px;
  font-size: 20px;
  color: orangered;
  @media screen and (max-width: 699px) {
    font-size: 14px;
    margin-bottom: 5px;
  }
}

.text-date{
  text-align: right;
  margin-bottom: 5px;

  @media screen and (max-width: 699px) {
    font-size: 9px;
  }
}

.bottom {
  border-bottom: 1px solid #ccc;
}

.top {
  border-top: 1px solid #ccc;
}

.top-line {
  @media screen and (max-width: 575px) {
    border-top: 0.5px solid #ccc;
    padding-top: 10px;
  }
}

.col {
  padding-top: 8px;
  padding-bottom: 8px;
}

.col-nolr-padding {
  @media screen and (min-width: 699px) {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.row-bg-color {
  background-color: #eee;
}

.row {
  @media screen and (max-width: 699px) {
    padding-bottom: 0;
    padding-top: 0;
  }
}

Clone this wiki locally