Skip to content
Gallery
Azavea
for Azavea
More
Share
Explore
frontend

icon picker
components

For our components, we have a grid component called Poké (sorry about the name, can change it) and a list component, PokeList.
1
Poke.vue
2
<template>
<div class="hello col-sm-6 col-md-4 col-lg-3 my-1 px-1" v-if=" ( msg.types[0] === type || type === '' )" >
<div class="card">
<router-link :to="'/' + msg.name">
<div class="img-holder">
<img :src="msg.image" class="">
</div>
</router-link>
<div class="card-body text-left" style="padding: 10px 20px 10px 30px;">
<div class="row py-1">
<div class="col-10 p-0">
<router-link :to="'/' + msg.name">
<b class="card-title" style="font-size: 18px">{{msg.name}}</b><br/>
<span v-for="(item, index) in msg.types" :key="index" > {{item}} </span>
</router-link>
</div>
<div class="col-2 p-0" style="font-size: 25px;">
<Heart :pokemon="msg" @isFavorite="emitFavoriteStatus" />
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import Heart from './Heart.vue';
import router from '@/router'

export default {
name: "Poké",
components: {
Heart
},
props: {
msg: Object,
type: String,
},
methods: {
emitFavoriteStatus($event, $event2){
this.$emit('isFavorite', $event, $event2);
}
}
};
</script>

<style>
.card-body{
background-color:#ececec;
}

.hello{
font-size: 12px;
}

.card{
border-radius: 0!important;
}

.btn-submit{
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.btn-submit:focus{
outline: transparent 1px;
}

.img-holder {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.img-holder img {
max-width: 100%;
max-height: 100%;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
3
PokeList.vue
4
<template>
<li class="list-group-item my-1 p-1" v-if=" ( msg.types[0] === type || type === '' )">
<div class="row">
<div class="col-2 col-md-1 text-center">
<router-link class="col-6 p-0" :to="'/' + msg.name">
<div class="img-holder">
<img :src="msg.image" class="">
</div>
</router-link>
</div>
<router-link class="col-8 col-md-10 p-0" :to="'/' + msg.name">
<div class="col-12 text-left">
<small><b class="card-title">{{msg.name}}</b></small>
<br>
<small v-for="(item, index) in msg.types" :key="index" >
{{item}}
</small>
</div>
</router-link>
<div class="col-2 col-md-1" style="font-size: 25px;">
<Heart :pokemon="msg" @isFavorite="emitFavoriteStatus" />
</div>
</div>
</li>
</template>

<script>
import Heart from './Heart.vue';
import router from '@/router'

export default {
name: "Poké",
components: {
Heart
},
props: {
msg: Object,
type: String,
},
methods: {
emitFavoriteStatus($event, $event2){
this.$emit('isFavorite', $event, $event2);
}
}
};
</script>

<style scoped>
.list-group-item{
border-radius: 0!important;
border: 1px solid rgba(0,0,0,.125) !important;
background-color:#ececec;
}

.img-holder {
width: 100%;
height: 60px;
position: relative;
overflow: hidden;
}
.img-holder img {
max-width: 100%;
max-height: 100%;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
There are no rows in this table
⁠

In order to favorite or unfavorite a Pokemon, I used this Heart.vue component; i call this same component in the Poke.vue, PokeList.vue, and PokemonByName.vue, as it is displayed on all 3 screens. This component also sends the mutation to graphQL. Once it’s done, I emit the value ( ie. the favorite status for each Pokemon.
1
Heart.vue
2
<template>
<div>
<ApolloMutation
v-if="!pokemon.isFavorite"
:mutation="gql => gql` mutation favoritePokemon ($input: ID!){ favoritePokemon(id: $input) { id }} `"
:variables="{ input: pokemon.id }"
@done="$emit('isFavorite', true, pokemon.id)"
>
<template slot-scope="{ mutate }">
<form ref="form" v-on:submit.prevent="mutate()">
<button class="btn-submit" type="submit">
<i class="fa fa-heart-o hear-color" aria-hidden="true"></i>
</button>
</form>
</template>
</ApolloMutation>

<ApolloMutation
v-if="pokemon.isFavorite"
:mutation="gql => gql` mutation unFavoritePokemon ($input: ID!){ unFavoritePokemon(id: $input) { id } } `"
:variables="{ input: pokemon.id }"
@done="$emit('isFavorite', false, pokemon.id)"
>
<template slot-scope="{ mutate }">
<form ref="form" v-on:submit.prevent="mutate()">
<button class="btn-submit" type="submit">
<i class="fa fa-heart hear-color" aria-hidden="true"></i>
</button>
</form>
</template>
</ApolloMutation>
</div>
</template>

<script>
export default {
props: {
pokemon: {type: Object, required: true},
},
}
</script>

<style scoped>

.hear-color {
color: red;
}

</style>

3
​
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.