import {transaction} from "../../wysiwyg/transaction";
import {fetchPost} from "../../../util/fetch";
import {addCol} from "./addCol";
import {getColIconByType} from "./col";
import {setPosition} from "../../../util/setPosition";
export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" = "config") => {
let avMenuPanel = document.querySelector(".av__panel");
if (avMenuPanel) {
avMenuPanel.remove();
return;
}
window.siyuan.menus.menu.remove();
const avId = blockElement.getAttribute("data-av-id");
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
const data = response.data.av as IAV;
let html;
if (type === "config") {
html = getConfigHTML(data);
} else if (type === "properties") {
html = getPropertiesHTML(data);
} else if (type === "sorts") {
html = getSortsHTML(data);
}
document.body.insertAdjacentHTML("beforeend", `${html}
`);
avMenuPanel = document.querySelector(".av__panel");
const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
setPosition(avMenuPanel.lastElementChild as HTMLElement, tabRect.right - avMenuPanel.lastElementChild.clientWidth, tabRect.bottom, tabRect.height);
avMenuPanel.addEventListener("click", (event) => {
event.preventDefault();
let target = event.target as HTMLElement;
while (target && !target.isSameNode(avMenuPanel)) {
const type = target.dataset.type;
if (type === "close") {
avMenuPanel.remove();
event.stopPropagation();
break;
} else if (type === "goConfig") {
avMenuPanel.innerHTML = getConfigHTML(data);
event.stopPropagation();
break;
} else if (type === "goProperties") {
avMenuPanel.innerHTML = getPropertiesHTML(data);
event.stopPropagation();
break;
} else if (type === "goSorts") {
avMenuPanel.innerHTML = getSortsHTML(data);
event.stopPropagation();
break;
} else if (type === "removeSorts") {
// TODO
event.stopPropagation();
break;
} else if (type === "addSort") {
// TODO
event.stopPropagation();
break;
} else if (type === "removeSort") {
// TODO
event.stopPropagation();
break;
} else if (type === "newCol") {
avMenuPanel.remove();
const addMenu = addCol(protyle, blockElement);
addMenu.open({
x: tabRect.right,
y: tabRect.bottom,
h: tabRect.height,
isLeft: true
});
event.stopPropagation();
break;
} else if (type === "showAllCol") {
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
data.columns.forEach((item: IAVColumn) => {
if (item.hidden) {
doOperations.push({
action: "setAttrViewColHidden",
id: item.id,
parentID: avId,
data: false
});
undoOperations.push({
action: "setAttrViewColHidden",
id: item.id,
parentID: avId,
data: true
});
item.hidden = false;
}
});
if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations);
avMenuPanel.innerHTML = getPropertiesHTML(data);
}
event.stopPropagation();
break;
} else if (type === "hideAllCol") {
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
data.columns.forEach((item: IAVColumn) => {
if (!item.hidden && item.type !== "block") {
doOperations.push({
action: "setAttrViewColHidden",
id: item.id,
parentID: avId,
data: true
});
undoOperations.push({
action: "setAttrViewColHidden",
id: item.id,
parentID: avId,
data: false
});
item.hidden = true;
}
});
if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations);
avMenuPanel.innerHTML = getPropertiesHTML(data);
}
event.stopPropagation();
break;
} else if (type === "hideCol") {
const colId = target.getAttribute("data-id");
transaction(protyle, [{
action: "setAttrViewColHidden",
id: colId,
parentID: avId,
data: true
}], [{
action: "setAttrViewColHidden",
id: colId,
parentID: avId,
data: false
}]);
data.columns.find((item: IAVColumn) => item.id === colId).hidden = true;
avMenuPanel.innerHTML = getPropertiesHTML(data);
event.stopPropagation();
break;
} else if (type === "showCol") {
const colId = target.getAttribute("data-id");
transaction(protyle, [{
action: "setAttrViewColHidden",
id: colId,
parentID: avId,
data: false
}], [{
action: "setAttrViewColHidden",
id: colId,
parentID: avId,
data: true
}]);
data.columns.find((item: IAVColumn) => item.id === colId).hidden = false;
avMenuPanel.innerHTML = getPropertiesHTML(data);
event.stopPropagation();
break;
}
target = target.parentElement;
}
});
});
};
const getConfigHTML = (data: IAV) => {
return `
`;
};
const getSortsHTML = (data: IAV) => {
let html = "";
const genSortItem = (id: string) => {
let sortHTML = ''
data.columns.forEach((item) => {
sortHTML += ``
})
}
data.sorts.forEach((item: IAVSort) => {
html += ``;
});
return `
`;
}
const getPropertiesHTML = (data: IAV) => {
let showHTML = "";
let hideHTML = "";
data.columns.forEach((item: IAVColumn) => {
if (item.hidden) {
hideHTML += ``;
} else {
showHTML += ``;
}
});
if (hideHTML) {
hideHTML = `
${hideHTML}`;
}
return `
`;
};