adminforth 1.1.1 → 1.1.3

package/modules/styles.ts

@@ -0,0 +1,52 @@
+export const styles = () => `
+
+  "colors": {
+    "html-bg": "#FFFFFF", // Changed to white
+    "header-bg": "#EDEDED", // Light grey
+    "header-bg-hover": "#D3D3D3", // Light grey hover
+    "header-text": "#333333", // Dark grey text
+    "header-text-hover": "#333333", // Dark grey text hover
+    "header-icons": "#333333", // Dark grey icons
+    "header-icons-hover": "#333333", // Dark grey icons hover
+    "header-logo-color": "#333333", // Dark grey logo
+    "header-border-color": "#CCCCCC", // Light grey border
+
+    "nav-menu-bg": "#F5F5F5", // Very light grey
+    "nav-menu-bg-hover": "#E0E0E0", // Light grey hover
+    "nav-menu-bg-active": "#CCCCCC", // Light grey active
+    "nav-menu-hover": "#E0E0E0", // Light grey hover
+    "nav-menu-active": "#CCCCCC", // Light grey active
+    "nav-menu-active-text": "#333333", // Dark grey active text
+    "nav-menu-text": "#333333", // Dark grey text
+    "nav-menu-text-hover": "#333333", // Dark grey text hover
+    "nav-menu-text-active": "#333333", // Dark grey text active
+    "nav-menu-devider": "#E0E0E0", // Light grey divider
+    "nav-menu-icons": "#333333", // Dark grey icons
+    "nav-menu-heading": "#333333", // Dark grey heading
+
+    "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-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-bread-crumbs-text": "#666666", // Medium grey bread crumbs
+    "list-view-border-color": "#DDDDDD", // Light grey border
+
+    "form-view-bg": "#FFFFFF", // White form background
+    "form-view-border-color": "#F5F5F5", // Very light grey border
+    "form-view-heading": "#EDEDED" // Dark grey heading
+  },
+  "boxShadow": {
+    "custom-light": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+    "header-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+    "list-table-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+    "resourse-form-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)" // Lighter shadow
+  },
+  "fontSize": {
+    "header-text-size": "1rem"
+  },
+  "borderRadius": {
+    "default": "2px"
+  }
+`;

package/package.json

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

package/plugins/ForeignInlineListPlugin/custom/InlineList.vue

@@ -1,5 +1,113 @@
 <template>
   <td colspan="2">
-    text
+    <h4 v-if="listResource"
+        class="px-6 py-4"
+    
+    >{{ listResource.label }} inline records</h4>
+
+    <ResourceListTable
+      :resource="listResource"
+      :rows="rows"
+      @update:page="page = $event"
+      @update:sort="sort = $event"
+      @update:checkboxes="checkboxes = $event"
+      :pageSize="pageSize"
+      :totalRows="totalRows"
+    />
   </td>
