diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index c917aa94d..a38131cb7 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -5,6 +5,7 @@ import {fetchPost} from "../../../util/fetch"; import {getDefaultOperatorByType, setFilter} from "./filter"; import {genCellValue} from "./cell"; import {openMenuPanel} from "./openMenuPanel"; +import {getLabelByNumberFormat} from "./number"; export const duplicateCol = (options: { protyle: IProtyle, @@ -117,10 +118,10 @@ export const getEditHTML = (options: { } if (colData.type === "number") { html += ` -`; } return `
diff --git a/app/src/protyle/render/av/number.ts b/app/src/protyle/render/av/number.ts new file mode 100644 index 000000000..dbfb0bda6 --- /dev/null +++ b/app/src/protyle/render/av/number.ts @@ -0,0 +1,200 @@ +import {Menu} from "../../../plugin/Menu"; +import {transaction} from "../../wysiwyg/transaction"; + +const addFormatItem = (options: { + menu: Menu, + protyle: IProtyle, + colId: string, + avID: string, + format: string, + oldFormat: string + avPanelElement: HTMLElement +}) => { + options.menu.addItem({ + iconHTML: "", + label: getLabelByNumberFormat(options.format), + click() { + transaction(options.protyle, [{ + action: "updateAttrViewColNumberFormat", + id: options.colId, + avID: options.avID, + format: options.format, + type: "number", + }], [{ + action: "updateAttrViewColNumberFormat", + id: options.colId, + avID: options.avID, + format: options.oldFormat, + type: "number", + }]); + options.avPanelElement.remove(); + } + }) +} + +export const formatNumber = (options: { + avPanelElement: HTMLElement, + element: HTMLElement, + protyle: IProtyle, + colId: string, + avID: string, + oldFormat: string +}) => { + const menu = new Menu("av-col-format-number") + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "commas", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "percent", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "usDollar", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "yuan", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "euro", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "pound", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "yen", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "ruble", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "rupee", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "won", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "canadianDollar", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + addFormatItem({ + menu, + protyle: options.protyle, + colId: options.colId, + avID: options.avID, + format: "franc", + oldFormat: options.oldFormat, + avPanelElement: options.avPanelElement, + }) + const rect = options.element.getBoundingClientRect() + menu.open({ + x: rect.left, + y: rect.bottom, + h: rect.height, + w: rect.width, + isLeft: true, + }) +} + +export const getLabelByNumberFormat = (format: string) => { + switch (format) { + case "": + return window.siyuan.languages.numberFormatNone + case "commas": + return window.siyuan.languages.numberFormatCommas + case "percent": + return window.siyuan.languages.numberFormatPercent + case "usDollar": + return window.siyuan.languages.numberFormatUSDollar + case "yuan": + return window.siyuan.languages.numberFormatYuan + case "euro": + return window.siyuan.languages.numberFormatEuro + case "pound": + return window.siyuan.languages.numberFormatPound + case "yen": + return window.siyuan.languages.numberFormatYen + case "ruble": + return window.siyuan.languages.numberFormatRuble + case "rupee": + return window.siyuan.languages.numberFormatRupee + case "won": + return window.siyuan.languages.numberFormatWon + case "canadianDollar": + return window.siyuan.languages.numberFormatCanadianDollar + case "franc": + return window.siyuan.languages.numberFormatFranc + } +} diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 4e84d4ee0..71589d650 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -8,6 +8,7 @@ import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, remove import {addFilter, getFiltersHTML, setFilter} from "./filter"; import {addSort, bindSortsEvent, getSortsHTML} from "./sort"; import {bindDateEvent, getDateHTML, setDateValue} from "./date"; +import {formatNumber} from "./number"; export const openMenuPanel = (options: { protyle: IProtyle, @@ -431,7 +432,14 @@ export const openMenuPanel = (options: { event.stopPropagation(); break; } else if (type === "numberFormat") { - + formatNumber({ + avPanelElement, + element: target, + protyle: options.protyle, + oldFormat: target.dataset.format, + colId: menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"), + avID + }); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts index b121e08a0..62719954c 100644 --- a/app/src/protyle/wysiwyg/transaction.ts +++ b/app/src/protyle/wysiwyg/transaction.ts @@ -655,7 +655,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b } else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewColOptions", "updateAttrViewColOption", "updateAttrViewCell", "sortAttrViewRow", "sortAttrViewCol", "setAttrViewColHidden", "setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrViewName", "setAttrViewFilters", - "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol"].includes(operation.action)) { + "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol", "updateAttrViewColNumberFormat"].includes(operation.action)) { refreshAV(protyle, operation); } }; diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index 11b49c3f8..dd9f546f0 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -36,6 +36,7 @@ type TOperation = | "setAttrViewFilters" | "setAttrViewSorts" | "setAttrViewColCalc" + | "updateAttrViewColNumberFormat" type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins" type TCardType = "doc" | "notebook" | "all" type TEventBus = "ws-main" | @@ -329,6 +330,7 @@ interface IOperation { action: TOperation, // move， delete 不需要传 data id?: string, avID?: string, // av + format?: string // updateAttrViewColNumberFormat 专享 keyID?: string // updateAttrViewCell 专享 rowID?: string // updateAttrViewCell 专享 data?: any, // updateAttr 时为 { old: IObject, new: IObject }, updateAttrViewCell 时为 {TAVCol: {content: string}}