Internet_Programmirovanie_Yunusov_Niyaz_PIbd-23/ЛР 3/js/linesUsers.js

// модуль с логикой
import { hideUpdateModal, showUpdateModal } from "./lines-modal";
import {
    getAllItemTypes, getAllLines,
} from "./lines-rest-api";
import {
    cntrls, createItemsOption, createTableRowUser,
} 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(
            createTableRowUser(
                item,
                index,
            ),
        );
    });
}

// функция для получения содержимого файла в виде base64 строки
// https://ru.wikipedia.org/wiki/Base64
async function readFile(file) {
    const reader = new FileReader();

    // создание Promise-объекта для использования функции
    // с помощью await (асинхронно) без коллбэков (callback)
    // https://learn.javascript.ru/promise
    return new Promise((resolve, reject) => {
        // 2. "Возвращаем" содержимое когда файл прочитан
        // через вызов resolve
        // Если не использовать Promise, то всю работу по взаимодействию
        // с REST API пришлось бы делать в обработчике (callback) функции
        // onloadend
        reader.onloadend = () => {
            const fileContent = reader.result;
            // Здесь могла бы быть работа с REST API
            // Чтение заканчивает выполняться здесь
            resolve(fileContent);
        };
        // 3. Возвращаем ошибку
        reader.onerror = () => {
            // Или здесь в случае ошибки
            reject(new Error("oops, something went wrong with the file reader."));
        };
        // Шаг 1. Сначала читаем файл
        // Чтение начинает выполняться здесь
        reader.readAsDataURL(file);
    });
}

// функция для обновления блока с превью выбранного изображения
async function updateImagePreview() {
    // получение выбранного файла
    // возможен выбор нескольких файлов, поэтому необходимо получить только первый
    const file = cntrls.image.files[0];
    // чтение содержимого файла в виде base64 строки
    const fileContent = await readFile(file);
    console.info("base64 ", fileContent);
    // обновление атрибута src для тега img с id image-preview
    cntrls.imagePreview.src = fileContent;
}

// Функция для обработки создания и редактирования элементов таблицы через модальное окно
// Если хотите делать через страницу, то удалите эту функцию
// eslint-disable-next-line import/prefer-default-export
export function linesForm() {
    console.info("linesForm");

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

    // Вызов функции обновления превью изображения при возникновении
    // события oncahnge в тэге input с id image
    cntrls.image.addEventListener("change", () => updateImagePreview());

    //  обработчик события нажатия на кнопку для показа модального окна
    cntrls.button.addEventListener("click", () => showUpdateModal(null));

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

        // если значение id не задано,
        // то необходимо выполнить добавление записи
        // иначе обновление записи
        // после выполнения добавления/обновления модальное окно скрывается
        hideUpdateModal();
    });
}