Merge pull request #323 from devforth/feat/bulkActionComponent

Feat/bulk action component

Author: ivictbor

adminforth/commands/createCustomComponent/main.js

@@ -188,6 +188,9 @@ async function handleCrudPageInjectionCreation(config, resources) {
   const injectionPosition = await select({
     message: 'Where exactly do you want to inject the component?',
     choices: [
+      ...(crudType === 'create' || crudType === 'edit'
+        ? [{ name: '💾 Save button on create/edit page', value: 'saveButton' }, new Separator()]
+        : []),
       { name: '⬆️ Before Breadcrumbs', value: 'beforeBreadcrumbs' },
       { name: '➡️ Before Action Buttons', value: 'beforeActionButtons' },
       { name: '⬇️ After Breadcrumbs', value: 'afterBreadcrumbs' },
@@ -207,13 +210,15 @@ async function handleCrudPageInjectionCreation(config, resources) {
     },
   });
 
-  const isThin = await select({
-    message: 'Will this component be thin enough to fit on the same page with list (so list will still shrink)?',
-    choices: [
-      { name: 'Yes', value: true },
-      { name: 'No', value: false },
-    ],
-  });
+  const isThin = crudType === 'list'
+    ? await select({
+        message: 'Will this component be thin enough to fit on the same page with list (so list will still shrink)?',
+        choices: [
+          { name: 'Yes', value: true },
+          { name: 'No', value: false },
+        ],
+      })
+    : false;
   const formattedAdditionalName = additionalName
     ? additionalName[0].toUpperCase() + additionalName.slice(1)
     : '';

adminforth/commands/createCustomComponent/templates/customCrud/saveButton.vue.hbs

@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="px-4 py-2 border border-blue-500 text-blue-600 rounded hover:bg-blue-50 disabled:opacity-50"
+    :disabled="props.disabled || props.saving || !props.isValid"
+    @click="props.saveRecord()"
+  >
+    <span v-if="props.saving">Saving…</span>
+    <span v-else>Save</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps<{
+  record: any
+  resource: any
+  adminUser: any
+  meta: any
+  saving: boolean
+  validating: boolean
+  isValid: boolean
+  disabled: boolean
+  saveRecord: () => Promise<void>
+}>();
+</script>
+
+<style scoped>
+</style>

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -440,6 +440,78 @@ beforeActionButtons: [
 
 ## List table custom
 
+## Create/Edit custom Save button
+
+You can replace the default Save button on the create and edit pages with your own Vue component.
+
+Supported locations:
+- `pageInjections.create.saveButton`
+- `pageInjections.edit.saveButton`
+
+Example configuration:
+
+```ts title="/resources/apartments.ts"
+{
+  resourceId: 'aparts',
+  ...
+  options: {
+    pageInjections: {
+      create: {
+        // String shorthand
+        saveButton: '@@/SaveBordered.vue',
+      },
+      edit: {
+        // Object form (lets you pass meta later, if needed)
+        saveButton: { file: '@@/SaveBordered.vue' },
+      }
+    }
+  }
+}
+```
+
+Minimal example of a custom save button component:
+
+```vue title="/custom/SaveBordered.vue"
+<template>
+  <button
+    class="px-4 py-2 border border-blue-500 text-blue-600 rounded hover:bg-blue-50 disabled:opacity-50"
+    :disabled="props.disabled || props.saving || !props.isValid"
+    @click="props.saveRecord()"
+  >
+    <span v-if="props.saving">{{$t('Saving…')}}</span>
+    <span v-else>{{$t('Save')}}</span>
+  </button>
+  
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  record: any
+  resource: any
+  adminUser: any
+  meta: any
+  saving: boolean
+  validating: boolean
+  isValid: boolean
+  disabled: boolean
+  saveRecord: () => Promise<void>
+}>();
+</script>
+```
+
+Notes:
+- Your component fully replaces the default Save button in the page header.
+- The `saveRecord()` prop triggers the standard AdminForth save flow. Call it on click.
+- `saving`, `validating`, `isValid`, and `disabled` reflect the current form state.
+- If no `saveButton` is provided, the default button is shown.
+
+Scaffolding via CLI: you can generate a ready-to-wire component and auto-update the resource config using the interactive command:
+
+```bash
+adminforth component
+# Choose: CRUD page injections → (create|edit) → Save button
+```
+
 ## Global Injections
 
 You have opportunity to inject custom components to the global layout. For example, you can add a custom items into user menu

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

@@ -263,4 +263,114 @@ bulkActions: [
     },
   }
 ],
-```
+```
+
+## Custom Component
+
+If you want to style an action's button/icon without changing its behavior, attach a custom UI wrapper via `customComponent`. 
+The file points to your SFC in the custom folder (alias `@@/`), and `meta` lets you pass lightweight styling options (e.g., border color, radius).
+
+```ts title="./resources/apartments.ts"
+{
+  resourceId: 'aparts',
+  options: {
+    actions: [
+      {
+        name: 'Auto submit',
+        icon: 'flowbite:play-solid',
+        // UI wrapper for the built-in action button
+        //diff-add
+        customComponent: {
+          //diff-add
+          file: '@@/ActionBorder.vue',        // SFC path in your custom folder
+          //diff-add
+          meta: { color: '#94a3b8', radius: 10 } // free-form styling params
+          //diff-add
+        },
+        showIn: { list: true, showButton: true, showThreeDotsMenu: true },
+        action: async ({ recordId, adminUser }) => {
+          return { ok: true, successMessage: 'Auto submitted' };
+        }
+      }
+    ]
+  }
+}
+```
+
+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` (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` (optionally with a payload) to trigger the action when the wrapper is clicked -->
+  <div :style="styleObj" @click="emit('callAction', {})">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ meta?: { color?: string; radius?: number; padding?: number } }>();
+const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
+
+const styleObj = computed(() => ({
+  display: 'inline-block',
+  border: `1px solid ${props.meta?.color ?? '#e5e7eb'}`,
+  borderRadius: (props.meta?.radius ?? 8) + 'px',
+  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/documentation/docs/tutorial/06-CLICommands.md

@@ -353,6 +353,19 @@ Generated example:
 custom/OrderShowBottomExportButton.vue
 ```
 
+Special position for create/edit:
+- `saveButton` — replaces the default Save button at the top bar.
+
+Example usage via interactive flow:
+```bash
+adminforth component
+# → CRUD Page Injections
+# → (create | edit)
+# → Save button
+```
+
+Your generated component will receive props documented in Page Injections → Create/Edit custom Save button. At minimum, call `props.saveRecord()` on click and respect `props.saving`, `props.isValid`, and `props.disabled`.
+
 ---
 
 #### 🔐 Login Page Injections (`login`)

adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md

@@ -227,7 +227,7 @@ To do it, first, create frontend custom component which wraps and intercepts cli
   async function onClick() {
     if (props.disabled) return;
 
-    const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();  // this will ask user to enter code
+  const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();  // this will ask user to enter code
     emit('callAction', { verificationResult }); // then we pass this verification result to action (from fronted to backend)
   }
 </script>
@@ -303,6 +303,74 @@ options: {
 }
 ```
 
+## Request 2FA for create/edit (secure save gating)
+
+To protect create and edit operations, collect the result of the 2FA modal on the frontend and send it along with the save payload. The server must verify it before writing changes.
+
+Frontend (custom Save button example):
+
+```vue
+<template>
+  <button :disabled="disabled || saving || !isValid" @click="onClick">Save</button>
+  <!-- The plugin injects TwoFAModal globally, exposing window.adminforthTwoFaModal -->
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  disabled: boolean;
+  saving: boolean;
+  isValid: boolean;
+  // saveRecord accepts optional meta with confirmationResult
+  saveRecord: (opts?: { confirmationResult?: any }) => Promise<void>;
+  meta?: any;
+}>();
+
+async function onClick() {
+  if (props.disabled || props.saving || !props.isValid) return;
+  const modal = (window as any)?.adminforthTwoFaModal;
+  if (modal?.get2FaConfirmationResult) {
+    const confirmationResult = await modal.get2FaConfirmationResult(undefined, props.meta?.twoFaTitle || 'Confirm to save changes');
+    await props.saveRecord({ confirmationResult });
+  } else {
+    const code = window.prompt('Enter your 2FA code to proceed');
+    if (!code) return;
+    await props.saveRecord({ confirmationResult: { mode: 'totp', result: code } });
+  }
+}
+</script>
+```
+
+Backend (resource hook verification):
+
+```ts
+// Inside resource config
+hooks: {
+  edit: {
+    beforeSave: async ({ adminUser, adminforth, extra }) => {
+      const t2fa = adminforth.getPluginByClassName('TwoFactorsAuthPlugin');
+      const confirmationResult = extra?.body?.meta?.confirmationResult;
+      if (!confirmationResult) {
+        return { ok: false, error: 'Two-factor authentication confirmation result is missing' };
+      }
+      const cookies = extra?.cookies;
+      const verifyRes = await t2fa.verify(confirmationResult, {
+        adminUser,
+        userPk: adminUser.pk,
+        cookies,
+      });
+      if (!('ok' in verifyRes) || verifyRes.ok !== true) {
+        return { ok: false, error: verifyRes?.error || 'Two-factor authentication failed' };
+      }
+      return { ok: true };
+    },
+  },
+}
+```
+
+This approach ensures 2FA cannot be bypassed by calling the API directly:
+- The client collects verification via the modal and forwards it under `meta.confirmationResult`.
+- The server validates it in `beforeSave` with access to `extra.cookies` and the `adminUser`.
+
 ## Request 2FA from custom components
 
 Imagine you have some button which does some API call
@@ -360,7 +428,7 @@ import adminforth from '@/adminforth';
 
 async function callAdminAPI() {
   // diff-add
-  const verificationResult = await window.adminforthTwoFaModal.getCode();
+  const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
 
   const res = await callApi({
     path: '/myCriticalAction',

adminforth/modules/codeInjector.ts

@@ -473,6 +473,18 @@ class CodeInjector implements ICodeInjector {
           });
         }
       });
+      resource.options.actions.forEach((action) => {
+        const cc = action.customComponent;
+        if (!cc) return;
+      
+        const file = (typeof cc === 'string') ? cc : cc.file;
+        if (!file) {
+          throw new Error('customComponent.file is missing for action: ' + JSON.stringify({ id: action.id, name: action.name }));
+        }
+        if (!customResourceComponents.includes(file)) {
+          customResourceComponents.push(file);
+        }
+      });
 
       (Object.values(resource.options?.pageInjections || {})).forEach((injection) => {
         Object.values(injection).forEach((filePathes: {file: string}[]) => {