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

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

Browse Source
This commit is contained in:
Vanessa 2023-07-27 00:47:14 +08:00
parent d8614cd594
commit 786f8f9f39
2 changed files with 101 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/src/protyle/render/av/cell.ts
View File

@ -66,7 +66,7 @@ export const getCalcValue = (column: IAVColumn) => {
export const genCellValue = (colType: TAVCol, value: string | { export const genCellValue = (colType: TAVCol, value: string | {
content: string, content: string,
color: string color: string
}[]) => { }[] | { content?: number, content2?: number, hasEndDate?: boolean }) => {
let cellValue: IAVCellValue; let cellValue: IAVCellValue;
if (typeof value === "string") { if (typeof value === "string") {
if (colType === "number") { if (colType === "number") {
@ -94,7 +94,7 @@ export const genCellValue = (colType: TAVCol, value: string | {
} }
}; };
} else if (colType === "mSelect" || colType === "select") { } else if (colType === "mSelect" || colType === "select") {
return { cellValue = {
type: colType, type: colType,
mSelect: [{ mSelect: [{
content: value, content: value,
@ -102,14 +102,23 @@ export const genCellValue = (colType: TAVCol, value: string | {
}] }]
}; };
} }
return cellValue; } else {
} if (colType === "mSelect" || colType === "select") {
if (colType === "mSelect" || colType === "select") { cellValue = {
return { type: colType,
type: colType, mSelect: value as {
mSelect: value content: string,
}; color: string
}[]
};
} else if (colType === "date") {
cellValue = {
type: colType,
date: value as { content?: number, content2?: number, hasEndDate?: boolean }
};
}
} }
return cellValue;
}; };
const calcItem = (options: { const calcItem = (options: {

127
app/src/protyle/render/av/filter.ts
View File

@ -5,6 +5,7 @@ import {getColIconByType} from "./col";
import {setPosition} from "../../../util/setPosition"; import {setPosition} from "../../../util/setPosition";
import {objEquals} from "../../../util/functions"; import {objEquals} from "../../../util/functions";
import {genCellValue} from "./cell"; import {genCellValue} from "./cell";
import * as dayjs from "dayjs";
export const getDefaultOperatorByType = (type: TAVCol) => { export const getDefaultOperatorByType = (type: TAVCol) => {
if (type === "number" || type === "select") { if (type === "number" || type === "select") {
@ -15,16 +16,30 @@ export const getDefaultOperatorByType = (type: TAVCol) => {
} }
}; };
const toggleEmpty = (element: HTMLElement, show: boolean) => { const toggleEmpty = (element: HTMLElement, operator: string, type: TAVCol) => {
const menuElement = hasClosestByClassName(element, "b3-menu"); const menuElement = hasClosestByClassName(element, "b3-menu");
if (menuElement) { if (menuElement) {
menuElement.querySelectorAll("input, .b3-chip").forEach(inputElement => { menuElement.querySelectorAll("input, .b3-chip").forEach((inputElement, index) => {
const menuItemElement = hasClosestByClassName(inputElement, "b3-menu__item"); const menuItemElement = hasClosestByClassName(inputElement, "b3-menu__item");
if (menuItemElement) { if (menuItemElement) {
if (show) { if (type === "date") {
menuItemElement.classList.remove("fn__none"); if (operator === "Is between") {
menuItemElement.classList.remove("fn__none");
} else if (operator === "Is empty" || operator === "Is not empty") {
menuItemElement.classList.add("fn__none");
} else {
if (index === 0) {
menuItemElement.classList.remove("fn__none");
} else {
menuItemElement.classList.add("fn__none");
}
}
} else { } else {
menuItemElement.classList.add("fn__none"); if (operator !== "Is empty" && operator !== "Is not empty") {
menuItemElement.classList.remove("fn__none");
} else {
menuItemElement.classList.add("fn__none");
}
} }
} }
}); });
@ -40,10 +55,19 @@ export const setFilter = (options: {
const rectTarget = options.target.getBoundingClientRect(); const rectTarget = options.target.getBoundingClientRect();
const menu = new Menu("set-filter-" + options.filter.column, () => { const menu = new Menu("set-filter-" + options.filter.column, () => {
const oldFilters = JSON.parse(JSON.stringify(options.data.view.filters)); const oldFilters = JSON.parse(JSON.stringify(options.data.view.filters));
const operator = (window.siyuan.menus.menu.element.querySelector(".b3-select") as HTMLSelectElement).value as TAVFilterOperator
let hasMatch = false; let hasMatch = false;
let cellValue: IAVCellValue; let cellValue: IAVCellValue;
if (textElement) { if (textElements.length > 0) {
cellValue = genCellValue(options.filter.value.type, textElement.value); if (colData.type === "date") {
cellValue = genCellValue(colData.type, {
content: new Date(textElements[0].value).getTime(),
content2: new Date(textElements[1].value).getTime(),
hasEndDate: operator === "Is between"
});
} else {
cellValue = genCellValue(colData.type, textElements[0].value);
}
} else { } else {
const mSelect: { color: string, content: string }[] = []; const mSelect: { color: string, content: string }[] = [];
window.siyuan.menus.menu.element.querySelectorAll("svg").forEach(item => { window.siyuan.menus.menu.element.querySelectorAll("svg").forEach(item => {
@ -58,12 +82,12 @@ export const setFilter = (options: {
if (mSelect.length === 0) { if (mSelect.length === 0) {
mSelect.push({color: "", content: ""}); mSelect.push({color: "", content: ""});
} }
cellValue = genCellValue(options.filter.value.type, mSelect); cellValue = genCellValue(colData.type, mSelect);
} }
const newFilter: IAVFilter = { const newFilter: IAVFilter = {
column: options.filter.column, column: options.filter.column,
value: cellValue, value: cellValue,
operator: (window.siyuan.menus.menu.element.querySelector(".b3-select") as HTMLSelectElement).value as TAVFilterOperator operator
}; };
let isSame = false; let isSame = false;
@ -100,7 +124,13 @@ export const setFilter = (options: {
} }
let selectHTML = ""; let selectHTML = "";
let colData: IAVColumn; let colData: IAVColumn;
switch (options.filter.value.type) { options.data.view.columns.find((column) => {
if (column.id === options.filter.column) {
colData = column;
return true;
}
});
switch (colData.type) {
case "text": case "text":
selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option> selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
<option ${"!=" === options.filter.operator ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option> <option ${"!=" === options.filter.operator ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option>
@ -109,8 +139,17 @@ export const setFilter = (options: {
<option ${"Starts with" === options.filter.operator ? "selected" : ""} value="Starts with">${window.siyuan.languages.filterOperatorStartsWith}</option> <option ${"Starts with" === options.filter.operator ? "selected" : ""} value="Starts with">${window.siyuan.languages.filterOperatorStartsWith}</option>
<option ${"Ends with" === options.filter.operator ? "selected" : ""} value="Ends with">${window.siyuan.languages.filterOperatorEndsWith}</option> <option ${"Ends with" === options.filter.operator ? "selected" : ""} value="Ends with">${window.siyuan.languages.filterOperatorEndsWith}</option>
<option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option> <option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option>
<option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option> <option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>`;
`; break;
case "date":
selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
<option ${">" === options.filter.operator ? "selected" : ""} value=">">${window.siyuan.languages.filterOperatorIsAfter}</option>
<option ${"<" === options.filter.operator ? "selected" : ""} value="<">${window.siyuan.languages.filterOperatorIsBefore}</option>
<option ${">=" === options.filter.operator ? "selected" : ""} value=">=">${window.siyuan.languages.filterOperatorIsOnOrAfter}</option>
<option ${"<=" === options.filter.operator ? "selected" : ""} value="<=">${window.siyuan.languages.filterOperatorIsOnOrBefore}</option>
<option ${"Is between" === options.filter.operator ? "selected" : ""} value="Is between">${window.siyuan.languages.filterOperatorIsBetween}</option>
<option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option>
<option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>`;
break; break;
case "number": case "number":
selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">=</option> selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">=</option>
@ -120,40 +159,31 @@ export const setFilter = (options: {
<option ${">=" === options.filter.operator ? "selected" : ""} value=">=">&GreaterEqual;</option> <option ${">=" === options.filter.operator ? "selected" : ""} value=">=">&GreaterEqual;</option>
<option ${"<=" === options.filter.operator ? "selected" : ""} value="<=">&le;</option> <option ${"<=" === options.filter.operator ? "selected" : ""} value="<=">&le;</option>
<option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option> <option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option>
<option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option> <option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>`;
`;
break; break;
case "mSelect": case "mSelect":
case "select": case "select":
options.data.view.columns.find((column) => { if (colData.type === "select") {
if (column.id === options.filter.column) { selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
colData = column;
if (column.type === "select") {
selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
<option ${"!=" === options.filter.operator ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option> <option ${"!=" === options.filter.operator ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option>
<option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option> <option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option>
<option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option> <option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>`;
`; } else {
} else { selectHTML = `<option ${"Contains" === options.filter.operator ? "selected" : ""} value="Contains">${window.siyuan.languages.filterOperatorContains}</option>
selectHTML = `<option ${"Contains" === options.filter.operator ? "selected" : ""} value="Contains">${window.siyuan.languages.filterOperatorContains}</option>
<option ${"Does not contains" === options.filter.operator ? "selected" : ""} value="Does not contains">${window.siyuan.languages.filterOperatorDoesNotContain}</option> <option ${"Does not contains" === options.filter.operator ? "selected" : ""} value="Does not contains">${window.siyuan.languages.filterOperatorDoesNotContain}</option>
<option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option> <option ${"Is empty" === options.filter.operator ? "selected" : ""} value="Is empty">${window.siyuan.languages.filterOperatorIsEmpty}</option>
<option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option> <option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>`;
`; }
}
return true;
}
});
break; break;
} }
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: `<select style="margin: 4px 0" class="b3-select fn__size200">${selectHTML}</select>` label: `<select style="margin: 4px 0" class="b3-select fn__size200">${selectHTML}</select>`
}); });
if (options.filter.value.type === "select" || options.filter.value.type === "mSelect") { if (colData.type === "select" || colData.type === "mSelect") {
colData.options?.forEach((option) => { colData.options?.forEach((option) => {
let icon = "iconUncheck"; let icon = "iconUncheck";
options.filter.value.mSelect.find((optionItem) => { options.filter.value?.mSelect.find((optionItem) => {
if (optionItem.content === option.name) { if (optionItem.content === option.name) {
icon = "iconCheck"; icon = "iconCheck";
} }
@ -175,15 +205,24 @@ export const setFilter = (options: {
} }
}); });
}); });
} else if (options.filter.value.type === "text") { } else if (colData.type === "text") {
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: `<input style="margin: 4px 0" value="${options.filter.value.text.content}" class="b3-text-field fn__size200">` label: `<input style="margin: 4px 0" value="${options.filter.value?.text.content || ""}" class="b3-text-field fn__size200">`
}); });
} else if (options.filter.value.type === "number") { } else if (colData.type === "number") {
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: `<input style="margin: 4px 0" value="${options.filter.value.number.isNotEmpty ? options.filter.value.number.content : ""}" class="b3-text-field fn__size200">` label: `<input style="margin: 4px 0" value="${options.filter.value?.number.isNotEmpty ? options.filter.value.number.content : ""}" class="b3-text-field fn__size200">`
});
} else if (colData.type === "date") {
menu.addItem({
iconHTML: "",
label: `<input style="margin: 4px 0" value="${options.filter.value?.date.content ? dayjs(options.filter.value.date.content).format("YYYY-MM-DDTHH:mm") : ""}" type="datetime-local" class="b3-text-field fn__size200">`
});
menu.addItem({
iconHTML: "",
label: `<input style="margin: 4px 0" value="${options.filter.value?.date.content2 ? dayjs(options.filter.value.date.content2).format("YYYY-MM-DDTHH:mm") : ""}" type="datetime-local" class="b3-text-field fn__size200">`
}); });
} }
menu.addItem({ menu.addItem({
@ -214,11 +253,11 @@ export const setFilter = (options: {
}); });
const selectElement = (window.siyuan.menus.menu.element.querySelector(".b3-select") as HTMLSelectElement); const selectElement = (window.siyuan.menus.menu.element.querySelector(".b3-select") as HTMLSelectElement);
selectElement.addEventListener("change", () => { selectElement.addEventListener("change", () => {
toggleEmpty(selectElement, selectElement.value !== "Is empty" && selectElement.value !== "Is not empty"); toggleEmpty(selectElement, selectElement.value, colData.type);
}); });
const textElement = window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement; const textElements: NodeListOf<HTMLInputElement> = window.siyuan.menus.menu.element.querySelectorAll(".b3-text-field");
if (textElement) { textElements.forEach(item => {
textElement.addEventListener("keydown", (event) => { item.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) { if (event.isComposing) {
event.preventDefault(); event.preventDefault();
return; return;
@ -228,11 +267,11 @@ export const setFilter = (options: {
event.preventDefault(); event.preventDefault();
} }
}); });
} })
toggleEmpty(selectElement, selectElement.value !== "Is empty" && selectElement.value !== "Is not empty"); toggleEmpty(selectElement, selectElement.value, colData.type);
menu.open({x: rectTarget.left, y: rectTarget.bottom}); menu.open({x: rectTarget.left, y: rectTarget.bottom});
if (textElement) { if (textElements.length > 0) {
textElement.select(); textElements[0].select();
} }
}; };
@ -279,7 +318,7 @@ export const addFilter = (options: {
const filterElement = options.menuElement.querySelector(`[data-id="${column.id}"] .b3-chip`) as HTMLElement; const filterElement = options.menuElement.querySelector(`[data-id="${column.id}"] .b3-chip`) as HTMLElement;
setFilter({ setFilter({
filter: { filter: {
operator: getDefaultOperatorByType(column.type), operator: getDefaultOperatorByType(column.type),
column: column.id, column: column.id,
value: cellValue value: cellValue
}, },