Merge pull request #183 from HC200ok/Fix/filter-pagination

fix filter pagination
HC200ok · Dec 10, 2022 · cc507c1 · cc507c1
2 parents f26f9b3 + 505fa04
commit cc507c1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.5.21",
+  "version": "1.5.22",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [
@@ -58,3 +58,5 @@
     "vue-tsc": "^0.34.7"
   }
 }
+
+
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <ServerSideMode />
+  <!-- <ServerSideMode /> -->
   <br><br>
   <ClientMode />
   <br><br>
-  <ExpandLoading/>
+  <!-- <ExpandLoading/> -->
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
@@ -564,7 +564,7 @@ watch(rowsPerPageRef, (value) => {
   }
 });
 
-watch(searchValue, () => {
+watch([searchValue, filterOptions], () => {
   if (!isServerSideMode.value) {
     updatePage(1);
   }

diff --git a/src/modes/Client.vue b/src/modes/Client.vue
@@ -1,12 +1,11 @@
 <template>
   <span>search field:</span>
-  <select v-model="searchField">
+  <!-- <select v-model="searchField">
     <option>name</option>
     <option>indicator.weight</option>
-  </select>
-
-  <br/>
+  </select> -->
 
+  <br/>
   <span>search value: </span>
   <input type="text" v-model="searchValue">
   <div>
@@ -83,53 +82,6 @@
         <span>body.append</span>
       </template>
     </DataTable>
-
-    <!-- <div class="customize-footer">
-      <div class="customize-rows-per-page">
-        <select
-          class="select-items"
-          @change="updateRowsPerPageSelect"
-        >
-          <option
-            v-for="item in rowsPerPageOptions"
-            :key="item"
-            :selected="item === rowsPerPageActiveOption"
-            :value="item"
-          >
-            {{ item }} rows per page
-          </option>
-        </select>
-      </div>
-      <div class="customize-index">
-        Now displaying: {{ currentPageFirstIndex }} ~ {{ currentPageLastIndex }} of {{ totalItemsLength }}
-      </div>
-      <div class="customize-buttons">
-        <span
-          v-for="paginationNumber in maxPaginationNumber"
-          class="customize-button"
-          :class="{'active': paginationNumber === currentPaginationNumber}"
-          @click="updatePage(paginationNumber)"
-        >
-          {{ paginationNumber }}
-        </span>
-      </div>
-      <div class="customize-pagination">
-        <button
-          class="prev-page"
-          :disabled="isFirstPage"
-          @click="prevPage"
-        >
-          prev page
-        </button>
-        <button
-          class="next-page"
-          :disabled="isLastPage"
-          @click="nextPage"
-        >
-          next page
-        </button>
-      </div>
-    </div> -->
   </div>
 </template>
 
@@ -157,17 +109,8 @@ const switchToNested300 = () => {
 const switchToNested = () => {
   items.value = mockClientNestedItems(100);
 };
-
-const filterOptions = [
-  {
-    field: 'indicator.height',
-    comparison: (value: string, criteria: string) => value === criteria,
-    criteria: '6-9',
-  },
-];
-
 const headers: Header[] = [
-  { text: "PLAYER", value: "player" },
+  { text: "Name", value: "name" },
   { text: "TEAM", value: "team"},
   { text: "NUMBER", value: "number", sortable: true},
   { text: "POSITION", value: "position"},
@@ -185,11 +128,21 @@ const updateFilter = (items: Item[]) => {
 };
 
 const items = ref<Item[]>([
-  { player: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
-  { player: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
-  { player: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
-  { player: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
-  { player: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
+  { name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
+  { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
+  { name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
+  { name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
+  { name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
+  { name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
+  { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
+  { name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
+  { name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
+  { name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
+  { name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
+  { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
+  { name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
+  { name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
+  { name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
 ]);
 
 // const items = ref<Item[]>(mockClientItems());
@@ -228,28 +181,17 @@ const favouriteSportCriteria = ref('all');
 const showNameFilter = ref(false);
 const nameCriteria = ref('');
 
-// const filterOptions = computed((): FilterOption[] => {
-//   const filterOptionsArray: FilterOption[] = [];
-//   if (favouriteSportCriteria.value !== 'all') {
-//     filterOptionsArray.push({
-//       field: 'favouriteSport',
-//       comparison: '=',
-//       criteria: favouriteSportCriteria.value,
-//     });
-//   }
-//   filterOptionsArray.push({
-//     field: 'age',
-//     comparison: 'between',
-//     criteria: ageCriteria.value,
-//   });
-//   filterOptionsArray.push({
-//     field: 'name',
-//     criteria: nameCriteria.value,
-//     comparison: (value, criteria): boolean => (value != null
-//       && value.includes(`name-${criteria}`)),
-//   });
-//   return filterOptionsArray;
-// });
+const filterOptions = computed((): FilterOption[] => {
+  const filterOptionsArray: FilterOption[] = [];
+  filterOptionsArray.push({
+    field: 'name',
+    criteria: nameCriteria.value,
+    comparison: (value, criteria): boolean => (value != null
+      && value.includes(criteria)),
+  });
+  return filterOptionsArray;
+});
+
 const bodyRowClassNameFunction: BodyRowClassNameFunction = (item: Item, index: number): string => (index === 0 ? 'first-row test-row' : '');
 const bodyExpandRowClassNameFunction: BodyRowClassNameFunction = (item: Item, index: number): string => 'expand-row';