adminforth 2.4.0-next.124 → 2.4.0-next.126

package/dist/spa/src/adminforth.ts

@@ -1,6 +1,5 @@
-import type { FilterParams, FrontendAPIInterface } from "./types/FrontendAPI";
-import type { FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
-import type { AdminForthFilterOperators, AdminForthResourceColumn } from '@/types/Common';
+import type { FilterParams, FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
+import type { AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
 import { useToastStore } from '@/stores/toast';
 import { useModalStore } from '@/stores/modal';
 import { useCoreStore } from '@/stores/core';
@@ -85,7 +84,7 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
-  confirm(params: ConfirmParams): Promise<void> {
+  confirm(params: ConfirmParams): Promise<boolean> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
@@ -112,7 +111,7 @@ class FrontendAPI implements FrontendAPIInterface {
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
     } else {
       console.log(this.coreStore.resourceColumnsWithFilters,'core store')
-      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumn) => col.name === filter.field)
+      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumnCommon) => col.name === filter.field)
       if(!filterField){
           throw new Error(`Field ${filter.field} is not available for filtering`)
       }
@@ -123,7 +122,7 @@ class FrontendAPI implements FrontendAPIInterface {
 
   setListFilter(filter: FilterParams): void {
     if(this.listFilterValidation(filter)){
-      if(this.filtersStore.filters.some((f) => {return f.field === filter.field && f.operator === filter.operator})){
+      if(this.filtersStore.filters.some((f: any) => {return f.field === filter.field && f.operator === filter.operator})){
         throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
       } else {
       this.filtersStore.setFilter(filter)

package/dist/spa/src/afcl/BarChart.vue

@@ -60,7 +60,7 @@ const optionsBase = {
   tooltip: {
     shared: true,
     intersect: false,
-    formatter: function (value) {
+    formatter: function (value: any) {
       return value
     },
   },
@@ -71,7 +71,7 @@ const optionsBase = {
         fontFamily: "Inter, sans-serif",
         cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
       },
-      formatter: function (value) {
+      formatter: function (value: any) {
         return value
       }
     },

package/dist/spa/src/afcl/Checkbox.vue

@@ -6,7 +6,7 @@
         type="checkbox"
         :checked="props.modelValue"
         :disabled="props.disabled"
-        @change="$emit('update:modelValue', $event.target.checked)"
+        @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
         class="peer appearance-none min-w-4 min-h-4 bg-lightCheckboxBgUnchecked border border-lightCheckboxBorderColor rounded-sm checked:bg-lightCheckboxBgChecked 
                         focus:ring-lightFocusRing dark:focus:ring-darkFocusRing dark:focus:ring-darkFocusRing
                         focus:ring-2 dark:bg-darkCheckboxBgUnchecked dark:border-darkCheckboxBorderColor dark:checked:bg-darkCheckboxBgChecked cursor-pointer"

package/dist/spa/src/afcl/Dropzone.vue

@@ -3,7 +3,7 @@
   <form class="flex items-center justify-center w-full"
     @dragover.prevent="dragging = true"
     @dragleave.prevent="dragging = false"
-    @drop.prevent="dragging = false; doEmit($event.dataTransfer.files)"
+    @drop.prevent="dragging = false; doEmit(($event.dataTransfer as DataTransfer).files)"
   >
       <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer
         hover:bg-lightDropzoneBackgroundHover hover:border-lightDropzoneBorderHover  dark:hover:border-darkDropzoneBorderHover dark:hover:bg-darkDropzoneBackgroundHover"
@@ -42,7 +42,7 @@
           </div>
           <input :id="id" type="file" class="hidden" 
             :accept="props.extensions.join(', ')"
-            @change="doEmit($event.target.files)"
+            @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
             :multiple="props.multiple || false"
           />
       </label>

package/dist/spa/src/afcl/Input.vue

@@ -12,7 +12,7 @@
       ref="input"
       v-bind="$attrs"
       :type="type"
-      @input="$emit('update:modelValue', type === 'number' ? Number($event.target?.value) : $event.target?.value)"
+      @input="$emit('update:modelValue', type === 'number' ? Number(($event.target as HTMLInputElement)?.value) : ($event.target as HTMLInputElement)?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
       class="afcl-input inline-flex bg-lightInputBackground border border-lightInputBorder text-lightInputText text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 

package/dist/spa/src/afcl/LinkButton.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 
 const props = defineProps<{
-  disabled: boolean,
+  disabled?: boolean,
   to: string,
 }>();
 

package/dist/spa/src/afcl/PieChart.vue

@@ -63,8 +63,8 @@ const optionsBase = {
               show: false,
               fontFamily: "Inter, sans-serif",
               label: "",
-              formatter: function (w) {
-                const sum = w.globals.seriesTotals.reduce((a, b) => {
+              formatter: function (w: any) {
+                const sum = w.globals.seriesTotals.reduce((a: any, b: any) => {
                   return a + b
                 }, 0)
                 return sum 
@@ -74,7 +74,7 @@ const optionsBase = {
               show: true,
               fontFamily: "Inter, sans-serif",
               offsetY: -20,
-              formatter: function (value) {
+              formatter: function (value: any) {
                 return value + "k"
               },
             },
@@ -100,14 +100,14 @@ const optionsBase = {
     },
     yaxis: {
       labels: {
-        formatter: function (value) {
+        formatter: function (value: any) {
           return value;
         },
       },
     },
     xaxis: {
       labels: {
-        formatter: function (value) {
+        formatter: function (value: any) {
           return value;
         },
       },

package/dist/spa/src/afcl/Select.vue

@@ -52,7 +52,7 @@
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
         <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
-          {{ options.length ? $t('No results found') : $t('No items here') }}
+          {{ options?.length ? $t('No results found') : $t('No items here') }}
         </div>
 
         <div v-if="$slots['extra-item']" class="px-4 py-2 dark:text-gray-400">
@@ -76,7 +76,7 @@
         <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
       </div>
       <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
-        {{ options.length ? $t('No results found') : $t('No items here') }}
+        {{ options?.length ? $t('No results found') : $t('No items here') }}
       </div>
       <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-darkDropdownOptionsText">
         <slot name="extra-item"></slot>
@@ -114,14 +114,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, nextTick, type Ref } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick,type PropType, type Ref } from 'vue';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
 const props = defineProps({
   options: Array,
   modelValue: {
-    default: undefined,
+    type: Array as PropType<(string | number)[]>,
+    default: () => [],
   },
   multiple: {
     type: Boolean,
@@ -178,14 +179,14 @@ function inputInput() {
 function updateFromProps() {
   if (props.modelValue !== undefined) {
     if (!props.multiple) {
-      const el = props.options.find(item => item.value === props.modelValue);
+      const el = props.options?.find((item: any) => item.value === props.modelValue);
       if (el) {
         selectedItems.value = [el];
       } else {
         selectedItems.value = [];
       }
     } else {
-      selectedItems.value = props.options.filter(item => props.modelValue.includes(item.value));
+      selectedItems.value = props.options?.filter((item: any) => props.modelValue?.includes(item.value)) || [];
     }
   }
 }
@@ -268,7 +269,7 @@ onMounted(() => {
   }
 });
 
-const filteredItems = computed(() => {
+const filteredItems: Ref<any[]> = computed(() => {
 
   if (props.searchDisabled) {
     return props.options || [];
@@ -295,7 +296,7 @@ const removeClickListener = () => {
   document.removeEventListener('click', handleClickOutside);
 };
 
-const toogleItem = (item) => {
+const toogleItem = (item: any) => {
   if (selectedItems.value.includes(item)) {
     selectedItems.value = selectedItems.value.filter(i => i.value !== item.value);
   } else {

package/dist/spa/src/afcl/Table.vue

@@ -44,9 +44,9 @@
     <i18n-t 
       keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-lightTablePaginationText dark:text-darkTablePaginationText mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
-      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
-      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
-      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ props.data.length }}</span></template>
+      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, dataResult.total) }}</span></template>
+      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, dataResult.total) }}</span></template>
+      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ dataResult.total }}</span></template>
     </i18n-t>
 
     <ul class="afcl-table-pagination-list inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
@@ -74,6 +74,8 @@
 
 <script setup lang="ts">
   import { ref, type Ref, computed } from 'vue';
+  import { asyncComputed } from '@vueuse/core';
+  import { IconArrowRightOutline, IconArrowLeftOutline } from '@iconify-prerendered/vue-flowbite';
 
   const props = withDefaults(
     defineProps<{
@@ -83,7 +85,7 @@
       }[],
       data: {
         [key: string]: any,
-      }[],
+      }[] | ((offset: number, limit: number) => Promise<{data: {[key: string]: any}[], total: number}>),
       evenHighlights?: boolean,
       pageSize?: number,
     }>(), {
@@ -94,14 +96,21 @@
 
   const currentPage = ref(1);
 
+  const dataResult = asyncComputed( async() => {
+    if (typeof props.data === 'function') {
+      return await props.data(currentPage.value, props.pageSize);
+    }
+    const start = (currentPage.value - 1) * props.pageSize;
+    const end = start + props.pageSize;
+    return { data: props.data.slice(start, end), total: props.data.length };
+  });
+
   const totalPages = computed(() => {
-    return Math.ceil(props.data.length / props.pageSize);
+    return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
 
-  const dataPage = computed(() => {
-    const start = (currentPage.value - 1) * props.pageSize;
-    const end = start + props.pageSize;
-    return props.data.slice(start, end);
+  const dataPage = asyncComputed( async() => {
+    return dataResult.value.data;
   });
 
   function switchPage(p: number) {

package/dist/spa/src/afcl/Toggle.vue

@@ -5,7 +5,7 @@
             value="" class="sr-only peer" 
             :disabled="props.disabled"
             :checked="props.modelValue"
-            @change="$emit('update:modelValue', $event.target.checked)"
+            @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
             > 
             <div class="afcl-toggle border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
                 peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 

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

@@ -47,8 +47,8 @@
               </div>
               <span
                 class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-                v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
-                {{ sort.findIndex((s) => s.field === c.name) + 1 }}
+                v-if="sort.findIndex((s: any) => s.field === c.name) !== -1 && sort?.length > 1">
+                {{ sort.findIndex((s: any) => s.field === c.name) + 1 }}
               </span>
 
             </div>
@@ -64,7 +64,7 @@
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
-          :columns="resource?.columns.filter(c => c.showIn.list).length + 2"
+          :columns="resource?.columns.filter((c: AdminForthResourceColumnInputCommon) => c.showIn?.list).length + 2"
           :rows="rowHeights.length || 3"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
@@ -93,8 +93,8 @@
         <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
-            @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
-            @click="(e)=>e.stopPropagation()"
+            @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
+            @click="(e: any)=>e.stopPropagation()"
           >
             <span class="sr-only">{{ $t('checkbox') }}</span>
           </Checkbox>
@@ -103,8 +103,8 @@
           <td v-for="c in columnsListed" class="px-2 md:px-3 lg: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"
+              :is="c?.components?.list ? getCustomComponent(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
+              :meta="typeof c?.components?.list === 'object' ? c.components.list.meta : undefined"
               :column="c"
               :record="row"
               :adminUser="coreStore.adminUser"
@@ -115,7 +115,7 @@
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.show"
+                  v-if="resource.options?.allowedActions?.show"
                   :to="{ 
                     name: 'resource-show', 
                     params: { 
@@ -135,7 +135,7 @@
 
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.edit"
+                  v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
                     name: 'resource-edit', 
                     params: { 
@@ -153,7 +153,7 @@
 
               <Tooltip>
                 <button
-                  v-if="resource.options?.allowedActions.delete"
+                  v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
                 >
                   <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
@@ -308,7 +308,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 
@@ -339,7 +339,7 @@ const emits = defineEmits([
 const checkboxesInternal: Ref<any[]> = ref([]);
 const pageInput = ref('1');
 const page = ref(1);
-const sort = ref([]);
+const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
@@ -348,11 +348,11 @@ const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.tot
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);
 });
-async function onPageKeydown(event) {
+async function onPageKeydown(event: any) {
   // page input should accept only numbers, arrow keys and backspace
   if (['Enter', 'Space'].includes(event.code) ||
     (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
-    && isNaN(String.fromCharCode(event.keyCode)))) {
+    && isNaN(Number(String.fromCharCode(event.keyCode || 0))))) {
     event.preventDefault();
     if (event.code === 'Enter') {
       validatePageInput();
@@ -373,7 +373,7 @@ watch(() => props.checkboxes, (newCheckboxes) => {
   checkboxesInternal.value = newCheckboxes;
 });
 
-watch(() => props.sort, (newSort) => {
+watch(() => props.sort, (newSort: any) => {
   sort.value = newSort;
 });
 
@@ -384,17 +384,17 @@ watch(() => props.page, (newPage) => {
   page.value = newPage;
 });
 
-const rowRefs = useTemplateRef('rowRefs');
-const headerRefs = useTemplateRef('headerRefs');
-const rowHeights = ref([]);
-const columnWidths = ref([]);
+const rowRefs = useTemplateRef<HTMLElement[]>('rowRefs');
+const headerRefs = useTemplateRef<HTMLElement[]>('headerRefs');
+const rowHeights = ref<number[]>([]);
+const columnWidths = ref<number[]>([]);
 watch(() => props.rows, (newRows) => {
   // rows are set to null when new records are loading
-  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el) => el.offsetHeight);
-  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el) => el.offsetWidth)];
+  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el: HTMLElement) => el.offsetHeight);
+  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id) {
+function addToCheckedValues(id: string) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -403,17 +403,17 @@ function addToCheckedValues(id) {
   checkboxesInternal.value = [ ...checkboxesInternal.value ]
 }
 
-const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.list));
+const columnsListed = computed(() => props.resource?.columns?.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list));
 
-async function selectAll(value) {
+async function selectAll() {
   if (!allFromThisPageChecked.value) {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       if (!checkboxesInternal.value.includes(r._primaryKeyValue)) {
         checkboxesInternal.value.push(r._primaryKeyValue)
       } 
     });
   } else {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r._primaryKeyValue);
     });
   }
@@ -426,15 +426,15 @@ const allFromThisPageChecked = computed(() => {
   if (!props.rows || !props.rows.length) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
-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));
+const ascArr = computed(() => sort.value.filter((s:any) => s.direction === 'asc').map((s: any) => s.field));
+const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
-function onSortButtonClick(event, field) {
+function onSortButtonClick(event: any, field: string) {
   // if ctrl key is pressed, add to sort otherwise sort by this field
   // in any case if field is already in sort, toggle direction
   
-  const sortIndex = sort.value.findIndex((s) => s.field === field);
+  const sortIndex = sort.value.findIndex((s: any) => s.field === field);
   if (sortIndex === -1) {
     // field is not in sort, add it
     if (event.ctrlKey) {
@@ -445,9 +445,9 @@ function onSortButtonClick(event, field) {
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {
-      sort.value = sort.value.map((s) => s.field === field ? {field, direction: 'desc'} : s);
+      sort.value = sort.value.map((s: any) => s.field === field ? {field, direction: 'desc'} : s);
     } else {
-      sort.value = sort.value.filter((s) => s.field !== field);
+      sort.value = sort.value.filter((s: any) => s.field !== field);
     }
   }
 }
@@ -455,11 +455,11 @@ function onSortButtonClick(event, field) {
 
 const clickTarget = ref(null);
 
-async function onClick(e,row) {
+async function onClick(e: any, row: any) {
   if(clickTarget.value === e.target) return;
   clickTarget.value = e.target;
   await new Promise((resolve) => setTimeout(resolve, 100));
-  if (window.getSelection().toString()) return;
+  if (window.getSelection()?.toString()) return;
   else {
     if (row._clickUrl === null) {
       // user asked to nothing on click
@@ -474,7 +474,7 @@ async function onClick(e,row) {
           router.resolve({
             name: 'resource-show',
             params: {
-              resourceId: props.resource.resourceId,
+              resourceId: props.resource?.resourceId,
               primaryKey: row._primaryKeyValue,
             },
           }).href,
@@ -492,7 +492,7 @@ async function onClick(e,row) {
         router.push({
           name: 'resource-show',
           params: {
-            resourceId: props.resource.resourceId,
+            resourceId: props.resource?.resourceId,
             primaryKey: row._primaryKeyValue,
           },
         });
@@ -501,7 +501,7 @@ async function onClick(e,row) {
   }
 }
 
-async function deleteRecord(row) {
+async function deleteRecord(row: any) {
   const data = await adminforth.confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
@@ -513,7 +513,7 @@ async function deleteRecord(row) {
         path: '/delete_record',
         method: 'POST',
         body: {
-          resourceId: props.resource.resourceId,
+          resourceId: props.resource?.resourceId,
           primaryKey: row._primaryKeyValue,
         }
       });
@@ -531,16 +531,16 @@ async function deleteRecord(row) {
   }
 }
 
-const actionLoadingStates = ref({});
+const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId, row) {
+async function startCustomAction(actionId: string, row: any) {
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
     path: '/start_custom_action',
     method: 'POST',
     body: {
-      resourceId: props.resource.resourceId,
+      resourceId: props.resource?.resourceId,
       actionId: actionId,
       recordId: row._primaryKeyValue
     }
@@ -578,7 +578,7 @@ async function startCustomAction(actionId, row) {
   }
 }
 
-function onPageInput(event) {
+function onPageInput(event: any) {
   pageInput.value = event.target.innerText;
 }