chore: bulk action component progress

Author: NoOne7135

adminforth/spa/src/components/ThreeDotsMenu.vue

@@ -35,7 +35,7 @@
               </div>
             </a>
           </li>
-          <li v-for="action in bulkActions.filter(a => a.showInThreeDotsDropdown)" :key="action.id">
+          <li v-for="action in bulkActions?.filter(a => a.showInThreeDotsDropdown)" :key="action.id">
             <a href="#" @click.prevent="startBulkAction(action.id)" 
                 class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
                 :class="{

adminforth/spa/src/views/ShowView.vue

@@ -10,21 +10,44 @@
       :adminUser="coreStore.adminUser"
     />
     <BreadcrumbsWithButtons>
-      <template v-if="coreStore.resource?.options?.bulkActions">
-        <button 
-          v-for="action in coreStore.resource.options.bulkActions.filter(a => a.showIn?.showButton)" 
-          :key="action.id"
-          @click="startCustomAction(action.id)"
-          :disabled="actionLoadingStates[action.id]"
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary 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"
-        >
-          <component 
-            v-if="action.icon" 
-            :is="getIcon(action.icon)" 
-            class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
-          />
-          {{ action.name }}
-        </button>
+      <template v-if="coreStore.resource?.options?.actions">
+
+        <template  v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" >
+          <component
+              v-if="action.customComponent"
+              :is="getCustomComponent(action.customComponent)"
+              :meta="action.customComponent.meta"
+              @callAction="startCustomAction(action.id)"
+              :disabled="actionLoadingStates[action.id]"
+            >
+            <button 
+              :key="action.id"
+              class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary 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"
+            >
+              <component 
+                v-if="action.icon" 
+                :is="getIcon(action.icon)" 
+                class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
+              />
+              {{ action.name }}
+            </button>
+          </component>
+
+          <button 
+            v-else
+            :key="action.id"
+            @click="startCustomAction(action.id)"
+            :disabled="actionLoadingStates[action.id]"
+            class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary 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"
+          >
+            <component 
+              v-if="action.icon" 
+              :is="getIcon(action.icon)" 
+              class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
+            />
+            {{ action.name }}
+          </button>
+        </template>
       </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"

adminforth/types/Back.ts

@@ -819,6 +819,7 @@ export interface AdminForthActionInput {
   }>;
   icon?: string;
   id?: string;
+  customComponent?: AdminForthComponentDeclaration;
 }
 
 export interface AdminForthResourceInput extends Omit<NonNullable<AdminForthResourceInputCommon>, 'columns' | 'hooks' | 'options'> {

dev-demo/custom/ShadowLoginButton.vue

@@ -0,0 +1 @@
+<span> TEST CUSTOM COMPONENT </span>

dev-demo/resources/users.ts

@@ -50,7 +50,7 @@ export default {
   dataSource: "maindb",
   table: "users",
   resourceId: "users",
-  label: "Users",
+  label: "Users1",
 
   recordLabel: (r: any) => `👤 ${r.email}`,
   plugins: [
@@ -153,19 +153,33 @@ export default {
     }),
   ],
   options: {
-    allowedActions: {
-      create: async ({
-        adminUser,
-        meta,
-      }: {
-        adminUser: AdminUser;
-        meta: any;
-      }) => {
-        // console.log('create', adminUser, meta);
-        return true;
-      },
-      delete: true,
-    },
+    actions: [
+      {
+        name: 'Auto submit',  // Display name of the action
+        icon: 'flowbite:play-solid',  // Icon to display (using Flowbite icons)
+        
+        // Control who can see/use this action
+        allowed: ({ adminUser, standardAllowedActions }) => {
+          return true;  // Allow everyone
+        },
+        
+        // Handler function when action is triggered
+        action: async ({ recordId, adminUser }) => {
+          console.log("auto submit", recordId, adminUser);
+          return { 
+            ok: true, 
+            successMessage: "Auto submitted" 
+          };
+        },
+
+        // Configure where the action appears
+        showIn: {
+          showButton: true,        // Show as a button
+         // showThreeDotsMenu: true, // Show in the three dots menu
+          list: true,          // Show in the list view
+        }
+      }
+    ],
   },
   columns: [
     {