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 23:24:35 +08:00
parent 329f5c0b87
commit 44773ab354
3 changed files with 135 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/src/protyle/render/av/cell.ts
View file

@ -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
};
}
}

236
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -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,

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

@ -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 = `<button class="b3-menu__item">
<span class="b3-menu__label">${window.siyuan.languages.emptyContent}</span>
</button>`
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);
};