Menu View, Cart, RUsers & Roles WIP

src/assets/myData.js

-const items = {
-  seasons: ['Peak 1', 'Peak 2', 'Peak 3', 'Peak 4', 'Red', 'White', 'Blue', 'Flexi'],
-  resortBedrooms: ['Studio', '1', '2', '3', '4', '5', '6'],
-  maxBedrooms: ['2', '4', '6', '8', '10', '12'],
-  bankedEntities: ['Dial an Exchange', 'RCI', 'First Exchange', 'iExchange',
-    'Interval International',
-  ],
-};
-export default items;

src/assets/navigationitems.js

-const items = {
-  items: [
-    {
-      icon: 'T',
-      text: 'Test',
-      route: '/test',
-      open: false,
-    },
-    {
-      icon: 'H',
-      text: 'Home',
-      route: '/home',
-      open: true,
-    },
-    {
-      icon: 'A',
-      text: 'About',
-      open: false,
-      children: [
-        {
-          icon: 't',
-          text: 'About Us',
-          route: '/about/us',
-        },
-        {
-          icon: 't',
-          text: 'About Timeshare',
-          route: '/about/timeshare',
-        },
-      ],
-    },
-    {
-      icon: 'T',
-      text: 'Timeshare',
-      open: false,
-      children: [
-        {
-          icon: 's',
-          text: 'To Sell',
-          route: '/timeshare/tosell',
-        },
-        {
-          icon: 'b',
-          text: 'To Buy',
-          route: '/timeshare/tobuy',
-        },
-        {
-          icon: 'f',
-          text: 'FAQ',
-          route: '/timeshare/faq',
-        },
-      ],
-    },
-    {
-      icon: 'C',
-      text: 'Commercial',
-      open: false,
-      children: [
-        {
-          icon: 's',
-          text: 'Search',
-          route: '/commercial/search',
-        },
-        {
-          icon: 'r',
-          text: 'To Rent',
-          route: '/commercial/torent',
-        },
-        {
-          icon: 's',
-          text: 'To Sell',
-          route: '/commercial/tosell',
-        },
-      ],
-    },
-    {
-      icon: 'R',
-      text: 'Residential',
-      open: false,
-      children: [
-        {
-          icon: 's',
-          text: 'Search',
-          route: '/residential/search',
-        },
-        {
-          icon: 'r',
-          text: 'To Rent',
-          route: '/residential/torent',
-        },
-        {
-          icon: 's',
-          text: 'To Sell',
-          route: '/residential/tosell',
-        },
-      ],
-    },
-    {
-      icon: 'C',
-      text: 'Contact Us',
-      route: '/contactus',
-    },
-  ],
-};
-export default items;

src/components/home/menuItems.vue

       <div class="col-sm-12">
         <div class="about-img-box">
           <img
+            v-if="menu.logo !== ''"
             :src="menu.logo"
             alt="Restaurant Details"
             class="img-fluid"
             style="width:800px;height:400px; border-radius:10px"
           />
+          <img
+            v-else
+            src="../../../public/img/DefaultImg.png"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
         </div>
         <div class="sinse-box" style="border-radius:10px">
           <h3 class="sinse-title">{{ menu.name }}</h3>
             <div class="carousel-item-c" @click="ShowOptions(iMenuItem)">
               <div class="card-box-b card-shadow news-box">
                 <div class="img-box-b">
-                  <img :src="iMenuItem.image" alt class="img-b img-fluid" />
+                  <img
+                    v-if="iMenuItem.image !== ''"
+                    :src="iMenuItem.image"
+                    alt
+                    class="img-b img-fluid"
+                  />
+                  <img
+                    v-else
+                    src="../../../public/img/DefaultImg.png"
+                    alt
+                    class="img-b img-fluid"
+                    style="object-fit: cover;"
+                  />
                 </div>
                 <div class="card-overlay">
                   <div class="card-header-b">

src/components/home/menuOptions.vue

           <div class="carousel-item-c">
             <div class="card-box-b card-shadow news-box">
               <div class="img-box-b">
-                <img :src="item.image" alt class="img-b img-fluid" />
+                <img v-if="item.image !== ''" :src="item.image" alt class="img-b img-fluid" />
+                <img
+                  v-else
+                  src="../../../public/img/DefaultImg.png"
+                  alt
+                  class="img-b img-fluid"
+                  style="object-fit: cover;"
+                />
               </div>
               <div class="card-overlay">
                 <div class="card-header-b">
               </div>
               <div class="col-sm-2">
                 <label style="margin-top: 0.5em">
