adminforth 1.0.31 → 1.0.33

package/index.ts

@@ -8,109 +8,13 @@ import { guessLabelFromName } from './modules/utils.js';
 import ExpressServer from './servers/express.js';
 import {v1 as uuid} from 'uuid';
 import fs from 'fs';
-
-
+import { ADMINFORTH_VERSION } from './modules/utils.js';
 import { AdminForthFilterOperators, AdminForthTypes, AdminForthTypesValues } from './types.js';
+import { AdminForthConfig } from './types/AdminForthConfig.js';
 
 const AVAILABLE_SHOW_IN = ['list', 'edit', 'create', 'filter', 'show'];
 const DEFAULT_ALLOWED_ACTIONS = {create: true, edit: true, show: true, delete: true};
 
-type AdminForthConfigMenuItem = {
-  label: string,
-  icon?: string,
-  path?: string,
-  component?: string,
-  resourceId?: string,
-  homepage?: boolean,
-  children?: Array<AdminForthConfigMenuItem>,
-}
-
-
-type AdminForthResourceColumn = {
-  name: string,
-  label?: string,
-  type?: AdminForthTypesValues,
-  primaryKey?: boolean,
-  required?: boolean | { create: boolean, edit: boolean },
-  editingNote?: string | { create: string, edit: string },
-  showIn?: Array<string>,
-  fillOnCreate?: Function,
-  isUnique?: boolean,
-  virtual?: boolean,
-  allowMinMaxQuery?: boolean,
-}
-
-type AdminForthResource = {
-  resourceId: string,
-  label?: string,
-  table: string,
-  dataSource: string,
-  columns: Array<AdminForthResourceColumn>,
-  itemLabel?: Function,
-  hooks?: {
-    show?: Function,
-    create?: {
-      beforeSave?: Function,
-      afterSave?: Function,
-    },
-    edit?: {
-      beforeSave?: Function,
-      afterSave?: Function,
-    },
-    delete?: {
-      beforeSave?: Function,
-      afterSave?: Function,
-    },
-  },
-  options?: {
-    bulkActions?: Array<{
-      label: string,
-      state: string,
-      icon: string,
-      action: Function,
-    }>,
-    allowedActions?: AllowedActions,
-    
-  },
-}
-
-type AdminForthDataSource = {
-  id: string,
-  url: string,
-}
-
-type AdminForthConfig = {
-  rootUser?: {
-    username: string,
-    password: string,
-  },
-  auth?: {
-    resourceId: string,
-    usernameField: string,
-    passwordHashField: string,
-    loginBackgroundImage?: string,
-    userFullName?: string,
-  },
-  resources: Array<any>,
-  menu: Array<AdminForthConfigMenuItem>,
-  databaseConnectors?: any,
-  dataSources: Array<any>,
-  customization?: {
-    customComponentsDir?: string,
-    vueUsesFile?: string,
-  },
-  baseUrl?: string,
-  brandName?: string,
-  datesFormat?: string,
-  deleteConfirmation?: boolean,
-}
-
-type AllowedActions = {
-  create: boolean,
-  edit: boolean,
-  show: boolean,
-  delete: boolean,
-}
 
 class AdminForth {
   static Types = AdminForthTypes;
@@ -124,8 +28,6 @@ class AdminForth {
 
   #defaultConfig = {
     deleteConfirmation: true,
-    
-    
   }
 
   config: AdminForthConfig;
@@ -150,6 +52,7 @@ class AdminForth {
     this.codeInjector = new CodeInjector(this);
     this.connectors = {};
     this.statuses = {}
+    console.log(`🚀 AdminForth v${ADMINFORTH_VERSION} starting up`)
   }
 
   validateConfig() {
@@ -396,7 +299,7 @@ class AdminForth {
       if (!this.config.databaseConnectors[dbType]) {
         throw new Error(`Database type ${dbType} is not supported, consider using databaseConnectors in AdminForth config`);
       }
-      this.connectors[ds.id] = new this.config.databaseConnectors[dbType]({url: ds.url , fieldtypesByTable: ds.fieldtypesByTable});
+      this.connectors[ds.id] = new this.config.databaseConnectors[dbType]({url: ds.url});
     });
 
     await Promise.all(this.config.resources.map(async (res) => {
@@ -434,10 +337,6 @@ class AdminForth {
     // console.log('⚙️⚙️⚙️ Database discovery done', JSON.stringify(this.config.resources, null, 2));
   }
 
-  async init() {
-    console.log('AdminForth init');
-  }
-
   async bundleNow({ hotReload=false, verbose=false }) {
     this.codeInjector.bundleNow({ hotReload, verbose });
   }
@@ -546,12 +445,12 @@ class AdminForth {
               return { error: 'Unauthorized' };
             }
             username = user.data[0][this.config.auth.usernameField]; 
-            userFullName = user.data[0][this.config.auth.userFullName];
+            userFullName = user.data[0][this.config.auth.userFullNameField];
         }
 
         const userData = {
             [this.config.auth.usernameField]: username,
-            [this.config.auth.userFullName]: userFullName
+            [this.config.auth.userFullNameField]: userFullName
         };
         return {
           user: userData,
@@ -568,6 +467,7 @@ class AdminForth {
             usernameField: this.config.auth.usernameField,
           },
           adminUser,
+          version: ADMINFORTH_VERSION,
         };
       },
     });
