adminforth 1.3.54-next.9 → 1.3.55-next.2

package/dist/spa/src/types/FrontendAPI.ts

@@ -19,6 +19,7 @@ export interface FrontendAPIInterface {
      * @returns A promise that resolves when the user confirms the dialog
      */   
     confirm(params:ConfirmParams ): Promise<void>;
+    
     /**
      * Show an alert
      * 
@@ -33,37 +34,58 @@ export interface FrontendAPIInterface {
      * @param params - The parameters of the alert
      */
     alert(params:AlertParams): void;
-    /**
-     * Add a filter to the list of filters.
-     * Works only when user located on the list page.
-     * Can be used to set filter from charts or other components in pageInjections.
-     * 
-     * Example:
-     * 
-     * ```ts
-     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
-     * ```
-     * 
-     * @param filter - The filter to add
-     */
-    setListFilter(filter: any): void;
-    /**
-     * Update a filter in the list of filters
-     * 
-     * Example:
-     * 
-     * ```ts
-     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
-     * ```
-     * 
-     * @param filter - The filter to update
-     */
-    updateListFilter(filter: any): void;
-    /**
-     * Clear all filters from the list
-     */
-    clearListFilters(): void;
 
+
+    list: {
+
+        /**
+         * Refresh the list
+         */
+        refresh(): void;
+
+        /**
+         * Close the three dots dropdown
+         */
+        closeThreeDotsDropdown(): void;
+
+        /**
+         * Close the user menu dropdown
+         */
+        closeUserMenuDropdown(): void;
+
+        /**
+         * Set a filter in the list
+         * Works only when user located on the list page.
+         * Can be used to set filter from charts or other components in pageInjections.
+         * 
+         * Example:
+         * 
+         * ```ts
+         * window.adminforth.list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * ```
+         * 
+         * @param filter - The filter to set
+         */
+        setFilter(filter: any): void;
+
+        /**
+         * Update a filter in the list
+         * 
+         * Example:
+         * 
+         * ```ts
+         * window.adminforth.list.updateFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * ```
+         * 
+         * @param filter - The filter to update
+         */
+        updateFilter(filter: any): void;
+
+        /**
+         * Clear all filters from the list
+         */
+        clearFilters(): void;
+    }
 }
 
 export type ConfirmParams = {

package/dist/spa/src/utils.ts

@@ -1,10 +1,13 @@
 import { onMounted, ref, resolveComponent } from 'vue';
-import type {  CoreConfig } from './spa_types/core';
+import type { CoreConfig } from './spa_types/core';
+import type { ValidationObject } from './types/AdminForthConfig';
+
 
 import router from "./router";
-import { useRouter } from 'vue-router';
 import { useCoreStore } from './stores/core';
 import { useUserStore } from './stores/user';
+import { Dropdown } from 'flowbite';
+
 
 export async function callApi({path, method, body=undefined}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
@@ -100,4 +103,58 @@ export function checkAcessByAllowedActions(allowedActions:any, action:any ) {
   }
 }
 
+export function initThreeDotsDropdown() {
+  const threeDotsDropdown: HTMLElement | null = document.querySelector('#listThreeDotsDropdown');
+  if (threeDotsDropdown) {
+    // this resource has three dots dropdown
+    const dd = new Dropdown(
+      threeDotsDropdown, 
+      document.querySelector('[data-dropdown-toggle="listThreeDotsDropdown"]') as HTMLElement, 
+    );
+    window.adminforth.list.closeThreeDotsDropdown = () => {
+      dd.hide();
+    }
+  }
+}
+
+export function applyRegexValidation(value: any, validation: ValidationObject[] | undefined) {
+
+  if ( validation?.length ) {
+    const validationArray = validation;
+    for (let i = 0; i < validationArray.length; i++) {
+      if (validationArray[i].regExp) {
+        let flags = '';
+        if (validationArray[i].caseSensitive) {
+          flags += 'i';
+        }
+        if (validationArray[i].multiline) {
+          flags += 'm';
+        }
+        if (validationArray[i].global) {
+          flags += 'g';
+        }
+
+        const regExp = new RegExp(validationArray[i].regExp, flags);
+        if (value === undefined || value === null) {
+          value = '';
+        }
+        let valueS = `${value}`;
+
+        if (!regExp.test(valueS)) {
+          return validationArray[i].message;
+        }
+      }
+    }
+  }
+}
+
+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/dist/spa/src/views/CreateView.vue

@@ -13,12 +13,13 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         Cancel
       </button>
 
-      <button  @click="saveRecord"
+      <button  
+        @click="saveRecord"
         class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       > 
@@ -29,6 +30,10 @@
         Save
       </button>
 
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.create?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
+
     </BreadcrumbsWithButtons>
 
     <component 
@@ -73,18 +78,19 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
 const isValid = ref(false);
 const validating = ref(false);
 
-const loading = ref(false);
+const loading = ref(true);
 const saving = ref(false);
 
 const route = useRoute();
@@ -116,6 +122,7 @@ onMounted(async () => {
   });
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
+  initThreeDotsDropdown();
 });
 
 async function saveRecord() {
@@ -149,6 +156,10 @@ async function saveRecord() {
         primaryKey: response.newRecordId
       } 
     });
