[CLEAR-46] Add searching recipes
This commit is contained in:
Gabriela Pałka
parent
dd0a184a4c
commit
a5b128954b
126
front/components/Recipes/SearchRecipe.vue
Normal file
126
front/components/Recipes/SearchRecipe.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Row type="flex" justify="center" style="margin-bottom: 10px;">
|
||||||
|
<Input v-model="search" @on-change="debounce" search enter-button="Wyszukaj"
|
||||||
|
placeholder="Szukaj przepisu..."/>
|
||||||
|
</Row>
|
||||||
|
<Row style="margin-bottom: 10px;">
|
||||||
|
<h2>Znalezione przepisy: {{ total }}</h2>
|
||||||
|
</Row>
|
||||||
|
<Row style="margin-bottom: 10px;">
|
||||||
|
<Table border :columns="columns" :data="recipes"></Table>
|
||||||
|
</Row>
|
||||||
|
<Row style="margin-bottom: 10px;">
|
||||||
|
<Page :current.sync="current_page" :total="total" @on-change="getRecipes"/>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SearchRecipe",
|
||||||
|
mounted() {
|
||||||
|
this.getRecipes(true)
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: '',
|
||||||
|
recipes: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: 'Nazwa',
|
||||||
|
key: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Opis',
|
||||||
|
key: 'description'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Akcje',
|
||||||
|
key: 'action',
|
||||||
|
maxWidth: 160,
|
||||||
|
align: 'center',
|
||||||
|
render: (h, params) => {
|
||||||
|
return h('div', [
|
||||||
|
h('Button', {
|
||||||
|
props: {
|
||||||
|
type: 'primary',
|
||||||
|
size: 'small'
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
marginRight: '5px'
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
click: () => {
|
||||||
|
this.showRecipe(params.row.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 'Zobacz przepis')
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
debounceTimer: 0,
|
||||||
|
page: 0,
|
||||||
|
limit: 6,
|
||||||
|
nextPage: true,
|
||||||
|
prevPage: false,
|
||||||
|
total: 0,
|
||||||
|
last_page: 1,
|
||||||
|
current_page: 1,
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
debounce(event) {
|
||||||
|
if (this.debounceTimer !== null) {
|
||||||
|
clearTimeout(this.debounceTimer);
|
||||||
|
}
|
||||||
|
this.debounceTimer = setTimeout(() => {
|
||||||
|
this.search = event.target.value;
|
||||||
|
this.resetData();
|
||||||
|
}, 800);
|
||||||
|
},
|
||||||
|
resetData() {
|
||||||
|
this.nextPage = true;
|
||||||
|
this.prevPage = false;
|
||||||
|
this.recipes = [];
|
||||||
|
this.last_page = 1;
|
||||||
|
this.current_page = 1;
|
||||||
|
this.getRecipes(true);
|
||||||
|
},
|
||||||
|
getRecipes() {
|
||||||
|
this.loading = true;
|
||||||
|
this.$axios.get('recipe', {
|
||||||
|
params: {
|
||||||
|
page: this.current_page,
|
||||||
|
limit: this.limit,
|
||||||
|
search: this.search
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
const data = response.data.data.recipes;
|
||||||
|
this.recipes = this.recipes.concat(data.data);
|
||||||
|
this.total = data.total;
|
||||||
|
this.nextPage = data.next_page_url != null;
|
||||||
|
this.prevPage = data.prev_page_url != null;
|
||||||
|
this.last_page = data.data.last_page;
|
||||||
|
this.current_page = data.current_page;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showRecipe(recipe) {
|
||||||
|
this.$router.push({
|
||||||
|
path: `/recipes/${recipe}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
86
front/components/Recipes/ShowRecipe.vue
Normal file
86
front/components/Recipes/ShowRecipe.vue
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Card>
|
||||||
|
<p slot="title">{{ name }}</p>
|
||||||
|
<Row style="padding-left: 10px; padding-right: 10px">
|
||||||
|
<Col span="8" style="text-align: left">
|
||||||
|
<span><b>Wartości odżywcze:</b></span>
|
||||||
|
<ul>
|
||||||
|
<span>Kcal: {{nutrition.kcal}}</span>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<span>Węglowodany: {{nutrition.carbohydrates}}</span>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<span>Białka: {{nutrition.protein}}</span>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<span>Tłuszcze: {{nutrition.fat}}</span>
|
||||||
|
</ul>
|
||||||
|
<br/>
|
||||||
|
<span><b>Składniki:</b></span>
|
||||||
|
<ul>
|
||||||
|
<li v-for="item in ingredients">
|
||||||
|
<span>{{ item.name }}: {{ item.weight }}g</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="16" style="text-align: left">
|
||||||
|
<span><b>Opis:</b></span>
|
||||||
|
<p>{{ description }}</p>
|
||||||
|
<br/>
|
||||||
|
<span><b>Przygotowanie:</b></span>
|
||||||
|
<ul v-for="item in steps">
|
||||||
|
<span>{{ item }}</span>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ShowRecipe",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
ingredients: [],
|
||||||
|
steps: [],
|
||||||
|
nutrition: {
|
||||||
|
kcal: 0,
|
||||||
|
carbohydrates: 0,
|
||||||
|
protein: 0,
|
||||||
|
fat: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.retrieveRecipe();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
retrieveRecipe() {
|
||||||
|
this.loading = true;
|
||||||
|
this.$axios.get(`/recipe/${this.$route.params.id}`)
|
||||||
|
.then((response) => {
|
||||||
|
const data = response.data.data.recipe;
|
||||||
|
this.name = data.name;
|
||||||
|
this.description = data.description;
|
||||||
|
this.ingredients = data.ingredients;
|
||||||
|
this.steps = data.steps;
|
||||||
|
this.nutrition = data.nutrition;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
this.loading = false;
|
||||||
|
this.$Message.error('Błąd!');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="width: 100%;">
|
|
||||||
<AddRecipeModal/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import AddRecipeModal from "../components/Recipes/AddRecipeModal";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'recipes',
|
|
||||||
auth: false,
|
|
||||||
components: {
|
|
||||||
AddRecipeModal,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user