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

constructor/scripts/openDocument/startRegistryRoute.css

+.route_dialog_container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: calc(100vh - 40px);
+  background: #fff;
+  overflow: hidden;
+  z-index: 100;
+}
+
+.route_dialog_header {
+  position: absolute;
+  display: flex;
+  left: 0;
+  top: 0;
+  padding: 0 20px;
+  height: 40px;
+  width: 100%;
+  background: #fff;
+  overflow: hidden;
+  border-bottom: 1px solid #c4c4c4;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.route_dialog_header h3 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.route_dialog_header .route_dialog_close_button {
+  color: #000;
+  cursor: pointer;
+  transition: .3s;
+}
+
+.route_dialog_header .route_dialog_close_button:hover {
+  color: red;
+  transform: rotate(90deg);
+}
+
+.route_dialog_sub_header {
+  position: absolute;
+  display: flex;
+  left: 0;
+  top: 40px;
+  padding: 0 20px;
+  height: 40px;
+  width: 100%;
+  background: #e5e5e5;
+  overflow: hidden;
+  border-bottom: 1px solid #c4c4c4;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.route_dialog_body {
+  position: relative;
+  left: 0;
+  top: 80px;
+  height: calc(100% - 130px);
+  width: 100%;
+  overflow: hidden;
+}
+
+.route_dialog_footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  height: 50px;
+  width: 100%;
+  background: #e5e5e5;
+  border-top: 1px solid #c4c4c4;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+}
+
+.route_dialog_body_content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 10px 5px;
+  width: 100%;
+  background: #fff;
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  transition: .3s;
+}
+
+.route_dialog_body_settings {
+  position: absolute;
+  right: -20px;
+  top: 0;
+  background: #e5e5e5;
+  border-left: 1px solid #c4c4c4;
+  width: 0px;
+  height: calc(100vh - 170px);
+  padding: 15px 10px;
+  overflow-y: auto;
+  transition: .3s;
+}
+
+.route_dialog_body_content.panel_settings_visible {
+  width: calc(100% - 300px);
+}
+
+.route_dialog_body_settings.panel_settings_visible {
+  width: 300px;
+  right: 0;
+}
+
+.route_dialog_sub_header .uk-icon-button {
+  border-radius: 6px;
+  background: #fff;
+  border: 1px solid #c4c4c4;
+  transition: .3s;
+}
+
+.route_dialog_sub_header .uk-icon-button:not([disabled]):hover,
+.route_dialog_sub_header .uk-icon-button:not([disabled]):focus {
+  border-color: #999;
+}
+
+.route_dialog_sub_header .uk-icon-button[disabled] {
+  cursor: default;
+  color: #d2d2d2;
+  border-color: #d2d2d2;
+  background: #ededed;
+}
+
+.route_dialog_panel_routes_group {
+  border: 1px solid transparent;
+}
+
+.route_dialog_panel_routes_group.selected {
+  border-color: #92adc6;
+}
+
+.route_dialog_panel_routes_group.selected .routes_group_header {
+  background: #92adc6;
+}
+
+.routes_group_header {
+  font-weight: bold;
+  background: #e5e5e5;
+  padding: 6px 20px;
+  margin: 0;
+}
+
+.routes_group_content {
+  padding: 5px 5px 5px 35px;
+}
+
+.route_item_panel_top {
+  display: flex;
+  gap: 5px;
+}
+
+.route_item_container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px 20px;
+}
+
+.route_item_container::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  background: #ececec;
+  position: absolute;
+  left: -20px;
+  top: 50%;
+  border-radius: 50%;
+}
+
+.route_item_container:hover::before {
+  background: #666;
+}
+
+.route_item_container.selected {
+  background: #deefff;
+}
+
+.route_item_container.selected::before {
+  background: #87aec7;
+}
+
+.route_item_container .delete_item_route_button {
+  position: absolute;
+  right: 5px;
+  cursor: pointer;
+}
+
+.route_item_container .delete_item_route_button:hover {
+  color: red;
+}
\ No newline at end of file

constructor/scripts/openDocument/startRegistryRoute.js

