Provision
/
UnivateProperties
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Check In of listView

master
Kobus il y a 5 ans
Parent
031024e894
révision
3024011d02
11 fichiers modifiés avec 687 ajouts et 500 suppressions
Vue séparée Afficher les stats Diff
  1. 36
    38
      public/index.html
  2. 122
    120
      public/js/dragndrop.table.columns.js
  3. 7
    0
      src/assets/staticData/itemsPerPage.js
  4. 11
    27
      src/components/admin/unitConfiguration/unitConfigurationPage.vue
  5. 0
    1
      src/components/home/homePage.vue
  6. 107
    0
      src/components/shared/basePagination.vue
  7. 32
    0
      src/components/shared/basePaginationItem.vue
  8. 187
    0
      src/components/shared/listView.vue
  9. 9
    12
      src/components/shared/navBar.vue
  10. 0
    119
      src/components/test.vue
  11. 176
    183
      src/router/index.js

+ 36
- 38
public/index.html Voir le fichier 

@@ -1,44 +1,42 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html lang="en">
3 3
4 
-  <head>
5 
-    <meta charset="utf-8">
6 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
9 
-    <link href="img/univate.PNG" rel="apple-touch-icon">
10 
-    <title>Uni-Vate Properties</title>
4 
+<head>
5 
+  <meta charset="utf-8">
6 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 
+  <link rel="icon" href="<%= BASE_URL %>favicon.png">
9 
+  <link href="img/univate.PNG" rel="apple-touch-icon">
10 
+  <title>Uni-Vate Properties</title>
11 11
12 
-    <link
13 
-      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
14 
-      rel="stylesheet">
15 
-    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
16 
-    <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
17 
-    <link href="lib/animate/animate.min.css" rel="stylesheet">
18 
-    <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
19 
-    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
20 
-    <link href="css/style.css" rel="stylesheet">
21 
-    <link rel="stylesheet" href="css/dragndrop.table.columns.css" />
22 
-  </head>
12 
+  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
13 
+  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
14 
+  <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
15 
+  <link href="lib/animate/animate.min.css" rel="stylesheet">
16 
+  <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
17 
+  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
18 
+  <link href="css/style.css" rel="stylesheet">
19 
+  <link rel="stylesheet" href="css/dragndrop.table.columns.css" />
20 
+</head>
23 21
24 
-  <body>
25 
-    <noscript>
26 
-      <strong>We're sorry but bootvue doesn't work properly without JavaScript
27 
-        enabled. Please enable it to continue.</strong>
28 
-    </noscript>
29 
-    <div id="app"></div>
30 
-  </body>
31 
-  <script src="lib/jquery/jquery.min.js"></script>
32 
-  <script src="lib/jquery/jquery-migrate.min.js"></script>
33 
-  <script src="lib/popper/popper.min.js"></script>
34 
-  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
35 
-  <script src="lib/easing/easing.min.js"></script>
36 
-  <script src="lib/owlcarousel/owl.carousel.min.js"></script>
37 
-  <script src="lib/scrollreveal/scrollreveal.min.js"></script>
38 
-  <script src="js/dragndrop.table.columns.min.js" type="text/javascript"></script>
39 
-  <script src="js/main.js"></script>
40 
-  <script>
41 
-		$('.table').dragableColumns();
42 
-	</script>
22 
+<body>
23 
+  <noscript>
24 
+    <strong>We're sorry but bootvue doesn't work properly without JavaScript
25 
+      enabled. Please enable it to continue.</strong>
26 
+  </noscript>
27 
+  <div id="app"></div>
28 
+</body>
29 
+<script src="lib/jquery/jquery.min.js"></script>
30 
+<script src="lib/jquery/jquery-migrate.min.js"></script>
31 
+<script src="lib/popper/popper.min.js"></script>
32 
+<script src="lib/bootstrap/js/bootstrap.min.js"></script>
33 
+<script src="lib/easing/easing.min.js"></script>
34 
+<script src="lib/owlcarousel/owl.carousel.min.js"></script>
35 
+<script src="lib/scrollreveal/scrollreveal.min.js"></script>
36 
+<script src="js/dragndrop.table.columns.js" type="text/javascript"></script>
37 
+<script src="js/main.js"></script>
38 
+<script>
39 
+  $('.table').dragableColumns();
40 
+</script>
43 41
44 
-</html>
42 
+</html>

+ 122
- 120
public/js/dragndrop.table.columns.js Voir le fichier 

@@ -1,135 +1,137 @@
1 
-/*global $:false, jQuery:false*/
1 
+/* global $:false, jQuery:false */
2 2 
 /*
3 3 
 Drag & Drop Table Columns v.3.1.5
4 4 
 for jQuery 3.x
5 5 
 by Oleksandr Nikitin (a.nikitin@i.ua)
6 6 
 https://github.com/alexshnur/drag-n-drop-table-columns
7 7 
 */
