adminforth 1.3.54-next.5 → 1.3.54-next.6

package/dataConnectors/clickhouse.ts

@@ -266,7 +266,6 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
       const where = this.whereClause(resource, filters);
       const d = this.whereParams(filters);
 
-      
       const countQ = await this.client.query({
         query: `SELECT COUNT(*) as count FROM ${tableName} ${where}`,
         format: 'JSONEachRow',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.54-next.5",
+  "version": "1.3.54-next.6",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/components/ResourceListTable.vue

@@ -250,7 +250,7 @@
 <script setup>
 
 
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { callAdminForthApi } from '@/utils';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
@@ -260,19 +260,20 @@ import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 
 import {
-IconInboxOutline,
+  IconInboxOutline,
 } from '@iconify-prerendered/vue-flowbite';
 
 import {
-IconEyeSolid,
-IconPenSolid,
-IconTrashBinSolid
+  IconEyeSolid,
+  IconPenSolid,
+  IconTrashBinSolid
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 
 const coreStore = useCoreStore();
 
 const props = defineProps([
+  'page',
   'resource', 
   'rows',
   'totalRows',
@@ -296,6 +297,7 @@ const page = ref(1);
 const sort = ref([]);
 
 
+
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);
 });
@@ -319,6 +321,10 @@ watch(() => props.sort, (newSort) => {
   sort.value = newSort;
 });
 
+watch(() => props.page, (newPage) => {
+  page.value = newPage;
+});
+
 function addToCheckedValues(id) {
   console.log('checking', checkboxesInternal.value, 'id', id)
   if (checkboxesInternal.value.includes(id)) {

package/spa/src/renderers/CompactUUID.vue

@@ -0,0 +1,15 @@
+<template>
+  {{ visualValue }}
+</template>
+
+<script setup>  
+
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+
+const visualValue = computed(() => {
+  return record[column.name];
+});
+
+const props = defineProps(['column', 'record', 'meta']);
+
+</script>

package/spa/src/utils.ts

@@ -146,4 +146,15 @@ export function applyRegexValidation(value: any, validation: ValidationObject[]
       }
     }
   }
+}
+
+export function currentQuery() {
+  return router.currentRoute.value.query;
+}
+
+export function setQuery(query: any) {
+  const currentQuery = { ...router.currentRoute.value.query, ...query };
+  router.replace({
+    query: currentQuery,
+  });
 }

package/spa/src/views/ListView.vue

@@ -89,6 +89,7 @@
     <ResourceListTable
       :resource="coreStore.resource"
       :rows="rows"
+      :page="page"
       @update:page="page = $event"
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
@@ -115,7 +116,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useFiltersStore } from '@/stores/filters';
-import { callAdminForthApi, getIcon } from '@/utils';
+import { callAdminForthApi, currentQuery, getIcon, setQuery } from '@/utils';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
@@ -227,6 +228,18 @@ async function startBulkAction(actionId) {
 }
 
 
+class SortQuerySerializer {
+    static serialize(sort) {
+        return sort.map(s => `${s.field}__${s.direction}`).join(',');
+    }
+    static deserialize(str) {
+        return str.split(',').map(s => {
+            const [field, direction] = s.split('__');
+            return { field, direction };
+        });
+    }
+}
+
 
 async function init() {
   
@@ -236,9 +249,26 @@ async function init() {
 
   initFlowbite();
 
-  // !!! clear filters should be in same tick with sort assignment so that watch can catch it
-  filtersStore.clearFilters();
-  if (coreStore.resource.options?.defaultSort) {
+  // !!! clear filters should be in same tick with sort assignment so that watch can catch it as one change
+
+  // try to init filters from query params
+  const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
+    const [_, field, operator] = k.split('__');
+    return {
+      field,
+      operator,
+      value: decodeURIComponent(route.query[k])
+    }
+  });
+  if (filters.length) {
+    filtersStore.setFilters(filters);
+  } else {
+    filtersStore.clearFilters();
+  }
+
+  if (route.query.sort) {
+    sort.value = SortQuerySerializer.deserialize(route.query.sort);
+  } else if (coreStore.resource.options?.defaultSort) {
     sort.value = [{
         field: coreStore.resource.options.defaultSort.columnName,
         direction: coreStore.resource.options.defaultSort.direction
@@ -246,6 +276,11 @@ async function init() {
   } else {
     sort.value = [];
   }
+  // page init should be also in same tick 
+  if (route.query.page) {
+    page.value = parseInt(route.query.page);
+  }
+
   // await getList(); - Not needed here, watch will trigger it
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
@@ -257,6 +292,8 @@ async function init() {
 }
 
 watch([page, sort, () => filtersStore.filters], async () => {
+  console.log('🔄️ page/sort/filter change fired, page:', page.value);
+
   await getList();
 }, { deep: true });
 
@@ -264,16 +301,51 @@ window.adminforth.list.refresh = async () => {
   await getList();
 }
 
+let initInProcess = false;
+
 watch(() => filtersStore.filters, async (to, from) => {
+  if (initInProcess) {
+    return;
+  }
+  console.log('🔄️ filters changed', JSON.stringify(to))
   page.value = 1;
   checkboxes.value = [];
+  // update query param for each filter as filter_<column_name>=value
+  const query = {};
+  const currentQ = currentQuery();
+  filtersStore.filters.forEach(f => {
+    query[`filter__${f.field}__${f.operator}`] = encodeURIComponent(f.value);
+  });
+  // set every key in currentQ which starts with filter_ to undefined if it is not in query
+  Object.keys(currentQ).forEach(k => {
+    if (k.startsWith('filter_') && !query[k]) {
+      query[k] = undefined;
+    }
+  });
+  setQuery(query);
 }, {deep: true});
 
 onMounted(async () => {
+  initInProcess = true;
   await init();
   initThreeDotsDropdown();
+  initInProcess = false;
+});
+
+watch([page], async () => {
+  setQuery({ page: page.value });
 });
 
 
 
+
+watch([sort], async () => {
+  if (!sort.value.length) {
+    setQuery({ sort: undefined });
+    return;
+  }
+  setQuery({ sort: SortQuerySerializer.serialize(sort.value) });
+});
+
+
 </script>