-                  <b>{{subTotal | toCurrency}}</b>
+                  <b>{{SubTotal | toCurrency}}</b>
                 </label>
               </div>
             </div>
                 </div>
               </div>
             </div>
-            <div class="row">
+            <div class="row" v-if="item.subTitle">
               <div class="col-sm-12">{{ item.subTitle }}</div>
             </div>
-            <hr />
-            <div class="row" v-for="(choice, i) in item.options" :key="i">
-              <div class="col-sm-1">
-                <input
-                  v-if="item.optionType === 'Multiple' || item.optionType === 'MultipleLimit'"
-                  type="checkbox"
-                />
-                <input v-else type="radio" v-model="radio" :value="choice.description" />
-              </div>
-              <div class="col-sm-7">
-                <label>{{ choice.description }}</label>
-              </div>
-              <div class="col-sm-2" v-if="choice.price > 0">
-                <label>R {{ choice.price }}</label>
-              </div>
-            </div>
-            <hr />
+            <hr v-if="item.subTitle" />
+            <optionSelector
+              :item="item"
+              @UpdateSelection="UpdateSelection"
+              @UpdateSelectionQty="UpdateSelectionQty"
+            />
           </div>
         </div>
+        <hr />
         <div class="row">
           <div class="col-sm-12">
             <label>Special Instructions</label>
 </template>
 
 <script>
