diff --git a/components/ComponentPreview.vue b/components/ComponentPreview.vue index 05078d3..92c5e47 100644 --- a/components/ComponentPreview.vue +++ b/components/ComponentPreview.vue @@ -492,6 +492,8 @@ @update:model-value="updateTableData" @debug-data="(data) => console.log('[ComponentPreview] Table debug data:', data)" @mounted="() => console.log('[ComponentPreview] RepeatingTable mounted with data:', getTableData(component.props.name))" + @custom-action="handleTableCustomAction" + @custom-navigation="handleTableCustomNavigation" /> @@ -873,7 +875,7 @@ const props = defineProps({ } }); -const emit = defineEmits(['select-nested-component', 'form-data-updated', 'button-clicked']); +const emit = defineEmits(['select-nested-component', 'form-data-updated', 'button-clicked', 'custom-action', 'custom-navigation']); // Get access to the form builder store const formStore = useFormBuilderStore(); @@ -2700,6 +2702,20 @@ onMounted(() => { }); } }); + +// Custom Action Handlers for RepeatingTable +const handleTableCustomAction = ({ action, rowData, event }) => { + console.log('[ComponentPreview] Table custom action:', { action, rowData, event }) + // Emit to parent if needed + emit('custom-action', { action, rowData, event }) +} + +const handleTableCustomNavigation = ({ action, url, rowData }) => { + console.log('[ComponentPreview] Table custom navigation:', { action, url, rowData }) + // Navigation is already handled by CustomActionButton + // Emit to parent if additional handling is needed + emit('custom-navigation', { action, url, rowData }) +} \ No newline at end of file diff --git a/components/FormBuilderFieldSettingsModal.vue b/components/FormBuilderFieldSettingsModal.vue index 118ff5f..ecfe8f0 100644 --- a/components/FormBuilderFieldSettingsModal.vue +++ b/components/FormBuilderFieldSettingsModal.vue @@ -1258,6 +1258,114 @@ if (name && email) { + + +
+
+
Custom Actions
+ + + Add Action + +
+

Add custom action buttons that appear in each table row

+ +
+
+
+

Action {{ index + 1 }}

+ +
+ +
+ + + + + + + + + + + + + +
+
+ +
+ +

No custom actions configured

+

Add custom actions to enable additional functionality in your table rows

+
+
+
@@ -3934,6 +4042,28 @@ const removeColumnOption = (columnIndex, optionIndex) => { } } +// Custom actions management for repeating-table +const addCustomAction = () => { + if (!configModel.value.customActions) { + configModel.value.customActions = [] + } + configModel.value.customActions.push({ + label: 'New Action', + url: '/action/{id}', + urlType: 'dynamic', + variant: 'primary', + target: '_self', + icon: '', + confirmMessage: '' + }) +} + +const removeCustomAction = (index) => { + if (configModel.value.customActions) { + configModel.value.customActions.splice(index, 1) + } +} + const removeNestedComponent = (index) => { if (configModel.value.children) { configModel.value.children.splice(index, 1) diff --git a/components/RepeatingTable.vue b/components/RepeatingTable.vue index 3b5946c..0a3ed51 100644 --- a/components/RepeatingTable.vue +++ b/components/RepeatingTable.vue @@ -132,6 +132,16 @@ > + + @@ -296,6 +306,7 @@ import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue' import { v4 as uuidv4 } from 'uuid' import { useDebounceFn } from '@vueuse/core' +import CustomActionButton from './CustomActionButton.vue' // SimpleCellValue component removed - using direct template rendering instead @@ -314,7 +325,7 @@ const props = defineProps({ } }) -const emit = defineEmits(['update:modelValue', 'debug-data', 'mounted']) +const emit = defineEmits(['update:modelValue', 'debug-data', 'mounted', 'custom-action', 'custom-navigation']) // Reactive state const data = ref([...(props.modelValue || [])]) @@ -433,7 +444,7 @@ const isAddDisabled = computed(() => { }) const showActions = computed(() => { - return props.config.allowEdit || props.config.allowDelete + return props.config.allowEdit || props.config.allowDelete || (props.config.customActions && props.config.customActions.length > 0) }) const showRecordCount = computed(() => { @@ -775,6 +786,19 @@ onUnmounted(() => { columnCache.value.clear() recordKeys.value.clear() }) + +// Custom Action Handlers +const handleCustomAction = ({ action, rowData, event }) => { + console.log('[RepeatingTable] Custom action clicked:', { action, rowData }) + // Emit custom action event to parent for additional handling + emit('custom-action', { action, rowData, event }) +} + +const handleCustomNavigation = async ({ action, url, rowData }) => { + console.log('[RepeatingTable] Custom navigation:', { action, url, rowData }) + // Emit navigation event to parent for additional handling + emit('custom-navigation', { action, url, rowData }) +}