s416138/ClearBowl
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[CLEAR-28] Adding/retrieving products

Browse Source
This commit is contained in:
Artur Nowakowski 2019-12-05 11:23:34 +01:00
parent f7d3aa68b9
commit 971d1b8f9a
12 changed files with 276 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
front/components/LoginForm.vue → front/components/Auth/LoginForm.vue
View File

0
front/components/RegisterForm.vue → front/components/Auth/RegisterForm.vue
View File

2
front/components/ClearBowlHeader.vue → front/components/Layout/ClearBowlHeader.vue
View File

@ -3,7 +3,7 @@
<Menu mode="horizontal" theme="dark" active-name="1"> <Menu mode="horizontal" theme="dark" active-name="1">
<NuxtLink to="/"> <NuxtLink to="/">
<div class="layout-logo"> <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 class="logo-text">ClearBowl</div>
</div> </div>
</NuxtLink> </NuxtLink>

33
front/components/Logo.vue
View File

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

120
front/components/Products/AddProductModal.vue Normal file
View File

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

72
front/components/Products/ProductsList.vue Normal file
View File

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

3
front/layouts/default.vue
View File

@ -9,7 +9,7 @@
</div> </div>
</template> </template>
<script> <script>
import ClearBowlHeader from "../components/ClearBowlHeader" import ClearBowlHeader from "../components/Layout/ClearBowlHeader"
export default { export default {
components: { components: {
@ -84,6 +84,7 @@
.ivu-btn-primary { .ivu-btn-primary {
background-color: #248200; background-color: #248200;
border-color: #248200
} }
.ivu-btn-primary:hover { .ivu-btn-primary:hover {

2
front/nuxt.config.js
View File

@ -68,7 +68,7 @@ export default {
} }
}, },
axios:{ axios:{
baseURL:"http://192.168.0.103:8000/api" baseURL:"http://127.0.0.1:8000/api"
} }

80
front/pages/index.vue
View File

@ -1,43 +1,61 @@
<template> <template>
<Card class="main-card"> <Card class="main-card">
<Row :gutter="16"> <Row :gutter="16">
<Col span="8"> <Col span="6">
<Card class="cb-menu"> <Card class="cb-menu">
<Icon type="ios-restaurant" size="100" color="white"/> <Icon type="ios-restaurant" size="100" color="white"/>
<div style="text-align:center"> <div style="text-align:center">
<h3>Przepisy</h3> <h3>Przepisy</h3>
</div> </div>
</Card> </Card>
</Col> </Col>
<Col span="8"> <Col span="6">
<Card class="cb-menu"> <Card class="cb-menu">
<Icon type="ios-calculator" size="100" color="white"/> <Icon type="ios-calculator" size="100" color="white"/>
<div style="text-align:center"> <div style="text-align:center">
<h3>Kalkulator</h3> <h3>Kalkulator</h3>
</div> </div>
</Card> </Card>
</Col> </Col>
<Col span="8"> <Col span="6">
<Card class="cb-menu"> <Card class="cb-menu">
<Icon type="ios-leaf" size="100" color="white"/> <Icon type="ios-leaf" size="100" color="white"/>
<div style="text-align:center"> <div style="text-align:center">
<h3>Dieta</h3> <h3>Dieta</h3>
</div> </div>
</Card> </Card>
</Col> </Col>
</Row> <Col span="6">
</Card> <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> </template>
<style scoped> <script>
.main-card { export default {
margin: 0; name: 'index',
top: 50% auth: false,
} };
</script>
.cb-menu {
background: #248200; <style scoped>
color: white; .main-card {
} margin: 0;
top: 50%
}
.cb-menu {
background: #248200;
color: white;
}
</style> </style>

2
front/pages/login.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import LoginForm from "../components/LoginForm"; import LoginForm from "../components/Auth/LoginForm";
export default { export default {
name: "login", name: "login",

29
front/pages/products.vue Normal file
View File

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

2
front/pages/register.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import RegisterForm from "../components/RegisterForm"; import RegisterForm from "../components/Auth/RegisterForm";
export default { export default {
name: "register", name: "register",