+import { mapState, mapActions } from "vuex";
+import optionSelector from "../orders/orderOptionSelection";
+
 export default {
   name: "MenuOptions",
   props: {
     showItem: { default: {} }
   },
+  components: {
+    optionSelector
+  },
   data() {
     return {
       wait: true,
-      radio: "",
       item: {},
       qty: 1,
-      subTotal: 0
+      subTotal: 0,
+      selection: []
     };
   },
   methods: {
     Close() {
+      this.item.specialInstructions = "";
+      this.selection = [];
+      this.qty = 1;
       this.$emit("CloseOptions", false);
     },
     Plus() {
       this.qty = this.qty + 1;
-      this.subTotal = this.item.price * this.qty;
     },
     Minus() {
       this.qty = this.qty - 1;
       if (this.qty === 0) {
         this.qty = 1;
       }
-      this.subTotal = this.item.price * this.qty;
+    },
+    CheckItem(value) {
+      alert(JSON.stringify(value));
+    },
+    UpdateSelection(value) {
+      if (value.value) {
+        this.selection.push(value.field);
+      } else {
+        for (let i = 0; i < this.selection.length; i++) {
+          if (this.selection[i].id === value.field.id) {
+            this.selection.splice(i, 1);
+          }
+        }
+      }
+    },
+    UpdateSelectionQty(value) {
+      this.selection.find(s => s.id == value.id).qty = value.qty;
+    },
+    AddToCart() {
+      const cartItem = {
+        id: this.item.id,
+        description: this.item.description,
+        image: this.item.image,
+        name: this.item.name,
+        subTotal: this.subTotal,
+        specialInstructions: this.specialInstructions,
+        qty: this.qty,
+        selection: this.selection
+      };
+
+      this.cartItems.push(cartItem);
+      this.item.specialInstructions = "";
+      this.selection = [];
+      this.qty = 1;
+      this.$emit("CloseOptions", false);
+    }
+  },
+  computed: {
+    ...mapState("cart", ["cartItems"]),
+    SubTotal() {
+      var price = this.item.price * this.qty;
+
+      for (let i = 0; i < this.selection.length; i++) {
+        if (this.selection[i].price > 0) {
+          let optionPrice = this.selection[i].price * this.selection[i].qty;
+          price = price + optionPrice;
+        }
+      }
+      return price;
     }
   },
   watch: {

src/components/orders/cart.vue

+<template>
+  <div class="container">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-box-d">
+            <br />
+            <h1 class="title-d" style="text-align:left; font-size: 250%">My Cart</h1>
+          </div>
+        </div>
+      </div>
+      <!-- ListView -->
+      <ListView :items="cartItems" :displayColumns="columns" :displayFormats="formats" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import ListView from "../shared/listView";
+
+export default {
+  name: "MyCart",
+  components: {
+    ListView
+  },
+  data() {
+    return {
+      wait: true,
+      columns: ["image", "name", "description", "qty", "subTotal"],
+      formats: ["image", "", "", "", "money"]
+    };
+  },
+  methods: {
+    New() {}
+  },
+  computed: {
+    ...mapState("cart", ["cartItems"])
+  }
+};
+</script>

src/components/orders/orderOptionSelection.vue

+<template>
+  <div class="container">
+    <div class="row" v-for="(choice, i) in item.options" :key="i">
+      <div class="col-sm-1">
+        <input
+          v-if="item.optionType === 'Multiple' || item.optionType === 'MultipleLimit'"
+          type="checkbox"
+          v-model="selection[i]"
+          @change="UpdateSelection(choice, i)"
+        />
+        <input
+          v-else
+          type="radio"
+          v-model="selection[i]"
+          name="RadioOption"
+          :value="choice.description"
+          @change="UpdateSelection(choice, i)"
+        />
+      </div>
+      <!-- Description -->
+      <div class="col-sm-6">
+        <label>{{ choice.description }}</label>
+      </div>
+      <!-- Qty -->
+      <div class="col-sm-3" v-if="choice.price > 0">
+        <input
+          class="form-control"
+          type="number"
+          :name="choice.description"
+          v-model="qtys[i]"
+          placeholder="qty"
+          :min="1"
+          @change="UpdateSelectionQty(choice, i)"
+        />
+      </div>
+      <!-- Price -->
+      <div class="col-sm-2" v-if="choice.price > 0">
+        <label>R {{ choice.price }}</label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "optionSelection",
+  props: {
+    item: { type: Object, default: () => {} }
+  },
+  data() {
+    return {
+      selection: [],
+      qtys: []
+    };
+  },
+  methods: {
+    UpdateSelection(field, index) {
+      this.qtys[index] = 1;
+      const item = {
+        field: field,
+        value: this.selection[index]
+      };
+
+      item.field.qty = this.qtys[index];
+
+      if (!item.value) {
+        this.qtys[index] = "Undefined";
+      }
+      this.$emit("UpdateSelection", item);
+    },
+    UpdateSelectionQty(field, index) {
+      field.qty = Number(this.qtys[index]);
+
+      //alert(JSON.stringify(field));
+      this.$emit("UpdateSelectionQty", field);
+    }
+  }
+};
+</script>

src/components/restaurants/restaurantMenuOption.vue

       <div class="col-md-12" style="margin-bottomL 1em">
         <div class="row offset-md-5">
           <div class="col-md-2">
-            <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
+            <button
+              @click="Save()"
+              class="btn btn-b-n"
+              type="button"
+              data-dismiss="modal"
+              name="SaveButton"
+            >Save</button>
           </div>
           <div class="col-md-2">
-            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+            <button
+              @click="Close()"
+              class="btn btn-b-n"
+              type="button"
+              data-dismiss="modal"
+              name="CloseButton"
+            >Close</button>
           </div>
         </div>
       </div>
     },
     Save() {
       this.wait = true;
+      this.menuOption.restaurantId = this.restaurantId;
       if (this.menuOption.categoryDescription !== "All") {
         var category = this.categories.find(
           c => c.description === this.menuOption.categoryDescription
         this.menuOption.categoryId = 0;
       }
       alert(JSON.stringify(this.menuOption));
-      // if (this.menuOption.id === 0) {
-      //   this.addMenuOption(this.menuOption).then(result => {
-      //     this.$router.push("/MenuOptions");
-      //   });
-      // } else {
-      //   this.updateMenuOption(this.menuOption);
-      //   this.$router.push("/MenuOptions");
-      // }
+      if (this.menuOption.id === 0) {
+        this.addMenuOption(this.menuOption).then(result => {
+          this.$router.push("/MenuOptions");
+        });
+      } else {
+        this.updateMenuOption(this.menuOption);
+        this.$router.push("/MenuOptions");
+      }
     },
     New() {
       this.selectedItem = null;

src/components/restaurants/restaurantRole.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Role</h1>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Role Name</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <input class="form-control" type="text" name="description" />
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :showColumnChooser="false"
+            :editable="true"
+            :hideSearch="true"
+            :deleteable="true"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+    <div class="row"></div>
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <div class="input-group-prepend">
+          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListView from "../shared/listView";
+export default {
+  name: "Role",
+  components: {
+    ListView
+  },
+  data() {
+    return {
+      wait: false
+    };
+  }
+};
+</script>

src/components/restaurants/restaurantRoles.vue

+<template>
+  <div>
+    <div class="container">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <br />
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Restaurant User Roles</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :showColumnChooser="false"
+            :editable="true"
+            :hideSearch="true"
+            :deleteable="true"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
+
+export default {
+  name: "RestaurantUserRoles",
+  components: {
+    ListView
+  },
+  data() {
+    return {
+      wait: false,
+      restaurantId: Log.restaurantId()
+    };
+  },
+  methods: {
+    // ...mapActions("restaurantUser", [
+    //   "getUsers",
+    //   "getUser",
+    //   "insertUser",
+    //   "updateUser",
+    //   "deleteUser"
+    // ]),
+    New() {
+      //   this.getUser(0);
+      this.$router.push("/RestaurantRole/0");
+    },
+    Edit(item) {
+      //   this.getUser(item.id);
+      //   this.$modal.show("role");
+    },
+    Delete(item) {
+      //   this.deleteUser(item);
+    }
+    // UpdateUser(item) {
+    //   const restUser = {
+    //     restaurantId: this.restaurantId,
+    //     user: item
+    //   };
+
+    //   if (item.id == 0) {
+    //     this.insertUser(restUser);
+    //   } else {
+    //     this.updateUser(restUser);
+    //   }
+    //   this.$modal.hide("User");
+    // }
+  },
+  computed: {
+    //...mapState("restaurantUser", ["restaurantUsers", "restaurantUser"]),
+    // CurrentUser() {
+    //   return this.restaurantUser.user;
+    // }
+  },
+  mounted() {
+    // this.getUsers(this.restaurantId).then(() => {
+    //   this.wait = false;
+    // });
+  }
+};
+</script>

src/components/restaurants/restaurantUser.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>User</h1>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Email</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <input class="form-control" type="text" name="description" v-model="user.emailAddress" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>First Name</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <input class="form-control" type="text" name="description" v-model="user.firstName" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Surname</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <input class="form-control" type="text" name="description" v-model="user.surname" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Cellphone</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <input class="form-control" type="text" name="description" v-model="user.cellphone" />
+        </div>
+      </div>
+    </div>
+    <div class="row"></div>
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <div class="input-group-prepend">
+          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RestaurantUser",
+  props: {
+    editUser: { default: {} }
+  },
+  data() {
+    return {
+      hasImage: false,
+      user: {}
+    };
+  },
+  methods: {
+    Ok() {
+      this.$emit("UpdateUser", this.user);
+    }
+  },
+  watch: {
+    editUser: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.user = val;
+        }
+      }
+    }
+  }
+};
+</script>

