adminforth 2.27.0-next.7 → 2.27.0-next.71

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

@@ -200,7 +200,7 @@
                   :key="action.id"
                 >
                     <component
-                      v-if="action.customComponent"
+                      v-if="action"
                       :is="action.customComponent ? getCustomComponent(formatComponent(action.customComponent)) : CallActionWrapper"
                       :meta="formatComponent(action.customComponent).meta"
                       :row="row"
@@ -211,12 +211,18 @@
                       <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="!!actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
                       >
                         <component
-                          v-if="action.icon"
+                          v-if="action.icon && !actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
                           :is="getIcon(action.icon)"
                           class="w-6 h-6 text-lightPrimary dark:text-darkPrimary"
                         />
+                        <Spinner
+                          v-if="actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
+                          class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
+                        />
+                        <span v-if="actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]" class="sr-only">Loading...</span>
                       </button>
                     </component>
 
@@ -356,8 +362,8 @@ import {
   IconInboxOutline
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
-import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
+import { Tooltip, Spinner } from '@/afcl';
+import type { AdminForthResourceFrontend, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -368,7 +374,7 @@ const { t } = useI18n();
 const { alert, confirm } = useAdminforth();
 const props = defineProps<{
   page: number,
-  resource: AdminForthResourceCommon | null,
+  resource: AdminForthResourceFrontend | null,
   rows: any[] | null,
   totalRows: number,
   pageSize: number,
@@ -613,7 +619,7 @@ async function startCustomAction(actionId: string | number, row: any, extraData:
     recordId: row._primaryKeyValue,
     extra: extraData,
     setLoadingState: (loading: boolean) => {
-      actionLoadingStates.value[actionId] = loading;
+      actionLoadingStates.value[`${actionId}_${row._primaryKeyValue}`] = loading;
     },
     onSuccess: async (data: any) => {
       emits('update:records', true);
@@ -638,10 +644,10 @@ function validatePageInput() {
   pageInput.value = validPage.toString();
 }
 /*
-*___________________________________________________________________
-*                                                                   |
-*                 Virtual Scroll Implementation                     |
-*___________________________________________________________________|
+* ___________________________________________________________________
+*|                                                                   |
+*|                 Virtual Scroll Implementation                     |
+*|___________________________________________________________________|
 */
 // Add throttle utility
 const throttle = (fn: Function, delay: number) => { 

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

@@ -1,5 +1,5 @@
 <template>
-      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
+      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border dark:border-gray-700"
         :class="{'rounded-default' : isRounded}"
       >
         <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">
@@ -64,7 +64,7 @@
   import { getCustomComponent, checkShowIf } from '@/utils';
   import { useCoreStore } from '@/stores/core';
   import { computed } from 'vue';
-  import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon } from '@/types/Common';
+  import type { AdminForthResourceFrontend, AdminForthResourceColumnInputCommon } from '@/types/Common';
   const props = withDefaults(defineProps<{ 
     columns: Array<{
         name: string;
@@ -83,7 +83,7 @@
     }>;
     groupName?: string | null;
     noTitle?: boolean;
-    resource: AdminForthResourceCommon | null;
+    resource: AdminForthResourceFrontend | null;
     record: Record<string, any>;
     isRounded?: boolean;
   }>(), {

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

@@ -71,7 +71,7 @@
             >
               <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
               <span class="overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
-                <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
                   fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
                   <Tooltip v-if="item.badgeTooltip">
                     {{ item.badge }}
@@ -90,13 +90,15 @@
               </svg>
             </button>
 
-            <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
-              <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
-                <li class="af-sidebar-menu-link">
-                    <MenuLink :item="child" isChild="true" @click="$emit('hideSidebar')"/>
+            <transition name="slow-drop">
+              <ul v-show="opened.includes(i)" :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1 overflow-hidden">              
+                <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
+                  <li class="af-sidebar-menu-link">
+                      <MenuLink :item="child" isChild="true" @click="$emit('hideSidebar')"/>
                   </li>
-              </template>
-          </ul>
+                </template>
+              </ul>
+            </transition>
       </li>
       <li v-else class="af-sidebar-menu-link">
         <MenuLink :item="item" @click="$emit('hideSidebar')"/>
@@ -129,7 +131,7 @@
                       } : {}"
                     >{{ item.label }}
 
-                        <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                        <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
                         fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
                         <Tooltip v-if="item.badgeTooltip">
                             {{ item.badge }}
@@ -292,6 +294,25 @@
     background-color: rgba(75, 85, 99, 0.4);
   }
 
+  /* Custom animation for dropdown */
+  .slow-drop-enter-active,
+  .slow-drop-leave-active {
+    overflow: hidden;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .slow-drop-enter-from,
+  .slow-drop-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  .slow-drop-enter-to,
+  .slow-drop-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
   /* For browsers that support overlay scrollbars natively */
   @supports (overflow: overlay) {
     .sidebar-scroll {

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

@@ -43,20 +43,28 @@
               </div>
             </div>
           </li>
-          <li v-for="action in customActions" :key="action.id">
-            <div class="wrapper"> 
+          <li v-for="(action, i) in customActions" :key="action.id">
+            <div 
+              class="wrapper"                 
+              @click="injectedComponentClick(threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
+            > 
               <component
+                :ref="(el: any) => setComponentRef(el, threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
                 :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
-                :meta="formatComponent(action.customComponent as AdminForthComponentDeclarationFull).meta || {}"
+                :meta="formatComponent(action.customComponent).meta"
                 @callAction="(payload? : Object) => handleActionClick(action, payload)"
               >
-                <a @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
-                  <div class="flex items-center gap-2">
+                <a @click.prevent class="block">
+                  <div class="flex items-center gap-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
                     <component 
-                      v-if="action.icon" 
+                      v-if="action.icon && !actionLoadingStates[action.id!]" 
                       :is="getIcon(action.icon)" 
                       class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
                     />
+                    <Spinner
+                      v-if="actionLoadingStates[action.id!]"
+                      class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
+                    />
                     {{ action.name }}
                   </div>
                 </a>
@@ -91,12 +99,12 @@
 import { getCustomComponent, getIcon, formatComponent, executeCustomAction } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { useAdminforth } from '@/adminforth';
-import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
 import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
+import { Spinner } from '@/afcl';
 
 const { list, alert} = useAdminforth();
 const route = useRoute();
@@ -104,6 +112,7 @@ const coreStore = useCoreStore();
 const router = useRouter();
 const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 const showDropdown = ref(false);
+const actionLoadingStates = ref<Record<string, boolean>>({});
 const dropdownRef = ref<HTMLElement | null>(null);
 const buttonTriggerRef = ref<HTMLElement | null>(null);
 
@@ -135,6 +144,9 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
     resourceId: route.params.resourceId as string,
     recordId: route.params.primaryKey as string,
     extra: payload || {},
+    setLoadingState: (loading: boolean) => {
+      actionLoadingStates.value[action.id!] = loading;
+    },
     onSuccess: async (data: any) => {
       await coreStore.fetchRecord({
         resourceId: route.params.resourceId as string,
@@ -165,6 +177,7 @@ function startBulkAction(actionId: string) {
 }
 
 async function injectedComponentClick(index: number) {
+  console.log('Injected component click triggered for index:', index);
   const componentRef = threeDotsDropdownItemsRefs.value[index];
   if (componentRef && 'click' in componentRef) {
     (componentRef as any).click?.();
@@ -195,8 +208,11 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-  .wrapper > * {
-    @apply px-4 py-2;
+  .wrapper {
+    @apply px-4 py-2 
+    hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover 
+    dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover
+    cursor-pointer;
   }
 </style>
 

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

@@ -11,6 +11,7 @@
         class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
       >
         <RouterLink
+          v-if="foreignResource && foreignResource?.pk"
           class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
           :to="{
             name: 'resource-show',

package/dist/spa/src/controls/BoolToggle.vue

@@ -12,7 +12,7 @@
 import Toggle from '@/afcl/Toggle.vue';
 import type {
   AdminForthResourceColumnCommon,
-  AdminForthResourceCommon,
+    AdminForthResourceFrontend,
   AdminUser,
 } from "@/types/Common";
 
@@ -22,7 +22,7 @@ import type {
         column: AdminForthResourceColumnCommon,
         record: any,
         meta: any,
-        resource: AdminForthResourceCommon,
+        resource: AdminForthResourceFrontend,
         adminUser: AdminUser,
         readonly: boolean
     }>();

package/dist/spa/src/renderers/RichText.vue

@@ -3,14 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
+import type { AdminForthResourceColumnCommon, AdminForthResourceFrontend, AdminUser } from '@/types/Common'
 import { protectAgainstXSS } from '@/utils'
 
 const props = defineProps<{
   column: AdminForthResourceColumnCommon
   record: any
   meta: any
-  resource: AdminForthResourceCommon
+  resource: AdminForthResourceFrontend
   adminUser: AdminUser
 }>()
 const htmlContent = protectAgainstXSS(props.record[props.column.name])

package/dist/spa/src/renderers/ZeroStylesRichText.vue

@@ -4,14 +4,14 @@
   
   <script setup lang="ts">
   import { nextTick, onMounted, ref, watch } from 'vue'
-  import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
+  import type { AdminForthResourceColumnCommon, AdminForthResourceFrontend, AdminUser } from '@/types/Common'
   import { protectAgainstXSS } from '@/utils'
   
   const props = defineProps<{
     column: AdminForthResourceColumnCommon
     record: any
     meta: any
-    resource: AdminForthResourceCommon
+    resource: AdminForthResourceFrontend
     adminUser: AdminUser
   }>()
   

package/dist/spa/src/spa_types/core.ts

@@ -1,4 +1,6 @@
 import type { AdminForthResource, AdminForthResourceColumn } from '../types/Back.js';
+import type { FilterParams } from '@/types/Common';
+import type { Ref, ComputedRef } from 'vue';
 
 export type resourceById = {
     [key: string]: AdminForthResource;
@@ -61,3 +63,33 @@ export type AllowedActions = {
     delete: boolean,
 }
 
+
+export type sortType = {
+  field: string, 
+  direction: 'ask' | 'desc'
+} | null;
+
+export type AdminforthFilterStore = {
+  filters: Ref<FilterParams[]>,
+
+  setSort: (sort: sortType) => void,
+  getSort: () => sortType,
+
+  setFilter: (filters: FilterParams) => void,
+  setFilters: (filters: FilterParams[]) => void,
+
+  getFilters: () => FilterParams[],
+
+  clearFilter: (fieldName: string) => void,
+  clearFilters: () => void,
+
+  shouldFilterBeHidden: (fieldName: string) => boolean,
+
+  visibleFiltersCount: ComputedRef<number>,
+}
+
+export interface AdminforthFilterStoreUnwrapped extends Omit<AdminforthFilterStore, 'filters' | 'visibleFiltersCount'> {
+    filters: FilterParams[],
+    visibleFiltersCount: number,
+}
+

package/dist/spa/src/stores/core.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
 import websocket from '@/websocket';
@@ -21,6 +21,19 @@ export const useCoreStore = defineStore('core', () => {
   const userData: Ref<UserData | null> = ref(null);
   const isResourceFetching = ref(false);
   const isInternetError = ref(false);
+  const screenWidth = ref(window.innerWidth);
+
+  onMounted(() => {
+    window.addEventListener('resize', updateWidth);
+  });
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWidth);
+  });
+
+  const isMobile = computed(() => screenWidth.value <= 768);
+  const updateWidth = () => {
+    screenWidth.value = window.innerWidth
+  }
 
   const resourceColumnsWithFilters = computed(() => {
     if (!resource.value) {
@@ -29,7 +42,7 @@ export const useCoreStore = defineStore('core', () => {
     return resource.value.columns.filter((col: AdminForthResourceColumnCommon) => col.showIn?.filter);
   })
 
-  const resourceOptions: Ref<AdminForthResourceCommon['options'] | null> = ref(null);
+  const resourceOptions: Ref<AdminForthResourceFrontend['options'] | null> = ref(null);
   const resourceColumnsError: Ref<string> = ref('');
   const resourceColumnsId: Ref<string | null> = ref(null);
   const adminUser: Ref<null | AdminUser> = ref(null);
@@ -261,5 +274,6 @@ export const useCoreStore = defineStore('core', () => {
     isResourceFetching,
     isIos,
     isInternetError,
+    isMobile,
   }
 })

package/dist/spa/src/stores/filters.ts

@@ -1,40 +1,42 @@
 import { ref, computed, type Ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useCoreStore } from './core';
+import type { FilterParams } from '@/types/Common';
+import type { AdminforthFilterStore, sortType } from '../spa_types/core';
 
 export const useFiltersStore = defineStore('filters', () => {
-    const filters: Ref<any[]> = ref([]);
-    const sort: Ref<any> = ref({});
+    const filters: Ref<FilterParams[]> = ref([]);
+    const sort: Ref<sortType> = ref(null);
     const coreStore = useCoreStore();
 
-    const setSort = (s: any) => {
+    const setSort = (s: sortType): void => {
         sort.value = s;
     }
-    const getSort = () => {
+    const getSort = (): sortType => {
         return sort.value;
     }
-    const setFilter = (filter: any) => {
+    const setFilter = (filter: FilterParams) => {
         const index = filters.value.findIndex(f => f.field === filter.field);
-        if (filters.value[index] && filters.value[index].operator === filter.value.operator) {
+        if (filters.value[index] && filters.value[index].operator === filter.operator) {
             filters.value[index] = filter;
             return;
         }
         filters.value.push(filter);
     }
-    const setFilters = (f: any) => {
+    const setFilters = (f: FilterParams[]) => {
         filters.value = f;
     }
-    const getFilters = () => {
+    const getFilters = (): FilterParams[] => {
         return filters.value;
     }
-    const clearFilter = (fieldName: string) => {
+    const clearFilter = (fieldName: string): void => {
         filters.value = filters.value.filter(f => f.field !== fieldName);
     }
-    const clearFilters = () => {
+    const clearFilters = (): void => {
         filters.value = [];
     }
 
-    const shouldFilterBeHidden = (fieldName: string) => {
+    const shouldFilterBeHidden = (fieldName: string): boolean => {
         if (coreStore.resource?.columns) {
             const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
             if (column?.showIn?.filter !== true) {
@@ -48,7 +50,7 @@ export const useFiltersStore = defineStore('filters', () => {
         return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
     });
 
-    return {
+    const store = {
         setFilter, 
         getFilters, 
         clearFilters, 
@@ -60,4 +62,6 @@ export const useFiltersStore = defineStore('filters', () => {
         shouldFilterBeHidden,
         clearFilter
     }
+
+    return store as AdminforthFilterStore;
 })