diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json index a89e6664d..e4a0ffe2d 100644 --- a/app/appearance/langs/zh_CN.json +++ b/app/appearance/langs/zh_CN.json @@ -1,4 +1,8 @@ { + "groupMethod": "分组方式", + "hideEmptyGroup": "隐藏空白分组", + "groups": "组群", + "removeGroup": "移除分组", "contentBlock": "内容块", "insertItemBefore": "在前方插入${x}条", "insertItemAfter": "在后方插入${x}条", diff --git a/app/src/protyle/render/av/groups.ts b/app/src/protyle/render/av/groups.ts new file mode 100644 index 000000000..bde6ca618 --- /dev/null +++ b/app/src/protyle/render/av/groups.ts @@ -0,0 +1,94 @@ +import {unicode2Emoji} from "../../../emoji"; +import {getColIconByType} from "./col"; +import {escapeHtml} from "../../../util/escape"; +import {transaction} from "../../wysiwyg/transaction"; +import {setPosition} from "../../../util/setPosition"; +import {getFieldsByData} from "./view"; + +export const setGroupMethod = (options: { + protyle: IProtyle; + fieldId: string; + data: IAV; + menuElement: HTMLElement, + blockElement: HTMLElement, +}) => { + transaction(options.protyle, [{ + action: "setAttrViewGroup", + data: { + field: options.fieldId, + method: null, + order: null, + range: null + } + }], [{ + action: "setAttrViewGroup", + data: { + field: options.data.view.groups?.field || "", + method: null, + order: null, + range: null + } + }]); + options.data.view.groups.field = options.fieldId; + options.menuElement.innerHTML = getGroupsHTML(getFieldsByData(options.data), options.data.view.groups); + // bindGroupsEvent(options.protyle, options.menuElement, options.data, blockID); + const tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect(); + setPosition(options.menuElement, tabRect.right - options.menuElement.clientWidth, tabRect.bottom, tabRect.height); +} + +export const getGroupsMethodHTML = (columns: IAVColumn[], groups: IAVGroups) => { + const selectHTML = ''; + let html = ``; + columns.forEach(item => { + html += ``; + }); + return `
+ + +${html} +
`; +}; + +export const getGroupsHTML = (columns: IAVColumn[], groups: IAVGroups) => { + let html = ""; + if (groups) { + html = ` +`; + } + return `
+ + + +${html} +
`; +}; + +export const bindGroupsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAV, blockID: string) => { + +}; diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index d9428bf22..e189d93f9 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -47,6 +47,7 @@ import {escapeAttr, escapeHtml} from "../../../util/escape"; import {Dialog} from "../../../dialog"; import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout"; import {setGalleryCover, setGalleryRatio, setGallerySize} from "./gallery/util"; +import {bindGroupsEvent, getGroupsHTML, getGroupsMethodHTML, setGroupMethod} from "./groups"; export const openMenuPanel = (options: { protyle: IProtyle, @@ -575,6 +576,31 @@ export const openMenuPanel = (options: { event.preventDefault(); event.stopPropagation(); break; + } else if (type === "goGroups") { + menuElement.innerHTML = getGroupsHTML(fields, data.view.groups); + bindGroupsEvent(options.protyle, menuElement, data, blockID); + setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); + window.siyuan.menus.menu.remove(); + event.preventDefault(); + event.stopPropagation(); + break; + } else if (type === "goGroupsMethod") { + menuElement.innerHTML = getGroupsMethodHTML(fields, data.view.groups); + setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); + event.preventDefault(); + event.stopPropagation(); + break; + } else if (type === "setGroupMethod") { + setGroupMethod({ + protyle: options.protyle, + fieldId: target.getAttribute("data-id"), + data, + menuElement, + blockElement: options.blockElement, + }); + event.preventDefault(); + event.stopPropagation(); + break; } else if (type === "removeSorts") { transaction(options.protyle, [{ action: "setAttrViewSorts", diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts index 47c2b1985..8bd7d4e6d 100644 --- a/app/src/protyle/wysiwyg/transaction.ts +++ b/app/src/protyle/wysiwyg/transaction.ts @@ -855,7 +855,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo: "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc", "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID", "setAttrViewBlockView", "setAttrViewCardSize", "setAttrViewCardAspectRatio", "hideAttrViewName", "setAttrViewShowIcon", - "setAttrViewWrapField"].includes(operation.action)) { + "setAttrViewWrapField", "setAttrViewGroup"].includes(operation.action)) { if (!isUndo) { // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607 refreshAV(protyle, operation); diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index d5336c5ad..cc7333953 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -63,6 +63,7 @@ type TOperation = | "setAttrViewViewDesc" | "setAttrViewColDesc" | "setAttrViewBlockView" + | "setAttrViewGroup" type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins" type TCardType = "doc" | "notebook" | "all" type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" | @@ -841,9 +842,7 @@ interface IAVView { wrapField: boolean; filters: IAVFilter[], sorts: IAVSort[], - groups: { - field: string, - } + groups: IAVGroups } interface IAVTable extends IAVView { @@ -878,6 +877,10 @@ interface relativeDate { direction: number; // 方向：-1: 前、0: 现在、1: 后 } +interface IAVGroups { + field: string, +} + interface IAVSort { column: string, order: "ASC" | "DESC"