diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 8c586d705..5070d92f7 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -3,7 +3,7 @@ import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../ import {transaction} from "../../wysiwyg/transaction"; import {openEditorTab} from "../../../menus/util"; import {copySubMenu} from "../../../menus/commonMenuItem"; -import {getCellText, getTypeByCellElement, popTextCell} from "./cell"; +import {getCellText, getTypeByCellElement, popTextCell, renderCell, updateHeaderCell} from "./cell"; import {getColIconByType, showColMenu} from "./col"; import {deleteRow, insertAttrViewBlockAnimation, setPageSize, updateHeader} from "./row"; import {emitOpenMenu} from "../../../plugin/EventBus"; @@ -413,8 +413,17 @@ export const updateAVName = (protyle: IProtyle, blockElement: Element) => { }); }; -export const updateAttrViewCellAnimation = (cellElement: HTMLElement) => { - cellElement.style.backgroundColor = "var(--b3-av-hover)"; +export const updateAttrViewCellAnimation = (cellElement: HTMLElement, value: IAVCellValue, headerValue?: { + icon?: string, + name?: string, + pin?: boolean, + type?: TAVCol +}) => { + if (headerValue) { + updateHeaderCell(cellElement, headerValue); + } else { + cellElement.innerHTML = renderCell(value, cellElement.dataset.wrap === "true"); + } }; export const removeAttrViewColAnimation = (blockElement: Element, id: string) => { diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts index df9398b86..cd38f97fe 100644 --- a/app/src/protyle/render/av/asset.ts +++ b/app/src/protyle/render/av/asset.ts @@ -133,7 +133,7 @@ export const updateAssetCell = (options: { // 为空时 cellId 每次请求都不一致 cellData.id = item.dataset.id; if (!cellData.value || !cellData.value.mAsset) { - cellData.value = {mAsset: []} as IAVCellValue; + cellData.value = {type: "mAsset", mAsset: []} as IAVCellValue; } } else { cellData = row.cells.find(cellItem => { @@ -206,7 +206,7 @@ export const updateAssetCell = (options: { if (item.classList.contains("custom-attr__avvalue")) { item.innerHTML = genAVValueHTML(cellData.value); } else { - updateAttrViewCellAnimation(item); + updateAttrViewCellAnimation(item, cellData.value); } }); transaction(options.protyle, cellDoOperations, cellUndoOperations); diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts index 4d7d9ef42..1958a8260 100644 --- a/app/src/protyle/render/av/blockAttr.ts +++ b/app/src/protyle/render/av/blockAttr.ts @@ -88,7 +88,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle?: IP keyID: string, id: string, blockID: string, - type?: TAVCol & IAVCellValue + type: TAVCol & IAVCellValue } [] }[], blockIDs: string[], diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index 20748a2cd..8dc24a3c7 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -7,6 +7,8 @@ import {objEquals} from "../../../util/functions"; import {fetchPost} from "../../../util/fetch"; import {focusBlock} from "../../util/selection"; import * as dayjs from "dayjs"; +import {unicode2Emoji} from "../../../emoji"; +import {getColIconByType} from "./col"; export const getCellText = (cellElement: HTMLElement | false) => { if (!cellElement) { @@ -438,7 +440,11 @@ const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, cellElements: H data: blockElement.getAttribute("updated"), }); if (!hasClosestByClassName(cellElements[0], "custom-attr")) { - updateAttrViewCellAnimation(item); + updateAttrViewCellAnimation(item, { + [type]: inputValue, + isDetached: true, + type + }); } }); } @@ -487,14 +493,14 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va const colId = item.getAttribute("data-col-id"); text += getCellText(item); - + const cellValue = genCellValue(type, value); doOperations.push({ action: "updateAttrViewCell", id: cellId, avID, keyID: colId, rowID, - data: genCellValue(type, value) + data: cellValue }); undoOperations.push({ action: "updateAttrViewCell", @@ -505,7 +511,7 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va data: genCellValueByElement(type, item) }); if (!hasClosestByClassName(cellElements[0], "custom-attr")) { - updateAttrViewCellAnimation(item); + updateAttrViewCellAnimation(item, cellValue); } }); if (doOperations.length > 0) { @@ -523,3 +529,91 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va } return text; }; + +export const renderCell = (cellValue: IAVCellValue, wrap: boolean) => { + let text = ""; + if (["text", "template"].includes(cellValue.type)) { + text = `${cellValue ? (cellValue[cellValue.type as "text"].content || "") : ""}`; + } else if (["url", "email", "phone"].includes(cellValue.type)) { + const urlContent = cellValue ? cellValue[cellValue.type as "url"].content : ""; + // https://github.com/siyuan-note/siyuan/issues/9291 + let urlAttr = ""; + if (cellValue.type === "url") { + urlAttr = ` data-href="${urlContent}"`; + } + text = `${urlContent}`; + } else if (cellValue.type === "block") { + if (cellValue?.isDetached) { + text = `${cellValue.block.content || ""} +${window.siyuan.languages.more}`; + } else { + text = `${cellValue.block.content || ""} +${window.siyuan.languages.update}`; + } + } else if (cellValue.type === "number") { + text = `${cellValue?.number.formattedContent || ""}`; + } else if (cellValue.type === "mSelect" || cellValue.type === "select") { + cellValue?.mSelect?.forEach((item) => { + text += `${item.content}`; + }); + } else if (cellValue.type === "date") { + const dataValue = cellValue ? cellValue.date : null; + text = ``; + if (dataValue && dataValue.isNotEmpty) { + text += dayjs(dataValue.content).format(dataValue.isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm"); + } + if (dataValue && dataValue.hasEndDate && dataValue.isNotEmpty && dataValue.isNotEmpty2) { + text += `${dayjs(dataValue.content2).format(dataValue.isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm")}`; + } + text += ""; + } else if (["created", "updated"].includes(cellValue.type)) { + const dataValue = cellValue ? cellValue[cellValue.type as "date"] : null; + text = ``; + if (dataValue && dataValue.isNotEmpty) { + text += dayjs(dataValue.content).format("YYYY-MM-DD HH:mm"); + } + text += ""; + } else if (cellValue.type === "mAsset") { + cellValue?.mAsset?.forEach((item) => { + if (item.type === "image") { + text += ``; + } else { + text += `${item.name}`; + } + }); + } else if (cellValue.type === "checkbox") { + text += ``; + } + if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cellValue.type) && + cellValue && cellValue[cellValue.type as "url"].content) { + text += ``; + } + return text; +} + +export const updateHeaderCell = (cellElement: HTMLElement, headerValue: { + icon?: string, + name?: string, + pin?: boolean, +}) => { + if (typeof headerValue.icon !== "undefined") { + cellElement.dataset.icon = headerValue.icon; + cellElement.querySelector(".av__cellheadericon").outerHTML = headerValue.icon ? unicode2Emoji(headerValue.icon, "av__cellheadericon", true) : `` + } + if (typeof headerValue.name !== "undefined") { + cellElement.querySelector(".av__celltext").textContent = headerValue.name; + } + if (typeof headerValue.pin !== "undefined") { + const textElement = cellElement.querySelector(".av__celltext") + if (headerValue.pin) { + if (!textElement.nextElementSibling) { + textElement.insertAdjacentHTML("afterend", '
') + } + } else { + if (textElement.nextElementSibling) { + textElement.nextElementSibling.nextElementSibling.remove(); + textElement.nextElementSibling.remove(); + } + } + } +} diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 2e054922f..f352fe75c 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -216,7 +216,7 @@ export const bindEditEvent = (options: { type: colData.type, }]); colData.name = newValue; - updateAttrViewCellAnimation(options.protyle.wysiwyg.element.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`)); + updateAttrViewCellAnimation(options.protyle.wysiwyg.element.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {name: newValue}); }); nameElement.addEventListener("keydown", (event: KeyboardEvent) => { if (event.isComposing) { @@ -426,7 +426,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen name: oldValue, type, }]); - updateAttrViewCellAnimation(cellElement); + updateAttrViewCellAnimation(blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {name: newValue}); // https://github.com/siyuan-note/siyuan/issues/9862 focusBlock(blockElement); }); @@ -458,7 +458,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen }]); iconElement.setAttribute("data-icon", unicode); iconElement.innerHTML = unicode ? unicode2Emoji(unicode) : ``; - updateAttrViewCellAnimation(cellElement); + updateAttrViewCellAnimation(blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {icon: unicode}); }); event.preventDefault(); event.stopPropagation(); @@ -607,6 +607,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen avID, data: isPin }]); + updateAttrViewCellAnimation(blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {pin: !isPin}); } }); if (type !== "block") { diff --git a/app/src/protyle/render/av/date.ts b/app/src/protyle/render/av/date.ts index 85f77512d..80c1eff12 100644 --- a/app/src/protyle/render/av/date.ts +++ b/app/src/protyle/render/av/date.ts @@ -162,7 +162,9 @@ export const setDateValue = (options: { // 为空时 cellId 每次请求都不一致 cellData.id = item.dataset.id; if (!cellData.value) { - cellData.value = {}; + cellData.value = { + type: cellData.valueType + }; } else { cellData.value.id = item.dataset.id; } @@ -203,7 +205,7 @@ export const setDateValue = (options: { if (item.classList.contains("custom-attr__avvalue")) { item.innerHTML = genAVValueHTML(cellData.value); } else { - updateAttrViewCellAnimation(item); + updateAttrViewCellAnimation(item, cellData.value); } }); transaction(options.protyle, cellDoOperations, cellUndoOperations); diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 41d87aaef..5b41b1527 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -634,7 +634,7 @@ export const openMenuPanel = (options: { data: target.dataset.icon, }]); target.innerHTML = unicode ? unicode2Emoji(unicode) : ``; - updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`)); + updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {icon: unicode}); target.dataset.icon = unicode; }); event.preventDefault(); diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 10fb1e574..605746347 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -1,8 +1,7 @@ import {fetchPost} from "../../../util/fetch"; import {getColIconByType} from "./col"; import {Constants} from "../../../constants"; -import {popTextCell} from "./cell"; -import * as dayjs from "dayjs"; +import {popTextCell, renderCell} from "./cell"; import {unicode2Emoji} from "../../../emoji"; import {focusBlock} from "../../util/selection"; import {isMac} from "../../util/compatibility"; @@ -136,69 +135,12 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '${cell.value ? (cell.value[cell.valueType as "text"].content || "") : ""}`; - } else if (["url", "email", "phone"].includes(cell.valueType)) { - const urlContent = cell.value ? cell.value[cell.valueType as "url"].content : ""; - // https://github.com/siyuan-note/siyuan/issues/9291 - let urlAttr = ""; - if (cell.valueType === "url") { - urlAttr = ` data-href="${urlContent}"`; - } - text = `${urlContent}`; - } else if (cell.valueType === "block") { - if (cell.value?.isDetached) { - text = `${cell.value.block.content || ""} -${window.siyuan.languages.more}`; - } else { - text = `${cell.value.block.content || ""} -${window.siyuan.languages.update}`; - } - } else if (cell.valueType === "number") { - text = `${cell.value?.number.formattedContent || ""}`; - } else if (cell.valueType === "mSelect" || cell.valueType === "select") { - cell.value?.mSelect?.forEach((item) => { - text += `${item.content}`; - }); - } else if (cell.valueType === "date") { - const dataValue = cell.value ? cell.value.date : null; - text = ``; - if (dataValue && dataValue.isNotEmpty) { - text += dayjs(dataValue.content).format(dataValue.isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm"); - } - if (dataValue && dataValue.hasEndDate && dataValue.isNotEmpty && dataValue.isNotEmpty2) { - text += `${dayjs(dataValue.content2).format(dataValue.isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm")}`; - } - text += ""; - } else if (["created", "updated"].includes(cell.valueType)) { - const dataValue = cell.value ? cell.value[cell.valueType as "date"] : null; - text = ``; - if (dataValue && dataValue.isNotEmpty) { - text += dayjs(dataValue.content).format("YYYY-MM-DD HH:mm"); - } - text += ""; - } else if (cell.valueType === "mAsset") { - cell.value?.mAsset?.forEach((item) => { - if (item.type === "image") { - text += ``; - } else { - text += `${item.name}`; - } - }); - } else if (cell.valueType === "checkbox") { - text += ``; - } - if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cell.valueType) && - cell.value && cell.value[cell.valueType as "url"].content) { - text += ``; - } tableHTML += `
${text}
`; +${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, data.columns[index].wrap)}`; if (pinIndex === index) { tableHTML += ""; diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts index c9d4c7f37..1d52989f6 100644 --- a/app/src/protyle/render/av/select.ts +++ b/app/src/protyle/render/av/select.ts @@ -102,7 +102,7 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM if (item.classList.contains("custom-attr__avvalue")) { item.innerHTML = genAVValueHTML(cellData.value); } else { - updateAttrViewCellAnimation(item); + updateAttrViewCellAnimation(item, cellData.value); } }); transaction(protyle, doOperations, undoOperations); @@ -184,7 +184,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, if (cellElement.classList.contains("custom-attr__avvalue")) { cellElement.innerHTML = genAVValueHTML(cell.value); } else { - updateAttrViewCellAnimation(cellElement); + updateAttrViewCellAnimation(cellElement, cell.value); } return true; } @@ -262,7 +262,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, if (cellElement.classList.contains("custom-attr__avvalue")) { cellElement.innerHTML = genAVValueHTML(cell.value); } else { - updateAttrViewCellAnimation(cellElement); + updateAttrViewCellAnimation(cellElement, cell.value); } return true; } @@ -342,7 +342,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, if (cellElement.classList.contains("custom-attr__avvalue")) { cellElement.innerHTML = genAVValueHTML(cell.value); } else { - updateAttrViewCellAnimation(cellElement); + updateAttrViewCellAnimation(cellElement, cell.value); } return true; } @@ -531,7 +531,7 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H if (item.classList.contains("custom-attr__avvalue")) { item.innerHTML = genAVValueHTML(cellData.value); } else { - updateAttrViewCellAnimation(item); + updateAttrViewCellAnimation(item, cellData.value); } }); diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts index 4bf97fb4f..955dc2a05 100644 --- a/app/src/protyle/wysiwyg/transaction.ts +++ b/app/src/protyle/wysiwyg/transaction.ts @@ -716,7 +716,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo: "updateAttrViewColOption", "updateAttrViewCell", "sortAttrViewRow", "sortAttrViewCol", "setAttrViewColHidden", "setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrViewName", "setAttrViewFilters", "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol", "updateAttrViewColNumberFormat", "removeAttrViewBlock", - "replaceAttrViewBlock", "updateAttrViewColTemplate", "setAttrViewColIcon", "setAttrViewColPin", "addAttrViewView", + "replaceAttrViewBlock", "updateAttrViewColTemplate", "setAttrViewColPin", "addAttrViewView", "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView", "setAttrViewPageSize"].includes(operation.action)) { refreshAV(protyle, operation, isUndo); diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index e0b05916f..d50b2c0e4 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -1098,7 +1098,7 @@ interface IAVCell { interface IAVCellValue { id?: string, - type?: TAVCol, + type: TAVCol, isDetached?: boolean, text?: { content: string