ClearBowl/front/components/Recipes/SearchRecipe.vue

137 lines
4.6 KiB
Vue

<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" :loading="loading"></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: 'Kalorie',
key: 'kcal',
render: (h, params) => {
return h('div', [
h('span', params.row.nutrition.kcal)
]);
},
},
{
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: 10,
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 = 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;
this.loading = false;
})
.catch((error) => {
console.log(error);
this.loading = false;
})
},
showRecipe(recipe) {
this.$router.push({
path: `/recipes/${recipe}`
})
}
}
}
</script>
<style scoped>
</style>