8 
-(function($, window){
9 
-	var cols, dragSrcEl = null, dragSrcEnter = null, dragableColumns, _this;
8 
+(function ($, window) {
9 
+  let cols;
10 
+  let dragSrcEl = null;
11 
+  let dragSrcEnter = null;
12 
+  let dragableColumns;
13 
+  let
14 
+    _this;
10 15
11 
-	function insertAfter(elem, refElem) {
12 
-		return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
13 
-	}
16 
+  function insertAfter(elem, refElem) {
17 
+    return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
18 
+  }
14 19
15 
-	function isIE () {
16 
-		var nav = navigator.userAgent.toLowerCase();
17 
-		return (nav.indexOf('msie') !== -1) ? parseInt(nav.split('msie')[1]) : false;
18 
-	}
20 
+  function isIE() {
21 
+    const nav = navigator.userAgent.toLowerCase();
22 
+    return (nav.indexOf('msie') !== -1) ? parseInt(nav.split('msie')[1]) : false;
23 
+  }
19 24
20 
-	dragableColumns = (function(){
21 
-		var $table;
22 
-		function dragColumns (table, options) {
23 
-			_this = this;
24 
-			$table = table;
25 
-			_this.options = $.extend({}, _this.options, options);
26 
-			if (_this.options.drag) {
27 
-				if (isIE() === 9) {
28 
-					$table.find('thead tr th').each(function(){
29 
-						if ($(this).find('.drag-ie').length === 0) {
30 
-							$(this).html($('<a>').html($(this).html()).attr('href', '#').addClass('drag-ie'));
31 
-						}
32 
-					});
33 
-				}
34 
-				cols = $table.find('thead tr th');
25 
+  dragableColumns = (function () {
26 
+    let $table;
35 27
36 
-				jQuery.event.addProp('dataTransfer');
37 
-				[].forEach.call(cols, function(col){
38 
-					col.setAttribute('draggable', true);
28 
+    function dragColumns(table, options) {
29 
+      _this = this;
30 
+      $table = table;
31 
+      _this.options = $.extend({}, _this.options, options);
32 
+      if (_this.options.drag) {
33 
+        if (isIE() === 9) {
34 
+          $table.find('thead tr th').each(function () {
35 
+            if ($(this).find('.drag-ie').length === 0) {
36 
+              $(this).html($('<a>').html($(this).html()).attr('href', '#').addClass(
37 
+                'drag-ie',
38 
+              ));
39 
+            }
40 
+          });
41 
+        }
42 
+        cols = $table.find('thead tr th');
39 43
40 
-					$(col).on('dragstart', _this.handleDragStart);
41 
-					$(col).on('dragenter', _this.handleDragEnter);
42 
-					$(col).on('dragover', _this.handleDragOver);
43 
-					$(col).on('dragleave', _this.handleDragLeave);
44 
-					$(col).on('drop', _this.handleDrop);
45 
-					$(col).on('dragend', _this.handleDragEnd);
46 
-				});
47 
-			}
48 
-		}
44 
+        jQuery.event.addProp('dataTransfer');
45 
+        [].forEach.call(cols, (col) => {
46 
+          col.setAttribute('draggable', true);
49 47
50 
-		dragColumns.prototype = {
51 
-			options: {
52 
-				drag: true,
53 
-				dragClass: 'drag',
54 
-				overClass: 'over',
55 
-				movedContainerSelector: '.dnd-moved'
56 
-			},
57 
-			handleDragStart: function(e) {
58 
-				$(this).addClass(_this.options.dragClass);
59 
-				dragSrcEl = this;
60 
-				e.dataTransfer.effectAllowed = 'copy';
61 
-				e.dataTransfer.setData('text/html', this.id);
62 
-			},
63 
-			handleDragOver: function (e) {
64 
-				if (e.preventDefault) {
65 
-					e.preventDefault();
66 
-				}
67 
-				e.dataTransfer.dropEffect = 'copy';
68 
-				return;
69 
-			},
70 
-			handleDragEnter: function (e) {
71 
-				dragSrcEnter = this;
72 
-				[].forEach.call(cols, function (col) {
73 
-					$(col).removeClass(_this.options.overClass);
74 
-				});
75 
-				$(this).addClass(_this.options.overClass);
76 
-				return;
77 
-			},
78 
-			handleDragLeave: function (e) {
79 
-				if (dragSrcEnter !== e) {
80 
-					//this.classList.remove(_this.options.overClass);
81 
-				}
82 
-			},
83 
-			handleDrop: function (e) {
84 
-				if (e.stopPropagation) {
85 
-					e.stopPropagation();
86 
-				}
87 
-				if (dragSrcEl !== e) {
88 
-					_this.moveColumns($(dragSrcEl).index(), $(this).index());
89 
-				}
90 
-				return;
91 
-			},
92 
-			handleDragEnd: function (e) {
93 
-				var colPositions = {
94 
-						array: [],
95 
-						object: {}
96 
-					};
97 
-				[].forEach.call(cols, function (col) {
98 
-					var name = $(col).attr('data-name') || $(col).index();
99 
-					$(col).removeClass(_this.options.overClass);
100 
-					colPositions.object[name] = $(col).index();
101 
-					colPositions.array.push($(col).index());
102 
-				});
103 
-				if (typeof _this.options.onDragEnd === 'function') {
104 
-					_this.options.onDragEnd(colPositions);
105 
-				}
106 
-				$(dragSrcEl).removeClass(_this.options.dragClass);
107 
-				return;
108 
-			},
109 
-			moveColumns: function (fromIndex, toIndex) {
110 
-				var rows = $table.find(_this.options.movedContainerSelector);
111 
-				for (var i = 0; i < rows.length; i++) {
112 
-					if (toIndex > fromIndex) {
113 
-						insertAfter(rows[i].children[fromIndex], rows[i].children[toIndex]);
114 
-					} else if (toIndex < $table.find('thead tr th').length - 1) {
115 
-						rows[i].insertBefore(rows[i].children[fromIndex], rows[i].children[toIndex]);
116 
-					}
117 
-				}
118 
-			}
119 
-		};
48 
+          $(col).on('dragstart', _this.handleDragStart);
49 
+          $(col).on('dragenter', _this.handleDragEnter);
50 
+          $(col).on('dragover', _this.handleDragOver);
51 
+          $(col).on('dragleave', _this.handleDragLeave);
52 
+          $(col).on('drop', _this.handleDrop);
53 
+          $(col).on('dragend', _this.handleDragEnd);
54 
+        });
55 
+      }
56 
+    }
120 57
121 
-		return dragColumns;
58 
+    dragColumns.prototype = {
59 
+      options: {
60 
+        drag: true,
61 
+        dragClass: 'drag',
62 
+        overClass: 'over',
63 
+        movedContainerSelector: '.dnd-moved',
64 
+      },
65 
+      handleDragStart(e) {
66 
+        $(this).addClass(_this.options.dragClass);
67 
+        dragSrcEl = this;
68 
+        e.dataTransfer.effectAllowed = 'copy';
69 
+        e.dataTransfer.setData('text/html', this.id);
70 
+      },
71 
+      handleDragOver(e) {
72 
+        if (e.preventDefault) {
73 
+          e.preventDefault();
74 
+        }
75 
+        e.dataTransfer.dropEffect = 'copy';
76 
+      },
77 
+      handleDragEnter(e) {
78 
+        dragSrcEnter = this;
79 
+        [].forEach.call(cols, (col) => {
80 
+          $(col).removeClass(_this.options.overClass);
81 
+        });
82 
+        $(this).addClass(_this.options.overClass);
83 
+      },
84 
+      handleDragLeave(e) {
85 
+        if (dragSrcEnter !== e) {
86 
+          // this.classList.remove(_this.options.overClass);
87 
+        }
88 
+      },
89 
+      handleDrop(e) {
90 
+        if (e.stopPropagation) {
91 
+          e.stopPropagation();
92 
+        }
93 
+        if (dragSrcEl !== e) {
94 
+          _this.moveColumns($(dragSrcEl).index(), $(this).index());
95 
+        }
96 
+      },
97 
+      handleDragEnd(e) {
98 
+        const colPositions = {
99 
+          array: [],
100 
+          object: {},
101 
+        };
102 
+        [].forEach.call(cols, (col) => {
103 
+          const name = $(col).attr('data-name') || $(col).index();
104 
+          $(col).removeClass(_this.options.overClass);
105 
+          colPositions.object[name] = $(col).index();
106 
+          colPositions.array.push($(col).index());
107 
+        });
108 
+        if (typeof _this.options.onDragEnd === 'function') {
109 
+          _this.options.onDragEnd(colPositions);
110 
+        }
111 
+        $(dragSrcEl).removeClass(_this.options.dragClass);
112 
+      },
113 
+      moveColumns(fromIndex, toIndex) {
114 
+        const rows = $table.find(_this.options.movedContainerSelector);
115 
+        for (let i = 0; i < rows.length; i++) {
116 
+          if (toIndex > fromIndex) {
117 
+            insertAfter(rows[i].children[fromIndex], rows[i].children[toIndex]);
118 
+          } else if (toIndex < $table.find('thead tr th').length - 1) {
119 
+            rows[i].insertBefore(rows[i].children[fromIndex], rows[i].children[toIndex]);
120 
+          }
121 
+        }
122 
+      },
123 
+    };
122 124
123 
-	})();
125 
+    return dragColumns;
126 
+  }());
124 127
125 
-	return $.fn.extend({
126 
-		dragableColumns: function(){
127 
-			var option = (arguments[0]);
128 
-			return this.each(function() {
129 
-				var $table = $(this);
130 
-				new dragableColumns($table, option);
131 
-			});
132 
-		}
133 
-	});
134 
-
135 
-})(window.jQuery, window);
128 
+  return $.fn.extend({
129 
+    dragableColumns() {
130 
+      const option = (arguments[0]);
131 
+      return this.each(function () {
132 
+        const $table = $(this);
133 
+        new dragableColumns($table, option);
134 
+      });
135 
+    },
136 
+  });
137 
+}(window.jQuery, window));

