Super Admin - Screens

src/components/customer/customerDetails.vue

+<template>
+  <div>
+    <div class="conainer">
+      <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 Details</h1>
+            </div>
+          </div>
+        </div>
+        <div class="row"></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="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input class="form-control" type="text" name="FirstName" v-model="user.firstName" />
+            </div>
+          </div>
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Surname</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input class="form-control" type="text" name="Surname" v-model="user.surname" />
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Eamil Addres</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="emailAddress"
+                v-model="user.emailAddress"
+              />
+            </div>
+          </div>
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Cellphone</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input class="form-control" type="text" name="cellphone" v-model="user.cellphone" />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <br />
+              <h2 class="title-d" style="text-align:left;">My Address</h2>
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-4" style="margin-bottom: 1em">
+            <div class="custom-control custom-switch">
+              <label>Do you live in a complex or block of flats?</label>
+              <input
+                style="margin-left: 1px"
+                type="checkbox"
+                class="custom-control-input"
+                id="thCloseSwitch"
+                :checked="userAddress.isComplex"
+                @change="selectionChanged"
+              />
+              <label
+                class="custom-control-label"
+                for="thCloseSwitch"
+                style="margin-left: 40px"
+              >{{userAddress.isComplex ? 'Yes' : 'No'}}</label>
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-4" style="margin-bottom: 1em">
+            <button
+              @click="ShowMap()"
+              class="btn btn-b-n"
+              type="button"
+              data-dismiss="modal"
+            >Update Address</button>
+          </div>
+        </div>
+        <div v-if="userAddress.isComplex" class="row" style="text-align:left">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Complex Name</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="FirstName"
+                v-model="userAddress.complexName"
+              />
+            </div>
+          </div>
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Unit Number</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="Surname"
+                v-model="userAddress.unitNumber"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-6" style="margin-bottomL 1em">
+            <div class="row" style="text-align:left">
+              <div class="col-md-12" style="margin-bottom: 1em">
+                <label>Street Number</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="FirstName"
+                    v-model="userAddress.streetNumber"
+                    disabled
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="row" style="text-align:left">
+              <div class="col-md-12" style="margin-bottom: 1em">
+                <label>Street Name</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="FirstName"
+                    v-model="userAddress.streetName"
+                    disabled
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="row" style="text-align:left">
+              <div class="col-md-12" style="margin-bottom: 1em">
+                <label>Suburb</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="FirstName"
+                    v-model="userAddress.suburb"
+                    disabled
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="row" style="text-align:left">
+              <div class="col-md-12" style="margin-bottom: 1em">
+                <label>City</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="FirstName"
+                    v-model="userAddress.city"
+                    disabled
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="row" style="text-align:left">
+              <div class="col-md-12" style="margin-bottom: 1em">
+                <label>Province</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="FirstName"
+                    v-model="userAddress.province"
+                    disabled
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="row" style="text-align:left">
+              <div class="col-md-12" style="margin-bottom: 1em">
+                <label>Postal Code</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="FirstName"
+                    v-model="userAddress.postalCode"
+                    disabled
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6" style="margin-bottomL 1em">
+            <Map :showAutoComplete="false" :showLocationLabel="false" :setLocation="mapCoords" />
+          </div>
+        </div>
+        <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>
+    <modal name="map" :width="600" :height="620">
+      <div class="container">
+        <h2>Update Location</h2>
+        <br />
+        <Map :showLocationLabel="false" @GoogleAddress="UpdateAddress" />
+        <div class="row" style="text-align:left">
+          <div class="col-md-4" style="margin-bottom: 1em">
+            <button @click="HideMap()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </modal>
+  </div>
+</template>
+
+<script>
+import Map from "../shared/mapSetLocation";
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "CustomerDetails",
+  components: {
+    Map
+  },
+  data() {
+    return {
+      complex: false
+    };
+  },
+  methods: {
+    ...mapActions("user", ["getUser", "updateUser", "getUserAddress"]),
+    selectionChanged() {
+      this.userAddress.isComplex = !this.userAddress.isComplex;
+    },
+    ShowMap() {
+      this.$modal.show("map");
+    },
+    HideMap() {
+      this.$modal.hide("map");
+    },
+    UpdateAddress(address) {
+      console.log(JSON.stringify(address));
+      this.userAddress.streetNumber = address.streetNumber;
+      this.userAddress.streetName = address.streetName;
+      this.userAddress.suburb = address.suburb;
+      this.userAddress.city = address.city;
+      this.userAddress.province = address.province;
+      this.userAddress.country = address.country;
+      this.userAddress.postalCode = address.postalCode;
+      this.userAddress.googleMapUrl = address.url;
+      this.userAddress.latitude = address.coordinates.lat;
+      this.userAddress.longitude = address.coordinates.lng;
+    },
+    Save() {
+      this.user.addresses = [];
+      this.user.addresses.push(this.userAddress);
+      this.updateUser(this.user);
+    }
+  },
+  computed: {
+    ...mapState("user", ["user", "userAddress"]),
+    mapCoords() {
+      var coords = {
+        lat: this.userAddress.latitude,
+        lng: this.userAddress.longitude
+      };
+      return coords;
+    }
+  },
+  mounted() {
+    this.getUser(2); //Will need to replace with auth object's ID
+    this.getUserAddress(2);
+  }
+};
+</script>

