adminforth 1.0.69 → 1.0.71

package/auth.ts

@@ -43,8 +43,10 @@ class AdminForthAuth {
       const decoded = jwt.verify(jwtToken, secret);
       return decoded;
     } catch (err) {
-      if (err.name === 'JsonWebTokenError') {
-        console.error('Token expired', err.message);
+      if (err.name === 'TokenExpiredError') {
+        console.error('Token expired:', err.message);
+      } else  if (err.name === 'JsonWebTokenError') {
+        console.error('Token error:', err.message);
       } else {
         console.error('Failed to verify JWT token', err);
       }

package/dist/auth.js

@@ -46,8 +46,11 @@ class AdminForthAuth {
             return decoded;
         }
         catch (err) {
-            if (err.name === 'JsonWebTokenError') {
-                console.error('Token expired', err.message);
+            if (err.name === 'TokenExpiredError') {
+                console.error('Token expired:', err.message);
+            }
+            else if (err.name === 'JsonWebTokenError') {
+                console.error('Token error:', err.message);
             }
             else {
                 console.error('Failed to verify JWT token', err);

package/dist/index.js

@@ -789,7 +789,9 @@ class AdminForth {
                     if (record[recordField] !== oldRecord[recordField]) {
                         const column = resource.columns.find((col) => col.name === recordField);
                         if (column) {
-                            newValues[recordField] = connector.setFieldValue(column, record[recordField]);
+                            if (!column.virtual) {
+                                newValues[recordField] = connector.setFieldValue(column, record[recordField]);
+                            }
                         }
                         else {
                             newValues[recordField] = record[recordField];

package/dist/spa/spa/src/App.vue

@@ -90,7 +90,7 @@
                 </svg>
               </button>
 
-              <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !item.open }">
+              <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
                 <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
                   <li>
                     <MenuLink :item="child" isChild="true" />
@@ -147,6 +147,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
+import { loadFile } from './utils';
+
 // import { link } from 'fs';
 const coreStore = useCoreStore();
 
@@ -156,20 +158,6 @@ const splitAtLast = (str: string, separator: string) => {
   return [str.slice(0, index), str.slice(index + 1)];
 }
 
-const loadFile = (file: string) => {
-  let path;
-  let baseUrl = '';
-  if (file.startsWith('@/')) {
-    path = file.replace('@/', '');
-    baseUrl = new URL(`./${path}`, import.meta.url).href;
-  } else if (file.startsWith('@@/')) {
-    path = file.replace('@@/', '');
-    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
-  } else {
-    baseUrl = new URL(`./${file}`, import.meta.url).href;
-  }
-  return baseUrl;
-}
 
 
 createHead()
@@ -183,8 +171,8 @@ const route = useRoute();
 watch(route, () => {
   title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
   useHead({
-  title: title.value,
-})
+    title: title.value,
+  })
 });
 
 const router = useRouter();
@@ -227,20 +215,27 @@ async function initRouter() {
   routerIsReady.value = true;
 }
 
+async function loadMenu() {
+  await coreStore.fetchMenuAndResource()
+  loginRedirectCheckIsReady.value = true;
+  
+  coreStore.menu.forEach((item, i) => {
+    if (item.open) {
+      opened.value.push(i);
+    }
+  });
+}
+
 // initialize components based on data attribute selectors
 onMounted(async () => {
-  initRouter();
-    setTimeout(() => {
-      initFlowbite();
-    }, 100); 
-  await coreStore.fetchMenuAndResource();
-  loginRedirectCheckIsReady.value = true;
- 
-coreStore.menu.forEach((item, i) => {
-  if (item.open) {
-    opened.value.push(i);
-  }
-});
+  loadMenu(); // run this in async mode
+  // before init flowbite we have to wait router initialized because it affects dom(our v-ifs) and fetch menu
+  await initRouter()
+  setTimeout(() => {
+    initFlowbite();
+  }); 
+
+
 })
 
 </script>

package/dist/spa/spa/src/components/CustomDatePicker.vue

@@ -67,6 +67,9 @@ const props = defineProps({
   },
   label: {
     type: String,
+  },
+  autoHide: {
+    type: Boolean,
   }
 });
 
@@ -100,8 +103,7 @@ function updateFromProps() {
   if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
-  }
-  else {
+  } else {
     datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
     startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
   }
@@ -121,7 +123,13 @@ watch(start, () => {
 })
 
 function initDatepickers() {
-  datepickerObject.value = new Datepicker(datepickerStartEl.value, { format: 'dd M yyyy' });
+  const options = {format: 'dd M yyyy'};
+
+  if (props.autoHide) {
+    options.autohide = true;
+  }
+
+  datepickerObject.value = new Datepicker(datepickerStartEl.value, options);
 
   addChangeDateListener();
 }
@@ -134,6 +142,10 @@ function removeChangeDateListener() {
   datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
 }
 
+function destroyDatepickerElement() {
+  datepickerObject.value.destroy();
+}
+
 function setStartDate(event) {
   startDate.value = event.detail.date
 }
@@ -157,5 +169,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
+  destroyDatepickerElement();
 });
 </script>

package/dist/spa/spa/src/components/CustomDateRangePicker.vue

@@ -101,6 +101,9 @@ const endDate = ref('');
 const startTime = ref('');
 const endTime = ref('');
 
+const datepickerStartObject = ref('')
+const datepickerEndObject = ref('')
+
 const start = computed(() => {
   if (!startDate.value) {
     return;
@@ -162,9 +165,9 @@ watch(end, () => {
 
 function initDatepickers() {
 
-  new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
+  datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
 
-  new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
+  datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
   addChangeDateListener();
 }
 
@@ -178,6 +181,11 @@ function removeChangeDateListener() {
   datepickerEndEl.value.removeEventListener('changeDate', setEndDate);
 }
 
+function destroyDatepickerElement() {
+  datepickerStartObject.value.destroy();
+  datepickerEndObject.value.destroy();
+}
+
 function setStartDate(event) {
   startDate.value = event.detail.date
 }
@@ -205,5 +213,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
+  destroyDatepickerElement();
 })
 </script>

package/dist/spa/spa/src/components/Filters.vue

@@ -69,7 +69,7 @@
            >
 
            <CustomRangePicker
-             v-else-if="['integer', 'decimal', 'float'].includes(c.type)"
+             v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
              :min="c.min"
              :max="c.max"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
@@ -77,6 +77,23 @@
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
              @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
            />
+
+           <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
+             <input
+               type="number" aria-describedby="helper-text-explanation"
+               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-20 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="From"
+               @input="setFilterItem({ column: c, operator: 'gte', value: $event.target.value || undefined })"
+               :value="getFilterItem({ column: c, operator: 'gte' })"
+             >
+             <input
+               type="number" aria-describedby="helper-text-explanation"
+               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-20 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="To"
+               @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
+               :value="getFilterItem({ column: c, operator: 'lte' })"
+             >
+           </div>
             
          </li>
       </ul>

package/dist/spa/spa/src/components/ResourceForm.vue

@@ -79,6 +79,7 @@
                         v-else-if="['datetime'].includes(column.type)"
                         :column="column"
                         :valueStart="currentValues[column.name]"
+                        auto-hide
                         @update:valueStart="setCurrentValue(column.name, $event)"
                     />
                     <input

package/dist/spa/spa/src/stores/core.ts

@@ -12,7 +12,6 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
   const user = ref(null);
-  const flowBitIsInitialised = ref(false);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
@@ -129,7 +128,6 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumns, 
     fetchResourceFull, 
     resourceColumnsError,
-    flowBitIsInitialised,
     resourceOptions,
     logout
   }

package/dist/spa/spa/src/utils.ts

@@ -43,4 +43,22 @@ export function getIcon(icon: string) {
   const [iconSet, iconName] = icon.split(':');
   const compName = 'Icon' + iconName.split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
   return resolveComponent(compName);
-}
+}
+
+export const loadFile = (file: string) => {
+  if (file.startsWith('http')) {
+    return file;
+  }
+  let path;
+  let baseUrl = '';
+  if (file.startsWith('@/')) {
+    path = file.replace('@/', '');
+    baseUrl = new URL(`./${path}`, import.meta.url).href;
+  } else if (file.startsWith('@@/')) {
+    path = file.replace('@@/', '');
+    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
+  } else {
+    baseUrl = new URL(`./${file}`, import.meta.url).href;
+  }
+  return baseUrl;
+}

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

@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
     :style="coreStore.config?.loginBackgroundImage ? {
-      'background-image': 'url(' + coreStore.config?.loginBackgroundImage + ')',
+      'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
       'background-position': 'center',
       'background-blend-mode': 'darken'
@@ -81,8 +81,9 @@
 import { onMounted, ref } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
+import { initFlowbite } from 'flowbite'
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -114,6 +115,10 @@ async function login() {
       error.value = null;
       router.push('/');
       await coreStore.fetchMenuAndResource();
+      setTimeout(() => {
+        initFlowbite();
+      }); 
+
     }
 
 }

package/index.ts

@@ -893,7 +893,9 @@ class AdminForth {
               if (record[recordField] !== oldRecord[recordField]) {
                 const column = resource.columns.find((col) => col.name === recordField);
                 if (column) {
-                  newValues[recordField] = connector.setFieldValue(column, record[recordField]);
+                  if (!column.virtual) {
+                    newValues[recordField] = connector.setFieldValue(column, record[recordField]);
+                  }
                 } else {
                   newValues[recordField] = record[recordField];
                 }

package/package.json

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

package/spa/src/App.vue

@@ -90,7 +90,7 @@
                 </svg>
               </button>
 
-              <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !item.open }">
+              <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
                 <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
                   <li>
                     <MenuLink :item="child" isChild="true" />
@@ -147,6 +147,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
+import { loadFile } from './utils';
+
 // import { link } from 'fs';
 const coreStore = useCoreStore();
 
@@ -156,20 +158,6 @@ const splitAtLast = (str: string, separator: string) => {
   return [str.slice(0, index), str.slice(index + 1)];
 }
 
-const loadFile = (file: string) => {
-  let path;
-  let baseUrl = '';
-  if (file.startsWith('@/')) {
-    path = file.replace('@/', '');
-    baseUrl = new URL(`./${path}`, import.meta.url).href;
-  } else if (file.startsWith('@@/')) {
-    path = file.replace('@@/', '');
-    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
-  } else {
-    baseUrl = new URL(`./${file}`, import.meta.url).href;
-  }
-  return baseUrl;
-}
 
 
 createHead()
@@ -183,8 +171,8 @@ const route = useRoute();
 watch(route, () => {
   title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
   useHead({
-  title: title.value,
-})
+    title: title.value,
+  })
 });
 
 const router = useRouter();
@@ -227,20 +215,27 @@ async function initRouter() {
   routerIsReady.value = true;
 }
 
+async function loadMenu() {
+  await coreStore.fetchMenuAndResource()
+  loginRedirectCheckIsReady.value = true;
+  
+  coreStore.menu.forEach((item, i) => {
+    if (item.open) {
+      opened.value.push(i);
+    }
+  });
+}
+
 // initialize components based on data attribute selectors
 onMounted(async () => {
-  initRouter();
-    setTimeout(() => {
-      initFlowbite();
-    }, 100); 
-  await coreStore.fetchMenuAndResource();
-  loginRedirectCheckIsReady.value = true;
- 
-coreStore.menu.forEach((item, i) => {
-  if (item.open) {
-    opened.value.push(i);
-  }
-});
+  loadMenu(); // run this in async mode
+  // before init flowbite we have to wait router initialized because it affects dom(our v-ifs) and fetch menu
+  await initRouter()
+  setTimeout(() => {
+    initFlowbite();
+  }); 
+
+
 })
 
 </script>

package/spa/src/components/CustomDatePicker.vue

@@ -67,6 +67,9 @@ const props = defineProps({
   },
   label: {
     type: String,
+  },
+  autoHide: {
+    type: Boolean,
   }
 });
 