+ 7
- 0
src/assets/staticData/itemsPerPage.js Voir le fichier 

@@ -0,0 +1,7 @@
1 
+const items = [
2 
+  10,
3 
+  20,
4 
+  50,
5 
+  100,
6 
+];
7 
+export default items;

+ 11
- 27
src/components/admin/unitConfiguration/unitConfigurationPage.vue Voir le fichier 

@@ -20,44 +20,28 @@
20 20 
     </div>
21 21 
     <!-- </section> -->
22 22 
     <div class="container">
23 
-      <table class="table table-bordered">
24 
-        <thead>
25 
-          <tr>
26 
-            <th>Id</th>
27 
-            <th>Code</th>
28 
-            <th>Bedrooms</th>
29 
-            <th>Adults</th>
30 
-            <th>Children</th>
31 
-          </tr>
32 
-        </thead>
33 
-        <tbody>
34 
-          <tr v-for="(item, i) in unitConfigurationList" :key="i">
35 
-            <td>{{item.id}}</td>
36 
-            <td>{{item.code}}</td>
37 
-            <td>{{item.bedrooms}}</td>
38 
-            <td>{{item.adults}}</td>
39 
-            <td>{{item.children}}</td>
40 
-          </tr>
41 
-        </tbody>
42 
-      </table>
23 
+      <ListView :items="unitConfigurationList" />
43 24 
     </div>
44 25 
   </div>
45 26 
 </template>
46 27 
 <script>
47 
-import { mapState, mapActions } from 'vuex';
28 
+import { mapState, mapActions } from "vuex";
29 
+import ListView from "../../shared/listView.vue";
48 30
49 31 
 export default {
50 
-  name: 'UnitConfiguration',
32 
+  name: "UnitConfiguration",
33 
+  components: {
34 
+    ListView
35 
+  },
51 36 
   created() {
52 37 
     this.getUnitConfigurationList();
53 38 
   },
54 39 
   computed: {
55 
-    ...mapState('unitConfiguration', ['unitConfigurationList']),
40 
+    ...mapState("unitConfiguration", ["unitConfigurationList"])
56 41 
   },
57 42 
   methods: {
58 
-    ...mapActions('unitConfiguration', ['getUnitConfigurationList']),
59 
-  },
43 
+    ...mapActions("unitConfiguration", ["getUnitConfigurationList"])
44 
+  }
60 45 
 };
61 46 
 </script>
62 
-<style>
63 
-</style>
47 
+<style></style>

+ 0
- 1
src/components/home/homePage.vue Voir le fichier 

@@ -8,7 +8,6 @@
8 8 
     <a href="#" class="back-to-top">
9 9 
       <i class="fa fa-chevron-up"></i>
10 10 
     </a>
11 
-    <div id="preloader"></div>
12 11 
   </div>
13 12 
 </template>
14 13 
 <script>