@@ -593,8 +493,11 @@ class AdminForth {
     server.endpoint({
       method: 'POST',
       path: '/get_resource_data',
-      handler: async ({ body }) => {
-        const { resourceId, limit, offset, filters, sort } = body;
+      handler: async ({ body, adminUser }) => {
+        const { resourceId, source } = body;
+        if (['show', 'list'].includes(source) === false) {
+          return { error: 'Invalid source, should be list or show' };
+        }
         if (!this.statuses.dbDiscover) {
           return { error: 'Database discovery not started' };
         }
@@ -605,6 +508,19 @@ class AdminForth {
         if (!resource) {
           return { error: `Resource ${resourceId} not found` };
         }
+        if (resource.hooks?.[source]?.beforeDatasourceRequest) {
+          const resp = await resource.hooks?.[source]?.beforeDatasourceRequest({ resource, query: body, adminUser });
+          if (!resp || (!resp.ok && !resp.error)) {
+            throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+          }
+
+          if (resp.error) {
+            return { error: resp.error };
+          }
+        }
+        const { limit, offset, filters, sort } = body;
+
+
         const data = await this.connectors[resource.dataSource].getData({
           resource,
           limit,
@@ -612,6 +528,50 @@ class AdminForth {
           filters,
           sort,
         });
+        // for foreign keys, add references
+        await Promise.all(
+          resource.columns.filter((col) => col.foreignResource).map(async (col) => {
+            const targetResource = this.config.resources.find((res) => res.resourceId == col.foreignResource.resourceId);
+            const targetConnector = this.connectors[targetResource.dataSource];
+            const targetResourcePkField = targetResource.columns.find((col) => col.primaryKey).name;
+            const targetData = await targetConnector.getData({
+              resource: targetResource,
+              limit: limit,
+              offset: 0,
+              filters: [
+                {
+                  field: targetResourcePkField,
+                  operator: AdminForthFilterOperators.IN,
+                  value: data.data.map((item) => item[col.name]),
+                }
+              ],
+              sort: [],
+            });
+            const targetDataMap = targetData.data.reduce((acc, item) => {
+              acc[item[targetResourcePkField]] = {
+                label: targetResource.itemLabel ? targetResource.itemLabel(item) : item[targetResourcePkField],
+                pk: item[targetResourcePkField],
+              }
+              return acc;
+            }, {});
+            data.data.forEach((item) => {
+              item[col.name] = targetDataMap[item[col.name]];
+            });
+          })
+        );
+
+      
+        if (resource.hooks?.[source]?.afterDatasourceRequest) {
+          const resp = await resource.hooks?.[source]?.afterDatasourceRequest({ resource, response: data.data, adminUser });
+          if (!resp || (!resp.ok && !resp.error)) {
+            throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+          }
+
+          if (resp.error) {
+            return { error: resp.error };
+          }
+        }
+
         return {...data, options: resource?.options };
       },
     });
@@ -666,8 +626,8 @@ class AdminForth {
         const response = {
           items
         };
-        if (columnConfig.foreignResource.hooks?.afterDatasourceRequest) {
-          const resp = await column.foreignResource.hooks?.afterDatasourceRequest({ response, adminUser });
+        if (columnConfig.foreignResource.hooks?.afterDatasourceResponse) {
+          const resp = await column.foreignResource.hooks?.afterDatasourceResponse({ response, adminUser });
           if (!resp || (!resp.ok && !resp.error)) {
             throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
           }
@@ -676,6 +636,7 @@ class AdminForth {
             return { error: resp.error };
           }
         }
+        
         return response;
       },
     });
@@ -709,36 +670,7 @@ class AdminForth {
         return item;
       },
     });
-    server.endpoint({
-        method: 'POST',
-        path: '/get_record',
-        handler: async ({ body, adminUser }) => {
-            const { resourceId, primaryKey } = body;
-            const resource = this.config.resources.find((res) => res.resourceId == resourceId);
-            const primaryKeyColumn = resource.columns.find((col) => col.primaryKey);
-            const connector = this.connectors[resource.dataSource];
-            const record = await connector.getRecordByPrimaryKey(resource, primaryKey);
-            if (!record) {
-                return { error: `Record with ${primaryKeyColumn.name} ${primaryKey} not found` };
-            }
-            
-            // execute hook if needed
-            if (resource.hooks?.show) {
-                const resp = await resource.hooks?.show({ resource, record, adminUser });
-                if (!resp || (!resp.ok && !resp.error)) {
-                  throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
-                }
-
-                if (resp.error) {
-                  return { error: resp.error };
-                }
-              }
 
-            const labler = resource.itemLabel || ((record) => `${resource.label} ${record[primaryKeyColumn.name]}`);
-            record._label = labler(record);
-            return record;
-        }
-      });
     server.endpoint({
         noAuth: true, // TODO
         method: 'POST',
@@ -771,7 +703,7 @@ class AdminForth {
                          });
                     }
                 }
