RestaurantRoles Set up

src/components/accounts/login.vue

 
 <script>
 import { mapState, mapActions } from "vuex";
+import alert from "../shared/alert";
 
 export default {
   name: "Login",
+  components: {
+    alert
+  },
   data() {
     return {
       isPasswordShown: "password",
     };
   },
   methods: {
-    ...mapActions("authentiaction", ["getAuthentication", "Login"]),
+    ...mapActions("authentiaction", [
+      "getAuthentication",
+      "checkAuthentication"
+    ]),
     Login() {
-      this.Login(this.auth).then(() => {
-        if (this.$store.state.auth.resault === "Access Granted") {
-          console.log(JSON.stringify(this.auth));
-          this.$router.push("/");
+      this.checkAuthentication(this.auth).then(() => {
+        //console.log(JSON.stringify(this.$store.state.authentiaction.result));
+        // if (this.$store.state.auth.result === "Access Granted") {
+        //   console.log(JSON.stringify(this.$store.state.auth));
+        //   this.$router.push("/");
+        // } else {
+        //   console.log(JSON.stringify(this.auth));
+        //   this.hasError = true;
+        //   this.errorMessage = this.$store.state.auth.result;
+        // }
+        if (this.auth.result === "Access Granted") {
+          alert("Yes");
         } else {
-          console.log(JSON.stringify(this.auth));
-          this.hasError = true;
-          this.errorMessage = this.$store.state.auth.resault;
+          alert("No");
         }
       });
     },
     }
   },
   computed: {
-    ...mapState("authentiaction", ["auth"])
+    ...mapState("authentiaction", ["auth", "result"])
   },
   mounted() {
     this.getAuthentication();
+  },
+  watch: {
+    auth(value) {
+      return value;
+    }
   }
 };
 </script>

src/components/restaurants/restaurantRole.vue

           <span class="input-group-text">
             <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
           </span>
-          <input class="form-control" type="text" name="description" />
+          <input class="form-control" type="text" name="description" v-model="role.roleName" />
         </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 class="row">
+      <div class="col-md-12">
+        <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
+          <li class="nav-item">
+            <a
+              class="nav-link active"
+              id="pills-video-tab"
+              data-toggle="pill"
+              href="#pills-video"
+              role="tab"
+              aria-controls="pills-video"
+              aria-selected="true"
+            >Permissions</a>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              id="pills-plans-tab"
+              data-toggle="pill"
+              href="#pills-plans"
+              role="tab"
+              aria-controls="pills-plans"
+              aria-selected="false"
+            >Users</a>
+          </li>
+        </ul>
+        <div class="tab-content" id="pills-tabContent">
+          <div
+            class="tab-pane fade show active"
+            id="pills-video"
+            role="tabpanel"
+            aria-labelledby="pills-video-tab"
+          >
+            <div class="col-md-12">
+              <ListView
+                :items="role.permissions"
+                :showColumnChooser="false"
+                :editable="true"
+                :hideSearch="true"
+                :deleteable="true"
+                :displayColumns="colums"
+                @onEdit="Edit"
+                @onDelete="Delete"
+                @onNew="New"
+              />
+              <modal name="Prems" :width="600" :height="270">
+                <Premission @UpdatePrems="UpdatePrems" :role="CurrentPrem" />
+              </modal>
+            </div>
+          </div>
+          <div
+            class="tab-pane fade"
+            id="pills-plans"
+            role="tabpanel"
+            aria-labelledby="pills-plans-tab"
+          >
+            <ListView
+              :items="role.users"
+              :displayColumns="uCols"
+              :showColumnChooser="false"
+              :deleteable="true"
+              @onDelete="RemoveUser"
+              @onNew="FindUser"
+            />
+            <modal name="users" :width="600" :height="400">
+              <UserLookup @SelectedUser="SelectedUser" />
+            </modal>
+          </div>
         </div>
       </div>
+    </div>
+    <div class="container">
       <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 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>
 </template>
 
 <script>
+import { mapState, mapActions } from "vuex";
 import ListView from "../shared/listView";
+import Premission from "./rolePremission";
+import UserLookup from "./userLookup";
+import Log from "../../assets/Log";
+
 export default {
   name: "Role",
   components: {
-    ListView
+    ListView,
+    Premission,
+    UserLookup,
   },
   data() {
     return {
-      wait: false
+      wait: false,
+      restaurantId: Log.restaurantId(),
+      colums: ["target", "navigate", "create", "read", "write"],
+      uCols: ["emailAddress", "firstName", "surname", "cellphone"],
+      prem: {},
     };
-  }
+  },
+  methods: {
+    ...mapActions("restaurantRoles", [
+      "getRole",
+      "getPremission",
+      "saveRole",
+      "updateRole",
+    ]),
+    FindUser() {
+      this.$modal.show("users");
+    },
+    SelectedUser(item) {
+      const user = this.role.users.find((u) => u.id === item[0].id);
+      if (user) {
+        Object.assign(user, item[0]);
+      } else {
+        this.role.users.push(item[0]);
+      }
+      this.$modal.hide("users");
+    },
+    RemoveUser(item) {
+      // const user = this.role.users.find((u) => u.id === item.id);
+      // if (user) {
+      //   this.role.users.pop(user);
+      // }
+      var index = 0;
+      for (let i = 0; i < this.role.users.length; i++) {
+        if (this.role.users[i].id == item.id) {
+          index = i;
+        }
+      }
+      this.role.users.splice(index, 1);
+    },
+    New() {
+      this.prem = {
+        target: "",
+        navigate: false,
+        create: false,
+        read: false,
+        write: false,
+        delete: false,
+      };
+      this.$modal.show("Prems");
+    },
+    Edit(item) {
+      this.prem = item;
+      this.$modal.show("Prems");
+    },
+    Delete(item) {
+      //Delete item
+    },
+    UpdatePrems(value) {
+      const premItem = this.role.permissions.find(
+        (p) => p.target === value.target
+      );
+      if (premItem) {
+        Object.assign(premItem, value);
+      } else {
+        this.role.permissions.push(value);
+      }
+      this.$modal.hide("Prems");
+    },
+    Save() {
+      this.role.restaurantId = this.restaurantId;
+      if (this.role.id === 0) {
+        this.saveRole(this.role);
+      } else {
+        this.updateRole(this.role);
+      }
+      this.$router.push("/RestaurantRoles");
+    },
+    Close() {
+      this.$router.push("/RestaurantRoles");
+    },
+  },
+  computed: {
+    ...mapState("restaurantRoles", ["role"]),
+    CurrentPrem() {
+      return this.prem;
+    },
+  },
+  mounted() {
+    this.getRole(this.$route.params.id);
+  },
 };
 </script>

src/components/restaurants/restaurantRoles.vue

       <div class="form-group row">
         <div class="col-md-12">
           <ListView
+            :items="roles"
             :showColumnChooser="false"
             :editable="true"
             :hideSearch="true"
             :deleteable="true"
+            :displayColumns="columns"
             @onEdit="Edit"
             @onDelete="Delete"
             @onNew="New"
   data() {
     return {
       wait: false,
-      restaurantId: Log.restaurantId()
+      restaurantId: Log.restaurantId(),
+      columns: ["roleName"]
     };
   },
   methods: {
-    // ...mapActions("restaurantUser", [
-    //   "getUsers",
-    //   "getUser",
-    //   "insertUser",
-    //   "updateUser",
-    //   "deleteUser"
-    // ]),
+    ...mapActions("restaurantRoles", ["getRoles", "removeRole"]),
     New() {
-      //   this.getUser(0);
       this.$router.push("/RestaurantRole/0");
     },
     Edit(item) {
-      //   this.getUser(item.id);
-      //   this.$modal.show("role");
+      this.$router.push(`/RestaurantRole/${item.id}`);
     },
     Delete(item) {
-      //   this.deleteUser(item);
+      this.removeRole(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;
-    // }
+    ...mapState("restaurantRoles", ["roles"])
   },
   mounted() {
-    // this.getUsers(this.restaurantId).then(() => {
-    //   this.wait = false;
-    // });
+    this.getRoles(this.restaurantId).then(() => {
+      this.wait = false;
+    });
   }
 };
 </script>

src/components/restaurants/rolePremission.vue

           <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>
+          <select class="form-control" v-model="role.target">
+            <option value="Select"></option>
+            <option value="Details">Details</option>
             <option value="MenuCategories">Menu Categories</option>
             <option value="MenuOptions">Menu Options</option>
             <option value="Menu">Menu</option>
         </div>
       </div>
     </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-2" style="margin-bottom: 1em">
+        <label>Navigation</label>
+        <div class="input-group-prepend">
+          <input style="margin-left: 1px" type="checkbox" v-model="role.navigate" />
+        </div>
+      </div>
+      <div class="col-md-2" style="margin-bottom: 1em">
+        <label>Create</label>
+        <div class="input-group-prepend">
+          <input style="margin-left: 1px" type="checkbox" v-model="role.create" />
+        </div>
+      </div>
+      <div class="col-md-2" style="margin-bottom: 1em">
+        <label>Read</label>
+        <div class="input-group-prepend">
+          <input style="margin-left: 1px" type="checkbox" v-model="role.read" />
+        </div>
+      </div>
+      <div class="col-md-2" style="margin-bottom: 1em">
+        <label>Write</label>
+        <div class="input-group-prepend">
+          <input style="margin-left: 1px" type="checkbox" v-model="role.write" />
+        </div>
+      </div>
+      <div class="col-md-2" style="margin-bottom: 1em">
+        <label>Delete</label>
+        <div class="input-group-prepend">
+          <input style="margin-left: 1px" type="checkbox" v-model="role.delete" />
+        </div>
+      </div>
+    </div>
 
     <div class="row"></div>
     <div class="row">
 import ListView from "../shared/listView";
 export default {
   name: "Role",
+  props: {
+    role: { default: {} }
+  },
   components: {
     ListView
   },
     return {
       wait: false
     };
+  },
+  methods: {
+    Ok() {
+      this.$emit("UpdatePrems", this.role);
+    }
+  },
+  watch: {
+    role: {
+      immediate: true,
+      handler(val, olVal) {
+        if (val) {
+          this.role = val;
+        }
+      }
+    }
   }
 };
 </script>

src/components/restaurants/userLookup.vue

+<template>
+  <div>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12" style="margin-bottom: 1em">
+          <h1>Users</h1>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-md-12">
+          <ListView
+            :items="restaurantUsers"
+            :showColumnChooser="false"
+            :editable="false"
+            :deleteable="false"
+            :showNew="false"
+            :displayColumns="columns"
+            @onRowClick="SelectUser"
+          />
+        </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: "RestaurantUserLookup",
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      wait: true,
+      columns: ["emailAddress", "firstName", "surname", "cellphone"],
+      restaurantId: Log.restaurantId(),
+    };
+  },
+  methods: {
+    ...mapActions("restaurantUser", ["getUsers"]),
+    SelectUser(item) {
+      this.$emit("SelectedUser", item);
+    },
+  },
+  computed: {
+    ...mapState("restaurantUser", ["restaurantUsers"]),
+  },
+  mounted() {
+    this.getUsers(this.restaurantId).then(() => {
+      this.wait = false;
+    });
+  },
+};
+</script>

