From 971d1b8f9a77ad0e11c309edcfed5a37f412521f Mon Sep 17 00:00:00 2001
From: Artur Nowakowski <artnow@st.amu.edu.pl>
Date: Thu, 5 Dec 2019 11:23:34 +0100
Subject: [PATCH] [CLEAR-28] Adding/retrieving products

---
 front/components/{ => Auth}/LoginForm.vue     |   0
 front/components/{ => Auth}/RegisterForm.vue  |   0
 .../{ => Layout}/ClearBowlHeader.vue          |   2 +-
 front/components/Logo.vue                     |  33 -----
 front/components/Products/AddProductModal.vue | 120 ++++++++++++++++++
 front/components/Products/ProductsList.vue    |  72 +++++++++++
 front/layouts/default.vue                     |   3 +-
 front/nuxt.config.js                          |   2 +-
 front/pages/index.vue                         |  80 +++++++-----
 front/pages/login.vue                         |   2 +-
 front/pages/products.vue                      |  29 +++++
 front/pages/register.vue                      |   2 +-
 12 files changed, 276 insertions(+), 69 deletions(-)
 rename front/components/{ => Auth}/LoginForm.vue (100%)
 rename front/components/{ => Auth}/RegisterForm.vue (100%)
 rename front/components/{ => Layout}/ClearBowlHeader.vue (97%)
 delete mode 100644 front/components/Logo.vue
 create mode 100644 front/components/Products/AddProductModal.vue
 create mode 100644 front/components/Products/ProductsList.vue
 create mode 100644 front/pages/products.vue

diff --git a/front/components/LoginForm.vue b/front/components/Auth/LoginForm.vue
similarity index 100%
rename from front/components/LoginForm.vue
rename to front/components/Auth/LoginForm.vue
diff --git a/front/components/RegisterForm.vue b/front/components/Auth/RegisterForm.vue
similarity index 100%
rename from front/components/RegisterForm.vue
rename to front/components/Auth/RegisterForm.vue
diff --git a/front/components/ClearBowlHeader.vue b/front/components/Layout/ClearBowlHeader.vue
similarity index 97%
rename from front/components/ClearBowlHeader.vue
rename to front/components/Layout/ClearBowlHeader.vue
index 8a2f9af..c8cde8b 100644
--- a/front/components/ClearBowlHeader.vue
+++ b/front/components/Layout/ClearBowlHeader.vue
@@ -3,7 +3,7 @@
     <Menu mode="horizontal" theme="dark" active-name="1">
       <NuxtLink to="/">
         <div class="layout-logo">
-          <img class="logo" src="../static/bowl.png"/>
+          <img class="logo" src="../../static/bowl.png"/>
           <div class="logo-text">ClearBowl</div>
         </div>
       </NuxtLink>