-                if (column.required?.create && body['record'][column.name] === undefined) {
+                if ((column.required as {create?: boolean, edit?: boolean}) ?.create && body['record'][column.name] === undefined) {
                     return { error: `Column '${column.name}' is required` };
                 }
 

package/modules/utils.ts

@@ -1,3 +1,6 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
 
 
 export function guessLabelFromName(name) {
@@ -10,3 +13,14 @@ export function guessLabelFromName(name) {
     return name.split(/(?=[A-Z])/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
   }
 }
+
+
+let package_json;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.join(path.dirname(__filename), '..');
+
+export const ADMIN_FORTH_ABSOLUTE_PATH = __dirname;
+
+package_json = JSON.parse(fs.readFileSync(path.join(ADMIN_FORTH_ABSOLUTE_PATH, 'package.json'), 'utf8'));
+
+export const ADMINFORTH_VERSION = package_json.version;

package/package.json

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

package/spa/src/App.vue

@@ -42,9 +42,6 @@
                   </p>
                 </div>
                 <ul class="py-1" role="none">
-                  <li>
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Dashboard</a>
-                  </li>
                   <li >
                     <span @click="toggleTheme" class=" cursor-pointer flex items-center	 gap-1 block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
                       {{ theme === 'dark' ? 'Light' : 'Dark' }}
@@ -141,10 +138,6 @@ const routerIsReady = ref(false);
 
 const loggedIn = computed(() => route.name !== 'login' && routerIsReady.value);
 
-watch(loggedIn, (value) => {
-  console.log('🔻🔻🔻 loggedIn', value);
-});
-
 const theme = ref('light');
 
 function toggleTheme() {

package/spa/src/components/CustomDatePicker.vue

@@ -5,7 +5,7 @@
         <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">
+          <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>
 
@@ -97,7 +97,7 @@ const start = computed(() => {
 })
 
 function updateFromProps() {
-  if (props.valueStart === undefined) {
+  if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
   }
@@ -157,5 +157,5 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
-})
+});
 </script>

