115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
|
|
import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
|
|
import { Button, Input, Label } from "@common/components";
|
|
import { LwpoCodeApi, type LwpoCodeParams } from "@/entities/code";
|
|
import { ENDPOINT } from "@/shared/config";
|
|
import { useAlertStore, useDataTable } from "@/shared/lib";
|
|
import { columns } from "../model/lwpocode-table-columns";
|
|
import { LwpoCodeManagementDialog } from "./lwpocode-dialog";
|
|
|
|
type LwpoCodeSectionProps = {
|
|
upCd?: string;
|
|
};
|
|
|
|
function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
|
|
const alert = useAlertStore((state) => state.setMessage);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [lwpoCodeQuery, setLwpoCodeQuery] = useState<LwpoCodeParams>({
|
|
lwpoCdNm: "",
|
|
});
|
|
const [pagination, setPagination] = useState<PaginationState>({
|
|
pageIndex: 0,
|
|
pageSize: 10,
|
|
});
|
|
|
|
const query = useQuery({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, pagination],
|
|
queryFn: () =>
|
|
LwpoCodeApi.getLwpoCodeList({
|
|
...lwpoCodeQuery,
|
|
upCd,
|
|
page: pagination.pageIndex,
|
|
size: pagination.pageSize,
|
|
}),
|
|
enabled: !!upCd,
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
|
|
const { mutateAsync: codeRefreshAll } = useMutation({
|
|
mutationFn: LwpoCodeApi.codeRefreshAll,
|
|
onSuccess: () => {
|
|
alert("코드 갱신이 완료되었습니다.");
|
|
},
|
|
});
|
|
|
|
const { tableComponent } = useDataTable({
|
|
query,
|
|
tableOptions: {
|
|
columns,
|
|
state: { pagination },
|
|
manualPagination: true,
|
|
enableMultiRowSelection: false,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
onPaginationChange: setPagination,
|
|
getRowId: (row) => row.lwpoCd,
|
|
},
|
|
dataTableOptions: { viewPagination: true },
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
query.refetch();
|
|
};
|
|
|
|
useEffect(() => {
|
|
setPagination({ ...pagination, pageIndex: 0 });
|
|
}, [upCd]);
|
|
|
|
return (
|
|
<div className="flex-1">
|
|
<div className="card card-border">
|
|
<form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
|
|
<Label htmlFor="" className="mr-2 text-label">
|
|
하위코드명
|
|
</Label>
|
|
<Input
|
|
className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
|
|
value={lwpoCodeQuery.lwpoCdNm}
|
|
onChange={(e) =>
|
|
setLwpoCodeQuery({
|
|
...lwpoCodeQuery,
|
|
lwpoCdNm: e.target.value,
|
|
})
|
|
}
|
|
/>
|
|
<Button className="h-[3.2rem]" type="submit">
|
|
조회
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
<div className="card card-border">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">하위코드 목록</h3>
|
|
<div className="flex items-center gap-2">
|
|
<Button color="emerald" onClick={() => codeRefreshAll()}>
|
|
코드갱신
|
|
</Button>
|
|
<LwpoCodeManagementDialog
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
>
|
|
<Button>등록</Button>
|
|
</LwpoCodeManagementDialog>
|
|
</div>
|
|
</div>
|
|
<div className="card !m-4 h-[calc(100vh-35rem)] overflow-auto !p-0">
|
|
{tableComponent}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { LwpoCodeSection };
|