Check in of navbar change and listview control

babel.config.js

-module.exports = {
-  presets: [
-    '@vue/app',
-  ],
-};

public/index.html

   <title>Uni-Vate Properties</title>
 
   <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
-  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
   <link href="lib/animate/animate.min.css" rel="stylesheet">
   <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
   <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
+  <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
   <link rel="stylesheet" href="css/dragndrop.table.columns.css" />
 </head>

src/App.vue

     <div class="click-closed"></div>
     <SearchTab />
     <NavBar @routerGoTo="routerGoTo" />
+    <div class="pushDown"></div>
     <router-view />
     <FooterSection />
   </div>
 
 <script>
 // import HomePage from './components/home/homePage.vue';
-import SearchTab from './components/shared/searchTab.vue';
-import NavBar from './components/shared/navBar.vue';
-import FooterSection from './components/shared/footerSection.vue';
+import SearchTab from "./components/shared/searchTab.vue";
+import NavBar from "./components/shared/navBar.vue";
+import FooterSection from "./components/shared/footerSection.vue";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
     SearchTab,
     NavBar,
-    FooterSection,
+    FooterSection
   },
   // created() {
   //   this.$http.interceptors.response.use(undefined, (err) => {
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
-    },
-  },
+    }
+  }
 };
 </script>
 
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
-
+.pushDown {
+  height: 70px;
+}
 .cursor-pointer {
   cursor: pointer;
 }

src/components/shared/basePagination.vue

         <li class="page-item" v-for="item in paginationItems" :key="item">
           <BasePaginationItem
             :pageNumber="item"
-            :disable="item === currentPage"
+            :isCurrentPage="item === currentPage"
             @loadPage="onLoadPage"
           />
         </li>

src/components/shared/basePaginationItem.vue

 <template>
-  <div>
-    <div v-if="disable">
+  <div :class="isCurrentPage ? 'page-item active' : 'page-item'">
+    <div v-if="isCurrentPage">
       <span class="page-link disabled">{{pageNumber}}</span>
     </div>
     <div v-else @click="onClick">
       type: Number,
       required: true,
     },
-    disable: undefined,
+    isCurrentPage: undefined,
   },
   methods: {
     onClick() {
 };
 </script>
 <style scoped>
-.disabled {
+.isCurrentPage {
   cursor: arrow;
-  background-color: lightgray;
 }
 </style>

src/components/shared/checkItem.vue

+<template>
+  <div class="row p-2" @click="checkItem">
+    <div class="custom-control custom-checkbox">
+      <input type="checkbox" class="custom-control-input" :checked="checked" />
+      <label class="custom-control-label">{{title}}</label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title'],
+  data() {
+    return {
+      checked: true,
+    };
+  },
+  methods: {
+    checkItem() {
+      this.checked = !this.checked;
+      this.$emit('checkItem', this.title, this.checked);
+    },
+  },
+};
+</script>

src/components/shared/lightBoxGallery.vue

     return {
       bg: false,
       currentImage: 0,
-      count: true,
+      count: true
     };
   },
   props: {
     thumbnails: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     largeImages: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     captions: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     thumbnailsPath: {
       type: String,
-      default: '',
+      default: ""
     },
     largePath: {
       type: String,
-      default: '',
+      default: ""
     },
     caption: true
   },
       } else {
         this.currentImage = this.largeImages.length - 1;
       }
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/shared/listView.vue

 <template>
   <div>
     <div class="container">
