fix(vue2): router as param because not supported in vue 2

Author: AMontagu

src/useDatatableUrlSync.ts

@@ -14,13 +14,12 @@ import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
 
 import { ref, watch, nextTick, computed } from 'vue-demi'
-import { useRoute, useRouter } from 'vue-router'
 import {GenericDictionnary, VDUSConfiguration, VuetifyOptions} from "./utils/VDUSTypes"
 
 /*
 DOC here on params and return value
 */
-export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas: Function, options: GenericDictionnary, formSchema?: GenericDictionnary, initializeForm?: Function, configurations?: VDUSConfiguration) { 
+export default function useDatatableUrlSync(route: any, router: any, form: GenericDictionnary, fetchDatas: Function, options: GenericDictionnary, formSchema?: GenericDictionnary, initializeForm?: Function, configurations?: VDUSConfiguration) { 
 
   // ----------------------------- DEFAULTING PARAMS ------------------------------
   configurations = {
@@ -42,9 +41,6 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
   }
 
   // ----------------------------- DATA ------------------------------
-  const route = useRoute();
-  const router = useRouter()
-
   let ignoredQueryParams: GenericDictionnary = {};
   let localQuery: GenericDictionnary = {};
   const loading = ref<boolean>(false);
@@ -57,8 +53,8 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
   // ----------------------------- COMPUTED ---------------------------
 
   const vuetifyOptions = computed({
-    get: ():VuetifyOptions => {
-      let vuetifyOptions:VuetifyOptions = {
+    get: (): VuetifyOptions => {
+      const vuetifyOptions: VuetifyOptions = {
         page: 1,
         itemsPerPage: 10,
         sortBy: [],
@@ -69,27 +65,27 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
         mustSort: false
       };
 
-      vuetifyOptions.page = options.page ?? getDefaultValueForParam("page", formSchema);
-      vuetifyOptions.itemsPerPage = options.page_size ?? getDefaultValueForParam("page_size", formSchema);
+      vuetifyOptions.page = options.value.page ?? getDefaultValueForParam("page", formSchema);
+      vuetifyOptions.itemsPerPage = options.value.page_size ?? getDefaultValueForParam("page_size", formSchema);
 
-      let ordering:Array<string> =
-        Array.isArray(options.ordering) &&
-        options.ordering.length > 0
-          ? options.ordering
+      const ordering: Array<string> =
+        Array.isArray(options.value.ordering) &&
+        options.value.ordering.length > 0
+          ? options.value.ordering
           : getDefaultValueForParam("ordering", formSchema);
 
-      let { sortBy, sortDesc } = getSortsArrayFromOrdering(ordering);
+      const { sortBy, sortDesc } = getSortsArrayFromOrdering(ordering);
 
       vuetifyOptions.sortBy = sortBy;
       vuetifyOptions.sortDesc = sortDesc;
 
       return vuetifyOptions;
     },
-    set: (newOptions:VuetifyOptions) => {
+    set: (newOptions: VuetifyOptions) => {
       // As we do not define options by default, to avoid reload from other component we doesn't want, we need to set data because they are not reactive
-      options.page = newOptions.page;
-      options.page_size = newOptions.itemsPerPage;
-      options.ordering = getOrderingFromSortArray(newOptions.sortBy, newOptions.sortDesc)
+      options.value.page = newOptions.page;
+      options.value.page_size = newOptions.itemsPerPage;
+      options.value.ordering = getOrderingFromSortArray(newOptions.sortBy, newOptions.sortDesc)
     }
   })
 
@@ -121,8 +117,8 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
   isFilter is true if it's a filter attribute taht changed. This allow us to reset the page number to 1
   This allow to fetch data in back end and apply the filter in the url query 
   */
-  const triggerSearchIfNeeded = (isFilter:boolean, triggerFunction:Function) => {
-    let newLocalQuery: GenericDictionnary = {
+  const triggerSearchIfNeeded = (isFilter: boolean, triggerFunction: Function) => {
+    const newLocalQuery: GenericDictionnary = {
       ...generateQueryFromObject(form.value, formSchema, true),
       ...generateQueryFromObject(options.value, formSchema, true)
     };
@@ -152,7 +148,7 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
 
     // As we have a local copy of the query without the prefix to help readability and developper experience
     // We need to set back the prefix before pushing
-    const newLocalQueryWithPrefix:GenericDictionnary = {};
+    const newLocalQueryWithPrefix: GenericDictionnary = {};
     Object.entries(newLocalQuery).forEach(([key, value]) => {
       newLocalQueryWithPrefix[configurations?.prefix + key] = value;
     });
@@ -170,7 +166,7 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
     try {
       loading.value = true;
 
-      const queryAsObject:GenericDictionnary = {
+      const queryAsObject: GenericDictionnary = {
         ...generateQueryFromObject(form.value, formSchema, false),
         ...generateQueryFromObject(options.value, formSchema, false),
         ...configurations?.extraQueryParams || {}
@@ -197,10 +193,10 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
   Doc
   */
   const getLocalCopyOfQueryUrl = () => {
-    let newLocalQuery: GenericDictionnary = {};
+    const newLocalQuery: GenericDictionnary = {};
     Object.keys(route.query).forEach(key => {
       // We remove the prefix for the local copy to be agnostic of it in the code
-      let keyWithoutPrefix = key.replace(configurations?.prefix || "", "");
+      const keyWithoutPrefix = key.replace(configurations?.prefix || "", "");
 
       // typeof undefined is important
       if (
@@ -256,7 +252,7 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
     ignoredQueryParams = {};
 
     // localQuery is the memory of the query in url to know when reload data.
-    let newLocalQuery = getLocalCopyOfQueryUrl();
+    const newLocalQuery = getLocalCopyOfQueryUrl();
 
     //To keep for debug please
     // console.log(
@@ -285,7 +281,7 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
 
     localQuery = newLocalQuery;
 
-    let { newForm, newOptions } = readFormAndOptionsFromLocalQuery(
+    const { newForm, newOptions } = readFormAndOptionsFromLocalQuery(
       localQuery,
       form.value,
       options.value,

src/utils/VDUSTypes.ts

@@ -1,27 +1,27 @@
 type GenericDictionnary = {
-  [key: string]: any
+  [key: string]: any;
 }
 type VDUSConfiguration = {
-  prefix: string,
-  debounceTime: number,
-  serveurDefaultPageSize: number,
-  extraQueryParams: GenericDictionnary
+  prefix: string;
+  debounceTime: number;
+  serveurDefaultPageSize: number;
+  extraQueryParams: GenericDictionnary;
 }
 
 type VuetifySortArraysObject = {
-  sortBy: Array<string>,
-  sortDesc: Array<boolean>
+  sortBy: Array<string>;
+  sortDesc: Array<boolean>;
 }
 
 type VuetifyOptions = {
-  page: number,
-  itemsPerPage: number,
-  sortBy: Array<string>,
-  sortDesc: Array<boolean>,
-  groupBy: Array<string>,
-  groupDesc: Array<boolean>,
-  multiSort: boolean,
-  mustSort: boolean
+  page: number;
+  itemsPerPage: number;
+  sortBy: Array<string>;
+  sortDesc: Array<boolean>;
+  groupBy: Array<string>;
+  groupDesc: Array<boolean>;
+  multiSort: boolean;
+  mustSort: boolean;
 }
 
 export {GenericDictionnary, VDUSConfiguration, VuetifySortArraysObject, VuetifyOptions}

src/utils/helpers.ts

@@ -1,33 +1,33 @@
 import {VuetifySortArraysObject} from "./VDUSTypes";
 
-export const elementToArrayOfInt = (element: any):Array<number> => {
+export const elementToArrayOfInt = (element: any): Array<number> => {
   return ["number", "string"].includes(typeof element)
     ? [parseInt(element)]
-    : element.map((item:any) => parseInt(item));
+    : element.map((item: any) => parseInt(item));
 };
 
 export const elementToArrayOfString = (element: any): Array<string> => {
   return element ? (typeof element === "string" ? [element] : element) : [];
 };
 
-export const extractBooleanValue = (value: any, defaultValue:boolean = true):boolean => {
+export const extractBooleanValue = (value: any, defaultValue = true): boolean => {
   return value ? value.toString() === "true" : defaultValue;
 };
 
-export const extractIntegerValue = (value:any, defaultValue:number = 0):number => {
+export const extractIntegerValue = (value: any, defaultValue = 0): number => {
   const parsed = parseInt(value);
   return isNaN(parsed) ? defaultValue : parsed;
 };
 
-export const getSortsArrayFromOrdering = (ordering:Array<string>):VuetifySortArraysObject => {
+export const getSortsArrayFromOrdering = (ordering: Array<string>): VuetifySortArraysObject => {
   if (!ordering) {
     return { sortBy: [], sortDesc: [] };
   }
-  let sortBy:Array<string> = [];
-  let sortDesc:Array<boolean> = [];
+  const sortBy: Array<string> = [];
+  const sortDesc: Array<boolean> = [];
 
   ordering.forEach(orderItem => {
-    let isDesc:boolean = false;
+    let isDesc = false;
     if (orderItem.startsWith("-")) {
       orderItem = orderItem.replace("-", "");
       isDesc = true;
@@ -39,10 +39,10 @@ export const getSortsArrayFromOrdering = (ordering:Array<string>):VuetifySortArr
   return { sortBy, sortDesc };
 }
 
-export const getOrderingFromSortArray = (sortBy:Array<string>, sortDesc:Array<boolean>):Array<string> => {
-  let ordering:Array<string> = [];
+export const getOrderingFromSortArray = (sortBy: Array<string>, sortDesc: Array<boolean>): Array<string> => {
+  const ordering: Array<string> = [];
   sortBy.forEach((orderItem, index) => {
-    let isDesc:boolean = true;
+    let isDesc = true;
     if (sortDesc.length > index) {
       isDesc = sortDesc[index];
     }

vue2-example/package.json

@@ -12,7 +12,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-datatable-url-sync": "^1.0.3",
-    "vue-router": "^3.2.0",
+    "vue-router": "^3.5.1",
     "vuetify": "^2.4.0"
   },
   "devDependencies": {

vue2-example/src/components/HelloWorld.vue

@@ -16,7 +16,7 @@
           :items="fakeData"
           :options.sync="vuetifyOptions"
           class="elevation-1"
-          :search="search"
+          :search="form.search"
         ></v-data-table>
       </v-col>
     </v-row>
@@ -26,6 +26,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import useDatatableUrlSync from 'vue-datatable-url-sync';
+//import useDatatableUrlSync from './useDatatableUrlSync';
 import { GenericDictionnary } from 'vue-datatable-url-sync/src/utils/VDUSTypes';
 import fakeData from "./data";
 import { ref } from '@vue/composition-api'
@@ -39,7 +40,7 @@ export default Vue.extend({
     ],
     fakeData
   }),
-  setup () {
+  setup (_, ctx) {
     // --------------------- DATA ------------------------------------
     const form = ref({
       search: ""
@@ -53,12 +54,13 @@ export default Vue.extend({
 
     // --------------------- METHODS ------------------------------------
     const fetchDatas = (queryParams: string, queryAsObject: GenericDictionnary) => {
-      console.log("icicicicic", queryParams, queryAsObject)
-      // items.value = fakeData
+      // Vuetify do all the front filtering for us so fetchDatas can be a dummy function. 
+      // If you are doing a backend filtering you have to adapt this function to fetch the data correctly filtered and paginated by your backend
+      console.log(queryParams, queryAsObject)
     }
 
     // --------------------- CREATED ------------------------------------
-    const {vuetifyOptions} = useDatatableUrlSync(form, fetchDatas, options)
+    const {vuetifyOptions} = useDatatableUrlSync(ctx.root.$route, ctx.root.$router, form, fetchDatas, options)
 
     // --------------------- INSTANCE ------------------------------------
     return {

vue2-example/src/shims-tsx.d.ts

@@ -7,7 +7,7 @@ declare global {
     // tslint:disable no-empty-interface
     interface ElementClass extends Vue {}
     interface IntrinsicElements {
-      [elem: string]: any
+      [elem: string]: any;
     }
   }
 }