Menu Option & Display WIP

package.json

@@ -17,12 +17,12 @@
     "core-js": "^2.6.11",
     "datatables.net": "^1.10.20",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.1",
     "js-sha256": "^0.9.0",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
     "moment": "^2.24.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "roboto-fontface": "*",
     "sass-loader": "^7.3.1",
     "stylus-loader": "^3.0.2",
@@ -33,7 +33,7 @@
     "vue-eva-icons": "^1.1.1",
     "vue-fontawesome-icon": "^1.3.0",
     "vue-image-upload-resize": "^2.3.0",
-    "vue-js-modal": "^1.3.33",
+    "vue-js-modal": "^1.3.35",
     "vue-json-excel": "^0.2.98",
     "vue-router": "^3.1.5",
     "vue-switches": "^2.0.1",

src/assets/Log.js

@@ -47,6 +47,9 @@ const items = {
   isLoggedIn() {
     return localStorage.getItem('token') !== undefined && localStorage.getItem('token') !== null;
   },
+  restaurantId() {
+    return 1;
+  },
   getUser() {
     return localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
   },

src/components/home/menuItems.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="container">
+    <div class="container col-md-12">
+      <div class="col-sm-12">
+        <div class="about-img-box">
+          <img
+            :src="menu.logo"
+            alt="Restaurant Details"
+            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>
+          <p>{{ menu.categories }}</p>
+          <ul class="card-info d-flex justify-content-around">
+            <li>
+              <h4 class="card-info-title">
+                <img src="/img/delivery-truck-with-dollar.png" height="30px" width="30px" />
+              </h4>
+              <span>{{ menu.deliveryFee }}</span>
+            </li>
+            <li>
+              <h4 class="card-info-title">
+                <img src="/img/delivery-truck-with-circular-clock.png" height="30px" width="30px" />
+              </h4>
+              <span>{{ menu.deliveryTime }}</span>
+            </li>
+          </ul>
+          <p>{{ menu.suburb }}, {{ menu.city }}, {{ menu.province }}, {{ menu.postalCode }}</p>
+        </div>
+      </div>
+    </div>
+    <!-- TODO: Revisit this -->
+    <!-- <div class="container col-md-12">
+      <ul v-for="(item, i) in menu.categoryList" :key="i" class="navbar-nav">
+        <li style="float: left;">{{item}}</li>
+      </ul>
+    </div>-->
+    <div v-if="!showOptions">
+      <div v-for="iMenu in menu.menuList" :key="iMenu.category">
+        <div class="row section-t3" style="text-align:left">
+          <div class="col-sm-12">
+            <div class="title-box-d">
+              <h3 class="title-d">{{ iMenu.category }}</h3>
+            </div>
+          </div>
+          <div
+            class="col-md-4"
+            v-for="(iMenuItem, i) in iMenu.items"
+            :key="i"
+            style="cursor: pointer;"
+          >
+            <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" />
+                </div>
+                <div class="card-overlay">
+                  <div class="card-header-b">
+                    <div class="card-title-b">
+                      <h2 class="title-2" style="color: #ffffff;">{{ iMenuItem.name }}</h2>
+                    </div>
+                    <div class="card-date">
+                      <span class="date-a">{{ iMenuItem.description }}</span>
+                    </div>
+                    <br />
+                    <div class="card-category-b">
+                      <span class="category-b">
+                        <b>{{ iMenuItem.price }}</b>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <MenuOptions :showItem="CurrentOption" @CloseOptions="CloseOptions" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import MenuOptions from "./menuOptions";
+
+export default {
+  name: "MenuLayout",
+  components: {
+    MenuOptions
+  },
+  data() {
+    return {
+      wait: true,
+      radio: "",
+      showOptions: false
+    };
+  },
+  methods: {
+    ...mapActions("homeMenu", ["getMenu", "getOptions"]),
+    ShowOptions(item) {
+      this.getOptions(item);
+      this.showOptions = true;
+    },
+    CloseOptions(value) {
+      this.showOptions = value;
+    }
+  },
+  computed: {
+    ...mapState("homeMenu", ["menu", "options"]),
+    CurrentOption() {
+      return this.options;
+    }
+  },
+  mounted() {
+    this.getMenu(this.$route.params.restautantid);
+  }
+  // watch: {
+  //   options: {
+  //     immediate: true,
+  //     handler(val, oldVal) {
+  //       if (val) this.options = val;
+  //     }
+  //   }
+  // }
+};
+</script>

src/components/home/menuOptions.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="container">
+    <div class="row" style="text-align:left">
+      <!--Column 1 -->
+      <div class="col-md-6" style="margin-bottomL 1em">
+        <div class="row" style="text-align:left">
+          <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" />
+              </div>
+              <div class="card-overlay">
+                <div class="card-header-b">
+                  <div class="card-title-b">
+                    <h2 class="title-2" style="color: #ffffff;">{{ item.name }}</h2>
+                  </div>
+                  <div class="card-date">
+                    <span class="date-a">{{ item.description }}</span>
+                  </div>
+                  <br />
+                  <div class="card-category-b">
+                    <span class="category-b">
+                      <b>{{ item.displayPrice }}</b>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12" style="margin-top: 1em">
+            <div class="row">
+              <div class="col-sm-2">
+                <button
+                  @click="Minus()"
+                  class="btn btn-b-n"
+                  type="button"
+                  style="border-radius:50px"
+                >
+                  <eva-icon name="minus-outline" fill="white"></eva-icon>
+                </button>
+              </div>
+              <div class="col-sm-1">
+                <label style="margin-top: 0.5em">{{qty}}</label>
+              </div>
+              <div class="col-sm-2">
+                <button
+                  @click="Plus()"
+                  class="btn btn-b-n"
+                  type="button"
+                  style="border-radius:50px"
+                >
+                  <eva-icon name="plus-outline" fill="white"></eva-icon>
+                </button>
+              </div>
+              <div class="col-sm-2">
+                <label style="margin-top: 0.5em">
+                  <b>{{subTotal | toCurrency}}</b>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--Column 2 -->
+      <div class="col-md-6" style="margin-bottomL 1em">
+        <div class="row" style="text-align:left">
+          <div class="container" v-for="(item, i) in item.options" :key="i">
+            <div class="row">
+              <div class="col-sm-12">
+                <div class="title-box-d">
+                  <h3 class="title-d">{{ item.description }}</h3>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <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 />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-12">
+            <label>Special Instructions</label>
+            <div class="input-group-prepend">
+              <textarea
+                class="form-control editor form-control-lg form-control-a"
+                v-model="item.specialInstructions"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <br />
+    </div>
+
+    <div class="row">
+      <div class="col-md-12" style="margin-top: 1em">
+        <button @click="AddToCart()" class="btn btn-b-n" type="button">Add To Cart</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12" style="margin-top: 1em">
+        <button @click="Close()" class="btn btn-b-n" type="button">Back</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MenuOptions",
+  props: {
+    showItem: { default: {} }
+  },
+  data() {
+    return {
+      wait: true,
+      radio: "",
+      item: {},
+      qty: 1,
+      subTotal: 0
+    };
+  },
+  methods: {
+    Close() {
+      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;
+    }
+  },
+  watch: {
+    showItem: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.item = val;
+          this.subTotal = this.item.price;
+        }
+      }
+    }
+  }
+};
+</script>

