Add add-new-row feature

Teihden · Aug 1, 2023 · d0437ca · d0437ca
1 parent 9d2caa3
commit d0437ca
Show file tree

Hide file tree

Showing 14 changed files with 239 additions and 192 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,9 @@
 [![CI](https://github.com/Teihden/opt6-test/actions/workflows/CI.yml/badge.svg)](https://github.com/Teihden/opt6-test/actions/workflows/CI.yml)
 [![Github Pages](https://github.com/Teihden/opt6-test/actions/workflows/github-pages-with-gulp.yml/badge.svg)](https://github.com/Teihden/opt6-test/actions/workflows/github-pages-with-gulp.yml)
 
+## About
+This repository contains a table created using the DataTables plugin, colResizable (jquery plugins) and javascript. This table is designed to display data in a convenient and easy to read format. The table also has a responsive design and is optimised for viewing on mobile devices.
+
 ## Setup
 
 ```shell

diff --git a/src/js/index.js b/src/js/index.js
@@ -1,8 +1,6 @@
-/* eslint-disable no-new */
-/* eslint-disable max-len */
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-undef */
 import { initDatatable } from './modules/datatables.js';
 
+const { $ } = window;
+
 const myTable = $('#data-table');
 initDatatable(myTable);
diff --git a/src/js/modules/add-row.js b/src/js/modules/add-row.js
@@ -0,0 +1,25 @@
+const { $ } = window;
+
+const onNewRowButtonClick = (dataTable) => {
+  const newOrder = parseInt($('.drag-button__order').last().text(), 10) + 1;
+
+  const newRow = dataTable
+    .row.add({
+      order: newOrder,
+      unitName: 'Мраморный щебень фр. 2-5 мм, 25кг',
+      price: 1231,
+      quantity: 12,
+      delivery: 1500,
+      load: 100,
+      productName: 'Мраморный щебень',
+      total: '1231',
+    })
+    .draw()
+    .node();
+
+  $('.data-table__select', newRow).get(0).focus({ focusVisible: true });
+
+  // вставить функцию для отправки данных на сервер
+};
+
+export { onNewRowButtonClick };
diff --git a/src/js/modules/data.js → src/js/modules/dataArray.js b/src/js/modules/data.js → src/js/modules/dataArray.js
@@ -1,21 +1,23 @@
-const data = [
+const dataArray = [
   {
     order: 1,
-    unitName: 'Мраморный щебень фр. 2-5 мм, 25кг (вайт)',
+    unitName: 'Мраморный щебень фр. 2-5 мм, 25кг (белый)',
     price: 1231,
     quantity: 12,
     delivery: 1500,
     load: 100,
     productName: 'Мраморный щебень',
+    total: 1231,
   },
   {
     order: 2,
-    unitName: 'Мраморный щебень фр. 2-5 мм, 25кг',
+    unitName: 'Мраморный щебень фр. 2-5 мм, 25кг (вайт)',
     price: 1231,
     quantity: 12,
     delivery: 1500,
     load: 100,
     productName: 'Мраморный щебень',
+    total: 1231,
   },
   {
     order: 3,
@@ -25,6 +27,7 @@ const data = [
     delivery: 1500,
     load: 100,
     productName: 'Мраморный щебень',
+    total: 1231,
   },
   {
     order: 4,
@@ -34,7 +37,8 @@ const data = [
     delivery: 1500,
     load: 100,
     productName: 'Мраморный щебень',
+    total: 1231,
   },
 ];
 
-export { data };
+export { dataArray };
diff --git a/src/js/modules/datatables.js b/src/js/modules/datatables.js
@@ -1,28 +1,28 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable no-unused-vars */
-/* eslint-disable no-shadow */
-/* eslint-disable object-shorthand */
-/* eslint-disable no-undef */
-/* eslint-disable semi */
 import { initColResizable, removeColResizable } from './colresizable.js';
-import { createDeleteButton } from './delete-button.js';
+import { createDeleteButton } from './delete-row.js';
+import { onNewRowButtonClick } from './add-row.js';
 import { debounce } from './utils.js';
-import { data } from './data.js';
+import { dataArray } from './dataArray.js';
 
-const POPOVER_TITLE = `<span class="data-table__filter-text data-table__filter-text--main">Отображение столбцов</span>
-<svg class="data-table__filter-breadcrumbs data-table__filter-breadcrumbs--main"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;
+const { $ } = window;
 
-const POPOVER_TEXT = `<span class="data-table__filter-text">Отображение столбцов</span>
-<svg class="data-table__filter-breadcrumbs"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;
+const POPOVER_TITLE = `<span class="filter-button__text filter-button__text--main">Отображение столбцов</span>
+<svg class="filter-button__breadcrumbs filter-button__breadcrumbs--main"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;
 
-const MULTIPOINT_BUTTON = `<button class="data-table__multipoint-button" type="button">
-<svg class="data-table__multipoint"><use href="img/icons/sprite.svg#multipoint"></use></svg>
+const POPOVER_TEXT = `<span class="filter-button__text">Отображение столбцов</span>
+<svg class="filter-button__breadcrumbs"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;
+
+const FILTER_GEAR = '<svg class="filter-button__gear"><use href="img/icons/sprite.svg#gear"/></svg>';
+
+const MULTIPOINT_BUTTON = `<button class="data-table__multipoint-button multipoint-button" type="button">
+<svg class="multipoint-button__multipoint"><use href="img/icons/sprite.svg#multipoint"></use></svg>
 <span class="visually-hidden">Удалить строку</span></button>`;
 
-const ORDER = (index) => `<button class="data-table__drag-button" type="button">
-<svg class="data-table__drag">
-<use href="img/icons/sprite.svg#hamburger"></use></svg>
-<span class="data-table__order">${index}</span></button>`;
+const ORDER = (index) => `<button class="data-table__drag-button drag-button" type="button">
+<svg class="drag-button__handler"><use href="img/icons/sprite.svg#hamburger"></use></svg>
+<span class="drag-button__order">${index}</span></button>`;
 
 const INPUT = (value, type, name, placeholder) => `<input class="data-table__input" type="${type}"
 name="${name}" value="${value}" placeholder="${placeholder}">`;
@@ -37,15 +37,16 @@ const SELECT = `<select class="data-table__select" name="unit-name">
 
 const initDatatable = (table) => {
   const dataTable = table.DataTable({
-    data: data,
+    data: dataArray,
     paging: false,
     searching: false,
     ordering: true,
     info: false,
     autoWidth: true,
-    colReorder: {
-      fixedColumnsLeft: 1,
-    },
+    // colReorder: {
+    //   fixedColumnsLeft: 1,
+    // },
+    colReorder: true,
     rowReorder: {
       selector: '.data-table__drag-button',
       dataSrc: 'order',
@@ -82,14 +83,16 @@ const initDatatable = (table) => {
         name: 'unitName',
         createdCell: (td, cellData, rowData, row, col) => {
           const cell = $(td);
-          const select = $(SELECT);
 
-          select.val(cellData);
           cell.attr('data-label', 'Наименование единицы');
           cell.addClass('data-table__body-cell');
-          cell.append(select)
         },
-        render: () => null,
+        render: (data, type, row, meta) => {
+          const select = $(SELECT);
+          select.find(`option[value="${data}"]`).attr('selected', 'selected');
+
+          return select[0].outerHTML;
+        },
       },
       {
         targets: 3,
@@ -121,7 +124,7 @@ const initDatatable = (table) => {
       },
       {
         targets: 5,
-        data: 'quantity',
+        data: 'delivery',
         orderable: false,
         title: 'Цена доставки, руб',
         name: 'delivery',
@@ -163,7 +166,7 @@ const initDatatable = (table) => {
       },
       {
         targets: 8,
-        data: null,
+        data: 'total',
         orderable: false,
         title: 'Итого',
         name: 'load',
@@ -180,10 +183,10 @@ const initDatatable = (table) => {
     dom: 'Bfrtip',
     buttons: [{
       extend: 'collection',
-      text: '<svg class="data-table__gear"><use href="img/icons/sprite.svg#gear"/></svg>',
+      text: FILTER_GEAR,
       background: false,
       align: 'button-right',
-      className: 'data-table__filter',
+      className: 'data-table__filter-button filter-button',
       buttons: [
         {
           popoverTitle: POPOVER_TITLE,
@@ -212,15 +215,20 @@ const initDatatable = (table) => {
     setTimeout(() => initColResizable(table));
   });
 
+  // Отображение кнопки удалить
   dataTable.on('click', '.data-table__multipoint-button', (evt) => {
     evt.preventDefault();
     createDeleteButton(evt, dataTable);
   });
 
+  // Создание новой строки в таблице
+  $('.new-row-button').on('click', () => onNewRowButtonClick(dataTable));
+
+  // Изменение ширины таблицы в соответствии с viewport
   const onWindowResize = debounce(() => {
     table.css('width', '100%');
     dataTable.columns.adjust().draw();
-  }, 250);
+  }, 100);
 
   window.addEventListener('resize', onWindowResize);
 };

diff --git a/src/js/modules/delete-button.js → src/js/modules/delete-row.js b/src/js/modules/delete-button.js → src/js/modules/delete-row.js
@@ -1,12 +1,13 @@
-/* eslint-disable no-undef */
 import { handleEscapeKey } from './utils.js';
 
-const DELETE_BUTTON = `<button class="data-table__delete-button" type="button">
-<span class="data-table__delete-button-text">Удалить</span></button>`;
+const { $ } = window;
+
+const DELETE_BUTTON = `<button class="data-table__delete-button delete-button" type="button">
+<span class="delete-button__text">Удалить</span></button>`;
 
 const closeDeleteButton = (deleteButton, target) => {
   deleteButton.fadeTo('fast', 0, () => deleteButton.remove());
-  target.removeClass('data-table__multipoint-button--active');
+  target.removeClass('multipoint-button--active');
   $(document).off();
 };
 
@@ -24,8 +25,8 @@ const deleteRow = (dataTable, evt) => {
 const createDeleteButton = (evt, dataTable) => {
   const target = $(evt.currentTarget);
 
-  if (!target.next('.data-table__delete-button').length > 0) {
-    target.addClass('data-table__multipoint-button--active');
+  if (!target.next('.delete-button').length > 0) {
+    target.addClass('multipoint-button--active');
 
     const deleteButton = $(DELETE_BUTTON);
     const closeDeleteButtonCallback = () => closeDeleteButton(deleteButton, target);