@alepha/ui 0.18.1 → 0.18.3

package/src/core/table/components/DataTable.tsx

@@ -1,24 +1,25 @@
-import { ActionButton, ui } from "@alepha/ui";
-import {
-  Checkbox,
-  Drawer,
-  Flex,
-  Table,
-  Text,
-  UnstyledButton,
-} from "@mantine/core";
+import { ActionButton, Flex, isComponentType, Text, ui } from "@alepha/ui";
+import { Checkbox, Drawer, Loader, Table, UnstyledButton } from "@mantine/core";
 import {
   IconArrowDown,
   IconArrowsSort,
   IconArrowUp,
   IconChevronDown,
   IconChevronRight,
+  IconDotsVertical,
 } from "@tabler/icons-react";
 import { Alepha, type Static, type TObject, t } from "alepha";
 import { DateTimeProvider } from "alepha/datetime";
 import { useInject } from "alepha/react";
 import { type FormModel, useForm } from "alepha/react/form";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type {
   ColumnVisibility,
   DataTableColumnContext,
@@ -97,13 +98,19 @@ const DataTable = <T extends object, Filters extends TObject>(
   const [items, setItems] = useState<MaybePage<T>>(
     typeof props.items === "function" ? { content: [] } : props.items,
   );
+  const itemsRef = useRef(items);
+  const [loaded, setLoaded] = useState(
+    typeof props.items !== "function" || !props.submitOnInit,
+  );
 
-  const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+  const defaultSize = props.defaultSize || (props.infinityScroll ? 100 : 10);
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(String(defaultSize));
   const [currentPage, setCurrentPage] = useState(0);
   const alepha = useInject(Alepha);
+  itemsRef.current = items;
   const sentinelRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Column visibility state
   const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>(
@@ -220,7 +227,7 @@ const DataTable = <T extends object, Filters extends TObject>(
               sort?: string;
             },
             {
-              items: items.content,
+              items: itemsRef.current.content,
             },
           );
 
@@ -235,6 +242,7 @@ const DataTable = <T extends object, Filters extends TObject>(
           }
 
           setCurrentPage(values.page);
+          if (!loaded) setLoaded(true);
         }
       },
       onReset: async () => {
@@ -260,13 +268,33 @@ const DataTable = <T extends object, Filters extends TObject>(
           value,
           form as unknown as FormModel<Filters>,
         );
+
+        if (props.skipSubmitOnChange) return;
+
+        form.input.page.set(0);
+
+        const delay = props.debounce ?? 300;
+        if (delay > 0) {
+          if (debounceRef.current) clearTimeout(debounceRef.current);
+          debounceRef.current = setTimeout(() => {
+            form.submit();
+          }, delay);
+        } else {
+          await form.submit();
+        }
       },
     },
