Output of the request movement by statusbar statuses

This is one of the modes of the Table component. It allows you to display a visualization of movement by certain statuses of a certain process.

Example on the demo stand - https://demo.web-automation.ru/list/watch/vizualizaciya-vyvoda-dvizheniya-po-statusam---110

To configure the component, you need to set viewType='statusbar' in SELECT2.

In SELECT 1, write the following structure: 

• name - element name (1-4 characters). 
• tooltip - hover hint
• icon - font awesome icon in the item
• done - if 1, then the item is considered closed (green)
• formCode, formItemID, formTitle, formBig - setting a modal form for output by clicking on an element. 

In SELECT 4, we specify the following structure for displaying hints at the top and bottom of the status bar: 

• name - hint text
• shift - shifting the hint relative to the beginning
• width - how many elements (statuses) does this hint take?
• top - if 1, it is output over the elements. If 0 , then under them.

IMPORTANT! SELECT 4 must be ordered by the shift field.

In the mobile version (screen width less than 768px), the name for the status is hidden (if there is an icon).

Sample GetItems table code: 

CREATE PROCEDURE [dbo].[crud_watch_statusbar_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	-- SELECT 1
	select '1' name, 'Creating an application' tooltip, 'far fa-file' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    union
    select '2' name, 'Checking correctness' tooltip,  'fa fa-eye' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    union
    select '3' name, 'Transfer to the dispatcher' tooltip,  'far fa-hand-point-right' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    union
    select '4' name, 'Car Search' tooltip,  'fas fa-car' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    union
    select '5' name, 'Transfer of documents to the forwarder' tooltip,  'fa fa-bars' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    union
    select '6' name, 'Receiving the cargo' tooltip,  'fab fa-wpforms' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    union
    select '7' name,  'Trip' tooltip, 'fas fa-car-side' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    union
    select '8' name,  'Transfer of cargo to the client' tooltip, 'far fa-smile-wink' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Output of some form related to the status' formTitle, '1' formBig  
    
	-- SELECT 2
	select 1

	-- SELECT 3
    select 'statusbar' viewType, 1 hideTitleCount, 'h3' headerTag
	
		
	-- 4 SELECT Footer data or kanban/gantt data
    select * from (
      select 'Client' name, 1 shift, 1 width, 0 [top] 
      union
      select 'Manager' name, 2 shift, 2 width, 1 [top]   
       union
      select 'Dispatcher' name, 4 shift, 2 width, 0 [top] 
      union
      select 'Forwarder' name, 6 shift, 3 width, 1 [top] 
   )t1 
   order by shift -- order important
END