Merge pull request #5 from csvinhal/develop

Develop

package.json

@@ -31,6 +31,7 @@
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "express": "^4.16.4",
+    "moment": "^2.22.2",
     "path": "^0.12.7",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26"

src/app/app.module.ts

@@ -1,12 +1,16 @@
 import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 
 import { AppeRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FeaturesModule } from './features/features.module';
+import { registerLocaleData } from '@angular/common';
+import localePt from '@angular/common/locales/pt';
+
+registerLocaleData(localePt, 'pt');
 
 @NgModule({
   declarations: [AppComponent],
@@ -19,7 +23,12 @@ import { FeaturesModule } from './features/features.module';
     AppeRoutingModule,
     FeaturesModule
   ],
-  providers: [],
+  providers: [
+    {
+      provide: LOCALE_ID,
+      useValue: 'pt'
+    }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/features/home/home.component.html

@@ -1,14 +1,14 @@
 <div class="container px-5">
   <div class="row">
-    <div class="col-6 mx-auto">
+    <div class="col-sm-12 col-lg-6 mx-auto">
       <h1 class="text-center font-weight-bold">Social Movies</h1>
       <span class="d-block text-center font-weight-bold mb-3"
         >Todos os filmes em um só lugar!</span
       >
     </div>
   </div>
   <div class="row">
-    <div class="col-6 mx-auto">
+    <div class="col-sm-12 col-lg-6 mx-auto">
       <div class="input-group">
         <input
           #search

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

@@ -1,3 +1,4 @@
+import { CurrencyPipe } from '@angular/common';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
@@ -26,7 +27,7 @@ describe('HomeComponent', () => {
         NgbModalModule,
         NgbPaginationModule
       ],
-      providers: [NgbActiveModal]
+      providers: [NgbActiveModal, CurrencyPipe]
     }).compileComponents();
   }));
 

src/app/features/home/home.module.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
@@ -22,6 +22,6 @@ import { MovieTableComponent } from './movie-table/movie-table.component';
     NgbPaginationModule
   ],
   entryComponents: [MovieDetailComponent],
-  providers: [NgbActiveModal]
+  providers: [NgbActiveModal, CurrencyPipe]
 })
 export class HomeModule {}

src/app/features/home/movie-detail/movie-detail.component.html

@@ -5,29 +5,56 @@ <h4 class="modal-title" id="modal-title">Detalhes do filme</h4>
   </button>
 </div>
 <div class="modal-body">
-  <div class="container row pr-2">
+  <div class="row pr-2">
     <div class="col-12">
       <ng-container *ngIf="hasPoster">
         <figure class="figure float-left mt-3 mx-3">
           <img
             [src]="movieDetail?.poster"
             class="figure-img img-fluid rounded"
-            alt="A generic square placeholder image with rounded corners in a figure."
+            alt="Poster do filme"
           />
           <figcaption class="figure-caption text-center">
-            Poster do filme {{ movieDetail?.title }}.
+            Poster do filme.
           </figcaption>
         </figure>
       </ng-container>
 
       <div class="row">
         <div class="col-12">
-          <h1 class="text-center">{{ movieDetail?.title }}</h1>
-          <hr class="my-2">
+          <h1 class="text-center">
+            {{ movieDetail?.title }} ({{ movieDetail?.year }})
+          </h1>
+          <hr class="my-2" />
           <p class="text-justify">{{ movieDetail?.plot }}</p>
         </div>
       </div>
     </div>
+
+    <div class="col-sm-12 col-lg-6">
+      <span class="font-weight-bold">Data de lançamento:</span>
+      <span> {{ movieDetail?.released }}</span>
+    </div>
+
+    <div class="col-sm-12 col-lg-6">
+      <span class="font-weight-bold">Tempo de duração:</span>
+      <span> {{ movieDetail?.runtime }}</span>
+    </div>
+
+    <div class="col-sm-12 col-lg-6">
+      <span class="font-weight-bold">Genero:</span>
+      <span> {{ movieDetail?.genre }}</span>
+    </div>
+
+    <div class="col-sm-12 col-lg-6">
+      <span class="font-weight-bold">Diretor:</span>
+      <span> {{ movieDetail?.director }}</span>
+    </div>
+
+    <div class="col-sm-12 col-lg-6">
+      <span class="font-weight-bold">Valor de Bilheteria:</span>
+      <span> {{ movieDetail?.boxOffice }} </span>
+    </div>
   </div>
 </div>
 <div class="modal-footer">

src/app/features/home/movie-detail/movie-detail.component.spec.ts

@@ -1,3 +1,4 @@
+import { CurrencyPipe } from '@angular/common';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@@ -12,7 +13,7 @@ describe('MovieDetailComponent', () => {
     TestBed.configureTestingModule({
       declarations: [MovieDetailComponent],
       imports: [HttpClientTestingModule],
-      providers: [NgbActiveModal]
+      providers: [NgbActiveModal, CurrencyPipe]
     }).compileComponents();
   }));
 

src/app/shared/models/movie-detail.ts

@@ -7,5 +7,5 @@ export interface MovieDetail extends Movie {
   director: string;
   poster: string;
   plot: string;
-  value: string;
+  boxOffice: string;
 }

src/app/shared/services/movie.service.ts

@@ -1,16 +1,21 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { map } from 'rxjs/operators';
+import * as moment from 'moment';
 
 import { environment } from '../../../environments/environment';
 import { Movie } from '../models/movie';
 import { MovieDetail } from '../models/movie-detail';
+import { CurrencyPipe } from '@angular/common';
 
 @Injectable({ providedIn: 'root' })
 export class MovieService {
   private apiUrl = `//www.omdbapi.com/?apikey=${environment.apiKey}`;
 
-  constructor(private httpClient: HttpClient) {}
+  constructor(
+    private httpClient: HttpClient,
+    private currencyPipe: CurrencyPipe
+  ) {}
 
   public listMovies(term: string, page = '1') {
     return this.httpClient
@@ -45,12 +50,30 @@ export class MovieService {
     movie.imdb = info.imdbID;
     movie.title = info.Title;
     movie.year = info.Year;
-    movie.released = info.Released;
+    movie.released =
+      info.Released && info.Released !== 'N/A'
+        ? moment(info.Released, 'DD MMM YYYY').format('DD/MM/YYYY')
+        : info.Released;
     movie.runtime = info.Runtime;
     movie.genre = info.Genre;
     movie.director = info.Director;
-    movie.poster = info.Poster && info.Poster !== 'N/A' ? info.Poster : 'assets/no-image.jpg';
-    movie.plot = info.Plot && info.Plot !== 'N/A' ? info.Plot : 'Sem descrição disponível.';
+    movie.poster =
+      info.Poster && info.Poster !== 'N/A'
+        ? info.Poster
+        : 'assets/no-image.jpg';
+    movie.plot =
+      info.Plot && info.Plot !== 'N/A'
+        ? info.Plot
+        : 'Sem descrição disponível.';
+    movie.boxOffice =
+      info.BoxOffice && info.BoxOffice !== 'N/A'
+        ? this.currencyPipe.transform(
+            info.BoxOffice.replace('$', '').replace(/,/g, ''),
+            'BRL',
+            'symbol-narrow',
+            '1.2-2'
+          )
+        : info.BoxOffice || 'N/A';
     return movie as MovieDetail;
   }
 }