adminforth 1.3.54-next.1 → 1.3.54-next.11

package/basePlugin.ts

@@ -16,7 +16,7 @@ export default class AdminForthPlugin implements IAdminForthPlugin {
   customFolderPath: string;
   pluginOptions: any;
   resourceConfig: AdminForthResource;
-
+  className: string;
   activationOrder: number = 0;
 
   constructor(pluginOptions: any, metaUrl: string) {
@@ -24,6 +24,8 @@ export default class AdminForthPlugin implements IAdminForthPlugin {
     this.pluginDir = currentFileDir(metaUrl);
     this.customFolderPath = path.join(this.pluginDir, this.customFolderName);
     this.pluginOptions = pluginOptions;
+    console.log(`🪲 🪲 🪲 🪲 🪲 🪲 AdminForthPlugin.constructor`, this.constructor.name);
+    this.className = this.constructor.name;
   }
 
   setupEndpoints(server: any) {

package/dataConnectors/clickhouse.ts

@@ -265,14 +265,14 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
       const tableName = resource.table;
       const where = this.whereClause(resource, filters);
       const d = this.whereParams(filters);
-      
+
       const countQ = await this.client.query({
-        query: `SELECT COUNT(*) FROM ${tableName} ${where}`,
+        query: `SELECT COUNT(*) as count FROM ${tableName} ${where}`,
         format: 'JSONEachRow',
         query_params: d,
       });
       const countResp = await countQ.json()
-      return countResp[0]['COUNT()'];
+      return +countResp[0]['count'];
     }
 
     async getMinMaxForColumnsWithOriginalTypes({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }> {

package/dist/basePlugin.js

@@ -11,6 +11,8 @@ export default class AdminForthPlugin {
         this.pluginDir = currentFileDir(metaUrl);
         this.customFolderPath = path.join(this.pluginDir, this.customFolderName);
         this.pluginOptions = pluginOptions;
+        console.log(`🪲 🪲 🪲 🪲 🪲 🪲 AdminForthPlugin.constructor`, this.constructor.name);
+        this.className = this.constructor.name;
     }
     setupEndpoints(server) {
     }

package/dist/dataConnectors/clickhouse.js

@@ -247,12 +247,12 @@ class ClickhouseConnector extends AdminForthBaseConnector {
             const where = this.whereClause(resource, filters);
             const d = this.whereParams(filters);
             const countQ = yield this.client.query({
-                query: `SELECT COUNT(*) FROM ${tableName} ${where}`,
+                query: `SELECT COUNT(*) as count FROM ${tableName} ${where}`,
                 format: 'JSONEachRow',
                 query_params: d,
             });
             const countResp = yield countQ.json();
-            return countResp[0]['COUNT()'];
+            return +countResp[0]['count'];
         });
     }
     getMinMaxForColumnsWithOriginalTypes(_a) {

package/dist/index.js

@@ -72,6 +72,21 @@ class AdminForth {
             this.activatedPlugins.push(pluginInstance);
         });
     }
+    getPluginsByClassName(className) {
+        const plugins = this.activatedPlugins.filter((plugin) => plugin.className === className);
+        return plugins;
+    }
+    getPluginByClassName(className) {
+        const plugins = this.getPluginsByClassName(className);
+        if (plugins.length > 1) {
+            throw new Error(`Multiple plugins with className ${className} found. Use getPluginsByClassName instead`);
+        }
+        if (plugins.length === 0) {
+            const similar = suggestIfTypo(this.activatedPlugins.map((p) => p.className), className);
+            throw new Error(`Plugin with className ${className} not found. ${similar ? `Did you mean ${similar}?` : ''}`);
+        }
+        return plugins[0];
+    }
     discoverDatabases() {
         return __awaiter(this, void 0, void 0, function* () {
             this.statuses.dbDiscover = 'running';

package/index.ts

@@ -126,6 +126,23 @@ class AdminForth implements IAdminForth {
     );
   }
 
+  getPluginsByClassName<T>(className: string): T[] {
+    const plugins = this.activatedPlugins.filter((plugin) => plugin.className === className);
+    return plugins as T[];
+  }
+
+  getPluginByClassName<T>(className: string): T {
+    const plugins = this.getPluginsByClassName(className);
+    if (plugins.length > 1) {
+      throw new Error(`Multiple plugins with className ${className} found. Use getPluginsByClassName instead`);
+    }
+    if (plugins.length === 0) {
+      const similar = suggestIfTypo(this.activatedPlugins.map((p) => p.className), className);
+      throw new Error(`Plugin with className ${className} not found. ${similar ? `Did you mean ${similar}?` : ''}`);
+    }
+    return plugins[0] as T;
+  }
+
   async discoverDatabases() {
     this.statuses.dbDiscover = 'running';
     this.connectorClasses = {

package/package.json

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

package/spa/package-lock.json

@@ -34,6 +34,8 @@
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
+        "flag-icons": "^7.2.3",
+        "i18n-iso-countries": "^7.12.0",
         "npm-run-all2": "^6.1.2",
         "postcss": "^8.4.38",
         "sass": "^1.77.2",
@@ -1906,6 +1908,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2371,6 +2380,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flag-icons": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.2.3.tgz",
+      "integrity": "sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -2622,6 +2638,19 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/i18n-iso-countries": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-7.12.0.tgz",
+      "integrity": "sha512-NDFf5j/raA5JrcPT/NcHP3RUMH7TkdkxQKAKdvDlgb+MS296WJzzqvV0Y5uwavSm7A6oYvBeSV0AxoHdDiHIiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "diacritics": "1.3.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",

package/spa/package.json

@@ -38,6 +38,8 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
+    "flag-icons": "^7.2.3",
+    "i18n-iso-countries": "^7.12.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "sass": "^1.77.2",

package/spa/src/App.vue

@@ -173,7 +173,7 @@
     </aside>
     
 
-    <div class="sm:ml-64" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
+    <div class="sm:ml-64 max-w-[100vw]" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
       <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
       </div>

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,48 @@
+<template>
+  <span class="flex items-center"  
+    :data-tooltip-target="`tooltip-${id}`"
+    data-tooltip-placement="top"
+  >
+    {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary"/>
+
+    <div :id="`tooltip-${id}`" role="tooltip"
+          class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+      {{ props.record[props.column.name] }}
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </span>
+</template>
+
+<script setup>  
+import { computed, ref, onMounted } from 'vue';
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import { initFlowbite } from 'flowbite';
+
+const visualValue = computed(() => {
+  // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
+  const val = props.record[props.column.name];
+  if (val && val.length > 8) {
+    return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
+  }
+  return val;
+});
+
+const props = defineProps(['column', 'record', 'meta']);
+
+const id = ref();
+
+function copyToCB() {
+  navigator.clipboard.writeText(props.record[props.column.name]);
+  window.adminforth.alert({
+    message: 'ID copied to clipboard',
+    variant: 'success',
+  })
+}
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite();
+});
+
+</script>

package/spa/src/renderers/CountryFlag.vue

@@ -0,0 +1,69 @@
+<template>
+  <span class="flex items-center">
+    <span 
+      :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
+      :data-tooltip-target="`tooltip-${id}`"
+    ></span>
+
+    <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
+    
+    <div 
+      v-if="!meta.showCountryName && countryName"
+      :id="`tooltip-${id}`" role="tooltip"
+      class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+    >
+      {{ countryName }}
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </span>
+  
+</template>
+
+<script setup>  
+
+import { computed, ref, onMounted } from 'vue';
+import { initFlowbite } from 'flowbite';
+import 'flag-icons/css/flag-icons.min.css';
+import isoCountries from 'i18n-iso-countries';
+import enLocal from 'i18n-iso-countries/langs/en.json';
+
+isoCountries.registerLocale(enLocal);
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const id = ref();
+
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite();
+});
+
+const countryIsoLow = computed(() => {
+  return props.record[props.column.name]?.toLowerCase();
+});
+
+const countryName = computed(() => {
+  if (!countryIsoLow.value) {
+    return '';
+  }
+  return isoCountries.getName(countryIsoLow.value, 'en');
+});
+
+</script>
+
+<style scoped lang="scss">
+
+.flag-icon {
+  width: 2rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+
+  // border radius  for background
+  border-radius: 2px;
+  // add some silkiness to the flag
+  box-shadow: inset -1px -1px 0.5px 0px rgba(0 0 0 / 0.2), inset 1px 1px 0.5px 0px rgba(255 255 255 / 0.2);
+}
+
+</style>

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

@@ -21,7 +21,6 @@
         @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-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 "/>
@@ -89,6 +88,7 @@
     <ResourceListTable
       :resource="coreStore.resource"
       :rows="rows"
+      :page="page"
       @update:page="page = $event"
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
@@ -115,7 +115,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 +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() {
   
@@ -236,9 +248,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: 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
@@ -246,6 +275,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 +291,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 +300,53 @@ 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 () => {
+  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>

package/types/AdminForthConfig.ts

@@ -325,6 +325,7 @@ export interface IAdminForthPlugin {
   customFolderPath: string;
   pluginOptions: any;
   resourceConfig: AdminForthResource;
+  className: string;
 
   /**
    * Before activating all plugins are sorted by this number and then activated in order.