src/components/shared/footerSection.vue

       <div class="container">
         <div class="row">
           <div class="col-md-12">
+            <div class="credits">
+              <img src="img/paymentLogos.png" height="45px" />
+            </div>
+            <br />
             <div>
               <p class="copyright color-text-a">
                 &copy; Copyright
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/components/shared/listView.vue

       default: true
     },
     displayColumns: {
-      default: []
+      type: Array,
+      default: () => []
     },
     displayFormats: {
       type: Array,

src/store/index.js

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

src/store/modules/accounts/authentication.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 import axios from 'axios';
+import {
+  sha256
+} from 'js-sha256'
 
 Vue.use(Vuex);
 
     auth: {}
   },
   mutations: {
-    setAuthentication(state, auth) {
-      state.auth = auth;
+    setAuthentication(state, newAuth) {
+      state.auth = newAuth;
     }
   },
   getters: {},
       commit
     }) {
       axios
-        .get('api/Authentication')
+        .get('/api/Authentication')
         .then(result => commit('setAuthentication', result.data));
     },
-    Login({
+    checkAuthentication({
       commit
-    }, auth) {
-      //   axios
-      //     .post('api/Authentication', auth)
-      //     .then(result => commit('setAuthentication', result.data));
-      axios({
-        url: 'api/Authentication',
-        data: {
-          emailAddress: auth.emailAddress,
-          password: auth.password,
-        },
-        method: 'POST',
-      }).then((resp) => {
-        commit('setAuthentication', resp.data);
-      });
+    }, authObject) {
+      var sendObj = authObject;
+      sendObj.password = sha256(authObject.password + '≡∆≤≥√∞ProVision');
+
+      axios
+        .post('/api/Authentication/Authenticate', sendObj)
+        .then(result => commit('setAuthentication', result.data));
+      // axios({
+      //   url: '/api/Authentication/Authenticate',
+      //   data: {
+      //     emailAddress: authObject.emailAddress,
+      //     password: sha256(authObject.password + '≡∆≤≥√∞ProVision'),
+      //   },
+      //   method: 'POST',
+      // }).then((resp) => {
+      //   commit('setAuthentication', resp.data);
+      // });
     }
   }
 }

