github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-17 09:30:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ https://github.com/siyuan-note/siyuan/issues/8664

Browse Source
This commit is contained in:
Vanessa 2023-07-06 22:47:05 +08:00
parent db0c16640d
commit a78c853d8d
1 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/src/protyle/render/av/openMenuPanel.ts
View File

@ -4,6 +4,7 @@ import {addCol} from "./addCol";
import {getColIconByType} from "./col"; import {getColIconByType} from "./col";
import {setPosition} from "../../../util/setPosition"; import {setPosition} from "../../../util/setPosition";
import {Menu} from "../../../plugin/Menu"; import {Menu} from "../../../plugin/Menu";
import {hasClosestByClassName} from "../../util/hasClosest";
export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" | "filters" = "config") => { export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" | "filters" = "config") => {
let avPanelElement = document.querySelector(".av__panel"); let avPanelElement = document.querySelector(".av__panel");
@ -152,13 +153,13 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
action: "setAttrView", action: "setAttrView",
id: avId, id: avId,
data: { data: {
filter: data.filters filters: data.filters
} }
}], [{ }], [{
action: "setAttrView", action: "setAttrView",
id: avId, id: avId,
data: { data: {
filter: oldFilters filters: oldFilters
} }
}]); }]);
menuElement.innerHTML = getFiltersHTML(data); menuElement.innerHTML = getFiltersHTML(data);
@ -414,7 +415,7 @@ const setFilter = (protyle: IProtyle, data: IAV, target: HTMLElement) => {
data.filters.find((filter) => { data.filters.find((filter) => {
if (filter.column === colId) { if (filter.column === colId) {
filter.value[colType] = { filter.value[colType] = {
content: (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value content: textElement.value
}; };
filter.operator = (window.siyuan.menus.menu.element.querySelector(".b3-select") as HTMLSelectElement).value as TAVFilterOperator; filter.operator = (window.siyuan.menus.menu.element.querySelector(".b3-select") as HTMLSelectElement).value as TAVFilterOperator;
return true; return true;
@ -433,18 +434,23 @@ const setFilter = (protyle: IProtyle, data: IAV, target: HTMLElement) => {
filters: oldFilters filters: oldFilters
} }
}]); }]);
const menuElement = hasClosestByClassName(target, "b3-menu")
if (menuElement) {
menuElement.innerHTML = getFiltersHTML(data);
}
}); });
let selectHTML = ""; let selectHTML = "";
const filterOperation = target.getAttribute("data-op")
switch (colType) { switch (colType) {
case "text": case "text":
selectHTML = `<option value="=">=</option> selectHTML = `<option ${"=" === filterOperation ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
<option value="!=">!=</option> <option ${"!=" === filterOperation ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option>
<option value="Contains">Contains</option> <option ${"Contains" === filterOperation ? "selected" : ""} value="Contains">${window.siyuan.languages.filterOperatorContains}</option>
<option value="Does not contains">Does not contains</option> <option ${"Does not contains" === filterOperation ? "selected" : ""} value="Does not contains">${window.siyuan.languages.filterOperatorDoesNotContain}</option>
<option value="Starts with">Starts with</option> <option ${"Starts with" === filterOperation ? "selected" : ""} value="Starts with">${window.siyuan.languages.filterOperatorStartsWith}</option>
<option value="Ends with">Ends with</option> <option ${"Ends with" === filterOperation ? "selected" : ""} value="Ends with">${window.siyuan.languages.filterOperatorEndsWith}</option>
<option value="Is empty">Is empty</option> <option ${"Is empty" === filterOperation ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option>
<option value="Is not empty">Is not empty</option> <option ${"Is not empty" === filterOperation ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>
`; `;
break; break;
} }
@ -454,10 +460,22 @@ const setFilter = (protyle: IProtyle, data: IAV, target: HTMLElement) => {
}) })
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: `<input class="b3-text-field fn__size200">` label: `<input value="${target.getAttribute("data-value")}" class="b3-text-field fn__size200">`
})
const textElement = (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement)
textElement.addEventListener("keydown", (event) => {
if (event.isComposing) {
event.preventDefault();
return;
}
if (event.key === "Enter") {
menu.close();
event.preventDefault();
}
}) })
const rectTarget = target.getBoundingClientRect(); const rectTarget = target.getBoundingClientRect();
menu.open({x: rectTarget.left, y: rectTarget.bottom}) menu.open({x: rectTarget.left, y: rectTarget.bottom});
textElement.select();
} }
const addFilter = (options: { const addFilter = (options: {
@ -483,7 +501,6 @@ const addFilter = (options: {
icon: getColIconByType(column.type), icon: getColIconByType(column.type),
click: () => { click: () => {
const oldFilters = Object.assign([], options.data.filters); const oldFilters = Object.assign([], options.data.filters);
options.data.filters.push({ options.data.filters.push({
column: column.id, column: column.id,
operator: "Contains", operator: "Contains",
@ -508,6 +525,7 @@ const addFilter = (options: {
}]); }]);
options.menuElement.innerHTML = getFiltersHTML(options.data); options.menuElement.innerHTML = getFiltersHTML(options.data);
setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height); setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height);
setFilter(options.protyle, options.data, options.menuElement.querySelector(`[data-id="${column.id}"] .b3-chip`));
} }
}); });
} }
@ -525,10 +543,10 @@ const getFiltersHTML = (data: IAV) => {
let filterHTML = ""; let filterHTML = "";
data.columns.find((item) => { data.columns.find((item) => {
if (item.id === filter.column) { if (item.id === filter.column) {
const filterValue = (filter.value && filter.value[item.type] && filter.value[item.type].content) ? ":" + filter.value[item.type].content : ""; const filterValue = (filter.value && filter.value[item.type] && filter.value[item.type].content) ? filter.value[item.type].content : "";
filterHTML += `<span data-type="setFilter" data-coltype="${item.type}" class="b3-chip${filterValue ? " b3-chip--primary" : ""}"> filterHTML += `<span data-type="setFilter" data-coltype="${item.type}" data-op="${filter.operator}" data-value="${filterValue}" class="b3-chip${filterValue ? " b3-chip--primary" : ""}">
<svg><use xlink:href="#${getColIconByType(item.type)}"></use></svg> <svg><use xlink:href="#${getColIconByType(item.type)}"></use></svg>
<span class="fn__ellipsis">${item.name}${filterValue}</span> <span class="fn__ellipsis">${item.name}${filterValue ? ": " + filterValue : ""}</span>
</span>`; </span>`;
return true return true
} }