This commit is contained in:
parent
ac485ea545
commit
0d2147b294
3 changed files with 58 additions and 37 deletions
|
@ -69,9 +69,22 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement)
|
|||
checked: cellElement.querySelector("use").getAttribute("xlink:href") === "#iconCheck" ? true : false
|
||||
};
|
||||
} else if (colType === "relation") {
|
||||
const blockIDs: string[] = [];
|
||||
const contents: IAVCellValue[] = [];
|
||||
Array.from(cellElement.querySelectorAll("span")).forEach((item: HTMLElement) => {
|
||||
blockIDs.push(item.dataset.id);
|
||||
contents.push({
|
||||
isDetached: !item.classList.contains("av__celltext--ref"),
|
||||
block: {
|
||||
content: item.textContent,
|
||||
id: item.dataset.id,
|
||||
},
|
||||
type:"block"
|
||||
});
|
||||
});
|
||||
cellValue.relation = {
|
||||
blockIDs: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.getAttribute("data-id")),
|
||||
contents: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.textContent),
|
||||
blockIDs,
|
||||
contents
|
||||
};
|
||||
} else if (colType === "mAsset") {
|
||||
const mAsset: IAVCellAssetValue[] = [];
|
||||
|
@ -145,7 +158,7 @@ export const genCellValue = (colType: TAVCol, value: string | any) => {
|
|||
} else if (colType === "relation") {
|
||||
cellValue = {
|
||||
type: colType,
|
||||
relation: {blockIDs: [], contents: [value]}
|
||||
relation: {blockIDs: [value], contents: []}
|
||||
};
|
||||
}
|
||||
} else if (typeof value === "undefined" || !value) {
|
||||
|
@ -641,9 +654,18 @@ export const renderCell = (cellValue: IAVCellValue) => {
|
|||
text = text.substring(0, text.length - 2);
|
||||
}
|
||||
} else if (cellValue.type === "relation") {
|
||||
cellValue?.relation?.contents?.forEach((item, index) => {
|
||||
text += `<span class="av__celltext--ref" style="margin-right: 8px" data-id="${cellValue?.relation?.blockIDs[index]}">${item || "Untitled"}</span>`;
|
||||
cellValue?.relation?.contents?.forEach((item) => {
|
||||
if (item && item.block) {
|
||||
if (item.isDetached) {
|
||||
text += `<span class="av__celltext" data-id="${item.block.id}">${item.block.content || ""}</span>, `;
|
||||
} else {
|
||||
text += `<span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${item.block.content || "Untitled"}</span>, `;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (text && text.endsWith(", ")) {
|
||||
text = text.substring(0, text.length - 2);
|
||||
}
|
||||
}
|
||||
if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cellValue.type) &&
|
||||
cellValue && cellValue[cellValue.type as "url"].content) {
|
||||
|
|
|
@ -231,8 +231,7 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
|
|||
}
|
||||
};
|
||||
|
||||
const filterItem = (menuElement: Element, keyword: string) => {
|
||||
const hasIds = menuElement.firstElementChild.getAttribute("data-cell-ids").split(",");
|
||||
const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: string) => {
|
||||
fetchPost("/api/av/getAttributeViewPrimaryKeyValues", {
|
||||
id: menuElement.firstElementChild.getAttribute("data-av-id"),
|
||||
keyword,
|
||||
|
@ -240,16 +239,13 @@ const filterItem = (menuElement: Element, keyword: string) => {
|
|||
const cells = response.data.rows.values as IAVCellValue[] || [];
|
||||
let html = "";
|
||||
let selectHTML = "";
|
||||
hasIds.forEach(hasId => {
|
||||
if (hasId) {
|
||||
cells.find((item) => {
|
||||
if (item.block.id === hasId) {
|
||||
selectHTML += genSelectItemHTML("selected", item.block.id, item.isDetached, item.block.content || "Untitled");
|
||||
return true;
|
||||
}
|
||||
});
|
||||
const hasIds: string[] = []
|
||||
cellElement.querySelectorAll("span").forEach((item) => {
|
||||
if (item.textContent.indexOf(keyword) > -1) {
|
||||
hasIds.push(item.dataset.id);
|
||||
selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
|
||||
}
|
||||
});
|
||||
})
|
||||
cells.forEach((item) => {
|
||||
if (!hasIds.includes(item.block.id)) {
|
||||
html += genSelectItemHTML("unselect", item.block.id, item.isDetached, item.block.content || "Untitled");
|
||||
|
@ -267,7 +263,6 @@ export const bindRelationEvent = (options: {
|
|||
blockElement: Element,
|
||||
cellElements: HTMLElement[]
|
||||
}) => {
|
||||
const hasIds = options.menuElement.firstElementChild.getAttribute("data-cell-ids").split(",");
|
||||
fetchPost("/api/av/getAttributeViewPrimaryKeyValues", {
|
||||
id: options.menuElement.firstElementChild.getAttribute("data-av-id"),
|
||||
keyword: "",
|
||||
|
@ -275,16 +270,11 @@ export const bindRelationEvent = (options: {
|
|||
const cells = response.data.rows.values as IAVCellValue[] || [];
|
||||
let html = "";
|
||||
let selectHTML = "";
|
||||
hasIds.forEach(hasId => {
|
||||
if (hasId) {
|
||||
cells.find((item) => {
|
||||
if (item.block.id === hasId) {
|
||||
selectHTML += genSelectItemHTML("selected", item.block.id, item.isDetached, item.block.content || "Untitled");
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
const hasIds: string[] = []
|
||||
options.cellElements[0].querySelectorAll("span").forEach((item) => {
|
||||
hasIds.push(item.dataset.id);
|
||||
selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
|
||||
})
|
||||
cells.forEach((item) => {
|
||||
if (!hasIds.includes(item.block.id)) {
|
||||
html += genSelectItemHTML("unselect", item.block.id, item.isDetached, item.block.content || "Untitled");
|
||||
|
@ -321,12 +311,12 @@ ${html || genSelectItemHTML("empty")}`;
|
|||
if (event.isComposing) {
|
||||
return;
|
||||
}
|
||||
filterItem(options.menuElement, inputElement.value);
|
||||
filterItem(options.menuElement, options.cellElements[0], inputElement.value);
|
||||
event.stopPropagation();
|
||||
});
|
||||
inputElement.addEventListener("compositionend", (event) => {
|
||||
event.stopPropagation();
|
||||
filterItem(options.menuElement, inputElement.value);
|
||||
filterItem(options.menuElement, options.cellElements[0], inputElement.value);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
@ -340,11 +330,7 @@ export const getRelationHTML = (data: IAV, cellElements?: HTMLElement[]) => {
|
|||
}
|
||||
});
|
||||
if (colRelationData && colRelationData.avID) {
|
||||
let ids = "";
|
||||
cellElements[0].querySelectorAll("span").forEach((item) => {
|
||||
ids += `${item.getAttribute("data-id")},`;
|
||||
});
|
||||
return `<div data-av-id="${colRelationData.avID}" data-cell-ids="${ids}" class="fn__flex-column">
|
||||
return `<div data-av-id="${colRelationData.avID}" class="fn__flex-column">
|
||||
<div class="b3-menu__item fn__flex-column" data-type="nobg">
|
||||
<div class="b3-menu__label"> </div>
|
||||
<input class="b3-text-field fn__flex-shrink"/>
|
||||
|
@ -363,6 +349,13 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
|
|||
if (!menuElement) {
|
||||
return;
|
||||
}
|
||||
const rowElement = hasClosestByClassName(cellElements[0], "av__row");
|
||||
if (!rowElement) {
|
||||
return;
|
||||
}
|
||||
if (!nodeElement.contains(cellElements[0])) {
|
||||
cellElements[0] = nodeElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElements[0].dataset.colId}"]`) as HTMLElement;
|
||||
}
|
||||
const newValue = genCellValueByElement("relation", cellElements[0]).relation;
|
||||
if (target.classList.contains("b3-menu__item")) {
|
||||
const targetId = target.getAttribute("data-id");
|
||||
|
@ -384,7 +377,14 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
|
|||
separatorElement.previousElementSibling.remove();
|
||||
}
|
||||
newValue.blockIDs.push(targetId);
|
||||
newValue.contents.push(target.textContent.trim());
|
||||
newValue.contents.push({
|
||||
type: "block",
|
||||
block: {
|
||||
id: targetId,
|
||||
content: target.firstElementChild.textContent
|
||||
},
|
||||
isDetached: !target.firstElementChild.getAttribute("style")
|
||||
});
|
||||
separatorElement.before(target);
|
||||
target.outerHTML = genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent);
|
||||
if (!separatorElement.nextElementSibling) {
|
||||
|
@ -393,6 +393,5 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
|
|||
}
|
||||
menuElement.firstElementChild.classList.add("b3-menu__item--current");
|
||||
}
|
||||
menuElement.parentElement.setAttribute("data-cell-ids", newValue.blockIDs.join(","));
|
||||
updateCellsValue(protyle, nodeElement, newValue, cellElements);
|
||||
};
|
||||
|
|
2
app/src/types/index.d.ts
vendored
2
app/src/types/index.d.ts
vendored
|
@ -1168,7 +1168,7 @@ interface IAVCellValue {
|
|||
}
|
||||
relation?: {
|
||||
blockIDs: string[]
|
||||
contents?: string[]
|
||||
contents?: IAVCellValue[]
|
||||
}
|
||||
rollup?: {
|
||||
contents?: IAVCellValue[]
|
||||
|
|
Loading…
Add table
Reference in a new issue