Вывод движения заявки по статусам statusbar

Это один из режимов компонента Таблица. Он позволяет вывести визуализацию движения по определенным статусам некоторого процесса. 

Пример на демостенде - https://demo.web-automation.ru/list/watch/vizualizaciya-vyvoda-dvizheniya-po-statusam---110

Чтобы настроить компонент:

В SELECT 1 прописать следующую структуру: 

• name - название элемента (1-4 символа). 
• tooltip - подсказка при наведении
• icon - font awesome иконка в пункте
• done - если 1, то пункт считается закрытым (зеленым)
• gapText - что будет написано под стрелкой ПОСЛЕ элемента (например, время перед изменением статуса). 
• formCode, formItemID, formTitle, formBig - установка модальной формы для вывода по клику на элементе. 
• url - если указан URL, то по клику будет переход на указанный URL

В SELECT 3 установить ViewType='statusbar'. 

В SELECT 4 указываем следующую структуру для вывода подсказок сверху и снизу полоски статусов: 

• name - текст подсказки
• shift - сдвиг подсказки относительно начала
• width - сколько элементов (статусов) занимает данная подсказка
• top - если 1, то выводится над элементами. Если 0 - то под ними.

ВАЖНО! SELECT 4 должен быть обязательно упорядочен по полю shift. 

В мобильном варианте (ширина экрана менее 768px) name для статуса скрывается (в случае, если есть icon).

Пример кода GetItems таблицы: 

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, 'Создание заявки' tooltip, 'far fa-file' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '2' name, 'Проверка корректности' tooltip,  'fa fa-eye' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '3' name, 'Передача диспетчеру' tooltip,  'far fa-hand-point-right' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '4' name, 'Поиск машины' tooltip,  'fas fa-car' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '5' name, 'Передача документов экспедитору' tooltip,  'fa fa-bars' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '6' name, 'Получение груза' tooltip,  'fab fa-wpforms' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '7' name,  'Поездка' tooltip, 'fas fa-car-side' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '8' name,  'Передача груза клиенту' tooltip, 'far fa-smile-wink' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' 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 'Клиент' name, 1 shift, 1 width, 0 [top] 
      union
      select 'Менеджер' name, 2 shift, 2 width, 1 [top]   
       union
      select 'Диспетчер' name, 4 shift, 2 width, 0 [top] 
      union
      select 'Экспедитор' name, 6 shift, 3 width, 1 [top] 
   )t1 
   order by shift -- order important
END