'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ceb0d0a9.js');
const api = require('./api-54551431.js');
const serializeForm = require('./serializeForm-71d4d470.js');
const waitForHydrated = require('./waitForHydrated-11e4f06c.js');
const debounce = require('./debounce-95bef581.js');
require('./_commonjsHelpers-bcc1208a.js');
const row = ({ number, name, eCatalogAvailable, location, isFav, toggleFavUrl, inputName, }) => {
return `
${eCatalogAvailable
? ``
: ``} |
|
${name} |
${number} |
${location} |
`;
};
let DataControllerRequestECatalog = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** endpoint where data can be requested */
this.url = "";
/** Preselected machine to display on top */
this.preselectedMachines = "";
/** CSS-style selector for the filter */
this.filterSelector = "";
/** CSS-style selector for the table */
this.tableSelector = "";
/** selector of the form element */
this.formSelector = "";
/** CSS-style selector for the scroll-sensor */
this.scrollSensorSelector = "";
/** the input name to be given to the hidden inputs added to the form */
this.inputName = "machine";
/** keeps track of whether the submit button should be disabled (no selcted machines) */
this.submitButtonDisabled = false;
/** the form element */
this.form = null;
/** element that contains all filters */
this.filter = null;
/** form element for filter */
this.filterForm = null;
/** table element */
this.table = null;
/** table body element where the data should be put */
this.tableBody = null;
/** URL for getting the next page */
this.nextPage = "";
/** DOM element where all the tiles should be put */
this.scrollSensor = null;
this.onTableBodyChange = () => {
const formHiddenInputs = Array.from(this.form.querySelectorAll("input")).map((input) => {
return input.value;
});
this.tableBody.querySelectorAll("tr").forEach((row) => {
const rowCheckbox = row.querySelector("ux-checkbox");
const value = rowCheckbox.value;
if (formHiddenInputs.includes(value))
rowCheckbox.checked = true;
});
};
this.contentObserver = new MutationObserver(debounce.debounce(() => this.onTableBodyChange(), 100));
this.addHiddenInputToForm = (value) => {
if (this.form === null)
return;
if (this.form.querySelector(`input[value="${value}"]`) !== null)
return;
const newInput = document.createElement("input");
newInput.setAttribute("type", "hidden");
newInput.setAttribute("name", this.inputName);
newInput.setAttribute("value", value);
this.form.appendChild(newInput);
};
this.removeHiddenInputFromForm = (value) => {
if (this.form === null)
return;
this.form.querySelector(`input[value="${value}"]`).remove();
};
}
componentDidLoad() {
this.setForm();
this.setFilter();
this.setTable();
this.setScrollSensor();
this.checkFormEmptyState();
this.requestData(this.url);
this.contentObserver.observe(this.tableBody, {
childList: true,
});
}
checkFormEmptyState() {
if (!this.form.querySelector("input"))
this.submitButtonDisabled = true;
else
this.submitButtonDisabled = false;
}
handleSubmitButtonState() {
if (this.submitButtonDisabled === true) {
this.element
.closest("ux-modal")
.querySelectorAll(`button[type="submit"]`)
.forEach((button) => button.classList.add("ux-button--disabled"));
}
else {
this.element
.closest("ux-modal")
.querySelectorAll(`button[type="submit"]`)
.forEach((button) => button.classList.remove("ux-button--disabled"));
}
}
setFormElements(e) {
if (e.detail.checked === true && e.detail.inputName === this.inputName)
this.addHiddenInputToForm(e.detail.value);
else if (e.detail.checked === false)
this.removeHiddenInputFromForm(e.detail.value);
this.checkFormEmptyState();
}
/** connect form */
setForm() {
if (this.formSelector === "")
return;
this.form = this.element.parentElement.querySelector(this.formSelector);
}
/** connect filter */
setFilter() {
if (this.filterSelector === "")
return;
this.filter = this.element.querySelector(this.filterSelector);
waitForHydrated.waitForHydrated(this.filter, () => this.setFilterForm());
this.filter.addEventListener("uxFilterChange", () => this.requestData(this.url));
}
setFilterForm() {
var _a;
this.filterForm = this.filter.querySelector("form");
(_a = this.filterForm) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", (e) => e.preventDefault());
}
/** connect table */
setTable() {
var _a;
if (this.tableSelector === "")
return;
this.table = this.element.querySelector(this.tableSelector);
this.tableBody = (_a = this.table) === null || _a === void 0 ? void 0 : _a.querySelector("tbody");
}
/** connect scroll-sensor */
setScrollSensor() {
if (this.scrollSensorSelector === "")
return;
this.scrollSensor = this.element.querySelector(this.scrollSensorSelector);
if (this.scrollSensor !== null) {
this.scrollSensor.addEventListener("uxInfiniteScrollSensorScrolledIntoView", () => {
this.requestData(this.nextPage);
});
}
}
/** post filter and sort settings to get data from the endpoint */
initialRequest() {
this.requestData(this.url);
}
/** Send the real request and handle response */
async requestData(url) {
if (url === "")
return;
const options = isMockUrl(url)
? {}
: {
method: "POST",
body: serializeForm.serializeForm(this.filterForm),
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
};
this.showLoadingSpinner();
// check for parameters in url and append preselectedMachines
if (this.preselectedMachines != "")
url = url.includes("?")
? `${url}&preselectedMachines=${this.preselectedMachines}`
: `${url}?preselectedMachines=${this.preselectedMachines}`;
try {
const data = await api.api(url, options);
// simulating call time in dev environment
if (isMockUrl(url))
await new Promise((resolve) => setTimeout(resolve, 1000));
if (this.url === url)
this.clearExistingData();
if (data) {
if (data.items.length > 0) {
this.appendItemsToTable(data.items);
}
this.nextPage = data.nextPage || "";
if (this.nextPage !== "" && this.scrollSensor !== null) {
this.scrollSensor.hasFired = false;
}
}
}
catch (e) {
console.log(e);
}
this.hideLoadingSpinner();
}
showLoadingSpinner() {
const modalSpinner = document.createElement("ux-spinner-overlay");
this.element.parentElement.append(modalSpinner);
modalSpinner.opened = true;
}
hideLoadingSpinner() {
const spinnerInModal = this.element.parentElement.querySelector("ux-spinner-overlay");
if (spinnerInModal)
spinnerInModal.remove();
}
clearExistingData() {
if (this.tableBody !== null)
this.tableBody.textContent = "";
}
appendItemsToTable(items) {
if (this.tableBody === null)
return;
const rowItems = items.map((item) => (Object.assign(Object.assign({}, item), { inputName: this.inputName })));
this.tableBody.insertAdjacentHTML("beforeend", rowItems.map(row).join(""));
}
render() {
return (index.h(index.Host, null, index.h("slot", null)));
}
get element() { return index.getElement(this); }
static get watchers() { return {
"submitButtonDisabled": ["handleSubmitButtonState"],
"formSelector": ["setForm"],
"filterSelector": ["setFilter"],
"tableSelector": ["setTable"],
"scrollSensorSelector": ["setScrollSensor"],
"url": ["initialRequest"]
}; }
};
function isMockUrl(url) {
return url.indexOf("mock-data/") > -1;
}
exports.ux_iws_data_controller_request_e_catalog = DataControllerRequestECatalog;