src/components/restaurants/restaurantUsers.vue

+<template>
+  <div>
+    <div class="container">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <br />
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Restaurant Users</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :items="restaurantUsers"
+            :showColumnChooser="false"
+            :editable="true"
+            :hideSearch="true"
+            :deleteable="true"
+            :displayColumns="columns"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+        <modal name="User" :width="600" :height="470">
+          <User @UpdateUser="UpdateUser" :editUser="CurrentUser" />
+        </modal>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import User from "./restaurantUser";
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
+
+export default {
+  name: "RestaurantCategoryList",
+  components: {
+    ListView,
+    User
+  },
+  data() {
+    return {
+      wait: true,
+      columns: ["emailAddress", "firstName", "surname", "cellphone"],
+      restaurantId: Log.restaurantId()
+    };
+  },
+  methods: {
+    ...mapActions("restaurantUser", [
+      "getUsers",
+      "getUser",
+      "insertUser",
+      "updateUser",
+      "deleteUser"
+    ]),
+    New() {
+      this.getUser(0);
+      this.$modal.show("User");
+    },
+    Edit(item) {
+      this.getUser(item.id);
+      this.$modal.show("User");
+    },
+    Delete(item) {
+      this.deleteUser(item);
+    },
+    UpdateUser(item) {
+      const restUser = {
+        restaurantId: this.restaurantId,
+        user: item
+      };
+
+      if (item.id == 0) {
+        this.insertUser(restUser);
+      } else {
+        this.updateUser(restUser);
+      }
+      this.$modal.hide("User");
+    }
+  },
+  computed: {
+    ...mapState("restaurantUser", ["restaurantUsers", "restaurantUser"]),
+    CurrentUser() {
+      return this.restaurantUser.user;
+    }
+  },
+  mounted() {
+    this.getUsers(this.restaurantId).then(() => {
+      this.wait = false;
+    });
+  }
+};
+</script>

