Extending orders table

[luiseduardobraschi]

Hello. I have an add-on that relies on the actions column of the order tables. Is it possible to extend the new UI to add new actions?

Here’s an example of the old PHP-based UI. The blue/yellow buttons:

[luiseduardobraschi]

I managed to work it out using wp.hooks.addFilter.

wp.hooks.addFilter( 'dokan_orders_data_view_dataviews_actions', 'dokan-orders-data-view', function( actions ){});

The objects are like these:

dokan/src/dashboard/orders/OrderList.tsx

Lines 600 to 646 in 139de4f

	const actions = useMemo(
	() => [
	{
	id: 'view',
	label: __( 'View', 'dokan-lite' ),
	callback: ( items: OrderItem[] ) => {
	const item = items[ 0 ];
	const url = getOrderDetailsUrl( item.id );
	if ( url && url !== '#' ) {
	window.location.href = url;
	}
	},
	},
	{
	id: 'mark-on-hold',
	label: __( 'Change status to on-hold', 'dokan-lite' ),
	supportsBulk: true,
	isDestructive: true,
	isEligible: ( item: OrderItem ) => item.status !== 'on-hold',
	callback: async ( items: OrderItem[] ) => {
	await handleStatusUpdate( items, 'wc-on-hold' );
	},
	},
	{
	id: 'mark-processing',
	label: __( 'Change status to processing', 'dokan-lite' ),
	supportsBulk: true,
	isDestructive: true,
	isEligible: ( item: OrderItem ) => item.status !== 'processing',
	callback: async ( items: OrderItem[] ) => {
	await handleStatusUpdate( items, 'wc-processing' );
	},
	},
	{
	id: 'mark-completed',
	label: __( 'Change status to completed', 'dokan-lite' ),
	supportsBulk: true,
	isDestructive: true,
	isEligible: ( item: OrderItem ) => item.status !== 'completed',
	callback: async ( items: OrderItem[] ) => {
	await handleStatusUpdate( items, 'wc-completed' );
	},
	},
	],
	[ handleStatusUpdate ]
	);

[luiseduardobraschi]

Continuing the post on Wordpress.org:

you can point it to a custom URL rather than reopening the orders page

I don't want either. I want to send the action via Ajax and have the table (just the table, not the whole page) reload in the exact page it is in the table pagination, just like what happens when you change the status, if possible.

I'm using old-style WordPress-ish JavaScript approach and it looks basically like this:

 wp.hooks.addFilter( 'dokan_orders_data_view_dataviews_actions', 'dokan-orders-data-view', function( actions, component ){

    let action = {

        id: 'buy-labels',
        label: 'Buy labels',
        isPrimary: true,
        isEligible: function( item ){
            // Irrelevant code here.
            return true;
        },
        callback: ( items ) => {

            const item = items[0];
            const shipping = item.shipping_lines[0];
            const url = generateUrl( 'generate-labels-for-order', item.id, generate_labels_nonce ); 

            window.location.href = url; // I don't want to call an URL.

        },

    }

    actions.push(action);

});