Floating Action Buttons II - SweetAlert + Api Action (v2021/2022)

Tips submitted by PHPMaker users
Post Reply
Niijimasama
User
Posts: 85

Floating Action Buttons II - SweetAlert + Api Action (v2021/2022)

Post by Niijimasama »

This is as expansion/application of my other topic: Floating Action Buttons - List Options (v2021/2022)(viewtopic.php?f=18&t=52497). Please read it beforehand for more info.

In this case, I wanted to have a one button action to carry out a background process but is interrupted by user input. In this example, I want to do a simple restock action in an inventory where the user enters the amount to be added via a SweetAlert prompt.

  1. Using the example in my previous topic (linked above), add a menu item as below at List_Page->ListOptions_Load
           $opt = &$this->ListOptions->Add("si_fabs"); // Add Custom Link
    	$opt->OnLeft = TRUE; // Link on left
  2. Go to List_Page->ListOptions_Rendered and add:
    	$this->ListOptions->Items["si_fabs"]->Body ="<div class='fab-container'>
              <div class='fab shadow'>
                <div class='fab-content'>
                  <i class='bi bi-chevron-right'></i>
                </div>
              </div>
              <div class='sub-button shadow'>
                <a class='btn btn-success btn-fab' id='main'  href='#' data-caption='Restock' data-id=".urlencode($this->pr_no->CurrentValue).">
                	<i class='bi bi-box-seam'></i>
                </a>
              </div>
            </div>";
    The main difference is the use of attributes which in this case, is the data-id to which I assigned the product no of the item to be restocked. You can add/use other attributes such as "value" as you want.

3.. Got to Global->All_Pages->Api_Action and add your action event. In my case, it is DoRestock:

$app->get('/DoRestock/{xprodno}/{xqty}', function ($request, $response, $args) {
		$xprodno = $args["xprodno"] ?? null; // Get the input value
		$xqty = $args["xqty"] ?? null;
		if ($xqty !== null) {
			UpdateInventory($xprodno,$xqty);
			$response = $response->write(1);
		}else{
			$response = $response->write(0);
		}
		return $response; 
	});

My action executes a custom function UpdateInventory() so I defined this as well in Global->All_Pages->Global_Code

  1. Go to Client_scripts->Tavle_Specific->List_Page->Startup Script and add the following:
    $('#main').click(function(){
    	var prodno =  $(this).attr('data-id');
    	Swal.fire({
    	  title: 'RESTOCK',
    	  text: 'Item: ',
    	  input: "number",
    	  inputPlaceholder: "How many?",
    	  showCancelButton: true,
    	  confirmButtonText: 'Restock',
    	  showLoaderOnConfirm: true,
    			preConfirm: (pqty) => {$.get(ew.getApiUrl(["DoRestock",prodno,pqty]), function(res) {
    				if (res)
    					if(res == 1){
    						Swal.fire({icon: 'success',
    							title: 'Operation Complete',
    							text: 'Item restocked!',}).then(refreshInventoryTable())
    					}else{
    						Swal.fire({icon: 'error',
    							title: 'Operation Failure',
    							text:  'Item not restocked!',})
    					}					
    			});	
    	  },
    	  allowOutsideClick: () => !Swal.isLoading()
    	})		
    })
    In this case, I get the product number (prodno), the value that the user enters (pqty) and pass them to the my action event DoRestock. If the action succeeds the table is refreshed using my custom function refreshInventoryTable() [Client Scripts-> Global-> Pages with header/footer->Global_Code].
    function refreshInventoryTable(){
     $("#finventorylist").load(location.href + " #finventorylist>*", "");
     location.reload();
    }
    Hope this helps..

Post Reply