Добавляем возможность перемещения строк у стандартной таблицы

А вы тоже страдаете от отсутствия возможности перемещения строк в стандартных таблицах?

В новом видео покажу, как можно добавить такую возможность. А ниже код, используемый в ролике.

Функция инициализации:

Код:

declare const document: any, console: any
//класс таблицы, для которой необходимо добавить возможность переноса строк
const class_for_table = 'table_with_arrow'

async function onInit(): Promise<void> {
    ViewContext.data.form_id = `id-${generateUID()}`

    function generateUID(): string {
        return 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        })
    }
}

Функция по окончанию отрисовки формы:

Код:

//функция по окончания отрисовки
async function endInit(): Promise<void> {
    let form = document.querySelector(`.${ViewContext.data.form_id}`)
    //слушатель на наведение
    form.addEventListener("mouseover", (event: any) => {
        let element = event.target
        if (element.classList.contains('arrow-up') || element.classList.contains('arrow-down')) {
            return
        }
        let parent = hasParentWithTag(element)
        if (parent) {
            // Проверяем, есть ли уже стрелочки
            const up = form.querySelector('.arrow-up')
            const down = form.querySelector('.arrow-down')
            if (up) up.remove()
            if (down) down.remove()
            let index = Number(parent.getAttribute("data-index"))
            if (Context.data.points_of_the_agreement?.length) {
                if (index == 0 || index > Context.data.points_of_the_agreement.length) {
                    return
                }
            } else {
                return
            }
            // Создаем элементы стрелочек
            const upArrow = document.createElement('span');
            upArrow.textContent = '↑'; // Стрелочка вверх
            upArrow.classList.add('arrow-up');
            const downArrow = document.createElement('span');
            downArrow.textContent = '↓'; // Стрелочка вниз
            downArrow.classList.add('arrow-down');
            parent.style.position = 'relative'; // Убедимся, что у родителя задано положение
            //добавляем к стрелочке индекс строки
            upArrow.setAttribute('index', index)
            downArrow.setAttribute('index', index)
            // Добавляем стрелочки в целевой элемент
            parent.appendChild(upArrow);
            parent.appendChild(downArrow);
        }
    })

    //слушатель на клики
    form.addEventListener("click", async (event: any) => {
        if (event.target.classList.contains('arrow-up')) {
            await moveToUp(Number(event.target.getAttribute("index")))
        }
        if (event.target.classList.contains('arrow-down')) {
            await moveToDown(Number(event.target.getAttribute("index")))
        }
    })
}


//проверить что в родителях элемента, на который навели курсором, есть строка таблицы
function hasParentWithTag(element: any) {
    while (element) {
        if (element.tagName.toLowerCase() === 'elma-type-table-full-line' && element.closest(`.${class_for_table}`)) {
            return element;
        }
        element = element.parentElement;
    }
    return undefined
}

Функции по перемещению строк в таблице:

Код:

async function moveToUp(index: number): Promise<void> {
    if (Context.data.points_of_the_agreement?.length) {
        let selected_row = Context.data.points_of_the_agreement[index - 1]
        let new_table = Context.fields.points_of_the_agreement.create();
        for (let i = 0; Context.data.points_of_the_agreement.length - 1 >= i; i++) {
            let row = Context.data.points_of_the_agreement[i];
            if (i == (index - 1)) {
                if (i !== 0) {
                    continue
                } else {
                    return
                }
            }
            let next_row = Context.data.points_of_the_agreement[i + 1];
            if (next_row && (i + 1) == (index - 1)) {
                let new_selected_row = new_table.insert();
                new_selected_row.point = selected_row.point
            }
            let new_row = new_table.insert();
            new_row.point = row.point;
        }
        Context.data.points_of_the_agreement = new_table;
    }
}

async function moveToDown(index: number): Promise<void> {
    if (Context.data.points_of_the_agreement?.length) {
        let selected_row = Context.data.points_of_the_agreement[index - 1]
        let new_table = Context.fields.points_of_the_agreement.create();
        for (let i = 0; Context.data.points_of_the_agreement.length - 1 >= i; i++) {
            let row = Context.data.points_of_the_agreement[i];
            if (i == (index - 1)) {
                if (i == Context.data.points_of_the_agreement.length - 1) {
                    return
                }
                let next_row = Context.data.points_of_the_agreement[i + 1]
                if (next_row) {
                    let new_row = new_table.insert();
                    new_row.point = next_row.point
                    let new_selected_row = new_table.insert();
                    new_selected_row.point = selected_row.point
                    i++
                }
            } else {
                let new_row = new_table.insert();
                new_row.point = row.point;
            }
        }
        Context.data.points_of_the_agreement = new_table;
    }
}

Стили для стрелок:

HTML:

<style>
    .arrow-up {
        position: absolute;
        right: -20px;
        top: 5px;
        font-weight: bold;
        color: blue;
        font-size: 24px;
    }

    .arrow-down {
        position: absolute;
        right: -20px;
        top: 25px;
        font-weight: bold;
        color: red;
        font-size: 24px;
    }
</style>

Еще больше полезной информации в ТГ канале WhatDaELMA365