@bsol-oss/react-datatable5 11.0.0-beta.6 → 11.0.0-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts
CHANGED
|
@@ -85,7 +85,7 @@ interface DataDisplayProps {
|
|
|
85
85
|
variant?: "horizontal" | "stats" | "";
|
|
86
86
|
translate?: UseTranslationResponse<any, any>;
|
|
87
87
|
}
|
|
88
|
-
declare const DataDisplay: ({ variant
|
|
88
|
+
declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
|
|
89
89
|
|
|
90
90
|
type DensityState = "sm" | "md" | "lg";
|
|
91
91
|
interface DensityTableState {
|
|
@@ -427,6 +427,7 @@ declare const useDataTableContext: <TData>() => DataTableContext<TData>;
|
|
|
427
427
|
|
|
428
428
|
interface GetColumnsConfigs<K extends RowData> {
|
|
429
429
|
schema: JSONSchema7;
|
|
430
|
+
include?: K[];
|
|
430
431
|
ignore?: K[];
|
|
431
432
|
width?: number[];
|
|
432
433
|
meta?: {
|
|
@@ -436,7 +437,7 @@ interface GetColumnsConfigs<K extends RowData> {
|
|
|
436
437
|
translate?: UseTranslationResponse<any, any>;
|
|
437
438
|
}
|
|
438
439
|
declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
|
|
439
|
-
declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
|
|
440
|
+
declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
|
|
440
441
|
|
|
441
442
|
interface EmptyStateProps {
|
|
442
443
|
title?: string;
|
package/dist/index.js
CHANGED
|
@@ -2625,8 +2625,8 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
|
|
|
2625
2625
|
}) }));
|
|
2626
2626
|
};
|
|
2627
2627
|
|
|
2628
|
-
const
|
|
2629
|
-
const {
|
|
2628
|
+
const CellRenderer = ({ cell }) => {
|
|
2629
|
+
const { translate } = useDataTableContext();
|
|
2630
2630
|
const getLabel = ({ columnId }) => {
|
|
2631
2631
|
if (translate !== undefined) {
|
|
2632
2632
|
return translate.t(`${columnId}`);
|
|
@@ -2651,66 +2651,51 @@ const DataDisplay = ({ variant = "", translate }) => {
|
|
|
2651
2651
|
}
|
|
2652
2652
|
throw new Error(`value is unknown, ${typeof value}`);
|
|
2653
2653
|
};
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
|
|
2664
|
-
borderWidth: 1,
|
|
2665
|
-
borderRadius: 4,
|
|
2666
|
-
borderColor: "gray.400",
|
|
2667
|
-
paddingX: 4,
|
|
2668
|
-
paddingY: 2,
|
|
2669
|
-
}, object: value })] }, cell.id));
|
|
2670
|
-
}
|
|
2671
|
-
return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
|
|
2672
|
-
}) }) }) }, `chakra-table-card-${row.id}`));
|
|
2673
|
-
}) }));
|
|
2654
|
+
const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
|
|
2655
|
+
const gridColumn = cell.column.columnDef.meta?.gridColumn ?? [
|
|
2656
|
+
"span 12",
|
|
2657
|
+
"span 6",
|
|
2658
|
+
"span 3",
|
|
2659
|
+
];
|
|
2660
|
+
const gridRow = cell.column.columnDef.meta?.gridRow ?? {};
|
|
2661
|
+
if (showCustomDataDisplay) {
|
|
2662
|
+
return (jsxRuntime.jsx(react.Flex, { gridColumn, gridRow, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
2674
2663
|
}
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
return (jsxRuntime.jsxs(react.DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
|
|
2685
|
-
borderWidth: 1,
|
|
2686
|
-
borderRadius: 4,
|
|
2687
|
-
borderColor: "gray.400",
|
|
2688
|
-
paddingX: 4,
|
|
2689
|
-
paddingY: 2,
|
|
2690
|
-
}, object: value })] }));
|
|
2691
|
-
}
|
|
2692
|
-
return (jsxRuntime.jsxs(react.DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
|
|
2693
|
-
}) }) }) }, `chakra-table-card-${row.id}`));
|
|
2694
|
-
}) }));
|
|
2664
|
+
const value = cell.getValue();
|
|
2665
|
+
if (typeof value === "object") {
|
|
2666
|
+
return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
|
|
2667
|
+
borderWidth: 1,
|
|
2668
|
+
borderRadius: 4,
|
|
2669
|
+
borderColor: "gray.400",
|
|
2670
|
+
paddingX: 4,
|
|
2671
|
+
paddingY: 2,
|
|
2672
|
+
}, object: value })] }, cell.id));
|
|
2695
2673
|
}
|
|
2674
|
+
return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { color: 'gray.400', children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
|
|
2675
|
+
};
|
|
2676
|
+
const DataDisplay = ({ variant = "" }) => {
|
|
2677
|
+
const { table, translate } = useDataTableContext();
|
|
2696
2678
|
return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
-
|
|
2679
|
+
const rowId = row.id;
|
|
2680
|
+
return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { display: "grid", gap: 4, padding: 4, gridTemplateColumns: "repeat(12, 1fr)", children: table.getAllColumns().map((column) => {
|
|
2681
|
+
const childCell = row.getAllCells().find((cell) => {
|
|
2682
|
+
return cell.id === `${rowId}_${column.id}`;
|
|
2683
|
+
});
|
|
2684
|
+
if (column.columns.length > 0) {
|
|
2685
|
+
return (jsxRuntime.jsxs(react.Card.Root, { margin: "1", gridColumn: "span 12", children: [jsxRuntime.jsx(react.Card.Header, { color: "gray.400", children: translate.t(column.id) }), jsxRuntime.jsx(react.Card.Body, { display: "grid", gap: "4", gridTemplateColumns: "repeat(12, 1fr)", children: column.columns.map((column) => {
|
|
2686
|
+
if (!column.getIsVisible()) {
|
|
2687
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2688
|
+
}
|
|
2689
|
+
const foundCell = row
|
|
2690
|
+
.getVisibleCells()
|
|
2691
|
+
.find((cell) => {
|
|
2692
|
+
return cell.id === `${rowId}_${column.id}`;
|
|
2693
|
+
});
|
|
2694
|
+
return jsxRuntime.jsx(CellRenderer, { cell: foundCell });
|
|
2695
|
+
}) })] }, `chakra-table-card-${childCell?.id}`));
|
|
2696
|
+
}
|
|
2697
|
+
return jsxRuntime.jsx(CellRenderer, { cell: childCell });
|
|
2698
|
+
}) }) }, `chakra-table-card-${rowId}`));
|
|
2714
2699
|
}) }));
|
|
2715
2700
|
};
|
|
2716
2701
|
|
|
@@ -3498,7 +3483,7 @@ const widthSanityCheck = (widthList, ignoreList, properties) => {
|
|
|
3498
3483
|
throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
|
|
3499
3484
|
}
|
|
3500
3485
|
};
|
|
3501
|
-
const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
|
|
3486
|
+
const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
|
|
3502
3487
|
const { properties } = schema;
|
|
3503
3488
|
idListSanityCheck("ignore", ignore, properties);
|
|
3504
3489
|
widthSanityCheck(width, ignore, properties);
|
|
@@ -3510,7 +3495,8 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
|
|
|
3510
3495
|
return snakeToLabel(column);
|
|
3511
3496
|
};
|
|
3512
3497
|
const keys = Object.keys(properties);
|
|
3513
|
-
const
|
|
3498
|
+
const included = include.length > 0 ? include : keys;
|
|
3499
|
+
const ignored = included.filter((key) => {
|
|
3514
3500
|
return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
|
|
3515
3501
|
});
|
|
3516
3502
|
const columnHelper = reactTable.createColumnHelper();
|
|
@@ -4272,13 +4258,38 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4272
4258
|
const dataList = data?.data ?? [];
|
|
4273
4259
|
const count = data?.count ?? 0;
|
|
4274
4260
|
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4261
|
+
const watchId = watch(colLabel);
|
|
4262
|
+
const watchIds = (watch(colLabel) ?? []);
|
|
4263
|
+
reactQuery.useQuery({
|
|
4264
|
+
queryKey: [`idpicker`, { column, searchText, limit, page }],
|
|
4265
|
+
queryFn: async () => {
|
|
4266
|
+
const data = await getTableData({
|
|
4267
|
+
serverUrl,
|
|
4268
|
+
searching: watchId,
|
|
4269
|
+
in_table: table,
|
|
4270
|
+
limit: limit,
|
|
4271
|
+
offset: page * 10,
|
|
4272
|
+
});
|
|
4273
|
+
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4274
|
+
return [
|
|
4275
|
+
item[column_ref],
|
|
4276
|
+
{
|
|
4277
|
+
...item,
|
|
4278
|
+
},
|
|
4279
|
+
];
|
|
4280
|
+
}));
|
|
4281
|
+
setIdMap((state) => {
|
|
4282
|
+
return { ...state, ...newMap };
|
|
4283
|
+
});
|
|
4284
|
+
return data;
|
|
4285
|
+
},
|
|
4286
|
+
staleTime: 300000,
|
|
4287
|
+
});
|
|
4275
4288
|
const onSearchChange = async (event) => {
|
|
4276
4289
|
setSearchText(event.target.value);
|
|
4277
4290
|
setPage(0);
|
|
4278
4291
|
setLimit(10);
|
|
4279
4292
|
};
|
|
4280
|
-
const watchId = watch(colLabel);
|
|
4281
|
-
const watchIds = (watch(colLabel) ?? []);
|
|
4282
4293
|
const getPickedValue = () => {
|
|
4283
4294
|
if (Object.keys(idMap).length <= 0) {
|
|
4284
4295
|
return "";
|
|
@@ -4307,7 +4318,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4307
4318
|
}, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
|
|
4308
4319
|
onSearchChange(event);
|
|
4309
4320
|
setOpenSearchResult(true);
|
|
4310
|
-
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }),
|
|
4321
|
+
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children:
|
|
4311
4322
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4312
4323
|
dataList.map((item) => {
|
|
4313
4324
|
const selected = isMultiple
|
|
@@ -4327,7 +4338,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4327
4338
|
}, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
4328
4339
|
? renderDisplay(item)
|
|
4329
4340
|
: item[display_column] }, item[column_ref]));
|
|
4330
|
-
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count:
|
|
4341
|
+
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
|
|
4331
4342
|
};
|
|
4332
4343
|
|
|
4333
4344
|
const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, CheckboxCard as CheckboxCard$1, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Image, Card,
|
|
2
|
+
import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, CheckboxCard as CheckboxCard$1, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Image, Card, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Group, InputElement, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, Alert, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
|
|
3
3
|
import { AiOutlineColumnWidth } from 'react-icons/ai';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import React__default, { createContext, useContext, useState, useEffect, useRef } from 'react';
|
|
@@ -7,7 +7,7 @@ import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutli
|
|
|
7
7
|
import { LuX, LuCheck, LuChevronRight, LuChevronDown } from 'react-icons/lu';
|
|
8
8
|
import Dayzed from '@bsol-oss/dayzed-react19';
|
|
9
9
|
import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
|
|
10
|
-
import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
|
|
10
|
+
import { BiDownArrow, BiUpArrow, BiError } from 'react-icons/bi';
|
|
11
11
|
import { CgClose } from 'react-icons/cg';
|
|
12
12
|
import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
|
|
13
13
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
@@ -2605,8 +2605,8 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
|
|
|
2605
2605
|
}) }));
|
|
2606
2606
|
};
|
|
2607
2607
|
|
|
2608
|
-
const
|
|
2609
|
-
const {
|
|
2608
|
+
const CellRenderer = ({ cell }) => {
|
|
2609
|
+
const { translate } = useDataTableContext();
|
|
2610
2610
|
const getLabel = ({ columnId }) => {
|
|
2611
2611
|
if (translate !== undefined) {
|
|
2612
2612
|
return translate.t(`${columnId}`);
|
|
@@ -2631,66 +2631,51 @@ const DataDisplay = ({ variant = "", translate }) => {
|
|
|
2631
2631
|
}
|
|
2632
2632
|
throw new Error(`value is unknown, ${typeof value}`);
|
|
2633
2633
|
};
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
|
|
2644
|
-
borderWidth: 1,
|
|
2645
|
-
borderRadius: 4,
|
|
2646
|
-
borderColor: "gray.400",
|
|
2647
|
-
paddingX: 4,
|
|
2648
|
-
paddingY: 2,
|
|
2649
|
-
}, object: value })] }, cell.id));
|
|
2650
|
-
}
|
|
2651
|
-
return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
|
|
2652
|
-
}) }) }) }, `chakra-table-card-${row.id}`));
|
|
2653
|
-
}) }));
|
|
2634
|
+
const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
|
|
2635
|
+
const gridColumn = cell.column.columnDef.meta?.gridColumn ?? [
|
|
2636
|
+
"span 12",
|
|
2637
|
+
"span 6",
|
|
2638
|
+
"span 3",
|
|
2639
|
+
];
|
|
2640
|
+
const gridRow = cell.column.columnDef.meta?.gridRow ?? {};
|
|
2641
|
+
if (showCustomDataDisplay) {
|
|
2642
|
+
return (jsx(Flex, { gridColumn, gridRow, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
2654
2643
|
}
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
return (jsxs(DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
|
|
2665
|
-
borderWidth: 1,
|
|
2666
|
-
borderRadius: 4,
|
|
2667
|
-
borderColor: "gray.400",
|
|
2668
|
-
paddingX: 4,
|
|
2669
|
-
paddingY: 2,
|
|
2670
|
-
}, object: value })] }));
|
|
2671
|
-
}
|
|
2672
|
-
return (jsxs(DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
|
|
2673
|
-
}) }) }) }, `chakra-table-card-${row.id}`));
|
|
2674
|
-
}) }));
|
|
2644
|
+
const value = cell.getValue();
|
|
2645
|
+
if (typeof value === "object") {
|
|
2646
|
+
return (jsxs(Box, { gridColumn, gridRow, children: [jsx(Box, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
|
|
2647
|
+
borderWidth: 1,
|
|
2648
|
+
borderRadius: 4,
|
|
2649
|
+
borderColor: "gray.400",
|
|
2650
|
+
paddingX: 4,
|
|
2651
|
+
paddingY: 2,
|
|
2652
|
+
}, object: value })] }, cell.id));
|
|
2675
2653
|
}
|
|
2654
|
+
return (jsxs(Box, { gridColumn, gridRow, children: [jsx(Box, { color: 'gray.400', children: getLabel({ columnId: cell.column.id }) }), jsx(Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
|
|
2655
|
+
};
|
|
2656
|
+
const DataDisplay = ({ variant = "" }) => {
|
|
2657
|
+
const { table, translate } = useDataTableContext();
|
|
2676
2658
|
return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2659
|
+
const rowId = row.id;
|
|
2660
|
+
return (jsx(Card.Root, { children: jsx(Card.Body, { display: "grid", gap: 4, padding: 4, gridTemplateColumns: "repeat(12, 1fr)", children: table.getAllColumns().map((column) => {
|
|
2661
|
+
const childCell = row.getAllCells().find((cell) => {
|
|
2662
|
+
return cell.id === `${rowId}_${column.id}`;
|
|
2663
|
+
});
|
|
2664
|
+
if (column.columns.length > 0) {
|
|
2665
|
+
return (jsxs(Card.Root, { margin: "1", gridColumn: "span 12", children: [jsx(Card.Header, { color: "gray.400", children: translate.t(column.id) }), jsx(Card.Body, { display: "grid", gap: "4", gridTemplateColumns: "repeat(12, 1fr)", children: column.columns.map((column) => {
|
|
2666
|
+
if (!column.getIsVisible()) {
|
|
2667
|
+
return jsx(Fragment, {});
|
|
2668
|
+
}
|
|
2669
|
+
const foundCell = row
|
|
2670
|
+
.getVisibleCells()
|
|
2671
|
+
.find((cell) => {
|
|
2672
|
+
return cell.id === `${rowId}_${column.id}`;
|
|
2673
|
+
});
|
|
2674
|
+
return jsx(CellRenderer, { cell: foundCell });
|
|
2675
|
+
}) })] }, `chakra-table-card-${childCell?.id}`));
|
|
2676
|
+
}
|
|
2677
|
+
return jsx(CellRenderer, { cell: childCell });
|
|
2678
|
+
}) }) }, `chakra-table-card-${rowId}`));
|
|
2694
2679
|
}) }));
|
|
2695
2680
|
};
|
|
2696
2681
|
|
|
@@ -3478,7 +3463,7 @@ const widthSanityCheck = (widthList, ignoreList, properties) => {
|
|
|
3478
3463
|
throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
|
|
3479
3464
|
}
|
|
3480
3465
|
};
|
|
3481
|
-
const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
|
|
3466
|
+
const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
|
|
3482
3467
|
const { properties } = schema;
|
|
3483
3468
|
idListSanityCheck("ignore", ignore, properties);
|
|
3484
3469
|
widthSanityCheck(width, ignore, properties);
|
|
@@ -3490,7 +3475,8 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
|
|
|
3490
3475
|
return snakeToLabel(column);
|
|
3491
3476
|
};
|
|
3492
3477
|
const keys = Object.keys(properties);
|
|
3493
|
-
const
|
|
3478
|
+
const included = include.length > 0 ? include : keys;
|
|
3479
|
+
const ignored = included.filter((key) => {
|
|
3494
3480
|
return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
|
|
3495
3481
|
});
|
|
3496
3482
|
const columnHelper = createColumnHelper();
|
|
@@ -4252,13 +4238,38 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4252
4238
|
const dataList = data?.data ?? [];
|
|
4253
4239
|
const count = data?.count ?? 0;
|
|
4254
4240
|
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4241
|
+
const watchId = watch(colLabel);
|
|
4242
|
+
const watchIds = (watch(colLabel) ?? []);
|
|
4243
|
+
useQuery({
|
|
4244
|
+
queryKey: [`idpicker`, { column, searchText, limit, page }],
|
|
4245
|
+
queryFn: async () => {
|
|
4246
|
+
const data = await getTableData({
|
|
4247
|
+
serverUrl,
|
|
4248
|
+
searching: watchId,
|
|
4249
|
+
in_table: table,
|
|
4250
|
+
limit: limit,
|
|
4251
|
+
offset: page * 10,
|
|
4252
|
+
});
|
|
4253
|
+
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4254
|
+
return [
|
|
4255
|
+
item[column_ref],
|
|
4256
|
+
{
|
|
4257
|
+
...item,
|
|
4258
|
+
},
|
|
4259
|
+
];
|
|
4260
|
+
}));
|
|
4261
|
+
setIdMap((state) => {
|
|
4262
|
+
return { ...state, ...newMap };
|
|
4263
|
+
});
|
|
4264
|
+
return data;
|
|
4265
|
+
},
|
|
4266
|
+
staleTime: 300000,
|
|
4267
|
+
});
|
|
4255
4268
|
const onSearchChange = async (event) => {
|
|
4256
4269
|
setSearchText(event.target.value);
|
|
4257
4270
|
setPage(0);
|
|
4258
4271
|
setLimit(10);
|
|
4259
4272
|
};
|
|
4260
|
-
const watchId = watch(colLabel);
|
|
4261
|
-
const watchIds = (watch(colLabel) ?? []);
|
|
4262
4273
|
const getPickedValue = () => {
|
|
4263
4274
|
if (Object.keys(idMap).length <= 0) {
|
|
4264
4275
|
return "";
|
|
@@ -4287,7 +4298,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4287
4298
|
}, children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
|
|
4288
4299
|
onSearchChange(event);
|
|
4289
4300
|
setOpenSearchResult(true);
|
|
4290
|
-
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxs(Fragment, { children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(
|
|
4301
|
+
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxs(Fragment, { children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsx(Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children:
|
|
4291
4302
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4292
4303
|
dataList.map((item) => {
|
|
4293
4304
|
const selected = isMultiple
|
|
@@ -4307,7 +4318,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4307
4318
|
}, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
4308
4319
|
? renderDisplay(item)
|
|
4309
4320
|
: item[display_column] }, item[column_ref]));
|
|
4310
|
-
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count:
|
|
4321
|
+
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
|
|
4311
4322
|
};
|
|
4312
4323
|
|
|
4313
4324
|
const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
|
|
@@ -3,4 +3,4 @@ export interface DataDisplayProps {
|
|
|
3
3
|
variant?: "horizontal" | "stats" | "";
|
|
4
4
|
translate?: UseTranslationResponse<any, any>;
|
|
5
5
|
}
|
|
6
|
-
export declare const DataDisplay: ({ variant
|
|
6
|
+
export declare const DataDisplay: ({ variant }: DataDisplayProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,6 +3,7 @@ import { JSONSchema7 } from "json-schema";
|
|
|
3
3
|
import { UseTranslationResponse } from "react-i18next";
|
|
4
4
|
export interface GetColumnsConfigs<K extends RowData> {
|
|
5
5
|
schema: JSONSchema7;
|
|
6
|
+
include?: K[];
|
|
6
7
|
ignore?: K[];
|
|
7
8
|
width?: number[];
|
|
8
9
|
meta?: {
|
|
@@ -12,4 +13,4 @@ export interface GetColumnsConfigs<K extends RowData> {
|
|
|
12
13
|
translate?: UseTranslationResponse<any, any>;
|
|
13
14
|
}
|
|
14
15
|
export declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
|
|
15
|
-
export declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
|
|
16
|
+
export declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
|