adminforth 1.1.34 → 1.1.36

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

@@ -1,21 +1,38 @@
 <template>
   <div class="relative">
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :meta="c.meta"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
     <BreadcrumbsWithButtons>
-      <RouterLink :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex 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"
+      <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
+        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default 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"
       >
         <IconPenSolid class="w-4 h-4" />
         Edit
       </RouterLink>
 
-      <button  @click="deleteRecord"
-        class="flex items-center py-1 px-3 mb-2 text-sm font-medium text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
+        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         Delete
       </button>
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :meta="c.meta"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
     <div v-if="loading" role="status" class="max-w-sm animate-pulse">
         <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
         <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
@@ -29,7 +46,7 @@
       v-else
       class="relative overflow-x-auto shadow-resourse-form-shadow "
     >
-     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
         <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
@@ -41,23 +58,49 @@
             </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.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
-                <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
+              <component
+                v-if="column.components?.showRow"
+                  :is="getCustomComponent(column.components.showRow)"
+                  :meta="column.components.showRow.meta"
+                  :column="column"
+                  :resource="coreStore.resource"
+                  :record="coreStore.record"
+              />
+              <template v-else>
+                <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
+                  {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <component
-                        :is="showComponentsPerColumn[column.name] || ValueRenderer"
-                        :column="column"
-                        :row="coreStore.record"
-                    />
+                  <component
+                    v-if="showComponentsPerColumn[column.name]"
+                    :is="showComponentsPerColumn[column.name]"
+                    :resource="coreStore.resource"
+                    :meta="column.components.show.meta"
+                    :column="column"
+                    :record="coreStore.record"
+                  />
+                  <ValueRenderer v-else 
+                    :column="column" 
+                    :record="coreStore.record"
+                  />
                 </td>
+              </template>
             </tr>
-            
         </tbody>
     </table>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
+      :is="getCustomComponent(c)"
+      :meta="c.meta"
+      :column="column"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
 </div>
 
 
@@ -68,37 +111,78 @@
 <script setup>
 
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
+
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
-import { getCustomComponent } from '@/utils';
+import { useModalStore } from '@/stores/modal';
+import { getCustomComponent, checkAcessByAllowedActions } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute,useRouter } from 'vue-router';
+import {callAdminForthApi} from '@/utils';
+import {showSuccesTost} from '@/composables/useFrontendApi';
 
 
 const item = ref(null);
 const route = useRoute();
+const router = useRouter();
 const loading = ref(false);
 let showComponentsPerColumn = {};
 
+console.log(route.params,'showWiev');
+
+
 const coreStore = useCoreStore();
+const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
-  await coreStore.fetchColumns({
+  await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
-  showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.show) {
-          acc[column.name] = getCustomComponent(column.component.show);
+  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;
 });
 
+async function deleteRecord(row) {
+  const data = await window.adminforth.confirm({
+    message: 'Are you sure you want to delete this item?',
+    yes: 'Delete',
+    no: 'Cancel',
+  });
+  if (data) {
+    try {
+      const res = await callAdminForthApi({
+      path: '/delete_record',
+      method: 'POST',
+      body: {
+        resourceId: route.params.resourceId,
+        primaryKey: route.params.primaryKey,
+      }});
+      if (!res.error){
+        router.push({ name: 'resource-list', params: { resourceId: route.params.resourceId } });
+        showSuccesTost('Record deleted successfully')
+      } else {
+        console.error(res.error)
+      }
+
+    } catch (e) {
+      console.error(e);
+      };
+    }
+
+    
+}
+
 </script>