src/components/restaurants/rolePremission.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Premission</h1>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Target</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <select class="form-control">
+            <option value="Details">Restaurant Details</option>
+            <option value="MenuCategories">Menu Categories</option>
+            <option value="MenuOptions">Menu Options</option>
+            <option value="Menu">Menu</option>
+            <option value="Orders">Orders</option>
+            <option value="Users">Users</option>
+            <option value="Roles">Roles</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="row"></div>
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <div class="input-group-prepend">
+          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListView from "../shared/listView";
+export default {
+  name: "Role",
+  components: {
+    ListView
+  },
+  data() {
+    return {
+      wait: false
+    };
+  }
+};
+</script>

src/components/shared/listView.vue

               class="btn btn-primary myBackground btn-width cursor-pointer"
               data-toggle="modal"
               data-target="#myModal"
-            >
-              Column Chooser
-            </div>
+            >Column Chooser</div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg">
             <div
               class="btn btn-primary myBackground btn-width cursor-pointer"
               @click="onClearSelected()"
-            >
-              Clear Selected
-            </div>
+            >Clear Selected</div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">
-              New
-            </div>
+            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
           </div>
         </div>
       </div>
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
-                    {{ column | toProper }}
-                  </div>
-                  <div v-else class="p-2 w-100 bd-highlight">
-                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
-                  </div>
+                  <div
+                    v-if="displayHeaders.length === 0"
+                    class="p-2 w-100 bd-highlight"
+                  >{{ column | toProper }}</div>
+                  <div
+                    v-else
+                    class="p-2 w-100 bd-highlight"
+                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
                   <div class="p-2 flex-shrink-1 bd-highlight">
                     <img
                       src="../../../public/img/sort-up.png"
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
           >
             <td v-for="(column, c) in Columns" :key="c">
-              <div v-if="displayFormats.length === 0">
-                {{ isObject(item[column]) ? item[column].display : item[column] }}
-              </div>
+              <div
+                v-if="displayFormats.length === 0"
+              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
-                <div v-if="item[column] !== '0001-01-01T00:00:00'">
-                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
-                </div>
-              </div>
-              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
-                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
+                <div
+                  v-if="item[column] !== '0001-01-01T00:00:00'"
+                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
               </div>
+              <div
+                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
+              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
               </div>
               <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
             </td>
             <td v-if="showCustomAction" class="my-width">
-              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
-                {{ CustomActionHeading }}
-              </button>
+              <button
+                type="button"
+                class="btn my-btn"
+                @click="onCustomClick(item)"
+              >{{ CustomActionHeading }}</button>
             </td>
             <td v-if="editable" class="my-width">
               <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
       <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">
           {{
-            currentPage +
-              " / " +
-              PageCount +
-              (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
+          currentPage +
+          " / " +
+          PageCount +
+          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
           }}
         </div>
         <div class="p-1">
       default: []
     },
     displayFormats: {
-      default: []
+      type: Array,
+      default: () => []
     },
     displayHeaders: {
-      default: []
+      type: Array,
+      default: () => []
     },
     showCustomAction: {
       default: false
         for (const i in Object.keys(this.items)) {
           const item = this.items[i];
           for (const o in Object.keys(item)) {
-            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
               const columnName = Object.keys(item)[o];
               if (!listAll.some(x => x.column === columnName)) {
                 listAll.push({

src/components/shared/navBar.vue

             alt="UVProp logo"
             style="width:110px;height:60px;"
           />
-          Food Glorious Food
+          Fork-Ing Fast
         </div>
         <button
           type="button"
                 <hr />
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/timeshareAdmin')"
+                  @click="routerGoTo('/RestaurantUsers')"
                 >Users</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/timeshareAdmin')"
+                  @click="routerGoTo('/RestaurantRoles')"
                 >Roles</a>
               </div>
               <div
               </span>
             </li>
           </ul>
-          <!-- <i class="fa fa-shopping-cart"></i> -->
         </div>
       </div>
+      <button type="button" class="btn btn-b-n" style="border-radius:20px" @click="GoToCart">
+        <eva-icon name="shopping-cart-outline" fill="white"></eva-icon>
+        <label>
+          <b>&nbsp;&nbsp;{{ CartCount }}</b>
+        </label>
+      </button>
     </div>
   </nav>
 </template>
 
 <script>
-// import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 // import Log from "../../assets/Log";
 
 export default {
   computed: {
     //...mapState("authentication", ["user", "flag", "status", "person", "token"]),
+    ...mapState("cart", ["cartItems"]),
     isLoggedIn() {
       // console.log(Log.isLoggedIn());
       // return Log.isLoggedIn();
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
       return this.logout();
+    },
+    CartCount() {
+      return this.cartItems.length;
     }
   },
   methods: {
     //...mapActions("authentication", ["logout"]),
-
     routerGoTo(goTo) {
       this.$emit("routerGoTo", goTo);
     },
     Search() {
       this.$router.push("/search");
+    },
+    GoToCart() {
+      this.$router.push("/Cart");
     }
   }
 };

src/router/index.js

 import RestaurantMenuItem from "../components/restaurants/restaurantMenuItem.vue"
 import RestaurantMenuItemOptions from "../components/restaurants/restaurantMenuItemOptions.vue";
 import MenuItems from "../components/home/menuItems.vue";
+import Cart from "../components/orders/cart.vue";
+import RestaurantUsers from "../components/restaurants/restaurantUsers.vue";
+import RestaurantRoles from "../components/restaurants/restaurantRoles.vue";
+import RestaurantRole from "../components/restaurants/restaurantRole.vue";
 
 Vue.use(Router);
 
       path: "/Menu/:restautantid",
       name: "MenuItems",
       component: MenuItems
+    },
+    {
+      path: "/Cart",
+      name: "Cart",
+      component: Cart
+    },
+    {
+      path: "/RestaurantUsers",
+      name: "RestaurantUsers",
+      component: RestaurantUsers
+    },
+    {
+      path: "/RestaurantRoles",
+      name: "RestaurantRoles",
+      component: RestaurantRoles
+    },
+    {
+      path: "/RestaurantRole/:id",
+      name: "RestaurantRole",
+      component: RestaurantRole
     }
   ]
 });

src/store/index.js

 import MenuCategories from './modules/restaurants/restaurantMenuCategories';
 import MenuOptions from './modules/restaurants/restaurantMenuOptions';
 import Menu from './modules/restaurants/restaurantMenu';
-import HomeMenu from './modules/restaurants/menu'
+import HomeMenu from './modules/restaurants/menu';
+import Cart from './modules/orders/cart';
+import RestaurantUser from './modules/restaurants/restaurantUsers';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     menuCategories: MenuCategories,
     menuOptions: MenuOptions,
     menu: Menu,
-    homeMenu: HomeMenu
+    homeMenu: HomeMenu,
+    cart: Cart,
+    restaurantUser: RestaurantUser
   },
 });

