adminforth 1.3.54-next.17 → 1.3.54-next.18

package/dataConnectors/clickhouse.ts

@@ -117,7 +117,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`);
         }

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

@@ -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`);

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/package.json

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

package/spa/package-lock.json

@@ -42,7 +42,8 @@
         "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": {
@@ -1785,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",
@@ -1908,6 +1921,13 @@
         "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",
@@ -2571,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",
@@ -3742,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",
@@ -4047,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",
@@ -4433,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

@@ -46,6 +46,7 @@
     "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

@@ -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/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/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);