Added Column Chooser

public/index.html

@@ -33,10 +33,7 @@
 <script src="lib/easing/easing.min.js"></script>
 <script src="lib/owlcarousel/owl.carousel.min.js"></script>
 <script src="lib/scrollreveal/scrollreveal.min.js"></script>
-<script src="js/dragndrop.table.columns.js" type="text/javascript"></script>
 <script src="js/main.js"></script>
-<script>
-  $('.table').dragableColumns();
-</script>
+
 
 </html>

src/App.vue

@@ -13,29 +13,29 @@
 </template>
 
 <script>
-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
   },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style>
 button:hover {
   cursor: pointer;
-},
+}
 hr {
   background-color: #60cbeb;
 }

src/components/shared/checkItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row p-2" @click="checkItem">
-    <div class="custom-control custom-checkbox">
-      <input type="checkbox" class="custom-control-input" :checked="checked" />
+    <div class="custom-control custom-checkbox mar-l-15">
+      <input type="checkbox" class="custom-control-input mar-l-15" :checked="Show" />
       <label class="custom-control-label">{{title}}</label>
     </div>
   </div>
@@ -9,17 +9,26 @@
 
 <script>
 export default {
-  props: ['title'],
-  data() {
-    return {
-      checked: true,
-    };
+  props: {
+    title: undefined,
+    show: {
+      default: false
+    }
   },
   methods: {
     checkItem() {
-      this.checked = !this.checked;
-      this.$emit('checkItem', this.title, this.checked);
-    },
+      this.$emit("checkItem", this.title, !this.show);
+    }
   },
+  computed: {
+    Show() {
+      return this.show;
+    }
+  }
 };
 </script>
+<style>
+.mar-l-15 {
+  margin-left: 15px;
+}
+</style>

src/components/shared/listView.vue

@@ -12,6 +12,29 @@
       </div>
       <div class="p-2">
         <div class="d-flex flex-row">
+          <div class="p2" v-if="showColumnChooser">
+            <div
+              class="btn btn-primary myBackground btn-width cursor-pointer"
+              data-toggle="modal"
+              data-target="#myModal"
+            >Column Chooser</div>
+            <div class="col-md-12">
+              <div id="myModal" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <!-- Modal content-->
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5>Column Chooser</h5>
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div style="margin-left:50px; margin-right:50px;margin-bottom:50px;">
+                      <ListViewControl :items="allColumn" @checkItem="checkItem" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="p2" v-if="selectedItems.length > 0">
             <div
               class="btn btn-primary myBackground btn-width cursor-pointer"
@@ -28,9 +51,9 @@
     <div v-if="items && items.length > 0" class="table-responsive">
       <table
         id="table"
-        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered, 'table-striped': striped}"
+        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered}"
       >
-        <thead >
+        <thead>
           <tr class="dnd-moved">
             <th v-for="(column, c) in Columns" :key="c">
               <div
@@ -115,15 +138,17 @@
 </template>
 
 <script>
-import _ from 'lodash';
-import ItemsPerPageList from '../../assets/staticData/itemsPerPage';
-import BasePagination from './basePagination.vue';
-import Alert from './alert.vue';
+import _ from "lodash";
+import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
+import BasePagination from "./basePagination.vue";
+import Alert from "./alert.vue";
+import ListViewControl from "./listViewControl.vue";
 
 export default {
   components: {
     BasePagination,
     Alert,
+    ListViewControl
   },
   mounted() {
     try {
@@ -135,51 +160,55 @@ export default {
     } catch (error) {
       throw error;
     }
+    this.getInitColumn();
   },
   props: {
     compact: {
-      default: true,
+      default: true
     },
     allowSelect: {
-      default: true,
+      default: true
     },
     allowMultipleSelect: {
-      default: false,
+      default: false
     },
     hideSearch: {
-      default: false,
+      default: false
     },
     showNew: {
-      default: true,
+      default: true
     },
     items: undefined,
     editable: {
-      default: false,
+      default: false
     },
     deleteable: {
-      default: false,
+      default: false
     },
     columnCount: {
-      default: 6,
+      default: 6
     },
     showPager: {
-      default: true,
+      default: true
     },
     title: {
-      default: undefined,
+      default: undefined
     },
     hideItemCount: {
-      default: false,
+      default: false
     },
-    
+
     currentPage: {
       default: 1
     },
     bordered: {
       default: true
-    }, 
+    },
     striped: {
       default: true
+    },
+    showColumnChooser: {
+      default: true
     }
   },
   data() {
@@ -187,33 +216,69 @@ export default {
       hover: -1,
       selectedItems: [],
       showControl: false,
-      sortKey: '',
+      sortKey: "",
       reverse: false,
-      searchItem: '',
+      searchItem: "",
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
+      visibleColumn: [],
+      allColumn: []
     };
   },
   methods: {
+    checkItem(column, show) {
+      const list = [];
+      for (var i in this.allColumn) {
+        let item = this.allColumn[i];
+        if (item && item.column === column) {
+          item.show = show;
+        }
+        list.push(item);
+      }
+      this.allColumn = list;
+    },
+    getInitColumn() {
+      const list = [];
+      const listAll = [];
+      if (this.items) {
+        for (const i in Object.keys(this.items)) {
+          const item = this.items[i];
+          for (const o in Object.keys(item)) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
+              const columnName = Object.keys(item)[o];
+              if (!listAll.some(x => x.column === columnName))
+                listAll.push({
+                  column: columnName,
+                  show: _.filter(listAll, x => x.show).length < this.columnCount
+                });
+            }
+          }
+        }
+      }
+      this.allColumn = listAll;
+    },
     onClearSelected() {
       this.selectedItems = [];
-      this.$emit('onClearSelected');
+      this.$emit("onClearSelected");
     },
     isSelected(i) {
       const ind = this.getActualIndex(i);
       return _.some(this.selectedItems, x => x === ind);
     },
     onNew() {
-      this.$emit('onNew');
+      this.$emit("onNew");
     },
     isObject(item) {
       return !!item && item.constructor === Object;
     },
     onEdit(item) {
-      this.$emit('onEdit', item);
+      this.$emit("onEdit", item);
     },
     onDelete(item) {
-      this.$emit('onDelete', item);
+      this.$emit("onDelete", item);
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
@@ -225,7 +290,7 @@ export default {
         }
         this.selectedItems.push(ind);
       }
