dn-react-router-toolkit 0.8.0 → 0.9.0

package/dist/table/index.d.mts

@@ -1,12 +1,10 @@
 export { BaseTableRepository, ColumnOf, FindAllOptions, InsertModelOf, SchemaOf, SelectModelOf, TableRepository } from './repository.mjs';
 export { TablePageButtons } from './buttons.mjs';
-export { TableItemLoaderOptions, tableItemloader } from './item_loader.mjs';
 export { tableLoader } from './loader.mjs';
-export { createTablePage } from './page.mjs';
 export { OrderedTableProps, Table, TableColumnOptions, TableColumnProps } from './table.mjs';
 export { TableLoaderOptions, loadTable } from './load_table.mjs';
 export { LoadedModel, TableForm, TablePageOptions } from './table_form.mjs';
-export { LoadedTable, useTable } from './use_table.mjs';
+export { TableLoaderData, useTable } from './use_table.mjs';
 import 'drizzle-orm';
 import 'drizzle-orm/node-postgres';
 import 'drizzle-orm/pg-core';

package/dist/table/index.d.ts

@@ -1,12 +1,10 @@
 export { BaseTableRepository, ColumnOf, FindAllOptions, InsertModelOf, SchemaOf, SelectModelOf, TableRepository } from './repository.js';
 export { TablePageButtons } from './buttons.js';
-export { TableItemLoaderOptions, tableItemloader } from './item_loader.js';
 export { tableLoader } from './loader.js';
-export { createTablePage } from './page.js';
 export { OrderedTableProps, Table, TableColumnOptions, TableColumnProps } from './table.js';
 export { TableLoaderOptions, loadTable } from './load_table.js';
 export { LoadedModel, TableForm, TablePageOptions } from './table_form.js';
-export { LoadedTable, useTable } from './use_table.js';
+export { TableLoaderData, useTable } from './use_table.js';
 import 'drizzle-orm';
 import 'drizzle-orm/node-postgres';
 import 'drizzle-orm/pg-core';

package/dist/table/index.js

@@ -24,9 +24,7 @@ __export(table_exports, {
   Table: () => Table,
   TableForm: () => TableForm,
   TablePageButtons: () => TablePageButtons,
-  createTablePage: () => createTablePage,
   loadTable: () => loadTable,
-  tableItemloader: () => tableItemloader,
   tableLoader: () => tableLoader,
   useTable: () => useTable
 });
@@ -79,6 +77,10 @@ var BaseTableRepository = class {
   async delete(pk) {
     await this.db.delete(this.schema).where((0, import_drizzle_orm.eq)(this.schema[this.pk], pk));
   }
+  async select(key) {
+    const rows = await this.db.select({ value: this.schema[key] }).from(this.schema).groupBy(this.schema[key]);
+    return rows.map((row) => row.value);
+  }
 };
 
 // src/table/buttons.tsx
@@ -154,22 +156,6 @@ function TablePageButtons({
   ] }) });
 }
 