src/components/home/restaurantsSection.vue

@@ -3,7 +3,7 @@
     <div class="form-group row"></div>
     <div class="form-group row">
       <div class="col-md-4" v-for="restaurant in restaurants" :key="restaurant.id">
-        <router-link :to="'/Search'">
+        <router-link :to="`/Menu/${restaurant.id}`">
           <div class="card-box-a card-shadow">
             <div class="img-box-a">
               <img
@@ -24,14 +24,14 @@
                     </router-link>
                   </h2>
                   <h3 class="card-title-b">
-                    <router-link :to="'/Search'" class="link-a">
+                    <router-link :to="`/Menu/${restaurant.id}`" class="link-a">
                       {{
                       restaurant.suburb
                       }}
                     </router-link>
                   </h3>
                   <h4 class="card-title-c">
-                    <router-link :to="'/Search'" class="link-a">
+                    <router-link :to="`/Menu/${restaurant.id}`" class="link-a">
                       {{
                       restaurant.subText
                       }}
@@ -40,7 +40,7 @@
                 </div>
                 <div class="card-body-a">
                   <div class="price-box d-flex"></div>
-                  <router-link :to="'/Search'" class="link-a">
+                  <router-link :to="`/Menu/${restaurant.id}`" class="link-a">
                     <span class="ion-ios-arrow-forward"></span>
                   </router-link>
                 </div>

src/components/restaurants/restaurantDetails.vue

@@ -378,6 +378,7 @@ import ListView from "../shared/listView";
 import Categories from "../restaurants/restaurantCategorySelect";
 import TradingHours from "../accounts/tradingHours";
 import ImageUploader from "vue-image-upload-resize";
