adminforth 1.3.54-next.2 → 1.3.54-next.20

package/dataConnectors/clickhouse.ts

@@ -2,6 +2,7 @@ import { AdminForthDataTypes, AdminForthFilterOperators, AdminForthSortDirection
 import AdminForthBaseConnector from './baseConnector.js';
 import dayjs from 'dayjs';
 import { createClient } from '@clickhouse/client'
+import { base } from '@faker-js/faker';
 
 
 
@@ -73,11 +74,11 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
             field.scale = parseInt(scale);
           } else if (baseType.startsWith('Float')) {
             field.type = AdminForthDataTypes.FLOAT;
-          } else if (baseType == 'DateTime64' || baseType == 'DateTime') {
+          } else if (baseType == 'DateTime64' || baseType == 'DateTime' || baseType.startsWith('DateTime64(')) {
             field.type = AdminForthDataTypes.DATETIME;
           } else if (baseType == 'Date' || baseType == 'Date64') {
             field.type = AdminForthDataTypes.DATE;
-          } else if (baseType == 'Boolean') {
+          } else if (baseType == 'Boolean' || baseType == 'Bool') {
             field.type = AdminForthDataTypes.BOOLEAN;
             field._underlineType = 'boolean';
           } else {
@@ -117,7 +118,11 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
         return !!value;
       } else if (field.type == AdminForthDataTypes.JSON) {
         if (field._underlineType.startsWith('String') || field._underlineType.startsWith('FixedString')) {
-          return JSON.parse(value);
+          try {
+            return JSON.parse(value);
+          } catch (e) {
+              return {'error': `Failed to parse JSON: ${e.message}`}
+          }
         } else {
           console.error(`AdminForth: JSON field is not a string but ${field._underlineType}, this is not supported yet`);
         }
@@ -265,14 +270,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/dataConnectors/postgres.ts

@@ -153,7 +153,11 @@ class PostgresConnector extends AdminForthBaseConnector implements IAdminForthDa
 
         if (field.type == AdminForthDataTypes.JSON) {
             if (typeof value == 'string') {
-                return JSON.parse(value);
+                try {
+                    return JSON.parse(value);
+                } catch (e) {
+                    return {'error': `Failed to parse JSON: ${e.message}`}
+                }
             } else if (typeof value == 'object') {
                 return value;
             } else {

package/dataConnectors/sqlite.ts

@@ -87,7 +87,11 @@ class SQLiteConnector extends AdminForthBaseConnector implements IAdminForthData
         return !!value;
       } else if (field.type == AdminForthDataTypes.JSON) {
         if (field._underlineType == 'text' || field._underlineType == 'varchar') {
-          return JSON.parse(value);
+          try {
+            return JSON.parse(value);
+          } catch (e) {
+            return {'error': `Failed to parse JSON: ${e.message}`}
+          }
         } else {
           console.error(`AdminForth: JSON field is not a string/text but ${field._underlineType}, this is not supported yet`);
         }

package/dist/dataConnectors/clickhouse.js

@@ -93,13 +93,13 @@ class ClickhouseConnector extends AdminForthBaseConnector {
                 else if (baseType.startsWith('Float')) {
                     field.type = AdminForthDataTypes.FLOAT;
                 }
-                else if (baseType == 'DateTime64' || baseType == 'DateTime') {
+                else if (baseType == 'DateTime64' || baseType == 'DateTime' || baseType.startsWith('DateTime64(')) {
                     field.type = AdminForthDataTypes.DATETIME;
                 }
                 else if (baseType == 'Date' || baseType == 'Date64') {
                     field.type = AdminForthDataTypes.DATE;
                 }
-                else if (baseType == 'Boolean') {
+                else if (baseType == 'Boolean' || baseType == 'Bool') {
                     field.type = AdminForthDataTypes.BOOLEAN;
                     field._underlineType = 'boolean';
                 }
@@ -145,7 +145,12 @@ class ClickhouseConnector extends AdminForthBaseConnector {
         }
         else if (field.type == AdminForthDataTypes.JSON) {
             if (field._underlineType.startsWith('String') || field._underlineType.startsWith('FixedString')) {
-                return JSON.parse(value);
+                try {
+                    return JSON.parse(value);
+                }
+                catch (e) {
+                    return { 'error': `Failed to parse JSON: ${e.message}` };
+                }
             }
             else {
                 console.error(`AdminForth: JSON field is not a string but ${field._underlineType}, this is not supported yet`);
@@ -247,12 +252,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/dataConnectors/postgres.js

@@ -154,7 +154,12 @@ class PostgresConnector extends AdminForthBaseConnector {
         }
         if (field.type == AdminForthDataTypes.JSON) {
             if (typeof value == 'string') {
-                return JSON.parse(value);
+                try {
+                    return JSON.parse(value);
+                }
+                catch (e) {
+                    return { 'error': `Failed to parse JSON: ${e.message}` };
+                }
             }
             else if (typeof value == 'object') {
                 return value;

package/dist/dataConnectors/sqlite.js

@@ -120,7 +120,12 @@ class SQLiteConnector extends AdminForthBaseConnector {
         }
         else if (field.type == AdminForthDataTypes.JSON) {
             if (field._underlineType == 'text' || field._underlineType == 'varchar') {
-                return JSON.parse(value);
+                try {
+                    return JSON.parse(value);
+                }
+                catch (e) {
+                    return { 'error': `Failed to parse JSON: ${e.message}` };
+                }
             }
             else {
                 console.error(`AdminForth: JSON field is not a string/text but ${field._underlineType}, this is not supported yet`);

package/dist/modules/codeInjector.js

@@ -478,12 +478,21 @@ class CodeInjector {
                 process.env.HEAVY_DEBUG && console.log('🪲Hash file does not exist, proceeding with npm ci/install');
             }
             yield this.runNpmShell({ command: 'ci', cwd: CodeInjector.SPA_TMP_PATH });
-            if (iconPackageNames.length) {
-                const npmInstallCommand = `install ${[
-                    ...iconPackageNames,
-                    ...usersPackages,
-                    ...pluginPackages.map(({ packages }) => packages.join(' ')),
-                ].join(' ')}`;
+            const allPacks = [
+                ...iconPackageNames,
+                ...usersPackages,
+                ...pluginPackages.reduce((acc, { packages }) => {
+                    acc.push(...packages);
+                    return acc;
+                }, []),
+            ];
+            const EXCLUDE_PACKS = ['@iconify-prerendered/vue-flowbite'];
+            const allPacksFiltered = allPacks.filter((pack) => {
+                return !EXCLUDE_PACKS.some((exclude) => pack.startsWith(exclude));
+            });
+            const allPacksUnique = Array.from(new Set(allPacksFiltered));
+            if (allPacks.length) {
+                const npmInstallCommand = `install ${allPacksUnique.join(' ')}`;
                 yield this.runNpmShell({ command: npmInstallCommand, cwd: CodeInjector.SPA_TMP_PATH });
             }
             yield fs.promises.writeFile(hashPath, fullHash);

package/dist/modules/configValidator.js

@@ -12,6 +12,7 @@ import fs from 'fs';
 import path from 'path';
 import { guessLabelFromName, suggestIfTypo } from './utils.js';
 import crypto from 'crypto';
+import { AdminForthSortDirections } from "adminforth/index.js";
 export default class ConfigValidator {
     constructor(adminforth, config) {
         this.adminforth = adminforth;
@@ -222,6 +223,22 @@ export default class ConfigValidator {
                         all: true,
                     };
                 }
+                if (res.options.defaultSort) {
+                    const colName = res.options.defaultSort.columnName;
+                    const col = res.columns.find((c) => c.name === colName);
+                    if (!col) {
+                        const similar = suggestIfTypo(res.columns.map((c) => c.name), colName);
+                        errors.push(`Resource "${res.resourceId}" defaultSort.columnName column "${colName}" not found in columns. ${similar ? `Did you mean "${similar}"?` : ''}`);
+                    }
+                    const dir = res.options.defaultSort.direction;
+                    if (!dir) {
+                        errors.push(`Resource "${res.resourceId}" defaultSort.direction is missing`);
+                    }
+                    // AdminForthSortDirections is enum
+                    if (!Object.values(AdminForthSortDirections).includes(dir)) {
+                        errors.push(`Resource "${res.resourceId}" defaultSort.direction "${dir}" is invalid, allowed values are ${Object.values(AdminForthSortDirections).join(', ')}`);
+                    }
+                }
                 if (Object.keys(res.options.allowedActions).includes('all')) {
                     if (Object.keys(res.options.allowedActions).length > 1) {
                         errors.push(`Resource "${res.resourceId}" allowedActions cannot have "all" and other keys at same time: ${Object.keys(res.options.allowedActions).join(', ')}`);

package/modules/codeInjector.ts

@@ -551,13 +551,24 @@ class CodeInjector implements ICodeInjector {
     }
 
     await this.runNpmShell({command: 'ci', cwd: CodeInjector.SPA_TMP_PATH});
-    
-    if (iconPackageNames.length) {
-      const npmInstallCommand = `install ${[
-        ...iconPackageNames,
-        ...usersPackages, 
-        ...pluginPackages.map(({ packages }) => packages.join(' ')),
-      ].join(' ')}`;
+
+    const allPacks = [
+      ...iconPackageNames,
+      ...usersPackages, 
+      ...pluginPackages.reduce((acc, { packages }) => {
+        acc.push(...packages);
+        return acc;
+      }, []),
+    ];
+    const EXCLUDE_PACKS = ['@iconify-prerendered/vue-flowbite'];
+
+    const allPacksFiltered = allPacks.filter((pack) => {
+      return !EXCLUDE_PACKS.some((exclude) => pack.startsWith(exclude));
+    })
+    const allPacksUnique = Array.from(new Set(allPacksFiltered));
+
+    if (allPacks.length) {
+      const npmInstallCommand = `install ${allPacksUnique.join(' ')}`;
       await this.runNpmShell({command: npmInstallCommand, cwd: CodeInjector.SPA_TMP_PATH});
     }
 

package/modules/configValidator.ts

@@ -14,6 +14,7 @@ import path from 'path';
 import { guessLabelFromName, suggestIfTypo } from './utils.js';
 
 import crypto from 'crypto';
+import { AdminForthSortDirections } from "adminforth/index.js";
 
 
 
@@ -249,6 +250,22 @@ export default class ConfigValidator implements IConfigValidator {
           };
         }
 
+        if (res.options.defaultSort) {
+          const colName = res.options.defaultSort.columnName;
+          const col = res.columns.find((c) => c.name === colName);
+          if (!col) {
+            const similar = suggestIfTypo(res.columns.map((c) => c.name), colName);
+            errors.push(`Resource "${res.resourceId}" defaultSort.columnName column "${colName}" not found in columns. ${similar ? `Did you mean "${similar}"?` : ''}`);
+          }
+          const dir = res.options.defaultSort.direction;
+          if (!dir) {
+            errors.push(`Resource "${res.resourceId}" defaultSort.direction is missing`);
+          }
+          // AdminForthSortDirections is enum
+          if (!(Object.values(AdminForthSortDirections) as string[]).includes(dir)) {
+            errors.push(`Resource "${res.resourceId}" defaultSort.direction "${dir}" is invalid, allowed values are ${Object.values(AdminForthSortDirections).join(', ')}`);
+          }
+        }
 
         if (Object.keys(res.options.allowedActions).includes('all')) {
           if (Object.keys(res.options.allowedActions).length > 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.54-next.2",
+  "version": "1.3.54-next.20",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,8 +8,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
     "---prepareDist": "cp -rL spa dist/",
-    "rollout": "tsc && npm version patch && npm publish && npm run rollout-doc",
-    "rollout-next": "tsc && npm version prerelease --preid=next && npm publish --tag next",
+    "put-git-tag": "git tag v$(node -p \"require('./package.json').version\") && git push --tags",
+    "rollout": "tsc && npm version patch && npm publish && npm run rollout-doc && npm run put-git-tag",
+    "rollout-next": "tsc && npm version prerelease --preid=next && npm publish --tag next && npm run put-git-tag",
     "rollout-doc": "cd documentation && npm run build && npm run deploy",
     "docs": "typedoc",
     "postinstall": "cd ./spa/src/ && test ! -d ./types && ln -sf ../../types ./types || echo 'types linked'"

package/spa/package-lock.json

@@ -34,13 +34,16 @@
         "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",
         "tailwindcss": "^3.4.3",
         "typescript": "~5.4.0",
         "vite": "^5.2.13",
-        "vue-tsc": "^2.0.11"
+        "vue-tsc": "^2.0.11",
+        "vue3-json-viewer": "^2.2.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1783,6 +1786,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1906,6 +1921,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "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 +2400,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",
@@ -2555,6 +2591,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -2622,6 +2668,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",
@@ -3713,6 +3772,13 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
@@ -4018,6 +4084,13 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4404,6 +4477,19 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-json-viewer": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vue3-json-viewer/-/vue3-json-viewer-2.2.2.tgz",
+      "integrity": "sha512-56l3XDGggnpwEqZieXsSMhNT4NhtO6d7zuSAxHo4i0UVxymyY2jRb7UMQOU1ztChKALZCAzX7DlgrsnEhxu77A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "clipboard": "^2.0.10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package/spa/package.json

@@ -38,12 +38,15 @@
     "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",
     "tailwindcss": "^3.4.3",
     "typescript": "~5.4.0",
     "vite": "^5.2.13",
-    "vue-tsc": "^2.0.11"
+    "vue-tsc": "^2.0.11",
+    "vue3-json-viewer": "^2.2.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>
@@ -295,7 +295,7 @@ const theme = ref('light');
 function toggleTheme() {
   theme.value = theme.value === 'light' ? 'dark' : 'light';
   document.documentElement.classList.toggle('dark');
-  window.localStorage.setItem('theme', theme.value);
+  window.localStorage.setItem('af__theme', theme.value);
 
 }
 
@@ -390,7 +390,7 @@ onMounted(async () => {
 })
 
 onBeforeMount(()=>{
-  theme.value = window.localStorage.getItem('theme') || 'light';
+  theme.value = window.localStorage.getItem('af__theme') || 'light';
   document.documentElement.classList.toggle('dark', theme.value === 'dark');
 })
 

package/spa/src/components/ResourceForm.vue

@@ -104,6 +104,14 @@
                           @input="setCurrentValue(column.name, $event.target.value)"
                       >
                       </textarea>
+                      <textarea
+                          v-else-if="['json'].includes(column.type)"
+                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                          placeholder="Text"
+                          :value="currentValues[column.name]"
+                          @input="setCurrentValue(column.name, $event.target.value)"
+                      >
+                      </textarea>
                       <input
                           v-else
                           :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
@@ -155,7 +163,6 @@ import { useRouter, useRoute } from 'vue-router';
 const router = useRouter();
 const route = useRoute();
 const props = defineProps({
-  loading: Boolean,
   resource: Object,
   record: Object,
   validating: Boolean,
@@ -193,6 +200,13 @@ const columnError = (column) => {
     ) {
       return 'This field is required';
     }
+    if (column.type === 'json' && currentValues.value[column.name]) {
+      try {
+        JSON.parse(currentValues.value[column.name]);
+      } catch (e) {
+        return 'Invalid JSON';
+      }
+    }
     if ( column.type === 'string' || column.type === 'text' ) {
       if ( column.maxLength && currentValues.value[column.name]?.length > column.maxLength ) {
         return `This field must be shorter than ${column.maxLength} characters`;
@@ -243,11 +257,32 @@ const setCurrentValue = (key, value) => {
   }
 
   currentValues.value = { ...currentValues.value };
-  emit('update:record', currentValues.value);
+
+  //json fields should transform to object
+  const up = {...currentValues.value};
+  props.resource.columns.forEach((column) => {
+    if (column.type === 'json' && up[column.name]) {
+      try {
+        up[column.name] = JSON.parse(up[column.name]);
+      } catch (e) {
+        // do nothing
+      }
+    }
+  });
+  emit('update:record', up);
 };
 
 onMounted(() => {
+
   currentValues.value = Object.assign({}, props.record);
+  // json values should transform to string
+  props.resource.columns.forEach((column) => {
+    if (column.type === 'json' && currentValues.value[column.name]) {
+      currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
+    }
+  });
+  console.log('currentValues', currentValues.value);
+
   initFlowbite();
   emit('update:isValid', isValid.value);
 });

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/components/ValueRenderer.vue

@@ -29,6 +29,9 @@
     <span v-else-if="column.type === 'richtext'">
       <div v-html="protectAgainstXSS(record[column.name])" class="allow-lists"></div>
     </span>
+    <span v-else-if="column.type === 'json'">
+      <JsonViewer :value="record[column.name]" copyable sort :theme="theme" />
+    </span>
     <span v-else>
       {{ checkEmptyValues(record[column.name],route.meta.type) }}
     </span>
@@ -44,13 +47,19 @@ import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import sanitizeHtml from 'sanitize-html';
+import { JsonViewer } from "vue3-json-viewer";
+import "vue3-json-viewer/dist/index.css";
 
 
 import { useCoreStore } from '@/stores/core';
+import { computed } from 'vue';
 
 const coreStore = useCoreStore();
 const route = useRoute();
 
+const theme = computed(() => {
+  return window.localStorage.getItem('af__theme') || 'light';
+});
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -111,4 +120,22 @@ function formatTime(time) {
   }
 
 } 
+</style>
+
+<style lang="scss" >
+
+.jv-container .jv-code {
+  padding: 10px 10px;
+}
+
+.jv-container .jv-button[class] {
+  @apply text-lightPrimary;
+  @apply dark:text-darkPrimary;
+
+}
+
+.jv-container.jv-dark {
+  background: transparent;
+}
+
 </style>

package/spa/src/renderers/CompactUUID.vue

@@ -0,0 +1,48 @@
+<template>
+  <span class="flex items-center"  
+    :data-tooltip-target="val && `tooltip-${id}`"
+    data-tooltip-placement="top"
+  >
+    {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="val"/>
+
+    <div :id="`tooltip-${id}`" role="tooltip" v-if="val"
+          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/CreateView.vue

@@ -90,7 +90,7 @@ 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();

package/spa/src/views/EditView.vue

@@ -90,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);
 

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/spa/src/views/ShowView.vue

@@ -10,6 +10,14 @@
       :adminUser="coreStore.adminUser"
     />
     <BreadcrumbsWithButtons>
+      <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-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"/>
+        Add new
+      </RouterLink>
+
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
         class="flex 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"
       >
@@ -126,7 +134,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
-import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconPenSolid, IconTrashBinSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {callAdminForthApi} from '@/utils';