adminforth 1.0.10 → 1.0.13

package/auth.js

@@ -28,7 +28,7 @@ class AdminForthAuth {
     }
 
     // issue JWT token
-    const expiresIn = process.env.ADMINFORTH_AUTH_EXPIRESIN || '1h';
+    const expiresIn = process.env.ADMINFORTH_AUTH_EXPIRESIN || '24h';
     return jwt.sign(payload, secret, { expiresIn });
   }
 

package/dataConnectors/sqlite.js

@@ -235,12 +235,11 @@ class SQLiteConnector {
     }
 
     async updateRecord({ resource, recordId, record, newValues }) {
-        const columns = Object.keys(newValues).map((col) => col).join(', ');
-        const placeholders = Object.keys(newValues).map(() => '?').join(', ');
+        const columnsWithPlaceholders = Object.keys(newValues).map((col) => `${col} = ?`);
         const values = [...Object.values(newValues), recordId];
 
         this.db.prepare(
-            `UPDATE ${resource.table} SET ${columns} = ${placeholders} WHERE ${this.getPrimaryKey(resource)} = ?`
+            `UPDATE ${resource.table} SET ${columnsWithPlaceholders} WHERE ${this.getPrimaryKey(resource)} = ?`
         ).run(values);
     }
 

package/index.js