src/components/customer/customerList.vue

+<template>
+  <div>
+    <div class="conainer">
+      <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%">Customers</h1>
+            </div>
+          </div>
+        </div>
+        <div class="row"></div>
+        <div class="row">
+          <div class="col-md-12">
+            <listView :items="users" :displayColumns="columns" :showNew="false" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Customers",
+  components: {
+    listView
+  },
+  data() {
+    return {
+      columns: ["emailAddress", "firstName", "surname", "cellphone"]
+    };
+  },
+  methods: {
+    ...mapActions("user", ["getUsers"])
+  },
+  computed: {
+    ...mapState("user", ["users"])
+  },
+  mounted() {
+    this.getUsers();
+  }
+};
+</script>

src/components/customer/customerOrders.vue

+<template>
+  <div>
+    <div class="conainer">
+      <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 Orders</h1>
+            </div>
+          </div>
+        </div>
+        <div class="row"></div>
+        <div class="row">
+          <div class="col-md-12">
+            <listView />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listView from "../shared/listView";
+
+export default {
+  name: "CustomerOrders",
+  components: {
+    listView
+  }
+};
+</script>

src/components/home/restaurantCategory.vue

     <div class="form-group row"></div>
     <div class="form-group row">
       <div class="col-md-4" v-for="cat in restaurantsCategories" :key="cat.id">
-        <router-link :to="`/property/property/${cat.id}`">
+        <router-link :to="'/Search'">
           <div class="card-box-a card-shadow">
             <div class="img-box-a">
               <img
               <div class="card-overlay-a-content">
                 <div class="card-header-a">
                   <h4 class="card-title-a">
-                    <router-link :to="`/property/property/${cat.id}`" class="link-a">
+                    <router-link :to="'/Search'" class="link-a">
                       {{
                       cat.description
                       }}

src/components/home/restaurantSearch.vue

+<template>
+  <div class="container">
+    <h1>Resturants</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Search",
+  data() {
+    return {
+      search: ""
+    };
+  }
+};
+</script>

src/components/home/restaurantsSection.vue

     <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="`/property/property/${restaurant.id}`">
+        <router-link :to="'/Search'">
           <div class="card-box-a card-shadow">
             <div class="img-box-a">
               <img
               <div class="card-overlay-a-content">
                 <div class="card-header-a">
                   <h2 class="card-title-a">
-                    <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                    <router-link :to="'/Search'" class="link-a">
                       {{
                       restaurant.name
                       }}
                     </router-link>
                   </h2>
                   <h3 class="card-title-b">
