Refatorando feature/discover

academiadev-jlle · Nov 10, 2018 · 4782477 · 4782477
1 parent 6427837
commit 4782477
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 133 deletions.
diff --git a/src/app/discover/pets-list-item/pets-list-item.component.html b/src/app/discover/pets-list-item/pets-list-item.component.html
@@ -1,125 +1,17 @@
-<div class='card-deck'>
-  <div class="card">
-    <img class="card-img-top" src="https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Pé de pano</h5>
-          <span class="badge badge-danger float-right">Abandonado</span>
+<div class="container">
+  <div class='row card-list-pet'>
+    <div *ngFor="let pet of pets" class="card col-md-4">
+      <img class="card-img-top" [src]="pet.photo" alt="Card image cap">
+      <div class="card-body d-flex flex-column">
+        <div class="row">
+          <div class="col-sm">
+            <h5 class="card-title float-left">{{ pet.name }}</h5>
+            <span class="badge badge-danger float-right">{{ pet.isAdoption }}</span>
+          </div>
         </div>
+        <p class="card-text">{{ pet.description }}</p>
+        <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto ">+ informações</a>
       </div>
-      <p class="card-text">Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto ">+ informações</a>
     </div>
   </div>
-  <div class="card">
-    <img class="card-img-top" src="http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Cãopeão</h5>
-          <span class="badge badge-success float-right">Adoção</span>
-        </div>
-      </div>
-      <p class="card-text">Yeahhhhhh!</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto ">+ informações</a>
-    </div>
-  </div>
-  <div class="card">
-    <img class="card-img-top" src="https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Baby</h5>
-          <span class="badge badge-warning float-right">Achado</span>
-        </div>
-      </div>
-      <p class="card-text">Perdi o caminho de casa. Conhece meu dono? Quer me adotar?</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto">+ informações</a>
-    </div>
-  </div>  
-</div>
-
-<div class='card-deck'>
-  <div class="card">
-    <img class="card-img-top" src="https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Pé de pano</h5>
-          <span class="badge badge-danger float-right">Abandonado</span>
-        </div>
-      </div>
-      <p class="card-text">Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto">+ informações</a>
-    </div>
-  </div>
-  <div class="card">
-    <img class="card-img-top" src="http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Cãopeão</h5>
-          <span class="badge badge-success float-right">Adoção</span>
-        </div>
-      </div>
-      <p class="card-text">Yeahhhhhh!</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto ">+ informações</a>
-    </div>
-  </div>
-  <div class="card">
-    <img class="card-img-top" src="https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Baby</h5>
-          <span class="badge badge-warning float-right">Achado</span>
-        </div>
-      </div>
-      <p class="card-text">Perdi o caminho de casa. Conhece meu dono? Quer me adotar?</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto">+ informações</a>
-    </div>
-  </div>    
-</div>
-
-<div class='card-deck'>
-  <div class="card">
-    <img class="card-img-top" src="https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Pé de pano</h5>
-          <span class="badge badge-danger float-right">Abandonado</span>
-        </div>
-      </div>
-      <p class="card-text">Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto">+ informações</a>
-    </div>
-  </div>
-  <div class="card">
-    <img class="card-img-top" src="http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Cãopeão</h5>
-          <span class="badge badge-success float-right">Adoção</span>
-        </div>
-      </div>
-      <p class="card-text">Yeahhhhhh!</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto ">+ informações</a>
-    </div>
-  </div>
-  <div class="card">
-    <img class="card-img-top" src="https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg" alt="Card image cap">
-    <div class="card-body d-flex flex-column">
-      <div class="row">
-        <div class="col-sm">
-          <h5 class="card-title float-left">Baby</h5>
-          <span class="badge badge-warning float-right">Achado</span>
-        </div>
-      </div>
-      <p class="card-text">Perdi o caminho de casa. Conhece meu dono? Quer me adotar?</p>
-      <a href="#" class="btn btn-info float-right btn-sm text-center mt-auto">+ informações</a>
-    </div>
-  </div>    
 </div>
diff --git a/src/app/discover/pets-list-item/pets-list-item.component.scss b/src/app/discover/pets-list-item/pets-list-item.component.scss
@@ -1,14 +1,18 @@
-.card-deck {
+.card-list-pet {
     margin-bottom: 10px; 
 
-    .card {
-        background-color: #f9f9f9;
-        border-color: transparent; 
-    }
-
-    .card-img-top {
-        width: 100%;
-        height: 15vw;
-        object-fit: cover; 
-    }
+  .card {
+    margin-bottom: 15px;
+    border: 0px;
+  }
+
+  .card-body {
+    background-color: #f9f9f9;
+    border-color: transparent;
+  }
+
+  .card-img-top {
+    width: 100%;
+    height: 15vw;
+    object-fit: cover; }
 }
diff --git a/src/app/discover/pets-list-item/pets-list-item.component.ts b/src/app/discover/pets-list-item/pets-list-item.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+
+import { PetOptions } from './pets-list-item.options';
 
 @Component({
   selector: 'app-pets-list-item',
@@ -7,7 +9,74 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PetsListItemComponent implements OnInit {
 
-  constructor() { }
+  pets: PetOptions[] = [];
+
+  constructor() {
+    this.pets.push(...[{
+      id: 1,
+      name: 'Pé de pano',
+      photo: 'https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg',
+      description: 'Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D',
+      isAdoption: false,
+      isLost: true
+    }, {
+      id: 2,
+      name: 'Cãopeão',
+      photo: 'http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg',
+      description: 'Yeahhhhhh!',
+      isAdoption: true,
+      isLost: false
+    }, {
+      id: 3,
+      name: 'Baby',
+      photo: 'https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg',
+      description: 'Perdi o caminho de casa. Conhece meu dono? Quer me adotar?',
+      isAdoption: false,
+      isLost: false
+    }, {
+      id: 4,
+      name: 'Balanoalvo',
+      photo: 'https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg',
+      description: 'Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D',
+      isAdoption: false,
+      isLost: true
+    }, {
+      id: 5,
+      name: 'Cachurros',
+      photo: 'http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg',
+      description: 'Yeahhhhhh!',
+      isAdoption: true,
+      isLost: false
+    }, {
+      id: 6,
+      name: 'Bacon',
+      photo: 'https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg',
+      description: 'Perdi o caminho de casa. Conhece meu dono? Quer me adotar?',
+      isAdoption: false,
+      isLost: false
+    }, {
+      id: 7,
+      name: 'Coice',
+      photo: 'https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg',
+      description: 'Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D',
+      isAdoption: false,
+      isLost: true
+    }, {
+      id: 8,
+      name: 'Doggo',
+      photo: 'http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg',
+      description: 'Yeahhhhhh!',
+      isAdoption: true,
+      isLost: false
+    }, {
+      id: 9,
+      name: 'Batata',
+      photo: 'https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg',
+      description: 'Perdi o caminho de casa. Conhece meu dono? Quer me adotar?',
+      isAdoption: false,
+      isLost: false
+    }]);
+  }
 
   ngOnInit() {
   }

diff --git a/src/app/discover/pets-list-item/pets-list-item.options.ts b/src/app/discover/pets-list-item/pets-list-item.options.ts
@@ -0,0 +1,8 @@
+export interface PetOptions {
+    id: number;
+    name: string;
+    photo: string;
+    description: string;
+    isAdoption: boolean;
+    isLost: boolean;
+}