[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