import { r as registerInstance } from './index-3d16dafa.js';
import { a as api } from './api-0c31171f.js';
import { s as serializeForm } from './serializeForm-a39bb4a7.js';
import { w as waitForHydrated } from './waitForHydrated-24c52eea.js';
import './_commonjsHelpers-5e4b1d1a.js';
var OrderReturnStatusTypes;
(function (OrderReturnStatusTypes) {
OrderReturnStatusTypes["OPEN"] = "open";
OrderReturnStatusTypes["CANCELED"] = "canceled";
OrderReturnStatusTypes["IN_PROCESS"] = "in_process";
OrderReturnStatusTypes["PARTIALLY_COMPLETED"] = "partially_completed";
OrderReturnStatusTypes["COMPLETED"] = "completed";
})(OrderReturnStatusTypes || (OrderReturnStatusTypes = {}));
function resolveStatusColor(type) {
switch (type) {
case OrderReturnStatusTypes.OPEN:
return "grey";
case OrderReturnStatusTypes.CANCELED:
return "red";
case OrderReturnStatusTypes.IN_PROCESS:
return "dark-blue";
case OrderReturnStatusTypes.PARTIALLY_COMPLETED:
return "orange";
case OrderReturnStatusTypes.COMPLETED:
return "green";
default:
return "grey";
}
}
const getStatusText = ({ type, text }) => {
const statusColor = resolveStatusColor(type);
return `${text}`;
};
const row = ({ returnNumber, status, createdAt, createdBy, positions, detailLink, }) => {
const statusText = getStatusText(status);
return `
${returnNumber} |
${statusText} |
${createdAt} |
${createdBy} |
${positions} |
|
`;
};
const dataControllerOrderReturnCss = ".order-return-overview__filter-container::before,.order-return-overview__filter-container::after{content:\" \";display:table}.order-return-overview__filter-container::after{clear:both}.order-return-overview__filter-container .ux-tag{background-color:#285172}.order-return-overview__filter-container .datepicker-range{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.order-return-overview__filter-container .datepicker-range__divider{-ms-flex:0 0 20px;flex:0 0 20px}.order-return-overview__filter-container .datepicker{-ms-flex:1 1 auto;flex:1 1 auto}.order-return-overview__filter-dropdown{min-width:250px;max-width:300px;position:relative;display:inline-block;margin-right:18px;margin-bottom:20px}.order-return-overview__result-set.result-set{margin-top:0;position:relative;text-align:center}.order-return-overview__table-container .ux-text-status{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.order-return-overview__table-container .ux-text-status::before{content:\"\";display:inline-block;background-color:currentColor;width:0.8em;height:0.8em;border-radius:100%;margin-right:0.8em}.order-return-overview .ux-collapsible-button__container{padding:15px;text-align:center}";
let DataControllerOrderReturn = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** endpoint where data can be requested */
this.url = "";
/** CSS selector for the filter */
this.filterSelector = "";
/** CSS selector for the date form */
this.dateFormSelector = "";
/** CSS selector for the sort form */
this.sortFormSelector = "";
/** CSS selector for the table */
this.tableSelector = "";
/** CSS selector for the element where the total number of order returns should be placed */
this.totalNumberSelector = "";
/** CSS selector for the element where the number of filtered order returns should be placed */
this.filteredNumberSelector = "";
/** CSS selector for the scroll-sensor */
this.scrollSensorSelector = "";
/** element that contains all filters */
this.filter = null;
/** form element for filter */
this.filterForm = null;
/** form element for date range */
this.dateForm = null;
/** form element for sorting */
this.sortForm = null;
/** table element */
this.table = null;
/** table body element where the data should be put */
this.tableBody = null;
/** NodeList of DOM elements where the number of filtered order returns should be put */
this.filteredNumberElements = null;
/** NodeList of DOM elements where the total number of order returns should be put */
this.totalNumberElements = null;
/** URL for getting the next page */
this.nextPage = "";
/** DOM element where all the table rows should be put */
this.scrollSensor = null;
}
componentDidLoad() {
this.setDateForm();
this.setSortForm();
this.setFilter();
this.setTable();
this.setScrollSensor();
this.setTotalNumberElements();
this.setFilteredNumberElements();
this.requestData(this.url);
}
/** Connect date form */
setDateForm() {
if (this.dateFormSelector === "")
return;
this.dateForm = document.querySelector(this.dateFormSelector);
if (this.dateForm === null)
return;
this.dateForm.addEventListener("submit", (e) => e.preventDefault());
}
/** Connect filter */
setFilter() {
if (this.filterSelector === "")
return;
this.filter = document.querySelector(this.filterSelector);
waitForHydrated(this.filter, () => this.setFilterForm());
this.filter.addEventListener("uxFilterChange", () => this.requestData(this.url));
}
/** Connect sort form */
setSortForm() {
if (this.sortFormSelector === "")
return;
this.sortForm = document.querySelector(this.sortFormSelector);
if (this.sortForm === null)
return;
this.sortForm.addEventListener("submit", preventDefaultEvent);
}
/** Connect total number */
setTotalNumberElements() {
if (this.totalNumberSelector === "")
return;
this.totalNumberElements = document.querySelectorAll(this.totalNumberSelector);
}
/** Connect filtered number */
setFilteredNumberElements() {
if (this.filteredNumberSelector === "")
return;
this.filteredNumberElements = document.querySelectorAll(this.filteredNumberSelector);
}
setFilterForm() {
this.filterForm = this.filter.querySelector("form");
if (this.filterForm === null)
return;
this.filterForm.addEventListener("submit", preventDefaultEvent);
}
syncSortStateToTable() {
if (this.table === null || this.sortForm === null)
return;
const { value } = this.sortForm.querySelector("input");
const prevSorted = this.table.querySelector(`ux-table-sort[sorted-direction="desc"], ux-table-sort[sorted-direction="asc"]`);
if (prevSorted !== null) {
prevSorted.sortedDirection = "";
}
const ascSort = this.table.querySelector(`ux-table-sort[asc-name="${value}"]`);
const descSort = this.table.querySelector(`ux-table-sort[desc-name="${value}"]`);
if (ascSort !== null) {
ascSort.sortedDirection = "asc";
}
if (descSort !== null) {
descSort.sortedDirection = "desc";
}
}
updateNumbers(filtered, total) {
writeToElements(this.filteredNumberElements, filtered.toString());
writeToElements(this.totalNumberElements, total.toString());
}
/** connect table */
setTable() {
var _a;
if (this.tableSelector === "")
return;
this.table = document.querySelector(this.tableSelector);
this.tableBody = (_a = this.table) === null || _a === void 0 ? void 0 : _a.querySelector("tbody");
if (this.table !== null && this.sortForm !== null) {
this.table.addEventListener("uxTableSort", (e) => {
const value = e.detail;
if (value === "")
return;
this.sortForm.querySelector("input").value = value;
this.requestData(this.url);
});
this.syncSortStateToTable();
}
}
/** 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, date and sort settings to get data from the endpoint */
initialRequest() {
this.requestData(this.url);
}
getSerializedFormData() {
return [
serializeForm(this.dateForm),
serializeForm(this.filterForm),
serializeForm(this.sortForm),
]
.filter((str) => str !== "")
.join("&");
}
/** Send the real request and handle response */
requestData(url) {
if (url === "")
return;
const options = isMockUrl(url)
? {}
: {
method: "POST",
body: this.getSerializedFormData(),
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
};
api(url, options).then((data) => {
if (this.url === url) {
this.clearExistingData();
this.replaceFilter(data.filterHTML);
}
this.appendItemsToTable(data.items);
this.updateNumbers(data.filteredCount, data.totalCount);
this.nextPage = data.nextPage || "";
if (this.nextPage !== "" && this.scrollSensor !== null) {
this.scrollSensor.hasFired = false;
}
});
}
replaceFilter(html) {
if (typeof html === "string" &&
html.length > 0 &&
this.filter !== null) {
const parent = this.filter.parentElement;
if (parent !== null) {
parent.style.height = `${parent.offsetHeight}px`;
}
this.filter.outerHTML = html;
this.setFilter();
setTimeout(() => {
parent.style.height = "auto";
}, 200);
}
}
clearExistingData() {
if (this.tableBody !== null)
this.tableBody.textContent = "";
}
appendItemsToTable(items) {
if (this.tableBody === null)
return;
this.tableBody.insertAdjacentHTML("beforeend", items.map(row).join(""));
}
render() {
return null;
}
static get watchers() { return {
"dateFormSelector": ["setDateForm"],
"filterSelector": ["setFilter"],
"sortFormSelector": ["setSortForm"],
"totalNumberSelector": ["setTotalNumberElements"],
"filteredNumberSelector": ["setFilteredNumberElements"],
"tableSelector": ["setTable"],
"scrollSensorSelector": ["setScrollSensor"],
"url": ["initialRequest"]
}; }
};
function isMockUrl(url) {
return url.indexOf("mock-data/") > -1;
}
function preventDefaultEvent(e) {
e.preventDefault();
}
function writeToElements(nodes, text) {
if (nodes === null)
return;
[].forEach.call(nodes, (element) => (element.textContent = text));
}
DataControllerOrderReturn.style = dataControllerOrderReturnCss;
export { DataControllerOrderReturn as ux_iws_data_controller_order_return };