import { Button } from "devextreme-react";
import { getFullChildren } from "./data";
export const columns = (t, onShowSlice, commonCodeData, gridRef) => {
return [
{
dataField: "Code",
caption: t("code"),
alignment: "left",
hidingPriority: 2,
width: 300,
cellComponent: (cell) => {
const gridInstance = gridRef.current.instance;
const allRows = gridInstance.getVisibleRows();
return (
<>
<span
style={{
paddingLeft: `${
cell.data.data.Depth * 20 +
(!cell.data.data.HasChildren ? 19 : 0)
}px`,
}}
/>
{cell.data.data.HasChildren === 1 && (
<Button
id={`collapse-${cell.data.data.Code}`}
icon="spindown"
stylingMode="text"
style={{
color: "blue",
display: "none",
}}
onClick={async () => {
debugger;
const hideChildRows = (parentId) => {
const listIndexChild = allRows
.map((row, index) =>
row.data.GroupCode === parentId ? index : null
)
.filter((index) => index !== null);
listIndexChild.forEach((index) => {
const rowHide = gridInstance.getRowElement(index);
if (rowHide) {
rowHide[0].style.display = "none";
}
hideChildRows(allRows[index].data.Code);
});
};
hideChildRows(cell.data.data.Code);
document.getElementById(
`expand-${cell.data.data.Code}`
).style.display = "";
document.getElementById(
`collapse-${cell.data.data.Code}`
).style.display = "none";
}}
/>
)}
{cell.data.data.HasChildren === 1 && (
<Button
id={`expand-${cell.data.data.Code}`}
icon="spinnext"
stylingMode="text"
style={{
color: "blue",
}}
onClick={async () => {
debugger;
const listIndexChild = allRows
.map((row, index) =>
row.data.GroupCode === cell.data.data.Code ? index : null
)
.filter((index) => index !== null);
if (listIndexChild.length === 0) {
const listChild = await getFullChildren(
cell.data.data.Code,
cell.data.data.Depth
);
const indexParent = allRows.findIndex(
(item) => item.key === cell.data.row.key
);
// gridInstance
// .getDataSource()
// .store()
// .push(
// listChild.map((row, index) => ({
// type: "insert",
// data: row,
// index: indexParent + index + 1,
// }))
// );
const currentChanges =
gridInstance.option("editing.changes") || []; // Lấy danh sách thay đổi hiện tại
const newRows = listChild.map((row, index) => ({
type: "insert", // Loại thao tác là "insert"
data: row, // Dữ liệu của hàng mới
index: indexParent + index + 1, // Vị trí chèn vào (có thể thay đổi nếu cần)
}));
// Cập nhật danh sách thay đổi
gridInstance.option("editing.changes", [
...currentChanges, // Các thay đổi hiện tại
...newRows, // Các hàng mới sẽ được chèn
]);
} else {
listIndexChild.forEach((index) => {
const rowHide = gridInstance.getRowElement(index);
if (rowHide) rowHide[0].style.display = "";
});
const listCodeChild = listIndexChild.map(
(index) => allRows[index].data.Code
);
listCodeChild.forEach((id) => {
const collapseElement = document.getElementById(
`collapse-${id}`
);
const expandElement = document.getElementById(
`expand-${id}`
);
if (collapseElement) {
collapseElement.style.display = "none";
}
if (expandElement) {
expandElement.style.display = "";
}
});
}
debugger;
document.getElementById(
`expand-${cell.data.data.Code}`
).style.display = "none";
document.getElementById(
`collapse-${cell.data.data.Code}`
).style.display = "";
}}
/>
)}
<span>{cell?.data?.value}</span>
</>
);
},
},
{
dataField: "Name",
caption: t("name"),
alignment: "center",
width: 300,
},
{
dataField: "GroupCode",
caption: t("groupCode"),
alignment: "center",
width: 300,
},
{
dataField: "GroupNameFake",
lookup: {
dataSource: commonCodeData,
valueExpr: "Code",
displayExpr: "Name",
},
caption: t("groupName"),
alignment: "center",
width: 300,
},
{
dataField: "Remark",
caption: t("remark"),
alignment: "center",
width: 250,
},
{
dataField: "UseYN",
caption: t("useYN"),
alignment: "center",
width: 120,
},
{
dataField: "action",
caption: "",
alignment: "left",
allowFiltering: false,
width: "auto",
cellComponent: (cell) => {
return (
<>
<Button
icon="edit"
id={"buttonGrid"}
stylingMode="text"
style={{
color: "blue",
}}
onClick={() => {
const data = cell.data.row.data;
onShowSlice({
open: true,
initData: {
...data,
},
});
}}
/>
</>
);
},
},
];
};
export const columnFilter = [
{
dataField: "Code",
dataValue: "text",
},
{
dataField: "Name",
dataValue: "text",
},
{
dataField: "GroupCode",
dataValue: "text",
},
{
dataField: "GroupName",
dataValue: "text",
},
{
dataField: "Remark",
dataValue: "text",
},
{
dataField: "UseYN",
dataValue: "BOOL",
},
];