Feat/bulk action component #323

NoOne7135 · 2025-08-20T14:36:50Z

No description provided.

Copilot

Pull Request Overview

This PR introduces a new bulk action component system that allows attaching custom Vue components to actions. The main purpose is to enable custom wrappers around action triggers, such as requiring 2FA verification before executing actions.

Key changes:

Adds support for customComponent property in action definitions
Introduces CallActionWrapper component for handling action clicks
Updates action handling across multiple views to support custom components

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`dev-demo/resources/users.ts`	Updates user resource configuration to use new actions format and adds demo action
`dev-demo/custom/ShadowLoginButton.vue`	Adds new custom component file for testing
`adminforth/types/Back.ts`	Extends action interface to include optional customComponent property
`adminforth/spa/src/views/ShowView.vue`	Updates action button rendering to support custom components
`adminforth/spa/src/components/ThreeDotsMenu.vue`	Adds custom component support to dropdown menu actions
`adminforth/spa/src/components/ResourceListTableVirtual.vue`	Integrates custom components in virtual table action buttons
`adminforth/spa/src/components/ResourceListTable.vue`	Integrates custom components in regular table action buttons
`adminforth/spa/src/components/CallActionWrapper.vue`	New wrapper component for handling action clicks with disabled state
`adminforth/modules/configValidator.ts`	Adds validation for custom components in action definitions
`adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md`	Documents how to use custom components with 2FA plugin

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-20T14:38:02Z

adminforth/spa/src/components/CallActionWrapper.vue

+function onClick() {
+    if (props.disabled) return;
+    const extra = { someData: 'example' };
+    emit('callAction', extra);


The hardcoded 'extra' object with example data appears to be placeholder code that should be removed or made configurable.

Suggested change

emit('callAction', extra);

const props = defineProps<{ disabled?: boolean; extra?: any }>();

const emit = defineEmits<{ (e: 'callAction', extra?: any ): void }>();

function onClick() {

if (props.disabled) return;

emit('callAction', props.extra);

Copilot · 2025-08-20T14:38:02Z

adminforth/spa/src/components/ThreeDotsMenu.vue

+            </component>
          </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">


Adding optional chaining (?.) to bulkActions suggests it might be undefined, but this could cause silent failures. Consider checking if bulkActions exists before filtering or provide a default empty array.

Suggested change

<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">

Copilot · 2025-08-20T14:38:02Z

adminforth/spa/src/components/ResourceListTable.vue

+                      <button
+                        type="button"
+                        :disabled="rowActionLoadingStates?.[action.id]"
+                        @click.stop.prevent="startCustomAction(action.id, row)"


[nitpick] The click handler uses both .stop and .prevent modifiers which might be overly restrictive. Consider if both are necessary or if this could interfere with expected event behavior.

Suggested change

@click.stop.prevent="startCustomAction(action.id, row)"

@click.stop="startCustomAction(action.id, row)"

Copilot · 2025-08-20T14:38:03Z

adminforth/spa/src/components/ResourceListTableVirtual.vue

+                      <button
+                        type="button"
+                        :disabled="rowActionLoadingStates?.[action.id]"
+                        @click.stop.prevent="startCustomAction(action.id, row)"


[nitpick] The click handler uses both .stop and .prevent modifiers which might be overly restrictive. Consider if both are necessary or if this could interfere with expected event behavior.

Suggested change

@click.stop.prevent="startCustomAction(action.id, row)"

@click.prevent="startCustomAction(action.id, row)"

…DotsMenu to handle null bulkActions

…oss components

ivictbor · 2025-09-10T12:45:28Z

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

+import { computed } from 'vue';
+
+const props = defineProps<{ meta?: { color?: string; radius?: number; padding?: number } }>();
+const emit = defineEmits<{ (e: 'callAction', payload?: unknown): void }>();


@NoOne7135 payload any here?

ivictbor · 2025-09-10T12:46:14Z

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

+<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')">


@NoOne7135 for verbosity can we use emit('callAction', {}) ? so user will understand maybe better that he will pass payload

ivictbor · 2025-09-10T12:49:19Z

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

+  </script>
+```
+
+Now we need to read code entered on fronted on backend and verify that is is valid and not expired, on backend action handler:


Now we need to use code which we got from user on fronted, inside of backend action handler and verify that is is valid and not expired:

ivictbor · 2025-09-10T13:00:22Z

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

+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"


@NoOne7135 lets use mark as listed example as base (with link to original mark as listed action)

ivictbor · 2025-09-10T13:02:36Z

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

+  borderRadius: (props.meta?.radius ?? 8) + 'px',
+  padding: (props.meta?.padding ?? 2) + 'px',
+}));
+</script>


@NoOne7135 lets add one more example which demonstrates how to pass dynamic value from frontend to backend.

@click="emit('callAction', {asListed: true})"

@click="emit('callAction', {asListed: false})"

and how to access it on backend in handler - using extra

NoOne7135 added 2 commits August 20, 2025 11:48

chore: bulk action component progress

e850dee

feat: add CallActionWrapper component and integrate with action menus

c83ee3b

NoOne7135 requested a review from Copilot August 20, 2025 14:36

Copilot AI reviewed Aug 20, 2025

View reviewed changes

NoOne7135 requested a review from ivictbor August 20, 2025 14:50

NoOne7135 and others added 5 commits August 21, 2025 10:25

fix: enhance CallActionWrapper to accept extra props and update Three…

e65f705

…DotsMenu to handle null bulkActions

Update 02-TwoFactorsAuth.md

a5defaf

feat: enhance call action handling to support additional payloads acr…

c95b1b6

…oss components

docs: add customComponent for actions with example

b9a4d32

fix: update customComponent file handling to support string type

41eea76

ivictbor requested changes Sep 10, 2025

View reviewed changes

ivictbor assigned NoOne7135 Sep 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/bulk action component #323

Feat/bulk action component #323

Uh oh!

NoOne7135 commented Aug 20, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 20, 2025

Uh oh!

Copilot AI Aug 20, 2025

Uh oh!

Copilot AI Aug 20, 2025

Uh oh!

Copilot AI Aug 20, 2025

Uh oh!

ivictbor Sep 10, 2025

Uh oh!

ivictbor Sep 10, 2025

Uh oh!

ivictbor Sep 10, 2025

Uh oh!

ivictbor Sep 10, 2025

Uh oh!

ivictbor Sep 10, 2025

Uh oh!

Uh oh!

	<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">

	@click.stop.prevent="startCustomAction(action.id, row)"
	@click.stop="startCustomAction(action.id, row)"

	@click.stop.prevent="startCustomAction(action.id, row)"
	@click.prevent="startCustomAction(action.id, row)"

Feat/bulk action component #323

Are you sure you want to change the base?

Feat/bulk action component #323

Uh oh!

Conversation

NoOne7135 commented Aug 20, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

ivictbor Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

ivictbor Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

ivictbor Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

ivictbor Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

ivictbor Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!