[CLEAR-28] Adding/retrieving products

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>

front/components/Logo.vue

@@ -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>

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>

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>

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 {

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"
   }
 
 

front/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
     <Card class="main-card">
         <Row :gutter="16">
-              <Col span="8">
+            <Col span="6">
                 <Card class="cb-menu">
                     <Icon type="ios-restaurant" size="100" color="white"/>
                     <div style="text-align:center">
@@ -9,7 +9,7 @@
                     </div>
                 </Card>
             </Col>
-              <Col span="8">
+            <Col span="6">
                 <Card class="cb-menu">
                     <Icon type="ios-calculator" size="100" color="white"/>
                     <div style="text-align:center">
@@ -17,7 +17,7 @@
                     </div>
                 </Card>
             </Col>
-              <Col span="8">
+            <Col span="6">
                 <Card class="cb-menu">
                     <Icon type="ios-leaf" size="100" color="white"/>
                     <div style="text-align:center">
@@ -25,10 +25,28 @@
                     </div>
                 </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>
 
+<script>
+    export default {
+        name: 'index',
+        auth: false,
+    };
+</script>
+
+
 <style scoped>
     .main-card {
         margin: 0;

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",

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>

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",