adminforth 2.26.4 → 2.27.0-next.10

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="range-slider" ref="trackRef" @mousedown="onTrackMouseDown">
+    <div class="track"></div>
+    <div class="range bg-lightPrimary/30" :style="rangeStyle"></div>
+
+    <div
+      class="bg-lightPrimary thumb"
+      :style="minThumbStyle"
+      @mousedown.stop.prevent="startDrag('min', $event)"
+      @mouseenter="minHovered = true"
+      @mouseleave="minHovered = false"
+    ></div>
+    <div v-if="minHovered || activeThumb === 'min'" class="thumb-tooltip" :style="minTooltipStyle">{{ minVal }}</div>
+
+    <div
+      class="bg-lightPrimary thumb"
+      :style="maxThumbStyle"
+      @mousedown.stop.prevent="startDrag('max', $event)"
+      @mouseenter="maxHovered = true"
+      @mouseleave="maxHovered = false"
+    ></div>
+    <div v-if="maxHovered || activeThumb === 'max'" class="thumb-tooltip" :style="maxTooltipStyle">{{ maxVal }}</div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as unknown as () => [number, number],
+    default: () => [0, 100]
+  },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  dotSize: { type: Number, default: 20 },
+  height: { type: String, default: '8px' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const trackRef = ref<HTMLElement | null>(null)
+
+const minVal = ref(props.modelValue[0])
+const maxVal = ref(props.modelValue[1])
+
+watch(() => props.modelValue, (val) => {
+  if (!val) return
+  minVal.value = val[0]
+  maxVal.value = val[1]
+})
+
+function clamp(val: number) {
+  return Math.min(props.max, Math.max(props.min, val))
+}
+
+function valueToPercent(val: number) {
+  return ((val - props.min) / (props.max - props.min)) * 100
+}
+
+function percentToValue(percent: number) {
+  return props.min + ((props.max - props.min) * percent) / 100
+}
+
+const minPercent = computed(() => valueToPercent(minVal.value))
+const maxPercent = computed(() => valueToPercent(maxVal.value))
+
+const rangeStyle = computed(() => ({
+  left: `${minPercent.value}%`,
+  width: `${maxPercent.value - minPercent.value}%`,
+  transition: isAnimating.value ? 'left 0.18s ease, width 0.18s ease' : 'none'
+}))
+
+const minThumbStyle = computed(() => ({
+  left: `calc(${minPercent.value}% - ${props.dotSize / 2}px)`,
+  width: `${props.dotSize}px`,
+  height: `${props.dotSize}px`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none',
+  zIndex: activeThumb.value === 'min' ? 3 : 2
+}))
+
+const maxThumbStyle = computed(() => ({
+  left: `calc(${maxPercent.value}% - ${props.dotSize / 2}px)`,
+  width: `${props.dotSize}px`,
+  height: `${props.dotSize}px`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none',
+  zIndex: activeThumb.value === 'max' ? 3 : 2
+}))
+
+const minTooltipStyle = computed(() => ({
+  left: `${minPercent.value}%`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none'
+}))
+
+const maxTooltipStyle = computed(() => ({
+  left: `${maxPercent.value}%`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none'
+}))
+
+const activeThumb = ref<'min' | 'max' | null>(null)
+const isAnimating = ref(false)
+const minHovered = ref(false)
+const maxHovered = ref(false)
+
+function startDrag(type: 'min' | 'max', e: MouseEvent) {
+  activeThumb.value = type
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!trackRef.value || !activeThumb.value) return
+
+  const rect = trackRef.value.getBoundingClientRect()
+  const percent = ((e.clientX - rect.left) / rect.width) * 100
+  const value = Math.round(clamp(percentToValue(percent)))
+
+  if (activeThumb.value === 'min') {
+    if (value > maxVal.value) {
+      // cross over: become the max thumb
+      minVal.value = maxVal.value
+      maxVal.value = value
+      activeThumb.value = 'max'
+    } else {
+      minVal.value = value
+    }
+  } else {
+    if (value < minVal.value) {
+      // cross over: become the min thumb
+      maxVal.value = minVal.value
+      minVal.value = value
+      activeThumb.value = 'min'
+    } else {
+      maxVal.value = value
+    }
+  }
+
+  emit('update:modelValue', [minVal.value, maxVal.value])
+}
+
+function stopDrag() {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', stopDrag)
+  activeThumb.value = null
+}
+
+function onTrackMouseDown(e: MouseEvent) {
+  if (!trackRef.value) return
+
+  const rect = trackRef.value.getBoundingClientRect()
+  const percent = ((e.clientX - rect.left) / rect.width) * 100
+  const value = percentToValue(percent)
+
+  const distToMin = Math.abs(value - minVal.value)
+  const distToMax = Math.abs(value - maxVal.value)
+
+  isAnimating.value = true
+  if (distToMin < distToMax) {
+    minVal.value = Math.round(Math.min(clamp(value), maxVal.value))
+  } else {
+    maxVal.value = Math.round(Math.max(clamp(value), minVal.value))
+  }
+
+  emit('update:modelValue', [minVal.value, maxVal.value])
+
+  setTimeout(() => { isAnimating.value = false }, 200)
+}
+
+onBeforeUnmount(() => {
+  stopDrag()
+})
+</script>
+
+<style scoped>
+.range-slider {
+  position: relative;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.track {
+  position: absolute;
+  width: 100%;
+  height: 8px;
+  background: #e5e7eb;
+  border-radius: 9999px;
+}
+
+.range {
+  position: absolute;
+  height: 8px;
+  border-radius: 9999px;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 9999px;
+  cursor: pointer;
+}
+
+.thumb-tooltip {
+  position: absolute;
+  top: -28px;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 6px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tooltip-in 0.12s ease;
+}
+
+.thumb-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.75);
+}
+
+@keyframes tooltip-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+</style>

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

