summaryrefslogtreecommitdiff
path: root/lib/form-list
diff options
context:
space:
mode:
authordujinkim <dujin.kim@dtsolution.co.kr>2025-06-01 13:52:21 +0000
committerdujinkim <dujin.kim@dtsolution.co.kr>2025-06-01 13:52:21 +0000
commitbac0228d21b7195065e9cddcc327ae33659c7bcc (patch)
tree8f3016ae4533c8706d0c00a605d9b1d41968c2bc /lib/form-list
parent2fdce8d7a57c792bba0ac36fa554dca9c9cc31e3 (diff)
(대표님) 20250601까지 작업사항
Diffstat (limited to 'lib/form-list')
-rw-r--r--lib/form-list/service.ts19
-rw-r--r--lib/form-list/table/formLists-table.tsx86
2 files changed, 51 insertions, 54 deletions
diff --git a/lib/form-list/service.ts b/lib/form-list/service.ts
index d49dc5fc..10dfd640 100644
--- a/lib/form-list/service.ts
+++ b/lib/form-list/service.ts
@@ -11,8 +11,8 @@ import { countFormLists, selectFormLists } from "./repository";
import { projects } from "@/db/schema";
export async function getFormLists(input: GetFormListsSchema) {
- return unstable_cache(
- async () => {
+ // return unstable_cache(
+ // async () => {
try {
const offset = (input.page - 1) * input.perPage;
const advancedTable = true;
@@ -33,6 +33,7 @@ export async function getFormLists(input: GetFormListsSchema) {
ilike(formListsView.formName, s),
ilike(formListsView.tagTypeLabel, s),
ilike(formListsView.classLabel, s),
+ ilike(formListsView.remark, s),
ilike(formListsView.projectName, s), // 뷰 테이블의 projectName 사용
ilike(formListsView.projectCode, s), // 뷰 테이블의 projectCode 사용
);
@@ -81,11 +82,11 @@ export async function getFormLists(input: GetFormListsSchema) {
// 에러 발생 시 디폴트
return { data: [], pageCount: 0 };
}
- },
- [JSON.stringify(input)], // 캐싱 키
- {
- revalidate: 3600,
- tags: ["form-lists"],
- }
- )();
+ // },
+ // [JSON.stringify(input)], // 캐싱 키
+ // {
+ // revalidate: 3600,
+ // tags: ["form-lists"],
+ // }
+ // )();
} \ No newline at end of file
diff --git a/lib/form-list/table/formLists-table.tsx b/lib/form-list/table/formLists-table.tsx
index a9a56338..ebe59063 100644
--- a/lib/form-list/table/formLists-table.tsx
+++ b/lib/form-list/table/formLists-table.tsx
@@ -28,9 +28,26 @@ interface ItemsTableProps {
export function FormListsTable({ promises }: ItemsTableProps) {
const { featureFlags } = useFeatureFlags()
-
- const [{ data, pageCount }] =
- React.use(promises)
+
+ // 1. 데이터 로딩 상태 관리 추가
+ const [isLoading, setIsLoading] = React.useState(true)
+ const [tableData, setTableData] = React.useState<{
+ data: FormListsView[]
+ pageCount: number
+ }>({ data: [], pageCount: 0 })
+
+ // 2. Promise 해결을 useEffect로 처리
+ React.useEffect(() => {
+ promises
+ .then(([result]) => {
+ setTableData(result)
+ setIsLoading(false)
+ })
+ // .catch((error) => {
+ // console.error('Failed to load table data:', error)
+ // setIsLoading(false)
+ // })
+ }, [promises])
const [rowAction, setRowAction] =
React.useState<DataTableRowAction<FormListsView> | null>(null)
@@ -40,32 +57,8 @@ export function FormListsTable({ promises }: ItemsTableProps) {
[setRowAction]
)
- /**
- * This component can render either a faceted filter or a search filter based on the `options` prop.
- *
- * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
- *
- * Each `option` object has the following properties:
- * @prop {string} label - The label for the filter option.
- * @prop {string} value - The value for the filter option.
- * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
- * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
- */
- const filterFields: DataTableFilterField<FormListsView>[] = [
+ const filterFields: DataTableFilterField<FormListsView>[] = []
-
- ]
-
- /**
- * Advanced filter fields for the data table.
- * These fields provide more complex filtering options compared to the regular filterFields.
- *
- * Key differences from regular filterFields:
- * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
- * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
- * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
- * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
- */
const advancedFilterFields: DataTableAdvancedFilterField<FormListsView>[] = [
{
id: "projectCode",
@@ -91,40 +84,39 @@ export function FormListsTable({ promises }: ItemsTableProps) {
id: "tagTypeLabel",
label: "TAG TYPE ID",
type: "text",
-
},
{
id: "classLabel",
label: "Class Description",
type: "text",
-
+ },
+ {
+ id: "ep",
+ label: "EP",
+ type: "text",
},
{
id: "remark",
label: "remark",
type: "text",
-
},
-
{
id: "createdAt",
label: "Created At",
type: "date",
-
},
{
id: "updatedAt",
label: "Updated At",
type: "date",
-
},
]
-
+ // 3. 로딩 중이거나 데이터가 없을 때 처리
const { table } = useDataTable({
- data,
+ data: tableData.data,
columns,
- pageCount,
+ pageCount: tableData.pageCount,
filterFields,
enablePinning: true,
enableAdvancedFilter: true,
@@ -137,13 +129,19 @@ export function FormListsTable({ promises }: ItemsTableProps) {
clearOnDefault: true,
})
+ // 4. 로딩 상태 표시
+ if (isLoading) {
+ return (
+ <div className="flex items-center justify-center h-32">
+ <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+ <span className="ml-2">Loading...</span>
+ </div>
+ )
+ }
+
return (
<>
- <DataTable
- table={table}
-
- >
-
+ <DataTable table={table}>
<DataTableAdvancedToolbar
table={table}
filterFields={advancedFilterFields}
@@ -151,14 +149,12 @@ export function FormListsTable({ promises }: ItemsTableProps) {
>
<FormListsTableToolbarActions table={table} />
</DataTableAdvancedToolbar>
-
</DataTable>
<ViewMetas
open={rowAction?.type === "items"}
onOpenChange={() => setRowAction(null)}
form={rowAction?.row.original ?? null}
/>
-
</>
)
-}
+} \ No newline at end of file