import {Menu} from "../../../plugin/Menu";
import {getColIconByType} from "./col";
import {transaction} from "../../wysiwyg/transaction";
import {setPosition} from "../../../util/setPosition";
export const addSort = (options: {
data: IAV,
rect: DOMRect,
menuElement: HTMLElement,
tabRect: DOMRect,
avId: string,
protyle: IProtyle
}) => {
const menu = new Menu("av-add-sort");
options.data.view.columns.forEach((column) => {
let hasSort = false;
options.data.view.sorts.find((sort) => {
if (sort.column === column.id) {
hasSort = true;
return true;
}
});
if (!hasSort) {
menu.addItem({
label: column.name,
icon: getColIconByType(column.type),
click: () => {
const oldSorts = Object.assign([], options.data.view.sorts);
options.data.view.sorts.push({
column: column.id,
order: "ASC",
});
transaction(options.protyle, [{
action: "setAttrViewSorts",
avID: options.data.id,
data: options.data.view.sorts
}], [{
action: "setAttrViewSorts",
avID: options.data.id,
data: oldSorts
}]);
options.menuElement.innerHTML = getSortsHTML(options.data.view.columns, options.data.view.sorts);
bindSortsEvent(options.protyle, options.menuElement, options.data);
setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height);
}
});
}
});
menu.open({
x: options.rect.left,
y: options.rect.bottom,
h: options.rect.height,
});
};
export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAV) => {
menuElement.querySelectorAll("select").forEach((item: HTMLSelectElement) => {
item.addEventListener("change", () => {
const colId = item.parentElement.getAttribute("data-id");
const oldSort = JSON.parse(JSON.stringify(data.view.sorts));
if (item.previousElementSibling.classList.contains("b3-menu__icon")) {
data.view.sorts.find((sort: IAVSort) => {
if (sort.column === colId) {
sort.column = item.value;
item.parentElement.setAttribute("data-id", item.value);
return true;
}
});
} else {
data.view.sorts.find((sort: IAVSort) => sort.column === colId).order = item.value as "ASC" | "DESC";
}
transaction(protyle, [{
action: "setAttrViewSorts",
avID: data.id,
data: data.view.sorts
}], [{
action: "setAttrViewSorts",
avID: data.id,
data: oldSort
}]);
});
});
};
export const getSortsHTML = (columns: IAVColumn[], sorts: IAVSort[]) => {
let html = "";
const genSortItem = (id: string) => {
let sortHTML = "";
columns.forEach((item) => {
sortHTML += ``;
});
return sortHTML;
};
sorts.forEach((item: IAVSort) => {
html += ``;
});
return ``;
};