Skip to content

Commit

Permalink
Add result-table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Teihden
Teihden committed Jul 31, 2023
1 parent 3375344 commit 45c698a
Show file tree
Hide file tree
Showing 10 changed files with 317 additions and 307 deletions.
2 changes: 1 addition & 1 deletion src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
/* eslint-disable no-undef */
import { initDatatable } from './modules/datatables.js';

const myTable = $('#table');
const myTable = $('#table-data');
initDatatable(myTable);
30 changes: 15 additions & 15 deletions src/js/modules/datatables.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import { initColResizable, removeColResizable } from './colresizable.js';
import { createDeleteButton } from './delete-button.js';

const POPOVER_TITLE = `<span class="table__filter-text table__filter-text--main">Отображение столбцов</span>
<svg class="table__filter-breadcrumbs table__filter-breadcrumbs--main"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;
const POPOVER_TITLE = `<span class="table-data__filter-text table-data__filter-text--main">Отображение столбцов</span>
<svg class="table-data__filter-breadcrumbs table-data__filter-breadcrumbs--main"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;

const POPOVER_TEXT = `<span class="table__filter-text">Отображение столбцов</span>
<svg class="table__filter-breadcrumbs"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;
const POPOVER_TEXT = `<span class="table-data__filter-text">Отображение столбцов</span>
<svg class="table-data__filter-breadcrumbs"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;

const MULTIPOINT_BUTTON = `<div class="table__container-cell table__container-cell--multipoint">
<button class="table__multipoint-button" type="button">
<svg class="table__multipoint"><use href="img/icons/sprite.svg#multipoint"></use></svg>
const MULTIPOINT_BUTTON = `<div class="table-data__container-cell table-data__container-cell--multipoint">
<button class="table-data__multipoint-button" type="button">
<svg class="table-data__multipoint"><use href="img/icons/sprite.svg#multipoint"></use></svg>
<span class="visually-hidden">Удалить строку</span></button></div>`;

// const ORDER = (index) => `<div class="table__container-cell">
// <button class="table__drag" type="button">
// <svg class="table__hamburger">
// const ORDER = (index) => `<div class="table-data__container-cell">
// <button class="table-data__drag" type="button">
// <svg class="table-data__hamburger">
// <use href="img/icons/sprite.svg#hamburger"></use></svg>
// <span class="table__body-order">${index}</span></button></div>`;
// <span class="table-data__body-order">${index}</span></button></div>`;