+import Log from "../../assets/Log";
 
 export default {
   name: "RestaurantDetails",
@@ -399,7 +400,8 @@ export default {
       ],
       wait: false,
       selectedMops: [],
-      hasImage: false
+      hasImage: false,
+      restaurantId: Log.restaurantId()
     };
   },
   methods: {
@@ -506,7 +508,7 @@ export default {
   },
   mounted() {
     this.wait = false;
-    this.getRestaurant(5);
+    this.getRestaurant(this.restaurantId);
   },
   watch: {
     SavedMops() {

src/components/restaurants/restaurantMenu.vue

@@ -0,0 +1,89 @@
+<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%">Menu</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :items="menuItems"
+            :showColumnChooser="false"
+            :editable="true"
+            :deleteable="true"
+            :displayColumns="columns"
+            :displayFormats="formats"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuItem from "../restaurants/restaurantMenuItem";
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
+
+export default {
+  name: "RestaurantMenu",
+  components: {
+    ListView,
+    MenuItem
+  },
+  data() {
+    return {
+      wait: true,
+      menu: {},
+      columns: ["category", "name", "description", "price", "image"],
+      formats: ["", "", "", "money", "image"],
+      restaurantId: Log.restaurantId()
+    };
+  },
+  methods: {
+    ...mapActions("menu", ["getMenuItems", "deleteMenuItem"]),
+    New() {
+      // this.menu = this.menuItem;
+      // this.$modal.show("Menu");
+      this.$router.push("/MenuItem/0");
+    },
+    Edit(item) {
+      this.menu = item;
+      this.$router.push("/MenuItem/" + item.id);
+    },
+    Delete(item) {
+      this.wait = true;
+      this.deleteMenuItem(item);
+
+      this.getMenuItems(this.restaurantId).then(() => {
+        this.wait = false;
+      });
+    }
+  },
+  computed: {
+    ...mapState("menu", ["menuItem", "menuItems"]),
+    CurrentMenu() {
+      return this.menu;
+    }
+  },
+  mounted() {
+    this.getMenuItems(this.restaurantId).then(() => {
+      this.wait = false;
+    });
+  }
+};
+</script>

src/components/restaurants/restaurantMenuCategories.vue

@@ -39,6 +39,7 @@
 import Category from "../restaurants/restaurantMenuCateory";
 import ListView from "../shared/listView";
 import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
 
 export default {
   name: "RestaurantCategoryList",
@@ -50,7 +51,8 @@ export default {
     return {
       wait: true,
       category: {},
-      columns: ["id", "description"]
+      columns: ["description"],
+      restaurantId: Log.restaurantId()
     };
   },
   methods: {
@@ -72,7 +74,7 @@ export default {
       this.deleteCategory(item.id);
     },
     CategoryUpdate(item) {
-      item.restaurantId = 5;
+      item.restaurantId = this.restaurantId;
       if (item.id == 0) {
         this.addCategory(item);
       } else {
@@ -88,7 +90,7 @@ export default {
     }
   },
   mounted() {
-    this.getCategories(5).then(() => {
+    this.getCategories(this.restaurantId).then(() => {
       this.wait = false;
     });
   }

src/components/restaurants/restaurantMenuItem.vue

@@ -0,0 +1,240 @@
+<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%">Menu Item</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container" v-if="!showOption">
+      <div class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Category</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" v-model="menuItem.category">
+              <option v-for="(cat, i) in categories" :key="i">
+                {{
+                cat.description
+                }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>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" v-model="menuItem.name" />
+          </div>
+        </div>
+      </div>
+      <div class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Description</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" v-model="menuItem.description" />
+          </div>
+        </div>
+      </div>
+      <div class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Price</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="number" v-model="menuItem.price" />
+          </div>
+        </div>
+      </div>
+      <div v-if="!menuItem.image" class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Image</label>
+          <div class="input-group-prepend">
+            <image-uploader
+              :preview="true"
+              :className="['fileinput', { 'fileinput--loaded': hasImage }]"
+              capture="environment"
+              :debug="1"
+              doNotResize="gif"
+              :autoRotate="true"
+              outputFormat="verbose"
+              @input="setImage"
+            >
+              <label for="fileInput" slot="upload-label">
+                <figure>
+                  <path
+                    class="path1"
+                    d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
+                  ></path>
+                </figure>
+              </label>
+            </image-uploader>
+          </div>
+        </div>
+      </div>
+      <div v-else class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <img :src="menuItem.image" style="height:100px; width:100px; object-fit: cover;" />
+          <br />
+          <span class="input-group-text" align="center" style="width:100px" @click="removeImage()">
+            <eva-icon name="trash-2-outline" fill="#24aae1"></eva-icon>Delete
+          </span>
+        </div>
+      </div>
+      <div class="row" style="text-align:left" v-if="1 === 2">
+        <div class="col-md-12" style="margin-bottom: 1em">
+          <div class="custom-control custom-switch">
+            <label>Override Options</label>
+            <input
+              style="margin-left: 1px"
+              type="checkbox"
+              class="custom-control-input"
+              id="thCloseSwitch"
+              :checked="menuItem.overrideOptions"
+              @change="selectionChanged"
+            />
+            <label
+              class="custom-control-label"
+              for="thCloseSwitch"
+              style="margin-left: 40px"
+            >{{menuItem.overrideOptions ? 'Yes - This will override any menu options set on the category' : 'No - This will append category options to the below options'}}</label>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="text-align:left" v-if="1 === 2">
+        <div class="col-md-12" style="margin-bottomL 1em">
+          <label>Options</label>
+          <ListView
+            :items="menuItem.options"
+            @onEdit="OptionEdit"
+            @onDelete="OptionDelete"
+            @onNew="OptionNew"
+          />
+        </div>
+      </div>
+      <div class="row"></div>
+      <div class="row">
+        <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>
+            </div>
+            <div class="col-md-2">
+              <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+    <div v-else class="containers">
+      <ItemOption @Close="CloseOptions" :menuOption="CurrentOption" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
+import ImageUploader from "vue-image-upload-resize";
+import ListView from "../shared/listView";
+import ItemOption from "./restaurantMenuItemOptions";
+
+export default {
+  name: "MenuItem",
+  components: {
+    ImageUploader,
+    ListView,
+    ItemOption
+  },
+  data() {
+    return {
+      wait: false,
+      hasImage: false,
+      restaurantId: Log.restaurantId(),
+      showOption: false,
+      menuOption: {}
+    };
+  },
+  methods: {
+    ...mapActions("menuCategories", ["getCategories"]),
+    ...mapActions("menu", ["getMenuItem", "insertMenuItem", "updateMenuItem"]),
+    Save() {
+      //this.wait = true;
+      this.menuItem.restaurantId = this.restaurantId;
+      if (this.menuItem.category !== "") {
+        var category = this.categories.find(
+          c => c.description === this.menuItem.category
+        );
+        this.menuItem.categoryId = category.id;
+      }
+      console.log(JSON.stringify(this.menuItem));
+
+      this.insertMenuItem(this.menuItem).then(fulfilled => {
+        this.$router.push("/RestaurantMenu");
+      });
+    },
+    Close() {
+      this.$router.push("/RestaurantMenu");
+    },
+    setImage: function(output) {
+      this.hasImage = true;
+      this.menuItem.image = output.dataUrl;
+    },
+    removeImage() {
+      this.hasImage = false;
+      this.menuItem.image = null;
+    },
+    selectionChanged() {
+      this.menuItem.overrideOptions = !this.menuItem.overrideOptions;
+    },
+    OptionNew() {
+      //new
+      this.menuOption = {};
+      this.menuOption.options = [];
+      this.showOption = true;
+    },
+    OptionEdit(item) {
+      //edit
+    },
+    OptionDelete(item) {
+      //delete
+    },
+    CloseOptions(item) {
+      if (item) {
+        this.showOption = false;
+      }
+    }
+  },
+  computed: {
+    ...mapState("menuCategories", ["categories"]),
+    ...mapState("menu", ["menuItem"]),
+    CurrentOption() {
+      return this.menuOption;
+    }
+  },
+  mounted() {
+    this.wait = true;
+    this.getCategories(this.restaurantId);
+    this.getMenuItem(this.$route.params.itemid);
+    this.wait = false;
+  }
+};
+</script>

src/components/restaurants/restaurantMenuItemOptions.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Menu Option</h1>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Description</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" v-model="menuOption.description" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Option Type</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" v-model="menuOption.optionType">
+            <option v-for="item in optionTypes" :value="item.id" :key="item.id">{{item.description}}</option>
+          </select>
+        </div>
+      </div>
+      <div class="col-md-6" style="margin-bottom: 1em" v-if="menuOption.optionType === 3">
+        <label>Option Limit</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="number" v-model="menuOption.optionLimit" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Is Base Price?</label>
+        <div class="input-group-prepend">
+          <input
+            style="margin-left: 1px"
+            type="checkbox"
+            class="custom-control-input"
+            id="thCloseSwitch"
+            :checked="menuOption.isBasePrice"
+            @change="selectionChanged"
+          />
+          <label
+            class="custom-control-label"
+            for="thCloseSwitch"
+            style="margin-left: 40px"
+          >{{menuOption.isBasePrice ? 'Yes' : 'No'}}</label>
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Rank</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="number" v-model="menuOption.rank" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Options</label>
+        <ListView
+          :items="menuOption.options"
+          :showColumnChooser="false"
+          :editable="true"
+          :deleteable="true"
+          :displayColumns="columns"
+          @onEdit="Edit"
+          @onDelete="Delete"
+          @onNew="New"
+        />
+        <modal name="OptionItem" :width="600" :height="400">
+          <OptionItem @MenuItemUpdated="MenuItemUpdated" :editMenuOptionItem="selectedItem" />
+        </modal>
+      </div>
+    </div>
+    <div class="row"></div>
+    <div class="row">
+      <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>
+          </div>
+          <div class="col-md-2">
+            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="wait" id="preloader"></div>
+  </div>
+</template>
+
+<script>
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+import OptionItem from "./restaurantMenuOptionItem";
+import Log from "../../assets/Log";
+
+export default {
+  name: "MenuOption",
+  components: {
+    ListView,
+    OptionItem
+  },
+  props: {
+    menuOption: { default: {} }
+  },
+  data() {
+    return {
+      selectedOption: "Single",
+      selectedItem: {},
+      isEdit: false,
+      columns: ["description", "price", "rank"],
+      wait: false,
+      restaurantId: Log.restaurantId(),
+      menuItemId: 0
+    };
+  },
+  methods: {
+    ...mapActions("menuOptions", ["getOptionTypes"]),
+    selectionChanged() {
+      this.menuOption.isBasePrice = !this.menuOption.isBasePrice;
+    },
+    Close() {
+      this.$emit("Close", true);
+    },
+    Save() {
+      //this.wait = true;
+      alert(JSON.stringify(this.menuOption));
+      //   if (this.menuOption.categoryDescription !== "All") {
+      //     var category = this.categories.find(
+      //       c => c.description === this.menuOption.categoryDescription
+      //     );
+      //     this.menuOption.categoryId = category.id;
+      //   } else {
+      //     this.menuOption.categoryId = 0;
+      //   }
+
+      //   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;
+      this.$modal.show("OptionItem");
+    },
+    Edit(item) {
+      this.isEdit = true;
+      this.selectedItem = item;
+      this.$modal.show("OptionItem");
+    },
+    Delete(item) {
+      this.deleteMenuOptionItem(item);
+    },
+    MenuItemUpdated(item) {
+      //alert(JSON.stringify(item));
+      item.menuOptionId = this.menuOption.id;
+      if (this.isEdit) {
+        this.menuOption.options.push(item);
+      }
+
+      this.$modal.hide("OptionItem");
+      this.isEdit = false;
+    }
+  },
+  computed: {
+    ...mapState("menuOptions", ["optionTypes"])
+  },
+  mounted() {
+    this.wait = false;
+    this.getOptionTypes();
+  },
+  watch: {
+    menuOption: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.menuOption = val;
+        }
+      }
+    }
+  }
+};
+</script>

src/components/restaurants/restaurantMenuOption.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Menu Option</h1>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Menu Category</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" v-model="menuOption.categoryDescription">
+            <option>All</option>
+            <option v-for="(cat, i) in categories" :key="i">
+              {{
+              cat.description
+              }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Description</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" v-model="menuOption.description" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Option Type</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" v-model="menuOption.optionType">
+            <option v-for="item in optionTypes" :value="item.id" :key="item.id">{{item.description}}</option>
+          </select>
+        </div>
+      </div>
+      <div class="col-md-6" style="margin-bottom: 1em" v-if="menuOption.optionType === 3">
+        <label>Option Limit</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="number" v-model="menuOption.optionLimit" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Is Base Price?</label>
+        <div class="input-group-prepend">
+          <input
+            style="margin-left: 1px"
+            type="checkbox"
+            class="custom-control-input"
+            id="thCloseSwitch"
+            :checked="menuOption.isBasePrice"
+            @change="selectionChanged"
+          />
+          <label
+            class="custom-control-label"
+            for="thCloseSwitch"
+            style="margin-left: 40px"
+          >{{menuOption.isBasePrice ? 'Yes' : 'No'}}</label>
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Rank</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="number" v-model="menuOption.rank" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Options</label>
+        <ListView
+          :items="menuOption.options"
+          :showColumnChooser="false"
+          :editable="true"
+          :deleteable="true"
+          :displayColumns="columns"
+          @onEdit="Edit"
+          @onDelete="Delete"
+          @onNew="New"
+        />
+        <modal name="OptionItem" :width="600" :height="400">
+          <OptionItem @MenuItemUpdated="MenuItemUpdated" :editMenuOptionItem="selectedItem" />
+        </modal>
+      </div>
+    </div>
+    <div class="row"></div>
+    <div class="row">
+      <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>
+          </div>
+          <div class="col-md-2">
+            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="wait" id="preloader"></div>
+  </div>
+</template>
+
+<script>
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+import OptionItem from "./restaurantMenuOptionItem";
+import Log from "../../assets/Log";
+
+export default {
+  name: "MenuOption",
+  components: {
+    ListView,
+    OptionItem
+  },
+  data() {
+    return {
+      selectedOption: "Single",
+      selectedItem: {},
+      isEdit: false,
+      columns: ["description", "price", "rank"],
+      wait: false,
+      restaurantId: Log.restaurantId(),
+      menuItemId: 0
+    };
+  },
+  methods: {
+    ...mapActions("menuOptions", [
+      "getMenuOption",
+      "deleteMenuOptionItem",
+      "addMenuOption",
+      "updateMenuOption",
+      "getOptionTypes"
+    ]),
+    ...mapActions("menuCategories", ["getCategories"]),
+    selectionChanged() {
+      this.menuOption.isBasePrice = !this.menuOption.isBasePrice;
+    },
+    Close() {
+      this.$router.push("/MenuOptions");
+    },
+    Save() {
+      this.wait = true;
+      if (this.menuOption.categoryDescription !== "All") {
+        var category = this.categories.find(
+          c => c.description === this.menuOption.categoryDescription
+        );
+        this.menuOption.categoryId = category.id;
+      } else {
+        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");
+      // }
+    },
+    New() {
+      this.selectedItem = null;
+      this.$modal.show("OptionItem");
+    },
+    Edit(item) {
+      this.isEdit = true;
+      this.selectedItem = item;
+      this.$modal.show("OptionItem");
+    },
+    Delete(item) {
+      this.deleteMenuOptionItem(item);
+    },
+    MenuItemUpdated(item) {
+      item.menuOptionId = this.menuOption.id;
+      if (item.id === 0 && !this.isEdit) {
+        this.menuOption.options.push(item);
+      }
+
+      this.$modal.hide("OptionItem");
+      this.isEdit = false;
+    }
+  },
+  computed: {
+    ...mapState("menuOptions", ["menuOption", "optionTypes"]),
+    ...mapState("menuCategories", ["categories"])
+  },
+  mounted() {
+    this.wait = false;
+    this.getCategories(this.restaurantId);
+    this.getMenuOption(this.$route.params.optionid);
+    this.menuItemId = this.$route.params.menuItemId;
+    this.getOptionTypes();
+  }
+};
+</script>

src/components/restaurants/restaurantMenuOptionItem.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Option Item</h1>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Description</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="menuOptionItem.description"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Price</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="number"
+            name="description"
+            v-model="menuOptionItem.price"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <label>Rank</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="number"
+            name="description"
+            v-model="menuOptionItem.rank"
+          />
+        </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 ImageUploader from "vue-image-upload-resize";
+
+export default {
+  name: "MenuOptionItem",
+  props: {
+    editMenuOptionItem: { default: {} }
+  },
+  components: {
+    ImageUploader
+  },
+  data() {
+    return {
+      hasImage: false,
+      menuOptionItem: {
+        id: 0,
+        description: "",
+        price: 0,
+        rank: 0,
+        menuOptionId: 0
+      }
+    };
+  },
+  methods: {
+    Ok() {
+      this.$emit("MenuItemUpdated", this.menuOptionItem);
+    }
+  },
+  watch: {
+    editMenuOptionItem: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.menuOptionItem = val;
+        }
+      }
+    }
+  }
+};
+</script>

src/components/restaurants/restaurantMenuOptions.vue

@@ -0,0 +1,94 @@
+<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%">Menu Options</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :items="menuOptions"
+            :showColumnChooser="false"
+            :editable="true"
+            :deleteable="true"
+            :displayColumns="columns"
+            :displayHeaders="headers"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Category from "../restaurants/restaurantMenuCateory";
+import ListView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
+
+export default {
+  name: "RestaurantCategoryList",
+  components: {
+    ListView,
+    Category
+  },
+  data() {
+    return {
+      wait: true,
+      columns: [
+        "categoryDescription",
+        "description",
+        "optionTypeDescription",
+        "optionLimit",
+        "isBasePrice",
+        "rank"
+      ],
+      headers: [
+        "Category",
+        "Description",
+        "Option Type",
+        "Option Limit",
+        "Base Price",
+        "Rank"
+      ],
+      restautantId: Log.restaurantId()
+    };
+  },
+  methods: {
+    ...mapActions("menuOptions", ["getMenuOptions", "deleteMenuOption"]),
+    New() {
+      this.$router.push("/MenuOption/0");
+    },
+    Edit(item) {
+      this.$router.push("/MenuOption/" + item.id);
+    },
+    Delete(item) {
+      this.deleteMenuOption(item);
+    }
+  },
+  computed: {
+    ...mapState("menuOptions", ["menuOptions"]),
+    CurrentCategory() {
+      return this.category;
+    }
+  },
+  mounted() {
+    this.getMenuOptions(this.restautantId).then(() => {
+      this.wait = false;
+    });
+  }
+};
+</script>

src/components/shared/navBar.vue

@@ -99,8 +99,9 @@
                 >Menu Categories</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/timeshareAdmin')"
-                >Menu</a>
+                  @click="routerGoTo('/MenuOptions')"
+                >Menu Options</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/RestaurantMenu')">Menu</a>
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/timeshareAdmin')"

src/router/index.js

@@ -16,6 +16,12 @@ import CustomerDetails from "../components/customer/customerDetails.vue";
 import CustomerOrders from "../components/customer/customerOrders.vue";
 import CustomerList from "../components/customer/customerList.vue";
 import RestaurantMenuCategories from "../components/restaurants/restaurantMenuCategories.vue";
+import RestaurantMenu from "../components/restaurants/restaurantMenu.vue";
+import RestaurantMenuOptions from "../components/restaurants/restaurantMenuOptions.vue";
+import RestaurantMenuOption from "../components/restaurants/restaurantMenuOption.vue";
+import RestaurantMenuItem from "../components/restaurants/restaurantMenuItem.vue"
+import RestaurantMenuItemOptions from "../components/restaurants/restaurantMenuItemOptions.vue";
+import MenuItems from "../components/home/menuItems.vue";
 
 Vue.use(Router);
 
@@ -91,6 +97,36 @@ export default new Router({
       path: "/MenuCategory",
       name: "MenuCategory",
       component: RestaurantMenuCategories
+    },
+    {
+      path: "/RestaurantMenu",
+      name: "RestaurantMenu",
+      component: RestaurantMenu
+    },
+    {
+      path: "/MenuOptions",
+      name: "MenuOptions",
+      component: RestaurantMenuOptions
+    },
+    {
+      path: "/MenuOption/:optionid",
+      name: "MenuOption",
+      component: RestaurantMenuOption
+    },
+    {
+      path: "/ItemOption",
+      name: "ItemOption",
+      component: RestaurantMenuItemOptions
+    },
+    {
+      path: "/MenuItem/:itemid",
+      name: "MenuItem",
+      component: RestaurantMenuItem
+    },
+    {
+      path: "/Menu/:restautantid",
+      name: "MenuItems",
+      component: MenuItems
     }
   ]
 });

src/store/index.js

@@ -9,6 +9,9 @@ import Restaurant from './modules/restaurants/restaurant';
 import MOPs from './modules/shared/restaurantMOP'
 import User from './modules/users/user';
 import MenuCategories from './modules/restaurants/restaurantMenuCategories';
+import MenuOptions from './modules/restaurants/restaurantMenuOptions';
+import Menu from './modules/restaurants/restaurantMenu';
+import HomeMenu from './modules/restaurants/menu'
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -21,6 +24,9 @@ export default new Vuex.Store({
     restaurant: Restaurant,
     user: User,
     mop: MOPs,
-    menuCategories: MenuCategories
+    menuCategories: MenuCategories,
+    menuOptions: MenuOptions,
+    menu: Menu,
+    homeMenu: HomeMenu
   },
 });

src/store/modules/restaurants/menu.js

@@ -0,0 +1,34 @@
+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    menu: {},
+    options: {}
+  },
+  mutations: {
+    setMenus(state, items) {
+      state.menu = items;
+    },
+    setOptions(state, items) {
+      state.options = items;
+    }
+  },
+  getters: {},
+  actions: {
+    getMenu({
+      commit
+    }, id) {
+      axios
+        .get(`/api/menu/${id}`)
+        .then(result => commit("setMenus", result.data));
+    },
+    getOptions({
+      commit
+    }, item) {
+      axios
+        .get(`/api/menu/GetOptions/${item.menuId}/${item.categoryId}`)
+        .then(result => commit("setOptions", result.data));
+    }
+  }
+}