-    [items],
+    [],
   );
 
   const dt = useInject(DateTimeProvider);
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
   useEffect(() => {
     if (props.submitOnInit) {
       form.submit();
@@ -318,7 +346,8 @@ const DataTable = <T extends object, Filters extends TObject>(
   const totalColumns =
     visibleColumns.length +
     (panelConfig ? 1 : 0) +
-    (props.withCheckbox ? 1 : 0);
+    (props.withCheckbox ? 1 : 0) +
+    (props.rowActions ? 1 : 0);
 
   // Checkbox header column
   const checkboxHeader = props.withCheckbox ? (
@@ -351,12 +380,14 @@ const DataTable = <T extends object, Filters extends TObject>(
         }}
       >
         <Flex align="center" gap={4}>
-          <Text size="xs">{col.label}</Text>
+          <Text bold muted size="xs">
+            {col.label}
+          </Text>
           {col.sortable && (
             <Flex c="dimmed">
-              {sortDir === "asc" && <IconArrowUp size={ui.sizes.icon.sm} />}
-              {sortDir === "desc" && <IconArrowDown size={ui.sizes.icon.sm} />}
-              {sortDir === null && <IconArrowsSort size={ui.sizes.icon.sm} />}
+              {sortDir === "asc" && <IconArrowUp size={ui.sizes.icon.xs} />}
+              {sortDir === "desc" && <IconArrowDown size={ui.sizes.icon.xs} />}
+              {sortDir === null && <IconArrowsSort size={ui.sizes.icon.xs} />}
             </Flex>
           )}
         </Flex>
@@ -424,45 +455,77 @@ const DataTable = <T extends object, Filters extends TObject>(
             alepha,
           } as DataTableColumnContext<Filters>;
 
-          if (col.actions) {
-            const rowActions = col
-              .actions(item as T, ctx)
-              .filter((a) => a.visible !== false);
+          const content = col.value?.(item as T, ctx);
+
+          return (
+            <Table.Td key={key} style={col.fit ? FIT_STYLE : undefined}>
+              {col.action ? (
+                <ActionButton
+                  td={"inherit"}
+                  unstyled
+                  {...col.action(item as T)}
+                >
+                  {content}
+                </ActionButton>
+              ) : (
+                content
+              )}
+            </Table.Td>
+          );
+        })}
+        {props.rowActions &&
+          (() => {
+            const ctx = {
+              index,
+              form: form as unknown as FormModel<Filters>,
+              alepha,
+            } as DataTableColumnContext<Filters>;
+            const actions = props.rowActions!(item as T, ctx).filter(
+              (a) => a.visible !== false,
+            );
+            if (actions.length === 0) return <Table.Td style={FIT_STYLE} />;
             return (
               <Table.Td
                 py={2}
                 px={4}
-                key={key}
-                style={col.fit ? FIT_STYLE : undefined}
+                style={FIT_STYLE}
                 onClick={(e) => e.stopPropagation()}
               >
-                <Flex gap={4}>
-                  {rowActions.map(({ visible: _, ...actionProps }, i) => (
-                    <ActionButton
-                      key={i}
-                      variant="subtle"
-                      size="xs"
-                      preventDefault
-                      h={20}
-                      {...actionProps}
-                    />
-                  ))}
-                </Flex>
+                <ActionButton
+                  variant={"minimal"}
+                  size="xs"
+                  icon={IconDotsVertical}
+                  menu={{
+                    items: actions.map((action) => {
+                      const Icon = action.icon;
+                      return {
+                        label:
+                          action.label ??
+                          (typeof action.tooltip === "string"
+                            ? action.tooltip
+                            : undefined),
+                        icon:
+                          Icon && isComponentType(Icon) ? (
+                            <Icon size={14} />
+                          ) : (
+                            (Icon as ReactNode)
+                          ),
+                        onClick: (action as any).onClick
+                          ? async () => {
+                              await (action as any).onClick();
+                              if (!action.skipRefresh) {
+                                await form.submit();
+                              }
+                            }
+                          : undefined,
+                        color: action.color,
+                      };
+                    }),
+                  }}
+                />
               </Table.Td>
             );
-          }
-
-          return (
-            <Table.Td
-              py={2}
-              px={4}
-              key={key}
-              style={col.fit ? FIT_STYLE : undefined}
-            >
-              {col.value?.(item as T, ctx)}
-            </Table.Td>
-          );
-        })}
+          })()}
       </Table.Tr>,
     ];
 