-      <div class="row">
-        <div class="col-md-12">
-          <input
-            v-model="searchItem"
-            class="form-control"
-            placeholder="Filter users by name or age"
-          />
-          <table id="table" class="table table-bordered table-hover">
-            <thead>
-              <tr class="dnd-moved">
-                <th v-for="(column, c) in Columns" :key="c">
-                  <div @click="sortBy(column)">{{ column }}</div>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(item, i) in DisplayItems" :key="i" class="text-left dnd-moved">
-                <td v-for="(column, c) in Columns" :key="c">{{ item[column] }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="d-flex justify-content-between">
-            <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
-            <div class="p-1">
-              <BasePagination
-                :currentPage="currentPage"
-                :pageCount="PageCount"
-                @nextPage="pageChangeHandle('next')"
-                @previousPage="pageChangeHandle('previous')"
-                @loadPage="pageChangeHandle"
-              />
-            </div>
-            <div class="p-2">
-              <div class="d-flex flex-row">
-                <div>
-                  <select
-                    class="form-control"
-                    id="agent"
-                    name="agent"
-                    v-model="visibleItemsPerPageCount"
-                    @change="onChangeItemsPerPage()"
-                  >
-                    <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
-                  </select>
-                </div>
-              </div>
-            </div>
+      <div class="d-flex justify-content-between">
+        <div class="p-2">
+          <input v-model="searchItem" class="form-control" placeholder="Search ..." />
+        </div>
+      </div>
+    </div>
+    <table id="table" class="table table-bordered table-hover">
+      <thead>
+        <tr class="dnd-moved">
+          <th v-for="(column, c) in Columns" :key="c">
+            <div @click="sortBy(column)">{{ column }}</div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, i) in DisplayItems" :key="i" class="text-left dnd-moved">
+          <td v-for="(column, c) in Columns" :key="c">{{ item[column] }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="d-flex justify-content-between">
+      <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
+      <div class="p-1">
+        <BasePagination
+          :currentPage="currentPage"
+          :pageCount="PageCount"
+          @nextPage="pageChangeHandle('next')"
+          @previousPage="pageChangeHandle('previous')"
+          @loadPage="pageChangeHandle"
+        />
+      </div>
+      <div class="p-2">
+        <div class="d-flex flex-row">
+          <div>
+            <select
+              class="form-control"
+              v-model="visibleItemsPerPageCount"
+              @change="onChangeItemsPerPage()"
+            >
+              <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
+            </select>
           </div>
         </div>
       </div>
 </template>
 
 <script>
-import _ from "lodash";
-import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
-import BasePagination from "../shared/basePagination.vue";
+import _ from 'lodash';
+import ItemsPerPageList from '../../assets/staticData/itemsPerPage';
+import BasePagination from './basePagination.vue';
 
 export default {
   components: {
-    BasePagination
+    BasePagination,
   },
   mounted() {
     try {
     }
   },
   props: {
-    items: undefined
+    items: undefined,
   },
   data() {
     return {
-      sortKey: "",
+      showControl: false,
+      sortKey: '',
       reverse: false,
-      searchItem: "",
+      searchItem: '',
       itemsPerPageList: ItemsPerPageList,
       visibleItemsPerPageCount: 0,
-      currentPage: 1
+      currentPage: 1,
     };
   },
   methods: {
+    changeColumn(title, checked) {
+      if (checked) {
+        this.myColumns.push(title);
+      } else {
+        const ind = this.myColumns.indexOf(title);
+        if (ind > -1) {
+          this.myColumns.splice(ind, 1);
+        }
+      }
+    },
+    onControlVisibilityChange() {
+      this.showControl = !this.showControl;
+    },
     sortBy(sortKey) {
       this.reverse = this.sortKey === sortKey ? !this.reverse : false;
       this.sortKey = sortKey;
     async pageChangeHandle(value) {
       console.log(value);
       switch (value) {
-        case "next":
+        case 'next':
           this.currentPage += 1;
           break;
-        case "previous":
+        case 'previous':
           this.currentPage -= 1;
           break;
         default:
       if (this.currentPage !== 1) {
         this.currentPage = 1;
       }
-    }
+    },
   },
   computed: {
+    ListWidth() {
+      if (this.showControl) {
+        return 'col-md-9';
+      }
+      return 'col-md-12';
+    },
     SortDirection() {
-      return this.reverse ? "desc" : "asc";
+      return this.reverse ? 'desc' : 'asc';
     },
     PageCount() {
       return this.visibleItemsPerPageCount !== 0
           const item = this.items[i];
           for (const o in Object.keys(item)) {
             if (
-              !list.includes(Object.keys(item)[o]) &&
-              !Array.isArray(Object.values(item)[o])
+              !list.includes(Object.keys(item)[o])
+              && !Array.isArray(Object.values(item)[o])
             ) {
               list.push(Object.keys(item)[o]);
             }
       return list;
     },
     FilteredItems() {
-      const list = _.filter(this.items, item =>
-        Object.values(item).some(
-          i =>
-            JSON.stringify(i)
+      const list = _.filter(this.items, item => Object.values(item).some(
+          i => JSON.stringify(i)
               .toLowerCase()
-              .indexOf(this.searchItem) > -1
-        )
-      );
+              .indexOf(this.searchItem) > -1,
+        ),);
       return _.orderBy(list, this.sortKey, this.SortDirection);
     },
     DisplayItems() {
         endSlice = list.length;
       }
       return list.slice(startSlice, endSlice);
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/components/shared/listViewControl.vue

+<template>
+  <div>
+    <div v-for="item in items" :key="item">
+      <CheckItem :title="item" @checkItem="changeColumn" />
+    </div>
+  </div>
+</template>
+<script>
+import CheckItem from './checkItem.vue';
+
+export default {
+  components: {
+    CheckItem,
+  },
+  props: {
+    items: undefined,
+  },
+  methods: {
+    changeColumn(title, checked) {
+      this.$emit('changeColumn', title, checked);
+    },
+  },
+};
+</script>

src/components/shared/navBar.vue

 <template>
   <!-- eslint-disable max-len -->
-  <nav class="navbar navbar-default navbar-trans navbar-expand-lg fixed-top">
+
+  <nav class="navbar navbar-light bg-light navbar-expand-lg fixed-top" style="font-size:18px;">
     <div class="container-fluid">
       <div class="col-md-2">
         <button
             <!-- <li class="nav-item">
             <a class="nav-link active" @click="routerGoTo('/')">Home</a>
             </li>-->
-            <li class="nav-item dropdown">
+            <li class="nav-item dropdowsn">
               <a
                 class="nav-link dropdown-toggle"
                 href="#"
 </template>
 
 <script>
-import { mapGetters, mapActions } from "vuex";
+import { mapGetters, mapActions } from 'vuex';
 
 export default {
   data() {
   },
   computed: {
     showLogout() {
-      return this.$store.state.authentication.status === "success";
+      return this.$store.state.authentication.status === 'success';
     },
     hideLogin() {
-      return this.$store.state.authentication.status !== "success";
+      return this.$store.state.authentication.status !== 'success';
     },
     Logout() {
       return this.$store.state.authentication.methods.logout;
-    }
+    },
   },
 
   methods: {
-    ...mapGetters("authentication", ["isLoggedIn"]),
-    ...mapActions("authentication", ["logout"]),
+    ...mapGetters('authentication', ['isLoggedIn']),
+    ...mapActions('authentication', ['logout']),
 
     routerGoTo(goTo) {
-      this.$emit("routerGoTo", goTo);
-    }
-  }
+      this.$emit('routerGoTo', goTo);
+    },
+  },
 };
 </script>

src/components/timeshare/sell/sellPage.vue

           <hr />
           <div class="form-group row">
             <div class="col-md-4">
-              <label>Were you referred by an agent?</label>
-              <br />
-              <div class="form-check form-check-inline">
-                <input
-                  class="form-check-input radiogroup"
-                  type="radio"
-                  value="true"
-                  :checked="refAgent"
-                  @change="changeRef"
-                />
-                <label class="form-check-label" for="referedBy">Yes</label>
-              </div>
-              <div class="form-check form-check-inline">
-                <input
-                  class="form-check-input radiogroup"
-                  type="radio"
-                  value="false"
-                  :checked="!refAgent"
-                  @change="changeRef"
-                />
-                <label class="form-check-label" for="referedBy">No</label>
+              <div class="form-group">
+                <label>Were you referred by an agent?</label>
+                <div class="custom-control custom-switch">
+                  <input
+                    type="checkbox"
+                    class="custom-control-input"
+                    id="customSwitch1"
+                    :checked="refAgent"
+                    @change="changeRef"
+                  />
+                  <label
+                    class="custom-control-label"
+                    for="customSwitch1"
+                  >{{refAgent ? 'Yes' : 'No'}}</label>
+                </div>
               </div>
             </div>
             <div class="col-md-4" v-if="refAgent">
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import DetailIndividual from '../../user/timeshareIndividual.vue';
-import BankDetails from '../../shared/bankAccount.vue';
-import Address from '../../misc/address.vue';
+import { mapState, mapActions } from "vuex";
+import DetailIndividual from "../../user/timeshareIndividual.vue";
+import BankDetails from "../../shared/bankAccount.vue";
+import Address from "../../misc/address.vue";
 
 export default {
-  name: 'TimeshareToSell',
+  name: "TimeshareToSell",
   components: { DetailIndividual, BankDetails, Address },
   created() {
     this.initTimeshare();
   },
   computed: {
-    ...mapState('timeshare', [
-      'resorts',
-      'regions',
-      'detailedRegion',
-      'seasons',
-      'result',
-      'resortBedrooms',
-      'maxSleep',
-      'bankedEntities',
-      'sellItem',
-      'agencies',
-      'agents',
+    ...mapState("timeshare", [
+      "resorts",
+      "regions",
+      "detailedRegion",
+      "seasons",
+      "result",
+      "resortBedrooms",
+      "maxSleep",
+      "bankedEntities",
+      "sellItem",
+      "agencies",
+      "agents"
     ]),
     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
-    },
+    }
   },
   methods: {
     submitSale() {
     resortChange() {
       this.onResortChange({
         resortName: this.sellItem.resort.resortName,
-        resortCode: this.sellItem.resort.resortCode,
+        resortCode: this.sellItem.resort.resortCode
       });
 
-      if (this.sellItem && this.sellItem.resort === 'Other') {
+      if (this.sellItem && this.sellItem.resort === "Other") {
         this.sellItem.otherResortName = undefined;
         this.sellItem.otherResort = true;
       } else {
         ? this.sellItem.region.id
         : 1;
     },
-    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
-  },
+    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"])
+  }
 };
 </script>
 <style>