+ 107
- 0
src/components/shared/basePagination.vue Voir le fichier 

@@ -0,0 +1,107 @@
1 
+<template>
2 
+  <div>
3 
+    <nav>
4 
+      <ul class="pagination">
5 
+        <li class="page-item" v-if="isPreviousButtonDisabled" @click="previousPage">
6 
+          <a class="page-link" href="#" aria-label="Previous">
7 
+            <span aria-hidden="true">&laquo;</span>
8 
+            <span class="sr-only">Previous</span>
9 
+          </a>
10 
+        </li>
11 
+        <li class="page-item" v-for="item in paginationItems" :key="item">
12 
+          <BasePaginationItem
13 
+            :pageNumber="item"
14 
+            :disable="item === currentPage"
15 
+            @loadPage="onLoadPage"
16 
+          />
17 
+        </li>
18 
+        <li class="page-item" v-if="isNextButtonDisabled" @click="nextPage">
19 
+          <a class="page-link" href="#" aria-label="Next">
20 
+            <span aria-hidden="true">&raquo;</span>
21 
+            <span class="sr-only">Next</span>
22 
+          </a>
23 
+        </li>
24 
+      </ul>
25 
+    </nav>
26 
+  </div>
27 
+</template>
28 
+<script>
29 
+import BasePaginationItem from './basePaginationItem.vue';
30 
+
31 
+export default {
32 
+  components: {
33 
+    BasePaginationItem,
34 
+  },
35 
+  props: {
36 
+    visiblePagesCount: {
37 
+      type: Number,
38 
+      default: 5,
39 
+    },
40 
+    currentPage: {
41 
+      type: Number,
42 
+      required: true,
43 
+    },
44 
+    pageCount: {
45 
+      type: Number,
46 
+      required: true,
47 
+    },
48 
+  },
49 
+  computed: {
50 
+    isPreviousButtonDisabled() {
51 
+      return this.currentPage !== 1;
52 
+    },
53 
+    isNextButtonDisabled() {
54 
+      return this.currentPage !== this.pageCount;
55 
+    },
56 
+    paginationItems() {
57 
+      const { currentPage } = this;
58 
+      const { pageCount } = this;
59 
+      const { visiblePagesCount } = this;
60 
+      let pagintationItemsArray = [];
61 
+      if (pageCount <= visiblePagesCount) {
62 
+        let count = 1;
63 
+        while (count <= pageCount) {
64 
+          pagintationItemsArray.push(count);
65 
+          count += 1;
66 
+        }
67 
+        return pagintationItemsArray;
68 
+      }
69 
+      const visiblePagesThreshold = (visiblePagesCount - 1) / 2;
70 
+      pagintationItemsArray = Array(this.visiblePagesCount - 1).fill(0);
71 
+      if (currentPage <= visiblePagesThreshold + 1) {
72 
+        pagintationItemsArray[0] = 1;
73 
+        const pagintationItems = pagintationItemsArray.map(
74 
+          (paginationTrigger, index) => pagintationItemsArray[0] + index,
75 
+        );
76 
+        pagintationItems.push(pageCount);
77 
+        return pagintationItems;
78 
+      }
79 
+      if (currentPage >= pageCount - visiblePagesThreshold + 1) {
80 
+        const pagintationItems = pagintationItemsArray.map(
81 
+          (paginationTrigger, index) => pageCount - index,
82 
+        );
83 
+        pagintationItems.reverse().unshift(1);
84 
+        return pagintationItems;
85 
+      }
86 
+      pagintationItemsArray[0] = currentPage - visiblePagesThreshold + 1;
87 
+      const pagintationItems = pagintationItemsArray.map(
88 
+        (paginationTrigger, index) => pagintationItemsArray[0] + index,
89 
+      );
90 
+      pagintationItems.unshift(1);
91 
+      pagintationItems[pagintationItems.length - 1] = pageCount;
92 
+      return pagintationItems;
93 
+    },
94 
+  },
95 
+  methods: {
96 
+    onLoadPage(value) {
97 
+      this.$emit('loadPage', value);
98 
+    },
99 
+    nextPage() {
100 
+      this.$emit('nextPage');
101 
+    },
102 
+    previousPage() {
103 
+      this.$emit('previousPage');
104 
+    },
105 
+  },
106 
+};
107 
+</script>

+ 32
- 0
src/components/shared/basePaginationItem.vue Voir le fichier 

@@ -0,0 +1,32 @@
1 
+<template>
2 
+  <div>
3 
+    <div v-if="disable">
4 
+      <span class="page-link disabled">{{pageNumber}}</span>
5 
+    </div>
6 
+    <div v-else @click="onClick">
7 
+      <a class="page-link">{{pageNumber}}</a>
8 
+    </div>
9 
+  </div>
10 
+</template>
11 
+<script>
12 
+export default {
13 
+  props: {
14 
+    pageNumber: {
15 
+      type: Number,
16 
+      required: true,
17 
+    },
18 
+    disable: undefined,
19 
+  },
20 
+  methods: {
21 
+    onClick() {
22 
+      this.$emit('loadPage', this.pageNumber);
23 
+    },
24 
+  },
25 
+};
26 
+</script>
27 
+<style scoped>
28 
+.disabled {
29 
+  cursor: arrow;
30 
+  background-color: lightgray;
31 
+}
32 
+</style>

+ 187
- 0
src/components/shared/listView.vue Voir le fichier 

