'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-da8257e2.js');
const api = require('./api-54551431.js');
const serializeForm = require('./serializeForm-71d4d470.js');
require('./_commonjsHelpers-bcc1208a.js');
const row = ({ orderNumber, status, date, entryPoint, position, orderSum, machineNumber, detailLink, }) => {
return `
${orderNumber}
|
${renderProductionStatusLabel(status.text, status.type)}
|
${date} |
${entryPoint} |
${position} |
${orderSum} |
${machineNumber} |
|
`;
};
const renderProductionStatusLabel = (labelText, type) => {
return `${labelText}`;
};
const dataControllerMyOrdersCss = ".my-orders-overview__result-set{position:relative}@media (min-width: 1440px){.my-orders-overview__result-set{text-align:center}}@media (max-width: 1439px){.my-orders-overview__result-set{text-align:left}}@media (max-width: 567px){.my-orders-overview__table-container.my-orders-overview__table-container{padding-top:10px !important}}.my-orders-overview .ux-text-status .ux-icon{font-size:18px;-webkit-transform:translateY(2px);transform:translateY(2px)}.my-orders-overview .ux-text-status .ux-icon+.ux-icon{display:none}.my-orders-overview .ux-table table{width:100%}.my-orders-overview .ux-table th{max-width:none !important}.my-orders-overview .ux-table tr>td:first-child{font-family:\"Frutiger-Light\", sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-weight:400}.my-orders-overview__filter-container .row+.row{margin-top:30px}@media (min-width: 1025px){.my-orders-overview .filter-flex{display:-ms-flexbox;display:flex}.my-orders-overview .filter-flex>div+div{margin-left:20px}}.my-orders-overview .filter-flex>div{width:100%;margin-bottom:10px}@media (min-width: 1025px){.my-orders-overview .filter-flex>div{width:20%}}.my-orders-overview .filter-flex .ux-dropdown__label .ux-icon{margin-left:20px;-webkit-transform:translateY(-1px);transform:translateY(-1px)}";
let DataControllerMyOrders = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** endpoint where data can be requested */
this.url = "";
/** CSS-style selector for the scroll-sensor */
this.scrollSensorSelector = "";
/** CSS-style selector for the table */
this.tableSelector = "";
/** CSS-style selector for the date form */
this.dateSelector = "";
/** CSS-style selector for the filter */
this.filterSelector = "";
/** CSS-style selector for the element where the total number of machines should be placed */
this.totalNumberSelector = "";
/** CSS-style selector for the element where the number of filtered machines should be placed */
this.filteredNumberSelector = "";
/** element that contains all filters */
this.filter = null;
// /** URL for getting the next page */
this.nextPage = "";
/** table element */
this.table = null;
/** table body element where the data should be put */
this.tableBody = null;
/** form element for filter */
this.filterForm = null;
/** form element for filter */
this.dateForm = null;
/** DOM element where all the tiles should be put */
this.scrollSensor = null;
/** NodeList of DOM elements where the number of filtered machines should be put */
this.filteredNumberElements = null;
/** NodeList of DOM elements where the total number of machines should be put */
this.totalNumberElements = null;
}
componentDidLoad() {
this.setFilteredNumberElements();
this.setTable();
this.setTotalNumberElements();
this.requestData(this.url, true);
this.setScrollSensor();
this.setDateFilter();
}
setDateFilter() {
this.dateForm = document.querySelector(this.dateSelector);
const picker = this.dateForm.querySelector("ux-date-range-picker");
if (picker !== null) {
picker.addEventListener("uxDateRangeChange", () => {
this.requestData(this.url, true);
});
}
}
updateNumbers(total) {
writeToElements(this.totalNumberElements, total.toString());
}
setFilterForm() {
setTimeout(() => {
this.filterForm = this.filter.querySelector("form");
this.filterForm
.querySelector(".ux-tag-list")
.removeEventListener("click", () => { });
this.filter
.querySelector("ux-filter")
.addEventListener("change", () => {
this.requestData(this.url, true);
});
this.filterForm
.querySelector(".ux-tag-list")
.addEventListener("click", () => {
setTimeout(() => {
this.requestData(this.url, true);
}, 200);
});
}, 100);
}
/** connect filter */
setFilter(html) {
if (this.filterSelector === "")
return;
this.filter = document.querySelector(this.filterSelector);
if (this.filter === null)
return;
this.filter.innerHTML = html;
this.setFilterForm();
}
/** connect table */
setTable() {
if (this.tableSelector === "")
return;
this.table = document.querySelector(this.tableSelector);
this.tableBody = this.table.querySelector("tbody");
}
/** connect filtered number */
setFilteredNumberElements() {
if (this.filteredNumberSelector === "")
return;
this.filteredNumberElements = document.querySelectorAll(this.filteredNumberSelector);
}
/** connect total number */
setTotalNumberElements() {
if (this.totalNumberSelector === "")
return;
this.totalNumberElements = document.querySelectorAll(this.totalNumberSelector);
}
appendItemsToTable(items) {
if (this.tableBody === null)
return;
this.tableBody.insertAdjacentHTML("beforeend", items.map(row).join(""));
let numItems = this.tableBody.querySelectorAll("tbody tr").length;
writeToElements(this.filteredNumberElements, numItems.toString());
}
// private createTableRow(item: string) {}
/** connect scroll-sensor */
setScrollSensor() {
if (this.scrollSensorSelector === "")
return;
this.scrollSensor = document.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, true);
}
clearExistingData() {
if (this.tableBody !== null)
this.tableBody.textContent = "";
}
/** Send the real request and handle response */
requestData(url, clear = false) {
if (url === "")
return;
if (clear)
this.clearExistingData();
setTimeout(() => {
const options = isMockUrl(url)
? {}
: {
method: "POST",
body: serializeForm.serializeForm(this.dateForm) +
(this.filterForm
? "&" + serializeForm.serializeForm(this.filterForm)
: ""),
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
};
api.api(url, options).then((data) => {
this.setFilter(data.filterHTML);
this.appendItemsToTable(data.items);
this.nextPage = data.nextPage;
this.updateNumbers(data.totalCount);
if (this.nextPage !== "" && this.scrollSensor !== null) {
this.scrollSensor.hasFired = false;
}
});
}, 400);
}
render() {
return null;
}
static get watchers() { return {
"filterSelector": ["setFilter"],
"tableSelector": ["setTable"],
"filteredNumberSelector": ["setFilteredNumberElements"],
"totalNumberSelector": ["setTotalNumberElements"],
"scrollSensorSelector": ["setScrollSensor"],
"url": ["initialRequest"]
}; }
};
function writeToElements(nodes, text) {
if (nodes === null)
return;
[].forEach.call(nodes, (element) => (element.textContent = text));
}
function isMockUrl(url) {
return url.indexOf("mock-data/") > -1;
}
DataControllerMyOrders.style = dataControllerMyOrdersCss;
exports.ux_iws_data_controller_my_orders = DataControllerMyOrders;