Skip to content

Commit

Permalink
Add rowReorder styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Teihden
Teihden committed Jul 31, 2023
1 parent 45c698a commit 4025b5a
Show file tree
Hide file tree
Showing 8 changed files with 148 additions and 121 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-data');
const myTable = $('#data-table');
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-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_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 POPOVER_TEXT = `<span class="table-data__filter-text">Отображение столбцов</span>
<svg class="table-data__filter-breadcrumbs"><use href="img/icons/sprite.svg#breadcrumbs"/></svg>`;
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 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>
const MULTIPOINT_BUTTON = `<div class="data-table__container-cell data-table__container-cell--multipoint">
<button class="data-table__multipoint-button" type="button">
<svg class="data-table__multipoint"><use href="img/icons/sprite.svg#multipoint"></use></svg>
<span class="visually-hidden">Удалить строку</span></button></div>`;

// const ORDER = (index) => `<div class="table-data__container-cell">
// <button class="table-data__drag" type="button">
// <svg class="table-data__hamburger">
// const ORDER = (index) => `<div class="data-table__container-cell">
// <button class="data-table__drag" type="button">
// <svg class="data-table__hamburger">
// <use href="img/icons/sprite.svg#hamburger"></use></svg>
// <span class="table-data__body-order">${index}</span></button></div>`;
// <span class="data-table__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-data__drag-button',
selector: '.data-table__drag-button',
dataSrc: 0,
},
columnDefs: [
Expand All @@ -48,10 +48,10 @@ const initDatatable = (table) => {
dom: 'Bfrtip',
buttons: [{
extend: 'collection',
text: '<svg class="table-data__gear"><use href="img/icons/sprite.svg#gear"/></svg>',
text: '<svg class="data-table__gear"><use href="img/icons/sprite.svg#gear"/></svg>',
background: false,
align: 'button-right',
className: 'table-data__filter',
className: 'data-table__filter',
buttons: [
{
popoverTitle: POPOVER_TITLE,
Expand All @@ -77,7 +77,7 @@ const initDatatable = (table) => {
setTimeout(() => initColResizable(table));
});

dataTable.on('click', '.table-data__multipoint-button', (evt) => {
dataTable.on('click', '.data-table__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-data__delete-button" type="button">
<span class="table-data__delete-button-text">Удалить</span></button>`;
const DELETE_BUTTON = `<button class="data-table__delete-button" type="button">
<span class="data-table__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-data__multipoint-button--active');
target.removeClass('data-table__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-data__delete-button').length > 0) {
target.addClass('table-data__multipoint-button--active');
if (!target.next('.data-table__delete-button').length > 0) {
target.addClass('data-table__multipoint-button--active');

const deleteButton = $(DELETE_BUTTON);
const closeDeleteButtonCallback = () => closeDeleteButton(deleteButton, target);
Expand Down
104 changes: 52 additions & 52 deletions src/pug/includes/table.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,66 @@ section.table
use(href="img/icons/sprite.svg#plus")
span.new-row-button__text Добавить строку
.table__container#table-container
table.table__data.table-data.nowrap#table-data
thead.table-data__head
table.table__data.data-table.nowrap#data-table
thead.data-table__head
tr
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 Итого
th.data-table__head-cell Номер
th.data-table__head-cell Действие
th.data-table__head-cell Наименование единицы
th.data-table__head-cell Цена
th.data-table__head-cell Кол-во
th.data-table__head-cell Цена доставки, руб
th.data-table__head-cell Max грузоподъемность, кг
th.data-table__head-cell Название товара
th.data-table__head-cell Итого
tbody
tr
td.table-data__body-cell
.table-data__container-cell
button.table-data__drag-button(type="button")
svg.table-data__drag
td.data-table__body-cell
.data-table__container-cell
button.data-table__drag-button(type="button")
svg.data-table__drag
use(href="img/icons/sprite.svg#hamburger")
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
span.data-table__body-order 1
td.data-table__body-cell.data-table__body-cell--action(data-label="Действие")
td.data-table__body-cell(data-label="Наименование единицы")
.data-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-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")
td.data-table__body-cell(data-label="Цена")
.data-table__container-cell
input.data-table__input(type="text" name="price" value="1231" placeholder="Цена")
td.data-table__body-cell(data-label="Кол-во")
.data-table__container-cell
input.data-table__input(type="text" name="quantity" value="12" placeholder="Кол-во")
td.data-table__body-cell(data-label="Цена доставки, руб")
.data-table__container-cell
input.data-table__input(type="text" name="delivery" value="1500" placeholder="Цена доставки, руб")
td.data-table__body-cell(data-label="Max грузоподъемность, кг")
.data-table__container-cell
input.data-table__input(type="text" name="load" value="100" placeholder="Max грузоподъемность, кг")
td.data-table__body-cell(data-label="Название товара")
.data-table__container-cell
input.data-table__input(type="text" name="load" value="Мраморный щебень" placeholder="Название товара")
td.data-table__body-cell(data-label="Итого")
.data-table__container-cell
input.data-table__input(type="text" name="load" value="" placeholder="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 руб
table.table__result.result-table.nowrap#result-table
tbody.result-table__body
tr.result-table__row
th.result-table__head-cell Сумма:
td.result-table__body-cell 152 212 руб
tr.result-table__row
th.result-table__head-cell Кол-во:
td.result-table__body-cell 24 шт
tr.result-table__row
th.result-table__head-cell Общий вес:
td.result-table__body-cell 2 322 кг
tfoot.result-table__footer
tr.result-table__row
th.result-table__head-cell.result-table__head-cell--footer Общая сумма:
td.result-table__body-cell.result-table__body-cell--footer 152 212 руб
36 changes: 18 additions & 18 deletions src/scss/blocks/_table-data.scss → src/scss/blocks/_data-table.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.table-data__data {
.data-table__data {
width: 100%;
max-width: 100%;
white-space: nowrap;
}

.table-data__head-cell {
.data-table__head-cell {
border: 1px solid var(--light-gray) !important;
font-weight: 600;
padding: 14px 8px !important;
Expand All @@ -15,7 +15,7 @@
text-overflow: clip;
}

.table-data__body-cell {
.data-table__body-cell {
padding: 8px 15px !important;

overflow: hidden;
Expand All @@ -26,51 +26,51 @@
}
}

.table-data__container-cell {
.data-table__container-cell {
margin: 5px 14px 3px;

&--multipoint {
position: relative;
}
}

.table-data__body-order {
.data-table__body-order {
font-size: 16px;
margin: 0 0 0 6px;
}

.table-data__drag {
.data-table__drag {
width: 11px;
height: 12px;
}

.table-data__drag-button {
.data-table__drag-button {
@include default-button;
cursor: grab;
transition: opacity 0.2s ease-in-out;
display: flex;
align-items: center;

&:hover {
.table-data__drag {
.data-table__drag {
opacity: 0.8;
}
}

&:focus {
.table-data__drag {
.data-table__drag {
opacity: 0.8;
}
}

&:active {
.table-data__drag {
.data-table__drag {
opacity: 0.6;
}
}
}

.table-data__gear {
.data-table__gear {
width: 15px;
height: 15px;
fill: var(--grayish-blue);
Expand All @@ -89,7 +89,7 @@
}
}

.table-data__filter-text {
.data-table__filter-text {
font-size: 14px;
color: var(--dark);
line-height: 15px;
Expand All @@ -100,7 +100,7 @@
}
}

.table-data__filter-breadcrumbs {
.data-table__filter-breadcrumbs {
width: 5px;
height: 10px;
margin: 0 0 0 9px;
Expand All @@ -111,14 +111,14 @@
}
}

.table-data__multipoint {
.data-table__multipoint {
width: 3px;
height: 13px;
fill: var(--grayish-blue);
vertical-align: middle;
}

.table-data__multipoint-button {
.data-table__multipoint-button {
@include default-button;
position: relative;
transition: opacity 0.2s ease-in-out;
Expand All @@ -128,7 +128,7 @@
text-align: left;

&--active {
.table-data__multipoint {
.data-table__multipoint {
fill: var(--light-navy);
}
}
Expand All @@ -146,7 +146,7 @@
}
}

.table-data__delete-button {
.data-table__delete-button {
@include default-button;
position: absolute;
top: 20px;
Expand All @@ -173,7 +173,7 @@
}
}

.table-data__delete-button-text {
.data-table__delete-button-text {
font-family: inherit;
font-size: 14px;
color: var(--red);
Expand Down
Loading

0 comments on commit 4025b5a

Please sign in to comment.