Add final styles, js

Teihden · Aug 2, 2023 · b466416 · b466416
1 parent 97fb0b4
commit b466416
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 172 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -93,7 +93,6 @@ function optimizeJS() {
   return gulp.src('src/js/**/*.js')
     .pipe(sourcemaps.init())
     .pipe(terser())
-    // .pipe(rename((path) => ({ ...path, extname: '.min.js' })))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('build/js'))
     .pipe(browser.stream());

diff --git a/src/js/modules/add-row.js b/src/js/modules/add-row.js
@@ -1,32 +1,25 @@
 import { initCustomSelect } from './custom-select.js';
+import { getNewEntry } from './goods.js';
 
 const { $ } = window;
 
 const onNewRowButtonClick = (dataTable) => {
-  const newOrder = parseInt($('.drag-button__order').last().text(), 10) + 1;
+  const newData = getNewEntry();
 
   const newRow = dataTable
-    .row.add({
-      order: newOrder,
-      unitName: 'Мраморный щебень фр. 2-5 мм, 25кг',
-      price: 1231,
-      quantity: 12,
-      delivery: 1500,
-      load: 100,
-      productName: 'Мраморный щебень',
-      total: '1231',
-    })
+    .row.add(newData)
     .draw()
     .node();
 
   initCustomSelect();
 
   const selectedOption = $('.custom-select__selected', newRow);
+  selectedOption[0].focus({ focusVisible: true });
 
-  // selectedOption[0].focus({ focusVisible: true });
-  selectedOption[0].click();
-
-  // вставить функцию для отправки данных на сервер
+  // Функция для отправки данных на сервер
+  $.post('example.php', newData)
+    .done(() => {})
+    .fail(() => {});
 };
 
 export { onNewRowButtonClick };
diff --git a/src/js/modules/custom-select.js b/src/js/modules/custom-select.js
@@ -25,7 +25,7 @@ const openSelect = (optionItemsContainer) => {
   $(document).on('keydown', (evt) => onDocumentKeydown(closeSelectCallback, evt));
 };
 
-const onSelectedOptionClick = (evt) => {
+const onSelectedOptionContainerClick = (evt) => {
   evt.preventDefault();
   evt.stopPropagation();
 
@@ -39,17 +39,18 @@ const onSelectedOptionClick = (evt) => {
   }
 };
 
-const onSelectOption = (evt) => {
+const onSelectOptionClick = (evt) => {
   /* При нажатии на элемент обновляется исходное поле выбора,
     и выбранный элемент: */
   const targetOption = $(evt.currentTarget);
-  const parentSelect = targetOption.parents('.custom-select').find('.custom-select__select')[0];
-  const selectedOptionContainer = targetOption.parent().prev();
+  const parentSelect = targetOption.parents('.custom-select').find('.custom-select__select');
+  const selectedOption = targetOption.parents('.custom-select').find('.custom-select__selected-option');
 
-  [...parentSelect.options].forEach((parentSelectOption, index) => {
+  [...parentSelect[0].options].forEach((parentSelectOption, index) => {
     if ($(parentSelectOption).text() === targetOption.text().split(/\s+/).join(' ')) {
-      parentSelect.selectedIndex = index;
-      selectedOptionContainer.text(targetOption.text());
+      selectedOption.text(targetOption.text());
+      parentSelect[0].selectedIndex = index;
+      parentSelect.trigger('change');
     }
   });
 };
@@ -71,28 +72,28 @@ const initCustomSelect = () => {
   customSelectContainers.each((_, customSelectContainer) => {
     const select = $('.custom-select__select', customSelectContainer)[0];
 
-    /* Для каждого элемента создаем новый DIV (selectedOption),
+    /* Для каждого элемента создаем новый DIV (selectedOptionContainer),
     который будет выступать в качестве выбранной опции: */
-    $('<div></div>')
+    $('<div/>')
       .addClass('custom-select__selected')
       .attr('tabindex', '0')
-      .html($('<span></span>')
+      .html($('<span/>')
         .text(select.options[select.selectedIndex].textContent)
         .addClass('custom-select__selected-option'))
-      .on('click', onSelectedOptionClick)
+      .on('click', onSelectedOptionContainerClick)
       .appendTo(customSelectContainer);
 
     /* Для каждого элемента создаем новый DIV, который будет содержать список опций */
-    const optionList = $('<div></div>').addClass('custom-select__items custom-select__hide');
+    const optionList = $('<div/>').addClass('custom-select__items custom-select__hide');
 
     [...select.options].forEach((option) => {
       /* Для каждого варианта в исходном элементе select,
       создаем новый DIV (selectOption), который будет выступать в качестве элемента выбора: */
-      $('<div></div>')
+      $('<div/>')
         .addClass('custom-select__option')
         .text($(option).text())
         .html(addAccentClass)
-        .on('click', onSelectOption)
+        .on('click', onSelectOptionClick)
         .appendTo((optionList));
     });
 

diff --git a/src/js/modules/dataArray.js b/src/js/modules/dataArray.js
diff --git a/src/js/modules/datatables.js b/src/js/modules/datatables.js
@@ -1,43 +1,17 @@
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-use-before-define */
 import { initColResizable, removeColResizable } from './colresizable.js';
 import { createDeleteButton } from './delete-row.js';
 import { onNewRowButtonClick } from './add-row.js';
 import { debounce } from './utils.js';
-import { dataArray } from './dataArray.js';
+import { goods } from './goods.js';
 import { initCustomSelect } from './custom-select.js';
+import { html } from './html-elements.js';
 
 const { $ } = window;
 
-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 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 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}">`;
-
-const SELECT = `<div class="custom-select"><select class="custom-select__select" name="unit-name">
-<option value="Мраморный щебень фр. 2-5 мм, 25кг">Мраморный щебень фр. 2-5 мм, 25кг</option>
-<option value="Мраморный щебень фр. 2-5 мм, 25кг (белый)">Мраморный щебень фр. 2-5 мм, 25кг (белый)</option>
-<option value="Мраморный щебень фр. 2-5 мм, 25кг (вайт)">Мраморный щебень фр. 2-5 мм, 25кг (вайт)</option>
-<option value="Мраморный щебень фр. 2-5 мм, 25кг, возврат">Мраморный щебень фр. 2-5 мм, 25кг, возврат</option>
-<option value="Мраморный щебень фр. 2-5 мм, 1т">Мраморный щебень фр. 2-5 мм, 1т</option>
-</select></div>`;
-
 const initDatatable = (table) => {
   const dataTable = table.DataTable({
-    data: dataArray,
+    data: goods,
     paging: false,
     searching: false,
     ordering: true,
@@ -57,7 +31,7 @@ const initDatatable = (table) => {
         orderable: false,
         width: '3%',
         createdCell: (td) => $(td).addClass('data-table__body-cell data-table__body-cell--order'),
-        render: (data) => ORDER(data),
+        render: (data) => html.order(data),
       },
       {
         targets: 1,
@@ -70,22 +44,22 @@ const initDatatable = (table) => {
           $(td).attr('data-label', 'Действие');
           $(td).addClass('data-table__body-cell data-table__body-cell--action');
         },
-        render: () => MULTIPOINT_BUTTON,
+        render: () => html.multipointButton,
       },
       {
         targets: 2,
-        data: 'unitName',
+        data: 'unit',
         orderable: false,
         title: 'Наименование единицы',
-        name: 'unitName',
-        createdCell: (td, cellData, rowData, row, col) => {
+        name: 'unit',
+        createdCell: (td) => {
           const cell = $(td);
 
           cell.attr('data-label', 'Наименование единицы');
           cell.addClass('data-table__body-cell data-table__body-cell--select');
         },
-        render: (data, type, row, meta) => {
-          const select = $(SELECT);
+        render: (data) => {
+          const select = $(html.select);
           select.find(`option[value="${data}"]`).attr('selected', 'selected');
 
           return select[0].outerHTML;
@@ -103,7 +77,7 @@ const initDatatable = (table) => {
           cell.attr('data-label', 'Цена');
           cell.addClass('data-table__body-cell');
         },
-        render: (data) => INPUT(data, 'number', 'price', 'Цена'),
+        render: (data) => html.input(data, 'number', 'price', 'Цена'),
       },
       {
         targets: 4,
@@ -117,7 +91,7 @@ const initDatatable = (table) => {
           cell.attr('data-label', 'Кол-во');
           cell.addClass('data-table__body-cell');
         },
-        render: (data) => INPUT(data, 'number', 'quantity', 'Кол-во'),
+        render: (data) => html.input(data, 'number', 'quantity', 'Кол-во'),
       },
       {
         targets: 5,
@@ -131,7 +105,7 @@ const initDatatable = (table) => {
           cell.attr('data-label', 'Цена доставки, руб');
           cell.addClass('data-table__body-cell');
         },
-        render: (data) => INPUT(data, 'number', 'delivery', 'Цена доставки, руб'),
+        render: (data) => html.input(data, 'number', 'delivery', 'Цена доставки, руб'),
       },
       {
         targets: 6,
@@ -145,49 +119,49 @@ const initDatatable = (table) => {
           cell.attr('data-label', 'Max грузоподъемность, кг');
           cell.addClass('data-table__body-cell');
         },
-        render: (data) => INPUT(data, 'number', 'load', 'Max грузоподъемность, кг'),
+        render: (data) => html.input(data, 'number', 'load', 'Max грузоподъемность, кг'),
       },
       {
         targets: 7,
-        data: 'load',
+        data: 'product',
         orderable: false,
         title: 'Название товара',
-        name: 'load',
+        name: 'product',
         createdCell: (td) => {
           const cell = $(td);
 
           cell.attr('data-label', 'Название товара');
           cell.addClass('data-table__body-cell');
         },
-        render: (data) => INPUT(data, 'number', 'load', 'Название товара'),
+        render: (data) => html.input(data, 'text', 'product', 'Название товара'),
       },
       {
         targets: 8,
         data: 'total',
         orderable: false,
         title: 'Итого',
-        name: 'load',
+        name: 'total',
         createdCell: (td) => {
           const cell = $(td);
 
           cell.attr('data-label', 'Итого');
           cell.addClass('data-table__body-cell');
         },
-        render: (data) => INPUT(data, 'number', 'load', 'Итого'),
+        render: (data) => html.input(data, 'number', 'total', 'Итого'),
       },
     ],
-    createdRow: (row, data, dataIndex) => $(row).addClass('data-table__body-row'),
+    createdRow: (row) => $(row).addClass('data-table__body-row'),
     dom: 'Bfrtip',
     buttons: [{
       extend: 'collection',
-      text: FILTER_GEAR,
+      text: html.filterGear,
       background: false,
       align: 'button-right',
       className: 'data-table__filter-button filter-button',
       buttons: [
         {
-          popoverTitle: POPOVER_TITLE,
-          text: POPOVER_TEXT,
+          popoverTitle: html.popoverTitle,
+          text: html.popoverText,
           extend: 'colvis',
           background: false,
           align: 'button-right',
@@ -201,17 +175,24 @@ const initDatatable = (table) => {
     },
   });
 
+  // Сброс ширины таблицы и ColResizable
+  const resizeTable = debounce(() => {
+    table.css('width', '100%');
+    dataTable.columns.adjust().draw();
+
+    removeColResizable(table);
+    initColResizable(table);
+  }, 150);
+
   dataTable.on('column-reorder', () => {
     setTimeout(() => {
       removeColResizable(table);
       initColResizable(table);
+      initCustomSelect();
     });
   });
 
-  dataTable.on('column-visibility', () => {
-    removeColResizable(table);
-    setTimeout(() => initColResizable(table));
-  });
+  dataTable.on('column-visibility', () => resizeTable);
 
   // Отображение кнопки удалить
   dataTable.on('click', '.data-table__multipoint-button', (evt) => {
@@ -222,16 +203,20 @@ const initDatatable = (table) => {
   // Создание новой строки в таблице
   $('.new-row-button').on('click', () => onNewRowButtonClick(dataTable));
 
-  // Изменение ширины таблицы в соответствии с viewport
-  const onWindowResize = debounce(() => {
-    table.css('width', '100%');
-    dataTable.columns.adjust().draw();
+  $(window).on('resize', resizeTable);
 
-    removeColResizable(table);
-    initColResizable(table);
-  }, 150);
+  // Отслеживание изменений ячеек таблицы
+  table.on('change', 'select, input', (evt) => {
+    const { target } = evt;
+    const { name, value } = target;
+    const tr = target.closest('tr');
+    const index = dataTable.row(tr).index();
 
-  window.addEventListener('resize', onWindowResize);
+    // Функция для отправки данных на сервер
+    $.post('example.php', { [name]: value, index })
+      .done(() => { })
+      .fail(() => { });
+  });
 };
 
 export { initDatatable };