diff --git a/front/components/Logo.vue b/front/components/Logo.vue
deleted file mode 100644
index 84bd65c..0000000
--- a/front/components/Logo.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-      <path
-        d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
-        fill="#00C58E"
-      />
-      <path
-        d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
-        fill="#108775"
-      />
-      <path
-        d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
-        fill="#2F495E"
-        fill-rule="nonzero"
-      />
-    </g>
-  </svg>
-</template>
-<style>
-.NuxtLogo {
-  animation: 1s appear;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/front/components/Products/AddProductModal.vue b/front/components/Products/AddProductModal.vue
new file mode 100644
index 0000000..f6a8058
--- /dev/null
+++ b/front/components/Products/AddProductModal.vue
@@ -0,0 +1,120 @@
+<template>
+    <div>
+        <Button v-if="$auth.loggedIn" type="primary" @click="active = true">Dodaj produkt</Button>
+        <Modal v-model="active" @on-cancel="cancel">
+            <p slot="header" style="text-align:center">
+                <Icon type="ios-pizza"/>
+                <span>Dodawanie produktu</span>
+            </p>
+            <div>
+                <Form ref="form" :model="form" :rules="rules">
+                    <FormItem label="Nazwa" prop="name">
+                        <Input v-model="form.name" placeholder="Podaj nazwę produktu"/>
+                    </FormItem>
+                    <FormItem label="Kilokalorie" prop="kcal">
+                        <InputNumber class="input" v-model="form.kcal" :min="0" :precision="0"/>
+                    </FormItem>
+                    <FormItem label="Węglowodany" prop="carbohydrates">
+                        <InputNumber class="input" v-model="form.carbohydrates" :min="0"/>
+                    </FormItem>
+                    <FormItem label="Białko" prop="protein">
+                        <InputNumber class="input" v-model="form.protein" :min="0"/>
+                    </FormItem>
+                    <FormItem label="Tłuszcz" prop="fat">
+                        <InputNumber class="input" v-model="form.fat" :min="0"/>
+                    </FormItem>
+                </Form>
+            </div>
+            <div slot="footer">
+                <Button type="error" @click="cancel">Anuluj</Button>
+                <Button type="success" :loading="modal_loading" @click="ok">Zatwierdź</Button>
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'AddProductModal',
+        data() {
+            return {
+                active: false,
+                modal_loading: false,
+                form: {
+                    name: null,
+                    kcal: null,
+                    carbohydrates: null,
+                    protein: null,
+                    fat: null
+                },
+                rules: {
+                    name: [
+                        {
+                            required: true,
+                            message: 'Proszę podać nazwę produktu',
+                            trigger: 'blur'
+                        }
+                    ],
+                    kcal: [
+                        {
+                            required: false
+                        }
+                    ],
+                    carbohydrates: [
+                        {
+                            required: false
+                        }
+                    ],
+                    protein: [
+                        {
+                            required: false
+                        }
+                    ],
+                    fat: [
+                        {
+                            required: false
+                        }
+                    ]
+                },
+            };
+        },
+        methods: {
+            cancel() {
+                this.active = false;
+                this.$Message.error('Anulowano');
+            },
+            ok() {
+                this.$refs.form.validate((valid) => {
+                    if (!valid) {
+                        this.$Message.error('Błąd');
+                        return;
+                    }
+
+                    this.modal_loading = true;
+
+                    this.$axios.post('/product', this.form)
+                        .then(() => {
+                            this.$Message.success('Sukces!');
+                            this.active = false;
+                            this.resetForm();
+                        })
+                        .catch(() => {
+                            this.$Message.error('Błąd!');
+                            this.modal_loading = false;
+                        });
+
+                });
+            },
+            resetForm() {
+                this.modal_loading = false;
+                this.$refs.form.resetFields();
+            }
+        }
+    };
+</script>
+
+<style scoped>
+    .input {
+        width: 15%;
+    }
+</style>
diff --git a/front/components/Products/ProductsList.vue b/front/components/Products/ProductsList.vue
new file mode 100644
index 0000000..1a904c5
--- /dev/null
+++ b/front/components/Products/ProductsList.vue
@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <Table  :columns="columns" :border="true" :data="data" :loading="loading"/>
+        <Page @on-change="retrieveProducts" :total="pagination.total" style="margin-top:10px;"/>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ProductsList',
+        mounted() {
+            this.retrieveProducts();
+        },
+        data() {
+            return {
+                columns: [
+                    {
+                        title: 'Nazwa',
+                        key: 'name'
+                    },
+                    {
+                        title: 'Kilokalorie',
+                        key: 'kcal'
+                    },
+                    {
+                        title: 'Węglowodany',
+                        key: 'carbohydrates'
+                    },
+                    {
+                        title: 'Białko',
+                        key: 'protein'
+                    },
+                    {
+                        title: 'Tłuszcz',
+                        key: 'fat'
+                    }
+                ],
+                data: [],
+                pagination: {
+                    total: 0
+                },
+                loading: true,
+            };
+        },
+        methods: {
+            retrieveProducts(page = 1) {
+                this.loading = true;
+                this.$axios.get('/product', {
+                    params: {
+                        page: page
+                    }
+                })
+                    .then((res) => {
+                        let data = res.data.data.products;
+                        let products = data.data;
+                        let pagination = {
+                            'current_page': data.current_page,
+                            'per_page': data.per_page,
+                            'total': data.total
+                        };
+                        this.data = products;
+                        this.pagination = pagination;
+                        this.loading = false;
+                    })
+                    .catch(() => {
+                        this.loading = false;
+                        this.$Message.error('Błąd!');
+                    });
+            }
+        }
+    };
+</script>
diff --git a/front/layouts/default.vue b/front/layouts/default.vue
index d3be958..5b886d8 100644
--- a/front/layouts/default.vue
+++ b/front/layouts/default.vue
@@ -9,7 +9,7 @@
     </div>
 </template>
 <script>
