134 lines
4.8 KiB
TypeScript
134 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import "@common/assets/styles/grid.css";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Button, Input, Label, LoadingWithAnimation } from "@common/components";
|
|
import { getCoreRowModel } from "@tanstack/react-table";
|
|
import { LinkApi, type Link, type LinkSearchParam } from "@/entities/link";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { columns } from "../model/table-columns";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { useDataTable } from "@/shared/lib";
|
|
|
|
function LinkPage() {
|
|
const router = useRouter();
|
|
const queryClient = useQueryClient();
|
|
|
|
const [linkSn, setLinkSn] = useState<string>('');
|
|
const [linkNm, setLinkNm] = useState<string>('');
|
|
|
|
const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
|
|
linkSn: '',
|
|
linkNm: ''
|
|
});
|
|
|
|
const query = useQuery({
|
|
queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, linkSearchParam],
|
|
queryFn: () => LinkApi.getLinkList(linkSearchParam),
|
|
});
|
|
|
|
const handleResetSearchParam = () => {
|
|
setLinkSn('');
|
|
setLinkNm('');
|
|
setLinkSearchParam({
|
|
...linkSearchParam,
|
|
linkSn: '',
|
|
linkNm: '',
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setLinkSearchParam({
|
|
...linkSearchParam,
|
|
linkSn,
|
|
linkNm
|
|
});
|
|
};
|
|
|
|
const handleRowClick = (link: Link) => {
|
|
queryClient.removeQueries({
|
|
queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`],
|
|
});
|
|
queryClient.removeQueries({
|
|
queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkInfo`],
|
|
});
|
|
router.push(`link/register/${link.link_sn}`);
|
|
};
|
|
|
|
const handleClickRegist = () => {
|
|
router.push('link/register');
|
|
};
|
|
|
|
const { tableComponent } = useDataTable({
|
|
query,
|
|
tableOptions: {
|
|
columns,
|
|
manualPagination: true,
|
|
enableMultiRowSelection: true,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
},
|
|
dataTableOptions: {
|
|
onRowClick: handleRowClick,
|
|
viewPagination: true,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className="card card-border !mt-6">
|
|
<div className="card card-border">
|
|
<form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
|
|
<Label htmlFor="liSnSearchInput" className="mr-2 text-label">
|
|
일련번호
|
|
</Label>
|
|
<Input
|
|
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
|
|
id="liSnSearchInput"
|
|
value={linkSn}
|
|
onChange={(e) => setLinkSn(e.target.value)}
|
|
autoComplete="off"
|
|
/>
|
|
<Label htmlFor="liNmSearchInput" className="mr-2 text-label">
|
|
연계 명
|
|
</Label>
|
|
<Input
|
|
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-2"
|
|
id="liNmSearchInput"
|
|
value={linkNm}
|
|
onChange={(e) => setLinkNm(e.target.value)}
|
|
autoComplete="off"
|
|
/>
|
|
<Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
|
|
초기화
|
|
</Button>
|
|
<Button className="h-[3.2rem]" type="submit">
|
|
조회
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
<div className="card card-border flex flex-col h-[calc(100vh-28rem)]">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">연계 목록</h3>
|
|
<div>
|
|
<Button onClick={handleClickRegist}>등록</Button>
|
|
</div>
|
|
</div>
|
|
<div className="card !m-[1.2rem] overflow-auto h-full !p-0">
|
|
{!query.isLoading ?
|
|
<div>{tableComponent}</div>
|
|
:
|
|
<div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
|
|
<div className="relative size-[5rem]">
|
|
<LoadingWithAnimation color="primary" />
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { LinkPage }; |