94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import type { PaginationState } from "@tanstack/react-table";
|
|
|
|
import { useCodeList } from "@/entities/code";
|
|
import type { EsntlAtchFileMngSearchParams } from "@/entities/esntl";
|
|
import {
|
|
Button,
|
|
Label,
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@common/components";
|
|
|
|
import { EsntlAtchFileList } from "./esntl-atch-file-list";
|
|
|
|
const ALL_DOC_SE_VALUE = "__ALL__";
|
|
const ESNTL_ATCH_FILE_ALL_DOC_SE = "";
|
|
|
|
const DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX = 0;
|
|
const DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE = 10;
|
|
const DEFAULT_ESNTL_ATCH_FILE_SORT = "regDt,desc";
|
|
|
|
const DEFAULT_SEARCH_PARAMS = {
|
|
page: DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX,
|
|
size: DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE,
|
|
sort: DEFAULT_ESNTL_ATCH_FILE_SORT,
|
|
};
|
|
|
|
function EsntlAtchFileMngPage() {
|
|
const { data: docSeCodes, isPending: isDocSeLoading } = useCodeList("ASDOCSE");
|
|
|
|
const [docSeComCd, setDocSeComCd] = useState(ESNTL_ATCH_FILE_ALL_DOC_SE);
|
|
const [pagination, setPagination] = useState<PaginationState>({
|
|
pageIndex: DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX,
|
|
pageSize: DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE,
|
|
});
|
|
const [searchParams, setSearchParams] =
|
|
useState<EsntlAtchFileMngSearchParams>(DEFAULT_SEARCH_PARAMS);
|
|
|
|
const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setPagination((prev) => ({ ...prev, pageIndex: DEFAULT_ESNTL_ATCH_FILE_PAGE_INDEX }));
|
|
setSearchParams({
|
|
...DEFAULT_SEARCH_PARAMS,
|
|
docSeComCd,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="card card-border !mt-6">
|
|
<div className="card card-border">
|
|
<form className="flex flex-wrap items-end gap-4 p-4" onSubmit={handleSearch}>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Label htmlFor="docSeComCd">문서구분</Label>
|
|
<Select
|
|
value={docSeComCd || ALL_DOC_SE_VALUE}
|
|
onValueChange={(value) =>
|
|
setDocSeComCd(value === ALL_DOC_SE_VALUE ? ESNTL_ATCH_FILE_ALL_DOC_SE : value)
|
|
}
|
|
disabled={isDocSeLoading}
|
|
>
|
|
<SelectTrigger id="docSeComCd" className="w-[20rem]">
|
|
<SelectValue placeholder={isDocSeLoading ? "로딩 중…" : "전체"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={ALL_DOC_SE_VALUE}>전체</SelectItem>
|
|
{docSeCodes?.map((item) => (
|
|
<SelectItem key={item.lwpoCd} value={item.lwpoCd}>
|
|
{item.lwpoCdNm}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button type="submit">조회</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<EsntlAtchFileList
|
|
searchParams={searchParams}
|
|
pagination={pagination}
|
|
onPaginationChange={setPagination}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { EsntlAtchFileMngPage };
|