@@ -13,11 +13,13 @@
         :mode="mode"
         :unmasked="unmasked"
         :columnOptions="columnOptions"
-        :validating="validating"
+        :validatingMode="validatingMode"
         :columnError="columnError"
         :setCurrentValue="setCurrentValue"
         @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
         @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
+        :columnsWithErrors="columnsWithErrors"
+        :isValidating="isValidating"
         />
       </div>
       <div v-else class="flex flex-col gap-4">
@@ -31,11 +33,13 @@
           :mode="mode"
           :unmasked="unmasked"
           :columnOptions="columnOptions"
-          :validating="validating"
+          :validatingMode="validatingMode"
           :columnError="columnError"
           :setCurrentValue="setCurrentValue"
           @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
           @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
+          :columnsWithErrors="columnsWithErrors"
+          :isValidating="isValidating"
           />
         </template>
         <div v-if="otherColumns?.length || 0 > 0">
@@ -48,11 +52,13 @@
           :mode="mode"
           :unmasked="unmasked"
           :columnOptions="columnOptions"
-          :validating="validating"
+          :validatingMode="validatingMode"
           :columnError="columnError"
           :setCurrentValue="setCurrentValue"
           @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
           @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
+          :columnsWithErrors="columnsWithErrors"
+          :isValidating="isValidating"
           />
         </div>
       </div>
@@ -71,16 +77,20 @@ import { useCoreStore } from "@/stores/core";
 import GroupsTable from '@/components/GroupsTable.vue';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthResourceColumnCommon, type AdminForthResourceCommon } from '@/types/Common';
+import { Mutex } from 'async-mutex';
+import debounce from 'lodash.debounce';
 
 const { t } = useI18n();
 
