Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-20 00:20: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 21:34:22 +08:00
parent 33470c29ca
commit caf074185d
7 changed files with 34 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -117,7 +117,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
action: "setAttrView", action: "setAttrView",
id: avId, id: avId,
data: { data: {
sorts: response.data.av.sorts sorts: response.data.view.sorts
} }
}]); }]);
}); });
@ -141,7 +141,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
action: "setAttrView", action: "setAttrView",
id: avId, id: avId,
data: { data: {
sorts: response.data.av.sorts sorts: response.data.view.sorts
} }
}]); }]);
}); });
@ -152,7 +152,7 @@ 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.av as IAV; const avData = response.data.view as IAVTable;
let filter: IAVFilter; let filter: IAVFilter;
avData.filters.find((item) => { avData.filters.find((item) => {
if (item.column === colId) { if (item.column === colId) {

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

@ -42,7 +42,7 @@ export const getCellValue = (colType: TAVCol, value: string) => {
export const setFilter = (options: { export const setFilter = (options: {
filter: IAVFilter, filter: IAVFilter,
protyle: IProtyle, protyle: IProtyle,
data: IAV, data: IAVTable,
target: HTMLElement, target: HTMLElement,
}) => { }) => {
const colType = Object.keys(options.filter.value)[0] as TAVCol; const colType = Object.keys(options.filter.value)[0] as TAVCol;
@ -228,7 +228,7 @@ export const setFilter = (options: {
}; };
export const addFilter = (options: { export const addFilter = (options: {
data: IAV, data: IAVTable,
rect: DOMRect, rect: DOMRect,
menuElement: HTMLElement, menuElement: HTMLElement,
tabRect: DOMRect, tabRect: DOMRect,
@ -293,7 +293,7 @@ export const addFilter = (options: {
}); });
}; };
export const getFiltersHTML = (data: IAV) => { export const getFiltersHTML = (data: IAVTable) => {
let html = ""; let html = "";
const genFilterItem = (filter: IAVFilter) => { const genFilterItem = (filter: IAVFilter) => {
let filterHTML = ""; let filterHTML = "";

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

@ -20,7 +20,7 @@ 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.av as IAV; const data = response.data.view as IAVTable;
let html; let html;
if (type === "config") { if (type === "config") {
html = getConfigHTML(data); html = getConfigHTML(data);
@ -483,7 +483,7 @@ export const openMenuPanel = (protyle: IProtyle,
}); });
}; };
const getPropertiesHTML = (data: IAV) => { const getPropertiesHTML = (data: IAVTable) => {
let showHTML = ""; let showHTML = "";
let hideHTML = ""; let hideHTML = "";
data.columns.forEach((item: IAVColumn) => { data.columns.forEach((item: IAVColumn) => {
@ -554,7 +554,7 @@ ${hideHTML}
</button>`; </button>`;
}; };
const getConfigHTML = (data: IAV) => { const getConfigHTML = (data: IAVTable) => {
return `<button class="b3-menu__item" data-type="nobg"> return `<button class="b3-menu__item" data-type="nobg">
<span class="b3-menu__label">${window.siyuan.languages.config}</span> <span class="b3-menu__label">${window.siyuan.languages.config}</span>
<svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg> <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>

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

@ -19,7 +19,7 @@ export const avRender = (element: Element, cb?: () => void) => {
return; return;
} }
fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => { fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => {
const data = response.data.av as IAV; const data = response.data.view as IAVTable;
// header // header
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>'; let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>';
data.columns.forEach((column: IAVColumn) => { data.columns.forEach((column: IAVColumn) => {
@ -80,6 +80,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
}); });
tableHTML += "<div></div></div>"; tableHTML += "<div></div></div>";
}); });
let tabHTML = ""
response.data.views.forEach((item:IAVView) => {
tabHTML +=`<div class="item${item.id === response.data.viewID ? " item--focus" : ""}">
<svg class="item__graphic"><use xlink:href="#iconTable"></use></svg>
<span class="item__text">${item.name}</span>
</div>`
})
const paddingLeft = e.parentElement.style.paddingLeft; const paddingLeft = e.parentElement.style.paddingLeft;
const paddingRight = e.parentElement.style.paddingRight; const paddingRight = e.parentElement.style.paddingRight;
e.style.width = e.parentElement.clientWidth + "px"; e.style.width = e.parentElement.clientWidth + "px";
@ -87,10 +94,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
e.firstElementChild.outerHTML = `<div> e.firstElementChild.outerHTML = `<div>
<div class="av__header" style="padding-left: ${paddingLeft};padding-right: ${paddingRight};"> <div class="av__header" style="padding-left: ${paddingLeft};padding-right: ${paddingRight};">
<div class="layout-tab-bar fn__flex"> <div class="layout-tab-bar fn__flex">
<div class="item item--focus"> ${tabHTML}
<svg class="item__graphic"><use xlink:href="#iconTable"></use></svg>
<span class="item__text">${data.type}</span>
</div>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<span data-type="av-filter" class="block__icon block__icon--show b3-tooltips b3-tooltips__w${data.filters.length > 0 ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.filter}"> <span data-type="av-filter" class="block__icon block__icon--show b3-tooltips b3-tooltips__w${data.filters.length > 0 ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.filter}">
<svg><use xlink:href="#iconFilter"></use></svg> <svg><use xlink:href="#iconFilter"></use></svg>
@ -105,7 +109,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
</span> </span>
<div class="fn__space"></div> <div class="fn__space"></div>
</div> </div>
<div contenteditable="true" class="av__title" data-title="${data.name || ""}" data-tip="${window.siyuan.languages.title}">${data.name || ""}</div> <div contenteditable="true" class="av__title" data-title="${data.name || ""}" data-tip="${window.siyuan.languages.title}">${response.data.name || ""}</div>
<div class="av__counter fn__none"></div> <div class="av__counter fn__none"></div>
</div> </div>
<div class="av__scroll"> <div class="av__scroll">

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

@ -43,7 +43,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
return html; return html;
}; };
export const removeSelectCell = (protyle: IProtyle, data: IAV, options: { export const removeSelectCell = (protyle: IProtyle, data: IAVTable, options: {
cellElement: HTMLElement cellElement: HTMLElement
}, target: HTMLElement) => { }, target: HTMLElement) => {
if (!target) { if (!target) {
@ -100,7 +100,7 @@ export const removeSelectCell = (protyle: IProtyle, data: IAV, options: {
}]); }]);
} }
export const setSelectCol = (protyle: IProtyle, data: IAV, options: { export const setSelectCol = (protyle: IProtyle, data: IAVTable, options: {
cellElement: HTMLElement; cellElement: HTMLElement;
}, target: HTMLElement,) => { }, target: HTMLElement,) => {
const menuElement = hasClosestByClassName(target, "b3-menu"); const menuElement = hasClosestByClassName(target, "b3-menu");
@ -303,7 +303,7 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
inputElement.select(); inputElement.select();
}; };
export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, options: { export const bindSelectEvent = (protyle: IProtyle, data: IAVTable, menuElement: HTMLElement, options: {
cellElement: HTMLElement cellElement: HTMLElement
}) => { }) => {
const inputElement = menuElement.querySelector("input"); const inputElement = menuElement.querySelector("input");
@ -346,7 +346,7 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
}); });
}; };
export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: { export const addSelectColAndCell = (protyle: IProtyle, data: IAVTable, options: {
cellElement: HTMLElement cellElement: HTMLElement
}, currentElement: HTMLElement, menuElement: HTMLElement) => { }, currentElement: HTMLElement, menuElement: HTMLElement) => {
const rowId = options.cellElement.parentElement.dataset.id; const rowId = options.cellElement.parentElement.dataset.id;
@ -435,7 +435,7 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
} }
} }
export const getSelectHTML = (data: IAV, options: { cellElement: HTMLElement }) => { export const getSelectHTML = (data: IAVTable, options: { cellElement: HTMLElement }) => {
const cellId = options.cellElement.dataset.id; const cellId = options.cellElement.dataset.id;
const colId = options.cellElement.dataset["colId"]; const colId = options.cellElement.dataset["colId"];
const colData = data.columns.find(item => { const colData = data.columns.find(item => {

6
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: IAV, data: IAVTable,
rect: DOMRect, rect: DOMRect,
menuElement: HTMLElement, menuElement: HTMLElement,
tabRect: DOMRect, tabRect: DOMRect,
@ -57,7 +57,7 @@ export const addSort = (options: {
}); });
}; };
export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAV) => { export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAVTable) => {
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");
@ -90,7 +90,7 @@ export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data
}); });
}; };
export const getSortsHTML = (data: IAV) => { export const getSortsHTML = (data: IAVTable) => {
let html = ""; let html = "";
const genSortItem = (id: string) => { const genSortItem = (id: string) => {
let sortHTML = ""; let sortHTML = "";

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

@ -842,7 +842,13 @@ interface IBazaarItem {
preferredFunding: string preferredFunding: string
} }
interface IAV { interface IAVView {
name: string
id: string
type: string
}
interface IAVTable {
columns: IAVColumn[], columns: IAVColumn[],
filters: IAVFilter[], filters: IAVFilter[],
sorts: IAVSort[], sorts: IAVSort[],