126 lines
4.2 KiB
Vue
126 lines
4.2 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"></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>
|