From a5b128954bf4b471740438ebc991d43e208c8290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriela=20Pa=C5=82ka?= <gabi179@gmail.com>
Date: Tue, 7 Jan 2020 21:26:49 +0100
Subject: [PATCH] [CLEAR-46] Add searching recipes

---
 front/components/Recipes/SearchRecipe.vue | 126 ++++++++++++++++++++++
 front/components/Recipes/ShowRecipe.vue   |  86 +++++++++++++++
 front/pages/recipes.vue                   |  21 ----
 3 files changed, 212 insertions(+), 21 deletions(-)
 create mode 100644 front/components/Recipes/SearchRecipe.vue
 create mode 100644 front/components/Recipes/ShowRecipe.vue
 delete mode 100644 front/pages/recipes.vue

diff --git a/front/components/Recipes/SearchRecipe.vue b/front/components/Recipes/SearchRecipe.vue
new file mode 100644
index 0000000..0c3e9bd
--- /dev/null
+++ b/front/components/Recipes/SearchRecipe.vue
@@ -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>
\ No newline at end of file
diff --git a/front/components/Recipes/ShowRecipe.vue b/front/components/Recipes/ShowRecipe.vue
new file mode 100644
index 0000000..ce4908c
--- /dev/null
+++ b/front/components/Recipes/ShowRecipe.vue
@@ -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>
\ No newline at end of file
diff --git a/front/pages/recipes.vue b/front/pages/recipes.vue
deleted file mode 100644
index add763f..0000000
--- a/front/pages/recipes.vue
+++ /dev/null
@@ -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>