@@ -0,0 +1,187 @@
1 
+/* eslint-disable no-restricted-syntax */
2 
+/* eslint-disable guard-for-in */
3 
+<template>
4 
+  <div>
5 
+    <div class="container">
6 
+      <div class="row">
7 
+        <div class="col-md-12">
8 
+          <input
9 
+            v-model="searchItem"
10 
+            class="form-control"
11 
+            placeholder="Filter users by name or age"
12 
+          />
13 
+          <table id="table" class="table table-bordered table-hover">
14 
+            <thead>
15 
+              <tr class="dnd-moved">
16 
+                <th v-for="(column, c) in Columns" :key="c">
17 
+                  <div @click="sortBy(column)">{{ column }}</div>
18 
+                </th>
19 
+              </tr>
20 
+            </thead>
21 
+            <tbody>
22 
+              <tr v-for="(item, i) in DisplayItems" :key="i" class="text-left dnd-moved">
23 
+                <td v-for="(column, c) in Columns" :key="c">{{ item[column] }}</td>
24 
+              </tr>
25 
+            </tbody>
26 
+          </table>
27 
+          <div class="d-flex justify-content-between">
28 
+            <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
29 
+            <div class="p-1">
30 
+              <BasePagination
31 
+                :currentPage="currentPage"
32 
+                :pageCount="PageCount"
33 
+                @nextPage="pageChangeHandle('next')"
34 
+                @previousPage="pageChangeHandle('previous')"
35 
+                @loadPage="pageChangeHandle"
36 
+              />
37 
+            </div>
38 
+            <div class="p-2">
39 
+              <div class="d-flex flex-row">
40 
+                <div>
41 
+                  <select
42 
+                    class="form-control"
43 
+                    id="agent"
44 
+                    name="agent"
45 
+                    v-model="visibleItemsPerPageCount"
46 
+                    @change="onChangeItemsPerPage()"
47 
+                  >
48 
+                    <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
49 
+                  </select>
50 
+                </div>
51 
+              </div>
52 
+            </div>
53 
+          </div>
54 
+        </div>
55 
+      </div>
56 
+    </div>
57 
+  </div>
58 
+</template>
59 
+
60 
+<script>
61 
+import _ from "lodash";
62 
+import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
63 
+import BasePagination from "../shared/basePagination.vue";
64 
+
65 
+export default {
66 
+  components: {
67 
+    BasePagination
68 
+  },
69 
+  mounted() {
70 
+    try {
71 
+      // to assign initial value to itemsPerPage
72 
+      if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
73 
+        const [startItem] = this.itemsPerPageList;
74 
+        this.visibleItemsPerPageCount = startItem;
75 
+      }
76 
+    } catch (error) {
77 
+      throw error;
78 
+    }
79 
+  },
80 
+  props: {
81 
+    items: undefined
82 
+  },
83 
+  data() {
84 
+    return {
85 
+      sortKey: "",
86 
+      reverse: false,
87 
+      searchItem: "",
88 
+      itemsPerPageList: ItemsPerPageList,
89 
+      visibleItemsPerPageCount: 0,
90 
+      currentPage: 1
91 
+    };
92 
+  },
93 
+  methods: {
94 
+    sortBy(sortKey) {
95 
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
96 
+      this.sortKey = sortKey;
97 
+    },
98 
+    async pageChangeHandle(value) {
99 
+      console.log(value);
100 
+      switch (value) {
101 
+        case "next":
102 
+          this.currentPage += 1;
103 
+          break;
104 
+        case "previous":
105 
+          this.currentPage -= 1;
106 
+          break;
107 
+        default:
108 
+          this.currentPage = value;
109 
+      }
110 
+    },
111 
+    onChangeItemsPerPage() {
112 
+      if (this.currentPage !== 1) {
113 
+        this.currentPage = 1;
114 
+      }
115 
+    }
116 
+  },
117 
+  computed: {
118 
+    SortDirection() {
119 
+      return this.reverse ? "desc" : "asc";
120 
+    },
121 
+    PageCount() {
122 
+      return this.visibleItemsPerPageCount !== 0
123 
+        ? Math.ceil(this.FilteredItems.length / this.visibleItemsPerPageCount)
124 
+        : 1;
125 
+    },
126 
+    Columns() {
127 
+      const list = [];
128 
+      if (this.items) {
129 
+        for (const i in Object.keys(this.items)) {
130 
+          const item = this.items[i];
131 
+          for (const o in Object.keys(item)) {
132 
+            if (
133 
+              !list.includes(Object.keys(item)[o]) &&
134 
+              !Array.isArray(Object.values(item)[o])
135 
+            ) {
136 
+              list.push(Object.keys(item)[o]);
137 
+            }
138 
+          }
139 
+        }
140 
+      }
141 
+      return list;
142 
+    },
143 
+    FilteredItems() {
144 
+      const list = _.filter(this.items, item =>
145 
+        Object.values(item).some(
146 
+          i =>
147 
+            JSON.stringify(i)
148 
+              .toLowerCase()
149 
+              .indexOf(this.searchItem) > -1
150 
+        )
151 
+      );
152 
+      return _.orderBy(list, this.sortKey, this.SortDirection);
153 
+    },
154 
+    DisplayItems() {
155 
+      const list = this.FilteredItems;
156 
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
157 
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
158 
+      if (endSlice > list.length) {
159 
+        endSlice = list.length;
160 
+      }
161 
+      return list.slice(startSlice, endSlice);
162 
+    }
163 
+  }
164 
+};
165 
+</script>
166 
+<style scoped>
167 
+th[draggable] a,
168 
+th[draggable] {
169 
+  cursor: move;
170 
+}
171 
+th[draggable] a:hover,
172 
+th[draggable] a {
173 
+  display: block;
174 
+  text-decoration: none;
175 
+  color: #333333;
176 
+}
177 
+.drag {
178 
+  background-color: rgba(0, 255, 0, 0.35);
179 
+  opacity: 0.25;
180 
+}
181 
+.dnd-drag {
182 
+  opacity: 0.25;
183 
+}
184 
+.over {
185 
+  background-color: rgba(0, 0, 255, 0.35);
186 
+}
187 
+</style>

+ 9
- 12
src/components/shared/navBar.vue Voir le fichier 

@@ -208,9 +208,6 @@
208 208 
               </span>
209 209 
               <span v-else></span>
210 210 
             </li>
211 
-            <li class="nav-item dropdown">
212 
-              <a class="nav-link" @click="routerGoTo('/test')" role="button">Test</a>
213 
-            </li>
214 211 
           </ul>
