Restaurant Menu Category screens

src/components/restaurants/restaurantMenuCategories.vue

@@ -0,0 +1,96 @@
+<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 Categories</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :items="categories"
+            :showColumnChooser="false"
+            :editable="true"
+            :deleteable="true"
+            :displayColumns="columns"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+        <modal name="Category" :width="600" :height="220">
+          <Category @CategoryUpdate="CategoryUpdate" :editCategory="CurrentCategory" />
+        </modal>
+      </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";
+
+export default {
+  name: "RestaurantCategoryList",
+  components: {
+    ListView,
+    Category
+  },
+  data() {
+    return {
+      wait: true,
+      category: {},
+      columns: ["id", "description"]
+    };
+  },
+  methods: {
+    ...mapActions("menuCategories", [
+      "getCategories",
+      "addCategory",
+      "updateCategory",
+      "deleteCategory"
+    ]),
+    New() {
+      this.category = null;
+      this.$modal.show("Category");
+    },
+    Edit(item) {
+      this.category = item;
+      this.$modal.show("Category");
+    },
+    Delete(item) {
+      this.deleteCategory(item.id);
+    },
+    CategoryUpdate(item) {
+      item.restaurantId = 5;
+      if (item.id == 0) {
+        this.addCategory(item);
+      } else {
+        this.updateCategory(item);
+      }
+      this.$modal.hide("Category");
+    }
+  },
+  computed: {
+    ...mapState("menuCategories", ["categories"]),
+    CurrentCategory() {
+      return this.category;
+    }
+  },
+  mounted() {
+    this.getCategories(5).then(() => {
+      this.wait = false;
+    });
+  }
+};
+</script>

src/components/restaurants/restaurantMenuCateory.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <h1>Category</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="category.description" />
+        </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: "Category",
+  props: {
+    editCategory: { default: {} }
+  },
+  data() {
+    return {
+      category: {
+        id: 0,
+        description: ""
+      }
+    };
+  },
+  methods: {
+    Ok() {
+      this.$emit("CategoryUpdate", this.category);
+    }
+  },
+  watch: {
+    editCategory: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.category = val;
+        }
+      }
+    }
+  }
+};
+</script>

src/components/shared/navBar.vue

@@ -93,6 +93,10 @@
                 aria-labelledby="navbarDropdown"
               >
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Restaurant')">Details</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/MenuCategory')"
+                >Menu Categories</a>
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/timeshareAdmin')"

src/router/index.js

@@ -15,6 +15,7 @@ import Restaurant from "../components/restaurants/restaurantDetails.vue";
 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";
 
 Vue.use(Router);
 
@@ -85,6 +86,11 @@ export default new Router({
       path: "/Restaurant",
       name: "Restaurant",
       component: Restaurant
+    },
+    {
+      path: "/MenuCategory",
+      name: "MenuCategory",
+      component: RestaurantMenuCategories
     }
   ]
 });

src/store/index.js

@@ -8,18 +8,19 @@ import RestaurantCategories from './modules/restaurants/restaurantCategories';
 import Restaurant from './modules/restaurants/restaurant';
 import MOPs from './modules/shared/restaurantMOP'
 import User from './modules/users/user';
+import MenuCategories from './modules/restaurants/restaurantMenuCategories';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
 export default new Vuex.Store({
   modules: {
-
     registration: Registration,
     authentiaction: Authentication,
     restaurantSearch: RestaurantSearch,
     restaurantCategories: RestaurantCategories,
     restaurant: Restaurant,
     user: User,
-    mop: MOPs
+    mop: MOPs,
+    menuCategories: MenuCategories
   },
 });

src/store/modules/restaurants/restaurantMenuCategories.js

@@ -0,0 +1,52 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    categories: [],
+    category: {}
+  },
+  mutations: {
+    setCategories(state, categories) {
+      state.categories = categories;
+    },
+    setCategory(state, category) {
+      state.category = category;
+      state.categories.push(category);
+    },
+    removeCategory(state, category) {
+      state.categories.pop(category);
+    }
+  },
+  getters: {},
+  actions: {
+    getCategories({
+      commit
+    }, restId) {
+      axios
+        .get(`/api/MenuCategory/GetRestaurantCategories/${restId}`)
+        .then(result => commit("setCategories", result.data));
+    },
+    addCategory({
+      commit
+    }, category) {
+      axios
+        .post('/api/MenuCategory', category)
+        .then(result => commit("setCategory", result.data));
+    },
+    updateCategory({
+      commit
+    }, category) {
+      axios
+        .put('/api/MenuCategory', category)
+        .then(result => commit("setCategory", result.data));
+    },
+    deleteCategory({
+      commit
+    }, id) {
+      axios
+        .delete(`/api/MenuCategory/${id}`)
+        .then(result => commit("removeCategory", result.data));
+    }
+  }
+}