refractored pagination & add basic style

MordiSacks · Jan 14, 2018 · bd21d70 · bd21d70
1 parent c0825f0
commit bd21d70
Show file tree

Hide file tree

Showing 14 changed files with 275 additions and 32 deletions.
diff --git a/dist/example/app.css b/dist/example/app.css
diff --git a/dist/example/app.js b/dist/example/app.js
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>VueifiedDataTables example</title>
+    <link rel="stylesheet" href="app.css">
+</head>
+<body>
+
+<div id="app">
+    <div class="container">
+        <vueified-datatable :url="url" :columns="columns" :options="config"></vueified-datatable>
+    </div>
+</div>
+
+<script src="app.js"></script>
+</body>
+</html>
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,4 +1,6 @@
 {
+    "/example/app.js": "/example/app.js",
     "/vueifiedDataTables/vueifiedDataTables.js": "/vueifiedDataTables/vueifiedDataTables.js",
-    "/vueifiedDataTables/vueifiedDataTables.css": "/vueifiedDataTables/vueifiedDataTables.css"
+    "/vueifiedDataTables/vueifiedDataTables.css": "/vueifiedDataTables/vueifiedDataTables.css",
+    "/example/app.css": "/example/app.css"
 }
diff --git a/dist/vueifiedDataTables/vueifiedDataTables.css b/dist/vueifiedDataTables/vueifiedDataTables.css
diff --git a/dist/vueifiedDataTables/vueifiedDataTables.js b/dist/vueifiedDataTables/vueifiedDataTables.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueified-datatables",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A vue drop in replacement for datatables",
   "main": "src/vueifiedDataTables/js/vueifiedDataTables.js",
   "repository": {
@@ -19,6 +19,9 @@
   "contributors": [
     {
       "name": "Racheli Elias-Sacks"
+    },
+    {
+      "name": "Yaron Hazan"
     }
   ],
   "license": "MIT",

diff --git a/readme.md b/readme.md
@@ -1,4 +1,56 @@
 # Vueified DataTables
 
 ## Installation
-- TODO
+Run  
+`yarn add vueified-datatables` or `npm install vueified-datatables`  
+In your code
+```js
+import VueifiedDataTables from 'vueifiedDataTables';
+
+Vue.use(VueifiedDataTables);
+```  
+
+Then in your template
+```html
+<vueified-datatable :url="URL_TO_JSON_DATA" :columns="YOUR_COLUMNS_ARRAY" :options="YOUR_OPTIONS_OBJECT(Optional)"></vueified-datatable>
+```
+
+### Example of a columns object
+```js
+let columns = [
+    {
+        // the key to read from json
+        key: 'id',
+
+        // the table header (optional, will use key by default)
+        title: 'User ID',
+
+        // is column sortable {true|false} (optional, true by default)
+        sortable: true,
+
+        // is column searchable {true|false} (optional, true by default)
+        searchable: true,
+
+        // Callback, receives cell value and row, should return a vue component, if is set, cell will render the component
+        template: function(value, row){
+            return {
+                template: `<i @click="delete" class="fa fa-trash">`,
+            };
+        },
+    },
+    {
+        key: 'f_name',
+        title: 'First Name',
+    },
+];
+```
+
+### options
+- TODO
+
+## Change log
+### 1.0.1
+1. Refactored pagination
+2. Added basic stylesheet
+3. Updated readme 
+
diff --git a/src/example/app.js b/src/example/app.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import VueifiedDataTables from '../vueifiedDataTables/js/vueifiedDataTables';
+
+Vue.use(VueifiedDataTables);
+
+const app = new Vue({
+    el: '#app',
+    data: {
+        url: 'http://192.168.1.2/Projects/TLF/public/dtSample',
+        columns: [
+            {
+                key: 'id',
+                title: 'ID',
+            },
+            {
+                key: 'project_id',
+                title: 'Project ID',
+            },
+            {
+                key: 'name',
+                title: 'Name',
+            },
+            {
+                key: 'created_at',
+                title: 'Created',
+            },
+        ],
+        config: {
+            footer: !true,
+        },
+    },
+});
diff --git a/src/example/app.scss b/src/example/app.scss
@@ -0,0 +1,12 @@
+body {
+  font-family: 'Segoe UI', Arial, sans-serif;
+
+}
+
+.container {
+  width: 1170px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+@import "../vueifiedDataTables/scss/vueifiedDataTables";
diff --git a/src/vueifiedDataTables/js/Components/VueifiedDataTables.vue b/src/vueifiedDataTables/js/Components/VueifiedDataTables.vue
@@ -25,7 +25,7 @@
             </div>
         </div>
 
-        <table class="dataTable table table-striped">
+        <table :class="config.tableClasses">
             <thead v-if="config.header">
             <tr role="row">
                 <th v-for="(column, index) in columns" v-text="column.title || column.key || 'N/A'"
@@ -67,33 +67,33 @@
             <div class="dataTables_paginate paging_simple_numbers">
                 <a class="paginate_button first"
                    v-if="config.firstLast"
-                   :class="request.start === 0 ? 'disabled' : ''"
-                   @click="request.start = 0"
+                   :class="currentPage === 0 ? 'disabled' : ''"
+                   @click="goToPage(0)"
                    tabindex="0">{{ _('First') }}</a>
 
                 <a class="paginate_button previous"
-                   :class="request.start - request.length < 0 ? 'disabled' : ''"
-                   @click="request.start -= request.length"
+                   :class="currentPage === 0 ? 'disabled' : ''"
+                   @click="goToPage(currentPage - 1)"
                    tabindex="0">{{ _('Previous') }}</a>
 
                 <span>
                     <a v-for="page in pages"
                        class="paginate_button"
-                       @click="request.start = page * request.length"
+                       @click="goToPage(page)"
                        v-text="page + 1"
-                       :class="request.start === page * request.length ? 'current' : ''"
+                       :class="currentPage === page ? 'current' : ''"
                        tabindex="0"></a>
                 </span>
 
                 <a class="paginate_button next"
-                   :class="request.start + request.length > data.recordsTotal ? 'disabled' : ''"
-                   @click="request.start += request.length"
+                   :class="currentPage === pages[pages.length - 1] ? 'disabled' : ''"
+                   @click="goToPage(currentPage + 1)"
                    tabindex="0">{{ _('Next') }}</a>
 
                 <a class="paginate_button last"
                    v-if="config.firstLast"
-                   :class="request.start === pages[pages.length - 1] * request.length ? 'disabled' : ''"
-                   @click="request.start = pages[pages.length - 1] * request.length"
+                   :class="currentPage === pages[pages.length - 1] ? 'disabled' : ''"
+                   @click="goToPage(pages[pages.length - 1])"
                    tabindex="0">{{ _('Last') }}</a>
             </div>
         </div>
@@ -154,6 +154,7 @@
                 searchPhrase: '',
                 searchTimeout: null,
                 pages: [],
+                currentPage: 0,
 
                 translations,
 
@@ -246,6 +247,7 @@
                         50,
                         100,
                     ],
+                    tableClasses: '',
                     firstLast: false,
                     search: true,
                     header: true,
@@ -356,6 +358,21 @@
                 return 'no-sort sorting_disabled';
             },
 
