IP/2_lab/testBootstrap_main/js/lines.js

// модуль с логикой


import {
    createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
} from "./lines-rest-api";
import { cntrls, createItemsOption, createTableRow } from "./lines-ui";

async function drawItemsSelect() {
    // вызов метода REST API для получения списка типов товаров
    const data = await getAllItemTypes();
    // очистка содержимого select
    // удаляется все, что находится между тегами <select></select>
    // но не атрибуты
    cntrls.itemsType.innerHTML = "";
    // пустое значение
    cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
    // цикл по результату ответа от сервера
    // используется лямбда-выражение
    // (item) => {} аналогично function(item) {}
    data.forEach((item) => {
        cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
    });
}

async function drawLinesTable() {
    console.info("Try to load data");
    if (!cntrls.table) {
        return;
    }
    
    // вызов метода REST API для получения всех записей
    const data = await getAllLines();
    
    // очистка содержимого table
    // удаляется все, что находится между тегами <table></table>
    // но не атрибуты
    cntrls.table.innerHTML = "";
    
    // цикл по результату ответа от сервера
    // используется лямбда-выражение
    // (item, index) => {} аналогично function(item, index) {}
    data.forEach((item, index) => {
         cntrls.table.appendChild(
            createTableRow(
                item,
                index,    
                () => removeLine(item.id),     
            )
        );
    });
}

async function addLine(item) {
    console.info("Try to add item");
    // вызов метода REST API для добавления записи
    await createLine(item);
    console.info("Added");
    
    
    // загрузка и заполнение table
    drawLinesTable();
}

async function editLine(id, item) {
    console.info("Try to update item");
    // вызов метода REST API для обновления записи
    await updateLine(id, item);
    console.info("Updated");
    
    // загрузка и заполнение table
    drawLinesTable();
}

async function removeLine(id) {
    if (!confirm("Do you really want to remove this item?")) {
        console.info("Canceled");
        return;
    }
    console.info("Try to remove item");
    // вызов метода REST API для удаления записи
    const data = await deleteLine(id);
    console.log(data);
    // загрузка и заполнение table
    drawLinesTable();
}


export function linesForm() {
    console.info("linesForm");
    

    drawLinesTable();

    cntrls.form.addEventListener("submit", async (event) => {
       
        console.info("Form onSubmit");
        
          
        event.preventDefault();      
        event.stopPropagation();
        if (!cntrls.form.checkValidity()) {
            console.info("not enough data");
            return;
        }
        
        const currentId = cntrls.id.value;
        
        if (!currentId) {           
            await addLine(
                
                cntrls
               
            );
        } else {
            
            console.log("edit")
            await editLine(
                
                currentId,
                cntrls
                
            );
        }

        // после выполнения добавления/обновления модальное окно скрывается
        
    });
}

export async function linesPageForm() {
    console.info("linesPageForm");

    // загрузка и заполнение select со списком товаров
    drawItemsSelect();

    // func1 = (id) => {} аналогично function func1(id) {}
    const goBack = () => location.assign("/page4.html");

    // получение параметров GET-запроса из URL
    // параметры перечислены после символа ? (?id=1&color=black&...)
    const urlParams = new URLSearchParams(location.search);
    // получение значения конкретного параметра (id)
    // указан только при редактировании
    const currentId = urlParams.get("id");
    // если id задан
    if (currentId) {
        try {
            // вызов метода REST API для получения записи по первичному ключу(id)
            const line = await getLine(currentId);
            // заполнение формы для редактирования
            cntrls.itemsType.value = line.itemsId;
            cntrls.price.value = line.price;
            cntrls.count.value = line.count;
        } catch {
            // в случае ошибки происходит возврат к page4
            goBack();
        }
    }

    // обработчик события отправки формы
    // возникает при нажатии на кнопку (button) с типом submit
    // кнопка должна находится внутри тега form
    cntrls.form.addEventListener("submit", async (event) => {
        console.info("Form onSubmit");
        // отключение стандартного поведения формы при отправке
        // при отправке страница обновляется и JS перестает работать
        event.preventDefault();
        event.stopPropagation();
        // если форма не прошла валидацию, то ничего делать не нужно
        if (!cntrls.form.checkValidity()) {
            return;
        }

        // если значение параметра запроса не задано,
        // то необходимо выполнить добавление записи
        // иначе обновление записи
        if (!currentId) {
            await addLine(
                cntrls.itemsType.value,
                cntrls.price.value,
                cntrls.count.value,
            );
        } else {
            await editLine(
                currentId,
                cntrls.itemsType.value,
                cntrls.price.value,
                cntrls.count.value,
            );
        }
        // возврат к странице page4
        goBack();
    });
}