package/dist/spa/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content:  ["./src/**/*.{vue, js}","./src/*.{vue, js}", "./index.html", "./node_modules/flowbite/**/*.js"],
+  content:  ["./src/**/*.{vue, js, ts, tsx}","./src/*.{vue, js, ts, tsx}", "./index.html", "./node_modules/flowbite/**/*.js"],
   theme: {
     extend: {
       /* IMPORTANT:ADMINFORTH TAILWIND STYLES */

package/dist/spa/vite.config.ts

@@ -11,6 +11,12 @@ const customLogger = {
       console.log(msg);
     }
   },
+  warnOnce(msg: string) {
+    console.warn('warn once', msg);
+    if (!this.hasWarned) {
+      this.hasWarned = true;
+    }
+  },
   warn(msg: string) {
     console.warn(msg);
   },

package/index.ts

@@ -173,7 +173,7 @@ class AdminForth implements AdminForthClass {
       errors.push(...this.checkCustomFileExists(this.config.customization.brandLogo));
     }
 
-    if (!this.config.customization.favicon) {
+    if (this.config.customization.favicon) {
       errors.push(...this.checkCustomFileExists(this.config.customization.favicon));
     }
 
@@ -732,16 +732,26 @@ class AdminForth implements AdminForthClass {
       },
     });
 
-    async function interpretResource(adminUser: AdminUser, resource: AdminForthResource, meta: any, source: ActionCheckSource) {
+    async function interpretResource(adminUser: AdminUser, resource: AdminForthResource, meta: any, source: ActionCheckSource): Promise<AdminForthResource> {
+      const newResource = JSON.parse(JSON.stringify(resource));
+      if (process.env.HEAVY_DEBUG) {
+        console.log('🪲Interpreting resource', resource.resourceId, source);
+      }
+
       await Promise.all(
         Object.entries(resource.options?.allowedActions || {}).map(
           async ([key, value]: [string, AllowedActionValue]) => {
-          // if callable then call
-          if (typeof value === 'function') {
-            resource.options.allowedActions[key] = await value({ adminUser, resource, meta, source });
-          }
-        })
+            if (process.env.HEAVY_DEBUG) {
+              console.log('🪲checking for allowed call', key, 'value:', value, 'typeof', typeof value);
+            }
+          
+            // if callable then call
+            if (typeof value === 'function') {
+              resource.options.allowedActions[key] = await value({ adminUser, resource, meta, source });
+            }
+          })
       );