const initDatatable = (table) => {
const dataTable = table.DataTable({
Expand All @@ -30,7 +30,7 @@ const initDatatable = (table) => {
fixedColumnsLeft: 1,
},
rowReorder: {
selector: '.table__drag-button',
selector: '.table-data__drag-button',
dataSrc: 0,
},
columnDefs: [
Expand All @@ -48,10 +48,10 @@ const initDatatable = (table) => {
dom: 'Bfrtip',
buttons: [{
extend: 'collection',
text: '<svg class="table__gear"><use href="img/icons/sprite.svg#gear"/></svg>',
text: '<svg class="table-data__gear"><use href="img/icons/sprite.svg#gear"/></svg>',
background: false,
align: 'button-right',
className: 'table__filter',
className: 'table-data__filter',
buttons: [
{
popoverTitle: POPOVER_TITLE,
Expand All @@ -77,7 +77,7 @@ const initDatatable = (table) => {
setTimeout(() => initColResizable(table));
});

dataTable.on('click', '.table__multipoint-button', (evt) => {
dataTable.on('click', '.table-data__multipoint-button', (evt) => {
evt.preventDefault();
createDeleteButton(evt, dataTable);
});
Expand Down
10 changes: 5 additions & 5 deletions src/js/modules/delete-button.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/* eslint-disable no-undef */
import { handleEscapeKey } from './utils.js';

const DELETE_BUTTON = `<button class="table__delete-button" type="button">
<span class="table__delete-button-text">Удалить</span></button>`;
const DELETE_BUTTON = `<button class="table-data__delete-button" type="button">
<span class="table-data__delete-button-text">Удалить</span></button>`;

const closeDeleteButton = (deleteButton, target) => {
console.log(target);

Check warning on line 8 in src/js/modules/delete-button.js

View workflow job for this annotation

GitHub Actions / build (19.x) 

Unexpected console statement

Check warning on line 8 in src/js/modules/delete-button.js

View workflow job for this annotation

GitHub Actions / build 

Unexpected console statement
deleteButton.fadeTo('fast', 0, () => deleteButton.remove());
target.removeClass('table__multipoint-button--active');
target.removeClass('table-data__multipoint-button--active');
$(document).off();
};

Expand All @@ -25,8 +25,8 @@ const deleteRow = (dataTable, evt) => {
const createDeleteButton = (evt, dataTable) => {
const target = $(evt.currentTarget);

if (!target.next('.table__delete-button').length > 0) {
target.addClass('table__multipoint-button--active');
if (!target.next('.table-data__delete-button').length > 0) {
target.addClass('table-data__multipoint-button--active');

const deleteButton = $(DELETE_BUTTON);
const closeDeleteButtonCallback = () => closeDeleteButton(deleteButton, target);
Expand Down
157 changes: 52 additions & 105 deletions src/pug/includes/table.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,119 +5,66 @@ section.table
use(href="img/icons/sprite.svg#plus")
span.new-row-button__text Добавить строку
.table__container#table-container
table.table__data.nowrap#table
thead.table__head
table.table__data.table-data.nowrap#table-data
thead.table-data__head
tr
th.table__head-cell Номер
th.table__head-cell Действие
th.table__head-cell Наименование единицы
th.table__head-cell Цена
th.table__head-cell Кол-во
th.table__head-cell Цена доставки, руб
th.table__head-cell Max грузоподъемность, кг
th.table__head-cell Название товара
th.table__head-cell Итого
th.table-data__head-cell Номер
th.table-data__head-cell Действие
th.table-data__head-cell Наименование единицы
th.table-data__head-cell Цена
th.table-data__head-cell Кол-во
th.table-data__head-cell Цена доставки, руб
th.table-data__head-cell Max грузоподъемность, кг
th.table-data__head-cell Название товара
th.table-data__head-cell Итого
tbody
tr
td.table__body-cell
.table__container-cell
button.table__drag-button(type="button")
svg.table__drag
td.table-data__body-cell
.table-data__container-cell
button.table-data__drag-button(type="button")
svg.table-data__drag
use(href="img/icons/sprite.svg#hamburger")
span.table__body-order 1
td.table__body-cell.table__body-cell--action(data-label="Действие")
td.table__body-cell(data-label="Наименование единицы")
.table__container-cell
span.table-data__body-order 1
td.table-data__body-cell.table-data__body-cell--action(data-label="Действие")
td.table-data__body-cell(data-label="Наименование единицы")
.table-data__container-cell
select(name="name")
option Мраморный щебень фр. 2-5 мм, 25кг
option Мраморный щебень фр. 2-5 мм, 25кг (белый)
option Мраморный щебень фр. 2-5 мм, 25кг (вайт)
option Мраморный щебень фр. 2-5 мм, 25кг, возврат
option Мраморный щебень фр. 2-5 мм, 1т
td.table__body-cell(data-label="Цена")
//- .table__container-cell
//- button.table__delete-button(type="button")
//- span.table__delete-button-text Удалить
td.table__body-cell(data-label="Кол-во")
.table__container-cell
input(type="text" name="quantity")
td.table__body-cell(data-label="Цена доставки, руб")
.table__container-cell
td.table__body-cell(data-label="Max грузоподъемность, кг")
.table__container-cell
td.table__body-cell(data-label="Название товара")
.table__container-cell
td.table__body-cell(data-label="Итого")
.table__container-cell
tr
td.table__body-cell
.table__container-cell
button.table__drag-button(type="button")
svg.table__drag
use(href="img/icons/sprite.svg#hamburger")
span.table__body-order 2
td.table__body-cell.table__body-cell--action(data-label="Действие")
td.table__body-cell(data-label="Наименование единицы")
.table__container-cell
select(name="name")
option Мраморный щебень фр. 2-5 мм, 25кг
option Мраморный щебень фр. 2-5 мм, 25кг (белый)
option Мраморный щебень фр. 2-5 мм, 25кг (вайт)
option Мраморный щебень фр. 2-5 мм, 25кг, возврат
option Мраморный щебень фр. 2-5 мм, 1т
td.table__body-cell(data-label="Цена")
.table__container-cell
td.table__body-cell(data-label="Кол-во")
.table__container-cell
input(type="text" name="quantity")
td.table__body-cell(data-label="Цена доставки, руб")
.table__container-cell
td.table__body-cell(data-label="Max грузоподъемность, кг")
.table__container-cell
td.table__body-cell(data-label="Название товара")
.table__container-cell
td.table__body-cell(data-label="Итого")
.table__container-cell
tr
td.table__body-cell
.table__container-cell
button.table__drag-button(type="button")
svg.table__drag
use(href="img/icons/sprite.svg#hamburger")
span.table__body-order 3
td.table__body-cell.table__body-cell--action(data-label="Действие")
td.table__body-cell(data-label="Наименование единицы")
.table__container-cell
select(name="name")
option Мраморный щебень фр. 2-5 мм, 25кг
option Мраморный щебень фр. 2-5 мм, 25кг (белый)
option Мраморный щебень фр. 2-5 мм, 25кг (вайт)
option Мраморный щебень фр. 2-5 мм, 25кг, возврат
option Мраморный щебень фр. 2-5 мм, 1т
td.table__body-cell(data-label="Цена")
.table__container-cell
td.table__body-cell(data-label="Кол-во")
.table__container-cell
input(type="text" name="quantity")
td.table__body-cell(data-label="Цена доставки, руб")
.table__container-cell
td.table__body-cell(data-label="Max грузоподъемность, кг")
.table__container-cell
td.table__body-cell(data-label="Название товара")
.table__container-cell
td.table__body-cell(data-label="Итого")
.table__container-cell
td.table-data__body-cell(data-label="Цена")
.table-data__container-cell
input.table-data__input(type="text" name="price" value="1231" placeholder="Цена")
td.table-data__body-cell(data-label="Кол-во")
.table-data__container-cell
input.table-data__input(type="text" name="quantity" value="12" placeholder="Кол-во")
td.table-data__body-cell(data-label="Цена доставки, руб")
.table-data__container-cell
input.table-data__input(type="text" name="delivery" value="1500" placeholder="Цена доставки, руб")
td.table-data__body-cell(data-label="Max грузоподъемность, кг")
.table-data__container-cell
input.table-data__input(type="text" name="load" value="100" placeholder="Max грузоподъемность, кг")
td.table-data__body-cell(data-label="Название товара")
.table-data__container-cell
input.table-data__input(type="text" name="load" value="Мраморный щебень" placeholder="Название товара")
td.table-data__body-cell(data-label="Итого")
.table-data__container-cell
input.table-data__input(type="text" name="load" value="" placeholder="0")

//- tfoot
//- tr
//- th(colspan="8") Сумма:
//- td.table__body-cell 0
//- tr
//- th(colspan="8") Кол-во:
//- td.table__body-cell 0
//- tr
//- th(colspan="8") Общий вес:
//- td.table__body-cell 0
//- tr
//- th(colspan="8") Общая сумма:
//- td.table__body-cell 0
table.table__result.table-result.nowrap#table-result
tbody.table-result__body
tr.table-result__row
th.table-result__head-cell Сумма:
td.table-result__body-cell 152 212 руб
tr.table-result__row
th.table-result__head-cell Кол-во:
td.table-result__body-cell 24 шт
tr.table-result__row
th.table-result__head-cell Общий вес:
td.table-result__body-cell 2 322 кг
tfoot.table-result__footer
tr.table-result__row
th.table-result__head-cell.table-result__head-cell--footer Общая сумма:
td.table-result__body-cell.table-result__body-cell--footer 152 212 руб
Loading

0 comments on commit 45c698a

Please sign in to comment.