@@ -485,106 +548,133 @@ const DataTable = <T extends object, Filters extends TObject>(
   }, [props.filters, form.options.schema]);
 
   return (
-    <Flex flex={1} p={0} bdrs="sm" direction="column">
-      <DataTableToolbar
-        columns={props.columns}
-        filters={props.filters}
-        columnVisibility={columnVisibility}
-        filterVisibility={filterVisibility}
-        onColumnVisibilityChange={setColumnVisibility}
-        onFilterVisibilityChange={setFilterVisibility}
-        actions={props.actions}
-        onRefresh={() => form.submit()}
-        items={items.content as T[]}
-        withExport={props.withExport}
-        selectedItems={selection.selectedItems}
-        checkboxActions={props.checkboxActions}
-        onClearSelection={selection.clear}
-      />
-
-      {filterSchema && props.filters && (
-        <DataTableFilters
-          schema={filterSchema}
-          form={form as unknown as FormModel<TObject>}
-          typeFormProps={
-            props.typeFormProps as DataTableFiltersProps["typeFormProps"]
-          }
+    <Flex
+      gap={"xs"}
+      flex={1}
+      p={0}
+      direction="column"
+      style={{ overflow: "hidden" }}
+    >
+      <Flex rounded bordered elevated shadowed={"xs"} col>
+        <DataTableToolbar
+          columns={props.columns}
+          filters={props.filters}
+          columnVisibility={columnVisibility}
           filterVisibility={filterVisibility}
+          onColumnVisibilityChange={setColumnVisibility}
+          onFilterVisibilityChange={setFilterVisibility}
+          actions={props.actions}
+          onRefresh={() => form.submit()}
+          items={items.content as T[]}
+          withExport={props.withExport}
+          selectedItems={selection.selectedItems}
+          checkboxActions={props.checkboxActions}
+          onClearSelection={selection.clear}
         />
-      )}
-
-      <Flex className="overflow-auto">
-        <Table
-          aria-label="Data table"
-          withColumnBorders
-          withRowBorders
-          {...props.tableProps}
-        >
-          <Table.Thead
-            style={{
-              position: "sticky",
-              top: 0,
-              zIndex: 1,
-              backgroundColor: "var(--mantine-color-body)",
-            }}
-          >
-            <Table.Tr>
-              {panelConfig && <Table.Th style={{ width: 36 }} />}
-              {checkboxHeader}
-              {head}
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody
-            style={{
-              opacity: form.submitting ? 0.5 : 1,
-              transition: "opacity 150ms ease",
-            }}
+
+        {filterSchema && props.filters && (
+          <DataTableFilters
+            schema={filterSchema}
+            form={form as unknown as FormModel<TObject>}
+            typeFormProps={
+              props.typeFormProps as DataTableFiltersProps["typeFormProps"]
+            }
+            filterVisibility={filterVisibility}
+          />
+        )}
+      </Flex>
+
+      <Flex
+        col
+        rounded
+        bordered
+        elevated
+        shadowed={"xs"}
+        flex={1}
+        style={{ minHeight: 0 }}
+      >
+        <Flex className="overflow-auto" flex={1} style={{ minHeight: 0 }} col>
+          <Table
+            aria-label="Data table"
+            withRowBorders
+            highlightOnHover
+            {...props.tableProps}
           >
-            {rows}
-            {items.content.length === 0 && (
+            <Table.Thead
+              bdrs={"md"}
+              style={{
+                position: "sticky",
+                top: 0,
+                zIndex: 1,
+                backgroundColor: "var(--alepha-elevated)",
+              }}
+            >
               <Table.Tr>
-                <Table.Td
-                  colSpan={totalColumns || 1}
-                  py="xl"
-                  style={{ textAlign: "center" }}
-                >
-                  <Text c="dimmed" size="sm">
-                    {form.submitting ? "Loading…" : "No results"}
-                  </Text>
-                </Table.Td>
+                {panelConfig && <Table.Th style={{ width: 36 }} />}
+                {checkboxHeader}
+                {head}
+                {props.rowActions && <Table.Th style={FIT_STYLE} />}
               </Table.Tr>
-            )}
-          </Table.Tbody>
-        </Table>
-      </Flex>
+            </Table.Thead>
+            <Table.Tbody>
+              {!loaded || form.submitting ? (
+                <Table.Tr>
+                  <Table.Td colSpan={totalColumns || 1} py="sm">
+                    <Flex justify="center" p={"md"}>
+                      <Loader size="sm" type="dots" />
+                    </Flex>
+                  </Table.Td>
+                </Table.Tr>
+              ) : rows.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={totalColumns || 1} py="xl">
+                    <Flex justify="center">
+                      <Text c="dimmed" size="sm">
+                        {props.emptyLabel ?? "No results"}
+                      </Text>
+                    </Flex>
+                  </Table.Td>
+                </Table.Tr>
+              ) : (
+                rows
+              )}
+            </Table.Tbody>
+          </Table>
+        </Flex>
 
-      {props.infinityScroll && <div ref={sentinelRef} />}
-
-      {!props.infinityScroll && (
-        <DataTablePagination
-          page={page}
-          size={size}
-          totalPages={items.page?.totalPages ?? 1}
-          onPageChange={(value) => {
-            form.input.page.set(value - 1);
-          }}
-          onSizeChange={(value) => {
-            form.input.size.set(value);
-          }}
-        />
-      )}
-
-      {drawerConfig && (
-        <Drawer
-          opened={drawerItem !== null}
-          onClose={() => setDrawerItem(null)}
-          position="right"
-          size="xl"
-          {...drawerConfig.props}
-        >
-          {drawerItem && drawerConfig.render(drawerItem)}
-        </Drawer>
-      )}
+        {props.infinityScroll && <div ref={sentinelRef} />}
+
+        {!props.infinityScroll && (
+          <DataTablePagination
+            page={page}
+            size={size}
+            totalPages={items.page?.totalPages}
+            totalElements={items.page?.totalElements}
+            isFirst={items.page?.isFirst}
+            isLast={items.page?.isLast}
+            offset={items.page?.offset ?? 0}
+            numberOfElements={items.content.length}
+            onPageChange={(value) => {
+              form.input.page.set(value - 1);
+            }}
+            onSizeChange={(value) => {
+              form.input.size.set(value);
+            }}
+          />
+        )}
+
+        {drawerConfig && (
+          <Drawer
+            opened={drawerItem !== null}
+            onClose={() => setDrawerItem(null)}
+            position="right"
+            size="xl"
+            {...drawerConfig.props}
+          >
+            {drawerItem && drawerConfig.render(drawerItem)}
+          </Drawer>
+        )}
+      </Flex>
     </Flex>
   );
 };

