Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-18 15:40:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ https://github.com/siyuan-note/siyuan/issues/8664

Browse source
This commit is contained in:
Vanessa 2023-07-11 22:48:48 +08:00
parent caf074185d
commit 0ec924e239
8 changed files with 244 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -246,17 +246,13 @@ export const updateAVName = (protyle: IProtyle, blockElement: Element) => {
return; return;
} }
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewName",
id: avId, id: avId,
data: { data: nameElement.textContent.trim(),
name: nameElement.textContent.trim(),
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewName",
id: avId, id: avId,
data: {
name: nameElement.dataset.title, name: nameElement.dataset.title,
}
}]); }]);
nameElement.dataset.title = nameElement.textContent.trim(); nameElement.dataset.title = nameElement.textContent.trim();
}; };

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

@ -105,20 +105,18 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
click() { click() {
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: response.data.id,
data: { viewID: response.data.viewID,
sorts: [{ data: [{
column: colId, column: colId,
order: "ASC" order: "ASC"
}] }]
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: response.data.id,
data: { viewID: response.data.viewID,
sorts: response.data.view.sorts data: response.data.view.sorts
}
}]); }]);
}); });
} }
@ -129,20 +127,18 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
click() { click() {
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: response.data.id,
data: { viewID: response.data.viewID,
sorts: [{ data: [{
column: colId, column: colId,
order: "DESC" order: "DESC"
}] }]
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: response.data.id,
data: { viewID: response.data.viewID,
sorts: response.data.view.sorts data: response.data.view.sorts
}
}]); }]);
}); });
} }
@ -152,9 +148,9 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
label: window.siyuan.languages.filter, label: window.siyuan.languages.filter,
click() { click() {
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
const avData = response.data.view as IAVTable; const avData = response.data as IAV;
let filter: IAVFilter; let filter: IAVFilter;
avData.filters.find((item) => { avData.view.filters.find((item) => {
if (item.column === colId) { if (item.column === colId) {
filter = item; filter = item;
return true; return true;
@ -166,19 +162,17 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
operator: "Contains", operator: "Contains",
value: getCellValue(type, "") value: getCellValue(type, "")
}; };
avData.filters.push(filter); avData.view.filters.push(filter);
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: avData.viewID,
filters: [filter] data: [filter]
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: avData.viewID,
filters: [] data: []
}
}]); }]);
} }
setFilter({ setFilter({

86
app/src/protyle/render/av/filter.ts
View file

@ -42,13 +42,13 @@ export const getCellValue = (colType: TAVCol, value: string) => {
export const setFilter = (options: { export const setFilter = (options: {
filter: IAVFilter, filter: IAVFilter,
protyle: IProtyle, protyle: IProtyle,
data: IAVTable, data: IAV,
target: HTMLElement, target: HTMLElement,
}) => { }) => {
const colType = Object.keys(options.filter.value)[0] as TAVCol; const colType = Object.keys(options.filter.value)[0] as TAVCol;
const rectTarget = options.target.getBoundingClientRect(); const rectTarget = options.target.getBoundingClientRect();
const menu = new Menu("set-filter-" + options.filter.column, () => { const menu = new Menu("set-filter-" + options.filter.column, () => {
const oldFilters = JSON.parse(JSON.stringify(options.data.filters)); const oldFilters = JSON.parse(JSON.stringify(options.data.view.filters));
let hasMatch = false; let hasMatch = false;
const cellValue = getCellValue(colType, textElement?.value || ""); const cellValue = getCellValue(colType, textElement?.value || "");
const newFilter: IAVFilter = { const newFilter: IAVFilter = {
@ -58,13 +58,13 @@ export const setFilter = (options: {
} }
let isSame = false; let isSame = false;
options.data.filters.find((filter, index) => { options.data.view.filters.find((filter, index) => {
if (filter.column === options.filter.column) { if (filter.column === options.filter.column) {
if (objEquals(filter, newFilter)) { if (objEquals(filter, newFilter)) {
isSame = true; isSame = true;
return true; return true;
} }
options.data.filters[index] = newFilter; options.data.view.filters[index] = newFilter;
hasMatch = true; hasMatch = true;
return true; return true;
} }
@ -73,21 +73,19 @@ export const setFilter = (options: {
return; return;
} }
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrView", action: "setAttrViewFilters",
id: options.data.id, avID: options.data.id,
data: { viewID: options.data.viewID,
filters: options.data.filters data: options.data.view.filters
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewFilters",
id: options.data.id, avID: options.data.id,
data: { viewID: options.data.viewID,
filters: oldFilters data: oldFilters
}
}]); }]);
const menuElement = hasClosestByClassName(options.target, "b3-menu"); const menuElement = hasClosestByClassName(options.target, "b3-menu");
if (menuElement) { if (menuElement) {
menuElement.innerHTML = getFiltersHTML(options.data); menuElement.innerHTML = getFiltersHTML(options.data.view);
} }
}); });
if (menu.isOpen) { if (menu.isOpen) {
@ -119,7 +117,7 @@ export const setFilter = (options: {
`; `;
break; break;
case "mSelect": case "mSelect":
options.data.columns.find((column) => { options.data.view.columns.find((column) => {
if (column.id === options.filter.column) { if (column.id === options.filter.column) {
colData = column; colData = column;
if (column.type === "select") { if (column.type === "select") {
@ -169,29 +167,27 @@ export const setFilter = (options: {
icon: "iconTrashcan", icon: "iconTrashcan",
label: window.siyuan.languages.delete, label: window.siyuan.languages.delete,
click() { click() {
const oldFilters = Object.assign([], options.data.filters); const oldFilters = Object.assign([], options.data.view.filters);
options.data.filters.find((item: IAVFilter, index: number) => { options.data.view.filters.find((item: IAVFilter, index: number) => {
if (item.column === options.filter.column) { if (item.column === options.filter.column) {
options.data.filters.splice(index, 1); options.data.view.filters.splice(index, 1);
return true; return true;
} }
}); });
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrView", action: "setAttrViewFilters",
id: options.data.id, avID: options.data.id,
data: { viewID: options.data.viewID,
filters: options.data.filters data: options.data.view.filters
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewFilters",
id: options.data.id, avID: options.data.id,
data: { viewID: options.data.viewID,
filters: oldFilters data: oldFilters
}
}]); }]);
const menuElement = hasClosestByClassName(options.target, "b3-menu"); const menuElement = hasClosestByClassName(options.target, "b3-menu");
if (menuElement) { if (menuElement) {
menuElement.innerHTML = getFiltersHTML(options.data); menuElement.innerHTML = getFiltersHTML(options.data.view);
} }
} }
}); });
@ -228,7 +224,7 @@ export const setFilter = (options: {
}; };
export const addFilter = (options: { export const addFilter = (options: {
data: IAVTable, data: IAV,
rect: DOMRect, rect: DOMRect,
menuElement: HTMLElement, menuElement: HTMLElement,
tabRect: DOMRect, tabRect: DOMRect,
@ -236,9 +232,9 @@ export const addFilter = (options: {
protyle: IProtyle protyle: IProtyle
}) => { }) => {
const menu = new Menu("av-add-filter"); const menu = new Menu("av-add-filter");
options.data.columns.forEach((column) => { options.data.view.columns.forEach((column) => {
let hasFilter = false; let hasFilter = false;
options.data.filters.find((filter) => { options.data.view.filters.find((filter) => {
if (filter.column === column.id) { if (filter.column === column.id) {
hasFilter = true; hasFilter = true;
return true; return true;
@ -249,27 +245,25 @@ export const addFilter = (options: {
label: column.name, label: column.name,
icon: getColIconByType(column.type), icon: getColIconByType(column.type),
click: () => { click: () => {
const oldFilters = Object.assign([], options.data.filters); const oldFilters = Object.assign([], options.data.view.filters);
const cellValue = getCellValue(column.type, ""); const cellValue = getCellValue(column.type, "");
options.data.filters.push({ options.data.view.filters.push({
column: column.id, column: column.id,
operator: "Contains", operator: "Contains",
value: cellValue, value: cellValue,
}); });
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrView", action: "setAttrViewFilters",
id: options.avId, avID: options.data.id,
data: { viewID: options.data.viewID,
filters: options.data.filters data: options.data.view.filters
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewFilters",
id: options.avId, avID: options.data.id,
data: { viewID: options.data.viewID,
filters: oldFilters data: oldFilters
}
}]); }]);
options.menuElement.innerHTML = getFiltersHTML(options.data); options.menuElement.innerHTML = getFiltersHTML(options.data.view);
setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height); setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height);
const filterElement = options.menuElement.querySelector(`[data-id="${column.id}"] .b3-chip`) as HTMLElement; const filterElement = options.menuElement.querySelector(`[data-id="${column.id}"] .b3-chip`) as HTMLElement;
setFilter({ setFilter({

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

@ -20,18 +20,18 @@ export const openMenuPanel = (protyle: IProtyle,
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
const avId = blockElement.getAttribute("data-av-id"); const avId = blockElement.getAttribute("data-av-id");
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
const data = response.data.view as IAVTable; const data = response.data as IAV;
let html; let html;
if (type === "config") { if (type === "config") {
html = getConfigHTML(data); html = getConfigHTML(data.view);
} else if (type === "properties") { } else if (type === "properties") {
html = getPropertiesHTML(data); html = getPropertiesHTML(data.view);
} else if (type === "sorts") { } else if (type === "sorts") {
html = getSortsHTML(data); html = getSortsHTML(data.view.columns, data.view.sorts);
} else if (type === "filters") { } else if (type === "filters") {
html = getFiltersHTML(data); html = getFiltersHTML(data.view);
} else if (type === "select") { } else if (type === "select") {
html = getSelectHTML(data, options); html = getSelectHTML(data.view, options);
} }
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel"> document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">
@ -44,7 +44,7 @@ export const openMenuPanel = (protyle: IProtyle,
if (options && options.cellElement) { if (options && options.cellElement) {
const cellRect = options.cellElement.getBoundingClientRect(); const cellRect = options.cellElement.getBoundingClientRect();
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height); setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
bindSelectEvent(protyle, data, menuElement, options); bindSelectEvent(protyle, data.view, menuElement, options);
menuElement.querySelector("input").select(); menuElement.querySelector("input").select();
menuElement.querySelector("input").focus(); menuElement.querySelector("input").focus();
} else { } else {
@ -79,7 +79,7 @@ export const openMenuPanel = (protyle: IProtyle,
} else if (targetElement.querySelector('[data-type="removeFilter"]')) { } else if (targetElement.querySelector('[data-type="removeFilter"]')) {
type = "filters"; type = "filters";
} else if (targetElement.querySelector('[data-type="setSelectCol"]')) { } else if (targetElement.querySelector('[data-type="setSelectCol"]')) {
const changeData = data.columns.find((column) => column.id === options.cellElement.dataset.colId).options; const changeData = data.view.columns.find((column) => column.id === options.cellElement.dataset.colId).options;
const oldData = Object.assign([], changeData); const oldData = Object.assign([], changeData);
let targetOption: { name: string, color: string }; let targetOption: { name: string, color: string };
changeData.find((option, index: number) => { changeData.find((option, index: number) => {
@ -109,14 +109,50 @@ export const openMenuPanel = (protyle: IProtyle,
parentID: data.id, parentID: data.id,
data: oldData, data: oldData,
}]); }]);
menuElement.innerHTML = getSelectHTML(data, options); menuElement.innerHTML = getSelectHTML(data.view, options);
bindSelectEvent(protyle, data, menuElement, options); bindSelectEvent(protyle, data.view, menuElement, options);
return; return;
} }
const sourceId = sourceElement.dataset.id; const sourceId = sourceElement.dataset.id;
const targetId = targetElement.dataset.id; const targetId = targetElement.dataset.id;
if (type !== "columns") { if (type === "sorts") {
const changeData = (type === "sorts" ? data.sorts : data.filters) as IAVFilter[]; 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(protyle, [{
action: "setAttrViewSorts",
avID: avId,
viewID: data.viewID,
data: changeData
}], [{
action: "setAttrViewSorts",
avID: avId,
viewID: data.viewID,
data: oldData
}]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data);
return;
}
if (type === "filters") {
const changeData = data.view.filters;
const oldData = Object.assign([], changeData); const oldData = Object.assign([], changeData);
let targetFilter: IAVFilter; let targetFilter: IAVFilter;
changeData.find((filter, index: number) => { changeData.find((filter, index: number) => {
@ -137,22 +173,17 @@ export const openMenuPanel = (protyle: IProtyle,
}); });
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: data.viewID,
[type]: changeData data: changeData
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: data.viewID,
[type]: oldData data: oldData
}
}]); }]);
menuElement.innerHTML = (type === "sorts" ? getSortsHTML(data) : getFiltersHTML(data)); menuElement.innerHTML = getFiltersHTML(data.view);
if (type === "sorts") {
bindSortsEvent(protyle, menuElement, data);
}
return; return;
} }
transaction(protyle, [{ transaction(protyle, [{
@ -167,23 +198,23 @@ export const openMenuPanel = (protyle: IProtyle,
id: sourceId, id: sourceId,
}]); }]);
let column: IAVColumn; let column: IAVColumn;
data.columns.find((item, index: number) => { data.view.columns.find((item, index: number) => {
if (item.id === sourceId) { if (item.id === sourceId) {
column = data.columns.splice(index, 1)[0]; column = data.view.columns.splice(index, 1)[0];
return true; return true;
} }
}); });
data.columns.find((item, index: number) => { data.view.columns.find((item, index: number) => {
if (item.id === targetId) { if (item.id === targetId) {
if (isTop) { if (isTop) {
data.columns.splice(index, 0, column); data.view.columns.splice(index, 0, column);
} else { } else {
data.columns.splice(index + 1, 0, column); data.view.columns.splice(index + 1, 0, column);
} }
return true; return true;
} }
}); });
menuElement.innerHTML = getPropertiesHTML(data); menuElement.innerHTML = getPropertiesHTML(data.view);
}); });
let dragoverElement: HTMLElement; let dragoverElement: HTMLElement;
avPanelElement.addEventListener("dragover", (event: DragEvent) => { avPanelElement.addEventListener("dragover", (event: DragEvent) => {
@ -229,37 +260,35 @@ export const openMenuPanel = (protyle: IProtyle,
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goConfig") { } else if (type === "goConfig") {
menuElement.innerHTML = getConfigHTML(data); menuElement.innerHTML = getConfigHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goProperties") { } else if (type === "goProperties") {
menuElement.innerHTML = getPropertiesHTML(data); menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goSorts") { } else if (type === "goSorts") {
menuElement.innerHTML = getSortsHTML(data); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data); bindSortsEvent(protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSorts") { } else if (type === "removeSorts") {
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: avId,
data: { viewID: data.viewID,
sorts: [] data: []
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: avId,
data: { viewID: data.viewID,
sorts: data.sorts data: data.view.sorts
}
}]); }]);
data.sorts = []; data.view.sorts = [];
menuElement.innerHTML = getSortsHTML(data); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data); bindSortsEvent(protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
@ -269,52 +298,48 @@ export const openMenuPanel = (protyle: IProtyle,
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSort") { } else if (type === "removeSort") {
const oldSorts = Object.assign([], data.sorts); const oldSorts = Object.assign([], data.view.sorts);
data.sorts.find((item: IAVSort, index: number) => { data.view.sorts.find((item: IAVSort, index: number) => {
if (item.column === target.parentElement.dataset.id) { if (item.column === target.parentElement.dataset.id) {
data.sorts.splice(index, 1); data.view.sorts.splice(index, 1);
return true; return true;
} }
}); });
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: avId,
data: { viewID: data.viewID,
sorts: data.sorts data: data.view.sorts
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewSorts",
id: avId, avID: avId,
data: { viewID: data.viewID,
sorts: oldSorts data: oldSorts
}
}]); }]);
menuElement.innerHTML = getSortsHTML(data); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data); bindSortsEvent(protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goFilters") { } else if (type === "goFilters") {
menuElement.innerHTML = getFiltersHTML(data); menuElement.innerHTML = getFiltersHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeFilters") { } else if (type === "removeFilters") {
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: data.viewID,
filters: [] data: []
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: data.viewID,
filters: data.filters data: data.view.filters
}
}]); }]);
data.filters = []; data.view.filters = [];
menuElement.innerHTML = getFiltersHTML(data); menuElement.innerHTML = getFiltersHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
@ -324,32 +349,30 @@ export const openMenuPanel = (protyle: IProtyle,
break; break;
} else if (type === "removeFilter") { } else if (type === "removeFilter") {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
const oldFilters = Object.assign([], data.filters); const oldFilters = Object.assign([], data.view.filters);
data.filters.find((item: IAVFilter, index: number) => { data.view.filters.find((item: IAVFilter, index: number) => {
if (item.column === target.parentElement.dataset.id) { if (item.column === target.parentElement.dataset.id) {
data.filters.splice(index, 1); data.view.filters.splice(index, 1);
return true; return true;
} }
}); });
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: data.viewID,
filters: data.filters data: data.view.filters
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewFilters",
id: avId, avID: avId,
data: { viewID: data.viewID,
filters: oldFilters data: oldFilters
}
}]); }]);
menuElement.innerHTML = getFiltersHTML(data); menuElement.innerHTML = getFiltersHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "setFilter") { } else if (type === "setFilter") {
data.filters.find((item: IAVFilter) => { data.view.filters.find((item: IAVFilter) => {
if (item.column === target.parentElement.parentElement.dataset.id) { if (item.column === target.parentElement.parentElement.dataset.id) {
setFilter({ setFilter({
filter: item, filter: item,
@ -376,7 +399,7 @@ export const openMenuPanel = (protyle: IProtyle,
} else if (type === "showAllCol") { } else if (type === "showAllCol") {
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
data.columns.forEach((item: IAVColumn) => { data.view.columns.forEach((item: IAVColumn) => {
if (item.hidden) { if (item.hidden) {
doOperations.push({ doOperations.push({
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
@ -395,7 +418,7 @@ export const openMenuPanel = (protyle: IProtyle,
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations); transaction(protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data); menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
} }
event.stopPropagation(); event.stopPropagation();
@ -403,7 +426,7 @@ export const openMenuPanel = (protyle: IProtyle,
} else if (type === "hideAllCol") { } else if (type === "hideAllCol") {
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
data.columns.forEach((item: IAVColumn) => { data.view.columns.forEach((item: IAVColumn) => {
if (!item.hidden && item.type !== "block") { if (!item.hidden && item.type !== "block") {
doOperations.push({ doOperations.push({
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
@ -422,7 +445,7 @@ export const openMenuPanel = (protyle: IProtyle,
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations); transaction(protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data); menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
} }
event.stopPropagation(); event.stopPropagation();
@ -440,8 +463,8 @@ export const openMenuPanel = (protyle: IProtyle,
parentID: avId, parentID: avId,
data: false data: false
}]); }]);
data.columns.find((item: IAVColumn) => item.id === colId).hidden = true; data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = true;
menuElement.innerHTML = getPropertiesHTML(data); menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
@ -458,22 +481,22 @@ export const openMenuPanel = (protyle: IProtyle,
parentID: avId, parentID: avId,
data: true data: true
}]); }]);
data.columns.find((item: IAVColumn) => item.id === colId).hidden = false; data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = false;
menuElement.innerHTML = getPropertiesHTML(data); menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "setSelectCol") { } else if (type === "setSelectCol") {
setSelectCol(protyle, data, options, target); setSelectCol(protyle, data.view, options, target);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "addSelectColAndCell") { } else if (type === "addSelectColAndCell") {
addSelectColAndCell(protyle, data, options, target, menuElement); addSelectColAndCell(protyle, data.view, options, target, menuElement);
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSelectCell") { } else if (type === "removeSelectCell") {
removeSelectCell(protyle, data, options, target.parentElement); removeSelectCell(protyle, data.view, options, target.parentElement);
event.stopPropagation(); event.stopPropagation();
break; break;
} }

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

@ -141,7 +141,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
lastElement = protyle.contentElement; lastElement = protyle.contentElement;
lastParentID = operation.parentID; lastParentID = operation.parentID;
const avId = operation.action === "setAttrView" ? operation.id : operation.parentID; const avId = operation.avID;
if (operation.action === "addAttrViewCol") { if (operation.action === "addAttrViewCol") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => {
item.removeAttribute("data-render"); item.removeAttribute("data-render");
@ -159,14 +159,14 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
(rowItem.querySelector(`[data-col-id="${operation.id}"]`) as HTMLElement).style.width = operation.data; (rowItem.querySelector(`[data-col-id="${operation.id}"]`) as HTMLElement).style.width = operation.data;
}); });
}); });
} else if (operation.action === "setAttrView" && typeof operation.data.name === "string") { } else if (operation.action === "setAttrViewName") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => {
const titleElement = item.querySelector(".av__title") as HTMLElement; const titleElement = item.querySelector(".av__title") as HTMLElement;
if (!titleElement || titleElement.textContent.trim() === operation.data.name) { if (!titleElement || titleElement.textContent.trim() === operation.data) {
return; return;
} }
titleElement.textContent = operation.data.name; titleElement.textContent = operation.data;
titleElement.dataset.title = operation.data.name; titleElement.dataset.title = operation.data;
}); });
} else { } else {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => {

64
app/src/protyle/render/av/sort.ts
View file

@ -4,7 +4,7 @@ import {transaction} from "../../wysiwyg/transaction";
import {setPosition} from "../../../util/setPosition"; import {setPosition} from "../../../util/setPosition";
export const addSort = (options: { export const addSort = (options: {
data: IAVTable, data: IAV,
rect: DOMRect, rect: DOMRect,
menuElement: HTMLElement, menuElement: HTMLElement,
tabRect: DOMRect, tabRect: DOMRect,
@ -12,9 +12,9 @@ export const addSort = (options: {
protyle: IProtyle protyle: IProtyle
}) => { }) => {
const menu = new Menu("av-add-sort"); const menu = new Menu("av-add-sort");
options.data.columns.forEach((column) => { options.data.view.columns.forEach((column) => {
let hasSort = false; let hasSort = false;
options.data.sorts.find((sort) => { options.data.view.sorts.find((sort) => {
if (sort.column === column.id) { if (sort.column === column.id) {
hasSort = true; hasSort = true;
return true; return true;
@ -25,25 +25,23 @@ export const addSort = (options: {
label: column.name, label: column.name,
icon: getColIconByType(column.type), icon: getColIconByType(column.type),
click: () => { click: () => {
const oldSorts = Object.assign([], options.data.sorts); const oldSorts = Object.assign([], options.data.view.sorts);
options.data.sorts.push({ options.data.view.sorts.push({
column: column.id, column: column.id,
order: "ASC", order: "ASC",
}); });
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrView", action: "setAttrViewSorts",
id: options.avId, avID: options.data.id,
data: { viewID: options.data.viewID,
sorts: options.data.sorts data: options.data.view.sorts
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewSorts",
id: options.avId, avID: options.data.id,
data: { viewID: options.data.viewID,
sorts: oldSorts data: oldSorts
}
}]); }]);
options.menuElement.innerHTML = getSortsHTML(options.data); options.menuElement.innerHTML = getSortsHTML(options.data.view.columns, options.data.view.sorts);
bindSortsEvent(options.protyle, options.menuElement, options.data); bindSortsEvent(options.protyle, options.menuElement, options.data);
setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height); setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height);
} }
@ -57,13 +55,13 @@ export const addSort = (options: {
}); });
}; };
export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAVTable) => { export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAV) => {
menuElement.querySelectorAll("select").forEach((item: HTMLSelectElement) => { menuElement.querySelectorAll("select").forEach((item: HTMLSelectElement) => {
item.addEventListener("change", () => { item.addEventListener("change", () => {
const colId = item.parentElement.getAttribute("data-id"); const colId = item.parentElement.getAttribute("data-id");
const oldSort = JSON.parse(JSON.stringify(data.sorts)); const oldSort = JSON.parse(JSON.stringify(data.view.sorts));
if (item.previousElementSibling.classList.contains("b3-menu__icon")) { if (item.previousElementSibling.classList.contains("b3-menu__icon")) {
data.sorts.find((sort: IAVSort) => { data.view.sorts.find((sort: IAVSort) => {
if (sort.column === colId) { if (sort.column === colId) {
sort.column = item.value; sort.column = item.value;
item.parentElement.setAttribute("data-id", item.value); item.parentElement.setAttribute("data-id", item.value);
@ -71,35 +69,33 @@ export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data
} }
}); });
} else { } else {
data.sorts.find((sort: IAVSort) => sort.column === colId).order = item.value as "ASC" | "DESC"; data.view.sorts.find((sort: IAVSort) => sort.column === colId).order = item.value as "ASC" | "DESC";
} }
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrView", action: "setAttrViewSorts",
id: data.id, avID: data.id,
data: { viewID: data.viewID,
sorts: data.sorts data: data.view.sorts
}
}], [{ }], [{
action: "setAttrView", action: "setAttrViewSorts",
id: data.id, avID: data.id,
data: { viewID: data.viewID,
sorts: oldSort data: oldSort
}
}]); }]);
}); });
}); });
}; };
export const getSortsHTML = (data: IAVTable) => { export const getSortsHTML = (columns: IAVColumn[], sorts: IAVSort[]) => {
let html = ""; let html = "";
const genSortItem = (id: string) => { const genSortItem = (id: string) => {
let sortHTML = ""; let sortHTML = "";
data.columns.forEach((item) => { columns.forEach((item) => {
sortHTML += `<option value="${item.id}" ${item.id === id ? "selected" : ""}>${item.name}</option>`; sortHTML += `<option value="${item.id}" ${item.id === id ? "selected" : ""}>${item.name}</option>`;
}); });
return sortHTML; return sortHTML;
}; };
data.sorts.forEach((item: IAVSort) => { sorts.forEach((item: IAVSort) => {
html += `<button draggable="true" class="b3-menu__item" data-id="${item.column}"> html += `<button draggable="true" class="b3-menu__item" data-id="${item.column}">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<select class="b3-select" style="margin: 4px 0"> <select class="b3-select" style="margin: 4px 0">
@ -122,7 +118,7 @@ export const getSortsHTML = (data: IAVTable) => {
</button> </button>
<button class="b3-menu__separator"></button> <button class="b3-menu__separator"></button>
${html} ${html}
<button class="b3-menu__item${data.sorts.length === data.columns.length ? " fn__none" : ""}" data-type="addSort"> <button class="b3-menu__item${sorts.length === columns.length ? " fn__none" : ""}" data-type="addSort">
<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.new}</span> <span class="b3-menu__label">${window.siyuan.languages.new}</span>
</button> </button>

2
app/src/protyle/wysiwyg/transaction.ts
View file

@ -653,7 +653,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
reloadProtyle(protyle, false); reloadProtyle(protyle, false);
} else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewColOptions", } else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewColOptions",
"updateAttrViewColOption", "updateAttrViewCell", "sortAttrViewRow", "sortAttrViewCol", "setAttrViewColHidden", "updateAttrViewColOption", "updateAttrViewCell", "sortAttrViewRow", "sortAttrViewCol", "setAttrViewColHidden",
"setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrView"].includes(operation.action)) { "setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrViewName"].includes(operation.action)) {
refreshAV(protyle, operation); refreshAV(protyle, operation);
} }
}; };

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

@ -32,7 +32,9 @@ type TOperation =
| "updateAttrViewColOptions" | "updateAttrViewColOptions"
| "removeAttrViewColOption" | "removeAttrViewColOption"
| "updateAttrViewColOption" | "updateAttrViewColOption"
| "setAttrView" | "setAttrViewName"
| "setAttrViewFilters"
| "setAttrViewSorts"
type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins" type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
type TCardType = "doc" | "notebook" | "all" type TCardType = "doc" | "notebook" | "all"
type TEventBus = "ws-main" | type TEventBus = "ws-main" |
@ -304,6 +306,8 @@ interface IScrollAttr {
interface IOperation { interface IOperation {
action: TOperation, // move， delete 不需要传 data action: TOperation, // move， delete 不需要传 data
id?: string, id?: string,
avID?: string, // av
viewID?: string, // av
data?: any, // updateAttr 时为 { old: IObject, new: IObject }, updateAttrViewCell 时为 {TAVCol: {content: string}} data?: any, // updateAttr 时为 { old: IObject, new: IObject }, updateAttrViewCell 时为 {TAVCol: {content: string}}
parentID?: string // 为 insertAttrViewBlock 传 avid parentID?: string // 为 insertAttrViewBlock 传 avid
previousID?: string previousID?: string
@ -842,6 +846,15 @@ interface IBazaarItem {
preferredFunding: string preferredFunding: string
} }
interface IAV {
id: string
name: string
view: IAVTable
viewID: string
viewType: string
views: IAVView[],
}
interface IAVView { interface IAVView {
name: string name: string
id: string id: string