package/spa/src/components/CustomDateRangePicker.vue

@@ -26,7 +26,7 @@
       <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">
+            <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>
 
@@ -132,11 +132,11 @@ const end = computed(() => {
 })
 
 function updateFromProps() {
-  if (props.valueStart === undefined) {
+  if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
   }
-  if (props.valueEnd === undefined) {
+  if (!props.valueEnd) {
     datepickerEndEl.value.value = '';
     endTime.value = '';
   }

package/spa/src/components/CustomRangePicker.vue

@@ -71,33 +71,52 @@ const sliderValue = ref([start.value, end.value]);
 
 const updateFromSlider =
     debounce((value: [number, number]) => {
+      console.log('start end', value)
       start.value = value[0];
       end.value = value[1];
     }, 500);
 
-function updateFromProps() {
-  if (props.valueStart || props.valueEnd) {
-    setFromProps(props.valueStart, props.valueEnd)
-  } else {
-    clear();
-  }
-}
-
 onMounted(() => {
-  updateFromProps();
+  updateStartFromProps();
+  updateEndFromProps();
 
-  watch(() => [props.valueStart, props.valueEnd], (value) => {
-    updateFromProps();
+  watch(() => props.valueStart, (value) => {
+    updateStartFromProps();
+  });
+
+  watch(() => props.valueEnd, (value) => {
+    updateEndFromProps();
   });
 })
 
+function updateStartFromProps() {
+  if (props.valueStart || props.valueStart === 0) {
+    start.value = props.valueStart ? props.valueStart : minFormatted.value;
+    sliderValue.value = [start.value, end.value]
+  } else {
+    console.log(props.valueStart)
+    start.value = minFormatted.value;
+    sliderValue.value = [minFormatted.value, end.value];
+  }
+}
+
+function updateEndFromProps() {
+  if (props.valueEnd || props.valueStart === 0) {
+    end.value = props.valueEnd ? props.valueEnd : minFormatted.value;
+    sliderValue.value = [start.value, end.value]
+  } else {
+    end.value = maxFormatted.value;
+    sliderValue.value = [start.value, maxFormatted.value];
+  }
+}
+
 watch(start, () => {
-  //console.log('⚡ emit', start.value)
+  console.log('⚡ emit', start.value)
   emit('update:valueStart', start.value)
 })
 
 watch(end, () => {
-  //console.log('⚡ emit', end.value)
+  console.log('⚡ emit', end.value)
   emit('update:valueEnd', end.value);
 })
 
@@ -106,12 +125,6 @@ const clear = () => {
   end.value = maxFormatted.value;
   sliderValue.value = [start.value, end.value]
 }
-
-function setFromProps(startValue: number, endValue: number) {
-  start.value = startValue ? startValue : minFormatted.value
-  end.value = endValue ? endValue : maxFormatted.value
-  sliderValue.value = [start.value, end.value]
-}
 </script>
 
 <style lang="scss" scoped>

package/spa/src/components/Dropdown.vue

@@ -76,10 +76,14 @@ const showDropdown = ref(false);
 const selectedItems = ref([]);
 
 function updateFromProps() {
-  console.log('⚡ updateFromProps', props.modelValue)
   if (props.modelValue !== undefined) {
     if (props.single) {
-      selectedItems.value = [props.options.find(item => item.value === props.modelValue)];
+      const el = props.options.find(item => item.value === props.modelValue);
+      if (el) {
+        selectedItems.value = [el];
+      } else {
+        selectedItems.value = [];
+      }
     } else {
       selectedItems.value = props.options.filter(item => props.modelValue.includes(item.value));
     }