Контекстное меню потоков работ

constructor/components/Список работ/Список работ.css

@@ -3,7 +3,6 @@
   height: 100%;
 }
 
-/*таблица записей реестров*/
 .workflow-table-list>thead>tr>th {
   vertical-align: middle;
   font-weight: bold;
@@ -217,3 +216,60 @@
   font-weight: 600;
   margin-right: 10px;
 }
+
+/*context-menu*/
+.workflow-context-menu {
+  position: absolute;
+  display: none;
+  background-color: #fff;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
+  padding: 0px;
+  min-width: 200px;
+  width: auto;
+}
+
+.workflow-context-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.workflow-context-menu ul li {
+  padding: 0;
+  background-color: #fff;
+  display: block;
+}
+
+.workflow-context-menu ul li a {
+  color: #555;
+  padding: 10px;
+}
+
+.workflow-context-menu ul li a:hover {
+  background-color: rgb(255, 165, 0, 0.3);
+}
+
+.workflow-context-menu ul .uk-disabled a {
+  color: #dedede;
+}
+
+table.work-info {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12px;
+  font-family: sans-serif;
+}
+
+table.work-info td {
+  text-align: left;
+  color: #222;
+}
+
+table.work-info td {
+  border-bottom: 1px solid #ddd;
+  padding: 5px;
+}
+
+table.work-info tbody>tr:hover {
+  background-color: rgba(72, 157, 243, 0.2);
+}

constructor/components/Список работ/Список работ.js

@@ -5,6 +5,33 @@ const paginatorContainer = workContainer.find(`.workflow-paginator-container`);
 
 const getProgressBar = value => `<div class="work-progress-container"><div class="work-progress" style="width: ${value}%;">${value}%</div></div>`;
 