-                    <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                    <router-link :to="'/Search'" class="link-a">
                       {{
                       restaurant.suburb
                       }}
                     </router-link>
                   </h3>
                   <h4 class="card-title-c">
-                    <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                    <router-link :to="'/Search'" class="link-a">
                       {{
                       restaurant.subText
                       }}
                 </div>
                 <div class="card-body-a">
                   <div class="price-box d-flex"></div>
-                  <router-link :to="`/property/property/${restaurant.id}`" class="link-a">
+                  <router-link :to="'/Search'" class="link-a">
                     <span class="ion-ios-arrow-forward"></span>
                   </router-link>
                 </div>

src/components/restaurants/restaurantList.vue

+<template>
+  <div>
+    <div class="conainer">
+      <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%">Restaurants</h1>
+            </div>
+          </div>
+        </div>
+        <div class="row"></div>
+        <div class="row">
+          <div class="col-md-12">
+            <listView :items="restaurants" :displayColumns="columns" :showNew="false" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import listView from "../shared/listView";
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "Restaurants",
+  components: {
+    listView
+  },
+  data() {
+    return {
+      columns: ["name", "shoppingCentre", "suburb", "city"]
+    };
+  },
+  methods: {
+    ...mapActions("restaurant", ["getRestaurants"])
+  },
+  computed: {
+    ...mapState("restaurant", ["restaurants"])
+  },
+  mounted() {
+    this.getRestaurants();
+  }
+};
+</script>

src/components/shared/mapSetLocation.vue

 <template>
   <div>
-    <label>Location</label>
-    <div class="input-group-prepend">
+    <label v-if="showLocationLabel">Location</label>
+    <div v-if="showAutoComplete" class="input-group-prepend">
       <span class="input-group-text">
         <eva-icon name="map" fill="#60CBEB"></eva-icon>
       </span>
       <button class="btn btn-primary btn-l" @click="addMarker">Add</button>
       <br />
     </div>
-    <br />
+    <br v-if="showAutoComplete" />
     <gmap-map v-if="showMap" :center="coordinates" :zoom="18" style="width:100%;  height: 400px;">
       <gmap-marker
         :key="index"
   props: {
     showMap: {
       default: true
+    },
+    showLocationLabel: {
+      default: true
+    },
+    showAutoComplete: {
+      default: true
+    },
+    setLocation: {
+      default: {}
     }
   },
   data() {
         };
       });
     }
+  },
+  watch: {
+    setLocation: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.coordinates = val;
+          this.markers = [];
+          this.markers.push({ position: val });
+        }
+      }
+    }
   }
 };
 </script>

src/components/shared/navBar.vue

       <div class="col-md-1 offset-2">
         <div class="input-group-prepend">
           <input type="text" placeholder="search" />
-          <span class="input-group-text">
+          <span class="input-group-text" @click="Search">
             <i class="fa fa-search" style="color:#60CBEB"></i>
           </span>
         </div>
                 aria-haspopup="true"
                 aria-expanded="false"
                 v-if="isLoggedIn"
-              >
-                <!--{{ NAME }}-->
-                User
-              </a>
+              >{{ SystemRole }}</a>
               <div
                 v-if="SystemRole === 'Customer'"
                 class="dropdown-menu"
                 aria-labelledby="navbarDropdown"
               >
-                <a
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/list')"
-                >My Details</a>
-                <a
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/timeshareAdmin')"
-                >My Orders</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/MyDetails')">My Details</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/MyOrders')">My Orders</a>
               </div>
               <div
                 v-if="SystemRole === 'RestaurantAdmin' || SystemRole === 'RestaurantUser'"
               >
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/list')"
+                  @click="routerGoTo('/RestuarantList')"
                 >Restaurants</a>
                 <a
                   class="dropdown-item cursor-pointer"
                 >Restaurant Categories</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/timeshareAdmin')"