-  import ClearBowlHeader from "../components/ClearBowlHeader"
+  import ClearBowlHeader from "../components/Layout/ClearBowlHeader"
 
   export default {
     components: {
@@ -84,6 +84,7 @@
 
   .ivu-btn-primary {
     background-color: #248200;
+      border-color: #248200
   }
 
   .ivu-btn-primary:hover {
diff --git a/front/nuxt.config.js b/front/nuxt.config.js
index eb16958..caa07f2 100644
--- a/front/nuxt.config.js
+++ b/front/nuxt.config.js
@@ -68,7 +68,7 @@ export default {
     }
   },
   axios:{
-    baseURL:"http://192.168.0.103:8000/api"
+    baseURL:"http://127.0.0.1:8000/api"
   }
 
 
diff --git a/front/pages/index.vue b/front/pages/index.vue
index 747e774..bfe11a0 100644
--- a/front/pages/index.vue
+++ b/front/pages/index.vue
@@ -1,43 +1,61 @@
 <template>
-        <Card class="main-card">
-            <Row :gutter="16">
-              <Col span="8">
+    <Card class="main-card">
+        <Row :gutter="16">
+            <Col span="6">
                 <Card class="cb-menu">
-                  <Icon type="ios-restaurant" size="100" color="white"/>
-                  <div style="text-align:center">
-                    <h3>Przepisy</h3>
-                  </div>
+                    <Icon type="ios-restaurant" size="100" color="white"/>
+                    <div style="text-align:center">
+                        <h3>Przepisy</h3>
+                    </div>
                 </Card>
-              </Col>
-              <Col span="8">
+            </Col>
+            <Col span="6">
                 <Card class="cb-menu">
-                  <Icon type="ios-calculator" size="100" color="white"/>
-                  <div style="text-align:center">
-                    <h3>Kalkulator</h3>
-                  </div>
+                    <Icon type="ios-calculator" size="100" color="white"/>
+                    <div style="text-align:center">
+                        <h3>Kalkulator</h3>
+                    </div>
                 </Card>
-              </Col>
-              <Col span="8">
+            </Col>
+            <Col span="6">
                 <Card class="cb-menu">
-                  <Icon type="ios-leaf" size="100" color="white"/>
-                  <div style="text-align:center">
-                    <h3>Dieta</h3>
-                  </div>
+                    <Icon type="ios-leaf" size="100" color="white"/>
+                    <div style="text-align:center">
+                        <h3>Dieta</h3>
+                    </div>
                 </Card>
-              </Col>
-            </Row>
-        </Card>
+            </Col>
+            <Col span="6">
+                <NuxtLink to="/products">
+                    <Card class="cb-menu">
+                        <Icon type="ios-pizza" size="100" color="white"/>
+                        <div style="text-align:center">
+                            <h3>Produkty</h3>
+                        </div>
+                    </Card>
+                </NuxtLink>
+            </Col>
+        </Row>
+    </Card>
 </template>
 
-<style scoped>
-  .main-card {
-    margin: 0;
-    top: 50%
-  }
+<script>
+    export default {
+        name: 'index',
+        auth: false,
+    };
+</script>
 
-  .cb-menu {
-    background: #248200;
-    color: white;
-  }
+
+<style scoped>
+    .main-card {
+        margin: 0;
+        top: 50%
+    }
+
+    .cb-menu {
+        background: #248200;
+        color: white;
+    }
 
 </style>
diff --git a/front/pages/login.vue b/front/pages/login.vue
index f8511ee..3b3cc85 100644
--- a/front/pages/login.vue
+++ b/front/pages/login.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  import LoginForm from "../components/LoginForm";
+  import LoginForm from "../components/Auth/LoginForm";
 
   export default {
     name: "login",
diff --git a/front/pages/products.vue b/front/pages/products.vue
new file mode 100644
index 0000000..295f374
--- /dev/null
+++ b/front/pages/products.vue
@@ -0,0 +1,29 @@
+<template>
+    <div style="width: 100%;">
+        <ProductsList style="margin-bottom: 10px;"/>
+        <AddProductModal/>
+    </div>
+</template>
+
+<script>
+    import AddProductModal from '../components/Products/AddProductModal';
+    import ProductsList from '../components/Products/ProductsList';
+
+    export default {
+        name: 'products',
+        auth: false,
+        components: {
+            ProductsList,
+            AddProductModal
+        },
+        data() {
+            return {
+                productsListData: null
+            };
+        },
+    };
+</script>
+
+<style scoped>
+
+</style>
diff --git a/front/pages/register.vue b/front/pages/register.vue
index c9abd7d..502e3b5 100644
--- a/front/pages/register.vue
+++ b/front/pages/register.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  import RegisterForm from "../components/RegisterForm";
+  import RegisterForm from "../components/Auth/RegisterForm";
 
   export default {
     name: "register",