+const deleteWork = async workID => {
+  return new Promise(resolve => {
+    rest.synergyGet(`api/workflow/work/delete?workID=${workID}&locale=${AS.OPTIONS.locale}`, resolve, err => {
+      console.log(`ERROR [ deleteWork ]: ${JSON.stringify(err)}`);
+      resolve(null);
+    });
+  });
+}
+
+const getDocInfo = async workID => {
+  return new Promise(resolve => {
+    rest.synergyGet(`api/workflow/work/${workID}/document?&locale=${AS.OPTIONS.locale}`, resolve, err => {
+      console.log(`ERROR [ deleteWork ]: ${JSON.stringify(err)}`);
+      resolve(null);
+    });
+  });
+}
+
+const stopRoute = async documentID => {
+  return new Promise(resolve => {
+    rest.synergyPost(`api/docflow/doc/stop_route?documentID=${documentID}&locale=${AS.OPTIONS.locale}`, null, "application/json; charset=UTF-8", resolve, err => {
+      console.log(`ERROR [ stopRoute ]: ${JSON.stringify(err)}`);
+      resolve(null);
+    });
+  });
+}
+
 const Paginator = {
   countInPart: 15,
   rows: 0,
@@ -197,6 +224,186 @@ const WorkTable = {
     this.tHead.append(tr);
   },
 
+  getContextMenuItem: function(name, icon, handler, disabled = false){
+    const li = $(`<li>`);
+    const a = $('<a>');
+    const span = $(`<span class="uk-margin-small-right" uk-icon="icon: ${icon}"></span>`);
+
+    if(disabled) li.addClass('uk-disabled');
+
+    a.append(span, i18n.tr(name));
+    li.append(a);
+
+    li.on('click', e => {
+      e.preventDefault();
+      e.target.blur();
+      if(handler) handler();
+    });
+
+    return li;
+  },
+
+  openWorkInfo: function(work){
+    const createRow = (label, value) => $(`<tr><td>${i18n.tr(label)}</td><td>${value}</td></tr>`);
+
+    const dialog = $('<div class="uk-flex-top" uk-modal>');
+    const md = $('<div class="uk-modal-dialog uk-margin-auto-vertical">');
+    const modalBody = $('<div>', {class: 'uk-modal-body uk-overflow-auto', style: 'padding: 15px;'});
+    const container = $('<div>');
+    const table = $('<table>', {class: 'uk-table work-info'});
+    const body = $('<tbody>');
+
+    table.append(body);
+    container.append(table);
+    modalBody.append(container);
+
+    dialog.append(md);
+
+    md.append(
+      '<button class="uk-modal-close-default" type="button" uk-close></button>',
+      `<div class="uk-modal-header"><h3 class="uk-modal-title">${i18n.tr('Информация')}</h3></div>`,
+      modalBody,
+      `<div class="uk-modal-footer uk-text-right"><button class="uk-button uk-button-default uk-modal-close" type="button">${i18n.tr('Закрыть')}</button></div>`
+    );
+
+    const priority = this.priorities.find(x => x.id == work.priority);
+    const remained = Number(work.remained) < 0 ? `${i18n.tr('Просрочено')} ${work.remained_label.replaceAll('-', '')}` : `${i18n.tr('Осталось')} ${work.remained_label}`;
+
+    body.append(
+      createRow('Наименование:', work.name),
+      createRow('Автор:', work.author.name),
+      `<tr><td>${i18n.tr('Приоритет:')}</td><td style="display: flex; align-items: center;"><span style="width: 20px; height: 20px; background: ${priority.color}; margin-right: 10px;"></span><span>${priority.name}</span></td></tr>`,
+      createRow('Начало:', work.start_date),
+      createRow('Завершение:', work.finish_date),
+      createRow('Сроки:', remained)
+    );
+
+    UIkit.modal(dialog).show();
+    dialog.on('hidden', () => dialog.remove());
+  },
+
+  deleteWork: async function(work){
+    UIkit.modal.confirm(i18n.tr('Вы действительно хотите удалить данную работу?'),
+      {labels: {ok: i18n.tr('Да'), cancel: i18n.tr('Отмена')}})
+    .then(async () => {
+      Cons.showLoader();
+      try {
+        const resultDelete = await deleteWork(work.actionID);
+        if(!resultDelete) throw new Error(i18n.tr('Произошла ошибка при удалении работы'));
+        if(resultDelete.errorCode != '0') throw new Error(resultDelete.errorMessage);
+
+        Paginator.init();
+        this.createBody();
+
+        showMessage(resultDelete.errorMessage, 'success');
+      } catch (e) {
+        Cons.hideLoader();
+        showMessage(e.message, 'error');
+      }
+    }, () => null);
+  },
+
+  stopRoute: async function(work){
+    UIkit.modal.confirm(i18n.tr('Вы действительно хотите прервать данный маршрут?'),
+      {labels: {ok: i18n.tr('Да'), cancel: i18n.tr('Отмена')}})
+    .then(async () => {
+      Cons.showLoader();
+      try {
+        const docInfo = await getDocInfo(work.actionID);
+        if(!docInfo) throw new Error(i18n.tr('Произошла ошибка прерывания маршрута'));
+
+        const result = await stopRoute(docInfo.documentID);
+        if(!result) throw new Error(i18n.tr('Произошла ошибка прерывания маршрута'));
+        if(result.errorCode != '0') throw new Error(result.errorMessage);
+
+        Paginator.init();
+        this.createBody();
+
+        showMessage(result.errorMessage, 'success');
+      } catch (e) {
+        Cons.hideLoader();
+        showMessage(e.message, 'error');
+      }
+    }, () => null);
+  },
+
+  contextNavItems: [
+    {
+      name: 'Информация',
+      icon: 'info',
+      handler: function(me, work){
+        me.openWorkInfo(work);
+      }
+    },
+    {
+      name: 'Удалить',
+      icon: 'trash',
+      handler: function(me, work){
+        me.deleteWork(work);
+      },
+      prop: 'can_delete'
+    },
+    {
+      name: 'Прервать маршрут',
+      icon: 'ban',
+      handler: function(me, work){
+        me.stopRoute(work);
+      }
+    },
+    // 'divider',
+    // {
+    //   name: 'Изменить',
+    //   icon: 'pencil',
+    //   handler: function(me, work){
+    //     console.log('типа Изменить', work);
+    //   }
+    // },
+    // {
+    //   name: 'Переслать',
+    //   icon: 'forward',
+    //   handler: function(me, work){
+    //     console.log('типа Переслать', work);
+    //   }
+    // },
+    // {
+    //   name: 'Перепоручить',
+    //   icon: 'users',
+    //   handler: function(me, work){
+    //     console.log('типа Перепоручить', work);
+    //   }
+    // }
+  ],
+
+  contextMenu: function(el, work) {
+    el.on('contextmenu', event => {
+      $('.workflow-context-menu').remove();
+
+      const contextMenu = $('<div>', {class: 'workflow-context-menu'});
+      const nav = $('<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>');
+
+      contextMenu.css({
+        "left": event.pageX + 'px',
+        "top": event.pageY + 'px'
+      });
+
+      contextMenu.append(nav);
+
+      this.contextNavItems.forEach(item => {
+        if(item == 'divider') {
+          nav.append('<li class="uk-nav-divider"></li>');
+        } else {
+          const {name, icon, handler, prop = false} = item;
+          nav.append(this.getContextMenuItem(name, icon, () => handler(this, work), prop && work[prop] == "false"));
+        }
+      });
+
+      $('body').append(contextMenu);
+
+      contextMenu.show('fast');
+      return false;
+    });
+  },
+
   createRow: function(item) {
     const {actionID, name, is_new, is_expired, is_soon_expired, user, author, remained_label, percent} = item;
     const tr = $('<tr>');
@@ -240,13 +447,15 @@ const WorkTable = {
       tr.addClass('soon_expired_work');
     }
 
-    tr.append(`<td title="${name}">${name}</td>`);
+    tr.append(`<td uk-tooltip="title: ${name}; delay: 500;">${name}</td>`);
+
     if(this.filterType == 'OWN_WORKS') {
-      tr.append(`<td title="${author.name}">${author.name}</td>`);
+      tr.append(`<td uk-tooltip="${author.name}">${author.name}</td>`);
     } else {
-      tr.append(`<td title="${user.name}">${user.name}</td>`);
+      tr.append(`<td uk-tooltip="${user.name}">${user.name}</td>`);
     }
-    tr.append(`<td>${remained_label}</td>`);
+
+    tr.append(`<td uk-tooltip="${remained_label}">${remained_label}</td>`);
     tr.append(`<td>${getProgressBar(percent)}</td>`);
 
     let timeoutId;
@@ -268,6 +477,8 @@ const WorkTable = {
       fire({type: 'worklist_item_dbl_click', ...item}, comp.code);
     });
 
+    this.contextMenu(tr, item);
+
     return tr;
   },
 
@@ -355,3 +566,7 @@ addListener('worklist_update', comp.code, e => {
   Paginator.init(countInPart);
   WorkTable.createBody();
 });
+
+$(document).off()
+.on('contextmenu', () => $('.workflow-context-menu').remove())
+.on('click', () => $('.workflow-context-menu').remove());