Merge pull request #29 from academiadev-jlle/feature/discover-pets

Feature/discover pets

src/app/discover/discover.component.html

@@ -1,3 +1,2 @@
-<p>
-  discover works!
-</p>
+<app-filter-list-item></app-filter-list-item>
+<app-pets-list-item></app-pets-list-item>

src/app/discover/discover.module.ts

@@ -3,6 +3,9 @@ import { CommonModule } from '@angular/common';
 
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
+import { PetsDetailComponent } from './pets-detail/pets-detail.component';
+import { PetsListItemComponent } from './pets-list-item/pets-list-item.component';
+import { FilterListItemComponent } from './filter-list-item/filter-list-item.component';
 
 @NgModule({
   imports: [
@@ -11,7 +14,10 @@ import { DiscoverComponent } from './discover.component';
   ],
   exports: [],
   declarations: [
-    DiscoverComponent
+    DiscoverComponent,
+    PetsDetailComponent,
+    PetsListItemComponent,
+    FilterListItemComponent
   ]
 })
 export class DiscoverModule { }

src/app/discover/filter-list-item/filter-list-item.component.html

@@ -0,0 +1,36 @@
+<div class="filter">
+  <div class='row'>
+    <div class='col-sm'>
+        <select class="form-control">
+            <option selected>Espécie</option>
+            <option>Gato</option>
+            <option>Cachorro</option>
+            <option>Cavalo</option>
+            <option>Boi</option>
+        </select>
+    </div>
+    <div class='col-sm'>
+        <select class="form-control">
+            <option selected>Porte</option>
+            <option>Pequeno</option>
+            <option>Médio</option>
+            <option>Grande</option>
+        </select>
+    </div>
+    <div class='col-sm'>
+        <select class="form-control">
+            <option selected>Categoria</option>
+            <option>Achado</option>
+            <option>Perdido</option>
+            <option>Adoção</option>
+        </select>
+    </div>
+    <div class='col-sm'>
+        <select class="form-control">
+            <option selected>Sexo</option>
+            <option>Macho</option>
+            <option>Fêmea</option>
+        </select>
+    </div>
+  </div>
+</div>

src/app/discover/filter-list-item/filter-list-item.component.scss

@@ -0,0 +1,7 @@
+.filter {
+    margin: 10px;
+
+    .row .col-sm{
+      margin: 5px;
+    }
+  }

src/app/discover/filter-list-item/filter-list-item.component.spec.ts

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

src/app/discover/filter-list-item/filter-list-item.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-filter-list-item',
+  templateUrl: './filter-list-item.component.html',
+  styleUrls: ['./filter-list-item.component.scss']
+})
+export class FilterListItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/discover/pets-detail/pets-detail.component.html

@@ -0,0 +1,3 @@
+<p>
+  pets-detail works!
+</p>

src/app/discover/pets-detail/pets-detail.component.spec.ts

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

src/app/discover/pets-detail/pets-detail.component.ts

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

src/app/discover/pets-list-item/pets-list-item.component.html

@@ -0,0 +1,17 @@
+<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>
+    </div>
+  </div>
+</div>

src/app/discover/pets-list-item/pets-list-item.component.scss

@@ -0,0 +1,18 @@
+.card-list-pet {
+    margin-bottom: 10px; 
+
+  .card {
+    margin-bottom: 15px;
+    border: 0px;
+  }
+
+  .card-body {
+    background-color: #f9f9f9;
+    border-color: transparent;
+  }
+
+  .card-img-top {
+    width: 100%;
+    height: 15vw;
+    object-fit: cover; }
+}

src/app/discover/pets-list-item/pets-list-item.component.spec.ts

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

src/app/discover/pets-list-item/pets-list-item.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { PetOptions } from './pets-list-item.options';
+
+@Component({
+  selector: 'app-pets-list-item',
+  templateUrl: './pets-list-item.component.html',
+  styleUrls: ['./pets-list-item.component.scss']
+})
+export class PetsListItemComponent implements OnInit {
+
+  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() {
+  }
+
+}

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;
+}