+      return newResource;
     }
 
     function checkAccess(action: AllowedActionsEnum, resource: AdminForthResource): { allowed: boolean, error?: string } {
@@ -764,12 +774,12 @@ class AdminForth implements AdminForthClass {
         if (this.statuses.dbDiscover !== 'done') {
           return { error : 'Database discovery is still in progress, please try later' };
         }
-        const resource = this.config.resources.find((res) => res.resourceId == resourceId);
-        if (!resource) {
+        const configResource = this.config.resources.find((res) => res.resourceId == resourceId);
+        if (!configResource) {
           return { error: `Resource ${resourceId} not found` };
         }
 
-        await interpretResource(adminUser, resource, {}, ActionCheckSource.DisplayButtons);
+        const resource = await interpretResource(adminUser, configResource, {}, ActionCheckSource.DisplayButtons);
 
         // exclude "plugins" key
         return { resource: { ...resource, plugins: undefined } };
@@ -789,12 +799,12 @@ class AdminForth implements AdminForthClass {
         if (this.statuses.dbDiscover !== 'done') {
           return { error : 'Database discovery is still in progress, please try later' };
         }
-        const resource = this.config.resources.find((res) => res.resourceId == resourceId);
-        if (!resource) {
+        const configResource = this.config.resources.find((res) => res.resourceId == resourceId);
+        if (!configResource) {
           return { error: `Resource ${resourceId} not found` };
         }
 
-        await interpretResource(adminUser, resource, { requestBody: body }, ActionCheckSource.DisplayButtons);
+        const resource = await interpretResource(adminUser, configResource, { requestBody: body }, ActionCheckSource.DisplayButtons);
 
         const { allowed, error } = checkAccess(source as AllowedActionsEnum, resource);
         if (!allowed) {
@@ -1014,11 +1024,11 @@ class AdminForth implements AdminForthClass {
         method: 'POST',
         path: '/create_record',
         handler: async ({ body, adminUser }) => {
-            const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
-            if (!resource) {
+            const configResource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
+            if (!configResource) {
                 return { error: `Resource '${body['resourceId']}' not found` };
             }
-            await interpretResource(adminUser, resource, { requestBody: body}, ActionCheckSource.CreateRequest);
+            const resource = await interpretResource(adminUser, configResource, { requestBody: body}, ActionCheckSource.CreateRequest);
 
             const { allowed, error } = checkAccess(AllowedActionsEnum.create, resource);
             if (!allowed) {
@@ -1095,21 +1105,21 @@ class AdminForth implements AdminForthClass {
         method: 'POST',
         path: '/update_record',
         handler: async ({ body, adminUser }) => {
-            const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
-            if (!resource) {
+            const configResource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
+            if (!configResource) {
                 return { error: `Resource '${body['resourceId']}' not found` };
             }
             
             const recordId = body['recordId'];
-            const connector = this.connectors[resource.dataSource];
-            const oldRecord = await connector.getRecordByPrimaryKey(resource, recordId)
+            const connector = this.connectors[configResource.dataSource];
+            const oldRecord = await connector.getRecordByPrimaryKey(configResource, recordId)
             if (!oldRecord) {
-                const primaryKeyColumn = resource.columns.find((col) => col.primaryKey);
+                const primaryKeyColumn = configResource.columns.find((col) => col.primaryKey);
                 return { error: `Record with ${primaryKeyColumn.name} ${recordId} not found` };
             }
             const record = body['record'];
 
-            await interpretResource(adminUser, resource, { requestBody: body, record, oldRecord}, ActionCheckSource.EditRequest);
+            const resource = await interpretResource(adminUser, configResource, { requestBody: body, record, oldRecord}, ActionCheckSource.EditRequest);
 
             const { allowed, error } = checkAccess(AllowedActionsEnum.edit, resource);
             if (!allowed) {
@@ -1168,19 +1178,19 @@ class AdminForth implements AdminForthClass {
         method: 'POST',
         path: '/delete_record',
         handler: async ({ body, adminUser }) => {
-            const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
-            const record = await this.connectors[resource.dataSource].getRecordByPrimaryKey(resource, body['primaryKey']);
-            if (!resource) {
+            const configResource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
+            const record = await this.connectors[configResource.dataSource].getRecordByPrimaryKey(configResource, body['primaryKey']);
+            if (!configResource) {
                 return { error: `Resource '${body['resourceId']}' not found` };
             }
             if (!record){
                 return { error: `Record with ${body['primaryKey']} not found` };
             }
-            if (resource.options.allowedActions.delete === false) {
-                return { error: `Resource '${resource.resourceId}' does not allow delete action` };
+            if (configResource.options.allowedActions.delete === false) {
+                return { error: `Resource '${configResource.resourceId}' does not allow delete action` };
             }
 
-            await interpretResource(adminUser, resource, { requestBody: body }, ActionCheckSource.DeleteRequest);
+            const resource = await interpretResource(adminUser, configResource, { requestBody: body }, ActionCheckSource.DeleteRequest);
 
             const { allowed, error } = checkAccess(AllowedActionsEnum.delete, resource);
             if (!allowed) {

package/package.json

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

package/spa/src/components/ResourceListTable.vue

@@ -118,7 +118,7 @@
         </td>
       </tr>
 
-      <tr @click="onClick"   v-else v-for="(row, rowI) in rows" :key="row.id"
+      <tr v-else v-for="(row, rowI) in rows" :key="row.id"
           class="bg-list-view-table-bg border-b dark:bg-gray-800 border-list-view-border-color dark:border-gray-700 hover:bg-list-view-table-row-hover dark:hover:bg-gray-600">
         <td class="w-4 p-4">
           <div class="flex items center">
@@ -385,15 +385,6 @@ function onSortButtonClick(field) {
   }
 }
 
-const mouseDownTime = ref(0);
-
-
-
-
-
-
-
-
 async function deleteRecord(row) {
   const data = await window.adminforth.confirm({
     message: 'Are you sure you want to delete this item?',

package/types/AdminForthConfig.ts

@@ -754,9 +754,6 @@ export type AdminForthConfig = {
        */
       favicon?: string,
 
-      /**
-      favicon?: string,
-
       /**
        * DayJS format string for all dates in the app
        */

package/dist/plugins/AccessControl/index.js

@@ -1,66 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { AllowedActionsEnum } from "../../types/AdminForthConfig.js";
-import AdminForthPlugin from "../base.js";
-class AccessControlPlugin extends AdminForthPlugin {
-    constructor(options) {
-        super(options, import.meta.url);
-        this.options = options;
-    }
-    modifyResourceConfig(adminforth, resourceConfig) {
-        super.modifyResourceConfig(adminforth, resourceConfig);
-        this.adminforth = adminforth;
-        if (!resourceConfig.hooks) {
-            resourceConfig.hooks = {};
-        }
-        const checkAccess = (adminUser, action, meta) => __awaiter(this, void 0, void 0, function* () {
-            const hasAccessOrError = yield this.options.hasAccess(adminUser, action, meta);
-            if (hasAccessOrError === true) {
-                return { ok: true };
-            }
-            else {
-                return { ok: false, error: hasAccessOrError || AccessControlPlugin.defaultError };
-            }
-        });
-        const bindHookCheck = (action, hookName) => {
-            if (!resourceConfig.hooks[action]) {
-                resourceConfig.hooks[action] = {};
-            }
-            if (!resourceConfig.hooks[action][hookName]) {
-                resourceConfig.hooks[action][hookName] = [];
-            }
-            if (hookName === 'beforeDatasourceRequest') {
-                resourceConfig.hooks[action][hookName].unshift((_a) => __awaiter(this, [_a], void 0, function* ({ adminUser, query }) {
-                    return checkAccess(adminUser, action, { query });
-                }));
-            }
-            else {
-                resourceConfig.hooks[action][hookName].unshift((_b) => __awaiter(this, [_b], void 0, function* ({ adminUser, record }) {
-                    return checkAccess(adminUser, action, { record });
-                }));
-            }
-        };
-        // List check
-        bindHookCheck(AllowedActionsEnum.list, 'beforeDatasourceRequest');
-        // Show check
-        bindHookCheck(AllowedActionsEnum.show, 'beforeDatasourceRequest');
-        // Edit check
-        bindHookCheck(AllowedActionsEnum.edit, 'beforeDatasourceRequest');
-        // create check
-        bindHookCheck(AllowedActionsEnum.create, 'beforeSave');
-        // edit check
-        bindHookCheck(AllowedActionsEnum.edit, 'beforeSave');
-        // delete check
-        bindHookCheck(AllowedActionsEnum.delete, 'beforeSave');
-        console.log('resourceConfig', resourceConfig);
-    }
-}
-AccessControlPlugin.defaultError = 'Sorry, you do not have access to this resource.';
-export default AccessControlPlugin;

package/dist/plugins/AccessControl/types.js

@@ -1 +0,0 @@
-export {};

package/dist/types.js

@@ -1,30 +0,0 @@
-// typical types which AdminForth supports
-//
-export const AdminForthTypes = {
-    STRING: 'string',
-    INTEGER: 'integer',
-    FLOAT: 'float',
-    DECIMAL: 'decimal',
-    BOOLEAN: 'boolean',
-    DATE: 'date',
-    DATETIME: 'datetime',
-    TIME: 'time',
-    TEXT: 'text',
-    JSON: 'json',
-};
-export const AdminForthFilterOperators = {
-    EQ: 'eq',
-    NE: 'ne',
-    GT: 'gt',
-    LT: 'lt',
-    GTE: 'gte',
-    LTE: 'lte',
-    LIKE: 'like',
-    ILIKE: 'ilike',
-    IN: 'in',
-    NIN: 'nin',
-};
-export const AdminForthSortDirections = {
-    ASC: 'asc',
-    DESC: 'desc',
-};