src/store/modules/restaurants/restaurantRoles.js

+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    role: {},
+    roles: [],
+    prem: {}
+  },
+  mutations: {
+    setRoles(state, roles) {
+      state.roles = roles;
+    },
+    setRole(state, role) {
+      state.role = role;
+    },
+    setPrem(state, prem) {
+      state.prem = prem
+    },
+    removeRole(state, role) {
+      state.roles.pop(role);
+    },
+    addRole(state, role) {
+      state.role = role;
+      state.roles.push(role);
+    },
+    updateRole(state, role) {
+      state.role = role;
+      const item = state.roles.find(r => r.id === role.id);
+      Object.assign(item, role);
+      //https://stackoverflow.com/questions/51149729/updating-state-of-vuex-array-when-one-item-has-some-changes/51153076
+    }
+  },
+  getters: {},
+  actions: {
+    getRoles({
+      commit
+    }, restaurantId) {
+      axios
+        .get(`/api/RestaurantRoles/GetRoles/${restaurantId}`)
+        .then(result => commit("setRoles", result.data));
+    },
+    getRole({
+      commit
+    }, id) {
+      axios
+        .get(`/api/RestaurantRoles/${id}`)
+        .then(result => commit("setRole", result.data));
+    },
+    getPremission({
+      commit
+    }, id) {
+      axios
+        .get(`/api/RestaurantRoles/GetPremission/${id}`)
+        .then(result => commit("setPrem", result.data));
+    },
+    saveRole({
+      commit
+    }, role) {
+      axios
+        .post('/api/RestaurantRoles', role)
+        .then(result => commit("addRole", result.data));
+    },
+    updateRole({
+      commit
+    }, role) {
+      axios
+        .put('/api/RestaurantRoles', role)
+        .then(result => commit("updateRole", result.data));
+    },
+    removeRole({
+      commit
+    }, role) {
+      axios
+        .delete(`/api/RestaurantRoles/${role.id}`)
+        .then(result => commit("removeRole", role));
+    }
+  }
+}