-</template>
+</template>
+
+<script setup>
+import { callAdminForthApi } from '@/utils';
+import { ref, onMounted, watch, computed  } from 'vue';
+import ResourceListTable from '@/components/ResourceListTable.vue';
+
+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(() => props.meta.pageSize || 10);
+
+const rows = ref(null);
+const totalRows = ref(0);
+
+
+
+const filters = computed(() => {
+  if (!listResource.value) {
+    return [];
+  }
+  console.log('listResource', listResource.value)
+  // get name of the column that is foreign key
+  const refColumn = listResource.value.columns.find(c => c.foreignResource?.resourceId === props.resource.resourceId);
+
+  const primaryKeyColumn = listResource.value.columns.find(c => c.primaryKey);
+
+  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 (${resource.resourceId})`,
+      variant: 'error',
+    });
+    return [];
+  }
+  return [
+    {
+      field: refColumn.name,
+      operator: 'eq',
+      value: props.record[primaryKeyColumn.name],
+    },
+  ];
+});
+
+watch([page], async () => {
+  await getList();
+});
+
+watch([sort], async () => {
+  await getList();
+}, {deep: true});
+
+
+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: filters.value,
+      sort: sort.value,
+    }
+  });
+
+  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: '/get_resource',
+      method: 'POST',
+      body: {
+        resourceId: foreighResourceId,
+      }
+  })).resource;
+  loading.value = false;
+  await getList();
+});
+
+</script>

package/plugins/ForeignInlineListPlugin/index.ts

@@ -25,14 +25,14 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
     if (!this.foreignResource) {
       throw new Error(`ForeignInlineListPlugin: Resource with ID "${this.options.foreignResourceId}" not found`);
     }
-
+    console.log('🔌 ForeignInlineListPlugin', this.options);
     resourceConfig.columns.push({
       name: `foreignInlineList_${this.foreignResource.resourceId}`,
       label: 'Foreign Inline List',
       virtual: true,
       showIn: [AdminForthResourcePages.show],
       components: {
-        showRow: this.componentPath('InlineList.vue'),
+        showRow: { file: this.componentPath('InlineList.vue'), meta: this.options }
       },
     });
   }

package/spa/src/App.vue

@@ -176,7 +176,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
-import { loadFile } from './utils';
+import { loadFile } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
 import { FrontendAPI } from '@/composables/useStores'

package/spa/src/components/ResourceListTable.vue

@@ -0,0 +1,363 @@
+<template>
+  <!-- table -->
+  <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	overflow-y-hidden rounded-default">
+
+    <!-- skelet loader -->
+    <div role="status" v-if="!resource || !resource.columns"
+        class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
+      <div class="flex items-center justify-between h-16">
+        <div>
+          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+          <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+        </div>
+        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+      </div>
+
+      <div class="flex items-center justify-between  h-16 pt-4" v-for="i in new Array(10)">
+        <div>
+          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+          <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+        </div>
+        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+      </div>
+      <span class="sr-only">Loading...</span>
+    </div>
+
+    <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
+      <thead class="text-xs text-view-table-heading-text bg-list-view-table-heading dark:bg-gray-700 dark:text-gray-400">
+      <tr>
+        <th scope="col" class="p-4">
+          <div v-if="rows && rows.length" class="flex items-center">
+            <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
+                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+            <label for="checkbox-all-search" class="sr-only">checkbox</label>
+          </div>
+        </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'}">
+              <svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
+                  :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
+                <path
+                  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"/>
+              </svg>
+              <svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill='currentColor'
+                  viewBox="0 0 24 24">
+                <path
+                  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>
+          </div>
+        </th>
+
+        <th scope="col" class="px-6 py-3">
+          Actions
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-if="!rows" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
+        <td :colspan="resource?.columns.length + 2">
+
+          <div role="status"
+              class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <span class="sr-only">Loading...</span>
+          </div>
+        </td>
+      </tr>
+      <tr v-else-if="rows.length === 0" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
+        <td :colspan="resource?.columns.length + 2">
+
+          <div id="toast-simple"
+              class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
+              role="alert">
+            <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
+            <div class="ps-4 text-sm font-normal">No items here yet</div>
+          </div>
+
+        </td>
+      </tr>
+
+      <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">
+            <input
+              id="checkbox-table-search-1"
+              type="checkbox"
+              :checked="checkboxes.includes(row.id)"
+              @change="(e)=>{addToCheckedValues(row.id)}"
+              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+            <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
+          </div>
+        </td>
+        <td v-for="c in columnsListed" class="px-6 py-4">
+          <!-- 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"
+            :column="c"
+            :record="row"
+            :adminUser="coreStore.adminUser"
+            :resource="resource"
+          />
+        </td>
+        <td class=" items-center px-6 py-4">
+          <div class="flex">
+          <RouterLink
+            v-if="resource.options?.allowedActions.show"
+            :to="{ name: 'resource-show', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
+            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            :data-tooltip-target="`tooltip-show-${rowI}`"
+          >
+            <IconEyeSolid class="w-5 h-5 me-2"/>
+          </RouterLink>
+
+          <div :id="`tooltip-show-${rowI}`"
+              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">
+            Show item
+            <div class="tooltip-arrow" data-popper-arrow></div>
+          </div>
+
+          <RouterLink v-if="resource.options?.allowedActions.edit"
+            :to="{ name: 'resource-edit', params: { 
+              resourceId: resource.id,
+              primaryKey: row._primaryKeyValue 
+            } 
+            }"
+            class="font-medium text-blue-600 dark:text-blue-500 hover:underline ms-3"
+            :data-tooltip-target="`tooltip-edit-${rowI}`"
+          >
+            <IconPenSolid class="w-5 h-5 me-2"/>
+          </RouterLink>
+
+          <div :id="`tooltip-edit-${rowI}`"
+              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">
+            Edit
+            <div class="tooltip-arrow" data-popper-arrow></div>
+          </div>
+
+          <button v-if="resource.options?.allowedActions.delete"
+                  class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3"
+                  :data-tooltip-target="`tooltip-delete-${rowI}`"
+                  @click="showDeleteModal(row)"
+          >
+            <IconTrashBinSolid class="w-5 h-5 me-2"/>
+          </button>
+
+          <div :id="`tooltip-delete-${rowI}`"
+              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">
+            Delete
+            <div class="tooltip-arrow" data-popper-arrow></div>
+          </div>
+        </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <!-- pagination -->
+  <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
+    v-if="rows && totalRows >= pageSize && totalRows > 0"
+  >
+    <!-- Help text -->
+    <span class="text-sm text-gray-700 dark:text-gray-400">
+          Showing <span class="font-semibold text-gray-900 dark:text-white">
+            {{ (page - 1) * pageSize + 1 }}
+          </span> to <span class="font-semibold text-gray-900 dark:text-white">
+            {{ Math.min(page * pageSize, totalRows) }}
+          </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
+        totalRows
+      }}</span> Entries
+      </span>
+    <div class="inline-flex mt-2 xs:mt-0">
+        <!-- Buttons -->
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s 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 disabled:opacity-50"
+          @click="page--" :disabled="page <= 1">
+          <svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M13 5H1m0 0 4 4M1 5l4-4"/>
+          </svg>
+          Prev
+        </button>
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  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 disabled:opacity-50"
+          @click="page = 1" :disabled="page <= 1">
+          <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
+          1
+        </button>
+        <input type="text"
+              class="w-10 py-1.5  px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
+              v-model="page"/>
+
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  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 disabled:opacity-50"
+          @click="page = totalPages" :disabled="page >= totalPages">
+          {{ totalPages }}
+          <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
+        </button>
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e 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 disabled:opacity-50"
+
+          @click="page++" :disabled="page >= totalPages">
+          Next
+          <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M1 5h12m0 0L9 1m4 4L9 9"/>
+          </svg>
+        </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+
+import { initFlowbite } from 'flowbite';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import ValueRenderer from '@/components/ValueRenderer.vue';
+import { getCustomComponent } from '@/utils';
+import { useCoreStore } from '@/stores/core';
+
+import {
+IconInboxOutline,
+IconPlusOutline
+} from '@iconify-prerendered/vue-flowbite';
+
+import {
+IconBanOutline,
+IconEyeSolid,
+IconFilterOutline,
+IconPenSolid,
+IconTrashBinSolid
+} from '@iconify-prerendered/vue-flowbite';
+
+const coreStore = useCoreStore();
+
+const props = defineProps([
+  'resource', 
+  'rows',
+  'totalRows',
+  'pageSize',
+])
+
+// emits, update page
+const emits = defineEmits([
+  'update:page',
+  'update:sort',
+  'update:checkboxes',
+
+]);
+
+const checkboxes = ref([]);
+const page = ref(1);
+const sort = ref([]);
+
+
+watch(() => page.value, (newPage) => {
+  emits('update:page', newPage);
+});
+
+watch(() => sort.value, (newSort) => {
+  emits('update:sort', newSort);
+});
+
+watch(() => checkboxes.value, (newCheckboxes) => {
+  emits('update:checkboxes', newCheckboxes);
+});
+
+function addToCheckedValues(id) {
+  if (checkboxes.value.includes(id)) {
+    checkboxes.value = checkboxes.value.filter((item) => item !== id);
+  } else {
+    checkboxes.value.push(id);
+  }
+}
+
+const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.includes('list')));
+
+async function selectAll(value) {
+  rows.value.forEach((r) => {
+    if (!checkboxes.value.includes(r.id)) {
+      checkboxes.value.push(r.id)
+    } else {
+      checkboxes.value = checkboxes.value.filter((item) => item !== r.id)
+    }
+  });
+  // checkboxes.value = rows.value.map((v) => v.id);
+}
+
+const totalPages = computed(() => Math.ceil(props.totalRows.value / props.pageSize.value));
+
+
+const allFromThisPageChecked = computed(() => {
+  if (!props.rows.value) return false;
+  return props.rows.value.every((r) => checkboxes.value.includes(r.id));
+});
+const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').map((s) => s.field));
+const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').map((s) => s.field));
+
+
+function onSortButtonClick(field) {
+  const sortIndex = sort.value.findIndex((s) => s.field === field);
+  if (sortIndex === -1) {
+    sort.value = [{field, direction: 'asc'}, ...sort.value];
+  } else {
+    const sortField = sort.value[sortIndex];
+    if (sortField.direction === 'asc') {
+      sort.value[sortIndex].direction = 'desc';
+    } else {
+      sort.value.splice(sortIndex, 1);
+    }
+  }
+}
+
+</script>

package/spa/src/stores/core.ts

@@ -13,7 +13,7 @@ export const useCoreStore = defineStore('core', () => {
   const resourceOptions = ref(null);
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
-  const user = ref(null);
+  const adminUser = ref(null);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
@@ -29,10 +29,8 @@ export const useCoreStore = defineStore('core', () => {
       return acc;
     }, {});
     config.value = resp.config;
-    user.value = resp.user;
+    adminUser.value = resp.user;
     console.log('🌍 AdminForth v', resp.version);
-
-      
   }
 
   async function fetchRecord({ resourceId, primaryKey }) {
@@ -75,13 +73,12 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumns.value = null;
     resourceColumnsError.value = '';
     const res = await callAdminForthApi({
-      path: '/get_resource_columns',
+      path: '/get_resource',
       method: 'POST',
       body: {
         resourceId,
       }
-    }
-    );
+    });
     if (res.error) {
       resourceColumnsError.value = res.error;
     } else {
@@ -109,12 +106,12 @@ export const useCoreStore = defineStore('core', () => {
 
   const username = computed(() => {
     const usernameField = config.value.usernameField;
-    return user.value && user.value[usernameField];
+    return adminUser.value && adminUser.value[usernameField];
   });
 
   const userFullname = computed(() => {
     const userFullnameField = config.value.userFullnameField;
-    return user.value && user.value[userFullnameField];
+    return adminUser.value && adminUser.value[userFullnameField];
   })
 
 
@@ -134,5 +131,6 @@ export const useCoreStore = defineStore('core', () => {
     resourceOptions,
     logout,
     resource,
+    adminUser,
   }
 })

package/spa/src/utils.ts

@@ -32,8 +32,8 @@ export async function callAdminForthApi({ path, method, body=undefined }) {
   }
 }
 
-export function getCustomComponent(filePath: string) {
-  const name = filePath.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
+export function getCustomComponent({ file, meta }: { file: string, meta: any }) {
+  const name = file.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
   console.log('resolving name', name);
   return resolveComponent(name);
 }

package/spa/src/views/CreateView.vue

@@ -4,6 +4,7 @@
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"
       :is="getCustomComponent(c)"
+      :meta="c.meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -33,6 +34,7 @@
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs || []"
       :is="getCustomComponent(c)"
+      :meta="c.meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -55,6 +57,7 @@
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom || []"
       :is="getCustomComponent(c)"
+      :meta="c.meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"