@bsol-oss/react-datatable5 12.0.0-beta.34 → 12.0.0-beta.36
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.js
CHANGED
|
@@ -3851,7 +3851,7 @@ function filterArray(array, searchTerm) {
|
|
|
3851
3851
|
});
|
|
3852
3852
|
}
|
|
3853
3853
|
|
|
3854
|
-
const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
3854
|
+
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
3855
3855
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
3856
3856
|
const { translate } = useSchemaContext();
|
|
3857
3857
|
const { required, variant } = schema;
|
|
@@ -3861,7 +3861,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3861
3861
|
const [limit, setLimit] = React.useState(10);
|
|
3862
3862
|
const [openSearchResult, setOpenSearchResult] = React.useState();
|
|
3863
3863
|
const ref = React.useRef(null);
|
|
3864
|
-
const colLabel = `${prefix}${
|
|
3864
|
+
const colLabel = `${prefix}${column}`;
|
|
3865
3865
|
const watchEnum = watch(colLabel);
|
|
3866
3866
|
const watchEnums = (watch(colLabel) ?? []);
|
|
3867
3867
|
const dataList = schema.enum ?? [];
|
|
@@ -3907,7 +3907,21 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3907
3907
|
: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
|
|
3908
3908
|
onSearchChange(event);
|
|
3909
3909
|
setOpenSearchResult(true);
|
|
3910
|
-
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(react.Text, { children: `${translate.t(`${colLabel}.total`)}: ${count}, ${translate.t(`${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:
|
|
3910
|
+
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), showTotalAndLimit && (jsxRuntime.jsx(react.Text, { children: `${translate.t(`${colLabel}.total`)}: ${count}, ${translate.t(`${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: dataList.filter((item) => {
|
|
3911
|
+
const searchTerm = (searchText || "").toLowerCase();
|
|
3912
|
+
if (!searchTerm)
|
|
3913
|
+
return true;
|
|
3914
|
+
// Check if the original enum value contains the search text
|
|
3915
|
+
const enumValueMatch = item.toLowerCase().includes(searchTerm);
|
|
3916
|
+
// Check if the display value (translation) contains the search text
|
|
3917
|
+
const displayValue = !!renderDisplay === true
|
|
3918
|
+
? renderDisplay(item)
|
|
3919
|
+
: translate.t(removeIndex(`${colLabel}.${item}`));
|
|
3920
|
+
// Convert to string and check if it includes the search term
|
|
3921
|
+
const displayValueString = String(displayValue).toLowerCase();
|
|
3922
|
+
const displayValueMatch = displayValueString.includes(searchTerm);
|
|
3923
|
+
return enumValueMatch || displayValueMatch;
|
|
3924
|
+
}).map((item) => {
|
|
3911
3925
|
const selected = isMultiple
|
|
3912
3926
|
? watchEnums.some((enumValue) => item === enumValue)
|
|
3913
3927
|
: watchEnum == item;
|
|
@@ -4296,6 +4310,15 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4296
4310
|
}) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4297
4311
|
};
|
|
4298
4312
|
|
|
4313
|
+
const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
|
|
4314
|
+
const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
|
|
4315
|
+
return (jsxRuntime.jsxs(react.Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsxs(react.Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsxRuntime.jsx(react.Popover.Arrow, { children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) })), content] }) }) })] }));
|
|
4316
|
+
});
|
|
4317
|
+
const InfoTip = React__namespace.forwardRef(function InfoTip(props, ref) {
|
|
4318
|
+
const { children, ...rest } = props;
|
|
4319
|
+
return (jsxRuntime.jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "colorPalette", children: jsxRuntime.jsx(hi.HiOutlineInformationCircle, {}) }) }));
|
|
4320
|
+
});
|
|
4321
|
+
|
|
4299
4322
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
4300
4323
|
if (serverUrl === undefined || serverUrl.length == 0) {
|
|
4301
4324
|
throw new Error("The serverUrl is missing");
|
|
@@ -4344,7 +4367,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4344
4367
|
searching: searchText ?? "",
|
|
4345
4368
|
in_table: table,
|
|
4346
4369
|
limit: limit,
|
|
4347
|
-
offset: page *
|
|
4370
|
+
offset: page * limit,
|
|
4348
4371
|
});
|
|
4349
4372
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4350
4373
|
return [
|
|
@@ -4368,18 +4391,23 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4368
4391
|
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4369
4392
|
const watchId = watch(colLabel);
|
|
4370
4393
|
const watchIds = (watch(colLabel) ?? []);
|
|
4371
|
-
reactQuery.useQuery({
|
|
4394
|
+
const queryDefault = reactQuery.useQuery({
|
|
4372
4395
|
queryKey: [
|
|
4373
|
-
`idpicker`,
|
|
4374
|
-
{ form: parentSchema.title, column,
|
|
4396
|
+
`idpicker-default`,
|
|
4397
|
+
{ form: parentSchema.title, column, id: isMultiple ? watchIds : watchId },
|
|
4375
4398
|
],
|
|
4376
4399
|
queryFn: async () => {
|
|
4400
|
+
if (!watchId && (!watchIds || watchIds.length === 0)) {
|
|
4401
|
+
return { data: [] };
|
|
4402
|
+
}
|
|
4403
|
+
const searchValue = isMultiple ? watchIds.join(",") : watchId;
|
|
4377
4404
|
const data = await getTableData({
|
|
4378
4405
|
serverUrl,
|
|
4379
|
-
searching:
|
|
4406
|
+
searching: searchValue,
|
|
4380
4407
|
in_table: table,
|
|
4381
|
-
|
|
4382
|
-
|
|
4408
|
+
where: [{ id: column_ref, value: isMultiple ? watchIds : watchId }],
|
|
4409
|
+
limit: isMultiple ? watchIds.length : 1,
|
|
4410
|
+
offset: 0,
|
|
4383
4411
|
});
|
|
4384
4412
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4385
4413
|
return [
|
|
@@ -4394,12 +4422,32 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4394
4422
|
});
|
|
4395
4423
|
return data;
|
|
4396
4424
|
},
|
|
4425
|
+
enabled: isMultiple
|
|
4426
|
+
? Array.isArray(watchIds) && watchIds.length > 0
|
|
4427
|
+
: !!watchId,
|
|
4397
4428
|
});
|
|
4429
|
+
// Effect to trigger the default query when the component mounts
|
|
4430
|
+
React.useEffect(() => {
|
|
4431
|
+
if (isMultiple ? watchIds.length > 0 : !!watchId) {
|
|
4432
|
+
queryDefault.refetch();
|
|
4433
|
+
}
|
|
4434
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4435
|
+
}, []);
|
|
4398
4436
|
const onSearchChange = async (event) => {
|
|
4399
4437
|
setSearchText(event.target.value);
|
|
4400
4438
|
setPage(0);
|
|
4401
4439
|
setLimit(10);
|
|
4402
4440
|
};
|
|
4441
|
+
const handleLimitChange = (event) => {
|
|
4442
|
+
const newLimit = Number(event.target.value);
|
|
4443
|
+
setLimit(newLimit);
|
|
4444
|
+
// Reset to first page when changing limit
|
|
4445
|
+
setPage(0);
|
|
4446
|
+
// Trigger a new search with the updated limit
|
|
4447
|
+
if (searchText?.length) {
|
|
4448
|
+
query.refetch();
|
|
4449
|
+
}
|
|
4450
|
+
};
|
|
4403
4451
|
const getPickedValue = () => {
|
|
4404
4452
|
if (Object.keys(idMap).length <= 0) {
|
|
4405
4453
|
return "";
|
|
@@ -4420,7 +4468,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4420
4468
|
return (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
|
|
4421
4469
|
}
|
|
4422
4470
|
return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
|
|
4423
|
-
setValue(
|
|
4471
|
+
setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
|
|
4424
4472
|
}, children: !!renderDisplay === true
|
|
4425
4473
|
? renderDisplay(item)
|
|
4426
4474
|
: item[display_column] }, id));
|
|
@@ -4428,12 +4476,15 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4428
4476
|
setOpenSearchResult(true);
|
|
4429
4477
|
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
|
|
4430
4478
|
setOpenSearchResult(true);
|
|
4431
|
-
}, justifyContent: "start", 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}.type_to_search`)), onChange: (event) => {
|
|
4479
|
+
}, justifyContent: "start", children: queryDefault.isLoading ? jsxRuntime.jsx(react.Spinner, { size: "sm" }) : 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}.type_to_search`)), onChange: (event) => {
|
|
4432
4480
|
onSearchChange(event);
|
|
4433
4481
|
setOpenSearchResult(true);
|
|
4434
|
-
}, 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.
|
|
4435
|
-
|
|
4436
|
-
|
|
4482
|
+
}, 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.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", children: [jsxRuntime.jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxRuntime.jsxs(react.Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxRuntime.jsxs(react.Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", page * limit + 1, "-", Math.min((page + 1) * limit, count)] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
|
|
4483
|
+
padding: "4px 8px",
|
|
4484
|
+
borderRadius: "4px",
|
|
4485
|
+
border: "1px solid #ccc",
|
|
4486
|
+
fontSize: "14px",
|
|
4487
|
+
}, children: [jsxRuntime.jsx("option", { value: "5", children: "5" }), jsxRuntime.jsx("option", { value: "10", children: "10" }), jsxRuntime.jsx("option", { value: "20", children: "20" }), jsxRuntime.jsx("option", { value: "50", children: "50" })] }) })] }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
|
|
4437
4488
|
const selected = isMultiple
|
|
4438
4489
|
? watchIds.some((id) => item[column_ref] === id)
|
|
4439
4490
|
: watchId === item[column_ref];
|
|
@@ -4453,7 +4504,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4453
4504
|
: {}), children: !!renderDisplay === true
|
|
4454
4505
|
? renderDisplay(item)
|
|
4455
4506
|
: item[display_column] }, item[column_ref]));
|
|
4456
|
-
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize:
|
|
4507
|
+
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, 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}.field_required`)) }))] }));
|
|
4457
4508
|
};
|
|
4458
4509
|
|
|
4459
4510
|
const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
|
package/dist/index.mjs
CHANGED
|
@@ -17,7 +17,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
17
17
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
18
18
|
import rafSchd from 'raf-schd';
|
|
19
19
|
import invariant from 'tiny-invariant';
|
|
20
|
-
import { HiColorSwatch } from 'react-icons/hi';
|
|
20
|
+
import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
|
|
21
21
|
import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table';
|
|
22
22
|
import { rankItem } from '@tanstack/match-sorter-utils';
|
|
23
23
|
import { BsExclamationCircleFill } from 'react-icons/bs';
|
|
@@ -3831,7 +3831,7 @@ function filterArray(array, searchTerm) {
|
|
|
3831
3831
|
});
|
|
3832
3832
|
}
|
|
3833
3833
|
|
|
3834
|
-
const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
3834
|
+
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
3835
3835
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
3836
3836
|
const { translate } = useSchemaContext();
|
|
3837
3837
|
const { required, variant } = schema;
|
|
@@ -3841,7 +3841,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3841
3841
|
const [limit, setLimit] = useState(10);
|
|
3842
3842
|
const [openSearchResult, setOpenSearchResult] = useState();
|
|
3843
3843
|
const ref = useRef(null);
|
|
3844
|
-
const colLabel = `${prefix}${
|
|
3844
|
+
const colLabel = `${prefix}${column}`;
|
|
3845
3845
|
const watchEnum = watch(colLabel);
|
|
3846
3846
|
const watchEnums = (watch(colLabel) ?? []);
|
|
3847
3847
|
const dataList = schema.enum ?? [];
|
|
@@ -3887,7 +3887,21 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3887
3887
|
: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
|
|
3888
3888
|
onSearchChange(event);
|
|
3889
3889
|
setOpenSearchResult(true);
|
|
3890
|
-
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsx(Text, { children: `${translate.t(`${colLabel}.total`)}: ${count}, ${translate.t(`${colLabel}.showing`)} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children:
|
|
3890
|
+
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${translate.t(`${colLabel}.total`)}: ${count}, ${translate.t(`${colLabel}.showing`)} ${limit}` })), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: dataList.filter((item) => {
|
|
3891
|
+
const searchTerm = (searchText || "").toLowerCase();
|
|
3892
|
+
if (!searchTerm)
|
|
3893
|
+
return true;
|
|
3894
|
+
// Check if the original enum value contains the search text
|
|
3895
|
+
const enumValueMatch = item.toLowerCase().includes(searchTerm);
|
|
3896
|
+
// Check if the display value (translation) contains the search text
|
|
3897
|
+
const displayValue = !!renderDisplay === true
|
|
3898
|
+
? renderDisplay(item)
|
|
3899
|
+
: translate.t(removeIndex(`${colLabel}.${item}`));
|
|
3900
|
+
// Convert to string and check if it includes the search term
|
|
3901
|
+
const displayValueString = String(displayValue).toLowerCase();
|
|
3902
|
+
const displayValueMatch = displayValueString.includes(searchTerm);
|
|
3903
|
+
return enumValueMatch || displayValueMatch;
|
|
3904
|
+
}).map((item) => {
|
|
3891
3905
|
const selected = isMultiple
|
|
3892
3906
|
? watchEnums.some((enumValue) => item === enumValue)
|
|
3893
3907
|
: watchEnum == item;
|
|
@@ -4276,6 +4290,15 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4276
4290
|
}) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4277
4291
|
};
|
|
4278
4292
|
|
|
4293
|
+
const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
|
|
4294
|
+
const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
|
|
4295
|
+
return (jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsx(Popover.Trigger, { asChild: true, children: children }), jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsx(Popover.Arrow, { children: jsx(Popover.ArrowTip, {}) })), content] }) }) })] }));
|
|
4296
|
+
});
|
|
4297
|
+
const InfoTip = React.forwardRef(function InfoTip(props, ref) {
|
|
4298
|
+
const { children, ...rest } = props;
|
|
4299
|
+
return (jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsx(IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "colorPalette", children: jsx(HiOutlineInformationCircle, {}) }) }));
|
|
4300
|
+
});
|
|
4301
|
+
|
|
4279
4302
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
4280
4303
|
if (serverUrl === undefined || serverUrl.length == 0) {
|
|
4281
4304
|
throw new Error("The serverUrl is missing");
|
|
@@ -4324,7 +4347,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4324
4347
|
searching: searchText ?? "",
|
|
4325
4348
|
in_table: table,
|
|
4326
4349
|
limit: limit,
|
|
4327
|
-
offset: page *
|
|
4350
|
+
offset: page * limit,
|
|
4328
4351
|
});
|
|
4329
4352
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4330
4353
|
return [
|
|
@@ -4348,18 +4371,23 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4348
4371
|
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4349
4372
|
const watchId = watch(colLabel);
|
|
4350
4373
|
const watchIds = (watch(colLabel) ?? []);
|
|
4351
|
-
useQuery({
|
|
4374
|
+
const queryDefault = useQuery({
|
|
4352
4375
|
queryKey: [
|
|
4353
|
-
`idpicker`,
|
|
4354
|
-
{ form: parentSchema.title, column,
|
|
4376
|
+
`idpicker-default`,
|
|
4377
|
+
{ form: parentSchema.title, column, id: isMultiple ? watchIds : watchId },
|
|
4355
4378
|
],
|
|
4356
4379
|
queryFn: async () => {
|
|
4380
|
+
if (!watchId && (!watchIds || watchIds.length === 0)) {
|
|
4381
|
+
return { data: [] };
|
|
4382
|
+
}
|
|
4383
|
+
const searchValue = isMultiple ? watchIds.join(",") : watchId;
|
|
4357
4384
|
const data = await getTableData({
|
|
4358
4385
|
serverUrl,
|
|
4359
|
-
searching:
|
|
4386
|
+
searching: searchValue,
|
|
4360
4387
|
in_table: table,
|
|
4361
|
-
|
|
4362
|
-
|
|
4388
|
+
where: [{ id: column_ref, value: isMultiple ? watchIds : watchId }],
|
|
4389
|
+
limit: isMultiple ? watchIds.length : 1,
|
|
4390
|
+
offset: 0,
|
|
4363
4391
|
});
|
|
4364
4392
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4365
4393
|
return [
|
|
@@ -4374,12 +4402,32 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4374
4402
|
});
|
|
4375
4403
|
return data;
|
|
4376
4404
|
},
|
|
4405
|
+
enabled: isMultiple
|
|
4406
|
+
? Array.isArray(watchIds) && watchIds.length > 0
|
|
4407
|
+
: !!watchId,
|
|
4377
4408
|
});
|
|
4409
|
+
// Effect to trigger the default query when the component mounts
|
|
4410
|
+
useEffect(() => {
|
|
4411
|
+
if (isMultiple ? watchIds.length > 0 : !!watchId) {
|
|
4412
|
+
queryDefault.refetch();
|
|
4413
|
+
}
|
|
4414
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4415
|
+
}, []);
|
|
4378
4416
|
const onSearchChange = async (event) => {
|
|
4379
4417
|
setSearchText(event.target.value);
|
|
4380
4418
|
setPage(0);
|
|
4381
4419
|
setLimit(10);
|
|
4382
4420
|
};
|
|
4421
|
+
const handleLimitChange = (event) => {
|
|
4422
|
+
const newLimit = Number(event.target.value);
|
|
4423
|
+
setLimit(newLimit);
|
|
4424
|
+
// Reset to first page when changing limit
|
|
4425
|
+
setPage(0);
|
|
4426
|
+
// Trigger a new search with the updated limit
|
|
4427
|
+
if (searchText?.length) {
|
|
4428
|
+
query.refetch();
|
|
4429
|
+
}
|
|
4430
|
+
};
|
|
4383
4431
|
const getPickedValue = () => {
|
|
4384
4432
|
if (Object.keys(idMap).length <= 0) {
|
|
4385
4433
|
return "";
|
|
@@ -4400,7 +4448,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4400
4448
|
return (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
|
|
4401
4449
|
}
|
|
4402
4450
|
return (jsx(Tag, { closable: true, onClick: () => {
|
|
4403
|
-
setValue(
|
|
4451
|
+
setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
|
|
4404
4452
|
}, children: !!renderDisplay === true
|
|
4405
4453
|
? renderDisplay(item)
|
|
4406
4454
|
: item[display_column] }, id));
|
|
@@ -4408,12 +4456,15 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4408
4456
|
setOpenSearchResult(true);
|
|
4409
4457
|
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
|
|
4410
4458
|
setOpenSearchResult(true);
|
|
4411
|
-
}, justifyContent: "start", 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}.type_to_search`)), onChange: (event) => {
|
|
4459
|
+
}, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : 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}.type_to_search`)), onChange: (event) => {
|
|
4412
4460
|
onSearchChange(event);
|
|
4413
4461
|
setOpenSearchResult(true);
|
|
4414
|
-
}, 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, {}) })),
|
|
4415
|
-
|
|
4416
|
-
|
|
4462
|
+
}, 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, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", page * limit + 1, "-", Math.min((page + 1) * limit, count)] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
|
|
4463
|
+
padding: "4px 8px",
|
|
4464
|
+
borderRadius: "4px",
|
|
4465
|
+
border: "1px solid #ccc",
|
|
4466
|
+
fontSize: "14px",
|
|
4467
|
+
}, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "50", children: "50" })] }) })] }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
|
|
4417
4468
|
const selected = isMultiple
|
|
4418
4469
|
? watchIds.some((id) => item[column_ref] === id)
|
|
4419
4470
|
: watchId === item[column_ref];
|
|
@@ -4433,7 +4484,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4433
4484
|
: {}), children: !!renderDisplay === true
|
|
4434
4485
|
? renderDisplay(item)
|
|
4435
4486
|
: item[display_column] }, item[column_ref]));
|
|
4436
|
-
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize:
|
|
4487
|
+
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, 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}.field_required`)) }))] }));
|
|
4437
4488
|
};
|
|
4438
4489
|
|
|
4439
4490
|
const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
|
|
@@ -4,5 +4,6 @@ export interface IdPickerProps {
|
|
|
4
4
|
isMultiple?: boolean;
|
|
5
5
|
schema: CustomJSONSchema7;
|
|
6
6
|
prefix: string;
|
|
7
|
+
showTotalAndLimit?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export declare const EnumPicker: ({ column, isMultiple, schema, prefix, }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const EnumPicker: ({ column, isMultiple, schema, prefix, showTotalAndLimit, }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;
|