+                  @click="routerGoTo('/CustomerList')"
                 >Customers</a>
               </div>
             </li>
 
     routerGoTo(goTo) {
       this.$emit("routerGoTo", goTo);
+    },
+    Search() {
+      this.$router.push("/search");
     }
   }
 };

src/router/index.js

 import Login from "../components/accounts/login.vue";
 import RegisterRestaurant from "../components/accounts/restaurantRegistration.vue";
 import RegistrationPage from "../components/accounts/registrationPage.vue";
-import RestaurantCategory from "../components/restaurants/restaurantCategories.vue"
+import RestaurantCategory from "../components/restaurants/restaurantCategories.vue";
+import RestaurantSearch from "../components/home/restaurantSearch.vue";
+import RestuarantList from "../components/restaurants/restaurantList.vue";
+import CustomerDetails from "../components/customer/customerDetails.vue";
+import CustomerOrders from "../components/customer/customerOrders.vue";
+import CustomerList from "../components/customer/customerList.vue";
 
 Vue.use(Router);
 
       path: "/RestaurantCategory",
       name: "RestaurantCategory",
       component: RestaurantCategory
+    },
+    {
+      path: "/search",
+      name: "RestaurantSearch",
+      component: RestaurantSearch
+    },
+    {
+      path: "/MyDetails",
+      name: "MyDetails",
+      component: CustomerDetails
+    },
+    {
+      path: "/MyOrders",
+      name: "MyOrders",
+      component: CustomerOrders
+    },
+    {
+      path: "/RestuarantList",
+      name: "RestuarantList",
+      component: RestuarantList
+    },
+    {
+      path: "/CustomerList",
+      name: "CustomerList",
+      component: CustomerList
     }
   ]
 });

src/store/index.js

 import Authentication from './modules/accounts/authentication';
 import RestaurantSearch from './modules/restaurants/restaurantSearch';
 import RestaurantCategories from './modules/restaurants/restaurantCategories';
+import Restaurant from './modules/restaurants/restaurant';
+import User from './modules/users/user';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     registration: Registration,
     authentiaction: Authentication,
     restaurantSearch: RestaurantSearch,
-    restaurantCategories: RestaurantCategories
+    restaurantCategories: RestaurantCategories,
+    restaurant: Restaurant,
+    user: User
   },
 });

src/store/modules/restaurants/restaurant.js

+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    restaurants: [],
+    restaurant: {}
+  },
+  mutations: {
+    setRestaurants(state, restaurants) {
+      state.restaurants = restaurants
+    }
+  },
+  getters: {},
+  actions: {
+    getRestaurants({
+      commit
+    }) {
+      axios
+        .get('/api/restaurant/getrestaurants')
+        .then(result => commit("setRestaurants", result.data))
+    }
+  }
+}

src/store/modules/users/user.js

+import axios from 'axios'
+
+export default {
+  namespaced: true,
+  state: {
+    user: {},
+    userAddress: {},
+    users: []
+  },
+  mutations: {
+    setUser(state, user) {
+      state.user = user;
+    },
+    setAddress(state, address) {
+      state.userAddress = address;
+    },
+    setUsers(state, users) {
+      state.users = users;
+    }
+  },
+  getters: {},
+  actions: {
+    getUser({
+      commit
+    }, id) {
+      axios
+        .get(`/api/user/${id}`)
+        .then(result => commit("setUser", result.data));
+    },
+    updateUser({
+      commit
+    }, user) {
+      axios
+        .put('/api/user', user)
+        .then(result => commit("setUser", result.data));
+    },
+    getUserAddress({
+      commit
+    }, userId) {
+      axios
+        .get(`/api/user/getuseraddress/${userId}`)
+        .then(result => commit("setAddress", result.data));
+    },
+    getUsers({
+      commit
+    }) {
+      axios
+        .get('/api/user/GetCustomers')
+        .then(result => commit("setUsers", result.data));
+    }
+  }
+}