конструктор, добавлен компонент Список работ

README.md

@@ -63,6 +63,7 @@
 * [changeLocaleListener.js - скрипт для работы с локалью](constructor/scripts/changeLocaleListener.js)
 * [Канбан доска](constructor/components/Канбан-доска)
 * [представление реестра, с поиском, фильтрацией и кучей дополнительных функций + выгрузка записей в excel](constructor/components/записи%20реестра)
+* [Список работ](constructor/components/Список работ)
 
 
 ### Дополнительно

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

+.workflow-work-container {
+  width: 100%;
+  height: 100%;
+}
+
+/*таблица записей реестров*/
+.workflow-table-list>thead>tr>th {
+  vertical-align: middle;
+  font-weight: bold;
+  color: #262626;
+  text-transform: none !important;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: sticky;
+  top: 0px;
+  background: #FAFAFA;
+  cursor: pointer;
+}
+
+.workflow-table-list>thead>tr>th {
+  border-right: 1px solid #E8E8E8;
+}
+
+.workflow-table-list>thead>tr>th:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid #E8E8E8;
+  z-index: -1;
+}
+
+.workflow-table-list>tbody>tr {
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-top: 1px solid #E8E8E8;
+  border-bottom: 1px solid #E8E8E8;
+  transition: .3s;
+}
+
+.workflow-table-list>tbody>tr>td>.uk-checkbox {
+  background-color: #fff;
+}
+
+.workflow-table-list>tbody>tr>td>.uk-checkbox:checked {
+  background-color: #1e87f0;
+}
+
+.workflow-table-list>tbody>[selected],
+.workflow-table-list>tbody>tr:hover {
+  background-color: #E6F7FF;
+}
+
+.workflow-table-list {
+  table-layout: fixed;
+  font-size: 10pt;
+  width: 100%;
+  margin: 0;
+}
+
+.workflow-table-container {
+  background: #fff;
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: auto;
+}
+
+.workflow-table-list td {
+  padding: 10px;
+  border-right: 1px solid #E8E8E8;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+}
+
+/*пагинатор*/
+.workflow-paginator-container {
+  height: 50px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  border-top: 1px solid rgb(196, 196, 196);
+}
+
+
+.workflow-pt-paginator {
+  height: 32px;
+}
+
+.workflow-pt-paginator-container {
+  width: 168px;
+  height: 32px;
+  display: inline-block;
+  float: right;
+}
+
+.workflow-pt-paginator button {
+  height: 100%;
+  width: 34px;
+  background-color: #fff;
+  border: none;
+  float: left;
+  cursor: pointer;
+}
+
+.workflow-pt-paginator button:hover {
+  border-color: orange;
+}
+
+.workflow-pt-paginator button[disabled] {
+  opacity: 0.5;
+  cursor: default;
+  border-color: #d6d6d6;
+}
+
+.workflow-pt-paginator button.workflow-pt-previous {
+  background: url('data:image/png;base64,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') no-repeat center;
+}
+
+.workflow-pt-paginator button.workflow-pt-next {
+  background: url('data:image/png;base64,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') no-repeat center;
+}
+
+.workflow-pt-paginator .workflow-pt-paginator-content {
+  display: inline-block;
+  width: 100px;
+  height: 100%;
+  text-align: center;
+  vertical-align: top;
+  margin: 0;
+  padding: 0;
+  float: left;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.workflow-pt-paginator .workflow-pt-paginator-content>label {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-color: #fff;
+}
+
+.workflow-pt-paginator .workflow-pt-paginator-content>input {
+  display: none;
+  width: calc(100% - 4px);
+  height: calc(100% - 6px);
+  border: 0;
+  text-align: center;
+  padding-top: 3px;
+  background-color: #fff;
+}
+
+
+.workflow-table-list tbody .new_work {
+  font-weight: 600;
+}
+
+.workflow-table-list tbody .expired_work {
+  color: #af0100;
+}
+
+.workflow-table-list tbody .soon_expired_work {
+  color: orange;
+}
+
+.work-progress-container {
+  width: 100%;
+  background-color: #e1e7f3;
+  border-radius: 5px;
+}
+
+.work-progress {
+  height: 19px;
+  background-color: #72b8fa;
+  text-align: center;
+  line-height: 19px;
+  color: #222;
+  border-radius: 5px;
+}
+
+.sortable:before {
+  content: '';
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  border: solid #262626;
+  border-width: 0 3px 3px 0;
+  padding: 3px;
+  transition: transform .3s;
+}
+
+.sortable__down:before {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+.sortable__up:before {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
+
+.mobile-table-header {
+  display: none;
+  font-weight: 600;
+  margin-right: 10px;
+}

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

+<div class="workflow-work-container">
+  <div class="workflow-table-container"></div>
+  <div class="workflow-paginator-container"></div>
+</div>

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

+const compContainer = $(`#${comp.code}`);
+const workContainer = compContainer.find(`.workflow-work-container`);
+const tableContainer = workContainer.find(`.workflow-table-container`);
+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 Paginator = {
+  countInPart: 15,
+  rows: 0,
+  currentPage: 1,
+  pages: 0,
+
+  update: function(){
+    this.pages = Math.ceil(this.rows / this.countInPart),
+    this.label.text(this.currentPage + ' / ' + this.pages);
+
+    if(this.pages == 0) {
+      this.bPrevious.attr('disabled', 'disabled');
+      this.bNext.attr('disabled', 'disabled');
+    } else {
+      if(this.currentPage == 1) {
+        this.bPrevious.attr('disabled', 'disabled');
+        if (this.currentPage == this.pages) {
+          this.bNext.attr('disabled', 'disabled');
+        } else {
+          this.bNext.removeAttr('disabled');
+        }
+      } else {
+        this.bPrevious.removeAttr('disabled');
+        if (this.currentPage == this.pages) {
+          this.bNext.attr('disabled', 'disabled');
+        } else {
+          this.bNext.removeAttr('disabled');
+        }
+      }
+    }
+  },
+
+  addListeners: function(){
+    this.bNext.click(() => {
+      this.currentPage++;
+      this.update();
+      WorkTable.createBody();
+    });
+
+    this.bPrevious.click(() => {
+      this.currentPage--;
+      this.update();
+      WorkTable.createBody();
+    });
+
+    this.label.on('dblclick', e => {
+      e.preventDefault();
+      this.input.show();
+      this.label.hide();
+
+      this.input.on('blur', () => {
+        this.label.show();
+        this.input.hide();
+      });
+
+      this.input.val("" + this.currentPage);
+
+      this.input.on('keypress', e => {
+        if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) return false;
+      });
+
+      this.input.on('keydown', e => {
+        if(e.which === 13) {
+          let inputVal = +this.input.val();
+          if(inputVal && inputVal != this.currentPage && inputVal <= this.pages && inputVal >= 1){
+            this.currentPage = inputVal;
+            this.update();
+            WorkTable.createBody();
+          }
+          this.label.show();
+          this.input.hide();
+          this.input.off();
+        }
+      });
+      this.input.focus();
+    });
+  },
+
+  render: function(){
+    this.container = $('<div class="workflow-pt-container">');
+    this.paginator = $('<div class="workflow-pt-paginator">');
+    this.pContent = $('<div class="workflow-pt-paginator-content">');
+    this.bPrevious = $(`<button class="workflow-pt-previous" disabled="disabled" title="${i18n.tr('Назад')}">`);
+    this.bNext = $(`<button class="workflow-pt-next" disabled="disabled" title="${i18n.tr('Вперед')}">`);
+    this.label = $('<label>');
+    this.input = $('<input type="text">');
+
+    paginatorContainer.empty().append(this.container);
+
+    this.pContent.append(this.label).append(this.input);
+    this.paginator.append(this.bPrevious).append(this.pContent).append(this.bNext);
+    this.container.append(this.paginator);
+  },
+
+  reset: function(countInPart){
+    this.countInPart = countInPart;
+    this.rows = countInPart;
+    this.currentPage = 1;
+    this.pages = 0;
+  },
+
+  init: function(countInPart = 15){
+    const {rowsPerPage = countInPart} = localStorage;
+    this.render();
+    this.reset(rowsPerPage);
+    this.addListeners();
+  }
+};
+
+const WorkTable = {
+  filterType: 'OWN_WORKS',
+  filterId: null,
+  objectId: null,
+
+  search: null,
+  periodType: null,
+
+  isAscSort: true,
+  sortColumn: null,
+
+  table: null,
+  tHead: null,
+  tBody: null,
+
+  selectedItems: [],
+
+  priorities: null,
+
+  getUrl: function(){
+    let url = `api/workflow/works/list_ext?userID=${AS.OPTIONS.currentUser.userid}&filterType=${this.filterType}`;
+
+    const startRecord = Paginator.currentPage * Paginator.countInPart - Paginator.countInPart;
+    url += `&startRecord=${startRecord}&recordsCount=${Paginator.countInPart}`;
+
+    if(this.filterId) url += `&filterID=${this.filterId}`;
+    if(this.objectId) url += `&objectID=${this.objectId}`;
+    if(this.search) url += `&search=${this.search}`;
+    if(this.periodType) url += `&hasExtSearchParams=true&periodType=${this.periodType}`;
+    if(this.sortColumn) url += `&sortColumn=${this.sortColumn}&isAscSort=${this.isAscSort}`;
+
+    url += `&locale=${AS.OPTIONS.locale}`;
+    return url;
+  },
+
+  sortable: function(th) {
+    if(th.attr('columnid') == 'checkbox' || th.hasClass("uk-checkbox")) return;
+    this.tHead.find('th').not(th).removeClass('sortable sortable__down sortable__up');
+    if (th.hasClass("sortable__down") || th.hasClass("sortable__up")) {
+      th.toggleClass("sortable__down sortable__up");
+    } else {
+      th.addClass("sortable sortable__down");
+    }
+    this.sortColumn = th.attr('columnid');
+    this.isAscSort = th.hasClass("sortable__down") ? true : false;
+    this.createBody();
+  },
+
+  createHeader: function() {
+    this.tHead.empty();
+    this.isAscSort = true;
+    this.sortColumn = null;
+
+    const tr = $('<tr>');
+    const th = $('<th columnid="checkbox" style="width: 40px;"></th>');
+    const checkbox = $('<input/>')
+    .addClass('uk-checkbox')
+    .attr('type', 'checkbox')
+    .on('change', e => {
+      this.tBody.find('td > [type="checkbox"]').each((k, x) => {
+        x.checked = !!e.target.checked;
+      });
+      this.tBody.find('td > [type="checkbox"]').each((k, x) => {
+        $(x).trigger('change');
+      });
+    });
+    th.append(checkbox);
+    tr.append(th);
+
+    tr.append(`<th columnid="name" class="uk-table-expand">${i18n.tr('Название')}</th>`);
+    if(this.filterType == 'OWN_WORKS') {
+      tr.append(`<th columnid="author" class="uk-width-small">${i18n.tr('Поставил')}</th>`);
+    } else {
+      tr.append(`<th columnid="responsible" class="uk-width-small">${i18n.tr('Ответственный')}</th>`);
+    }
+    tr.append(`<th columnid="left" class="uk-width-small">${i18n.tr('Осталось')}</th>`);
+    tr.append(`<th columnid="percent" class="uk-width-small">${i18n.tr('Прогресс')}</th>`);
+
+    tr.on('click', e => this.sortable($(e.target)));
+
+    this.tHead.append(tr);
+  },
+
+  createRow: function(item) {
+    const {actionID, name, is_new, is_expired, is_soon_expired, user, author, remained_label, percent} = item;
+    const tr = $('<tr>');
+    const checkbox = $('<input/>').addClass('uk-checkbox').attr('type', 'checkbox');
+    const tmpTd = $('<td>');
+
+    if(this.selectedItems.indexOf(actionID) !== -1) checkbox.prop('checked', true);
+    tmpTd.append(`<span class="mobile-table-header">Выбор</span>`).append(checkbox);
+    tr.append(tmpTd);
+
+    if(this.priorities) {
+      const priority = this.priorities.find(x => x.id == item.priority);
+      if(priority) tmpTd.css({
+        'background': priority.color
+      });
+    }
+
+    checkbox.on('change', e => {
+      if(e.target.checked) {
+        if(this.selectedItems.indexOf(actionID) === -1) {
+          this.selectedItems.push(actionID);
+        }
+      } else {
+        const index = this.selectedItems.indexOf(actionID);
+        if(index !== -1) this.selectedItems.splice(index, 1);
+      }
+      // if(this.selectedItems.length > 0) {
+      //   $('.action-menu-item').removeClass('uk-disabled');
+      //   if($('.action-menu-item.item-delete').length) {
+      //     if(!this.isDelete) $('.action-menu-item.item-delete').addClass('uk-disabled');
+      //   }
+      // } else {
+      //   $('.action-menu-item').addClass('uk-disabled');
+      // }
+    });
+
+    if(is_new && is_new == "true") tr.addClass('new_work');
+    if(is_expired && is_expired == "true") {
+      tr.addClass('expired_work');
+    } else if (is_soon_expired && is_soon_expired == "true") {
+      tr.addClass('soon_expired_work');
+    }
+
+    tr.append(`<td title="${name}">${name}</td>`);
+    if(this.filterType == 'OWN_WORKS') {
+      tr.append(`<td title="${author.name}">${author.name}</td>`);
+    } else {
+      tr.append(`<td title="${user.name}">${user.name}</td>`);
+    }
+    tr.append(`<td>${remained_label}</td>`);
+    tr.append(`<td>${getProgressBar(percent)}</td>`);
+
+    let timeoutId;
+
+    tr.on('click', e => {
+      if($(e.target).is("input")) return;
+      timeoutId = setTimeout(() => {
+        if(!timeoutId) return;
+        this.tBody.find('tr').removeAttr('selected');
+        tr.attr('selected', true);
+        fire({type: 'worklist_item_click', ...item}, comp.code);
+      }, 200);
+    });
+
+    tr.on('dblclick', e => {
+      if($(e.target).is("input")) return;
+      clearTimeout(timeoutId);
+      timeoutId = null;
+      fire({type: 'worklist_item_dbl_click', ...item}, comp.code);
+    });
+
+    return tr;
+  },
+
+  createBody: function(rowsCount) {
+    Cons.showLoader();
+    rest.synergyGet(this.getUrl(), res => {
+      this.tBody.empty();
+      res.data.forEach(item => this.tBody.append(this.createRow(item)));
+      Paginator.rows = res.totalCount;
+      Paginator.update();
+      Cons.hideLoader();
+    });
+  },
+
+  render: function() {
+    compContainer.find(`.jsx-parser`).css({
+      'width': '100%',
+      'height': '100%'
+    });
+    this.table = $('<table class="workflow-table-list uk-table uk-table-small uk-table-responsive">');
+    this.tHead = $('<thead>');
+    this.tBody = $('<tbody>');
+    this.table.append(this.tHead).append(this.tBody);
+    tableContainer.empty().append(this.table);
+  },
+
+  reset: function(){
+    this.search = null;
+    this.periodType = null;
+    this.isAscSort = true;
+    this.sortColumn = null;
+    this.selectedItems = [];
+  },
+
+  init: function() {
+    const {systemSettings} = Cons.getAppStore();
+    if(systemSettings) this.priorities = systemSettings.current_priorities;
+
+    this.render();
+    this.createHeader();
+    Paginator.init();
+    this.createBody();
+  }
+
+};
+
+WorkTable.init();
+
+addListener('worklist_filter_arbitrary_change', comp.code, filterData => {
+  const {filterType, filterId, objectId} = filterData;
+
+  WorkTable.filterId = filterId;
+  WorkTable.objectId = objectId;
+  WorkTable.reset();
+  WorkTable.createHeader();
+  WorkTable.createBody();
+  Paginator.init();
+});
+
+addListener('worklist_translate', comp.code, () => {
+  WorkTable.createHeader();
+  WorkTable.reset();
+  WorkTable.createBody();
+  Paginator.init();
+});
+
+
+addListener('worklist_search', comp.code, e => {
+  const {value = null} = e;
+  WorkTable.search = value;
+  WorkTable.createBody();
+  Paginator.init();
+});
+
+addListener('worklist_row_count_on_page', comp.code, e => {
+  const {rowsPerPage = null} = e;
+  WorkTable.search = null;
+  Paginator.init(rowsPerPage);
+  WorkTable.createBody();
+});
+
+addListener('worklist_update', comp.code, e => {
+  const {countInPart} = Paginator;
+  Paginator.init(countInPart);
+  WorkTable.createBody();
+});