+const mutex = new Mutex();
+
 const coreStore = useCoreStore();
 const router = useRouter();
 const route = useRoute();
 const props = defineProps<{
   resource: AdminForthResourceCommon,
   record: any,
-  validating: boolean,
+  validatingMode: boolean,
   source: 'create' | 'edit',
   readonlyColumns?: string[],
 }>();
@@ -99,6 +109,11 @@ const columnOptions = ref<Record<string, any[]>>({});
 const columnLoadingState = reactive<Record<string, { loading: boolean; hasMore: boolean }>>({});
 const columnOffsets = reactive<Record<string, number>>({});
 const columnEmptyResultsCount = reactive<Record<string, number>>({});
+const columnsWithErrors = ref<Record<string, string>>({});
+const isValidating = ref(false);
+const blockSettingIsValidating = ref(false);
+const isValid = ref(true);
+const doesUserHaveCustomValidation = computed(() => props.resource.columns.some(column => column.validation && column.validation.some((val) => val.validator)));
 
 const columnError = (column: AdminForthResourceColumnCommon) => {
   const val = computed(() => {
@@ -329,10 +344,48 @@ const editableColumns = computed(() => {
   return props.resource?.columns?.filter(column => column.showIn?.[mode.value] && (currentValues.value ? checkShowIf(column, currentValues.value, props.resource.columns) : true));
 });
 
-const isValid = computed(() => {
-  return editableColumns.value?.every(column => !columnError(column));
+function checkIfColumnHasError(column: AdminForthResourceColumnCommon) {
+  const error = columnError(column);
+  if (error) {
+    columnsWithErrors.value[column.name] = error;
+  } else {
+    delete columnsWithErrors.value[column.name];
+  }
+}
+
+const checkIfAnyColumnHasErrors = () => {
+  return Object.keys(columnsWithErrors.value).length > 0 ? false : true;
+}
+
+const debouncedValidation = debounce(async (columns: AdminForthResourceColumnCommon[]) => {
+  await mutex.runExclusive(async () => {
+    await validateUsingUserValidationFunction(columns);
+  });
+  setIsValidatingValue(false);
+  isValid.value = checkIfAnyColumnHasErrors();
+}, 500);
+
+watch(() => [editableColumns.value, props.validatingMode], async () => {
+  setIsValidatingValue(true);
+  
+  editableColumns.value?.forEach(column => {
+    checkIfColumnHasError(column);
+  });
+
+  if (props.validatingMode && doesUserHaveCustomValidation.value) {
+    debouncedValidation(editableColumns.value);
+  } else {
+    setIsValidatingValue(false);
+    isValid.value = checkIfAnyColumnHasErrors();
+  }
 });
 
+const setIsValidatingValue = (value: boolean) => {
+  if (!blockSettingIsValidating.value) {
+    isValidating.value = value;
+  }
+}
+
 
 const groups = computed(() => {
   let fieldGroupType;
@@ -381,9 +434,50 @@ watch(() => isValid.value, (value) => {
   emit('update:isValid', value);
 });
 
+async function validateUsingUserValidationFunction(editableColumnsInner: AdminForthResourceColumnCommon[]): Promise<void> {
+  if (doesUserHaveCustomValidation.value) {
+    try {
+      blockSettingIsValidating.value = true;
+      const res = await callAdminForthApi({
+        method: 'POST',
+        path: '/validate_columns',
+        body: {
+          resourceId: props.resource.resourceId,
+          editableColumns: editableColumnsInner.map(col => {return {name: col.name, value: currentValues.value?.[col.name]} }),
+          record: currentValues.value,
+        }
+      })
+      if (res.validationResults && Object.keys(res.validationResults).length > 0) {
+        for (const [columnName, validationResult] of Object.entries(res.validationResults) as [string, any][]) {
+          if (!validationResult.isValid) {
+            columnsWithErrors.value[columnName] = validationResult.message || 'Invalid value';
+          } else {
+            delete columnsWithErrors.value[columnName];
+          }
+        }
+        const columnsToProcess = editableColumns.value.filter(col => res.validationResults[col.name] === undefined);
+        columnsToProcess.forEach(column => {
+          checkIfColumnHasError(column);
+        });
+      } else {
+        editableColumnsInner.forEach(column => {
+          checkIfColumnHasError(column);
+        });
+      }
+      blockSettingIsValidating.value = false;
+    } catch (e) {
+      console.error('Error during custom validation', e);
+      blockSettingIsValidating.value = false;
+    }
+  }
+}
+
 defineExpose({
   columnError,
   editableColumns,
+  columnsWithErrors,
+  isValidating,
+  validateUsingUserValidationFunction
 })
 
 </script>

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

@@ -1,7 +1,6 @@
 <template>
   <!-- table -->
-  <div 
-    class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto "
+  <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto border dark:border-gray-700"
     :class="{'rounded-default': !noRoundings}"
     :style="isVirtualScrollEnabled ? { maxHeight: `${containerHeight}px` } : {}"
     @scroll="handleScroll"
@@ -21,7 +20,7 @@
 
       <tbody>
         <!-- table header -->
-        <tr class="t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
+        <tr class="border-b dark:border-gray-700 t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
           <td scope="col" class="list-table-header-cell p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
@@ -34,10 +33,8 @@
 
           <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
           
-            <div 
-              @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
-              class="flex items-center " :class="{'cursor-pointer':c.sortable}"
-            >
+            <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
+                class="flex items-center font-semibold" :class="{'cursor-pointer':c.sortable}">
               {{ c.label }}
 
               <div v-if="c.sortable">
@@ -67,7 +64,7 @@
             </div>
           </td>
 
-          <td scope="col" class="px-6 py-3">
+          <td scope="col" class="px-6 py-3 font-semibold">
             {{ $t('Actions') }}
           </td>
         </tr>
@@ -103,12 +100,12 @@
 
         <component
           v-for="(row, rowI) in rowsToRender"
-          :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
+          :is="tableRowReplaceInjection ? getCustomComponent(formatComponent(tableRowReplaceInjection)) : 'tr'"
           :key="`row_${row._primaryKeyValue}`"
           :record="row"
           :resource="resource"
           :adminUser="coreStore.adminUser"
-          :meta="tableRowReplaceInjection ? tableRowReplaceInjection.meta : undefined"
+          :meta="tableRowReplaceInjection ? formatComponent(tableRowReplaceInjection).meta : undefined"
           @click="onClick($event, row)"
           ref="rowRefs"
           class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
@@ -203,17 +200,17 @@
                   :key="action.id"
                 >
                     <component
-                      :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
-                      :meta="action.customComponent?.meta"
+                      v-if="action.customComponent"
+                      :is="action.customComponent ? getCustomComponent(formatComponent(action.customComponent)) : CallActionWrapper"
+                      :meta="formatComponent(action.customComponent).meta"
                       :row="row"
                       :resource="resource"
-                      :adminUser="adminUser"
-                      @callAction="(payload? : Object) => startCustomAction(action.id, row, payload)"
+                      :adminUser="coreStore.adminUser"
+                      @callAction="(payload? : Object) => startCustomAction(action.id as string | number, row, payload)"
                     >
                       <button
                         type="button"
                         class="border border-gray-300 dark:border-gray-700 dark:border-opacity-0 border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
-                        :disabled="rowActionLoadingStates?.[action.id]"
                       >
                         <component
                           v-if="action.icon"
@@ -236,7 +233,7 @@
                 :deleteRecord="deleteRecord"
                 :resourceId="resource.resourceId"
                 :startCustomAction="startCustomAction"
-                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems ?? []"
               />
             </div>
             
@@ -256,12 +253,12 @@
   -->
   <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="af-pagination-buttons-container inline-flex "
+    <div class="af-pagination-buttons-container af-button-shadow inline-flex rounded "
       v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
     >
       <!-- Buttons -->
       <button
-        class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-20 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page--; pageInput = page.toString();" 
         :disabled="page <= 1"
       >
@@ -273,7 +270,7 @@
         </span>
       </button>
       <button
-        class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover z-10 focus:z-20 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page = 1; 
         pageInput = page.toString();" 
         :disabled="page <= 1"
@@ -284,13 +281,13 @@
         type="text"
         v-model="pageInput"
         :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
-        class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
+        class="af-pagination-input z-10 min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround"
         @keydown="onPageKeydown($event)"
         @blur="validatePageInput()"
       />
 
       <button
-        class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-last-page-button z-10 flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:ring-4 focus:z-20 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
         {{ totalPages }}
       </button>
@@ -344,10 +341,10 @@
 
 
 import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref } from 'vue';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, executeCustomAction } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
@@ -360,7 +357,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -383,8 +380,8 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
-  customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclarationFull,
+  customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration[]
+  tableRowReplaceInjection?: AdminForthComponentDeclaration,
   isVirtualScrollEnabled: boolean
 }>();
 
@@ -414,7 +411,7 @@ const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 const showListActionsThreeDots = computed(() => {
   return  props.resource?.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) // show if any action is set to show in three dots menu
     || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) // or if there are custom action icons for three dots menu
-    || !props.resource?.options.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
+    || !props.resource?.options?.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
     || (props.resource?.options.baseActionsAsQuickIcons && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
 })
 
@@ -609,51 +606,29 @@ async function deleteRecord(row: any) {
 
 const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId: string, row: any, extraData: Record<string, any> = {}) {
-
-  actionLoadingStates.value[actionId] = true;
-
-  const data = await callAdminForthApi({
-    path: '/start_custom_action',
-    method: 'POST',
-    body: {
-      resourceId: props.resource?.resourceId,
-      actionId: actionId,
-      recordId: row._primaryKeyValue,
-      extra: extraData
-    }
-  });
-  
-  actionLoadingStates.value[actionId] = false;
-  
-  if (data?.redirectUrl) {
-    // Check if the URL should open in a new tab
-    if (data.redirectUrl.includes('target=_blank')) {
-      window.open(data.redirectUrl.replace('&target=_blank', '').replace('?target=_blank', ''), '_blank');
-    } else {
-      // Navigate within the app
-      if (data.redirectUrl.startsWith('http')) {
-        window.location.href = data.redirectUrl;
-      } else {
-        router.push(data.redirectUrl);
+async function startCustomAction(actionId: string | number, row: any, extraData: Record<string, any> = {}) {
+  await executeCustomAction({
+    actionId,
+    resourceId: props.resource?.resourceId || '',
+    recordId: row._primaryKeyValue,
+    extra: extraData,
+    setLoadingState: (loading: boolean) => {
+      actionLoadingStates.value[actionId] = loading;
+    },
+    onSuccess: async (data: any) => {
+      emits('update:records', true);
+
+      if (data.successMessage) {
+        alert({
+          message: data.successMessage,
+          variant: 'success'
+        });
       }
+    },
+    onError: (error: string) => {
+      showErrorTost(error);
     }
-    return;
-  }
-  if (data?.ok) {
-    emits('update:records', true);
-
-    if (data.successMessage) {
-      alert({
-        message: data.successMessage,
-        variant: 'success'
-      });
-    }
-  }
-  
-  if (data?.error) {
-    showErrorTost(data.error);
-  }
+  });
 }
 
 function validatePageInput() {

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

@@ -52,7 +52,7 @@
         </div>
       </div>
 
-     <div v-if="coreStore.config.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
+     <div v-if="coreStore?.config?.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
       <IconExclamationCircleOutline class="inline-block align-text-bottom mr-0,5 w-5 h-5" />
       Default user <strong>"adminforth"</strong> detected. Delete it and create your own account.
     </div>