diff --git a/apps/cs/src/entities/organization/api/organization-service.ts b/apps/cs/src/entities/organization/api/organization-service.ts index 3f8701045..456606076 100644 --- a/apps/cs/src/entities/organization/api/organization-service.ts +++ b/apps/cs/src/entities/organization/api/organization-service.ts @@ -5,6 +5,7 @@ import { type OrganizationFormData, type OrganizationService, type OrganizationTree, + type OrganizationTreeForDnd, } from "../model/organization-interface"; export class OrganizationApiService implements OrganizationService { @@ -22,8 +23,8 @@ export class OrganizationApiService implements OrganizationService { return response.data; } - public async createOrganization(form: OrganizationFormData): Promise { - await client.post(`${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}`, form); + public async createOrganization(data: OrganizationFormData): Promise { + await client.post(`${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}`, data); } public async deleteOrganization(ognzSn: number): Promise { @@ -44,11 +45,20 @@ export class OrganizationApiService implements OrganizationService { public async updateOrganization( ognzSn: number, - form: OrganizationFormData, + data: OrganizationFormData, ): Promise { await client.put( `${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}/${ognzSn}`, - form, + data, + ); + } + + public async updateOrganizationByDnd( + data: OrganizationTreeForDnd, + ): Promise { + await client.put( + `${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}/dnd/tree`, + data, ); } } diff --git a/apps/cs/src/entities/organization/index.ts b/apps/cs/src/entities/organization/index.ts index 7a064d06c..6b4cb0357 100644 --- a/apps/cs/src/entities/organization/index.ts +++ b/apps/cs/src/entities/organization/index.ts @@ -3,5 +3,6 @@ export { organizationFormSchema, type OrganizationTree, type OrganizationFormData, + type OrganizationTreeForDnd, } from "./model/organization-interface"; 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 0022b44f1..45591fc9e 100644 --- a/apps/cs/src/entities/organization/lib/utils.ts +++ b/apps/cs/src/entities/organization/lib/utils.ts @@ -1,5 +1,8 @@ import type { DropOptions, NodeModel } from "@minoru/react-dnd-treeview"; -import type { OrganizationTree } from "../model/organization-interface"; +import type { + OrganizationTree, + OrganizationTreeForDnd, +} from "../model/organization-interface"; export const generateOrganizationTreeData = ( data: OrganizationTree[], @@ -22,41 +25,39 @@ export const generateOrganizationTreeData = ( }, []); }; -export const generateNewOrganizationTreeData = ( +export const generateDndOrganizationTreeData = ( treeData: NodeModel[], options: DropOptions, -): OrganizationTree | null => { +): OrganizationTreeForDnd | 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, + const treeNode: OrganizationTreeForDnd = { + ognzSn: dragSource.data.ognzSn, + ognzNm: dragSource.data.ognzNm, + ognzExpln: dragSource.data.ognzExpln, upOgnzSn: dropTargetId === 0 ? null : (dropTargetId as number), sortSeq: newSortSeq, }; - const result: OrganizationTree = { + const childNodes = treeData.filter( + (node) => node.parent === dragSourceId && node.data, + ); + const result: OrganizationTreeForDnd = { ...treeNode, children: childNodes?.map((child) => ({ - ...child.data, + ognzSn: child.data?.ognzSn, ognzNm: child.data?.ognzNm ?? "", + ognzExpln: child.data?.ognzExpln, upOgnzSn: child.data?.upOgnzSn === 0 ? null : (dragSourceId as number), sortSeq: child.data?.sortSeq ?? 1, })) ?? [], @@ -66,12 +67,12 @@ export const generateNewOrganizationTreeData = ( }; export const handleDropNode = - (callback: (newTree: OrganizationTree) => void) => + (callback: (newTree: OrganizationTreeForDnd) => void) => ( newTree: NodeModel[], options: DropOptions, ) => { - const newTreeData = generateNewOrganizationTreeData(newTree, options); + const newTreeData = generateDndOrganizationTreeData(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 0d25b0b09..ab0983092 100644 --- a/apps/cs/src/entities/organization/model/organization-interface.ts +++ b/apps/cs/src/entities/organization/model/organization-interface.ts @@ -18,12 +18,14 @@ export type OrganizationFormData = z.infer; export type OrganizationTree = Organization & { children?: OrganizationTree[]; }; +export type OrganizationTreeForDnd = Omit; export interface OrganizationService { getOrganizationsTreeList(): Promise; getOrganizationInfo(ognzSn: number): Promise; - createOrganization(form: OrganizationFormData): Promise; + createOrganization(data: OrganizationFormData): Promise; deleteOrganization(ognzSn: number): Promise; updateOrganizationName(ognzSn: number, name: string): Promise; - updateOrganization(ognzSn: number, form: OrganizationFormData): Promise; + updateOrganization(ognzSn: number, data: OrganizationFormData): Promise; + updateOrganizationByDnd(data: OrganizationTreeForDnd): Promise; } diff --git a/apps/cs/src/pages/organization/ui/organization-page.tsx b/apps/cs/src/pages/organization/ui/organization-page.tsx index 4c8663f87..0be3770cc 100644 --- a/apps/cs/src/pages/organization/ui/organization-page.tsx +++ b/apps/cs/src/pages/organization/ui/organization-page.tsx @@ -15,6 +15,7 @@ import { handleDropNode, type OrganizationFormData, type OrganizationTree, + type OrganizationTreeForDnd, } from "@/entities/organization"; import { ENDPOINT } from "@/shared/config"; import { useAlertStore } from "@/shared/lib/use-alert-store"; @@ -95,6 +96,16 @@ function OrganizationPage() { }, }); + const { mutateAsync: updateOrganizationByDnd } = useMutation({ + mutationFn: (data: OrganizationTreeForDnd) => + OrganizationApi.updateOrganizationByDnd(data), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [ENDPOINT.CMS_SERVICE.ORGANIZATIONS], + }); + }, + }); + const form = useForm({ resolver: zodResolver(organizationFormSchema), defaultValues: { @@ -199,7 +210,7 @@ function OrganizationPage() { /> )} handleSelectNode={handleNodeSelect} - handleDropNode={handleDropNode(console.log)} + handleDropNode={handleDropNode(updateOrganizationByDnd)} updateNodeName={async (id, name) => { await updateOrganizationName({ ognzSn: id as number, name }); }}