From bb59ed97e5963bd323e4a3d1fc946a3e25e64337 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 24 Sep 2023 18:59:25 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/8895 block attr --- app/src/protyle/render/av/blockAttr.ts | 80 +------------------------- app/src/protyle/render/av/date.ts | 27 ++++++--- 2 files changed, 21 insertions(+), 86 deletions(-) diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts index 6a95b3d0c..9d91e8b18 100644 --- a/app/src/protyle/render/av/blockAttr.ts +++ b/app/src/protyle/render/av/blockAttr.ts @@ -58,84 +58,6 @@ export const genAVValueHTML = (value: IAVCellValue) => { return html; }; -const popDateMenu = (dateElement: HTMLElement) => { - const dateMenu = new Menu("custom-attr-av-date", () => { - const textElements = window.siyuan.menus.menu.element.querySelectorAll(".b3-text-field") as NodeListOf; - const hasEndDate = (window.siyuan.menus.menu.element.querySelector(".b3-switch") as HTMLInputElement).checked; - fetchPost("/api/av/setAttributeViewBlockAttr", { - avID: dateElement.dataset.avId, - keyID: dateElement.dataset.colId, - rowID: dateElement.dataset.blockId, - cellID: dateElement.dataset.id, - value: { - date: { - isNotEmpty: textElements[0].value !== "", - isNotEmpty2: textElements[1].value !== "", - content: new Date(textElements[0].value).getTime(), - content2: new Date(textElements[1].value).getTime(), - hasEndDate - } - } - }); - let dataHTML = ""; - if (textElements[0].value !== "") { - dataHTML = `${dayjs(textElements[0].value).format("YYYY-MM-DD HH:mm")}`; - } - if (hasEndDate && textElements[0].value !== "" && textElements[1].value !== "") { - dataHTML += `${dayjs(textElements[1].value).format("YYYY-MM-DD HH:mm")}`; - } - dateElement.innerHTML = dataHTML; - }); - if (dateMenu.isOpen) { - return; - } - const hasEndDate = dateElement.querySelector("svg"); - const timeElements = dateElement.querySelectorAll("span"); - dateMenu.addItem({ - iconHTML: "", - label: `` - }); - dateMenu.addItem({ - iconHTML: "", - label: `` - }); - dateMenu.addSeparator(); - dateMenu.addItem({ - iconHTML: "", - label: ``, - click(element, event) { - const switchElement = element.querySelector(".b3-switch") as HTMLInputElement; - if ((event.target as HTMLElement).tagName !== "INPUT") { - switchElement.checked = !switchElement.checked; - } else { - switchElement.outerHTML = ``; - } - window.siyuan.menus.menu.element.querySelectorAll('[type="datetime-local"]')[1].classList.toggle("fn__none"); - return true; - } - }); - dateMenu.addSeparator(); - dateMenu.addItem({ - icon: "iconTrashcan", - label: window.siyuan.languages.clear, - click() { - const textElements = window.siyuan.menus.menu.element.querySelectorAll(".b3-text-field") as NodeListOf; - textElements[0].value = ""; - textElements[1].value = ""; - (window.siyuan.menus.menu.element.querySelector(".b3-switch") as HTMLInputElement).checked = false; - } - }); - const datetRect = dateElement.getBoundingClientRect(); - dateMenu.open({ - x: datetRect.left, - y: datetRect.bottom - }); -} - export const renderAVAttribute = (element: HTMLElement, id: string, protyle?: IProtyle) => { fetchPost("/api/av/getAttributeViewKeys", {id}, (response) => { let html = ""; @@ -174,7 +96,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes const target = event.target as HTMLElement; const dateElement = hasClosestByAttribute(target, "data-type", "date"); if (dateElement) { - popDateMenu(dateElement); + popTextCell(protyle, [dateElement], "date"); event.stopPropagation(); event.preventDefault(); return; diff --git a/app/src/protyle/render/av/date.ts b/app/src/protyle/render/av/date.ts index 8b68c23da..01aea4fd0 100644 --- a/app/src/protyle/render/av/date.ts +++ b/app/src/protyle/render/av/date.ts @@ -1,6 +1,7 @@ import {transaction} from "../../wysiwyg/transaction"; import * as dayjs from "dayjs"; import {updateAttrViewCellAnimation} from "./action"; +import {genAVValueHTML} from "./blockAttr"; export const getDateHTML = (data: IAVTable, cellElements: HTMLElement[]) => { let hasEndDate = true; @@ -104,7 +105,7 @@ export const setDateValue = (options: { protyle: IProtyle, value: IAVCellDateValue }) => { - let cellIndex = 0; + let cellIndex: number; Array.from(options.cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => { if (item.dataset.id === options.cellElements[0].dataset.id) { cellIndex = index; @@ -120,11 +121,19 @@ export const setDateValue = (options: { const rowID = item.parentElement.dataset.id; options.data.view.rows.find(row => { if (row.id === rowID) { - cellData = row.cells[cellIndex]; - // 为空时 cellId 每次请求都不一致 - cellData.id = item.dataset.id; - if (!cellData.value) { - cellData.value = {}; + if (typeof cellIndex === "number") { + cellData = row.cells[cellIndex]; + // 为空时 cellId 每次请求都不一致 + cellData.id = item.dataset.id; + if (!cellData.value) { + cellData.value = {}; + } + } else { + cellData = row.cells.find(cellItem => { + if (item.dataset.id === cellItem.id) { + return true; + } + }); } oldValue = Object.assign({}, cellData.value.date); cellData.value.date = Object.assign(cellData.value.date || { @@ -153,7 +162,11 @@ export const setDateValue = (options: { date: oldValue } }); - updateAttrViewCellAnimation(item); + if (item.classList.contains("custom-attr__avvalue")) { + item.innerHTML = genAVValueHTML(cellData.value); + } else { + updateAttrViewCellAnimation(item); + } }); transaction(options.protyle, cellDoOperations, cellUndoOperations); };