-      this.$emit('onRowClick', this.selectedItems);
+      this.$emit("onRowClick", this.selectedItems);
     },
     getActualIndex(index) {
       return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
@@ -250,10 +315,10 @@ export default {
     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:
@@ -264,17 +329,17 @@ export default {
       if (this.currentPage !== 1) {
         this.currentPage = 1;
       }
-    },
+    }
   },
   computed: {
     ListWidth() {
       if (this.showControl) {
-        return 'col-md-9';
+        return "col-md-9";
       }
-      return 'col-md-12';
+      return "col-md-12";
     },
     SortDirection() {
-      return this.reverse ? 'desc' : 'asc';
+      return this.reverse ? "desc" : "asc";
     },
     PageCount() {
       return this.visibleItemsPerPageCount !== 0
@@ -282,30 +347,34 @@ export default {
         : 1;
     },
     Columns() {
+      const listColumns = [];
+      if (!this.allColumn || this.allColumn.length === 0) {
+        this.getInitColumn();
+      }
+      const list = _.filter(this.allColumn, x => x.show);
+      for (const i in list) {
+        const item = list[i];
+        if (item) {
+          listColumns.push(item.column);
+        }
+      }
+      return listColumns;
+    },
+    AllColumns() {
       const list = [];
       if (this.items) {
-        for (const i in Object.keys(this.items)) {
-          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])
-            ) {
-              if (list.length < this.columnCount) {
-                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.toLowerCase()) > -1,
-        ),);
+              .indexOf(this.searchItem.toLowerCase()) > -1
+        )
+      );
       return _.orderBy(list, this.sortKey, this.SortDirection);
     },
     DisplayItems() {
@@ -317,7 +386,8 @@ export default {
       }
       return list.slice(startSlice, endSlice);
     },
-  },
+    GetAllColumn() {}
+  }
 };
 </script>
 <style scoped>
@@ -331,6 +401,10 @@ th[draggable] a {
   text-decoration: none;
   color: #333333;
 }
+.table-striped > tbody > tr:nth-child(2n + 1) > td,
+.table-striped > tbody > tr:nth-child(2n + 1) > th {
+  background-color: rgba(225, 225, 225, 0.8);
+}
 .active {
   background-color: rgba(255, 255, 255, 0.5);
   cursor: pointer;

src/components/shared/listViewControl.vue

@@ -1,24 +1,53 @@
 <template>
-  <div>
-    <div v-for="item in items" :key="item">
-      <CheckItem :title="item" @checkItem="changeColumn" />
+  <div class="container">
+    <div class="offset-3 col-md-6">
+      <input v-model="searchItem" class="form-control" placeholder="Search...." />
+    </div>
+    <hr />
+    <div class="row">
+      <div v-for="item in items" :key="item" class="col-md-4">
+        <div :class="{'inSearch': isInSelected(item)}">
+          <CheckItem :title="item.column" :show="item.show" @checkItem="checkItem" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import CheckItem from './checkItem.vue';
+import CheckItem from "./checkItem.vue";
 
 export default {
   components: {
-    CheckItem,
+    CheckItem
+  },
+  data() {
+    return {
+      searchItem: undefined
+    };
   },
   props: {
-    items: undefined,
+    items: undefined
   },
   methods: {
-    changeColumn(title, checked) {
-      this.$emit('changeColumn', title, checked);
+    isInSelected(i) {
+      if (this.searchItem && this.searchItem.length > 0) {
+        return (
+          i.column.toLowerCase().indexOf(this.searchItem.toLowerCase()) > -1
+        );
+      }
+      return false;
     },
+    checkItem(column, show) {
+      this.$emit("checkItem", column, show);
+    }
   },
+  computed: {}
 };
 </script>
+<style>
+.inSearch {
+  border: 1px solid rgba(50, 50, 50, 0.5);
+  border-radius: 10px;
+  background-color: rgba(225, 225, 225, 0.6);
+}
+</style>