// модуль с логикой
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();
});
}