vuetify options computed helper coded

Author: AMontagu

src/useDatatableUrlSync.ts

@@ -4,14 +4,18 @@ import {
   generateQueryFromObject,
   convertParamIfTypeInSchema,
   getRemovedKeyBetweenTwoObject,
-  //getDefaultValueForParam
+  getDefaultValueForParam
 } from "./utils/listPaginatedTools";
+import {
+  getSortsArrayFromOrdering,
+  getOrderingFromSortArray
+} from "./utils/helpers";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
 
-import { ref, watch, nextTick } from 'vue-demi'
+import { ref, watch, nextTick, computed } from 'vue-demi'
 import { useRoute, useRouter } from 'vue-router'
-import {GenericDictionnary, VDUSConfiguration} from "./utils/VDUSTypes"
+import {GenericDictionnary, VDUSConfiguration, VuetifyOptions} from "./utils/VDUSTypes"
 
 /*
 DOC here on params and return value
@@ -50,6 +54,45 @@ export default function useDatatableUrlSync(form: GenericDictionnary, fetchDatas
     localQuery = triggerSearchIfNeeded(isFilter, getDatas);
   }, configurations?.debounceTime || 0);
 
+  // ----------------------------- COMPUTED ---------------------------
+
+  const vuetifyOptions = computed({
+    get: ():VuetifyOptions => {
+      let vuetifyOptions:VuetifyOptions = {
+        page: 1,
+        itemsPerPage: 10,
+        sortBy: [],
+        sortDesc: [],
+        groupBy: [],
+        groupDesc: [],
+        multiSort: false,
+        mustSort: false
+      };
+
+      vuetifyOptions.page = options.page ?? getDefaultValueForParam("page", formSchema);
+      vuetifyOptions.itemsPerPage = options.page_size ?? getDefaultValueForParam("page_size", formSchema);
+
+      let ordering:Array<string> =
+        Array.isArray(options.ordering) &&
+        options.ordering.length > 0
+          ? options.ordering
+          : getDefaultValueForParam("ordering", formSchema);
+
+      let { sortBy, sortDesc } = getSortsArrayFromOrdering(ordering);
+
+      vuetifyOptions.sortBy = sortBy;
+      vuetifyOptions.sortDesc = sortDesc;
+
+      return 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)
+    }
+  })
+
   // ----------------------------- WATCH ------------------------------
   watch(form, () => {
     debounceSearch(true);

src/utils/VDUSTypes.ts

@@ -8,4 +8,20 @@ type VDUSConfiguration = {
   extraQueryParams: GenericDictionnary
 }
 
-export {GenericDictionnary, VDUSConfiguration}
+type VuetifySortArraysObject = {
+  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
+}
+
+export {GenericDictionnary, VDUSConfiguration, VuetifySortArraysObject, VuetifyOptions}

src/utils/helpers.ts

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

vue2-example/package-lock.json

@@ -11,7 +11,7 @@
     "@vue/composition-api": "^1.0.0-rc.5",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-datatable-url-sync": "^1.0.2",
+    "vue-datatable-url-sync": "^1.0.3",
     "vue-router": "^3.2.0",
     "vuetify": "^2.4.0"
   },

vue2-example/package.json

@@ -1,12 +1,22 @@
 <template>
   <v-container>
     <v-row class="text-center">
+      <v-col cols="12">
+        <v-text-field
+          v-model="search"
+          append-icon="mdi-magnify"
+          label="Search"
+          single-line
+          hide-details
+        ></v-text-field>
+      </v-col>
       <v-col cols="12">
         <v-data-table
           :headers="headers"
           :items="fakeData"
-          :items-per-page="5"
+          :options.sync="vuetifyOptions"
           class="elevation-1"
+          :search="search"
         ></v-data-table>
       </v-col>
     </v-row>
@@ -16,6 +26,8 @@
 <script>
 import useDatatableUrlSync from 'vue-datatable-url-sync';
 import fakeData from "./data";
+import { ref } from '@vue/composition-api'
+
 export default {
   name: 'HelloWorld',
 
@@ -26,5 +38,17 @@ export default {
     ],
     fakeData
   }),
+  setup () {
+    // --------------------- DATA ------------------------------------
+    const form = ref({
+      search: ""
+    })
+    const options = ref({
+        page: 1,
+        page_size: 10,
+        ordering: []
+    })
+    const items = ref<any>([])
+  }
 }
 </script>

vue2-example/src/components/HelloWorld.vue

@@ -2,6 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import vuetify from './plugins/vuetify';
+import VueCompositionAPI from '@vue/composition-api'
+
+Vue.use(VueCompositionAPI)
 
 Vue.config.productionTip = false