adminforth 1.1.20 → 1.1.22

package/dist/index.js

@@ -23,10 +23,9 @@ import ExpressServer from './servers/express.js';
 import { v1 as uuid } from 'uuid';
 import fs from 'fs';
 import { ADMINFORTH_VERSION, listify } from './modules/utils.js';
-import { AdminForthFilterOperators, AdminForthDataTypes, AdminForthResourcePages } from './types/AdminForthConfig.js';
+import { AdminForthFilterOperators, AdminForthDataTypes, AdminForthResourcePages, AllowedActionsEnum } from './types/AdminForthConfig.js';
 import path from 'path';
 //get array from enum AdminForthResourcePages
-const DEFAULT_ALLOWED_ACTIONS = { create: true, edit: true, show: true, delete: true };
 class AdminForth {
     constructor(config) {
         _AdminForth_defaultConfig.set(this, {
@@ -211,6 +210,30 @@ class AdminForth {
                 if (!res.options) {
                     res.options = { bulkActions: [], allowedActions: {} };
                 }
+                if (!res.options.allowedActions) {
+                    res.options.allowedActions = {
+                        all: true,
+                    };
+                }
+                if (Object.keys(res.options.allowedActions).includes('all')) {
+                    if (Object.keys(res.options.allowedActions).length > 1) {
+                        errors.push(`Resource "${res.resourceId}" allowedActions cannot have "all" and other keys at same time: ${Object.keys(res.options.allowedActions).join(', ')}`);
+                    }
+                    for (const key of Object.keys(AllowedActionsEnum)) {
+                        if (key !== 'all') {
+                            res.options.allowedActions[key] = res.options.allowedActions.all;
+                        }
+                    }
+                    delete res.options.allowedActions.all;
+                }
+                else {
+                    // by default allow all actions
+                    for (const key of Object.keys(AllowedActionsEnum)) {
+                        if (!Object.keys(res.options.allowedActions).includes(key)) {
+                            res.options.allowedActions[key] = true;
+                        }
+                    }
+                }
                 //check if resource has bulkActions
                 if ((_b = res.options) === null || _b === void 0 ? void 0 : _b.bulkActions) {
                     let bulkActions = res.options.bulkActions;
@@ -256,18 +279,6 @@ class AdminForth {
                         });
                     }
                 }
-                //add default allowedActions to resources
-                if (res.options.allowedActions) {
-                    //check if allowedActions is an object
-                    if (typeof res.options.allowedActions !== 'object') {
-                        errors.push(`Resource "${res.resourceId}" allowedActions must be an object`);
-                    }
-                    const userAllowedActions = res.options.allowedActions;
-                    res.options.allowedActions = Object.assign({}, DEFAULT_ALLOWED_ACTIONS, userAllowedActions);
-                }
-                else {
-                    res.options.allowedActions = DEFAULT_ALLOWED_ACTIONS;
-                }
                 // transform all hooks Functions to array of functions
                 if (res.hooks) {
                     for (const value of [res.hooks.show, res.hooks.list]) {
@@ -622,10 +633,29 @@ class AdminForth {
                 };
             }),
         });
+        function interpretResource(adminUser, resource, meta) {
+            return __awaiter(this, void 0, void 0, function* () {
+                var _b;
+                yield Promise.all(Object.entries(((_b = resource.options) === null || _b === void 0 ? void 0 : _b.allowedActions) || {}).map((_c) => __awaiter(this, [_c], void 0, function* ([key, value]) {
+                    // if callable then call
+                    if (typeof value === 'function') {
+                        resource.options.allowedActions[key] = yield value(adminUser, resource, meta);
+                    }
+                })));
+            });
+        }
+        function checkAccess(action, resource) {
+            var _b;
+            const allowed = (_b = resource.options) === null || _b === void 0 ? void 0 : _b.allowedActions[action];
+            if (allowed !== true) {
+                return { error: typeof allowed === 'string' ? allowed : 'Action is not allowed', allowed: false };
+            }
+            return { allowed: true };
+        }
         server.endpoint({
             method: 'POST',
             path: '/get_resource',
-            handler: (_l) => __awaiter(this, [_l], void 0, function* ({ body }) {
+            handler: (_l) => __awaiter(this, [_l], void 0, function* ({ body, adminUser }) {
                 const { resourceId } = body;
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -637,6 +667,7 @@ class AdminForth {
                 if (!resource) {
                     return { error: `Resource ${resourceId} not found` };
                 }
+                yield interpretResource(adminUser, resource, {});
                 // exclude "plugins" key
                 return { resource: Object.assign(Object.assign({}, resource), { plugins: undefined }) };
             }),
@@ -660,6 +691,12 @@ class AdminForth {
                 if (!resource) {
                     return { error: `Resource ${resourceId} not found` };
                 }
+                yield interpretResource(adminUser, resource, { requestBody: body });
+                const { allowed, error } = checkAccess(source, resource);
+                console.log('allowed', allowed, error);
+                if (!allowed) {
+                    return { error };
+                }
                 for (const hook of listify((_p = (_o = resource.hooks) === null || _o === void 0 ? void 0 : _o[source]) === null || _p === void 0 ? void 0 : _p.beforeDatasourceRequest)) {
                     const resp = yield hook({ resource, query: body, adminUser });
                     if (!resp || (!resp.ok && !resp.error)) {
@@ -679,7 +716,7 @@ class AdminForth {
                     }
                     if (filter.operator === AdminForthFilterOperators.IN || filter.operator === AdminForthFilterOperators.NIN) {
                         if (!Array.isArray(filter.value)) {
-                            throw new Error(`Value for operator '${filter.operator}'' should be an array`);
+                            throw new Error(`Value for operator '${filter.operator}' should be an array`);
                         }
                     }
                     if (filter.operator === AdminForthFilterOperators.IN && filter.value.length === 0) {
@@ -850,11 +887,15 @@ class AdminForth {
             path: '/create_record',
             handler: (_y) => __awaiter(this, [_y], void 0, function* ({ body, adminUser }) {
                 var _z, _0, _1, _2, _3;
-                console.log('create_record', body, this.config.resources);
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
                 }
+                yield interpretResource(adminUser, resource, { requestBody: body });
+                const { allowed, error } = checkAccess(AllowedActionsEnum.create, resource);
+                if (!allowed) {
+                    return { error };
+                }
                 const record = body['record'];
                 // execute hook if needed
                 for (const hook of listify((_0 = (_z = resource.hooks) === null || _z === void 0 ? void 0 : _z.create) === null || _0 === void 0 ? void 0 : _0.beforeSave)) {
@@ -922,6 +963,11 @@ class AdminForth {
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
                 }
+                yield interpretResource(adminUser, resource, { requestBody: body });
+                const { allowed, error } = checkAccess(AllowedActionsEnum.edit, resource);
+                if (!allowed) {
+                    return { error };
+                }
                 const recordId = body['recordId'];
                 const connector = this.connectors[resource.dataSource];
                 const oldRecord = yield connector.getRecordByPrimaryKey(resource, recordId);
@@ -989,6 +1035,11 @@ class AdminForth {
                 if (resource.options.allowedActions.delete === false) {
                     return { error: `Resource '${resource.resourceId}' does not allow delete action` };
                 }
+                yield interpretResource(adminUser, resource, { requestBody: body });
+                const { allowed, error } = checkAccess(AllowedActionsEnum.delete, resource);
+                if (!allowed) {
+                    return { error };
+                }
                 // execute hook if needed
                 for (const hook of listify((_11 = (_10 = resource.hooks) === null || _10 === void 0 ? void 0 : _10.delete) === null || _11 === void 0 ? void 0 : _11.beforeSave)) {
                     const resp = yield hook({ resource, record, adminUser });

package/dist/plugins/AccessControl/index.js

@@ -1,15 +1,5 @@
-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 {
+class AuditLogPlugin extends AdminForthPlugin {
     constructor(options) {
         super(options, import.meta.url);
         this.options = options;
@@ -17,50 +7,7 @@ class AccessControlPlugin extends AdminForthPlugin {
     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;
+AuditLogPlugin.defaultError = 'Sorry, you do not have access to this resource.';
+export default AuditLogPlugin;

package/dist/plugins/AuditLog/index.js

@@ -0,0 +1,66 @@
+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/AuditLog/types.js

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

package/dist/plugins/ForeignInlineListPlugin/custom/InlineList.vue

@@ -104,6 +104,7 @@ import {
   IconFilterOutline,
   IconPlusOutline,
 } from '@iconify-prerendered/vue-flowbite';
+import { showErrorTost, showWarningTost, showSuccesTost} from '@/composables/useFrontendApi';
 
 import { getIcon } from '@/utils';
 
@@ -145,10 +146,7 @@ const endFilters = computed(() => {
   const primaryKeyColumn = selfPrimaryKeyColumn.value;
 
   if (!refColumn) {
-    window.adminforth.alert({
-      message: `Column with foreignResource.resourceId which is equal to '${props.resource.resourceId}' not found in resource which is specified as foreighResourceId '${listResource.value.resourceId}'`,
-      variant: 'danger',
-    });
+    showErrorTost(`Column with foreignResource.resourceId which is equal to '${props.resource.resourceId}' not found in resource which is specified as foreighResourceId '${listResource.value.resourceId}'`,10000);
     return [];
   }
   return [
@@ -209,11 +207,7 @@ async function getList() {
   });
 
   if (data.error) {
-    window.adminforth.alert({
-      message: data.error,
-      variant: 'danger',
-      timeout: 'unlimited',
-    });
+    showErrorTost(data.error);
     rows.value = [];
     totalRows.value = 0;
     return;

package/dist/plugins/plugins/ForeignInlineListPlugin/custom/InlineList.vue

@@ -0,0 +1,248 @@
+<template>
+  <Teleport to="body">
+    <!-- todo exclude foreign column-->
+    <Filters
+      v-if="listResource"
+      :columns="listResource.columns.filter((c) => c.name !== listResourceRefColumn.name)"
+      v-model:filters="filters"
+      :columnsMinMax="columnsMinMax"
+      :show="filtersShow"
+      @hide="filtersShow = false"
+    />
+  </Teleport>
+    
+  <td colspan="2">
+    <div class="flex items-center gap-1">
+      <h4 v-if="listResource"
+          class="px-6 py-4"
+      >{{ listResource.label }} inline records</h4>
+
+      <button
+        @click="()=>{checkboxes = []}"
+        v-if="checkboxes.length"
+        data-tooltip-target="tooltip-remove-all"
+        data-tooltip-placement="bottom"
+        class="flex gap-1  items-center py-1 px-3 me-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"
+      >
+        <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
+          <div class="tooltip-arrow" data-popper-arrow></div>
+        </div>
+      </button>
+
+      <button
+        v-if="checkboxes.length" 
+        v-for="(action,i) in listResource?.options?.bulkActions" 
+        :key="action.id"
+        @click="startBulkAction(action.id)"
+        class="flex gap-1 items-center py-1 px-3 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"
+        :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
+        'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
+        }"
+      >
+        <component
+          v-if="action.icon"
+          :is="getIcon(action.icon)"
+          class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"></component>
+
+        {{ `${action.label} (${checkboxes.length})` }}
+      </button>
+
+      <RouterLink v-if="listResource?.options?.allowedActions?.create"
+        :to="{ 
+          name: 'resource-create', 
+          params: { resourceId: listResource.resourceId }, 
+          query: { 
+            values: encodeURIComponent(JSON.stringify({[listResourceRefColumn.name]: props.record[selfPrimaryKeyColumn.name]})),
+            returnTo: $route.fullPath,
+          },
+       }"
+        class="flex items-center py-1 px-3 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 rounded-default"
+      >
+        <IconPlusOutline class="w-4 h-4 me-2"/>
+        Create
+      </RouterLink>
+
+      <button
+        class="flex gap-1 items-center py-1 px-3 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 rounded-default"
+        @click="()=>{filtersShow = !filtersShow}"
+      >
+        <IconFilterOutline class="w-4 h-4 me-2"/>
+        Filter
+        <span
+          class="bg-red-100 text-red-800 text-xs font-medium  px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
+          v-if="filters.length">
+            {{ filters.length }}
+          </span>
+      </button>
+
+    </div>
+
+    <ResourceListTable
+      :resource="listResource"
+      :rows="rows"
+      @update:page="page = $event"
+      @update:sort="sort = $event"
+      @update:checkboxes="checkboxes = $event"
+      :pageSize="pageSize"
+      :totalRows="totalRows"
+      :checkboxes="checkboxes"
+    />
+
+  </td>
+</template>
+
+<script setup>
+import { callAdminForthApi } from '@/utils';
+import { ref, onMounted, watch, computed  } from 'vue';
+import ResourceListTable from '@/components/ResourceListTable.vue';
+import Filters from '@/components/Filters.vue';
+import {
+  IconBanOutline,
+  IconFilterOutline,
+  IconPlusOutline,
+} from '@iconify-prerendered/vue-flowbite';
+
+import { getIcon } from '@/utils';
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const listResource = ref(null);
+const loading = ref(true);
+
+const page = ref(1);
+const sort = ref([]);
+const checkboxes = ref([]);
+const pageSize = computed(() => listResource.value?.options?.listPageSize || 10);
+
+const rows = ref(null);
+const totalRows = ref(0);
+
+const filters = ref([]);
+const filtersShow = ref(false);
+const columnsMinMax = ref(null);
+
+const listResourceRefColumn = computed(() => {
+  if (!listResource.value) {
+    return null;
+  }
+  return listResource.value.columns.find(c => c.foreignResource?.resourceId === props.resource.resourceId);
+});
+
+const selfPrimaryKeyColumn = computed(() => {
+  return props.resource.columns.find(c => c.primaryKey);
+});
+
+const endFilters = computed(() => {
+  if (!listResource.value) {
+    return [];
+  }
+  // get name of the column that is foreign key
+  const refColumn = listResourceRefColumn.value;
+
+  const primaryKeyColumn = selfPrimaryKeyColumn.value;
+
+  if (!refColumn) {
+    window.adminforth.alert({
+      message: `Column with foreignResource.resourceId which is equal to '${props.resource.resourceId}' not found in resource which is specified as foreighResourceId '${listResource.value.resourceId}'`,
+      variant: 'danger',
+    });
+    return [];
+  }
+  return [
+    ...filters.value,
+    {
+      field: refColumn.name,
+      operator: 'eq',
+      value: props.record[primaryKeyColumn.name],
+    },
+  ];
+});
+
+watch([page], async () => {
+  await getList();
+});
+
+watch([sort], async () => {
+  await getList();
+}, {deep: true});
+
+watch([filters], async () => {
+  page.value = 1;
+  checkboxes.value = [];
+  await getList();
+}, {deep: true});
+
+
+async function startBulkAction(actionId) {
+  const data = await callAdminForthApi({
+    path: '/start_bulk_action',
+    method: 'POST',
+    body: {
+      resourceId: listResource.value.resourceId,
+      actionId: actionId,
+      recordIds: checkboxes.value
+    }
+  });
+  if (data?.status === 'success') {
+    checkboxes.value = [];
+  }
+  await getList();
+}
+
+async function getList() {
+  rows.value = null;
+  console.log('getList', listResource.value)
+  const data = await callAdminForthApi({
+    path: '/get_resource_data',
+    method: 'POST',
+    body: {
+      source: 'list',
+      resourceId: listResource.value.resourceId,
+      limit: pageSize.value,
+      offset: (page.value - 1) * pageSize.value,
+      filters: endFilters.value,
+      sort: sort.value,
+    }
+  });
+
+  if (data.error) {
+    window.adminforth.alert({
+      message: data.error,
+      variant: 'danger',
+      timeout: 'unlimited',
+    });
+    rows.value = [];
+    totalRows.value = 0;
+    return;
+  }
+
+  rows.value = data.data?.map(row => {
+    row._primaryKeyValue = row[listResource.value.columns.find(c => c.primaryKey).name];
+    return row;
+  });
+  totalRows.value = data.total;
+}
+
+onMounted( async () => {
+  loading.value = true;
+  const foreighResourceId = props.meta.foreignResourceId;
+  listResource.value = (await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get_resource`,
+      method: 'POST',
+      body: {},
+  })).resource;
+  columnsMinMax.value = await callAdminForthApi({
+    path: '/get_min_max_for_columns',
+    method: 'POST',
+    body: {
+      resourceId: foreighResourceId,
+    }
+  });
+  loading.value = false;
+  await getList();
+});
+
+</script>

package/dist/spa/index.html

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