adminforth 1.1.44 → 1.1.45

package/dist/index.js

@@ -244,49 +244,47 @@ class AdminForth {
                     }
                 }
                 //check if resource has bulkActions
-                if ((_b = res.options) === null || _b === void 0 ? void 0 : _b.bulkActions) {
-                    let bulkActions = res.options.bulkActions;
-                    if (!Array.isArray(bulkActions)) {
-                        errors.push(`Resource "${res.resourceId}" bulkActions must be an array`);
-                        bulkActions = [];
-                    }
-                    if (((_d = (_c = res.options) === null || _c === void 0 ? void 0 : _c.allowedActions) === null || _d === void 0 ? void 0 : _d.delete) && !bulkActions.find((action) => action.label === 'Delete checked')) {
-                        bulkActions.push({
-                            label: `Delete checked`,
-                            state: 'danger',
-                            icon: 'flowbite:trash-bin-outline',
-                            action: (_e) => __awaiter(this, [_e], void 0, function* ({ selectedIds }) {
-                                const connector = this.connectors[res.dataSource];
-                                yield Promise.all(selectedIds.map((recordId) => __awaiter(this, void 0, void 0, function* () {
-                                    yield connector.deleteRecord({ resource: res, recordId });
-                                })));
-                            })
-                        });
-                    }
-                    const newBulkActions = bulkActions.map((action) => {
-                        return Object.assign(action, { id: uuid() });
+                let bulkActions = ((_b = res === null || res === void 0 ? void 0 : res.options) === null || _b === void 0 ? void 0 : _b.bulkActions) || [];
+                if (!Array.isArray(bulkActions)) {
+                    errors.push(`Resource "${res.resourceId}" bulkActions must be an array`);
+                    bulkActions = [];
+                }
+                if (((_d = (_c = res.options) === null || _c === void 0 ? void 0 : _c.allowedActions) === null || _d === void 0 ? void 0 : _d.delete) && !bulkActions.find((action) => action.label === 'Delete checked')) {
+                    bulkActions.push({
+                        label: `Delete checked`,
+                        state: 'danger',
+                        icon: 'flowbite:trash-bin-outline',
+                        action: (_e) => __awaiter(this, [_e], void 0, function* ({ selectedIds }) {
+                            const connector = this.connectors[res.dataSource];
+                            yield Promise.all(selectedIds.map((recordId) => __awaiter(this, void 0, void 0, function* () {
+                                yield connector.deleteRecord({ resource: res, recordId });
+                            })));
+                        })
                     });
-                    bulkActions = newBulkActions;
-                    // if pageInjection is a string, make array with one element. Also check file exists
-                    const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
-                    if (res.options.pageInjections) {
-                        Object.entries(res.options.pageInjections).map(([key, value]) => {
-                            Object.entries(value).map(([injection, target]) => {
-                                if (possibleInjections.includes(injection)) {
-                                    if (!Array.isArray(res.options.pageInjections[key][injection])) {
-                                        // not array
-                                        res.options.pageInjections[key][injection] = [target];
-                                    }
-                                    res.options.pageInjections[key][injection].forEach((target, i) => {
-                                        res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
-                                    });
-                                }
-                                else {
-                                    errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+                }
+                const newBulkActions = bulkActions.map((action) => {
+                    return Object.assign(action, { id: uuid() });
+                });
+                res.options.bulkActions = newBulkActions;
+                // if pageInjection is a string, make array with one element. Also check file exists
+                const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
+                if (res.options.pageInjections) {
+                    Object.entries(res.options.pageInjections).map(([key, value]) => {
+                        Object.entries(value).map(([injection, target]) => {
+                            if (possibleInjections.includes(injection)) {
+                                if (!Array.isArray(res.options.pageInjections[key][injection])) {
+                                    // not array
+                                    res.options.pageInjections[key][injection] = [target];
                                 }
-                            });
+                                res.options.pageInjections[key][injection].forEach((target, i) => {
+                                    res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
+                                });
+                            }
+                            else {
+                                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+                            }
                         });
-                    }
+                    });
                 }
                 // transform all hooks Functions to array of functions
                 if (res.hooks) {
@@ -454,7 +452,7 @@ class AdminForth {
     }
     bundleNow(_b) {
         return __awaiter(this, arguments, void 0, function* ({ hotReload = false, verbose = false }) {
-            this.codeInjector.bundleNow({ hotReload, verbose });
+            yield this.codeInjector.bundleNow({ hotReload, verbose });
         });
     }
     getUserByPk(pk) {

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

@@ -21,12 +21,13 @@
                   class="bg-form-view-bg dark:bg-gray-800 border-b dark:border-gray-700"
               >
                 <!-- if column is in customComponentsPerColumn, use this component. If not, use this code -->
-                <template v-if="customComponentsPerColumn[column.name]">
+                <template v-if="column?.components?.[props.source].file">
                     <component
-                        :is="customComponentsPerColumn[column.name]"
+                        :is="getCustomComponent(column.components[props.source])"
                         :column="column"
                         :value="currentValues[column.name]"
                         @update:value="setCurrentValue(column.name, $event)"
+                        :meta="column.components[props.source].meta"
                     />
                 </template>
                 <template v-else>
@@ -141,7 +142,7 @@
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
 import Dropdown from '@/components/Dropdown.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
 import { computedAsync } from '@vueuse/core';
 import { initFlowbite } from 'flowbite';
@@ -155,10 +156,9 @@ const props = defineProps({
   resource: Object,
   record: Object,
   validating: Boolean,
-  customComponentsPerColumn: Object,
+  source: String,
 });
 
-
 const unmasked = ref({});
 
 const mode = computed(() => props.record  && Object.keys(props.record).length ? 'edit' : 'create');

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

@@ -35,8 +35,10 @@
         </th>
 
         <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
+         
           <div @click="() => c.sortable && onSortButtonClick(c.name)" class="flex items-center " :class="{'cursor-pointer':c.sortable}">
             {{ c.label }}
+            
 
             <div v-if="c.sortable"
                 :style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
@@ -52,6 +54,12 @@
                   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>
             </div>
+            <span
+             class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
+             v-if="sort.findIndex((s) => s.field === c.name) !== -1">
+            {{ sort.findIndex((s) => s.field === c.name) + 1 }}
+            </span>
+
           </div>
         </th>
 
@@ -136,7 +144,7 @@
           <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
           <component
             :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
-            :meta="c?.components?.list.meta"
+            :meta="c?.components?.list?.meta"
             :column="c"
             :record="row"
             :adminUser="coreStore.adminUser"
@@ -376,7 +384,7 @@ const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').
 function onSortButtonClick(field) {
   const sortIndex = sort.value.findIndex((s) => s.field === field);
   if (sortIndex === -1) {
-    sort.value = [{field, direction: 'asc'}, ...sort.value];
+    sort.value = [...sort.value,{field, direction: 'asc'}];
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {

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

@@ -50,7 +50,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="createComponentsPerColumn"
+      :source="'create'"
     >
     </ResourceForm>
 
@@ -91,7 +91,6 @@ const route = useRoute();
 const router = useRouter();
 
 const record = ref({});
-let createComponentsPerColumn = {};
 
 const coreStore = useCoreStore();
 
@@ -115,12 +114,6 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
-  createComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.create) {
-          acc[column.name] = getCustomComponent(column.components.create);
-      }
-      return acc;
-    }, {});
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
 });

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

@@ -46,7 +46,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="editComponentsPerColumn"
+      :source="'edit'"
     >
     </ResourceForm>
 
@@ -88,7 +88,6 @@ const loading = ref(false);
 const saving = ref(false);
 
 const record = ref({});
-let editComponentsPerColumn = {};
 
 async function onUpdateRecord(newRecord) {
   record.value = newRecord;
@@ -119,13 +118,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
-
-  editComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.edit) {
-          acc[column.name] = getCustomComponent(column.components.edit);
-      }
-      return acc;
-    }, {});
   loading.value = false;
 });
 

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

@@ -70,7 +70,7 @@
           class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
           v-if="filtersStore.filters.length">
             {{ filtersStore.filters.length }}
-          </span>
+        </span>
       </button>
     </BreadcrumbsWithButtons>
 

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

@@ -75,8 +75,8 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
                   <component
-                    v-if="showComponentsPerColumn[column.name]"
-                    :is="showComponentsPerColumn[column.name]"
+                    v-if="column?.components?.show"
+                    :is="getCustomComponent(column?.components?.show)"
                     :resource="coreStore.resource"
                     :meta="column.components.show.meta"
                     :column="column"
@@ -127,7 +127,6 @@ const item = ref(null);
 const route = useRoute();
 const router = useRouter();
 const loading = ref(false);
-let showComponentsPerColumn = {};
 
 console.log(route.params,'showWiev');
 
@@ -145,13 +144,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-
-  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.show) {
-          acc[column.name] = getCustomComponent(column.components.show);
-      }
-      return acc;
-  }, {});
   loading.value = false;
 });
 

