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

🎨 多行选中编辑资源/多选需统一

Browse source
This commit is contained in:
Vanessa 2023-09-23 09:57:10 +08:00
parent 293638a813
commit 3c5bd99175
4 changed files with 90 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/business/_color.scss
View file

@ -11,6 +11,7 @@
justify-content: center; justify-content: center;
background-color: var(--b3-theme-background); background-color: var(--b3-theme-background);
padding: 0; padding: 0;
border-radius: var(--b3-border-radius);
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;

55
app/src/protyle/render/av/asset.ts
View file

@ -112,7 +112,8 @@ const updateAssetCell = (options: {
const colId = options.cellElements[0].dataset.colId; const colId = options.cellElements[0].dataset.colId;
const cellDoOperations: IOperation[] = []; const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = [];
options.cellElements.forEach(item => { let newValue: IAVCellAssetValue[] = []
options.cellElements.forEach((item, elementIndex) => {
let cellData: IAVCell; let cellData: IAVCell;
const rowID = item.parentElement.dataset.id; const rowID = item.parentElement.dataset.id;
options.data.view.rows.find(row => { options.data.view.rows.find(row => {
@ -128,31 +129,41 @@ const updateAssetCell = (options: {
}); });
const oldValue = Object.assign([], cellData.value.mAsset); const oldValue = Object.assign([], cellData.value.mAsset);
if (options.removeContent) { if (options.removeContent) {
cellData.value.mAsset.find((oldItem, index) => { if (elementIndex === 0) {
if (oldItem.content === options.removeContent) { cellData.value.mAsset.find((oldItem, index) => {
cellData.value.mAsset.splice(index, 1); if (oldItem.content === options.removeContent) {
return true; cellData.value.mAsset.splice(index, 1);
}
});
} else {
options.value.forEach(newitem => {
if (!newitem.content) {
return;
}
const hasMatch = cellData.value.mAsset.find(oldItem => {
if (oldItem.content === newitem.content) {
oldItem.name = newitem.name;
oldItem.type = newitem.type;
return true; return true;
} }
}); });
if (!hasMatch) { newValue = cellData.value.mAsset;
if (newitem.type === "file" && !newitem.name) { } else {
newitem.name = newitem.content; cellData.value.mAsset = newValue;
}
} else {
if (elementIndex === 0) {
options.value.forEach(newitem => {
if (!newitem.content) {
return;
} }
cellData.value.mAsset.push(newitem); const hasMatch = cellData.value.mAsset.find(oldItem => {
} if (oldItem.content === newitem.content) {
}); oldItem.name = newitem.name;
oldItem.type = newitem.type;
return true;
}
});
if (!hasMatch) {
if (newitem.type === "file" && !newitem.name) {
newitem.name = newitem.content;
}
cellData.value.mAsset.push(newitem);
}
});
newValue = cellData.value.mAsset;
} else {
cellData.value.mAsset = newValue;
}
} }
cellDoOperations.push({ cellDoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",

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

@ -111,6 +111,8 @@ export const openMenuPanel = (options: {
type = "sorts"; type = "sorts";
} else if (targetElement.querySelector('[data-type="removeFilter"]')) { } else if (targetElement.querySelector('[data-type="removeFilter"]')) {
type = "filters"; type = "filters";
} else if (targetElement.querySelector('[data-type="editAssetItem"]')) {
type = "assets";
} else if (targetElement.querySelector('[data-type="setColOption"]')) { } else 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 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 changeData = data.view.columns.find((column) => column.id === colId).options;

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

@ -51,7 +51,8 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM
const colId = cellElements[0].dataset.colId; const colId = cellElements[0].dataset.colId;
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
cellElements.forEach(item => { let newData: IAVCellSelectValue[]
cellElements.forEach((item, elementIndex) => {
const rowID = item.parentElement.dataset.id; const rowID = item.parentElement.dataset.id;
const cellId = item.dataset.id; const cellId = item.dataset.id;
let cellData: IAVCell; let cellData: IAVCell;
@ -67,12 +68,17 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM
} }
}); });
const oldValue = Object.assign([], cellData.value.mSelect); const oldValue = Object.assign([], cellData.value.mSelect);
cellData.value.mSelect?.find((item: { content: string }, index: number) => { if (elementIndex === 0) {
if (item.content === target.dataset.content) { cellData.value.mSelect?.find((item: { content: string }, index: number) => {
cellData.value.mSelect.splice(index, 1); if (item.content === target.dataset.content) {
return true; cellData.value.mSelect.splice(index, 1);
} return true;
}); }
});
newData = cellData.value.mSelect;
} else {
cellData.value.mSelect = newData;
}
doOperations.push({ doOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
@ -330,7 +336,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
inputElement.select(); inputElement.select();
}; };
export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[]) => { export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[]) => {
const inputElement = menuElement.querySelector("input"); const inputElement = menuElement.querySelector("input");
const colId = cellElements[0].dataset.colId; const colId = cellElements[0].dataset.colId;
let colData: IAVColumn; let colData: IAVColumn;
@ -408,7 +414,8 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
const cellDoOperations: IOperation[] = []; const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = [];
cellElements.forEach(item => { let newValue: IAVCellSelectValue[]
cellElements.forEach((item, index) => {
let cellData: IAVCell; let cellData: IAVCell;
const rowID = item.parentElement.dataset.id; const rowID = item.parentElement.dataset.id;
data.view.rows.find(row => { data.view.rows.find(row => {
@ -425,24 +432,34 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
const oldValue = Object.assign([], cellData.value.mSelect); const oldValue = Object.assign([], cellData.value.mSelect);
if (colData.type === "mSelect") { if (colData.type === "mSelect") {
let hasOption = false; if (index === 0) {
cellData.value.mSelect.find((item) => { let hasOption = false;
if (item.content === currentElement.dataset.name) { cellData.value.mSelect.find((item) => {
hasOption = true; if (item.content === currentElement.dataset.name) {
return true; hasOption = true;
} return true;
}); }
if (!hasOption) {
cellData.value.mSelect.push({
color: currentElement.dataset.color,
content: currentElement.dataset.name
}); });
if (!hasOption) {
cellData.value.mSelect.push({
color: currentElement.dataset.color,
content: currentElement.dataset.name
});
}
newValue = cellData.value.mSelect
} else {
cellData.value.mSelect = newValue;
} }
} else { } else {
cellData.value.mSelect = [{ if (index === 0) {
color: currentElement.dataset.color, cellData.value.mSelect = [{
content: currentElement.dataset.name color: currentElement.dataset.color,
}]; content: currentElement.dataset.name
}];
newValue = cellData.value.mSelect;
} else {
cellData.value.mSelect = newValue;
}
} }
cellDoOperations.push({ cellDoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
@ -502,48 +519,24 @@ export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
} }
}); });
const commonOptions: { content: string, color: string }[][] = []; let allUniqueOptions: IAVCellSelectValue[] = [];
const allUniqueOptions: { content: string, color: string }[] = []; data.rows.find(row => {
cellElements.forEach((cellElement) => { if (cellElements[0].parentElement.dataset.id === row.id) {
data.rows.find(row => { row.cells.find(cell => {
if (cellElement.parentElement.dataset.id === row.id) { if (cell.id === cellElements[0].dataset.id) {
const commonOption: { content: string, color: string }[] = []; if (cell.value && cell.value.mSelect) {
row.cells.find(cell => { allUniqueOptions = cell.value.mSelect;
if (cell.id === cellElement.dataset.id) {
if (cell.value && cell.value.mSelect) {
cell.value.mSelect.forEach((item: { content: string, color: string }) => {
commonOption.push(item);
allUniqueOptions.push(item);
});
}
return true;
} }
}); return true;
commonOptions.push(commonOption); }
return true; });
} return true;
}); }
}); });
let selectedHTML = ""; let selectedHTML = "";
allUniqueOptions.forEach((unique) => { allUniqueOptions.forEach((unique) => {
let everyRowHas = true; selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
commonOptions.find(item => {
let hasContent = false;
item.find((option) => {
if (option.content === unique.content) {
hasContent = true;
return true;
}
});
if (!hasContent) {
everyRowHas = false;
return true;
}
});
if (everyRowHas && selectedHTML.indexOf(`data-content="${unique.content}"`) === -1) {
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
}
}); });
return `<div class="b3-menu__items"> return `<div class="b3-menu__items">