-// src/table/item_loader.tsx
-var tableItemloader = ({
-  repository
-}) => {
-  return async (args) => {
-    const { params } = args;
-    if (params["itemId"] === "new") {
-      return { item: void 0 };
-    }
-    const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
-    return {
-      item
-    };
-  };
-};
-
 // src/table/load_table.tsx
 var import_drizzle_orm2 = require("drizzle-orm");
 async function loadTable({
@@ -180,16 +166,27 @@ async function loadTable({
   const searchParams = new URL(request.url).searchParams;
   const { where, searchKey, defaultOrderBy, defaultDirection } = options;
   const query = searchParams.get("query") ?? void 0;
-  const limit = Number(searchParams.get("limit") ?? "20");
+  const limit = Number(searchParams.get("limit") ?? "10");
   const offset = Number(searchParams.get("offset") ?? "0");
   const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
   const direction = searchParams.get("direction") ?? defaultDirection;
+  const filterWhere = Object.entries(options.filters ?? {}).map(([key, value]) => {
+    const param = searchParams.get(key);
+    if (param) {
+      return (0, import_drizzle_orm2.eq)(
+        repository.schema[key],
+        decodeURIComponent(param)
+      );
+    }
+    return void 0;
+  }).filter(Boolean);
   const whereClauses = (0, import_drizzle_orm2.and)(
     searchKey && query ? (0, import_drizzle_orm2.ilike)(
       repository.schema[searchKey],
       `%${query}%`
     ) : void 0,
-    ...where ?? []
+    ...filterWhere,
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({
@@ -199,6 +196,14 @@ async function loadTable({
     offset,
     where: whereClauses
   });
+  const filters = Object.fromEntries(
+    await Promise.all(
+      Object.keys(options.filters ?? {}).map(async (key) => {
+        const values = await repository.select(key);
+        return [key, values.filter(Boolean)];
+      })
+    )
+  );
   return {
     items,
     total,
@@ -206,7 +211,8 @@ async function loadTable({
     offset,
     orderBy,
     direction,
-    searchKey
+    searchKey,
+    filters
   };
 }
 
@@ -227,13 +233,6 @@ function tableLoader({
   };
 }
 
-// src/table/page.tsx
-var import_react_router5 = require("react-router");
-
-// src/table/table_form.tsx
-var import_react_router4 = require("react-router");
-var import_go2 = require("react-icons/go");
-
 // src/table/table.tsx
 var import_utils2 = require("dn-react-toolkit/utils");
 var import_go = require("react-icons/go");
@@ -248,7 +247,8 @@ function Table({
   limit,
   offset,
   orderBy,
-  direction
+  direction,
+  filters
 }) {
   const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
   const sortedArray = [...data];
@@ -273,8 +273,8 @@ function Table({
                 "button",
                 {
                   className: (0, import_utils2.cn)(
-                    orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
-                    "px-4 h-14 flex items-center w-full"
+                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
+                    "px-4 flex items-center w-full"
                   ),
                   onClick: () => {
                     let newDirection = "asc";
@@ -295,14 +295,45 @@ function Table({
             }
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: reactNode });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: (0, import_utils2.cn)("border-y font-normal"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Head, {}) }, key);
+          const filter = filters?.[key];
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "th",
+            {
+              className: (0, import_utils2.cn)("py-4 border-y font-normal align-top"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Head, {}),
+                filter && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-3 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "select",
+                  {
+                    className: "w-full h-10 px-1.5 border rounded-full outline-none",
+                    onChange: (e) => {
+                      const value2 = e.target.value;
+                      setSearchParams((prev) => {
+                        if (value2) {
+                          prev.set(key, encodeURIComponent(value2));
+                        } else {
+                          prev.delete(key);
+                        }
+                        return prev;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "\uC804\uCCB4" }),
+                      filter.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: option, children: option }, option))
+                    ]
+                  }
+                ) })
+              ]
+            },
+            key
+          );
         }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tbody", { children: [
           sortedArray.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "td",
             {
               colSpan: keys.length,
-              className: "px-4 h-14 text-neutral-400 text-center",
+              className: "px-4 h-20 text-gray-400 text-center",
               children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
             }
           ) }),
@@ -327,7 +358,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, {})
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, {});
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
@@ -337,20 +368,15 @@ function Table({
   );
 }
 
+// src/table/table_form.tsx
+var import_react_router4 = require("react-router");
+var import_go2 = require("react-icons/go");
+
 // src/table/use_table.tsx
 var import_react_router3 = require("react-router");
 function useTable() {
   const { table } = (0, import_react_router3.useLoaderData)();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-  return {
-    items,
-    total,
-    limit,
-    offset,
-    orderBy,
-    direction,
-    searchKey
-  };
+  return table;
 }
 
 // src/table/table_form.tsx
