ClearBowl/front/components/Recipes/SearchRecipe.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>