package/src/core/table/components/DataTableFilters.tsx

@@ -1,5 +1,4 @@
-import { ui } from "@alepha/ui";
-import { Flex } from "@mantine/core";
+import { Flex } from "@alepha/ui";
 import { type TObject, t } from "alepha";
 import type { FormModel } from "alepha/react/form";
 import { useMemo } from "react";
@@ -16,12 +15,9 @@ export interface DataTableFiltersProps {
   filterVisibility: FilterVisibility;
 }
 
-const DataTableFilters = ({
-  schema,
-  form,
-  typeFormProps,
-  filterVisibility,
-}: DataTableFiltersProps) => {
+const DataTableFilters = (props: DataTableFiltersProps) => {
+  const { schema, form, typeFormProps, filterVisibility } = props;
+
   const visibleSchema = useMemo(() => {
     const visibleKeys = Object.keys(schema.properties).filter(
       (key) => filterVisibility[key] !== false,
@@ -47,14 +43,8 @@ const DataTableFilters = ({
   }
 
   return (
-    <Flex
-      w="100%"
-      p="xs"
-      bg={ui.colors.surface}
-      style={{ borderBottom: "1px solid var(--alepha-border)" }}
-    >
+    <Flex surface flex={1} mt={-4} p="xs" m="xs" bdrs="md">
       <TypeForm
-        size={"xs"}
         {...typeFormProps}
         skipSubmitButton
         fill
@@ -65,7 +55,7 @@ const DataTableFilters = ({
           sm: 2,
           md: 3,
           lg: 4,
-          xl: 6,
+          xl: 5,
         }}
       />
     </Flex>

package/src/core/table/components/DataTablePagination.tsx

@@ -1,9 +1,15 @@
-import { Flex, Pagination, Select } from "@mantine/core";
+import { Flex, Text } from "@alepha/ui";
+import { Pagination, Select } from "@mantine/core";
 
 export interface DataTablePaginationProps {
   page: number;
   size: string;
-  totalPages: number;
+  totalPages?: number;
+  totalElements?: number;
+  isFirst?: boolean;
+  isLast?: boolean;
+  offset: number;
+  numberOfElements: number;
   onPageChange: (page: number) => void;
   onSizeChange: (size: number) => void;
 }
@@ -12,45 +18,68 @@ const DataTablePagination = ({
   page,
   size,
   totalPages,
+  totalElements,
+  isFirst,
+  isLast,
+  offset,
+  numberOfElements,
   onPageChange,
   onSizeChange,
 }: DataTablePaginationProps) => {
+  const from = numberOfElements > 0 ? offset + 1 : 0;
+  const to = offset + numberOfElements;
+  const hasTotal = totalPages != null;
+
   return (
     <Flex
       align="center"
-      justify="end"
+      justify="space-between"
       gap="md"
-      p="xs"
+      px="xs"
+      py={4}
       style={{
         borderTop: "1px solid var(--alepha-border)",
       }}
     >
-      <Flex>
-        <Select
-          w={96}
-          variant="default"
-          value={size}
-          onChange={(value) => {
-            if (value) {
-              onSizeChange(Number(value));
-            }
-          }}
-          data={[
-            { value: "5", label: "5" },
-            { value: "10", label: "10" },
-            { value: "25", label: "25" },
-            { value: "50", label: "50" },
-            { value: "100", label: "100" },
-          ]}
-        />
+      <Flex align="center">
+        <Text size="xs" c="dimmed">
+          {totalElements != null
+            ? `Showing ${from} - ${to} of ${totalElements}`
+            : `Showing ${from} - ${to}`}
+        </Text>
       </Flex>
-      <Flex>
-        <Pagination
-          withEdges
-          total={totalPages}
-          value={page}
-          onChange={onPageChange}
-        />
+      <Flex align="center" gap="md">
+        <Flex>
+          <Select
+            color={"gray"}
+            c={"gray"}
+            size={"xs"}
+            w={96}
+            variant="default"
+            value={size}
+            onChange={(value) => {
+              if (value) {
+                onSizeChange(Number(value));
+              }
+            }}
+            data={[
+              { value: "10", label: "10" },
+              { value: "25", label: "25" },
+              { value: "50", label: "50" },
+              { value: "100", label: "100" },
+            ]}
+          />
+        </Flex>
+        <Flex>
+          <Pagination
+            size={"sm"}
+            withEdges={hasTotal}
+            withPages={hasTotal}
+            total={hasTotal ? totalPages : isLast !== false ? page : page + 1}
+            value={page}
+            onChange={onPageChange}
+          />
+        </Flex>
       </Flex>
     </Flex>
   );