запуск маршрутов - небольшие доработки, подсветка параллельных этапов

constructor/scripts/openDocument/startRegistryRoute.css

@@ -155,7 +155,7 @@
 }
 
 .routes_group_content {
-  padding: 5px 5px 5px 35px;
+  padding: 5px 5px 5px 50px;
 }
 
 .route_item_panel_top {
@@ -178,14 +178,10 @@
   background: #ececec;
   position: absolute;
   left: -20px;
-  top: 50%;
+  top: calc(50% - 5px);
   border-radius: 50%;
 }
 
-.route_item_container:hover::before {
-  background: #666;
-}
-
 .route_item_container.selected {
   background: #deefff;
 }
@@ -194,6 +190,41 @@
   background: #87aec7;
 }
 
+.route_item_container:hover::before,
+.route_item_container.is-linked::before {
+  background: #666;
+}
+
+.route_item_container .line {
+  position: absolute;
+  width: 18px;
+  border-top: 1px dotted #666;
+  left: -40px;
+  top: 50%;
+  display: none;
+}
+
+.route_item_container.is-linked .line {
+  display: block;
+}
+
+.route_item_container.is-linked::after {
+  content: '';
+  position: absolute;
+  left: -40px;
+  top: -50%;
+  bottom: -50%;
+  border-left: 1px dotted #666;
+}
+
+.route_item_container.is-first::after {
+  top: 50%;
+}
+
+.route_item_container.is-last::after {
+  bottom: 50%;
+}
+
 .route_item_container .delete_item_route_button {
   position: absolute;
   right: 5px;

constructor/scripts/openDocument/startRegistryRoute.js

@@ -61,10 +61,11 @@ const routeNames = {
   "SEND_DOCUMENT": "Отправка документа",
   "BLOCKING_PROCESS": "Блокирующий процесс",
   "COMMON_PROCESS_BY_FORM": "Работа по форме",
-  "REGISTRATION_ITEM": "Регистрация"
+  "REGISTRATION_ITEM": "Регистрация",
+  "RESOLUTION_ACTION": "Резолюция"
 }
 
-const getRouteName = routeType =>  routeNames[routeType] || routeType;
+const getRouteName = routeType =>  i18n.tr(routeNames[routeType]) || routeType;
 
 const createUserParamBlock = (label, routeUserItem, itemContainer, panelType) => {
   const fc = $('<div>', {class: 'uk-form-controls'});
@@ -209,12 +210,17 @@ this.StartRegistryRoute = class {
       panelTop.append(
         `<span item-role="route_index" style="font-weight: bold;">${index + 1}</span>`,
         `<span>-</span>`,
-        `<span item-role="route_name">${routeName}</span>`,
-        '<span item-role="route_user_icon" uk-icon="user"></span>',
-        `<span item-role="route_user_name" style="font-weight: bold;">${proc.userName}</span>`,
-        `<span>-</span>`,
-        `<span item-role="route_duration">${Math.round(proc.length)} ${proc.lengthType == "HOURS" ? 'ч' : 'дн'}</span>`,
-      )
+        `<span item-role="route_name">${routeName}</span>`
+      );
+
+      if(panelType !== '_action' && proc.typeID !== 'BLOCKING_PROCESS'){
+        panelTop.append(
+          '<span item-role="route_user_icon" uk-icon="user"></span>',
+          `<span item-role="route_user_name" style="font-weight: bold;">${proc.userName}</span>`,
+          `<span>-</span>`,
+          `<span item-role="route_duration">${Math.round(proc.length)} ${proc.lengthType == "HOURS" ? 'ч' : 'дн'}</span>`
+        );
+      }
 
       panelBottom.text(proc.name);
 
@@ -226,6 +232,18 @@ this.StartRegistryRoute = class {
         itemContainer.addClass('selected');
       });
 
+      itemContainer.hover(() => {
+        const $group = $(`.route_item_container[itemid="${itemID}"]`);
+
+        if ($group.length < 2) return;
+        $group.addClass('is-linked');
+        $group.first().addClass('is-first');
+        $group.last().addClass('is-last');
+
+      }, () => {
+        $(`[itemid="${itemID}"]`).removeClass('is-linked is-first is-last');
+      });
+
       deleteItemButton.on('click', e => {
         e.preventDefault();
         if (window.confirm(i18n.tr('Вы действительно хотите удалить данный этап?'))) {
@@ -234,11 +252,7 @@ this.StartRegistryRoute = class {
           const idx = users.indexOf(proc);
           if (idx !== -1) users.splice(idx, 1);
 
-          //костыль с перенумеровкой этапов
-          panel.find('.route_item_container').each((i, el) => {
-            const numItem = $(el).find('[item-role="route_index"]');
-            numItem.text(i + 1);
-          });
+          this.reRenderRouteItem(panel, panelType);
 
           this.showHidePanelSettings(false);
           this.panelSettings.empty();
@@ -248,15 +262,26 @@ this.StartRegistryRoute = class {
       if(panelType == '_action') {
         itemContainer.append(panelTop, panelBottom);
       } else {
-
         itemContainer.append(panelTop, panelBottom, deleteItemButton);
       }
 
+      itemContainer.prepend('<div class="line"></div>');
+
       panel.append(itemContainer);
     });
 
   }
 
+  reRenderRouteItem(panel, panelType){
+    const {action, after, before} = this.registryRoute;
+    const data = panelType == '_before' ? before : panelType == '_after' ? after : action;
+
+    if(data.showOnSave === "true"){
+      panel.empty();
+      data.items.forEach((item, i) => this.renderRouteItem(i, panel, panelType, item));
+    }
+  }
+
   renderRouteItems(panels){
     const {action, after, before} = this.registryRoute;
 
@@ -307,7 +332,7 @@ this.StartRegistryRoute = class {
     const addItemButton = $(`<a href="" class="uk-icon-button" uk-icon="plus" disabled></a>`);
     const showHideSettingsButton = $(`<a href="" class="uk-icon-button" uk-icon="chevron-double-left"></a>`);
 
-    const buttonStartRoute = $('<button>', {class: 'route_dialog_button uk-button uk-button-primary'});
+    const buttonStartRoute = $('<button>', {class: 'route_dialog_button uk-button window-action-button fonts window-action-button-green'});
     buttonStartRoute.text(i18n.tr('Запустить'));
 
     const panels = [];