@@ -100,8 +103,7 @@ function updateFromProps() {
   if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
-  }
-  else {
+  } else {
     datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
     startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
   }
@@ -121,7 +123,13 @@ watch(start, () => {
 })
 
 function initDatepickers() {
-  datepickerObject.value = new Datepicker(datepickerStartEl.value, { format: 'dd M yyyy' });
+  const options = {format: 'dd M yyyy'};
+
+  if (props.autoHide) {
+    options.autohide = true;
+  }
+
+  datepickerObject.value = new Datepicker(datepickerStartEl.value, options);
 
   addChangeDateListener();
 }
@@ -134,6 +142,10 @@ function removeChangeDateListener() {
   datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
 }
 
+function destroyDatepickerElement() {
+  datepickerObject.value.destroy();
+}
+
 function setStartDate(event) {
   startDate.value = event.detail.date
 }
@@ -157,5 +169,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
+  destroyDatepickerElement();
 });
 </script>

package/spa/src/components/CustomDateRangePicker.vue

@@ -101,6 +101,9 @@ const endDate = ref('');
 const startTime = ref('');
 const endTime = ref('');
 
+const datepickerStartObject = ref('')
+const datepickerEndObject = ref('')
+
 const start = computed(() => {
   if (!startDate.value) {
     return;
@@ -162,9 +165,9 @@ watch(end, () => {
 
 function initDatepickers() {
 
-  new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
+  datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
 
-  new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
+  datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
   addChangeDateListener();
 }
 
@@ -178,6 +181,11 @@ function removeChangeDateListener() {
   datepickerEndEl.value.removeEventListener('changeDate', setEndDate);
 }
 
+function destroyDatepickerElement() {
+  datepickerStartObject.value.destroy();
+  datepickerEndObject.value.destroy();
+}
+
 function setStartDate(event) {
   startDate.value = event.detail.date
 }
@@ -205,5 +213,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
+  destroyDatepickerElement();
 })
 </script>

package/spa/src/components/Filters.vue

@@ -69,7 +69,7 @@
            >
 
            <CustomRangePicker
-             v-else-if="['integer', 'decimal', 'float'].includes(c.type)"
+             v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
              :min="c.min"
              :max="c.max"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
@@ -77,6 +77,23 @@
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
              @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
            />
+
+           <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
+             <input
+               type="number" aria-describedby="helper-text-explanation"
+               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-20 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="From"
+               @input="setFilterItem({ column: c, operator: 'gte', value: $event.target.value || undefined })"
+               :value="getFilterItem({ column: c, operator: 'gte' })"
+             >
+             <input
+               type="number" aria-describedby="helper-text-explanation"
+               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-20 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="To"
+               @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
+               :value="getFilterItem({ column: c, operator: 'lte' })"
+             >
+           </div>
             
          </li>
       </ul>

package/spa/src/components/ResourceForm.vue

@@ -79,6 +79,7 @@
                         v-else-if="['datetime'].includes(column.type)"
                         :column="column"
                         :valueStart="currentValues[column.name]"
+                        auto-hide
                         @update:valueStart="setCurrentValue(column.name, $event)"
                     />
                     <input

package/spa/src/stores/core.ts

@@ -12,7 +12,6 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
   const user = ref(null);
-  const flowBitIsInitialised = ref(false);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
@@ -129,7 +128,6 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumns, 
     fetchResourceFull, 
     resourceColumnsError,
-    flowBitIsInitialised,
     resourceOptions,
     logout
   }

package/spa/src/utils.ts

@@ -43,4 +43,22 @@ export function getIcon(icon: string) {
   const [iconSet, iconName] = icon.split(':');
   const compName = 'Icon' + iconName.split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
   return resolveComponent(compName);
-}
+}
+
+export const loadFile = (file: string) => {
+  if (file.startsWith('http')) {
+    return file;
+  }
+  let path;
+  let baseUrl = '';
+  if (file.startsWith('@/')) {
+    path = file.replace('@/', '');
+    baseUrl = new URL(`./${path}`, import.meta.url).href;
+  } else if (file.startsWith('@@/')) {
+    path = file.replace('@@/', '');
+    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
+  } else {
+    baseUrl = new URL(`./${file}`, import.meta.url).href;
+  }
+  return baseUrl;
+}

package/spa/src/views/LoginView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
     :style="coreStore.config?.loginBackgroundImage ? {
-      'background-image': 'url(' + coreStore.config?.loginBackgroundImage + ')',
+      'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
       'background-position': 'center',
       'background-blend-mode': 'darken'
@@ -81,8 +81,9 @@
 import { onMounted, ref } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
+import { initFlowbite } from 'flowbite'
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -114,6 +115,10 @@ async function login() {
       error.value = null;
       router.push('/');
       await coreStore.fetchMenuAndResource();
+      setTimeout(() => {
+        initFlowbite();
+      }); 
+
     }
 
 }