@@ -11,9 +11,15 @@ const isShowRoute = (registryRoute) => {
 const parseRouteData = data => {
   const removeUserName = items => {
     for(let i = 0; i < items.length; i++) {
-      items[i].users.forEach(user => {
-        delete user["userName"];
-      });
+      const {users} = items[i];
+      if(!users.length) {
+        items.splice(i, 1);
+      } else {
+        users.forEach(user => {
+          delete user["userName"];
+        });
+
+      }
     }
     return items;
   }
@@ -31,9 +37,50 @@ const parseRouteData = data => {
   return JSON.stringify(result);
 }
 
+const routeNames = {
+  "ASSIGNMENT_ITEM": "Работа",
+  "AGREEMENT_ITEM": "Согласование",
+  "APPROVAL_ITEM": "Утверждение",
+  "ACQUAINTANCE_ITEM": "Ознакомление",
+  "SEND_DOCUMENT": "Отправка документа",
+  "BLOCKING_PROCESS": "Блокирующий процесс",
+  "COMMON_PROCESS_BY_FORM": "Работа по форме",
+}
+
+const getRouteName = routeType =>  routeNames[routeType] || routeType;
+
+const createUserParamBlock = (label, routeUserItem, itemContainer) => {
+  const fc = $('<div>', {class: 'uk-form-controls'});
+  const button = $('<a class="uk-form-icon uk-form-icon-flip" href="javascript:void(0);" uk-icon="icon: users"></a>');
+  const input = $('<input style="background: #fff;" class="uk-input" type="text" disabled>');
+  const values = routeUserItem.userID !== '' ? [{personID: routeUserItem.userID, personName: routeUserItem.userName}] : null;
+
+  fc.append($('<div class="uk-inline uk-width-expand">').append(button, input));
+
+  if(values) {
+    const userNames = values.map(x => x.personName).join('; ');
+    input.val(userNames).attr('title', userNames);
+  }
+
+  button.on('click', e => {
+    //(values, multiSelectable, isGroupSelectable, showWithoutPosition, filterPositionID, filterDepartmentID, locale, handler)
+    AS.SERVICES.showUserChooserDialog(values, false, false, false, null, null, AS.OPTIONS.locale, users => {
+      const userNames = users.map(x => x.personName).join('; ');
+      input.val(userNames).attr('title', userNames);
+      const selectUser = users[0];
+      routeUserItem.userID = selectUser.personID;
+      routeUserItem.userName = selectUser.personName;
+      itemContainer.find('[item-role="route_user_name"]').text(userNames);
+    });
+  });
+
+  return $('<div>', {class: 'uk-margin-small'}).append(`<label class="uk-form-label uk-text-bold">${label}</label>`).append(fc);
+}
+
 this.StartRegistryRoute = class {
   constructor(_doc) {
     this._doc = _doc;
+    this.panelSettingsIsShow = false;
 
     this.init();
   }
@@ -63,7 +110,9 @@ this.StartRegistryRoute = class {
       if(result.hasOwnProperty('errorCode') && result.errorCode != 0) throw new Error(result.errorMessage);
 
       Cons.hideLoader();
-      this.closeDocument(this._doc);
+
+      this.closeDialog();
+      if(this.registryRoute.closeAfterActivation === "true") this.closeDocument(this._doc);
 
     } catch (err) {
       Cons.hideLoader();
@@ -73,6 +122,220 @@ this.StartRegistryRoute = class {
     }
   }
 
+  addRouteItem() {
+    const container = $(`.routes_group_content[panel-type="${this.panelTypeSelected}"]`);
+    console.log('addRouteItem', container);
+    showMessage(i18n.tr('Функционал в разработке'), 'info');
+  }
+
+  showHidePanelSettings(){
+    if(this.panelSettingsIsShow) {
+      this.routeContent.addClass('panel_settings_visible');
+      this.panelSettings.addClass('panel_settings_visible');
+      $('.route_dialog_sub_header > a:nth-child(2)').attr('uk-icon', 'chevron-double-right');
+    } else {
+      this.routeContent.removeClass('panel_settings_visible');
+      this.panelSettings.removeClass('panel_settings_visible');
+      $('.route_dialog_sub_header > a:nth-child(2)').attr('uk-icon', 'chevron-double-left');
+    }
+  }
+
+  addPanelGroupHandler(panels){
+    panels.forEach(panel => {
+      panel.on('click', e => {
+        this.panelTypeSelected = panel.attr('panel-type');
+        panels.map(x => x.removeClass('selected'));
+        panel.addClass('selected');
+
+        if(this.panelTypeSelected == '_action') {
+          $('.route_dialog_sub_header > a:nth-child(1)').attr('disabled', true);
+        } else {
+          $('.route_dialog_sub_header > a:nth-child(1)').attr('disabled', false);
+        }
+      });
+    });
+  }
+
+  renderSettings(item, itemContainer){
+    this.panelSettingsIsShow = true;
+    this.showHidePanelSettings();
+
+    this.panelSettings.empty();
+
+    const userBlock = createUserParamBlock(i18n.tr('Ответственный'), item, itemContainer);
+    this.panelSettings.append(userBlock);
+  }
+
+  renderRouteItem(index, panel, panelType, item, allItems) {
+    const {itemID, users} = item;
+
+    users.forEach((proc, i) => {
+      const itemContainer = $('<div>', {class: 'route_item_container', itemid: itemID, itemindex: index});
+      const panelTop = $('<div>', {class: 'route_item_panel_top'});
+      const panelBottom = $('<div>', {class: 'route_item_panel_bottom'});
+      const routeName = getRouteName(proc.typeID);
+
+      const deleteItemButton = $('<span>', {class: 'delete_item_route_button', 'uk-icon': 'trash'});
+
+      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>`,
+      )
+
+      panelBottom.text(proc.name);
+
+      itemContainer.on('click', e => {
+        e.preventDefault();
+        if($(e.target).closest('span').hasClass("delete_item_route_button")) return;
+        this.renderSettings(proc, itemContainer);
+        $('.route_item_container').removeClass('selected');
+        itemContainer.addClass('selected');
+      });
+
+      deleteItemButton.on('click', e => {
+        e.preventDefault();
+        if (window.confirm(i18n.tr('Вы действительно хотите удалить данный этап?'))) {
+          itemContainer.remove();
+          users.splice(i, 1);
+          if(!users.length) allItems.splice(index, 1);
+          //костыль с перенумеровкой этапов
+          panel.find('.route_item_container').each((i, el) => {
+            const numItem = $(el).find('[item-role="route_index"]');
+            numItem.text(i + 1);
+          });
+        }
+      });
+
+      if(panelType == '_action') {
+        itemContainer.append(panelTop, panelBottom);
+      } else {
+
+        itemContainer.append(panelTop, panelBottom, deleteItemButton);
+      }
+
+      panel.append(itemContainer);
+    });
+
+  }
+
+  renderRouteItems(panels){
+    const {action, after, before} = this.registryRoute;
+
+    panels.forEach(panel => {
+      const panelType = panel.attr('panel-type');
+      const data = panelType == '_before' ? before : panelType == '_after' ? after : action;
+      
+      if(data.showOnSave === "true"){
+        data.items.forEach((item, i) => this.renderRouteItem(i, panel, panelType, item, data.items));
+      }
+
+    });
+  }
+
+  closeDialog(){
+    this.dialogContainer.fadeOut(300, function(){
+      $( this ).remove();
+    });
+  }
+
+  openEditRouteDialog(){
+    const {action, after, before} = this.registryRoute;
+
+    this.dialogContainer = $('<div>', {class: 'route_dialog_container'});
+    const header = $('<div>', {class: 'route_dialog_header'});
+    const subHeader = $('<div>', {class: 'route_dialog_sub_header'});
+    const body = $('<div>', {class: 'route_dialog_body'});
+    const footer = $('<div>', {class: 'route_dialog_footer'});
+
+    this.routeContent = $('<div>', {class: 'route_dialog_body_content'}); //список этапов
+    this.panelSettings = $('<div>', {class: 'route_dialog_body_settings'}); //найстройка этапа маршрута
+
+    const panelAction = $('<div>', {class: 'route_dialog_panel_routes_group', 'panel-type': '_action'}); //Действия
+    const panelAfter = $('<div>', {class: 'route_dialog_panel_routes_group', 'panel-type': '_after'}); //Последующие этапы
+    const panelBefore = $('<div>', {class: 'route_dialog_panel_routes_group', 'panel-type': '_before'}); //Предварительные этапы
+
+    const routesGroupeHeaderAction = $(`<h5 class="routes_group_header">${i18n.tr('Действия')}</h5>`);
+    const routesGroupeHeaderAfter = $(`<h5 class="routes_group_header">${i18n.tr('Последующие этапы')}</h5>`);
+    const routesGroupeHeaderBefore = $(`<h5 class="routes_group_header">${i18n.tr('Предварительные этапы')}</h5>`);
+
+    const routesGroupeContentAction = $('<div>', {class: 'routes_group_content', 'panel-type': '_action'});
+    const routesGroupeContentAfter = $('<div>', {class: 'routes_group_content', 'panel-type': '_after'});
+    const routesGroupeContentBefore = $('<div>', {class: 'routes_group_content', 'panel-type': '_before'});
+
+    const dialogName = $(`<h3>${i18n.tr('Запуск маршрута')} - ${this.registryInfo.name}</h3>`);
+    const closeButton = $('<span>', {class: 'route_dialog_close_button', 'uk-icon': 'close'});
+
+    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'});
+    buttonStartRoute.text(i18n.tr('Запустить'));
+
+    const panels = [];
+    const panelsContent = [];
+
+    if(before.showOnSave === "true") {
+      panels.push(panelBefore);
+      panelsContent.push(routesGroupeContentBefore);
+    }
+    if(action.showOnSave === "true") {
+      panels.push(panelAction);
+      panelsContent.push(routesGroupeContentAction);
+    }
+    if(after.showOnSave === "true") {
+      panels.push(panelAfter);
+      panelsContent.push(routesGroupeContentAfter);
+    }
+
+    this.addPanelGroupHandler(panels);
+    this.renderRouteItems(panelsContent);
+
+    addItemButton.on('click', e => {
+      e.preventDefault();
+      if(addItemButton.attr('disabled')) return;
+      this.addRouteItem();
+    });
+    
+    showHideSettingsButton.on('click', e => {
+      e.preventDefault();
+      this.panelSettingsIsShow = !this.panelSettingsIsShow;
+      this.showHidePanelSettings();
+    });
+
+    closeButton.on('click', e => {
+      e.preventDefault();
+      this.closeDialog();
+    });
+
+    buttonStartRoute.on('click', e => {
+      e.preventDefault();
+      this.startRoute();
+    });
+
+    subHeader.append(addItemButton, showHideSettingsButton)
+
+    panelAction.append(routesGroupeHeaderAction, routesGroupeContentAction);
+    panelAfter.append(routesGroupeHeaderAfter, routesGroupeContentAfter);
+    panelBefore.append(routesGroupeHeaderBefore, routesGroupeContentBefore);
+    
+    if(before.showOnSave === "true") this.routeContent.append(panelBefore);
+    if(action.showOnSave === "true") this.routeContent.append(panelAction);
+    if(after.showOnSave === "true") this.routeContent.append(panelAfter);
+
+    footer.append(buttonStartRoute);
+    body.append(this.routeContent, this.panelSettings);
+    header.append(dialogName, closeButton);
+    this.dialogContainer.append(header, subHeader, body, footer);
+    $('body').append(this.dialogContainer);
+
+    Cons.hideLoader();
+  }
+
   init(){
     try {
       const {registryInfo, registryRoute, documentID, dataUUID, documentName, closeDocument} = this._doc;
@@ -83,12 +346,8 @@ this.StartRegistryRoute = class {
       this.documentName = documentName;
       this.closeDocument = closeDocument;
 
-      console.log('startRegistryRoute', {
-        _doc: this._doc
-      });
-
       if(isShowRoute(registryRoute)) {
-        console.log('рисуем окно с маршрутами');
+        this.openEditRouteDialog();
       } else {
         this.startRoute();
       }