+    window.adminforth.alert({
+      message: 'Record created successfully',
+      variant: 'success'
+    });
   }
 }
 

package/dist/spa/src/views/EditView.vue

@@ -12,19 +12,24 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium text-gray-900  rounded-default focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center py-1 px-3 me-2 text-sm font-medium text-gray-900  rounded-default focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         Cancel
       </button>
 
-      <button  @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      <button
+        @click="saveRecord"
+        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       >
         <IconFloppyDiskSolid class="w-4 h-4" />
         Save
       </button>
 
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.edit?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
+
     </BreadcrumbsWithButtons>
 
     <component 
@@ -69,11 +74,13 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
+
 
 const coreStore = useCoreStore();
 
@@ -83,7 +90,7 @@ const validating = ref(false);
 const route = useRoute();
 const router = useRouter();
 
-const loading = ref(false);
+const loading = ref(true);
 
 const saving = ref(false);
 
@@ -107,12 +114,13 @@ const editableRecord = computed(() => {
 })
 
 onMounted(async () => {
-
   loading.value = true;
 
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
+  initThreeDotsDropdown();
+
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
@@ -130,7 +138,6 @@ async function saveRecord() {
   }
 
   saving.value = true;
-
   const updates = {};
   for (const key in record.value) {
     if (record.value[key] !== coreStore.record[key]) {
@@ -149,6 +156,12 @@ async function saveRecord() {
   });
   if (resp.error) {
     showErrorTost(resp.error);
+  } else {
+    window.adminforth.alert({
+      message: 'Record updated successfully',
+      variant: 'success',
+      timeout: 400000
+    });
   }
   saving.value = false;
   router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });

package/dist/spa/src/views/ListView.vue

@@ -21,8 +21,7 @@
         @click="()=>{checkboxes = []}"
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
-        data-tooltip-placement="bottom"
-        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconBanOutline class="w-5 h-5 "/>
 
@@ -38,9 +37,9 @@
         v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
         :key="action.id"
         @click="startBulkAction(action.id)"
-        class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
         :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
-        'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
+        'bg-lightPrimaryOpacity text-lightPrimary border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
         }"
       >
         <component
@@ -53,14 +52,14 @@
 
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         Create
       </RouterLink>
 
       <button
-        class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
         @click="()=>{filtersShow = !filtersShow}"
         v-if="coreStore.resource?.options?.allowedActions?.filter"
       >
@@ -72,6 +71,10 @@
             {{ filtersStore.filters.length }}
         </span>
       </button>
+
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
 
     <component 
@@ -85,6 +88,7 @@
     <ResourceListTable
       :resource="coreStore.resource"
       :rows="rows"
+      :page="page"
       @update:page="page = $event"
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
@@ -110,16 +114,14 @@
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
 import { useFiltersStore } from '@/stores/filters';
