update display order

Author: mukolweke

src/App.vue

@@ -9,7 +9,7 @@
                     <slot></slot>
                 </display-current-order>
                 <hr>
-
+                <display-order><slot></slot></display-order>
             </div>
         </div>
 
@@ -29,6 +29,7 @@
     import Vue from 'vue';
 
     Vue.component('make-order', require('./components/make-order').default);
+    Vue.component('display-order', require('./components/display-order').default);
     Vue.component('display-customers', require('./components/display-customers').default);
     Vue.component('display-current-order', require('./components/display-current-order').default);
     Vue.component('display-events', require('./components/display-events').default);

src/components/display-current-order.vue

@@ -1,18 +1,14 @@
 <template>
     <div>
-       <table>
-           <tr>
-
-           </tr>
-       </table>
+        Your Order: {{userName}} - {{foodOrder}} ::: Status == {{actionStatus}}
     </div>
 
 </template>
 
 <script>
     export default {
         name: "display-current-order",
-        props: ['currentOrder']
+        props:['userName','foodOrder','actionStatus']
     }
 </script>
 

src/components/display-customers.vue

@@ -15,6 +15,7 @@
 
         data: ()=>{
             return{
+                isBest: true,
                 bestCustomers: [
                     {username: "William Kamuyo"},
                     {username: "Karanja Raphael"},

src/components/display-events.vue

@@ -1,4 +1,5 @@
 <template>
+    <div>
     <div class="panelDown p3">
         <div class="panel-heading">Events</div>
         <div class="panel-body" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
@@ -7,6 +8,7 @@
             </ul>
         </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -15,7 +17,6 @@
 
         data : ()=>{
             return{
-
                 eventsCyt: [
                     {name: "Marathon"},
                     {name: "Cake Cutting"},
@@ -33,22 +34,6 @@
         box-sizing: border-box;
     }
 
-    #app {
-        font-family: 'Avenir', Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: #2c3e50;
-        margin-top: 60px;
-    }
-
-    .panel {
-        width: 900px;
-        /*height: 200px;*/
-        background: transparent;
-        border: 1px solid black;
-        margin: 0 auto;
-    }
 
     .panelDown {
         float: left;
@@ -68,10 +53,6 @@
         background: yellow;
     }
 
-    .del {
-        background: red;
-    }
-
     .p2 ul li {
         text-decoration: none;
         list-style: none;
@@ -88,12 +69,6 @@
         text-align: left;
     }
 
-    .row:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-
     .panel-heading {
         background: #9dd85c;
         height: 30px;
@@ -120,13 +95,4 @@
         width: 200px;
     }
 
-    .button {
-        width: 200px;
-        height: 20px;
-        margin: 10px auto;
-    }
-
-    .hidden {
-        visibility: hidden;
-    }
 </style>

src/components/display-order.vue

@@ -1,6 +1,7 @@
 <template>
 <div>
     <h4>Current Order List</h4>
+    {{currentOrder}}
     <table>
         <thead>
         <tr>
@@ -12,7 +13,7 @@
         </thead>
         <tbody>
 
-        <tr v-bind:key="order.userName" v-for="(order, index) in currentOrder">
+        <tr v-bind:key="order.userName" v-for="(order, index) in foodOrders">
             <td>{{order.userName}}</td>
             <td>{{order.foodOrder}}</td>
             <td>{{order.actionStatus}}</td>
@@ -23,14 +24,37 @@
         </tr>
         </tbody>
     </table>
+    <hr>
 </div>
 </template>
 
 <script>
     export default {
-       data: ()=>{
-
-       }
+        props: ['currentOrder'],
+        data: ()=>{
+            return{
+                actionStatus: 'Waiting',
+                order: {},
+                foodOrders: [
+                    {userName: 'Michael Mukolwe', foodOrder: 'Fish Ugali', actionStatus: 'Waiting'},
+                ],
+            }
+       },
+        //methods....nb: must be in methods container
+        methods: {
+            addToDoOrder() {
+                this.id = Math.random();
+                this.foodOrders.push(this.order);
+                this.order = {};
+                // console.log(this.foodOrders);
+            },
+
+            delToDoTask(index) {
+
+                this.foodOrders.splice(index, 1);
+                // this.foodOrders = this.foodOrders.filter(order => order.id !== taskObj.id);
+            },
+        }
 
     }
 </script>

src/components/make-order.vue

@@ -9,19 +9,21 @@
         <br/>
         <input class="hidden" type="text" value="Waiting" v-model="actionStatus"/>
     </form>
-    <display-current-order :currentOrder="order"></display-current-order>
+    <display-order :currentOrder="order"></display-order>
+        <display-current-order :userName="order.userName" :foodOrder="order.foodOrder" :currentStatus="actionStatus"></display-current-order>
 </div>
 </template>
 
 <script>
     import Vue from 'vue';
 
-    Vue.component('display-current-order', require('../components/display-order.vue').default);
+    Vue.component('display-order', require('./display-order').default);
+    Vue.component('display-current-order', require('./display-current-order').default);
+
     export default {
         name: "make-order",
         data() {
             return {
-                isBest: false,
                 actionStatus: 'Waiting',
                 order: {},
                 foodOrders: [