diff --git a/apps/cs/src/entities/organization/index.ts b/apps/cs/src/entities/organization/index.ts index e04563805..7a064d06c 100644 --- a/apps/cs/src/entities/organization/index.ts +++ b/apps/cs/src/entities/organization/index.ts @@ -4,4 +4,4 @@ export { type OrganizationTree, type OrganizationFormData, } from "./model/organization-interface"; -export { generateOrganizationTreeData } from "./lib/utils"; +export { generateOrganizationTreeData, handleDropNode } from "./lib/utils"; diff --git a/apps/cs/src/entities/organization/lib/utils.ts b/apps/cs/src/entities/organization/lib/utils.ts index d923fc35b..0022b44f1 100644 --- a/apps/cs/src/entities/organization/lib/utils.ts +++ b/apps/cs/src/entities/organization/lib/utils.ts @@ -1,4 +1,4 @@ -import type { NodeModel } from "@minoru/react-dnd-treeview"; +import type { DropOptions, NodeModel } from "@minoru/react-dnd-treeview"; import type { OrganizationTree } from "../model/organization-interface"; export const generateOrganizationTreeData = ( @@ -21,3 +21,57 @@ export const generateOrganizationTreeData = ( return acc; }, []); }; + +export const generateNewOrganizationTreeData = ( + treeData: NodeModel[], + options: DropOptions, +): OrganizationTree | null => { + const { dragSourceId, dragSource, dropTargetId } = options; + + if (!dragSource?.data) return null; + + const siblings = treeData.filter((node) => node.parent === dropTargetId); + + const dragSourceIndex = siblings.findIndex( + (node) => node.id === dragSourceId, + ); + + const prevSibling = siblings[dragSourceIndex - 1]; + + const newSortSeq = + dragSourceIndex === 0 ? 1 : (prevSibling?.data?.sortSeq ?? 0) + 1; + + const childNodes = treeData.filter( + (node) => node.parent === dragSourceId && node.data, + ); + + const treeNode: OrganizationTree = { + ...dragSource.data, + upOgnzSn: dropTargetId === 0 ? null : (dropTargetId as number), + sortSeq: newSortSeq, + }; + + const result: OrganizationTree = { + ...treeNode, + children: + childNodes?.map((child) => ({ + ...child.data, + ognzNm: child.data?.ognzNm ?? "", + upOgnzSn: child.data?.upOgnzSn === 0 ? null : (dragSourceId as number), + sortSeq: child.data?.sortSeq ?? 1, + })) ?? [], + }; + + return result; +}; + +export const handleDropNode = + (callback: (newTree: OrganizationTree) => void) => + ( + newTree: NodeModel[], + options: DropOptions, + ) => { + const newTreeData = generateNewOrganizationTreeData(newTree, options); + if (!newTreeData) return; + callback(newTreeData); + }; diff --git a/apps/cs/src/entities/organization/model/organization-interface.ts b/apps/cs/src/entities/organization/model/organization-interface.ts index 755bcd77f..0d25b0b09 100644 --- a/apps/cs/src/entities/organization/model/organization-interface.ts +++ b/apps/cs/src/entities/organization/model/organization-interface.ts @@ -16,7 +16,7 @@ export const organizationFormSchema = organizationSchema.omit({ export type Organization = z.infer; export type OrganizationFormData = z.infer; export type OrganizationTree = Organization & { - children: OrganizationTree[]; + children?: OrganizationTree[]; }; export interface OrganizationService { diff --git a/apps/cs/src/pages/organization/ui/organization-page.tsx b/apps/cs/src/pages/organization/ui/organization-page.tsx index 96fe6da61..4c8663f87 100644 --- a/apps/cs/src/pages/organization/ui/organization-page.tsx +++ b/apps/cs/src/pages/organization/ui/organization-page.tsx @@ -10,8 +10,9 @@ import { Button } from "@common/components/ui"; import { DndTree, EditableNode } from "@/widgets/dnd-tree"; import { OrganizationApi, - generateOrganizationTreeData, organizationFormSchema, + generateOrganizationTreeData, + handleDropNode, type OrganizationFormData, type OrganizationTree, } from "@/entities/organization"; @@ -198,7 +199,7 @@ function OrganizationPage() { /> )} handleSelectNode={handleNodeSelect} - handleDropNode={() => {}} + handleDropNode={handleDropNode(console.log)} updateNodeName={async (id, name) => { await updateOrganizationName({ ognzSn: id as number, name }); }} diff --git a/apps/cs/src/widgets/dnd-tree/ui/custom-node.tsx b/apps/cs/src/widgets/dnd-tree/ui/custom-node.tsx index ccd5ce75e..8e124be62 100644 --- a/apps/cs/src/widgets/dnd-tree/ui/custom-node.tsx +++ b/apps/cs/src/widgets/dnd-tree/ui/custom-node.tsx @@ -5,7 +5,7 @@ import { cn } from "@common/components/lib"; import { EditableNode } from "./editable-node"; interface TreeData extends Record { - children: unknown[]; + children?: unknown[]; } type CustomNodeProps = { @@ -72,7 +72,7 @@ function CustomNode({ ) : ( <>
- {data && data.children.length > 0 && ( + {data && data.children && data.children.length > 0 && ( { - children: unknown[]; + children?: unknown[]; } type EditableNodeProps = { depth: number };