0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/9888

Browse source
This commit is contained in:
Vanessa 2023-12-24 12:17:05 +08:00
parent 67af0fbe9a
commit e1d2188cba
3 changed files with 66 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/src/protyle/render/av/col.ts
View file

@ -8,6 +8,7 @@ import {getLabelByNumberFormat} from "./number";
import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action";
import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
import {focusBlock} from "../../util/selection";
import {openSearchAV, toggleUpdateRelationBtn} from "./relation";
export const duplicateCol = (options: {
protyle: IProtyle,
@ -148,22 +149,22 @@ export const getEditHTML = (options: {
</button>`;
} else if (colData.type === "relation") {
const isSelf = colData.relation?.avID === options.data.id;
html += `<button class="b3-menu__item" data-type="goSearchAV" data-old-value="${JSON.stringify(colData.relation)}">
html += `<button class="b3-menu__item" data-type="goSearchAV" data-old-value='${JSON.stringify(colData.relation || {})}'>
<span class="b3-menu__label">${window.siyuan.languages.relatedTo}</span>
<span class="b3-menu__accelerator">${isSelf ? window.siyuan.languages.thisDatabase : ""}</span>
<svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
</button>
<label class="b3-menu__item${(colData.relation?.isTwoWay && isSelf) ? " fn__none" : ""}">
<label class="b3-menu__item${!colData.relation || (colData.relation?.isTwoWay && isSelf) ? " fn__none" : ""}">
<span class="fn__flex-center">${window.siyuan.languages.backRelation}</span>
<svg class="b3-menu__icon b3-menu__icon--small fn__none"><use xlink:href="#iconHelp"></use></svg>
<span class="fn__space fn__flex-1"></span>
<input data-type="backRelation" type="checkbox" class="b3-switch b3-switch--menu" ${colData.relation?.isTwoWay ? "checked" : ""}>
</label>
<div class="b3-menu__item fn__flex-column${(colData.relation?.isTwoWay && isSelf) ? " fn__none" : ""}" data-type="nobg">
<input data-type="colName" style="margin: 8px 0" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.title}">
<div class="b3-menu__item fn__flex-column${!colData.relation || (colData.relation?.isTwoWay && isSelf) ? " fn__none" : ""}" data-type="nobg">
<input data-type="colName" style="margin-top: 8px" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.title}">
</div>
<div class="b3-menu__item fn__flex-column fn__none" data-type="nobg">
<button style="margin-bottom: 8px;" class="b3-button fn__block" data-type="updateRelation">${window.siyuan.languages.confirm}</button>
<button style="margin: 8px 0;" class="b3-button fn__block" data-type="updateRelation">${window.siyuan.languages.confirm}</button>
</div>`;
}
return `<div class="b3-menu__items">
@ -330,16 +331,17 @@ export const bindEditEvent = (options: {
const backRelationElement = options.menuElement.querySelector('[data-type="backRelation"]') as HTMLInputElement;
if (backRelationElement) {
backRelationElement.addEventListener("change", () => {
backRelationElement.parentElement.nextElementSibling.classList.toggle("fn__none");
toggleUpdateRelationBtn(options.menuElement, avID);
});
const oldValueStr = options.menuElement.querySelector('[data-type="goSearchAV" ]').getAttribute("data-old-value")
if (oldValueStr) {
const oldValue = JSON.parse(oldValueStr);
if (oldValue.isTwoWay) {
fetchPost("/api/av/getAttributeView", {id: ""}, (response) => {
console.log(response);
});
}
const goSearchElement = options.menuElement.querySelector('[data-type="goSearchAV"]') as HTMLElement;
const oldValue = JSON.parse(goSearchElement.getAttribute("data-old-value"))
if (oldValue.avID) {
fetchPost("/api/av/getAttributeView", {id: oldValue.avID}, (response) => {
console.log(response);
// TODO input old value
});
} else {
openSearchAV(avID, goSearchElement);
}
}
};
@ -443,7 +445,9 @@ export const addAttrViewColAnimation = (options: {
previousElement.insertAdjacentHTML("afterend", html);
});
window.siyuan.menus.menu.remove();
showColMenu(options.protyle, options.blockElement, options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${options.id}"]`));
if (options.type !== "relation") {
showColMenu(options.protyle, options.blockElement, options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${options.id}"]`));
}
};
export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElement: HTMLElement) => {

45
app/src/protyle/render/av/relation.ts
View file

@ -31,10 +31,14 @@ const genSearchList = (element: Element, keyword: string, avId: string, cb?: ()
})
}
const setDatabase = (element: HTMLElement, item: HTMLElement) => {
const setDatabase = (avId: string, element: HTMLElement, item: HTMLElement) => {
element.dataset.avId = item.dataset.avId;
element.dataset.blockId = item.dataset.blockId;
element.querySelector(".b3-menu__accelerator").textContent = item.querySelector(".b3-list-item__hinticon").classList.contains("fn__none") ? item.querySelector(".b3-list-item__text").textContent : window.siyuan.languages.thisDatabase
const menuElement = hasClosestByClassName(element, "b3-menu__items")
if (menuElement) {
toggleUpdateRelationBtn(menuElement, avId);
}
}
export const openSearchAV = (avId: string, target: HTMLElement) => {
@ -64,7 +68,7 @@ export const openSearchAV = (avId: string, target: HTMLElement) => {
if (event.key === "Enter") {
event.preventDefault();
event.stopPropagation();
setDatabase(target, listElement.querySelector(".b3-list-item--focus"));
setDatabase(avId, target, listElement.querySelector(".b3-list-item--focus"));
window.siyuan.menus.menu.remove();
}
});
@ -76,7 +80,7 @@ export const openSearchAV = (avId: string, target: HTMLElement) => {
const listItemElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
if (listItemElement) {
event.stopPropagation();
setDatabase(target, listItemElement)
setDatabase(avId, target, listItemElement)
window.siyuan.menus.menu.remove();
}
});
@ -111,6 +115,37 @@ export const updateRelation = (options: {
options.avElement.remove();
}
export const toggleUpdateRelationBtn = () => {
export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: string) => {
const searchElement = menuItemsElement.querySelector('.b3-menu__item[data-type="goSearchAV"]') as HTMLElement
const switchItemElement = searchElement.nextElementSibling;
const switchElement = switchItemElement.querySelector(".b3-switch") as HTMLInputElement;
const inputElement = switchItemElement.nextElementSibling as HTMLInputElement;
const btnElement = inputElement.nextElementSibling;
const oldValue = JSON.parse(searchElement.dataset.oldValue);
if (oldValue.avID) {
if (searchElement.dataset.avId !== avId) {
switchItemElement.classList.remove("fn__none");
if (switchElement.checked) {
inputElement.classList.remove("fn__none");
} else {
inputElement.classList.add("fn__none");
}
} else {
switchItemElement.classList.add("fn__none");
inputElement.classList.add("fn__none");
}
if (oldValue.avID !== searchElement.dataset.avId || oldValue.isTwoWay !== switchElement.checked || inputElement.dataset.oldValue !== inputElement.value) {
btnElement.classList.add("fn__none");
} else {
btnElement.classList.remove("fn__none");
}
} else if (searchElement.dataset.avId) {
switchItemElement.classList.remove("fn__none");
if (switchElement.checked) {
inputElement.classList.remove("fn__none");
} else {
inputElement.classList.add("fn__none");
}
btnElement.classList.remove("fn__none");
}
}

11
app/src/protyle/render/av/render.ts
View file

@ -7,6 +7,7 @@ import {focusBlock} from "../../util/selection";
import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
import {stickyRow} from "./row";
import {getCalcValue} from "./calc";
import {openMenuPanel} from "./openMenuPanel";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string) => {
let avElements: Element[] = [];
@ -292,14 +293,16 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation, isUndo: bool
item.removeAttribute("data-render");
const isCurrent = item.querySelector(".av__pulse"); // ctrl+D 后点击添加行
avRender(item, protyle, () => {
// https://github.com/siyuan-note/siyuan/issues/9599
if (!isUndo && operation.action === "insertAttrViewBlock" && operation.isDetached && isCurrent) {
popTextCell(protyle, [item.querySelector(`.av__row[data-id="${operation.srcIDs[0]}"] .av__cell[data-detached="true"]`)], "block");
}
if (operation.action === "insertAttrViewBlock") {
item.querySelectorAll(".av__cell--select").forEach((cellElement: HTMLElement) => {
cellElement.classList.remove("av__cell--select");
});
// https://github.com/siyuan-note/siyuan/issues/9599
if (!isUndo && operation.isDetached && isCurrent) {
popTextCell(protyle, [item.querySelector(`.av__row[data-id="${operation.srcIDs[0]}"] .av__cell[data-detached="true"]`)], "block");
}
} else if (operation.action === "addAttrViewCol") {
openMenuPanel({protyle, blockElement: item, type: "edit", colId: operation.id});
}
}, ["addAttrViewView", "duplicateAttrViewView"].includes(operation.action) ? operation.id :
(operation.action === "removeAttrViewView" ? null : undefined));