@@ -360,7 +386,16 @@ function TableForm({
   primaryKey = "id"
 }) {
   const { pathname } = (0, import_react_router4.useLocation)();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = useTable();
+  const {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  } = useTable();
   const navigate = (0, import_react_router4.useNavigate)();
   const search = (query) => {
     const searchParams2 = new URLSearchParams(window.location.search);
@@ -373,7 +408,7 @@ function TableForm({
     searchKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "form",
       {
-        className: "h-18 px-4 flex items-center border-t",
+        className: "h-20 px-4 flex items-center border-t",
         onSubmit: (e) => {
           e.preventDefault();
           const formData = new FormData(e.currentTarget);
@@ -410,7 +445,8 @@ function TableForm({
         limit,
         offset,
         orderBy,
-        direction
+        direction,
+        filters
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -424,42 +460,13 @@ function TableForm({
     )
   ] });
 }
-
-// src/table/page.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function createTablePage({
-  name,
-  columns,
-  primaryKey = "id"
-}) {
-  return function TablePage({
-    header: Header
-  }) {
-    const { pathname } = (0, import_react_router5.useLocation)();
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        Header,
-        {
-          title: name,
-          actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_router5.Link, { to: `${pathname}/new`, className: "button-primary", children: [
-            name,
-            " \uCD94\uAC00"
-          ] })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableForm, { columns, primaryKey }) })
-    ] });
-  };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BaseTableRepository,
   Table,
   TableForm,
   TablePageButtons,
-  createTablePage,
   loadTable,
-  tableItemloader,
   tableLoader,
   useTable
 });

package/dist/table/index.mjs

@@ -50,6 +50,10 @@ var BaseTableRepository = class {
   async delete(pk) {
     await this.db.delete(this.schema).where(eq(this.schema[this.pk], pk));
   }
+  async select(key) {
+    const rows = await this.db.select({ value: this.schema[key] }).from(this.schema).groupBy(this.schema[key]);
+    return rows.map((row) => row.value);
+  }
 };
 
 // src/table/buttons.tsx
@@ -125,25 +129,10 @@ function TablePageButtons({
   ] }) });
 }
 
