// модуль с логикой 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 // удаляется все, что находится между тегами // но не атрибуты 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 // удаляется все, что находится между тегами
// но не атрибуты 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(); }); }