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

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

View file

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

View file

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

View file

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

View file

@ -51,7 +51,8 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM
const colId = cellElements[0].dataset.colId;
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
cellElements.forEach(item => {
let newData: IAVCellSelectValue[]
cellElements.forEach((item, elementIndex) => {
const rowID = item.parentElement.dataset.id;
const cellId = item.dataset.id;
let cellData: IAVCell;
@ -67,12 +68,17 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM
}
});
const oldValue = Object.assign([], cellData.value.mSelect);
cellData.value.mSelect?.find((item: { content: string }, index: number) => {
if (item.content === target.dataset.content) {
cellData.value.mSelect.splice(index, 1);
return true;
}
});
if (elementIndex === 0) {
cellData.value.mSelect?.find((item: { content: string }, index: number) => {
if (item.content === target.dataset.content) {
cellData.value.mSelect.splice(index, 1);
return true;
}
});
newData = cellData.value.mSelect;
} else {
cellData.value.mSelect = newData;
}
doOperations.push({
action: "updateAttrViewCell",
@ -330,7 +336,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
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 colId = cellElements[0].dataset.colId;
let colData: IAVColumn;
@ -408,7 +414,8 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = [];
cellElements.forEach(item => {
let newValue: IAVCellSelectValue[]
cellElements.forEach((item, index) => {
let cellData: IAVCell;
const rowID = item.parentElement.dataset.id;
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);
if (colData.type === "mSelect") {
let hasOption = false;
cellData.value.mSelect.find((item) => {
if (item.content === currentElement.dataset.name) {
hasOption = true;
return true;
}
});
if (!hasOption) {
cellData.value.mSelect.push({
color: currentElement.dataset.color,
content: currentElement.dataset.name
if (index === 0) {
let hasOption = false;
cellData.value.mSelect.find((item) => {
if (item.content === currentElement.dataset.name) {
hasOption = true;
return true;
}
});
if (!hasOption) {
cellData.value.mSelect.push({
color: currentElement.dataset.color,
content: currentElement.dataset.name
});
}
newValue = cellData.value.mSelect
} else {
cellData.value.mSelect = newValue;
}
} else {
cellData.value.mSelect = [{
color: currentElement.dataset.color,
content: currentElement.dataset.name
}];
if (index === 0) {
cellData.value.mSelect = [{
color: currentElement.dataset.color,
content: currentElement.dataset.name
}];
newValue = cellData.value.mSelect;
} else {
cellData.value.mSelect = newValue;
}
}
cellDoOperations.push({
action: "updateAttrViewCell",
@ -502,48 +519,24 @@ export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
}
});
const commonOptions: { content: string, color: string }[][] = [];
const allUniqueOptions: { content: string, color: string }[] = [];
cellElements.forEach((cellElement) => {
data.rows.find(row => {
if (cellElement.parentElement.dataset.id === row.id) {
const commonOption: { content: string, color: string }[] = [];
row.cells.find(cell => {
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;
let allUniqueOptions: IAVCellSelectValue[] = [];
data.rows.find(row => {
if (cellElements[0].parentElement.dataset.id === row.id) {
row.cells.find(cell => {
if (cell.id === cellElements[0].dataset.id) {
if (cell.value && cell.value.mSelect) {
allUniqueOptions = cell.value.mSelect;
}
});
commonOptions.push(commonOption);
return true;
}
});
return true;
}
});
return true;
}
});
let selectedHTML = "";
allUniqueOptions.forEach((unique) => {
let everyRowHas = true;
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>`;
}
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">