laif-ds 0.2.22 → 0.2.24

package/dist/components/ui/tables/data-table/components/data-table-filter-inputs.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsx as r, jsxs as j } from "react/jsx-runtime";
+import { AppSelect as S } from "../../../app-select.js";
+import { DatePicker as w } from "../../../date-picker.js";
+import { Input as y } from "../../../input.js";
+import { cn as m } from "../../../../../lib/utils.js";
+function K({
+  columnType: x,
+  value: e,
+  onChange: l,
+  operator: g,
+  listOptions: $ = [],
+  placeholder: C,
+  size: n = "sm",
+  className: d,
+  hasError: b = !1,
+  disabled: a = !1,
+  i18n: o
+}) {
+  const p = C || o?.filters.value || "Value", D = b ? "border-red-500" : "", f = b ? "border-red-500" : "";
+  if (g === "eq_null" || g === "n_eq_null" || g === "checked" || g === "unchecked")
+    return null;
+  switch (x) {
+    case "string":
+      return /* @__PURE__ */ r(
+        y,
+        {
+          size: n,
+          placeholder: p,
+          className: m(d, D),
+          value: e != null ? String(e) : "",
+          disabled: a,
+          onChange: (t) => l(t.target.value)
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ r(
+        y,
+        {
+          size: n,
+          type: "number",
+          placeholder: p,
+          className: m(d, D),
+          value: e != null ? String(e) : "",
+          disabled: a,
+          onChange: (t) => l(Number(t.target.value))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ r(
+        S,
+        {
+          isSingleSelectClearable: !0,
+          size: n,
+          placeholder: p,
+          className: m(d, f),
+          options: [
+            { value: "true", label: o?.booleanOperators.true || "True" },
+            { value: "false", label: o?.booleanOperators.false || "False" }
+          ],
+          value: e === !0 ? "true" : e === !1 ? "false" : void 0,
+          disabled: a,
+          onValueChange: (t) => {
+            l(t === "true" ? !0 : t === "false" ? !1 : void 0);
+          }
+        },
+        `boolean-${e}`
+      );
+    case "list_single_select":
+      return /* @__PURE__ */ r(
+        S,
+        {
+          searchable: !0,
+          isSingleSelectClearable: !0,
+          size: n,
+          placeholder: o?.filters.searchPlaceholder || p,
+          className: m(d, f),
+          options: $,
+          value: Array.isArray(e) || typeof e == "boolean" ? void 0 : e,
+          disabled: a,
+          onValueChange: l
+        }
+      );
+    case "list_multi_select":
+      return /* @__PURE__ */ r(
+        S,
+        {
+          multiple: !0,
+          searchable: !0,
+          size: n,
+          placeholder: o?.filters.searchPlaceholder || p,
+          className: m(d, f),
+          options: $,
+          value: Array.isArray(e) ? e : [],
+          disabled: a,
+          onValueChange: l
+        }
+      );
+    case "date":
+      const M = (t) => {
+        const s = t ? `${t.getFullYear()}-${(t.getMonth() + 1).toString().padStart(2, "0")}-${t.getDate().toString().padStart(2, "0")}` : void 0;
+        l(s);
+      }, F = e && typeof e == "string" ? new Date(e) : void 0;
+      return /* @__PURE__ */ r(
+        w,
+        {
+          value: F,
+          onChange: M,
+          placeholder: o?.filters.selectDate || "Select date",
+          buttonVariant: "outline",
+          size: n,
+          dateFormat: "dd/MM/yyyy",
+          disabled: a
+        }
+      );
+    case "datetime":
+      const V = (t, s) => {
+        let c;
+        if (t) {
+          const h = s || "00:00", [I, N] = h.split(":"), i = new Date(t);
+          i.setHours(parseInt(I, 10), parseInt(N, 10), 0, 0);
+          const _ = i.getFullYear(), P = (i.getMonth() + 1).toString().padStart(2, "0"), A = i.getDate().toString().padStart(2, "0"), H = i.getHours().toString().padStart(2, "0"), k = i.getMinutes().toString().padStart(2, "0"), O = i.getSeconds().toString().padStart(2, "0");
+          c = `${_}-${P}-${A}T${H}:${k}:${O}.000000`;
+        }
+        l(c);
+      }, u = e && typeof e == "string" ? (() => {
+        if (e.includes("T")) {
+          const t = e.split("T")[0];
+          if (t.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            const [s, c, h] = t.split("-").map(Number);
+            return new Date(s, c - 1, h);
+          }
+        }
+        return new Date(e);
+      })() : void 0, T = u ? (() => {
+        if (typeof e == "string" && e.includes("T")) {
+          const t = e.split("T")[1];
+          if (t) {
+            const c = t.split(".")[0].replace("Z", "");
+            if (c.match(/^\d{2}:\d{2}(:\d{2})?$/))
+              return c.substring(0, 5);
+          }
+        }
+        return `${u.getHours().toString().padStart(2, "0")}:${u.getMinutes().toString().padStart(2, "0")}`;
+      })() : "00:00";
+      return /* @__PURE__ */ j("div", { className: "flex flex-row gap-2", children: [
+        /* @__PURE__ */ r(
+          w,
+          {
+            value: u,
+            onChange: (t) => V(t, T),
+            placeholder: o?.filters.selectDate || "Select date",
+            buttonVariant: "outline",
+            size: n,
+            dateFormat: "dd/MM/yyyy",
+            disabled: a
+          }
+        ),
+        /* @__PURE__ */ r(
+          y,
+          {
+            type: "time",
+            size: n,
+            value: T,
+            onChange: (t) => V(u, t.target.value),
+            className: "text-sm",
+            disabled: !u || a
+          }
+        )
+      ] });
+    default:
+      return /* @__PURE__ */ r("div", { className: "text-muted-foreground text-sm", children: o?.filters.filterNotSupported || "Filter not supported" });
+  }
+}
+export {
+  K as FilterValueInput
+};

package/dist/components/ui/tables/data-table/components/data-table-filters.js

@@ -0,0 +1,286 @@
+"use client";
+import { jsxs as p, Fragment as A, jsx as o } from "react/jsx-runtime";
+import { useState as q, useEffect as $ } from "react";
+import { Badge as y } from "../../../badge.js";
+import { Button as N } from "../../../button.js";
+import { Icon as f } from "../../../icon.js";
+import { Input as E } from "../../../input.js";
+import { Popover as S, PopoverTrigger as _, PopoverContent as D } from "../../../popover.js";
+import { getIconFromColumnType as M } from "../data-table.service.js";
+import { DataTableAdvancedFilterComponent as R } from "./data-table-advanced-filter.js";
+import { DataTableStringFilter as z, DataTableNumberFilter as H, DataTableBooleanFilter as J, DataTableDateFilter as K, DataTableDateTimeFilter as Q, DataTableListSingleSelectFilter as U, DataTableListMultiSelectFilter as V } from "./data-table-simple-filters.js";
+function se({
+  advancedFilterBadge: m,
+  setAdvancedFilterBadge: b,
+  filterableColumns: h,
+  sortedFilterBadges: x,
+  setFilterBadges: d,
+  filterSearch: L,
+  setFilterSearch: I,
+  filteredColumns: P,
+  handleAddFilter: G,
+  handleAddAdvancedFilter: F,
+  i18n: s
+}) {
+  const [w, C] = q(/* @__PURE__ */ new Set()), j = w.has("add");
+  return $(() => {
+    if (d((e) => {
+      let c = !1;
+      const a = e.map((r) => {
+        if (r.columnType !== "list_single_select" && r.columnType !== "list_multi_select")
+          return r;
+        const n = h.find((t) => t.id === r.columnId)?.column.columnDef.meta?.listOptions || [], g = new Set(n.map((t) => String(t.value)));
+        if (r.columnType === "list_single_select") {
+          const t = r.value;
+          return t !== void 0 && !g.has(String(t)) ? (c = !0, { ...r, value: void 0, listOptions: n }) : r.listOptions !== n ? { ...r, listOptions: n } : r;
+        } else {
+          const t = Array.isArray(r.value) ? r.value : [], v = t.filter((i) => g.has(String(i)));
+          return v.length !== t.length ? (c = !0, {
+            ...r,
+            value: v.length > 0 ? v : void 0,
+            listOptions: n
+          }) : r.listOptions !== n ? { ...r, listOptions: n } : r;
+        }
+      });
+      return c ? a : e;
+    }), m) {
+      const e = (l) => {
+        let n = !1;
+        return { conditions: l.map((t) => {
+          if (t.columnType !== "list_single_select" && t.columnType !== "list_multi_select")
+            return t;
+          const i = h.find(
+            (u) => u.id === t.columnId
+          )?.column.columnDef.meta?.listOptions || [], O = new Set(i.map((u) => String(u.value)));
+          if (t.columnType === "list_single_select") {
+            const u = t.value;
+            return u !== void 0 && !O.has(String(u)) ? (n = !0, {
+              ...t,
+              value: void 0,
+              listOptions: i
+            }) : t.listOptions !== i ? { ...t, listOptions: i } : t;
+          } else {
+            const u = Array.isArray(t.value) ? t.value : [], T = u.filter((k) => O.has(String(k)));
+            return T.length !== u.length ? (n = !0, {
+              ...t,
+              value: T.length > 0 ? T : void 0,
+              listOptions: i
+            }) : t.listOptions !== i ? { ...t, listOptions: i } : t;
+          }
+        }), changed: n };
+      }, c = (l) => {
+        let n = !1;
+        const { conditions: g, changed: t } = e(l.conditions);
+        t && (n = !0);
+        const v = l.groups?.map((i) => {
+          const { group: O, changed: u } = c(i);
+          return u && (n = !0), O;
+        });
+        return {
+          group: {
+            ...l,
+            conditions: g,
+            groups: v
+          },
+          changed: n
+        };
+      }, { group: a, changed: r } = c(
+        m.rootGroup
+      );
+      r && b({
+        ...m,
+        rootGroup: a
+      });
+    }
+  }, [
+    h,
+    d,
+    m,
+    b
+  ]), /* @__PURE__ */ p(A, { children: [
+    m && /* @__PURE__ */ p(S, { children: [
+      /* @__PURE__ */ o(_, { asChild: !0, children: /* @__PURE__ */ p(
+        y,
+        {
+          className: "hover:border-d-border cursor-pointer hover:border",
+          variant: "default",
+          children: [
+            /* @__PURE__ */ o(f, { name: "ListFilter" }),
+            s.filters.advancedFilter
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ o(D, { className: "w-[800px]", children: /* @__PURE__ */ o(
+        R,
+        {
+          columns: h,
+          onFilterChange: (e) => {
+            b(e || void 0);
+          },
+          initialFilter: m,
+          i18n: s
+        }
+      ) })
+    ] }),
+    x.map((e) => {
+      const c = w.has(e.id);
+      return /* @__PURE__ */ p(
+        S,
+        {
+          onOpenChange: (a) => {
+            C((r) => {
+              const l = new Set(r);
+              return a ? l.add(e.id) : l.delete(e.id), l;
+            });
+          },
+          children: [
+            /* @__PURE__ */ o(_, { asChild: !0, children: /* @__PURE__ */ p(
+              y,
+              {
+                variant: (e.value === void 0 || e.value === "") && !(e.operator === "eq_null" || e.operator === "n_eq_null" || e.operator === "checked" || e.operator === "unchecked") ? "ghost" : "default",
+                className: `hover:border-d-border flex cursor-pointer items-center gap-1 hover:border ${c && "border-d-foreground border"}`,
+                children: [
+                  /* @__PURE__ */ o(f, { name: "Filter" }),
+                  e.columnLabel || s.filters.value
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ p(D, { children: [
+              e.columnType === "string" && /* @__PURE__ */ o(
+                z,
+                {
+                  filter: e,
+                  setFilterBadges: d,
+                  i18n: s
+                }
+              ),
+              e.columnType === "number" && /* @__PURE__ */ o(
+                H,
+                {
+                  filter: e,
+                  setFilterBadges: d,
+                  i18n: s
+                }
+              ),
+              e.columnType === "boolean" && /* @__PURE__ */ o(
+                J,
+                {
+                  filter: e,
+                  setFilterBadges: d,
+                  i18n: s
+                }
+              ),
+              e.columnType === "date" && /* @__PURE__ */ o(
+                K,
+                {
+                  filter: e,
+                  setFilterBadges: d,
+                  i18n: s
+                }
+              ),
+              e.columnType === "datetime" && /* @__PURE__ */ o(
+                Q,
+                {
+                  filter: e,
+                  setFilterBadges: d,
+                  i18n: s
+                }
+              ),
+              e.columnType === "list_single_select" && (() => {
+                const r = h.find(
+                  (l) => l.id === e.columnId
+                )?.column.columnDef.meta?.listOptions || e.listOptions || [];
+                return /* @__PURE__ */ o(
+                  U,
+                  {
+                    filter: { ...e, listOptions: r },
+                    setFilterBadges: d,
+                    i18n: s
+                  }
+                );
+              })(),
+              e.columnType === "list_multi_select" && (() => {
+                const r = h.find(
+                  (l) => l.id === e.columnId
+                )?.column.columnDef.meta?.listOptions || e.listOptions || [];
+                return /* @__PURE__ */ o(
+                  V,
+                  {
+                    filter: { ...e, listOptions: r },
+                    setFilterBadges: d,
+                    i18n: s
+                  }
+                );
+              })(),
+              e.columnType === "other" && /* @__PURE__ */ o("div", { children: s.filters.filterNotSupported })
+            ] })
+          ]
+        },
+        e.id
+      );
+    }),
+    h?.length > 0 && /* @__PURE__ */ p(
+      S,
+      {
+        onOpenChange: (e) => {
+          C((c) => {
+            const a = new Set(c);
+            return e ? a.add("add") : a.delete("add"), a;
+          });
+        },
+        children: [
+          /* @__PURE__ */ o(_, { asChild: !0, children: /* @__PURE__ */ p(
+            y,
+            {
+              variant: "ghost",
+              className: `hover:border-d-border flex cursor-pointer items-center gap-1 hover:border ${j && "border-d-foreground border"}`,
+              children: [
+                /* @__PURE__ */ o(f, { name: "FunnelPlus" }),
+                s.filters.addFilter
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ p(D, { className: "p-2", children: [
+            /* @__PURE__ */ o(
+              E,
+              {
+                className: "mb-1",
+                placeholder: s.filters.searchFilters,
+                iconLeft: "Search",
+                onChange: (e) => I(e.target.value),
+                value: L
+              }
+            ),
+            /* @__PURE__ */ o("div", { className: "max-h-[400px] overflow-y-auto", children: P.map((e) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+              N,
+              {
+                variant: "ghost",
+                className: "w-full justify-start",
+                iconLeft: M(
+                  e.column.columnDef.meta?.type
+                ),
+                onClick: () => G(e),
+                children: e.column.columnDef.header?.toString()
+              }
+            ) }, e.id)) }),
+            /* @__PURE__ */ o("div", { className: "border-d-border mb-1 w-full border-b" }),
+            /* @__PURE__ */ o(
+              N,
+              {
+                variant: "ghost",
+                className: "w-full justify-start",
+                iconLeft: "ListFilterPlus",
+                disabled: !!m,
+                onClick: () => F(),
+                children: s.filters.advancedFilter
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  se as DataTableFilters
+};

package/dist/components/ui/tables/data-table/components/data-table-pagination.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { Pagination as k, PaginationContent as M, PaginationItem as t, PaginationFirst as D, PaginationPrevious as w, PaginationLink as $, PaginationNext as j, PaginationLast as F } from "../../../pagination.js";
+function R({
+  table: n,
+  isServerSide: l,
+  clientPagination: f,
+  serverState: i,
+  onServerStateChange: g,
+  totalItems: I,
+  i18n: s
+}) {
+  const P = l ? i?.pagination?.pageIndex ?? 0 : n.getState().pagination.pageIndex, u = l ? i?.pagination?.pageSize ?? f.pageSize : n.getState().pagination.pageSize, x = l ? I ?? 0 : n.getFilteredRowModel().rows.length, N = x === 0 ? 0 : P * u + 1, z = x === 0 ? 0 : Math.min((P + 1) * u, x);
+  return /* @__PURE__ */ h(k, { className: "h-6", children: [
+    /* @__PURE__ */ a("div", { className: "flex h-full flex-1 items-center align-middle text-xs", children: /* @__PURE__ */ a("div", { className: "text-d-foreground hidden md:flex", children: `${N}-${z} / ${x} ${s.pagination.rows}` }) }),
+    /* @__PURE__ */ h(M, { children: [
+      /* @__PURE__ */ a(t, { className: "h-full", children: /* @__PURE__ */ a(
+        D,
+        {
+          className: "h-full text-xs",
+          size: "sm",
+          isDisabled: !n.getCanPreviousPage(),
+          label: s.pagination.first,
+          onClick: () => {
+            l && i && g ? g({
+              ...i,
+              pagination: {
+                ...i.pagination,
+                pageIndex: 0
+              }
+            }) : n.setPageIndex(0);
+          },
+          "aria-label": "Go to first page"
+        }
+      ) }),
+      /* @__PURE__ */ a(t, { className: "h-full", children: /* @__PURE__ */ a(
+        w,
+        {
+          className: "h-full text-xs",
+          size: "sm",
+          isDisabled: !n.getCanPreviousPage(),
+          label: s.pagination.previous,
+          onClick: () => {
+            if (n.getCanPreviousPage())
+              if (l && i && g) {
+                const o = i.pagination.pageIndex ?? f.pageIndex, d = Math.max(o - 1, 0);
+                g({
+                  ...i,
+                  pagination: {
+                    ...i.pagination,
+                    pageIndex: d
+                  }
+                });
+              } else
+                n.previousPage();
+          }
+        }
+      ) }),
+      (() => {
+        const o = n.getState().pagination.pageIndex, d = n.getPageCount(), c = 5;
+        let m = Math.max(
+          0,
+          o - Math.floor(c / 2)
+        ), p = m + c;
+        return p > d && (p = d, m = Math.max(0, p - c)), n.getPageOptions().slice(m, p).map((e, C) => /* @__PURE__ */ a(t, { className: "h-full", children: /* @__PURE__ */ a(
+          $,
+          {
+            className: "h-full text-sm",
+            size: "icon",
+            isActive: o === e,
+            onClick: () => {
+              if (l && i && g) {
+                if (o === e) return;
+                g({
+                  ...i,
+                  pagination: {
+                    ...i.pagination,
+                    pageIndex: e
+                  }
+                });
+              } else
+                n.setPageIndex(e);
+            },
+            children: e + 1
+          }
+        ) }, C));
+      })(),
+      /* @__PURE__ */ a(t, { className: "h-full", children: /* @__PURE__ */ a(
+        j,
+        {
+          className: "h-full text-xs",
+          size: "sm",
+          isDisabled: !n.getCanNextPage(),
+          label: s.pagination.next,
+          onClick: () => {
+            n.getCanNextPage() && (l && i && g ? g({
+              ...i,
+              pagination: {
+                ...i.pagination,
+                pageIndex: i.pagination.pageIndex + 1
+              }
+            }) : n.nextPage());
+          }
+        }
+      ) }),
+      /* @__PURE__ */ a(t, { className: "h-full", children: /* @__PURE__ */ a(
+        F,
+        {
+          className: "h-full text-xs",
+          size: "sm",
+          isDisabled: !n.getCanNextPage(),
+          label: s.pagination.last,
+          onClick: () => {
+            l && i && g ? g({
+              ...i,
+              pagination: {
+                ...i.pagination,
+                pageIndex: n.getPageCount() - 1
+              }
+            }) : n.setPageIndex(n.getPageCount() - 1);
+          },
+          "aria-label": "Go to last page"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex h-full flex-1 items-center justify-end align-middle text-xs", children: /* @__PURE__ */ a("div", { className: "text-d-foreground hidden md:flex", children: (n.getPageCount() ? n.getState().pagination.pageIndex + 1 : 0) + " / " + n.getPageCount() + " " + s.pagination.pages }) })
+  ] });
+}
+export {
+  R as DataTablePaginationComponent
+};