Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-26 00:44:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 sort https://github.com/siyuan-note/siyuan/issues/7536

Browse source
This commit is contained in:
Vanessa 2023-07-03 12:25:02 +08:00
parent e520e0aa18
commit a541961ee5
6 changed files with 89 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/src/protyle/render/av/action.ts
View file

@ -83,6 +83,15 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.stopPropagation();
return true;
}
const sortsElement = hasClosestByAttribute(event.target, "data-type", "av-sort");
if (sortsElement) {
openMenuPanel(protyle, blockElement, "sorts");
event.preventDefault();
event.stopPropagation();
return true;
}
const cellHeaderElement = hasClosestByClassName(event.target, "av__cellheader");
if (cellHeaderElement) {
showHeaderCellMenu(protyle, blockElement, cellHeaderElement.parentElement);
@ -90,6 +99,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.stopPropagation();
return true;
}
const cellElement = hasClosestByClassName(event.target, "av__cell");
if (cellElement && !cellElement.parentElement.classList.contains("av__row--header")) {
popTextCell(protyle, cellElement);

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

@ -3,7 +3,7 @@ import {fetchPost} from "../../../util/fetch";
import {addCol} from "./addCol";
import {getColIconByType} from "./col";
export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" = "config") => {
export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" = "config") => {
let avMenuPanel = document.querySelector(".av__panel");
if (avMenuPanel) {
avMenuPanel.remove();
@ -19,6 +19,8 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
html = getConfigHTML(data, tabRect);
} else if (type === "properties") {
html = getPropertiesHTML(data, tabRect);
} else if (type === "sorts") {
html = getSortsHTML(data, tabRect);
}
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">${html}</div>`);
avMenuPanel = document.querySelector(".av__panel");
@ -39,6 +41,22 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect);
event.stopPropagation();
break;
} else if (type === "goSorts") {
avMenuPanel.innerHTML = getSortsHTML(data, tabRect);
event.stopPropagation();
break;
} else if (type === "removeSorts") {
// TODO
event.stopPropagation();
break;
} else if (type === "addSort") {
// TODO
event.stopPropagation();
break;
} else if (type === "removeSort") {
// TODO
event.stopPropagation();
break;
} else if (type === "newCol") {
avMenuPanel.remove();
const addMenu = addCol(protyle, blockElement);
@ -163,7 +181,7 @@ const getConfigHTML = (data: IAV, tabRect: DOMRect) => {
<span class="b3-menu__accelerator">${data.filters.length}</span>
<svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
</button>
<button class="b3-menu__item">
<button class="b3-menu__item" data-type="goSorts">
<svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.sort}</span>
<span class="b3-menu__accelerator">${data.sorts.length}</span>
@ -178,6 +196,41 @@ const getConfigHTML = (data: IAV, tabRect: DOMRect) => {
</div>`;
};
const getSortsHTML = (data: IAV, tabRect: DOMRect) => {
let html = "";
const genSortItem = (id: string) => {
let sortHTML = ''
data.columns.forEach((item) => {
sortHTML += `<option value="${item.id}" ${item.id === id ? "checked" : ""}>${item.name}</option>`
})
}
data.sorts.forEach((item: IAVSort) => {
html += `<button class="b3-menu__item">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<select>
${genSortItem(item.column)}
</select>
<select>
<option value="ASC" ${item.order === "ASC" ? "checked" : ""}>${window.siyuan.languages.fileNameASC}</option>
<option value="DESC" ${item.order === "DESC" ? "checked" : ""}>${window.siyuan.languages.fileNameDESC}</option>
</select>
<svg class="b3-menu__action" data-type="removeSort"><use xlink:href="#iconTrashcan"></use></svg>
</button>`;
});
return `<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
${html}
<button class="b3-menu__item" data-type="addSort">
<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.new}</span>
</button>
<button class="b3-menu__item${html ? "" : " fn__none"}" data-type="removeSorts">
<svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.delete}</span>
</button>
</div>`;
}
const getPropertiesHTML = (data: IAV, tabRect: DOMRect) => {
let showHTML = "";
let hideHTML = "";
@ -212,9 +265,11 @@ ${hideHTML}`;
}
return `<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
<button class="b3-menu__item" data-type="goConfig">
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.back}</span>
<button class="b3-menu__item" data-type="nobg">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
<svg><use xlink:href="#iconLeft"></use></svg>
</span>
<span class="b3-menu__label ft__center">${window.siyuan.languages.attr}</span>
<svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
</button>
<button class="b3-menu__separator"></button>

9
app/src/types/index.d.ts vendored
View file

@ -37,7 +37,7 @@ type TEventBus = "ws-main" |
"open-menu-blockref" | "open-menu-fileannotationref" | "open-menu-tag" | "open-menu-link" | "open-menu-image" |
"open-menu-av" | "open-menu-content" |
"loaded-protyle"
type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block"| "mSelect"
type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block" | "mSelect"
declare module "blueimp-md5"
@ -826,7 +826,12 @@ interface IBazaarItem {
interface IAV {
columns: IAVColumn[],
filters: [],
sorts: [],
sorts: IAVSort[],
}
interface IAVSort {
column: string,
order: "ASC" | "DESC"
}
interface IAVColumn {