-import { callAdminForthApi, getIcon } from '@/utils';
-import { initFlowbite } from 'flowbite';
+import { callAdminForthApi, currentQuery, getIcon, setQuery } from '@/utils';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
-
-import ValueRenderer from '@/components/ValueRenderer.vue';
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
+import { initFlowbite } from 'flowbite';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
 import {
@@ -141,6 +143,11 @@ const page = ref(1);
 const columnsMinMax = ref({});
 const sort = ref([]);
 
+watch(() => sort, async (to, from) => {
+  // in store sort might be needed for plugins
+  filtersStore.setSort(sort.value);
+}, {deep: true});
+
 const rows = ref(null);
 const totalRows = ref(0);
 const checkboxes = ref([]);
@@ -151,22 +158,6 @@ const DEFAULT_PAGE_SIZE = 10;
 const pageSize = computed(() => coreStore.resource?.options?.listPageSize || DEFAULT_PAGE_SIZE);
 
 
-watch([page], async () => {
-  await getList();
-});
-
-watch(()=>filtersStore.filters, async () => {
-  page.value = 1;
-  checkboxes.value = [];
-
-  await getList();
-}, {deep: true});
-
-watch([sort], async () => {
-  await getList();
-}, {deep: true});
-
-
 async function getList() {
   rows.value = null;
   const data = await callAdminForthApi({
@@ -176,7 +167,7 @@ async function getList() {
       source: 'list',
       resourceId: route.params.resourceId,
       limit: pageSize.value,
-      offset: (page.value - 1) * pageSize.value,
+      offset: ((page.value || 1) - 1) * pageSize.value,
       filters: filtersStore.filters,
       sort: sort.value,
     }
@@ -192,9 +183,22 @@ async function getList() {
     return row;
   });
   totalRows.value = data.total;
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite(); // for tooltips in table
+
 }
 
 async function startBulkAction(actionId) {
+  const action = coreStore.resource.options.bulkActions.find(a => a.id === actionId);
+  if (action.confirm) {
+    const confirmed = await window.adminforth.confirm({
+      message: action.confirm,
+    });
+    if (!confirmed) {
+      return;
+    }
+  }
+
   const data = await callAdminForthApi({
     path: '/start_bulk_action',
     method: 'POST',
@@ -208,6 +212,14 @@ async function startBulkAction(actionId) {
   if (data?.ok) {
     checkboxes.value = [];
     await getList();
+
+    if (data.successMessage) {
+      window.adminforth.alert({
+        message: data.successMessage,
+        variant: 'success'
+      });
+    }
+
   }
   if (data?.error) {
     showErrorTost(data.error);
@@ -215,6 +227,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() {
   
@@ -222,7 +246,28 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
-  if (coreStore.resource.options?.defaultSort) {
+  initFlowbite();
+
+  // !!! 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: JSON.parse(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
@@ -230,8 +275,12 @@ 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();
+  // await getList(); - Not needed here, watch will trigger it
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
     method: 'POST',
@@ -241,18 +290,63 @@ async function init() {
   });
 }
 
+watch([page, sort, () => filtersStore.filters], async () => {
+  console.log('🔄️ page/sort/filter change fired, page:', page.value);
+
+  await getList();
+}, { deep: true });
+
+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 => {
+    if (f.value) {
+      query[`filter__${f.field}__${f.operator}`] = encodeURIComponent(JSON.stringify(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 () => {
-  initFlowbite(); 
- 
+  initInProcess = true;
   await init();
+  initThreeDotsDropdown();
+  initInProcess = false;
+});
 
+watch([page], async () => {
+  setQuery({ page: page.value });
 });
 
-// on route param change 
-watch(() => route.params.resourceId, async () => {
-  filtersStore.setFilters([]);
-  checkboxes.value = [];
-  await init();
+
+
+
+watch([sort], async () => {
+  if (!sort.value.length) {
+    setQuery({ sort: undefined });
+    return;
+  }
+  setQuery({ sort: SortQuerySerializer.serialize(sort.value) });
 });
 
+
 </script>