// Модуль для работы с модальным окном // импорт компонента Modal из bootstrap import { Modal } from "bootstrap"; import { cntrls, imagePlaceholder } from "./lines-ui"; // поиск модального окна на странице const modal = document.getElementById("items-update"); // если он найден, то создается экземпляр компонента Modal // для программного управления модальным окном const myModal = modal ? new Modal(modal, {}) : null; // поиск тега с заголовком модального кона для его смены const modalTitle = document.getElementById("items-update-title"); // обнуление значений модального окна, т. к. // используется одно окно для всех операций function resetValues() { cntrls.lineId.value = ""; cntrls.productType.value = ""; cntrls.itemsType.value = ""; cntrls.model.value = ""; cntrls.image.value = ""; cntrls.imagePreview.src = imagePlaceholder; cntrls.price.value = parseFloat(0).toFixed(2); cntrls.count.value = 0; cntrls.description.value = ""; cntrls.specific.value = ""; } // функция для показа модального окна // перед показом происходит заполнение формы для редактирования // если объект item не пуст export function showUpdateModal(item) { modalTitle.innerHTML = item === null ? "Добавить" : "Изменить"; console.info(item); if (item) { cntrls.lineId.value = item.id; cntrls.productType.value = item.productId; cntrls.itemsType.value = item.itemsId; cntrls.model.value = item.model; // заполнение превью // Если пользователь выбрал изображение, то оно загружается // в тэг image с id image - preview // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder; cntrls.price.value = item.price; cntrls.count.value = item.count; cntrls.description.value = item.description; cntrls.specific.value = item.specific; } else { resetValues(); } myModal.show(); } // функция для скрытия модального окна export function hideUpdateModal() { resetValues(); // удаление класса was-validated для скрытия результатов валидации cntrls.form.classList.remove("was-validated"); myModal.hide(); }