Vanessa 2023-12-24 22:53:58 +08:00
parent 318156f25d
commit 4e87c679bb
2 changed files with 44 additions and 24 deletions

View file

@ -560,10 +560,10 @@ export const renderCell = (cellValue: IAVCellValue, wrap: boolean) => {
text = `<span class="av__celltext av__celltext--url" data-type="${cellValue.type}"${urlAttr}>${urlContent}</span>`;
} else if (cellValue.type === "block") {
if (cellValue?.isDetached) {
text = `<span class="av__celltext${cellValue?.isDetached ? "" : " av__celltext--ref"}">${cellValue.block.content || ""}</span>
text = `<span class="av__celltext">${cellValue.block.content || ""}</span>
<span class="b3-chip b3-chip--info b3-chip--small" data-type="block-more">${window.siyuan.languages.more}</span>`;
} else {
text = `<span data-type="block-ref" data-id="${cellValue.block.id}" data-subtype="s" class="av__celltext${cellValue?.isDetached ? "" : " av__celltext--ref"}">${cellValue.block.content || ""}</span>
text = `<span data-type="block-ref" data-id="${cellValue.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${cellValue.block.content || ""}</span>
<span class="b3-chip b3-chip--info b3-chip--small popover__block" data-id="${cellValue.block.id}" data-type="block-more">${window.siyuan.languages.update}</span>`;
}
} else if (cellValue.type === "number") {
@ -601,7 +601,7 @@ export const renderCell = (cellValue: IAVCellValue, wrap: boolean) => {
text += `<svg class="av__checkbox"><use xlink:href="#icon${cellValue?.checkbox?.checked ? "Check" : "Uncheck"}"></use></svg>`;
} else if (cellValue.type === "relation") {
cellValue?.relation?.contents?.forEach((item, index) => {
text += `<span data-id="${cellValue?.relation?.blockIDs[index]}">${item}</span>`;
text += `<span class="av__celltext--ref" style="margin-right: 8px" data-id="${cellValue?.relation?.blockIDs[index]}">${item}</span>`;
})
}
if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cellValue.type) &&

View file

@ -174,6 +174,27 @@ export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: str
}
}
const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, text?: string) => {
if (type === "selected") {
return `<button data-id="${id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<span class="b3-menu__label">${text}</span>
<svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>
</button>`
}
if (type === "empty") {
return `<button class="b3-menu__item">
<span class="b3-menu__label">${window.siyuan.languages.emptyContent}</span>
</button>`
}
if (type == "unselect") {
return `<button data-id="${id}" class="b3-menu__item" data-type="setRelationCell">
<span class="b3-menu__label">${text}</span>
<svg class="b3-menu__action"><use xlink:href="#iconAdd"></use></svg>
</button>`
}
}
export const bindRelationEvent = (options: {
protyle: IProtyle,
data: IAV,
@ -189,30 +210,29 @@ export const bindRelationEvent = (options: {
avData.view.columns.find((item, index) => {
if (item.type === "block") {
cellIndex = index
return;
return true;
}
})
let html = ""
let selectHTML = ""
avData.view.rows.forEach((item) => {
const text = item.cells[cellIndex].value.block.content || item.cells[cellIndex].value.block.id;
if (hasIds.includes(item.id)) {
selectHTML += `<button data-id="${item.id}" data-type="setRelationCell" data-type="setRelationCell" class="b3-menu__item" draggable="true">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<span class="b3-menu__label">${text}</span>
</button>`
} else {
html += `<button data-id="${item.id}" class="b3-menu__item" data-type="setRelationCell">
<span class="b3-menu__label">${text}</span>
</button>`
hasIds.forEach(hasId => {
if (hasId) {
avData.view.rows.find((item) => {
if (item.id === hasId) {
selectHTML += genSelectItemHTML("selected", item.id, item.cells[cellIndex].value.block.content || item.cells[cellIndex].value.block.id)
return true
}
})
}
})
const empty = `<button class="b3-menu__item">
<span class="b3-menu__label">${window.siyuan.languages.emptyContent}</span>
</button>`
options.menuElement.innerHTML = `<div class="b3-menu__items">${selectHTML || empty}
avData.view.rows.forEach((item) => {
if (!hasIds.includes(item.id)) {
html += genSelectItemHTML("unselect", item.id, item.cells[cellIndex].value.block.content || item.cells[cellIndex].value.block.id)
}
})
options.menuElement.innerHTML = `<div class="b3-menu__items">${selectHTML || genSelectItemHTML("empty")}
<button class="b3-menu__separator"></button>
${html || empty}</div>`
${html || genSelectItemHTML("empty")}</div>`
})
}
@ -258,9 +278,9 @@ export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLE
}
ids.splice(ids.indexOf(targetId), 1);
separatorElement.after(target);
// TODO
target.outerHTML = genSelectItemHTML("unselect", targetId, target.querySelector(".b3-menu__label").textContent);
if (!separatorElement.previousElementSibling) {
separatorElement.insertAdjacentHTML("beforebegin", empty);
separatorElement.insertAdjacentHTML("beforebegin", genSelectItemHTML("empty"));
}
} else {
if (!separatorElement.previousElementSibling.getAttribute("data-id")) {
@ -268,9 +288,9 @@ export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLE
}
ids.push(targetId);
separatorElement.before(target);
// TODO
target.outerHTML = genSelectItemHTML("selected", targetId, target.querySelector(".b3-menu__label").textContent);
if (!separatorElement.nextElementSibling) {
separatorElement.insertAdjacentHTML("afterend", empty);
separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
}
}
updateCellsValue(protyle, nodeElement, ids);