96 lines
2 KiB
Vue
96 lines
2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<input type="text" v-model="searchTerm" @keyup.enter="search" @focusin="search" @focusout="search" placeholder="Add a recipe..." />
|
||
|
|
<ul v-if="recipes?.length">
|
||
|
|
<li class="recipe" v-for="recipe in recipes" :key="recipe.id" @click="selectRecipe(recipe)">
|
||
|
|
<img v-if="recipe.image_urls" :src="recipe.image_urls[0]" />
|
||
|
|
<p class="recipe-name">{{ recipe.name }}</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import data from '@/data.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
searchTerm: '',
|
||
|
|
recipes: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
searchTerm() {
|
||
|
|
const searchTerm = this.searchTerm;
|
||
|
|
setTimeout(() => {
|
||
|
|
if (searchTerm === this.searchTerm){
|
||
|
|
this.search();
|
||
|
|
}
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
search() {
|
||
|
|
data.searchRecipes(this.searchTerm).then((recipes) => {
|
||
|
|
this.recipes = recipes
|
||
|
|
});
|
||
|
|
},
|
||
|
|
selectRecipe(recipe) {
|
||
|
|
this.$emit('select-recipe', recipe);
|
||
|
|
this.searchTerm = '';
|
||
|
|
this.recipes = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
input {
|
||
|
|
border: 0;
|
||
|
|
border-bottom: 1px solid #ccc;
|
||
|
|
font-size: large;
|
||
|
|
margin: 1ex 1em;
|
||
|
|
width: 80%;
|
||
|
|
font-size: larger;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Show recipes as cards in a flex grid 2-3 items wide */
|
||
|
|
ul {
|
||
|
|
padding: 0;
|
||
|
|
width: 80%;
|
||
|
|
margin: 0 auto;
|
||
|
|
border: solid 1px #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
list-style-type: none;
|
||
|
|
border: solid 1px #ccc;
|
||
|
|
border-radius: 3px;
|
||
|
|
padding: 1em;
|
||
|
|
vertical-align: middle;
|
||
|
|
text-align: left;
|
||
|
|
max-height: 10em;
|
||
|
|
}
|
||
|
|
|
||
|
|
li img {
|
||
|
|
display: block;
|
||
|
|
width: 8em;
|
||
|
|
height: 8em;
|
||
|
|
margin: 0.5em;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
li:hover {
|
||
|
|
background-color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.recipe-name {
|
||
|
|
font-size: larger;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|