src/store/modules/restaurants/restaurantMenu.js

@@ -0,0 +1,66 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    menuItem: {},
+    menuItems: []
+  },
+  mutations: {
+    setMenuItems(state, items) {
+      state.menuItems = items;
+    },
+    setMenuItem(state, item) {
+      state.menuItem = item;
+    },
+    addMenuItem(state, item) {
+      state.menuItem = item;
+      state.menuItems.push(item);
+    },
+    updateMenuItem(state, item) {
+      state.menuItem = item;
+      //state.menuItems.find(m => m.id === item.id) = item;
+    },
+    removeMenuItem(state, item) {
+      state.menuItems.pop(item);
+    }
+  },
+  getters: {},
+  actions: {
+    getMenuItem({
+      commit
+    }, id) {
+      axios
+        .get(`/api/MenuItem/GetMenuItem/${id}`)
+        .then(result => commit("setMenuItem", result.data));
+    },
+    getMenuItems({
+      commit
+    }, id) {
+      axios
+        .get(`/api/MenuItem/${id}`)
+        .then(result => commit("setMenuItems", result.data));
+    },
+    insertMenuItem({
+      commit
+    }, menuItem) {
+      axios
+        .post('/api/MenuItem', menuItem)
+        .then(result => commit("addMenuItem", result.data));
+    },
+    updateMenuItem({
+      commit
+    }, menuItem) {
+      axios
+        .put('/api/MenuItem', menuItem)
+        .then(result => commit("updateMenuItem", menuItem));
+    },
+    deleteMenuItem({
+      commit
+    }, menuItem) {
+      axios
+        .delete(`/api/MenuItem/${menuItem.id}`)
+        .then(result => commit("removeMenuItem", menuItem));
+    }
+  }
+}