@@ -370,6 +370,7 @@ class AdminForth {
       handler: async ({input, adminUser, cookies}) => {
         const cookieParsed = this.auth.verify(cookies['adminforth_jwt']);
         let username = ''
+        let userFullName = ''
         if (cookieParsed['pk'] == null) {
             username = this.config.rootUser.username;
         } else {
@@ -387,12 +388,15 @@ class AdminForth {
               return { error: 'Unauthorized' };
             }
             username = user.data[0][this.config.auth.usernameField]; 
+            userFullName = user.data[0][this.config.auth.userFullName];
         }
 
+        const userData = {
+            [this.config.auth.usernameField]: username,
+            [this.config.auth.userFullName]: userFullName
+        };
         return {
-          user: {
-            [this.config.auth.usernameField]: username
-          },
+          user: userData,
           resources: this.config.resources.map((res) => ({
             resourceId: res.resourceId,
             label: res.label,
@@ -522,6 +526,20 @@ class AdminForth {
             if (!resource) {
                 return { error: `Resource '${body['resourceId']}' not found` };
             }
+            
+            const record = body['record'];
+            // execute hook if needed
+            if (resource.hooks?.create?.beforeSave) {
+                const resp = await resource.hooks?.create?.beforeSave({ resource, record, adminUser });
+                if (!resp || (!resp.ok && !resp.error)) {
+                  throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
+                }
+  
+                if (resp.error) {
+                  return { error: resp.error };
+                }
+            }
+
             for (const column of resource.columns) {
                 if (column.fillOnCreate) {
                     if (body['record'][column.name] === undefined) {
@@ -547,31 +565,15 @@ class AdminForth {
                     }
                 }
             }
-            const connector = this.connectors[resource.dataSource];
-
-            const record = body['record'];
-            
-            // execute hook if needed
-            if (resource.hooks?.create?.beforeSave) {
-              const resp = await resource.hooks?.create?.beforeSave({ resource, record, adminUser });
-              if (!resp || (!resp.ok && !resp.error)) {
-                throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
-              }
-
-              if (resp.error) {
-                return { error: resp.error };
-              }
-            }
 
             // remove virtual columns from record
             for (const column of resource.columns.filter((col) => col.virtual)) {
-              if (record[column.name]) {
-                delete record[column.name];
-              }
+                if (record[column.name]) {
+                  delete record[column.name];
+                }
             }
-
+            const connector = this.connectors[resource.dataSource];
             await connector.createRecord({ resource, record });
-            
             // execute hook if needed
             if (resource.hooks?.create?.afterSave) {
                 const resp = await resource.hooks?.create?.afterSave({ resource, record, adminUser });
@@ -593,7 +595,7 @@ class AdminForth {
         noAuth: true, // TODO
         method: 'POST',
         path: '/update_record',
-        handler: async ({ body }) => {
+        handler: async ({ body, adminUser }) => {
             console.log('update_record', body);
             const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
             if (!resource) {
@@ -607,6 +609,7 @@ class AdminForth {
                 const primaryKeyColumn = resource.columns.find((col) => col.primaryKey);
                 return { error: `Record with ${primaryKeyColumn.name} ${recordId} not found` };
             }
+            const record = body['record'];
 
             // execute hook if needed
             if (resource.hooks?.edit?.beforeSave) {
@@ -621,8 +624,7 @@ class AdminForth {
             }
 
             const newValues = {};
-            const record = body['record'];
-            for (const col of resource.columns) {
+            for (const col of resource.columns.filter((col) => !col.virtual)) {
                 if (record[col.name] !== oldRecord[col.name]) {
                     newValues[col.name] = connector.setFieldValue(col, record[col.name]);
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "index.js",
   "scripts": {

package/spa/index.html

@@ -17,7 +17,7 @@
 
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" class="min-h-screen dark:bg-gray-800"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/spa/src/App.vue

@@ -24,7 +24,7 @@
 
             <div class="flex items-center ms-3">
               <div>
-                <button type="button" class="flex text-sm bg-gray-100 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                <button type="button" class="flex text-sm bg-gray-100 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 dark:bg-gray-700" aria-expanded="false" data-dropdown-toggle="dropdown-user">
                   <span class="sr-only">Open user menu</span>
                   <svg class="w-8 h-8 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                     <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
@@ -70,7 +70,7 @@
   <aside 
     v-if="loggedIn"
 
-    id="logo-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
+    id="logo-sidebar" class="fixed top-0 left-0 z-10 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
     <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
@@ -106,7 +106,7 @@
     </div>
   </aside>
     
-  <div class="p-4 sm:ml-64" v-if="loggedIn">
+  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn">
     <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
     </div>

package/spa/src/components/CustomDatePicker.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
+      <div>
+        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+
+        <div class="relative">
+          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
+            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+          </div>
+
+          <input ref="datepickerStartEl" type="text"
+                 class="bg-gray-50 border leading-none 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="Start date">
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
+        <div>
+          <div class="relative">
+            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
+              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+            </div>
+
+            <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
+                   class="bg-gray-50 border leading-none 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"
+                   value="00:00" required/>
+          </div>
+        </div>
+      </div>
+
+      <button type="button"
+              class="text-blue-700 dark:text-blue-500 text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
+        <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
+             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+             fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m8 10 4 4 4-4"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+import {useCoreStore} from '@/stores/core';
+
+import Datepicker from "flowbite-datepicker/Datepicker";
+import IconCalendar from "@/components/icons/IconCalendar.vue";
+import IconTime from "@/components/icons/IconTime.vue";
+
+const coreStore = useCoreStore();
+dayjs.extend(utc)
+
+const props = defineProps({
+  valueStart: {
+    default: undefined
+  },
+  column: {
+    type: Object,
+  },
+  label: {
+    type: String,
+  }
+});
+
+const emit = defineEmits(['update:valueStart']);
+
+const datepickerStartEl = ref();
+
+const showTimeInputs = ref(false);
+
+const startDate = ref('');
+
+const startTime = ref('');
+
+const datepickerObject = ref('')
+
+const start = computed(() => {
+  if (!startDate.value) {
+    return;
+  }
+
+  let date = dayjs(startDate.value);
+
+  if (startTime.value) {
+    date = addTimeToDate(formatTime(startTime.value), date)
+  }
+
+  return date.utc().toISOString();
+})
+
+function updateFromProps() {
+  if (props.valueStart === undefined) {
+    datepickerStartEl.value.value = '';
+    startTime.value = '';
+  }
+  else {
+    datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
+    startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
+  }
+}
+
+onMounted(() => {
+  updateFromProps();
+
+  watch(() => [props.valueStart], (value) => {
+    updateFromProps();
+  });
+})
+
+watch(start, () => {
+  //console.log('⚡ emit', start.value)
+  emit('update:valueStart', start.value)
+})
+
+function initDatepickers() {
+  datepickerObject.value = new Datepicker(datepickerStartEl.value, { format: 'dd M yyyy' });
+
+  addChangeDateListener();
+}
+
+function addChangeDateListener() {
+  datepickerStartEl.value.addEventListener('changeDate', setStartDate)
+}
+
+function removeChangeDateListener() {
+  datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
+}
+
+function setStartDate(event) {
+  startDate.value = event.detail.date
+}
+
+function formatTime(time) {
+  return time.split(':').map(Number).length === 2 ? time + ':00' : time;
+}
+
+function addTimeToDate(time, date) {
+  const [hours, minutes, seconds] = time.split(':').map(Number)
+  return date.hour(hours).minute(minutes).second(seconds)
+}
+
+const toggleTimeInputs = () => {
+  showTimeInputs.value = !showTimeInputs.value
+}
+
+onMounted(() => {
+  initDatepickers();
+});
+
+onBeforeUnmount(() => {
+  removeChangeDateListener();
+})
+</script>

package/spa/src/components/CustomDateRangePicker.vue

@@ -1,33 +1,24 @@
 <template>
   <div>
     <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
-      <div>
-        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Start
-          date:</label>
-
-        <div class="relative">
-          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
-            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-          </div>
-
-          <input ref="datepickerStartEl" type="text"
-                 class="bg-gray-50 border leading-none 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                 placeholder="Start date">
+      <div class="relative">
+        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
+          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
         </div>
-      </div>
-
-      <div>
-        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">End date:</label>
 
-        <div class="relative">
-          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
-            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-          </div>
+        <input ref="datepickerStartEl" type="text"
+               class="bg-gray-50 border leading-none 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="From">
+      </div>
 
-          <input ref="datepickerEndEl" type="text"
-                 class="bg-gray-50 border leading-none 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                 placeholder="End date">
+      <div class="relative">
+        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
+          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
         </div>
+
+        <input ref="datepickerEndEl" type="text"
+               class="bg-gray-50 border leading-none 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="To">
       </div>
     </div>
 
@@ -35,25 +26,25 @@
       <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
         <div>
           <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white"/>
+            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
+              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
             </div>
 
             <input v-model="startTime" type="time" id="start-time"
-                   class="bg-gray-50 border leading-none 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   min="09:00" max="18:00" value="00:00" required/>
+                   class="bg-gray-50 border leading-none 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"
+                   value="00:00" required/>
           </div>
         </div>
 
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white"/>
+              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
             </div>
 
             <input v-model="endTime" type="time" id="end-time"
-                   class="bg-gray-50 border leading-none 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   min="09:00" max="18:00" value="00:00" required/>
+                   class="bg-gray-50 border leading-none 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"
+                   value="00:00" required/>
           </div>
         </div>
       </div>
@@ -61,7 +52,7 @@
       <button type="button"
               class="text-blue-700 dark:text-blue-500 text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
               @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
-        <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
+        <svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              fill="none" viewBox="0 0 24 24">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

package/spa/src/components/Dropdown.vue

@@ -5,7 +5,7 @@
         type="text"
         v-model="search"
         @focus="showDropdown = true"
-        class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm transition duration-150 ease-in-out"
+        class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm transition duration-150 ease-in-out 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="selectedItems.length ? '' : 'Select...'"
       />
       <div class="absolute inset-y-0 left-2 flex items-center pr-2 flex-wrap">

package/spa/src/components/Filters.vue

@@ -1,13 +1,17 @@
 <template>
   <!-- drawer component -->
-  <div id="drawer-navigation" class="fixed top-14 right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800" 
+  <div id="drawer-navigation" 
+  
+      class="fixed top-14 right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl"
+
+      :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
       :style="{ height: `calc(100vh - 3.5rem)` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       Filters
 
-      <button type="button" data-drawer-hide="drawer-navigation" aria-controls="drawer-navigation" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
+      <button type="button"   @click="$emit('hide')"  class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
         <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         <span class="sr-only">Close menu</span>
       </button>
@@ -16,7 +20,7 @@
     <div class="py-4 ">
       <ul class="space-y-3 font-medium">
          <li v-for="c in columnsWithFilter" :key="c">
-            {{ c.label }}
+            <p class="dark:text-gray-400">{{ c.label }}</p>
 
             <Dropdown 
               v-if="c.type === 'boolean'" 
@@ -35,7 +39,7 @@
 
            <input
              v-else-if="[ 'string', 'text' ].includes(c.type)"
-             type="text" class="w-full py-1 px-2 border border-gray-300 rounded-md"
+             type="text" class="w-full py-1 px-2 border border-gray-300 rounded-md 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="Search"
              @input="setFilterItem({ column: c, operator: 'ilike', value: $event.target.value || undefined })"
              :value="getFilterItem({ column: c, operator: 'ilike' })"
@@ -62,14 +66,14 @@
               <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"
+                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"
+                placeholder="To"
                 @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
                 :value="getFilterItem({ column: c, operator: 'lte' })"
               >
@@ -88,22 +92,34 @@
 
    </div>
   </div>
+
+  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+    @click="$emit('hide')">
+  </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { watch, computed } from 'vue'
 import Dropdown from '@/components/Dropdown.vue';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
 
 // props: columns
 // add support for v-model:filers
-const props = defineProps(['columns', 'filters']);
-const emits = defineEmits(['update:filters']);
+const props = defineProps(['columns', 'filters', 'show', 'columnsMinMax']);
+const emits = defineEmits(['update:filters', 'hide']);
 
 const columnsWithFilter = computed( 
   () => props.columns?.filter(column => column.showIn.includes('filter')) || []
 );
 
+// sync 'body' class 'overflow-hidden' with show prop show
+watch(() => props.show, (show) => {
+  if (show) {
+    document.body.classList.add('overflow-hidden');
+  } else {
+    document.body.classList.remove('overflow-hidden');
+  }
+});
 
 // filters is a array of objects
 // {

package/spa/src/components/MenuLink.vue

@@ -5,7 +5,7 @@
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-blue-100': item.resourceId ? 
+        'bg-blue-100 dark:bg-gray-700': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"

package/spa/src/components/ResourceForm.vue

@@ -57,6 +57,12 @@
                     :value="currentValues[column.name]"
                     @input="setCurrentValue(column.name, $event.target.value)"
                   >
+                  <CustomDatePicker
+                    v-else-if="['datetime'].includes(column.type)"
+                    :column="column"
+                    :valueStart="currentValues[column.name]"
+                    @update:valueStart="setCurrentValue(column.name, $event)"
+                  />
                   <input
                     v-else-if="['decimal', 'float'].includes(column.type)"
                     type="number"
@@ -121,6 +127,7 @@ import Dropdown from '@/components/Dropdown.vue';
 import { IconExclamationCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { initFlowbite } from 'flowbite'
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
+import CustomDatePicker from "@/components/CustomDatePicker.vue";
 
 const props = defineProps({
   loading: Boolean,

package/spa/src/stores/core.ts

@@ -42,14 +42,18 @@ export const useCoreStore = defineStore('core', () => {
     user.value = resp.user;
 
     // find homepage:true in menu recuresively
-    const homepage = await findHomepage(menu.value);
-    if (homepage) {
-      if (homepage.resourceId) {
-        // redirect to homepage
-        router.push({ name: 'resource-list', params: { resourceId: homepage.resourceId } });
-      } else {
-        // redirect to path
-        router.push(homepage.path);
+    if (import.meta.env.DEV){
+      return
+    } else {
+      const homepage = await findHomepage(menu.value);
+      if (homepage) {
+        if (homepage.resourceId) {
+          // redirect to homepage
+          router.push({ name: 'resource-list', params: { resourceId: homepage.resourceId } });
+        } else {
+          // redirect to path
+          router.push(homepage.path);
+        }
       }
     }
   }

package/spa/src/views/EditView.vue

@@ -37,7 +37,7 @@
 <script setup>
 
 import { ref, computed, onMounted } from 'vue';  
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useCoreStore } from '@/stores/core';
 import ResourceForm from '@/components/ResourceForm.vue';
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
@@ -51,6 +51,7 @@ const isValid = ref(false);
 const validating = ref(false);
 
 const route = useRoute();
+const router = useRouter();
 
 const loading = ref(false);
 
@@ -78,6 +79,13 @@ onMounted(async () => {
 });
 
 async function saveRecord() {
+  if (!isValid.value) {
+    validating.value = true;
+    return;
+  } else {
+    validating.value = false;
+  }
+
   saving.value = true;
   await callAdminForthApi({
     method: 'POST',
@@ -89,7 +97,7 @@ async function saveRecord() {
     },
   });
   saving.value = false;
-  router.push({ name: 'resource.show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
+  router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
 }
 
 </script>

package/spa/src/views/ListView.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="relative">
-    <Filters :columns="coreStore.resourceColumns" v-model:filters="filters" :columnsMinMax="columnsMinMax" />
+    <Teleport to="body">
+      <Filters 
+        :columns="coreStore.resourceColumns" 
+        v-model:filters="filters" 
+        :columnsMinMax="columnsMinMax" :show="filtersShow" 
+        @hide="filtersShow = false"
+      />
+    </Teleport>
 
     <BreadcrumbsWithButtons>
       <button @click="()=>{checkboxes = []}"
@@ -12,7 +19,7 @@
         <IconBanOutline class="w-5 h-5 " /> 
         <div :id="`tooltip-remove-all`"
                 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">
-                  Remove  selection
+                  Remove selection
                   <div class="tooltip-arrow" data-popper-arrow></div>
               </div>
       </button>
@@ -34,7 +41,7 @@
       </RouterLink>
       <button 
         class="flex gap-1 items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-        data-drawer-target="drawer-navigation" data-drawer-show="drawer-navigation" aria-controls="drawer-navigation" data-drawer-placement="right"
+        @click="()=>{filtersShow = !filtersShow}"
       >
         <IconFilterOutline class="w-4 h-4 me-2" />
           Filter
@@ -46,49 +53,32 @@
      
 
     </BreadcrumbsWithButtons>
+
     <!-- table -->
     <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
 
       
 
       <!-- skelet loader -->
-      <div v-if="!coreStore.resourceColumns" role="status"
+      <div  role="status" v-if="!coreStore.resourceColumns"
         class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-            <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-          </div>
-          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-        </div>
-        <div class="flex items-center justify-between pt-4">
-          <div>
-            <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-            <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-          </div>
-          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-        </div>
-        <div class="flex items-center justify-between pt-4">
-          <div>
-            <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-            <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-          </div>
-          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-        </div>
-        <div class="flex items-center justify-between pt-4">
+        <div class="flex items-center justify-between h-16">
           <div>
             <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
             <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
           </div>
           <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
         </div>
-        <div class="flex items-center justify-between pt-4">
+        <div  class="flex items-center justify-between  h-16 pt-4" v-for="i in new Array(10)" >
           <div>
             <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
             <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
           </div>
           <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
         </div>
+       
+        
+
         <span class="sr-only">Loading...</span>
       </div>
 
@@ -105,13 +95,16 @@
 
 
             <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
-              <div class="flex items-center">
+              <div  @click="onSortButtonClick(c.name)" class="flex items-center">
                 {{ c.label }}
-                <a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                    fill="currentColor" viewBox="0 0 24 24">
+             
+                <div  :style = "{'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}" ><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                    fill='currentColor'
+                   
+                     viewBox="0 0 24 24">
                     <path
                       d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
-                  </svg></a>
+                  </svg></div>
               </div>
             </th>
 
@@ -227,22 +220,14 @@
                   Delete
                   <div class="tooltip-arrow" data-popper-arrow></div>
               </div>
-
-
             </td>
           </tr>
-
-
         </tbody>
       </table>
-
-      
-        
     </div>
-
     <!-- pagination -->
     <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
-      v-if="rows && totalRows > 0"
+      v-if="rows && totalRows >= pageSize && totalRows > 0"
     >
         <!-- Help text -->
         <span class="text-sm text-gray-700 dark:text-gray-400">
@@ -315,6 +300,8 @@ import {
 
 import Filters from '@/components/Filters.vue';
 
+const filtersShow = ref(false);
+
 
 const coreStore = useCoreStore();
 const modalStore = useModalStore();
@@ -348,11 +335,37 @@ const allFromThisPageChecked = computed(() => {
   if (!rows.value) return false;
   return rows.value.every((r) => checkboxes.value.includes(r.id));
 });
+const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').map((s) => s.field));
+const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').map((s) => s.field));
 
-watch([page, filters, sort], async () => {
+watch([page], async () => {
   await init();
 });
 
+watch([filters], async () => {
+  page.value = 1;
+  await getList();
+}, { deep: true });
+
+watch([sort], async () => {
+  await init();
+}, { deep: true });
+
+function onSortButtonClick(field) {
+  const sortIndex = sort.value.findIndex((s) => s.field === field);
+  console.log('sortIndex', sortIndex);
+  if (sortIndex === -1) {
+    sort.value = [{ field, direction: 'asc' }, ...sort.value];
+  } else {
+    const sortField = sort.value[sortIndex];
+    if (sortField.direction === 'asc') {
+      sort.value[sortIndex].direction = 'desc';
+    } else {
+      sort.value.splice(sortIndex, 1);
+    }
+  }
+}
+
 async function getList() {
   rows.value = null;
   const data = await callAdminForthApi({
@@ -366,7 +379,6 @@ async function getList() {
       sort: sort.value,
     }
   });
-  console.log('coreStore.resourceColumns', coreStore.resourceColumns);
   rows.value = data.data?.map(row => {
     row._primaryKeyValue = row[coreStore.resourceColumns.find(c => c.primaryKey).name];
     return row;
@@ -459,6 +471,7 @@ onMounted(async () => {
 watch(() => route.params.resourceId, async () => {
   filters.value = [];
   checkboxes.value = [];
+  sort.value = [];
   await init();
 });
 

package/spa/src/views/ShowView.vue

@@ -41,8 +41,7 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))
-            " :key="column.name"
+            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
             >
                 <td class="px-6 py-4 whitespace-nowrap">