npm - adminforth - Versions diffs - 1.0.10 → 1.0.11 - Mend

adminforth 1.0.10 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dataConnectors/sqlite.js +2 -3
package/index.js +10 -6
package/package.json +1 -1
package/spa/index.html +1 -1
package/spa/src/App.vue +3 -3
package/spa/src/components/CustomDatePicker.vue +161 -0
package/spa/src/components/CustomDateRangePicker.vue +10 -10
package/spa/src/components/Dropdown.vue +1 -1
package/spa/src/components/Filters.vue +25 -9
package/spa/src/components/MenuLink.vue +1 -1
package/spa/src/components/ResourceForm.vue +7 -0
package/spa/src/stores/core.ts +12 -8
package/spa/src/views/EditView.vue +3 -2
package/spa/src/views/ListView.vue +54 -40
package/spa/src/views/ShowView.vue +1 -2

package/dataConnectors/sqlite.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,
@@ -593,7 +597,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 +611,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 +626,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 CHANGED Viewed

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

package/spa/index.html CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -2,7 +2,7 @@
   <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
+        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Start
           date:</label>
         <div class="relative">
@@ -11,13 +11,13 @@
           </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"
+                 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>
-        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">End date:</label>
+        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">End date:</label>
         <div class="relative">
           <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
@@ -25,7 +25,7 @@
           </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"
+                 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="End date">
         </div>
       </div>
@@ -36,24 +36,24 @@
         <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="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>

package/spa/src/components/Dropdown.vue CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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']);
+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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
@@ -89,7 +90,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 CHANGED Viewed

@@ -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,19 +220,11 @@
                   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"
@@ -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({
@@ -459,6 +472,7 @@ onMounted(async () => {
 watch(() => route.params.resourceId, async () => {
   filters.value = [];
   checkboxes.value = [];
+  sort.value = [];
   await init();
 });

package/spa/src/views/ShowView.vue CHANGED Viewed

@@ -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">