+
+            /**
+             * Go to a page
+             */
+            goToPage(page) {
+
+                /** Check if page exists */
+                if (this.pages.indexOf(page) < 0) {
+                    return;
+                }
+
+                this.request.start = page * this.request.length;
+                this.currentPage = page;
+            },
+
             /**
              * Translate string
              * @param {String} string

diff --git a/src/vueifiedDataTables/scss/vueifiedDataTables.scss b/src/vueifiedDataTables/scss/vueifiedDataTables.scss
@@ -0,0 +1,112 @@
+.vueified-datatable {
+  color: #555555;
+
+  .vueified-datatable-header-controls {
+    width: 100%;
+    float: left;
+    background: #f2f2f2;
+    padding: 8px;
+
+    .dataTables_length {
+      float: left;
+      label {
+        select {
+
+        }
+      }
+    }
+
+    .dataTables_filter {
+      float: right;
+      label {
+        input {
+
+        }
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    text-align: left;
+    border-spacing: 0;
+
+    td, th {
+      padding: 8px;
+      line-height: 1.6;
+      vertical-align: top;
+    }
+
+    thead {
+      tr {
+        th {
+          border-bottom: 1px solid #555555;
+
+          &.sorting,
+          &.sorting_asc,
+          &.sorting_desc {
+            cursor: pointer;
+            &:after {
+              float: right;
+            }
+          }
+
+          &.sorting:after {
+            content: '\21C5';
+          }
+
+          &.sorting_asc:after {
+            content: '\21CA';
+          }
+          &.sorting_desc:after {
+            content: '\21C8';
+          }
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        background-color: #f9f9f9;
+
+        &:nth-child(even) {
+          background-color: #fff;
+        }
+
+        &:last-child {
+          td {
+            border-bottom: 1px solid #555555;
+          }
+        }
+      }
+    }
+  }
+
+  .vueified-datatable-footer-controls {
+    width: 100%;
+    float: left;
+    padding: 8px;
+
+    .dataTables_info {
+      float: left;
+      color: #333333;
+    }
+
+    .dataTables_paginate {
+      float: right;
+
+      a {
+        padding: 5px;
+        cursor: pointer;
+
+        &.disabled {
+          cursor: not-allowed;
+        }
+
+        &.current {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -28,6 +28,12 @@ mix
     .sass('src/vueifiedDataTables/scss/vueifiedDataTables.scss', 'dist/vueifiedDataTables')
 ;
 
+/** Build example */
+mix
+    .js('src/example/app.js', 'dist/example')
+    .sass('src/example/app.scss', 'dist/example')
+;
+
 if (!mix.inProduction()) {
     mix.sourceMaps();
 }