-// src/table/item_loader.tsx
-var tableItemloader = ({
-  repository
-}) => {
-  return async (args) => {
-    const { params } = args;
-    if (params["itemId"] === "new") {
-      return { item: void 0 };
-    }
-    const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
-    return {
-      item
-    };
-  };
-};
-
 // src/table/load_table.tsx
 import {
   and,
+  eq as eq2,
   ilike
 } from "drizzle-orm";
 async function loadTable({
@@ -154,16 +143,27 @@ async function loadTable({
   const searchParams = new URL(request.url).searchParams;
   const { where, searchKey, defaultOrderBy, defaultDirection } = options;
   const query = searchParams.get("query") ?? void 0;
-  const limit = Number(searchParams.get("limit") ?? "20");
+  const limit = Number(searchParams.get("limit") ?? "10");
   const offset = Number(searchParams.get("offset") ?? "0");
   const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
   const direction = searchParams.get("direction") ?? defaultDirection;
+  const filterWhere = Object.entries(options.filters ?? {}).map(([key, value]) => {
+    const param = searchParams.get(key);
+    if (param) {
+      return eq2(
+        repository.schema[key],
+        decodeURIComponent(param)
+      );
+    }
+    return void 0;
+  }).filter(Boolean);
   const whereClauses = and(
     searchKey && query ? ilike(
       repository.schema[searchKey],
       `%${query}%`
     ) : void 0,
-    ...where ?? []
+    ...filterWhere,
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({
@@ -173,6 +173,14 @@ async function loadTable({
     offset,
     where: whereClauses
   });
+  const filters = Object.fromEntries(
+    await Promise.all(
+      Object.keys(options.filters ?? {}).map(async (key) => {
+        const values = await repository.select(key);
+        return [key, values.filter(Boolean)];
+      })
+    )
+  );
   return {
     items,
     total,
@@ -180,7 +188,8 @@ async function loadTable({
     offset,
     orderBy,
     direction,
-    searchKey
+    searchKey,
+    filters
   };
 }
 
@@ -201,13 +210,6 @@ function tableLoader({
   };
 }
 
-// src/table/page.tsx
-import { Link as Link3, useLocation as useLocation3 } from "react-router";
-
-// src/table/table_form.tsx
-import { useLocation as useLocation2, useNavigate, useSearchParams as useSearchParams3 } from "react-router";
-import { GoSearch } from "react-icons/go";
-
 // src/table/table.tsx
 import { cn as cn2 } from "dn-react-toolkit/utils";
 import { GoArrowDown, GoArrowUp } from "react-icons/go";
@@ -222,7 +224,8 @@ function Table({
   limit,
   offset,
   orderBy,
-  direction
+  direction,
+  filters
 }) {
   const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
   const sortedArray = [...data];
@@ -247,8 +250,8 @@ function Table({
                 "button",
                 {
                   className: cn2(
-                    orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
-                    "px-4 h-14 flex items-center w-full"
+                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
+                    "px-4 flex items-center w-full"
                   ),
                   onClick: () => {
                     let newDirection = "asc";
@@ -269,14 +272,45 @@ function Table({
             }
             return /* @__PURE__ */ jsx2(Fragment2, { children: reactNode });
           }
-          return /* @__PURE__ */ jsx2("th", { className: cn2("border-y font-normal"), children: /* @__PURE__ */ jsx2(Head, {}) }, key);
+          const filter = filters?.[key];
+          return /* @__PURE__ */ jsxs2(
+            "th",
+            {
+              className: cn2("py-4 border-y font-normal align-top"),
+              children: [
+                /* @__PURE__ */ jsx2(Head, {}),
+                filter && /* @__PURE__ */ jsx2("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs2(
+                  "select",
+                  {
+                    className: "w-full h-10 px-1.5 border rounded-full outline-none",
+                    onChange: (e) => {
+                      const value2 = e.target.value;
+                      setSearchParams((prev) => {
+                        if (value2) {
+                          prev.set(key, encodeURIComponent(value2));
+                        } else {
+                          prev.delete(key);
+                        }
+                        return prev;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2("option", { value: "", children: "\uC804\uCCB4" }),
+                      filter.map((option) => /* @__PURE__ */ jsx2("option", { value: option, children: option }, option))
+                    ]
+                  }
+                ) })
+              ]
+            },
+            key
+          );
         }) }) }),
         /* @__PURE__ */ jsxs2("tbody", { children: [
           sortedArray.length === 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2(
             "td",
             {
               colSpan: keys.length,
-              className: "px-4 h-14 text-neutral-400 text-center",
+              className: "px-4 h-20 text-gray-400 text-center",
               children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
             }
           ) }),
@@ -301,7 +335,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ jsx2(Content, {})
               }
-            ) : /* @__PURE__ */ jsx2(Content, {});
+            ) : /* @__PURE__ */ jsx2("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ jsx2(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ jsx2(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ jsx2("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
@@ -311,20 +345,15 @@ function Table({
   );
 }
 
+// src/table/table_form.tsx
+import { useLocation as useLocation2, useNavigate, useSearchParams as useSearchParams3 } from "react-router";
+import { GoSearch } from "react-icons/go";
+
 // src/table/use_table.tsx
 import { useLoaderData } from "react-router";
 function useTable() {
   const { table } = useLoaderData();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-  return {
-    items,
-    total,
-    limit,
-    offset,
-    orderBy,
-    direction,
-    searchKey
-  };
+  return table;
 }
 
 // src/table/table_form.tsx
@@ -334,7 +363,16 @@ function TableForm({
   primaryKey = "id"
 }) {
   const { pathname } = useLocation2();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = useTable();
+  const {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  } = useTable();
   const navigate = useNavigate();
   const search = (query) => {
     const searchParams2 = new URLSearchParams(window.location.search);
@@ -347,7 +385,7 @@ function TableForm({
     searchKey && /* @__PURE__ */ jsxs3(
       "form",
       {
-        className: "h-18 px-4 flex items-center border-t",
+        className: "h-20 px-4 flex items-center border-t",
         onSubmit: (e) => {
           e.preventDefault();
           const formData = new FormData(e.currentTarget);
@@ -384,7 +422,8 @@ function TableForm({
         limit,
         offset,
         orderBy,
-        direction
+        direction,
+        filters
       }
     ),
     /* @__PURE__ */ jsx3(
@@ -398,41 +437,12 @@ function TableForm({
     )
   ] });
 }
-
-// src/table/page.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function createTablePage({
-  name,
-  columns,
-  primaryKey = "id"
-}) {
-  return function TablePage({
-    header: Header
-  }) {
-    const { pathname } = useLocation3();
-    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-      /* @__PURE__ */ jsx4(
-        Header,
-        {
-          title: name,
-          actions: /* @__PURE__ */ jsxs4(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
-            name,
-            " \uCD94\uAC00"
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx4("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ jsx4(TableForm, { columns, primaryKey }) })
-    ] });
-  };
-}
 export {
   BaseTableRepository,
   Table,
   TableForm,
   TablePageButtons,
-  createTablePage,
   loadTable,
-  tableItemloader,
   tableLoader,
   useTable
 };

package/dist/table/load_table.d.mts

@@ -1,13 +1,16 @@
 import { SQLWrapper, InferSelectModel } from 'drizzle-orm';
-import { TableRepository, ColumnOf } from './repository.mjs';
 import { PgTableWithColumns } from 'drizzle-orm/pg-core';
+import { TableRepository, ColumnOf } from './repository.mjs';
 import 'drizzle-orm/node-postgres';
 
 type TableOptions<T extends PgTableWithColumns<any>> = {
-    where?: SQLWrapper[];
+    where?: SQLWrapper;
     searchKey?: ColumnOf<T>;
     defaultOrderBy: keyof InferSelectModel<T>;
     defaultDirection: "asc" | "desc";
+    filters?: {
+        [key in keyof InferSelectModel<T>]?: "auto";
+    };
 };
 type TableLoaderOptions<T extends PgTableWithColumns<any>, TSelect> = {
     repository: TableRepository<T, TSelect>;
@@ -25,6 +28,9 @@ declare function loadTable<T extends PgTableWithColumns<any>, TSelect>({ request
     orderBy: keyof T["_"]["columns"] & string;
     direction: "asc" | "desc";
     searchKey: ColumnOf<T> | undefined;
+    filters: {
+        [k: string]: unknown[];
+    };
 }>;
 
 export { type TableLoaderOptions, loadTable };

package/dist/table/load_table.d.ts

@@ -1,13 +1,16 @@
 import { SQLWrapper, InferSelectModel } from 'drizzle-orm';
-import { TableRepository, ColumnOf } from './repository.js';
 import { PgTableWithColumns } from 'drizzle-orm/pg-core';
+import { TableRepository, ColumnOf } from './repository.js';
 import 'drizzle-orm/node-postgres';
 
 type TableOptions<T extends PgTableWithColumns<any>> = {
-    where?: SQLWrapper[];
+    where?: SQLWrapper;
     searchKey?: ColumnOf<T>;
     defaultOrderBy: keyof InferSelectModel<T>;
     defaultDirection: "asc" | "desc";
+    filters?: {
+        [key in keyof InferSelectModel<T>]?: "auto";
+    };
 };
 type TableLoaderOptions<T extends PgTableWithColumns<any>, TSelect> = {
     repository: TableRepository<T, TSelect>;
@@ -25,6 +28,9 @@ declare function loadTable<T extends PgTableWithColumns<any>, TSelect>({ request
     orderBy: keyof T["_"]["columns"] & string;
     direction: "asc" | "desc";
     searchKey: ColumnOf<T> | undefined;
+    filters: {
+        [k: string]: unknown[];
+    };
 }>;
 
 export { type TableLoaderOptions, loadTable };