package/index.ts

@@ -293,13 +293,13 @@ class AdminForth implements AdminForthClass {
 
 
         //check if resource has bulkActions
-        if(res.options?.bulkActions){
-          let bulkActions = res.options.bulkActions;
+          let bulkActions = res?.options?.bulkActions || [];
 
           if (!Array.isArray(bulkActions)) {
             errors.push(`Resource "${res.resourceId}" bulkActions must be an array`);
             bulkActions = [];
           }
+         
           if(res.options?.allowedActions?.delete && !bulkActions.find((action) => action.label === 'Delete checked')){
             bulkActions.push({
               label: `Delete checked`,
@@ -317,32 +317,29 @@ class AdminForth implements AdminForthClass {
           const newBulkActions = bulkActions.map((action) => {
             return Object.assign(action, {id: uuid()});
           });
-          bulkActions = newBulkActions;
-
-          // if pageInjection is a string, make array with one element. Also check file exists
-          const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
-          if(res.options.pageInjections) {
-            Object.entries(res.options.pageInjections).map(([key, value]) => {
-              Object.entries(value).map(([injection, target]) => {
-                if (possibleInjections.includes(injection)) {
-                  if (!Array.isArray(res.options.pageInjections[key][injection])) {
-                    // not array
-                    res.options.pageInjections[key][injection] = [target];
-                  }
-                  res.options.pageInjections[key][injection].forEach((target, i) => {
-                    res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
-                  });
-                } else {
-                  errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+          res.options.bulkActions = newBulkActions;
+
+        // if pageInjection is a string, make array with one element. Also check file exists
+        const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
+        if(res.options.pageInjections) {
+          Object.entries(res.options.pageInjections).map(([key, value]) => {
+            Object.entries(value).map(([injection, target]) => {
+              if (possibleInjections.includes(injection)) {
+                if (!Array.isArray(res.options.pageInjections[key][injection])) {
+                  // not array
+                  res.options.pageInjections[key][injection] = [target];
                 }
-              });
-                  
-            })
-          }
-
+                res.options.pageInjections[key][injection].forEach((target, i) => {
+                  res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
+                });
+              } else {
+                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+              }
+            });
+                
+          })
         }
 
-
         // transform all hooks Functions to array of functions
         if (res.hooks) {
           for (const value of [res.hooks.show, res.hooks.list]) {
@@ -538,7 +535,7 @@ class AdminForth implements AdminForthClass {
   }
 
   async bundleNow({ hotReload=false, verbose=false }) {
-    this.codeInjector.bundleNow({ hotReload, verbose });
+    await this.codeInjector.bundleNow({ hotReload, verbose });
   }
 
   async getUserByPk(pk: string) {

package/package.json

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

package/spa/src/components/ResourceForm.vue

@@ -21,12 +21,13 @@
                   class="bg-form-view-bg dark:bg-gray-800 border-b dark:border-gray-700"
               >
                 <!-- if column is in customComponentsPerColumn, use this component. If not, use this code -->
-                <template v-if="customComponentsPerColumn[column.name]">
+                <template v-if="column?.components?.[props.source].file">
                     <component
-                        :is="customComponentsPerColumn[column.name]"
+                        :is="getCustomComponent(column.components[props.source])"
                         :column="column"
                         :value="currentValues[column.name]"
                         @update:value="setCurrentValue(column.name, $event)"
+                        :meta="column.components[props.source].meta"
                     />
                 </template>
                 <template v-else>
@@ -141,7 +142,7 @@
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
 import Dropdown from '@/components/Dropdown.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
 import { computedAsync } from '@vueuse/core';
 import { initFlowbite } from 'flowbite';
@@ -155,10 +156,9 @@ const props = defineProps({
   resource: Object,
   record: Object,
   validating: Boolean,
-  customComponentsPerColumn: Object,
+  source: String,
 });
 
-
 const unmasked = ref({});
 
 const mode = computed(() => props.record  && Object.keys(props.record).length ? 'edit' : 'create');

package/spa/src/components/ResourceListTable.vue

@@ -35,8 +35,10 @@
         </th>
 
         <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
+         
           <div @click="() => c.sortable && onSortButtonClick(c.name)" class="flex items-center " :class="{'cursor-pointer':c.sortable}">
             {{ c.label }}
+            
 
             <div v-if="c.sortable"
                 :style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
@@ -52,6 +54,12 @@
                   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>
             </div>
+            <span
+             class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
+             v-if="sort.findIndex((s) => s.field === c.name) !== -1">
+            {{ sort.findIndex((s) => s.field === c.name) + 1 }}
+            </span>
+
           </div>
         </th>
 
@@ -136,7 +144,7 @@
           <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
           <component
             :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
-            :meta="c?.components?.list.meta"
+            :meta="c?.components?.list?.meta"
             :column="c"
             :record="row"
             :adminUser="coreStore.adminUser"
@@ -376,7 +384,7 @@ const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').
 function onSortButtonClick(field) {
   const sortIndex = sort.value.findIndex((s) => s.field === field);
   if (sortIndex === -1) {
-    sort.value = [{field, direction: 'asc'}, ...sort.value];
+    sort.value = [...sort.value,{field, direction: 'asc'}];
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {

package/spa/src/views/CreateView.vue

@@ -50,7 +50,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="createComponentsPerColumn"
+      :source="'create'"
     >
     </ResourceForm>
 
@@ -91,7 +91,6 @@ const route = useRoute();
 const router = useRouter();
 
 const record = ref({});
-let createComponentsPerColumn = {};
 
 const coreStore = useCoreStore();
 
@@ -115,12 +114,6 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
-  createComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.create) {
-          acc[column.name] = getCustomComponent(column.components.create);
-      }
-      return acc;
-    }, {});
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
 });

package/spa/src/views/EditView.vue

@@ -46,7 +46,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="editComponentsPerColumn"
+      :source="'edit'"
     >
     </ResourceForm>
 
@@ -88,7 +88,6 @@ const loading = ref(false);
 const saving = ref(false);
 
 const record = ref({});
-let editComponentsPerColumn = {};
 
 async function onUpdateRecord(newRecord) {
   record.value = newRecord;
@@ -119,13 +118,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
-
-  editComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.edit) {
-          acc[column.name] = getCustomComponent(column.components.edit);
-      }
-      return acc;
-    }, {});
   loading.value = false;
 });
 

package/spa/src/views/ListView.vue

@@ -70,7 +70,7 @@
           class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
           v-if="filtersStore.filters.length">
             {{ filtersStore.filters.length }}
-          </span>
+        </span>
       </button>
     </BreadcrumbsWithButtons>
 

package/spa/src/views/ShowView.vue

@@ -75,8 +75,8 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
                   <component
-                    v-if="showComponentsPerColumn[column.name]"
-                    :is="showComponentsPerColumn[column.name]"
+                    v-if="column?.components?.show"
+                    :is="getCustomComponent(column?.components?.show)"
                     :resource="coreStore.resource"
                     :meta="column.components.show.meta"
                     :column="column"
@@ -127,7 +127,6 @@ const item = ref(null);
 const route = useRoute();
 const router = useRouter();
 const loading = ref(false);
-let showComponentsPerColumn = {};
 
 console.log(route.params,'showWiev');
 
@@ -145,13 +144,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-
-  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.show) {
-          acc[column.name] = getCustomComponent(column.components.show);
-      }
-      return acc;
-  }, {});
   loading.value = false;
 });
 

package/types/FrontendAPI.ts

@@ -34,7 +34,9 @@ export interface FrontendAPIInterface {
      */
     alert(params:AlertParams): void;
     /**
-     * Add a filter to the list of filters
+     * Add a filter to the list of filters.
+     * Works only when user located on the list page.
+     * Can be used to set filter from charts or other components in pageInjections.
      * 
      * Example:
      *