Skip to content

Commit 9c820d3

Browse files
mukolwekemukolweke
committed
components 'events','best_customer', updates
1 parent 5fee0db commit 9c820d3

File tree

8 files changed

+593
-180
lines changed

8 files changed

+593
-180
lines changed

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"@vue/cli-plugin-babel": "^3.0.0-beta.15",
1515
"@vue/cli-plugin-eslint": "^3.0.0-beta.15",
1616
"@vue/cli-service": "^3.0.0-beta.15",
17-
"vue-template-compiler": "^2.5.16"
17+
"vue-template-compiler": "^2.5.16",
18+
"webpack": "^4.13.0"
1819
},
1920
"eslintConfig": {
2021
"root": true,

‎src/App.vue‎

Lines changed: 23 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -4,124 +4,43 @@
44
<div class="panel">
55
<div class="panel-heading">Cytonn Cafe</div>
66
<div class="panel-body">
7-
<form>
8-
<label>Client Name: </label>
9-
<input type="text" class="my-input" v-model="order.userName">
10-
<label style="margin-left: 30px;">Food Order: </label>
11-
<input type="text" class="my-input" v-model="order.foodOrder"><br/>
12-
<button class="button" type="button" v-on:click="addToDoOrder()">Order Food</button>
13-
<br/>
14-
<input class="hidden" type="text" value="Waiting" v-model="actionStatus"/>
15-
</form>
7+
<make-order><slot></slot></make-order>
8+
<display-current-order>
9+
<slot></slot>
10+
</display-current-order>
1611
<hr>
17-
Your Order: {{order.userName}} - {{order.foodOrder}} ::: Status == {{actionStatus}}
18-
<hr>
19-
<h4>Current Order List</h4>
20-
<table>
21-
<thead>
22-
<tr>
23-
<td>CLIENT</td>
24-
<td>ORDER</td>
25-
<td>ACTION</td>
26-
<td>CHANGE</td>
27-
</tr>
28-
</thead>
29-
<tbody>
3012

31-
<tr v-bind:key="order.userName" v-for="(order, index) in foodOrders">
32-
<td>{{order.userName}}</td>
33-
<td>{{order.foodOrder}}</td>
34-
<td>{{order.actionStatus}}</td>
35-
<td>
36-
<button class="button del" type="button" v-on:click="delToDoTask(index)">Order Delete
37-
</button>
38-
<br/></td>
39-
</tr>
40-
</tbody>
41-
</table>
4213
</div>
4314
</div>
15+
4416
<div class="row">
45-
<div class="panelDown p2" v-bind:class="{alert:isBest}">
46-
<div class="panel-heading">Best Customers</div>
47-
<div class="panel-body">
48-
<ul v-for="cust in bestCustomers">
49-
<li>{{cust.username}}</li>
50-
</ul>
51-
</div>
52-
</div>
53-
<div class="panelDown p3">
54-
<div class="panel-heading">Events</div>
55-
<div class="panel-body" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
56-
<ul v-for="evnt in eventsCyt">
57-
<li>{{evnt.name}}</li>
58-
</ul>
59-
</div>
60-
</div>
17+
<display-customers>
18+
<slot></slot>
19+
</display-customers>
20+
<display-events>
21+
<slot></slot>
22+
</display-events>
6123
</div>
6224

6325
</div>
6426
</template>
6527

6628
<script scoped>
67-
function isEmpty(obj) {
68-
for (var prop in obj) {
69-
if (obj.hasOwnProperty(prop))
70-
return false;
71-
}
72-
73-
return true;
74-
};
29+
import Vue from 'vue';
7530
31+
Vue.component('make-order', require('./components/make-order').default);
32+
Vue.component('display-customers', require('./components/display-customers').default);
33+
Vue.component('display-current-order', require('./components/display-current-order').default);
34+
Vue.component('display-events', require('./components/display-events').default);
7635
export default {
77-
data() {
78-
return {
79-
isBest: true,
80-
actionStatus: 'Waiting',
81-
order: {},
82-
activeColor: 'red',
83-
fontSize: 20,
84-
foodOrders: [
85-
{userName: 'Michael Mukolwe', foodOrder: 'Fish Ugali', actionStatus: 'Waiting'},
86-
],
87-
bestCustomers: [
88-
{username: "William Kamuyo"},
89-
{username: "Karanja Raphael"},
90-
{username: "Michael Wamae"},
91-
{username: "Mwarua Chaka"},
92-
],
93-
eventsCyt: [
94-
{name: "Marathon"},
95-
{name: "Cake Cutting"},
96-
{name: "Something"},
97-
]
98-
}
99-
},
100-
101-
//methods....nb: must be in methods container
102-
methods: {
103-
addToDoOrder() {
104-
this.id = Math.random();
105-
this.foodOrders.push(this.order);
106-
this.order = {};
107-
// console.log(this.foodOrders);
108-
},
109-
110-
delToDoTask(index) {
111-
112-
this.foodOrders.splice(index, 1);
113-
// this.foodOrders = this.foodOrders.filter(order => order.id !== taskObj.id);
114-
},
115-
116-
117-
},
118-
119-
computed: {}
36+
// components: {
37+
// makeorder
38+
// },
12039
}
12140
12241
</script>
12342

124-
<style>
43+
<style scoped>
12544
* {
12645
box-sizing: border-box;
12746
}
@@ -151,75 +70,7 @@
15170
background: transparent;
15271
border: 1px solid black;
15372
}
154-
155-
.p2 {
156-
margin-left: 180px;
157-
158-
}
159-
160-
.alert .panel-heading {
161-
background: yellow;
162-
}
163-
164-
.del {
165-
background: red;
166-
}
167-
168-
.p2 ul li {
169-
text-decoration: none;
170-
list-style: none;
171-
text-align: left;
172-
}
173-
174-
.p3 {
175-
margin-left: 10px;
176-
}
177-
178-
.p3 ul li {
179-
text-decoration: none;
180-
list-style: none;
181-
text-align: left;
182-
}
183-
184-
.row:after {
185-
content: "";
186-
display: table;
187-
clear: both;
188-
}
189-
190-
.panel-heading {
191-
background: #9dd85c;
192-
height: 30px;
193-
}
194-
195-
.panel-body {
196-
padding: 20px;
197-
}
198-
199-
table {
200-
border-collapse: collapse;
201-
margin: 0 auto;
202-
}
203-
204-
thead {
205-
color: red;
206-
}
207-
208-
table, th, td {
209-
border: 1px solid black;
210-
}
211-
212-
td {
213-
width: 200px;
214-
}
215-
216-
.button {
217-
width: 200px;
218-
height: 20px;
219-
margin: 10px auto;
220-
}
221-
222-
.hidden {
223-
visibility: hidden;
224-
}
22573
</style>
74+
// import makeorder from './components/make-order'
75+
76+
// Vue.component('display-current-order', require('./components/display-current-order').default);

‎src/components/display-current-order.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div>
3+
<table>
4+
<tr>
5+
6+
</tr>
7+
</table>
8+
</div>
9+
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: "display-current-order",
15+
props: ['currentOrder']
16+
}
17+
</script>
18+
19+
20+
<style scoped>
21+
* {
22+
box-sizing: border-box;
23+
}
24+
25+
#app {
26+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
29+
text-align: center;
30+
color: #2c3e50;
31+
margin-top: 60px;
32+
}
33+
</style>

0 commit comments

Comments
 (0)