adminforth 1.1.31 → 1.1.33

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>
@@ -27,10 +44,10 @@
     </div>
     <div 
       v-else
-      class="relative overflow-x-auto shadow-md sm:rounded-lg"
+      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">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 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">
                     Field
@@ -41,19 +58,49 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
+            <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">
-                    <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>
 
 
@@ -63,31 +110,79 @@
 
 <script setup>
 
-import { ref, computed, onMounted } from 'vue';  
-import { useRoute } from 'vue-router';
-import { callAdminForthApi } from '@/utils';
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
-import { useCoreStore } from '@/stores/core';
+
 import ValueRenderer from '@/components/ValueRenderer.vue';
+import { useCoreStore } from '@/stores/core';
+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,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,
   });
+  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,9 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content:  ["./src/**/*.{vue, js}", "./node_modules/flowbite/**/*.js"],
+  content:  ["./src/**/*.{vue, js, ts, tsx}","./src/*.{vue, js, ts, tsx}", "./index.html", "./node_modules/flowbite/**/*.js"],
   theme: {
-    extend: {},
+    extend: {
+      /* IMPORTANT:ADMINFORTH TAILWIND STYLES */
+  }
   },
+
   darkMode: 'class',
   plugins: [
     require('flowbite/plugin'),

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

@@ -49,6 +49,8 @@ class AdminForth implements AdminForthClass {
   runningHotReload: boolean;
   activatedPlugins: Array<AdminForthPlugin>;
 
+  baseUrlSlashed: string;
+
   statuses: {
     dbDiscover?: 'running' | 'done',
   }
@@ -159,6 +161,11 @@ class AdminForth implements AdminForthClass {
     if (!this.config.baseUrl) {
       this.config.baseUrl = '';
     }
+    if (!this.config.baseUrl.endsWith('/')) {
+      this.baseUrlSlashed = this.config.baseUrl + '/';
+    } else {
+      this.baseUrlSlashed = this.config.baseUrl;
+    }
     if (!this.config?.customization.brandName) {
       this.config.customization.brandName = 'AdminForth';
     }
@@ -166,6 +173,10 @@ class AdminForth implements AdminForthClass {
       errors.push(...this.checkCustomFileExists(this.config.customization.brandLogo));
     }
 
+    if (!this.config.customization.favicon) {
+      errors.push(...this.checkCustomFileExists(this.config.customization.favicon));
+    }
+
     if (!this.config.customization.datesFormat) {
       this.config.customization.datesFormat = 'MMM D, YYYY HH:mm:ss';
     }

package/modules/codeInjector.ts

@@ -209,6 +209,18 @@ class CodeInjector implements CodeInjectorType {
         this.srcFoldersToSync[this.adminforth.config.customization.customComponentsDir] = './'
       }
 
+      // if this.adminforth.config.customization.favicon is set, copy it to assets
+      const customFav = this.adminforth.config.customization?.favicon;
+      if (customFav) {
+
+        const faviconPath = path.join(this.adminforth.config.customization?.customComponentsDir, customFav.replace('@@/', ''));
+        const dest = path.join(CodeInjector.SPA_TMP_PATH, 'public', 'assets', customFav.replace('@@/', ''));
+        // make sure all folders in dest exist
+        await fsExtra.ensureDir(path.dirname(dest));
+
+        await fsExtra.copy(faviconPath, dest);
+      }
+
       for (const [src, dest] of Object.entries(this.srcFoldersToSync)) {
         const to = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom', dest);
         if (process.env.HEAVY_DEBUG) {
@@ -343,7 +355,6 @@ class CodeInjector implements CodeInjectorType {
       await fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
     }
 
-
     const routerVuePath = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'router', 'index.ts');
 
     let routerVueContent = await fs.promises.readFile(routerVuePath, 'utf-8');
@@ -353,6 +364,13 @@ class CodeInjector implements CodeInjectorType {
     const indexHtmlPath = path.join(CodeInjector.SPA_TMP_PATH, 'index.html');
     let indexHtmlContent = await fs.promises.readFile(indexHtmlPath, 'utf-8');
     indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH TITLE */', `${this.adminforth.config.customization.title || 'AdminForth'}`);
+    
+    indexHtmlContent = indexHtmlContent.replace(
+      '/* IMPORTANT:ADMINFORTH FAVICON */',
+      this.adminforth.config.customization.favicon?.replace('@@/', `${this.adminforth.baseUrlSlashed}assets/`)
+          ||
+       `${this.adminforth.baseUrlSlashed}assets/favicon.png`
+    );
     await fs.promises.writeFile(indexHtmlPath, indexHtmlContent);
 
 

package/modules/styles.ts

@@ -27,10 +27,10 @@ export const styles = () => `
 
     "list-view-bg": "#FFFFFF", // White background
     "list-view-table-bg": "#FFFFFF", // White table background
-    "list-view-table-heading": "#F5F5F5", // Very light grey heading
+    "list-view-table-heading": "rgb(249 250 251)", // Very light grey heading
     "list-view-table-heading-text": "#333333", // Dark grey heading text
     "list-view-table-text": "#333333", // Dark grey text
-    "list-view-table-row-hover": "#F0F0F0", // Very light grey row hover
+    "list-view-table-row-hover": "rgb(249 250 251)", // Very light grey row hover
     "list-view-bread-crumbs-text": "#666666", // Medium grey bread crumbs
     "list-view-border-color": "#DDDDDD", // Light grey border
 

package/package.json

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

package/spa/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.png">
+    <link rel="icon" href="/* IMPORTANT:ADMINFORTH FAVICON */">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>/* IMPORTANT:ADMINFORTH TITLE */</title>
 <!--     

package/spa/src/App.vue

@@ -59,17 +59,18 @@
 
     v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
-    id="logo-sidebar" class="fixed border-none top-0 left-0 z-20 w-64 h-screen  transition-transform bg-nav-menu-bg border-r border-nav-menu-border  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" 
+    id="logo-sidebar" class="fixed border-none top-0 left-0 z-20 w-64 h-screen  transition-transform  border-r border-nav-menu-border  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" 
     :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
     aria-label="Sidebar"
   >
-    <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800 border-r">
+    <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800 border-r">
       <div class="flex ms-2 md:me-24  m-4  ">
         <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
         <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
           {{ coreStore.config?.brandName }}
         </span>
       </div>
+
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
             <div v-if="item.type === 'divider'" class="border-t border-nav-menu-devider dark:border-gray-700"></div>

package/spa/src/components/ResourceForm.vue

@@ -48,7 +48,7 @@
                         single
                         v-if="column.foreignResource"
                         :options="columnOptions[column.name] || []"
-                        :placeholder = "columnOptions[column.name].length || 'There are no options available'"
+                        :placeholder = "columnOptions[column.name]?.length || 'There are no options available'"
                         :modelValue="currentValues[column.name]"
                         @update:modelValue="setCurrentValue(column.name, $event)"
                     ></Dropdown>

package/types/AdminForthConfig.ts

@@ -742,6 +742,21 @@ export type AdminForthConfig = {
        */
       brandLogo?: string,
 
+      /**
+       * Path to your app favicon
+       * 
+       * Example: 
+       * Place file `favicon.png` to `./custom` folder and set this option:
+       * 
+       * ```ts
+       * favicon: '@@/favicon.png',
+       * ```
+       */
+      favicon?: string,
+
+      /**
+      favicon?: string,
+
       /**
        * DayJS format string for all dates in the app
        */

package/dist/plugins/AccessControl/index.js

@@ -1,13 +0,0 @@
-import AdminForthPlugin from "../base.js";
-class AuditLogPlugin extends AdminForthPlugin {
-    constructor(options) {
-        super(options, import.meta.url);
-        this.options = options;
-    }
-    modifyResourceConfig(adminforth, resourceConfig) {
-        super.modifyResourceConfig(adminforth, resourceConfig);
-        this.adminforth = adminforth;
-    }
-}
-AuditLogPlugin.defaultError = 'Sorry, you do not have access to this resource.';
-export default AuditLogPlugin;

package/dist/plugins/AccessControl/types.js

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

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

@@ -1,248 +0,0 @@
-<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/spa/.eslintrc.cjs

@@ -1,14 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-  root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript'
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest'
-  }
-}