erp-pos-ecommerce-shared 0.1.2 → 0.1.3

package/dist/components.d.ts

@@ -1,12 +1,13 @@
 import React$1, { ReactNode } from 'react';
 import { e as IField, b as IButton } from './form.interface-CqnTdmc8.js';
 import { ReactFormExtendedApi, FormValidateOrFn, FormAsyncValidateOrFn } from '@tanstack/react-form';
-import { UseMutationResult } from '@tanstack/react-query';
+import { UseMutationResult, UseQueryOptions } from '@tanstack/react-query';
 import { s as TblProductsImage, o as ITableFilterConfig, g as IFilterSelectOption } from './filters.interface-Cx-AXMPz.js';
 import * as z from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef, Row, useReactTable } from '@tanstack/react-table';
 import { D as DataTableConfig, S as ServerTableState } from './datatable.interface-DFSQWdXd.js';
+import { T as TableQueryParams } from './types-CiX8AkJA.js';
 
 interface CreateEditFormProps<T> {
     fields: IField[];
@@ -260,4 +261,21 @@ interface TableSkeletonProps {
 }
 declare const TableSkeleton: ({ rows, columns, canCheck, withBorder, borderRadius, rowHeight, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, SearchInput, SimpleDataTable, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
+/** Shape that the query must return for TablePage to work correctly. */
+interface PaginatedResponse<TRow> {
+    data: TRow[];
+    total: number;
+}
+interface TablePageProps<TRow> {
+    /**
+     * Factory that receives the current pagination/filter params and returns
+     * the query options. Called every time the table state changes.
+     */
+    getQueryOptions: (params: TableQueryParams) => UseQueryOptions<PaginatedResponse<TRow>>;
+    title: string;
+    columns: ColumnDef<TRow>[];
+    filters?: ITableFilterConfig[];
+}
+declare const TablePage: <TRow>({ getQueryOptions, title, columns, filters, }: TablePageProps<TRow>) => react_jsx_runtime.JSX.Element;
+
+export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, type PaginatedResponse, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };

package/dist/components.js

@@ -1,8 +1,8 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Text, Group, Box, rem, Button, ScrollArea, Image, ActionIcon, TagsInput, Switch, MultiSelect, Select, NumberInput, PasswordInput, TextInput, LoadingOverlay, Stepper, Flex, Container, Title, Card, Pagination, Stack, Paper, Table, Menu, Popover, Skeleton, Checkbox, UnstyledButton } from '@mantine/core';
 import { useForm } from '@tanstack/react-form';
 import axios, { isAxiosError } from 'axios';
-import { useRef, useMemo, useState, useEffect } from 'react';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { DatePickerInput, DatePicker } from '@mantine/dates';
 import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 import { modals } from '@mantine/modals';
@@ -1926,7 +1926,42 @@ var TableSkeleton = ({
     ) }, colIdx)) }, rowIdx)) })
   ] }) });
 };
+var TablePage = ({
+  getQueryOptions,
+  title,
+  columns,
+  filters
+}) => {
+  const [tableParams, setTableParams] = useState({
+    skip: 0,
+    limit: 10,
+    query: void 0
+  });
+  const handleStateChange = useCallback((state) => {
+    setTableParams({
+      skip: state.pageIndex * state.pageSize,
+      limit: state.pageSize,
+      query: state.globalFilter || void 0,
+      columnFilters: state.columnFilters.length > 0 ? state.columnFilters : void 0
+    });
+  }, []);
+  const { data, isLoading } = useQuery(getQueryOptions(tableParams));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        totalRowCount: data?.total,
+        data: data?.data ?? [],
+        loading: isLoading,
+        columns,
+        filters,
+        onStateChange: handleStateChange
+      }
+    )
+  ] });
+};
 
-export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, FilterSelect, FormGenerator, ImageForm, SearchInput, SimpleDataTable, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
+export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, FilterSelect, FormGenerator, ImageForm, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map