diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index d1499feaf..196822abc 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -70,11 +70,12 @@ const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) => { checked: cellElement.querySelector("use").getAttribute("xlink:href") === "#iconCheck" ? true : false } }; - }else if (colType === "relation") { + } else if (colType === "relation") { cellValue = { type: colType, 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), } }; } @@ -163,12 +164,10 @@ export const genCellValue = (colType: TAVCol, value: string | any) => { checked: value ? true : false } }; - }else if (colType === "relation") { + } else if (colType === "relation") { cellValue = { type: colType, - relation: { - blockIDs: value as string[], - } + relation: value }; } } diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index e497a6365..a92e10cde 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -145,17 +145,123 @@ export const openMenuPanel = (options: { if (!targetElement) { return; } - let type = "columns"; const isTop = targetElement.classList.contains("dragover__top"); + const sourceId = sourceElement.dataset.id; + const targetId = targetElement.dataset.id; if (targetElement.querySelector('[data-type="removeSort"]')) { - type = "sorts"; - } else if (targetElement.querySelector('[data-type="removeFilter"]')) { - type = "filters"; - } else if (targetElement.querySelector('[data-type="av-view-edit"]')) { - type = "switcher"; - } else if (targetElement.querySelector('[data-type="editAssetItem"]')) { - type = "assets"; - } else if (targetElement.querySelector('[data-type="setColOption"]')) { + const changeData = data.view.sorts; + const oldData = Object.assign([], changeData); + let sortFilter: IAVSort; + changeData.find((sort, index: number) => { + if (sort.column === sourceId) { + sortFilter = changeData.splice(index, 1)[0]; + return true; + } + }); + changeData.find((sort, index: number) => { + if (sort.column === targetId) { + if (isTop) { + changeData.splice(index, 0, sortFilter); + } else { + changeData.splice(index + 1, 0, sortFilter); + } + return true; + } + }); + + transaction(options.protyle, [{ + action: "setAttrViewSorts", + avID, + data: changeData + }], [{ + action: "setAttrViewSorts", + avID, + data: oldData + }]); + menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); + bindSortsEvent(options.protyle, menuElement, data); + return; + } + if (targetElement.querySelector('[data-type="removeFilter"]')) { + const changeData = data.view.filters; + const oldData = Object.assign([], changeData); + let targetFilter: IAVFilter; + changeData.find((filter, index: number) => { + if (filter.column === sourceId) { + targetFilter = changeData.splice(index, 1)[0]; + return true; + } + }); + changeData.find((filter, index: number) => { + if (filter.column === targetId) { + if (isTop) { + changeData.splice(index, 0, targetFilter); + } else { + changeData.splice(index + 1, 0, targetFilter); + } + return true; + } + }); + + transaction(options.protyle, [{ + action: "setAttrViewFilters", + avID, + data: changeData + }], [{ + action: "setAttrViewFilters", + avID, + data: oldData + }]); + menuElement.innerHTML = getFiltersHTML(data.view); + return; + } + if (targetElement.querySelector('[data-type="av-view-edit"]')) { + transaction(options.protyle, [{ + action: "sortAttrViewView", + avID, + id: sourceId, + previousID: isTop ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id") + }], [{ + action: "sortAttrViewView", + avID, + id: sourceId, + previousID: sourceElement.previousElementSibling?.getAttribute("data-id") + }]); + if (isTop) { + targetElement.before(sourceElement); + targetElement.classList.remove("dragover__top"); + } else { + targetElement.after(sourceElement); + targetElement.classList.remove("dragover__bottom"); + } + return; + } + if (targetElement.querySelector('[data-type="editAssetItem"]')) { + if (isTop) { + targetElement.before(sourceElement); + } else { + targetElement.after(sourceElement); + } + const replaceValue: IAVCellAssetValue[] = []; + Array.from(targetElement.parentElement.children).forEach((item: HTMLElement) => { + if (item.dataset.content) { + replaceValue.push({ + content: item.dataset.content, + name: item.dataset.name, + type: item.dataset.type as "image" | "file", + }); + } + }); + updateAssetCell({ + protyle: options.protyle, + data, + cellElements: options.cellElements, + type: "replace", + replaceValue + }); + return; + } + if (targetElement.querySelector('[data-type="setColOption"]')) { const colId = options.cellElements ? options.cellElements[0].dataset.colId : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"); const changeData = data.view.columns.find((column) => column.id === colId).options; const oldData = Object.assign([], changeData); @@ -200,121 +306,11 @@ export const openMenuPanel = (options: { } return; } - const sourceId = sourceElement.dataset.id; - const targetId = targetElement.dataset.id; - if (type === "sorts") { - const changeData = data.view.sorts; - const oldData = Object.assign([], changeData); - let sortFilter: IAVSort; - changeData.find((sort, index: number) => { - if (sort.column === sourceId) { - sortFilter = changeData.splice(index, 1)[0]; - return true; - } - }); - changeData.find((sort, index: number) => { - if (sort.column === targetId) { - if (isTop) { - changeData.splice(index, 0, sortFilter); - } else { - changeData.splice(index + 1, 0, sortFilter); - } - return true; - } - }); + if (targetElement.getAttribute("data-type") === "setRelationCell") { - transaction(options.protyle, [{ - action: "setAttrViewSorts", - avID, - data: changeData - }], [{ - action: "setAttrViewSorts", - avID, - data: oldData - }]); - menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); - bindSortsEvent(options.protyle, menuElement, data); return; } - if (type === "switcher") { - transaction(options.protyle, [{ - action: "sortAttrViewView", - avID, - id: sourceId, - previousID: isTop ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id") - }], [{ - action: "sortAttrViewView", - avID, - id: sourceId, - previousID: sourceElement.previousElementSibling?.getAttribute("data-id") - }]); - if (isTop) { - targetElement.before(sourceElement); - targetElement.classList.remove("dragover__top"); - } else { - targetElement.after(sourceElement); - targetElement.classList.remove("dragover__bottom"); - } - return; - } - if (type === "filters") { - const changeData = data.view.filters; - const oldData = Object.assign([], changeData); - let targetFilter: IAVFilter; - changeData.find((filter, index: number) => { - if (filter.column === sourceId) { - targetFilter = changeData.splice(index, 1)[0]; - return true; - } - }); - changeData.find((filter, index: number) => { - if (filter.column === targetId) { - if (isTop) { - changeData.splice(index, 0, targetFilter); - } else { - changeData.splice(index + 1, 0, targetFilter); - } - return true; - } - }); - transaction(options.protyle, [{ - action: "setAttrViewFilters", - avID, - data: changeData - }], [{ - action: "setAttrViewFilters", - avID, - data: oldData - }]); - menuElement.innerHTML = getFiltersHTML(data.view); - return; - } - if (type === "assets") { - if (isTop) { - targetElement.before(sourceElement); - } else { - targetElement.after(sourceElement); - } - const replaceValue: IAVCellAssetValue[] = []; - Array.from(targetElement.parentElement.children).forEach((item: HTMLElement) => { - if (item.dataset.content) { - replaceValue.push({ - content: item.dataset.content, - name: item.dataset.name, - type: item.dataset.type as "image" | "file", - }); - } - }); - updateAssetCell({ - protyle: options.protyle, - data, - cellElements: options.cellElements, - type: "replace", - replaceValue - }); - return; - } transaction(options.protyle, [{ action: "sortAttrViewCol", avID, diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts index 467f4cc8a..84293027a 100644 --- a/app/src/protyle/render/av/relation.ts +++ b/app/src/protyle/render/av/relation.ts @@ -260,23 +260,29 @@ export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLE if (!menuElement) { return } - const ids: string[] = []; + const newValue: { + blockIDs: string[] + contents?: string[] + } = { + blockIDs: [], + contents: [] + } Array.from(menuElement.children).forEach((item) => { const id = item.getAttribute("data-id") if (item.getAttribute("draggable") && id) { - ids.push(id); + newValue.blockIDs.push(id); + newValue.contents.push(item.textContent.trim()); } }) - const empty = `` const targetId = target.getAttribute("data-id") const separatorElement = menuElement.querySelector(".b3-menu__separator"); if (target.getAttribute("draggable")) { if (!separatorElement.nextElementSibling.getAttribute("data-id")) { separatorElement.nextElementSibling.remove(); } - ids.splice(ids.indexOf(targetId), 1); + const removeIndex = newValue.blockIDs.indexOf(targetId); + newValue.blockIDs.splice(removeIndex, 1); + newValue.contents.splice(removeIndex, 1); separatorElement.after(target); target.outerHTML = genSelectItemHTML("unselect", targetId, target.querySelector(".b3-menu__label").textContent); if (!separatorElement.previousElementSibling) { @@ -286,12 +292,13 @@ export const setRelationCell = (protyle: IProtyle, data: IAV, nodeElement: HTMLE if (!separatorElement.previousElementSibling.getAttribute("data-id")) { separatorElement.previousElementSibling.remove(); } - ids.push(targetId); + newValue.blockIDs.push(targetId); + newValue.contents.push(target.textContent.trim()); separatorElement.before(target); target.outerHTML = genSelectItemHTML("selected", targetId, target.querySelector(".b3-menu__label").textContent); if (!separatorElement.nextElementSibling) { separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty")); } } - updateCellsValue(protyle, nodeElement, ids); + updateCellsValue(protyle, nodeElement, newValue); };