215 212 
         </div>
216 213 
       </div>
 
@@ -230,7 +227,7 @@
230 227 
 </template>
231 228
232 229 
 <script>
233 
-import { mapGetters, mapActions } from 'vuex';
230 
+import { mapGetters, mapActions } from "vuex";
234 231
235 232 
 export default {
236 233 
   data() {
 
@@ -238,23 +235,23 @@ export default {
238 235 
   },
239 236 
   computed: {
240 237 
     showLogout() {
241 
-      return this.$store.state.authentication.status === 'success';
238 
+      return this.$store.state.authentication.status === "success";
242 239 
     },
243 240 
     hideLogin() {
244 
-      return this.$store.state.authentication.status !== 'success';
241 
+      return this.$store.state.authentication.status !== "success";
245 242 
     },
246 243 
     Logout() {
247 244 
       return this.$store.state.authentication.methods.logout;
248 
-    },
245 
+    }
249 246 
   },
250 247
251 248 
   methods: {
252 
-    ...mapGetters('authentication', ['isLoggedIn']),
253 
-    ...mapActions('authentication', ['logout']),
249 
+    ...mapGetters("authentication", ["isLoggedIn"]),
250 
+    ...mapActions("authentication", ["logout"]),
254 251
255 252 
     routerGoTo(goTo) {
256 
-      this.$emit('routerGoTo', goTo);
257 
-    },
258 
-  },
253 
+      this.$emit("routerGoTo", goTo);
254 
+    }
255 
+  }
259 256 
 };
260 257 
 </script>

+ 0
- 119
src/components/test.vue Voir le fichier 

@@ -1,119 +0,0 @@
1 
-<template>
2 
-  <div>
3 
-    <div class="container">
4 
-      <br />
5 
-      <br />
6 
-      <br />
7 
-      <br />
8 
-      <br />
9 
-      <br />
10 
-      <br />
11 
-      <div class="row">
12 
-        <div class="col-md-12">
13 
-          <input
14 
-            v-model="searchItem"
15 
-            class="form-control"
16 
-            placeholder="Filter users by name or age"
17 
-          />
18 
-          {{sortKey}}
19 
-          {{reverse}}
20 
-          <table class="table table-bordered table-hover">
21 
-            <thead>
22 
-              <tr class="dnd-moved">
23 
-                <th v-for="(column, c) in Columns" :key="c">
24 
-                  <div @click="sortBy(column)">{{column}}</div>
25 
-                </th>
26 
-              </tr>
27 
-            </thead>
28 
-            <tbody>
29 
-              <tr v-for="(item, i) in filteredUsers" :key="i" class="text-left dnd-moved">
30 
-                <td v-for="(column, c) in Columns" :key="c">{{item[column]}}</td>
31 
-              </tr>
32 
-            </tbody>
33 
-          </table>
34 
-        </div>
35 
-      </div>
36 
-    </div>
37 
-  </div>
38 
-</template>
39 
-
40 
-<script>
41 
-import _ from 'lodash';
42 
-
43 
-export default {
44 
-  created() {
45 
-    $('.table').dragableColumns({
46 
-      drag: true,
47 
-      dragClass: 'drag',
48 
-      overClass: 'over',
49 
-      movedContainerSelector: '.dnd-moved',
50 
-    });
51 
-  },
52 
-  data() {
53 
-    return {
54 
-      sortKey: '',
55 
-      reverse: false,
56 
-      searchItem: 'k',
57 
-      items: [
58 
-        { surname: 'Botha', name: 'Kobus' },
59 
-        { id: 2, name: 'Pieter' },
60 
-        { id: 3, name: 'George', sex: 'male' },
61 
-        { id: 4, name: 'Lene', age: 34 },
62 
-      ],
63 
-    };
64 
-  },
65 
-  methods: {
66 
-    sortBy(sortKey) {
67 
-      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
68 
-      this.sortKey = sortKey;
69 
-    },
70 
-  },
71 
-  computed: {
72 
-    SortDirection() {
73 
-      return this.reverse ? 'desc' : 'asc';
74 
-    },
75 
-    Columns() {
76 
-      const list = [];
77 
-      for (const i in this.items) {
78 
-        const item = this.items[i];
79 
-        for (const o in Object.keys(item)) {
80 
-          if (!list.includes(Object.keys(item)[o])) {
81 
-            list.push(Object.keys(item)[o]);
82 
-          }
83 
-        }
84 
-      }
85 
-      return list;
86 
-    },
87 
-    filteredUsers() {
88 
-      const list = this.items.filter(item => Object.values(item).some(
89 
-          i => JSON.stringify(i)
90 
-              .toLowerCase()
91 
-              .indexOf(this.searchItem) > -1,
92 
-        ),);
93 
-      return _.orderBy(list, this.sortKey, this.SortDirection);
94 
-    },
95 
-  },
96 
-};
97 
-</script>
98 
-<style scoped>
99 
-th[draggable] a,
100 
-th[draggable] {
101 
-  cursor: move;
102 
-}
103 
-th[draggable] a:hover,
104 
-th[draggable] a {
105 
-  display: block;
106 
-  text-decoration: none;
107 
-  color: #333333;
108 
-}
109 
-.drag {
110 
-  background-color: rgba(0, 255, 0, 0.35);
111 
-  opacity: 0.25;
112 
-}
113 
-.dnd-drag {
114 
-  opacity: 0.25;
115 
-}
116 
-.over {
117 
-  background-color: rgba(0, 0, 255, 0.35);
118 
-}
119 
-</style>

+ 176
- 183
src/router/index.js Voir le fichier 

@@ -43,8 +43,6 @@ import Offer from '../components/processFlow/offers.vue';
43 43 
 import searchLog from '../components/admin/logs/SearchLogs.vue';
44 44 
 // import store from '../store';
45 45
46 
-import test from '../components/test.vue';
47 
-
48 46 
 Vue.use(Router);