src/store/modules/restaurants/restaurantMenuOptions.js

@@ -0,0 +1,93 @@
+import axios from "axios";
+import {
+  result
+} from "lodash";
+
+export default {
+  namespaced: true,
+  state: {
+    menuOptions: [],
+    menuOption: {},
+    optionTypes: []
+  },
+  mutations: {
+    setMenuOption(state, menuOption) {
+      state.menuOption = menuOption;
+      if (state.menuOption.options) {
+        state.menuOptionItems = state.menuOption.options;
+      }
+    },
+    setMenuOptions(state, menuOptions) {
+      state.menuOptions = menuOptions;
+    },
+    setOptionTypes(state, types) {
+      state.optionTypes = types;
+    },
+    newMenuOption(state, item) {
+      state.menuOptions = item;
+      state.menuOption.options.push(item);
+    },
+    updateMenuOption(state, item) {
+      state.menuOptions = item;
+      var temp = state.menuOption.options.find(m => m.Id === item.id);
+      temp = item;
+    },
+    removeMenuOption(state, menuOption) {
+      state.menuOptions.pop(menuOption);
+    },
+    removeMenuOptionItem(state, item) {
+      state.menuOption.options.pop(item);
+    }
+  },
+  getters: {},
+  actions: {
+    getMenuOption({
+      commit
+    }, id) {
+      axios.get(`/api/MenuOptions/${id}`).then(result => commit("setMenuOption", result.data));
+    },
+    getMenuOptions({
+      commit
+    }, restaurantId) {
+      axios
+        .get(`/api/MenuOptions/GetRestaurantMenuOptions/${restaurantId}`)
+        .then(result => commit("setMenuOptions", result.data));
+    },
+    getOptionTypes({
+      commit
+    }) {
+      axios
+        .get('/api/MenuOptions/GetOptionTypes')
+        .then(result => commit("setOptionTypes", result.data));
+    },
+    addMenuOption({
+      commit
+    }, menuOption) {
+      axios
+        .post("/api/MenuOptions", menuOption)
+        .then(result => commit("newMenuOption", result.data))
+    },
+    updateMenuOption({
+      commit
+    }, menuOption) {
+      axios
+        .put("/api/MenuOptions", menuOption)
+        .then(result => commit("updateMenuOption", result.data))
+        .catch(console.error);
+    },
+    deleteMenuOption({
+      commit
+    }, menuOption) {
+      axios
+        .delete(`/api/MenuOptions/${menuOption.id}`)
+        .then(result => commit("removeMenuOption", menuOption));
+    },
+    deleteMenuOptionItem({
+      commit
+    }, item) {
+      axios
+        .delete(`/api/MenuOptions/DeleteMenuOptionItem/${item.id}`)
+        .then(result => commit("removeMenuOptionItem", item));
+    }
+  }
+};