bladewindUI

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.


processing
Deleting pending payment
process passed
Pending payment was deleted successfully
process failed
Pending payment could not be deleted


Now that we have seen all three parts that make 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.

   

 

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.

IMPORTANT: Projects running Laravel 8 please read this

Processing Component Attributes

Option Default Available Values
name processing Unique name for the processing component. Usually useful to prevent erratic behaviour if there are multiple Process Indicators on the same page.
hide true The processing component is hidden by default.
true false
message blank Message to display below the spinning icon.

 

Process Complete Component Attributes

Option Default Available Values
name process-complete Unique name for the process complete component. Usually useful to prevent erratic behaviour if there are multiple Process Complete components on the same page.
process_completed_as passed There are two possible values. This attribute determines which icon to display based on the outcome. A pass will display a green thumbs up icon. A fail will display a red thumbs down icon.
passed failed
message blank Message to display below the thumbs up or down icon.
button_label blank Label to display on the call to action button when process is complete.
button_action blank Javascript function to call when the call to action button is clicked.
hide true The process complete component is hidden by default.
true false

 

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

 

The source file for this component is available in resources > views > components > bladewind > processing.blade.php and resources > views > components > bladewind > process-complete.blade.php