49 47
50 48 
 export default new Router({
 
@@ -55,186 +53,181 @@ export default new Router({
55 53 
     };
56 54 
   },
57 55 
   routes: [{
58 
-    path: '/',
59 
-    name: 'Home',
60 
-    component: HomePage,
61 
-  },
62 
-  {
63 
-    path: '/test',
64 
-    name: 'test',
65 
-    component: test,
66 
-  },
67 
-  {
68 
-    path: '/about/us',
69 
-    name: 'aboutus',
70 
-    component: AboutUs,
71 
-  },
72 
-  {
73 
-    path: '/about/timeshare',
74 
-    name: 'abouttimeshare',
75 
-    component: AboutTimeshare,
76 
-  },
77 
-  {
78 
-    path: '/timeshare/sell',
79 
-    name: 'TimeshareSell',
80 
-    component: TimeshareSell,
81 
-  },
82 
-  {
83 
-    path: '/timeshare/buy',
84 
-    name: 'TimeshareBuy',
85 
-    component: TimeshareBuy,
86 
-  },
87 
-  {
88 
-    path: '/timeshare/faq',
89 
-    name: 'TimeshareFAQ',
90 
-    component: TimeshareFAQ,
91 
-  },
92 
-  {
93 
-    path: '/user/login',
94 
-    name: 'Login',
95 
-    component: Login,
96 
-  },
97 
-  {
98 
-    path: '/user/register',
99 
-    name: 'PrivateIndividual',
100 
-    component: PrivateIndividual,
101 
-  },
102 
-  {
103 
-    path: '/user/registeragency',
104 
-    name: 'Agency',
105 
-    component: Agency,
106 
-  },
107 
-  {
108 
-    path: '/property/property/:id',
109 
-    name: 'PropertyPage',
110 
-    component: PropertyPage,
111 
-  },
112 
-  {
113 
-    path: '/property/:propertyUsageType/search',
114 
-    name: 'PropertySearch',
115 
-    component: PropertySearch,
116 
-  },
117 
-  {
118 
-    path: '/property/search',
119 
-    name: 'PropertySearchTab',
120 
-    component: PropertySearch,
121 
-  },
122 
-  {
123 
-    path: '/property/:propType/:saleType',
124 
-    name: 'PropertyNew',
125 
-    component: PropertyEdit,
126 
-  },
127 
-  {
128 
-    path: '/property/edit/:id/:propType/:saleType',
129 
-    name: 'PropertyEdit',
130 
-    component: PropertyEdit,
131 
-  },
132 
-  {
133 
-    path: '/property/list/:propertyType/:user',
134 
-    name: 'PropertyList',
135 
-    component: PropertyList,
136 
-  },
137 
-  {
138 
-    path: '/propertyTypes/list',
139 
-    name: 'PropertyTypeList',
140 
-    component: PropertyTypeList,
141 
-  },
142 
-  {
143 
-    path: '/propertyType/new',
144 
-    name: 'PropertyTypeNew',
145 
-    component: PropertyType,
146 
-  },
147 
-  {
148 
-    path: '/propertyType/:id',
149 
-    name: 'PropertyTypeEdit',
150 
-    component: PropertyType,
151 
-  },
152 
-  {
153 
-    path: '/userDefinedGroups/list',
154 
-    name: 'UserDefinedGroupsList',
155 
-    component: UserDefinedGroups,
156 
-  },
157 
-  {
158 
-    path: '/userDefinedGroups/userDefinedGroup/:id',
159 
-    name: 'UserDefinedGroupEdit',
160 
-    component: UserDefinedGroup,
161 
-  },
162 
-  {
163 
-    path: '/userDefinedGroups/userDefinedGroup',
164 
-    name: 'UserDefinedGroupNew',
165 
-    component: UserDefinedGroup,
166 
-  },
167 
-  {
168 
-    path: '/status/list',
169 
-    name: 'StatusList',
170 
-    component: Status,
171 
-  },
172 
-  {
173 
-    path: '/status/timeshareAdmin',
174 
-    name: 'TimeshareAdmin',
175 
-    component: timeshareAdminPage,
176 
-  },
177 
-  {
178 
-    path: '/status/tenderWeekAdmin',
179 
-    name: 'TenderWeekAdmin',
180 
-    component: tenderWeekAdminPage,
181 
-  },
182 
-  {
183 
-    path: '/status/userManagementPage',
184 
-    name: 'userManagementPage',
185 
-    component: userManagementPage,
186 
-  },
187 
-  {
188 
-    path: '/status/changeLogPage',
189 
-    name: 'changeLogPage',
190 
-    component: changeLogPage,
191 
-  },
192 
-  {
193 
-    path: '/unitConfiguration/list',
194 
-    name: 'UnitConfiguration',
195 
-    component: UnitConfiguration,
196 
-  },
197 
-  {
198 
-    path: '/contactus',
199 
-    name: 'ContactUs',
200 
-    component: ContactUs,
201 
-  },
202 
-  {
203 
-    path: '/privacypolicy',
204 
-    name: 'PrivacyPolicy',
205 
-    component: PrivacyPolicy,
206 
-  },
207 
-  {
208 
-    path: '/resort/:resortCode',
209 
-    name: 'ResortPage',
210 
-    component: ResortPage,
211 
-    props: true,
212 
-  },
213 
-  {
214 
-    path: '/resort/:resortCode/:weekId',
215 
-    name: 'UnitPage',
216 
-    component: UnitPage,
217 
-    props: true,
218 
-  },
219 
-  {
220 
-    path: '/MakeOffer',
221 
-    name: 'MakeOffer',
222 
-    component: MakeOffer,
223 
-  },
224 
-  {
225 
-    path: '/Offers',
226 
-    name: 'Offers',
227 
-    component: Offer,
228 
-  },
229 
-  {
230 
-    path: '/timeshare/search',
231 
-    name: 'TimeshareSearch',
232 
-    component: TimeshareSearch,
233 
-  },
234 
-  {
235 
-    path: '/searchLog',
236 
-    name: 'SearchLog',
237 
-    component: searchLog,
238 
-  },
56 
+      path: '/',
57 
+      name: 'Home',
58 
+      component: HomePage,
59 
+    },
60 
+    {
61 
+      path: '/about/us',
62 
+      name: 'aboutus',
63 
+      component: AboutUs,
64 
+    },
65 
+    {
66 
+      path: '/about/timeshare',
67 
+      name: 'abouttimeshare',
68 
+      component: AboutTimeshare,
69 
+    },
70 
+    {
71 
+      path: '/timeshare/sell',
72 
+      name: 'TimeshareSell',
73 
+      component: TimeshareSell,
74 
+    },
75 
+    {
76 
+      path: '/timeshare/buy',
77 
+      name: 'TimeshareBuy',
78 
+      component: TimeshareBuy,
79 
+    },
80 
+    {
81 
+      path: '/timeshare/faq',
82 
+      name: 'TimeshareFAQ',
83 
+      component: TimeshareFAQ,
84 
+    },
85 
+    {
86 
+      path: '/user/login',
87 
+      name: 'Login',
88 
+      component: Login,
89 
+    },
90 
+    {
91 
+      path: '/user/register',
92 
+      name: 'PrivateIndividual',
93 
+      component: PrivateIndividual,
94 
+    },
95 
+    {
96 
+      path: '/user/registeragency',
97 
+      name: 'Agency',
98 
+      component: Agency,
99 
+    },
100 
+    {
101 
+      path: '/property/property/:id',
102 
+      name: 'PropertyPage',
103 
+      component: PropertyPage,
104 
+    },
105 
+    {
106 
+      path: '/property/:propertyUsageType/search',
107 
+      name: 'PropertySearch',
108 
+      component: PropertySearch,
109 
+    },
110 
+    {
111 
+      path: '/property/search',
112 
+      name: 'PropertySearchTab',
113 
+      component: PropertySearch,
114 
+    },
115 
+    {
116 
+      path: '/property/:propType/:saleType',
117 
+      name: 'PropertyNew',
118 
+      component: PropertyEdit,
119 
+    },
120 
+    {
121 
+      path: '/property/edit/:id/:propType/:saleType',
122 
+      name: 'PropertyEdit',
123 
+      component: PropertyEdit,
124 
+    },
125 
+    {
126 
+      path: '/property/list/:propertyType/:user',
127 
+      name: 'PropertyList',
128 
+      component: PropertyList,
129 
+    },
130 
+    {
131 
+      path: '/propertyTypes/list',
132 
+      name: 'PropertyTypeList',
133 
+      component: PropertyTypeList,
134 
+    },
135 
+    {
136 
+      path: '/propertyType/new',
137 
+      name: 'PropertyTypeNew',
138 
+      component: PropertyType,
139 
+    },
140 
+    {
141 
+      path: '/propertyType/:id',
142 
+      name: 'PropertyTypeEdit',
143 
+      component: PropertyType,
144 
+    },
145 
+    {
146 
+      path: '/userDefinedGroups/list',
147 
+      name: 'UserDefinedGroupsList',
148 
+      component: UserDefinedGroups,
149 
+    },
150 
+    {
151 
+      path: '/userDefinedGroups/userDefinedGroup/:id',
152 
+      name: 'UserDefinedGroupEdit',
153 
+      component: UserDefinedGroup,
154 
+    },
155 
+    {
156 
+      path: '/userDefinedGroups/userDefinedGroup',
157 
+      name: 'UserDefinedGroupNew',
158 
+      component: UserDefinedGroup,
159 
+    },
160 
+    {
161 
+      path: '/status/list',
162 
+      name: 'StatusList',
163 
+      component: Status,
164 
+    },
165 
+    {
166 
+      path: '/status/timeshareAdmin',
167 
+      name: 'TimeshareAdmin',
168 
+      component: timeshareAdminPage,
169 
+    },
170 
+    {
171 
+      path: '/status/tenderWeekAdmin',
172 
+      name: 'TenderWeekAdmin',
173 
+      component: tenderWeekAdminPage,
174 
+    },
175 
+    {
176 
+      path: '/status/userManagementPage',
177 
+      name: 'userManagementPage',
178 
+      component: userManagementPage,
179 
+    },
180 
+    {
181 
+      path: '/status/changeLogPage',
182 
+      name: 'changeLogPage',
183 
+      component: changeLogPage,
184 
+    },
185 
+    {
186 
+      path: '/unitConfiguration/list',
187 
+      name: 'UnitConfiguration',
188 
+      component: UnitConfiguration,
189 
+    },
190 
+    {
191 
+      path: '/contactus',
192 
+      name: 'ContactUs',
193 
+      component: ContactUs,
194 
+    },
195 
+    {
196 
+      path: '/privacypolicy',
197 
+      name: 'PrivacyPolicy',
198 
+      component: PrivacyPolicy,
199 
+    },
200 
+    {
201 
+      path: '/resort/:resortCode',
202 
+      name: 'ResortPage',
203 
+      component: ResortPage,
204 
+      props: true,
205 
+    },
206 
+    {
207 
+      path: '/resort/:resortCode/:weekId',
208 
+      name: 'UnitPage',
209 
+      component: UnitPage,
210 
+      props: true,
211 
+    },
212 
+    {
213 
+      path: '/MakeOffer',
214 
+      name: 'MakeOffer',
215 
+      component: MakeOffer,
216 
+    },
217 
+    {
218 
+      path: '/Offers',
219 
+      name: 'Offers',
220 
+      component: Offer,
221 
+    },
222 
+    {
223 
+      path: '/timeshare/search',
224 
+      name: 'TimeshareSearch',
225 
+      component: TimeshareSearch,
226 
+    },
227 
+    {
228 
+      path: '/searchLog',
229 
+      name: 'SearchLog',
230 
+      component: searchLog,
231 
+    },
239 232 
   ],
240 233 
 });

Écrire Aperçu
Chargement…
Annuler
Enregistrer