src/store/modules/orders/cart.js

+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    cartItems: []
+  },
+  mutations: {},
+  getters: {},
+  actions: {}
+}

src/store/modules/restaurants/menu.js

       commit
     }, item) {
       axios
-        .get(`/api/menu/GetOptions/${item.menuId}/${item.categoryId}`)
+        .get(`/api/menu/GetOptions/${item.menuId}`)
         .then(result => commit("setOptions", result.data));
     }
   }

src/store/modules/restaurants/restaurantUsers.js

+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    restaurantUsers: [],
+    restaurantUser: {}
+  },
+  mutations: {
+    setUsers(state, users) {
+      state.restaurantUsers = users;
+    },
+    setUser(state, user) {
+      state.restaurantUser = user;
+    },
+    addUser(state, user) {
+      state.restaurantUsers.push(user);
+    },
+    updateUser(state, user) {
+      state.restaurantUser = user;
+      //state.restaurantUsers.find(res => res.id === user.id).cellphone = user.cellphone;
+      //TODO: update Restaurant Users list.
+    },
+    removeUser(state, user) {
+      state.restaurantUser = {};
+      state.restaurantUsers.pop(user);
+    }
+  },
+  getters: {},
+  actions: {
+    getUsers({
+      commit
+    }, restaurantId) {
+      axios
+        .get(`/api/RestaurantUser/GetRestaurantUsers/${restaurantId}`)
+        .then(result => commit("setUsers", result.data));
+    },
+    getUser({
+      commit
+    }, userId) {
+      axios
+        .get(`/api/RestaurantUser/${userId}`)
+        .then(result => commit("setUser", result.data));
+    },
+    insertUser({
+      commit
+    }, user) {
+      axios
+        .post('/api/RestaurantUser', user)
+        .then(result => commit("addUser", result.data));
+    },
+    updateUser({
+      commit
+    }, user) {
+      axios
+        .put('/api/RestaurantUser', user)
+        .then(result => commit("updateUser", user));
+    },
+    deleteUser({
+      commit
+    }, user) {
+      axios
+        .delete(`/api/RestaurantUser/${user.id}`)
+        .then(result => commit("removeUser", result.data));
+    }
+  }
+}