Skip to content
Gallery
Azavea
for Azavea
More
Share
Explore
frontend

icon picker
views

The main query used is on Home.vue; it is also where i put both of the components for the grid and for the list, and I just put a filter on the data that was passed to the components. Here, I also filter the Pokemon by the input of the search.
1
Home.vue template
2
<template>
<div class="home container">
<div id="nav" class="container mt-3">
<div class="row p-0" role="group">
<div class="col-6 p-0">
<button
@click="view = 'all'"
type="button"
class="btn btn-outline-success btn-block"
:class="[ view == 'all' ? 'active':'' ]"
>
Home
</button>
</div>
<div class="col-6 p-0">
<button
@click="view = 'favorites'"
type="button"
class="btn btn-outline-success btn-block"
:class="[ view == 'favorites' ? 'active':'' ]">
Favorites
</button>
</div>
</div>
</div>

<div class="row mt-3">
<div class="col-6 px-1">
<form>
<input v-model="SearchWord" type="text" class="form-control form-control-sm" placeholder="Search">
</form>
</div>
<div class="col-4 px-1">
<select class="form-control form-control-sm" id="exampleFormControlSelect1" v-model="type">
<option value="" selected disabled>Type</option>
<option value="">All</option>
<option value="Grass">Grass</option>
<option value="Poison">Poison</option>
<option value="Fire">Fire</option>
<option value="Water">Water</option>
<option value="Bug">Bug</option>
</select>
</div>
<div class="col-2 px-1">
<i @click="display = 'grid'" class="fa fa-th" aria-hidden="true"></i> |
<i @click="display = 'list'" class="fa fa-th-list" aria-hidden="true"></i>
</div>
</div>
<div v-if="display === 'grid'" class="row">
<PokeGrid v-for="item in filteredList" :key="item.id" :msg="item" :type="type" @isFavorite="changeFavoriteStatus"/>
</div>
<div v-if="display === 'list'" class="row">
<div class="col-12 px-1">
<ul class="list-group">
<PokeList v-for="item in filteredList" :key="item.id" :msg="item" :type="type" @isFavorite="changeFavoriteStatus"/>
</ul>
</div>
</div>
</div>
</template>


<style lang="scss">

#nav {
padding: 30px;
a {
&.active {
color: #42b983;
}
}
}

</style>
3
also in Home.vue, we have our main query set up:
4

<script>
// @ is an alias to /src
import { mapGetters } from 'vuex';
import PokeGrid from "@/components/Poké.vue";
import PokeList from "@/components/PokéList.vue";
import gql from "graphql-tag";

export default {
name: "home",
components: {
PokeGrid,
PokeList
},
data(){
return {
view: 'all', // Determines if all pokemons will be visible, or just the favorites
display : 'grid',
masterArrayPokemon:[],
SearchWord:'',
type:'',
favorite: false
}
},
apollo:{
pokemons: gql`
query {
pokemons(query: { limit: 1000 }) {
edges {
id
number
name
types
image
isFavorite
}
}
}
`
},
mounted(){
setTimeout( ()=>{
this.masterArrayPokemon = this.pokemons.edges;
},500);

},
computed: {
filteredList() {
let result = this.masterArrayPokemon.filter(poke => {
return poke.name.toLowerCase().includes(this.SearchWord.toLowerCase());
})
result = this.view == "favorites" ? result.filter( p => p.isFavorite == true) : result;
return result;
}
},

methods: {
changeFavoriteStatus(status, id){
let pokemon = this.masterArrayPokemon.find( p => p.id == id);
pokemon.isFavorite = status;
}
}
};
</script>
There are no rows in this table
⁠

⁠
pokeListFavorites.png
⁠
⁠
I can filter types of Pokemon on both components, on the PokéGrid and PokeList. If I had to change it, I would put the filter outside of the components, passing them only the Pokemon that need to be displayed.
The individual Pokemon view is on frontend/src/views/PokemonByName.vue.
1
PokemonByName.vue
2
​
3
<template>
<div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card custom_card" v-if="pokemonByName">
<img :src="pokemonByName.image"
class="card-img-top" alt="...">
<div class="card-body text-left">
</div>

<div class="box">
<div class="container box">
<div class="row">
<div class="col-8 text-left">
<h4 class="name_pokemon">{{ pokemonByName.name }}</h4>
<span class="mr-1 types_atrr" v-for="type in pokemonByName.types" :key="type.id">{{ type }}</span>
</div>
<div class="col-4 text-right">
<Heart :pokemon="pokemonByName" />
</div>
</div>
</div>

<div class="container box mt-3">
<div class="row">
<div class="col-8">
<div class="progress bar">
<div class="progress-bar purple_bar" role="progressbar" style="width: 100%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-4 attr_left_text">
<span class="type_atr">CP:</span> {{ pokemonByName.maxCP}}
</div>
<div class="col-8">
<div class="progress bar">
<div class="progress-bar green_bar" role="progressbar" style="width: 100%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-4 attr_left_text">
<span class="type_atr">HP:</span> {{ pokemonByName.maxHP}}
</div>
</div>
</div>

<div class="container box mt-3">
<div class="row" v-if="pokemonByName && pokemonByName.weight">
<div class="col-6 text-center">
<p class="title_atrr">Weight</p>
<p class="data_atrr">{{ pokemonByName.weight.minimum }} - {{ pokemonByName.weight.maximum }}</p>
</div>
<div class="col-6 text-center">
<p class="title_atrr">Height</p>
<p class="data_atrr">{{ pokemonByName.height.minimum }} - {{ pokemonByName.height.maximum }}</p>
</div>
</div>
</div>
</div>
<div class="container mt-3">
<div class="row">
<p class="title_atrr float-left mb-3">Evolutions</p>
</div>
<div class="row">
<div class="card" style="width:10rem" v-for="evolution in pokemonByName.evolutions" :key="evolution.id">
<img :src="evolution.image" class="card-img-top" alt="...">
<p>{{evolution.name}}</p>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</template>

<script>

import gql from "graphql-tag";
import router from '@/router'
import Heart from '../components/Heart.vue';

export default {
components: {
Heart
},
props: {
data: []
},
data(){
return{
dataExist:'',
pokemonName: null,
}
},
// Apollo-specific options
apollo: {
// Query with parameters
pokemonByName: {
// gql query
query: gql`query pokemonByName($name: String!) {
pokemonByName(name: $name){
id
image
number
name
types
maxCP
maxHP
isFavorite
evolutions{
id
name
number
image
}
weight{minimum maximum}
height{minimum maximum},
}
}`,
// Reactive variables
variables() {
return{
name: this.$route.params.name,
}
},
},
},
}
</script>

<style>
.img_pokemon {
width: 100%;
height: auto;
}
.purple_bar {
background: #9F9FFF;
}

.green_bar {
background: #71C1A1;
}

.name_pokemon {
font-weight: bold;
margin-bottom: -8px;
}
.title_atrr{
font-weight: bold;
}
.data_atrr{
font-size: 0.8rem;
margin-top: -16px;
}
.attr_left_text{
text-align: left;
}
.type_atr{
font-weight: bold;
}
.types_atrr{
font-size: 0.8rem;
margin-top: -20px;
}
.box{
background-color: #ececec;
}
.custom_card{
width:30%; margin:0 auto;
}
@media (max-width: 800px) {
.custom_card {
width: 90%;
}
}
</style>
There are no rows in this table
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.