fix: enhance action handling with optional payload support and improve type definitions

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md

@@ -298,13 +298,13 @@ The file points to your SFC in the custom folder (alias `@@/`), and `meta` lets
 ```
 
 Use this minimal wrapper component to add a border/rounding around the default action UI while keeping the action logic intact. 
-Keep the `<slot />` (that's where AdminForth renders the default button) and emit `callAction` to trigger the handler when the wrapper is clicked.
+Keep the `<slot />` (that's where AdminForth renders the default button) and emit `callAction` (optionally with a payload) to trigger the handler when the wrapper is clicked.
 
 ```ts title="./custom/ActionBorder.vue"
 <template>
   <!-- Keep the slot: AdminForth renders the default action button/icon here -->
-  <!-- Emit `callAction` to trigger the action when the wrapper is clicked -->
-  <div :style="styleObj" @click="emit('callAction')">
+  <!-- Emit `callAction` (optionally with a payload) to trigger the action when the wrapper is clicked -->
+  <div :style="styleObj" @click="emit('callAction', {})">
     <slot />
   </div>
 </template>
@@ -313,7 +313,7 @@ Keep the `<slot />` (that's where AdminForth renders the default button) and emi
 import { computed } from 'vue';
 
 const props = defineProps<{ meta?: { color?: string; radius?: number; padding?: number } }>();
-const emit = defineEmits<{ (e: 'callAction', payload?: unknown): void }>();
+const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
 
 const styleObj = computed(() => ({
   display: 'inline-block',
@@ -322,4 +322,55 @@ const styleObj = computed(() => ({
   padding: (props.meta?.padding ?? 2) + 'px',
 }));
 </script>
-```
+```
+
+### Pass dynamic values to the action
+
+You can pass arbitrary data from your custom UI wrapper to the backend action by emitting `callAction` with a payload. That payload will be available on the server under the `extra` argument of your action handler.
+
+Frontend examples:
+
+```vue title="./custom/ActionBorder.vue"
+<template>
+  <!-- Two buttons that pass different flags to the action -->
+  <button @click="emit('callAction', { asListed: true })" class="mr-2">Mark as listed</button>
+  <button @click="emit('callAction', { asListed: false })">Mark as unlisted</button>
+
+  <!-- Or keep the default slot button and wrap it: -->
+  <div :style="styleObj" @click="emit('callAction', { asListed: true })">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
+</script>
+```
+
+Backend handler: read the payload via `extra`.
+
+```ts title="./resources/apartments.ts"
+{
+  resourceId: 'aparts',
+  options: {
+    actions: [
+      {
+        name: 'Toggle listed',
+        icon: 'flowbite:eye-solid',
+        showIn: { list: true, showButton: true, showThreeDotsMenu: true },
+        // The payload from emit('callAction', { asListed: true|false }) arrives here as `extra`
+        action: async ({ resource, recordId, adminUser, extra }) => {
+          const asListed = extra?.asListed === true;
+          // Example update (use your own data layer):
+          await admin.resource('aparts').update(recordId, { listed: asListed });
+          return { ok: true, successMessage: `Set listed=${asListed}` };
+        }
+      }
+    ]
+  }
+}
+```
+
+Notes:
+- If you don’t emit a payload, the default behavior is used by the UI (e.g., in lists the current row context is used). When you do provide a payload, it will be forwarded to the backend as `extra` for your action handler.
+- You can combine default context with your own payload by merging before emitting, for example: `emit('callAction', { ...row, asListed: true })` if your component has access to the row object.

adminforth/modules/codeInjector.ts

@@ -482,7 +482,6 @@ class CodeInjector implements ICodeInjector {
           throw new Error('customComponent.file is missing for action: ' + JSON.stringify({ id: action.id, name: action.name }));
         }
         if (!customResourceComponents.includes(file)) {
-          console.log('Found injection', file);
           customResourceComponents.push(file);
         }
       });

adminforth/spa/src/components/ThreeDotsMenu.vue

@@ -107,7 +107,7 @@ const props = defineProps({
 
 const emit = defineEmits(['startBulkAction']);
 
-async function handleActionClick(action: any, payload: any) {
+async function handleActionClick(action: AdminForthActionInput, payload: any) {
   adminforth.list.closeThreeDotsDropdown();
   
   const actionId = action.id;

adminforth/spa/src/views/ShowView.vue

@@ -243,7 +243,7 @@ async function deleteRecord() {
     
 }
 
-async function startCustomAction(actionId, extra) {  
+async function startCustomAction(actionId: string, extra: any) {  
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({

dev-demo/resources/users.ts

@@ -50,7 +50,7 @@ export default {
   dataSource: "maindb",
   table: "users",
   resourceId: "users",
-  label: "Users1",
+  label: "Users",
 
   recordLabel: (r: any) => `👤 ${r.email}`,
   plugins: [