Process Indicator

Show that a process is in progress. A process can have two possible outcomes. It could either pass or fail. The process indicator can be used within the page but looks cooler when used in a Modal component. There are three parts to using the process indicator component.

Now that we have seen all three parts that make up this component, let's build a flow that makes use of all three parts. This is heavily dependent on Javascript but nothing scary. Let's simulate deleting of a pending payment.

Delete Payment and Pass     Delete Payment and Fail

Let's break down what is happening by first looking at the buttons that triggered the modal.

        
            <x-bladewind::button
                onclick="deletePayment('pass')"
                size="small">
                Delete Payment and Pass
            </x-bladewind::button>

            <x-bladewind::button
                onclick="deletePayment('fail')"
                size="small">
                Delete Payment and Fail
            </x-bladewind::button>
        
    

Next, let's look at the modal element and the two possible process outcomes

        
            <x-bladewind::modal
                name="delete-paymentz"
                show_action_buttons="false">

                // this shows that process is in progress
                <x-bladewind::processing
                    name="processing-delete"
                    message="Deleting pending payment"
                    hide="false" />

                // this is shown when process completes with a pass
                <x-bladewind::process-complete
                    name="delete-payment-yes"
                    process_completed_as="passed"
                    button_label="Done"
                    button_action="alert('i passed... closing modal now'); hideModal('delete-paymentz')"
                    message="Pending payment was deleted successfully" />

                // this is shown when process completes with a failure
                <x-bladewind::process-complete
                    name="delete-payment-no"
                    process_completed_as="failed"
                    button_label="Done"
                    button_action="alert('i failed... closing modal now'); hideModal('delete-paymentz')"
                    message="Pending payment could not be deleted" />

            </x-bladewind::modal>
        
    

Now let's take a look at the Javascript function both buttons are calling.

        
            <script>
                deletePayment = (mode) => {
                    // it is preferred to hide all three elements
                    // and show only the element that needs to be shown
                    // hide the processing delete element
                    hideHideables();

                    // show the modal and the processing delete element
                    // showModal() and unhide() are helper functions
                    // available in BladewindUI
                    showModal('delete-paymentz');
                    unhide('::processing-delete');

                    // this example only shows a specific outcome
                    // after 3 seconds based on which button was clicked.
                    // In your apps you will typically display an outcome
                    // based on some API return value or something similar
                    setTimeout(function() {

                        hideHideables();

                        // determine which process outcome to show
                        (mode == 'pass') ?
                            unhide('.delete-payment-yes') :
                            unhide('.delete-payment-no');
                    }, 3000);
                }

                hideHideables = () => {
                    // hide() is a helper function available in BladewindUI
                    hide('::processing-delete');
                    hide('.delete-payment-yes');
                    hide('.delete-payment-no');
                }
            </script>
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Process Indicator component.

Processing Component Attributes

Process Complete Component Attributes

Process Indicator with all attributes defined

        
            <x-bladewind::processing
                name="processing-delete"
                message="Deleting pending payment"
                hide="false" />

            // this is shown when process completes with a pass
            <x-bladewind::process-complete
                name="delete-payment-yes"
                process_completed_as="passed"
                hide="false"
                button_label="Done"
                button_action="hideModal('delete-paymentz')"
                message="Pending payment was deleted successfully" />

            // this is shown when process completes with a failure
            <x-bladewind::process-complete
                name="delete-payment-no"
                process_completed_as="failed"
                hide="false"
                button_label="Done"
                button_action="hideModal('delete-paymentz')"
                message="Pending payment could not be deleted" />