@bsol-oss/react-datatable5 12.0.0-beta.10 → 12.0.0-beta.12
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
|
@@ -443,8 +443,9 @@ declare const getColumns: <TData extends unknown>({ schema, include, ignore, wid
|
|
|
443
443
|
|
|
444
444
|
interface TableDataDisplayProps {
|
|
445
445
|
colorPalette?: string;
|
|
446
|
+
emptyComponent?: ReactNode;
|
|
446
447
|
}
|
|
447
|
-
declare const TableDataDisplay: ({ colorPalette }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
|
|
448
|
+
declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
|
|
448
449
|
|
|
449
450
|
interface FilterOptionsProps {
|
|
450
451
|
column: string;
|
package/dist/index.js
CHANGED
|
@@ -403,7 +403,7 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
|
403
403
|
const FilterDialog = ({ icon = jsxRuntime.jsx(md.MdFilterAlt, {}), }) => {
|
|
404
404
|
const filterModal = react.useDisclosure();
|
|
405
405
|
const { translate } = useDataTableContext();
|
|
406
|
-
return (jsxRuntime.jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", translate.t("
|
|
406
|
+
return (jsxRuntime.jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", translate.t("filter_dialog.button_text")] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: translate.t("filter_dialog.title") }) }), jsxRuntime.jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsxRuntime.jsx(TableFilter, {}) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(ResetFilteringButton, { text: translate.t("filter_dialog.reset") }), jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, variant: "subtle", children: translate.t("filter_dialog.close") })] }), jsxRuntime.jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
|
|
407
407
|
};
|
|
408
408
|
|
|
409
409
|
const MenuContent = React__namespace.forwardRef(function MenuContent(props, ref) {
|
|
@@ -2538,7 +2538,7 @@ const TableViewer = () => {
|
|
|
2538
2538
|
const ViewDialog = ({ icon = jsxRuntime.jsx(io.IoMdEye, {}) }) => {
|
|
2539
2539
|
const viewModel = react.useDisclosure();
|
|
2540
2540
|
const { translate } = useDataTableContext();
|
|
2541
|
-
return (jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", translate.t("
|
|
2541
|
+
return (jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", translate.t("view_dialog.button_text")] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: translate.t("view_dialog.title") }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(TableViewer, {}) }), jsxRuntime.jsx(DialogFooter, {})] })] }));
|
|
2542
2542
|
};
|
|
2543
2543
|
|
|
2544
2544
|
const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
|
|
@@ -3079,7 +3079,7 @@ const TableFilterTags = () => {
|
|
|
3079
3079
|
|
|
3080
3080
|
const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, }) => {
|
|
3081
3081
|
const { translate } = useDataTableContext();
|
|
3082
|
-
return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: translate.t("
|
|
3082
|
+
return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: translate.t("has_error"), children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
|
|
3083
3083
|
return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxRuntime.jsxs(react.Text, { children: [column, ":"] }), jsxRuntime.jsx(FilterOptions, { column: column })] }, column));
|
|
3084
3084
|
}) })), showFilterTags && (jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(TableFilterTags, {}) }))] }), jsxRuntime.jsx(react.Grid, { overflow: "auto", backgroundColor: "gray.50", _dark: {
|
|
3085
3085
|
backgroundColor: "gray.900",
|
|
@@ -3520,7 +3520,7 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
|
|
|
3520
3520
|
return columns;
|
|
3521
3521
|
};
|
|
3522
3522
|
|
|
3523
|
-
const TableDataDisplay = ({ colorPalette }) => {
|
|
3523
|
+
const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
|
|
3524
3524
|
const { table, columns, translate, data } = useDataTableContext();
|
|
3525
3525
|
const columnDef = table._getColumnDefs();
|
|
3526
3526
|
console.log(columnDef, "glp");
|
|
@@ -3562,6 +3562,9 @@ const TableDataDisplay = ({ colorPalette }) => {
|
|
|
3562
3562
|
borderBottomWidth: "1px",
|
|
3563
3563
|
...{ colorPalette },
|
|
3564
3564
|
};
|
|
3565
|
+
if (data.length <= 0) {
|
|
3566
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: emptyComponent });
|
|
3567
|
+
}
|
|
3565
3568
|
return (jsxRuntime.jsxs(react.Grid, { templateColumns: `${columnWidths}`, overflow: "auto", borderWidth: "1px", borderColor: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: [jsxRuntime.jsx(react.Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: columnHeaders.map((header) => {
|
|
3566
3569
|
return (jsxRuntime.jsx(react.Box, { flex: "1 0 0%", paddingX: "2", py: "1", overflow: "auto", textOverflow: "ellipsis", children: translate.t(`column_header.${header}`) }));
|
|
3567
3570
|
}) }), data.map((record) => {
|
|
@@ -3675,7 +3678,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3675
3678
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3676
3679
|
const { formState: { errors }, setValue, watch, } = reactHookForm.useFormContext();
|
|
3677
3680
|
const fields = (watch(colLabel) ?? []);
|
|
3678
|
-
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
3681
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
|
|
3679
3682
|
prefix: `${colLabel}.`,
|
|
3680
3683
|
schema: items }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
|
|
3681
3684
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
@@ -3695,7 +3698,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3695
3698
|
return;
|
|
3696
3699
|
}
|
|
3697
3700
|
setValue(colLabel, [...fields, {}]);
|
|
3698
|
-
}, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
3701
|
+
}, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3699
3702
|
};
|
|
3700
3703
|
|
|
3701
3704
|
const Field = React__namespace.forwardRef(function Field(props, ref) {
|
|
@@ -3710,10 +3713,10 @@ const BooleanPicker = ({ schema, column, prefix }) => {
|
|
|
3710
3713
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3711
3714
|
const colLabel = `${prefix}${column}`;
|
|
3712
3715
|
const value = watch(colLabel);
|
|
3713
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
3716
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3714
3717
|
gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onChange: () => {
|
|
3715
3718
|
setValue(colLabel, !value);
|
|
3716
|
-
} }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
3719
|
+
} }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3717
3720
|
};
|
|
3718
3721
|
|
|
3719
3722
|
const monthNamesShort = [
|
|
@@ -3812,7 +3815,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3812
3815
|
const [open, setOpen] = React.useState(false);
|
|
3813
3816
|
const selectedDate = watch(colLabel);
|
|
3814
3817
|
const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
|
|
3815
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
3818
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3816
3819
|
gridRow, children: [jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { size: "sm", variant: "outline", onClick: () => {
|
|
3817
3820
|
setOpen(true);
|
|
3818
3821
|
}, children: selectedDate !== undefined ? `${formatedDate}` : "" }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
|
|
@@ -3824,7 +3827,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3824
3827
|
onDateSelected: ({ date }) => {
|
|
3825
3828
|
setValue(colLabel, dayjs(date).format("YYYY-MM-DD"));
|
|
3826
3829
|
setOpen(false);
|
|
3827
|
-
} })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
3830
|
+
} })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3828
3831
|
};
|
|
3829
3832
|
|
|
3830
3833
|
function filterArray(array, searchTerm) {
|
|
@@ -3857,7 +3860,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3857
3860
|
setSearchText(event.target.value);
|
|
3858
3861
|
setLimit(10);
|
|
3859
3862
|
};
|
|
3860
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
3863
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3861
3864
|
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
|
|
3862
3865
|
const item = enumValue;
|
|
3863
3866
|
if (item === undefined) {
|
|
@@ -3871,7 +3874,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3871
3874
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
3872
3875
|
}), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
3873
3876
|
setOpenSearchResult(true);
|
|
3874
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
3877
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
|
|
3875
3878
|
setOpenSearchResult(true);
|
|
3876
3879
|
}, children: watchEnum === undefined
|
|
3877
3880
|
? ""
|
|
@@ -3893,7 +3896,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3893
3896
|
}, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
3894
3897
|
? renderDisplay(item)
|
|
3895
3898
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
3896
|
-
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: translate.t(removeIndex(`${colLabel}.
|
|
3899
|
+
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3897
3900
|
};
|
|
3898
3901
|
|
|
3899
3902
|
function isEnteringWindow(_ref) {
|
|
@@ -4255,7 +4258,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4255
4258
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4256
4259
|
const currentFiles = (watch(column) ?? []);
|
|
4257
4260
|
const colLabel = `${prefix}${column}`;
|
|
4258
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.
|
|
4261
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
|
|
4259
4262
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4260
4263
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4261
4264
|
}, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4264,7 +4267,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4264
4267
|
return name !== file.name;
|
|
4265
4268
|
}));
|
|
4266
4269
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
|
|
4267
|
-
}) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4270
|
+
}) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4268
4271
|
};
|
|
4269
4272
|
|
|
4270
4273
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
@@ -4381,7 +4384,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4381
4384
|
}
|
|
4382
4385
|
return record[display_column];
|
|
4383
4386
|
};
|
|
4384
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(removeIndex(`${column}.
|
|
4387
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(removeIndex(`${column}.field_label`)))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4385
4388
|
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
|
|
4386
4389
|
const item = idMap[id];
|
|
4387
4390
|
if (item === undefined) {
|
|
@@ -4394,7 +4397,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4394
4397
|
: item[display_column] }, id));
|
|
4395
4398
|
}), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
4396
4399
|
setOpenSearchResult(true);
|
|
4397
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
4400
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
|
|
4398
4401
|
setOpenSearchResult(true);
|
|
4399
4402
|
}, 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) => {
|
|
4400
4403
|
onSearchChange(event);
|
|
@@ -4419,7 +4422,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4419
4422
|
}, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
4420
4423
|
? renderDisplay(item)
|
|
4421
4424
|
: item[display_column] }, item[column_ref]));
|
|
4422
|
-
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.
|
|
4425
|
+
}) }), 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: 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}.field_required`)) }))] }));
|
|
4423
4426
|
};
|
|
4424
4427
|
|
|
4425
4428
|
const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
|
|
@@ -4437,9 +4440,9 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4437
4440
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4438
4441
|
const colLabel = `${prefix}${column}`;
|
|
4439
4442
|
const value = watch(`${colLabel}`);
|
|
4440
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4443
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(NumberInputRoot, { children: jsxRuntime.jsx(NumberInputField$1, { required: isRequired, value: value, onChange: (event) => {
|
|
4441
4444
|
setValue(`${colLabel}`, Number(event.target.value));
|
|
4442
|
-
} }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4445
|
+
} }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4443
4446
|
};
|
|
4444
4447
|
|
|
4445
4448
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
@@ -4451,13 +4454,13 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4451
4454
|
if (properties === undefined) {
|
|
4452
4455
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4453
4456
|
}
|
|
4454
|
-
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
4457
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
|
|
4455
4458
|
return (
|
|
4456
4459
|
// @ts-expect-error find suitable types
|
|
4457
4460
|
jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
|
|
4458
4461
|
prefix: `${prefix}${column}.`,
|
|
4459
4462
|
properties }, `form-${colLabel}-${key}`));
|
|
4460
|
-
}) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4463
|
+
}) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4461
4464
|
};
|
|
4462
4465
|
|
|
4463
4466
|
const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
@@ -4469,7 +4472,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4469
4472
|
const [showNewEntries, setShowNewEntries] = React.useState(false);
|
|
4470
4473
|
const [newKey, setNewKey] = React.useState();
|
|
4471
4474
|
const [newValue, setNewValue] = React.useState();
|
|
4472
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.
|
|
4475
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
|
|
4473
4476
|
return (jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
|
|
4474
4477
|
const filtered = entries.filter(([target]) => {
|
|
4475
4478
|
return target !== key;
|
|
@@ -4509,7 +4512,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4509
4512
|
setShowNewEntries(true);
|
|
4510
4513
|
setNewKey(undefined);
|
|
4511
4514
|
setNewValue(undefined);
|
|
4512
|
-
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.
|
|
4515
|
+
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4513
4516
|
};
|
|
4514
4517
|
|
|
4515
4518
|
const StringInputField = ({ column, schema, prefix, }) => {
|
|
@@ -4518,7 +4521,7 @@ const StringInputField = ({ column, schema, prefix, }) => {
|
|
|
4518
4521
|
const { required, gridColumn, gridRow } = schema;
|
|
4519
4522
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4520
4523
|
const colLabel = `${prefix}${column}`;
|
|
4521
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4524
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4522
4525
|
};
|
|
4523
4526
|
|
|
4524
4527
|
const RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
|
|
@@ -4682,9 +4685,9 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4682
4685
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4683
4686
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4684
4687
|
const values = watch(colLabel) ?? [];
|
|
4685
|
-
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
4688
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), values.map((field, index) => (jsxRuntime.jsx(react.Flex, { flexFlow: "column", children: jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaViewer, { column: `${index}`,
|
|
4686
4689
|
prefix: `${colLabel}.`,
|
|
4687
|
-
schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4690
|
+
schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4688
4691
|
};
|
|
4689
4692
|
|
|
4690
4693
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4694,10 +4697,10 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
|
4694
4697
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4695
4698
|
const colLabel = `${prefix}${column}`;
|
|
4696
4699
|
const value = watch(colLabel);
|
|
4697
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4700
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4698
4701
|
gridRow, children: [jsxRuntime.jsx(react.Text, { children: value
|
|
4699
4702
|
? translate.t(removeIndex(`${colLabel}.true`))
|
|
4700
|
-
: translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4703
|
+
: translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4701
4704
|
};
|
|
4702
4705
|
|
|
4703
4706
|
const DateViewer = ({ column, schema, prefix }) => {
|
|
@@ -4707,8 +4710,8 @@ const DateViewer = ({ column, schema, prefix }) => {
|
|
|
4707
4710
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4708
4711
|
const colLabel = `${prefix}${column}`;
|
|
4709
4712
|
const selectedDate = watch(colLabel);
|
|
4710
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4711
|
-
gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.
|
|
4713
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4714
|
+
gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4712
4715
|
};
|
|
4713
4716
|
|
|
4714
4717
|
const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
@@ -4720,7 +4723,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4720
4723
|
const colLabel = `${prefix}${column}`;
|
|
4721
4724
|
const watchEnum = watch(colLabel);
|
|
4722
4725
|
const watchEnums = (watch(colLabel) ?? []);
|
|
4723
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4726
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4724
4727
|
gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
|
|
4725
4728
|
const item = enumValue;
|
|
4726
4729
|
if (item === undefined) {
|
|
@@ -4729,7 +4732,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4729
4732
|
return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4730
4733
|
? renderDisplay(item)
|
|
4731
4734
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
4732
|
-
}) })), !isMultiple && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4735
|
+
}) })), !isMultiple && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4733
4736
|
};
|
|
4734
4737
|
|
|
4735
4738
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
@@ -4739,7 +4742,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4739
4742
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4740
4743
|
const currentFiles = (watch(column) ?? []);
|
|
4741
4744
|
const colLabel = `${prefix}${column}`;
|
|
4742
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.
|
|
4745
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
|
|
4743
4746
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4744
4747
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4745
4748
|
}, placeholder: translate.t(`${colLabel}.fileDropzone`) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4748,7 +4751,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4748
4751
|
return name !== file.name;
|
|
4749
4752
|
}));
|
|
4750
4753
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
|
|
4751
|
-
}) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4754
|
+
}) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4752
4755
|
};
|
|
4753
4756
|
|
|
4754
4757
|
const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
@@ -4770,7 +4773,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4770
4773
|
}
|
|
4771
4774
|
return record[display_column];
|
|
4772
4775
|
};
|
|
4773
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4776
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4774
4777
|
gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchIds.map((id) => {
|
|
4775
4778
|
const item = idMap[id];
|
|
4776
4779
|
if (item === undefined) {
|
|
@@ -4779,7 +4782,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4779
4782
|
return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4780
4783
|
? renderDisplay(item)
|
|
4781
4784
|
: item[display_column] }, id));
|
|
4782
|
-
}) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: getPickedValue() }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4785
|
+
}) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: getPickedValue() }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4783
4786
|
};
|
|
4784
4787
|
|
|
4785
4788
|
const NumberViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4789,7 +4792,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
4789
4792
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4790
4793
|
const colLabel = `${prefix}${column}`;
|
|
4791
4794
|
const value = watch(colLabel);
|
|
4792
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4795
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(react.Text, { children: value }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4793
4796
|
};
|
|
4794
4797
|
|
|
4795
4798
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
@@ -4801,13 +4804,13 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
4801
4804
|
if (properties === undefined) {
|
|
4802
4805
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4803
4806
|
}
|
|
4804
|
-
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
4807
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
|
|
4805
4808
|
return (
|
|
4806
4809
|
// @ts-expect-error find suitable types
|
|
4807
4810
|
jsxRuntime.jsx(ColumnViewer, { column: `${key}`,
|
|
4808
4811
|
prefix: `${prefix}${column}.`,
|
|
4809
4812
|
properties }, `form-objectviewer-${colLabel}-${key}`));
|
|
4810
|
-
}) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4813
|
+
}) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4811
4814
|
};
|
|
4812
4815
|
|
|
4813
4816
|
const RecordInput = ({ column, schema, prefix }) => {
|
|
@@ -4819,7 +4822,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4819
4822
|
const [showNewEntries, setShowNewEntries] = React.useState(false);
|
|
4820
4823
|
const [newKey, setNewKey] = React.useState();
|
|
4821
4824
|
const [newValue, setNewValue] = React.useState();
|
|
4822
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.
|
|
4825
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
|
|
4823
4826
|
return (jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
|
|
4824
4827
|
const filtered = entries.filter(([target]) => {
|
|
4825
4828
|
return target !== key;
|
|
@@ -4859,7 +4862,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4859
4862
|
setShowNewEntries(true);
|
|
4860
4863
|
setNewKey(undefined);
|
|
4861
4864
|
setNewValue(undefined);
|
|
4862
|
-
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.
|
|
4865
|
+
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4863
4866
|
};
|
|
4864
4867
|
|
|
4865
4868
|
const TagViewer = ({ column, schema, prefix }) => {
|
|
@@ -4954,7 +4957,7 @@ const StringViewer = ({ column, schema, prefix, }) => {
|
|
|
4954
4957
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4955
4958
|
const colLabel = `${prefix}${column}`;
|
|
4956
4959
|
const value = watch(colLabel);
|
|
4957
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4960
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: value }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4958
4961
|
};
|
|
4959
4962
|
|
|
4960
4963
|
const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
@@ -5093,7 +5096,7 @@ const FormBody = () => {
|
|
|
5093
5096
|
include,
|
|
5094
5097
|
});
|
|
5095
5098
|
if (isSuccess) {
|
|
5096
|
-
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("
|
|
5099
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submit_success") })] }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { onClick: async () => {
|
|
5097
5100
|
setIsError(false);
|
|
5098
5101
|
setIsSubmiting(false);
|
|
5099
5102
|
setIsSuccess(false);
|
package/dist/index.mjs
CHANGED
|
@@ -383,7 +383,7 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
|
383
383
|
const FilterDialog = ({ icon = jsx(MdFilterAlt, {}), }) => {
|
|
384
384
|
const filterModal = useDisclosure();
|
|
385
385
|
const { translate } = useDataTableContext();
|
|
386
|
-
return (jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", translate.t("
|
|
386
|
+
return (jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", translate.t("filter_dialog.button_text")] }) }), jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: translate.t("filter_dialog.title") }) }), jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsx(TableFilter, {}) }), jsxs(DialogFooter, { children: [jsx(ResetFilteringButton, { text: translate.t("filter_dialog.reset") }), jsx(Button$1, { onClick: filterModal.onClose, variant: "subtle", children: translate.t("filter_dialog.close") })] }), jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
|
|
387
387
|
};
|
|
388
388
|
|
|
389
389
|
const MenuContent = React.forwardRef(function MenuContent(props, ref) {
|
|
@@ -2518,7 +2518,7 @@ const TableViewer = () => {
|
|
|
2518
2518
|
const ViewDialog = ({ icon = jsx(IoMdEye, {}) }) => {
|
|
2519
2519
|
const viewModel = useDisclosure();
|
|
2520
2520
|
const { translate } = useDataTableContext();
|
|
2521
|
-
return (jsxs(DialogRoot, { children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", translate.t("
|
|
2521
|
+
return (jsxs(DialogRoot, { children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", translate.t("view_dialog.button_text")] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsx(DialogHeader, { children: jsx(DialogTitle, { children: translate.t("view_dialog.title") }) }), jsx(DialogBody, { children: jsx(TableViewer, {}) }), jsx(DialogFooter, {})] })] }));
|
|
2522
2522
|
};
|
|
2523
2523
|
|
|
2524
2524
|
const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
|
|
@@ -3059,7 +3059,7 @@ const TableFilterTags = () => {
|
|
|
3059
3059
|
|
|
3060
3060
|
const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, }) => {
|
|
3061
3061
|
const { translate } = useDataTableContext();
|
|
3062
|
-
return (jsxs(Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsxs(Flex, { justifyContent: "space-between", children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { content: translate.t("
|
|
3062
|
+
return (jsxs(Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsxs(Flex, { justifyContent: "space-between", children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { content: translate.t("has_error"), children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsx(Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
|
|
3063
3063
|
return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [column, ":"] }), jsx(FilterOptions, { column: column })] }, column));
|
|
3064
3064
|
}) })), showFilterTags && (jsx(Flex, { children: jsx(TableFilterTags, {}) }))] }), jsx(Grid, { overflow: "auto", backgroundColor: "gray.50", _dark: {
|
|
3065
3065
|
backgroundColor: "gray.900",
|
|
@@ -3500,7 +3500,7 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
|
|
|
3500
3500
|
return columns;
|
|
3501
3501
|
};
|
|
3502
3502
|
|
|
3503
|
-
const TableDataDisplay = ({ colorPalette }) => {
|
|
3503
|
+
const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
|
|
3504
3504
|
const { table, columns, translate, data } = useDataTableContext();
|
|
3505
3505
|
const columnDef = table._getColumnDefs();
|
|
3506
3506
|
console.log(columnDef, "glp");
|
|
@@ -3542,6 +3542,9 @@ const TableDataDisplay = ({ colorPalette }) => {
|
|
|
3542
3542
|
borderBottomWidth: "1px",
|
|
3543
3543
|
...{ colorPalette },
|
|
3544
3544
|
};
|
|
3545
|
+
if (data.length <= 0) {
|
|
3546
|
+
return jsx(Fragment, { children: emptyComponent });
|
|
3547
|
+
}
|
|
3545
3548
|
return (jsxs(Grid, { templateColumns: `${columnWidths}`, overflow: "auto", borderWidth: "1px", borderColor: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: [jsx(Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: "colorPalette.200", _dark: "colorPalette.800" }, colorPalette, children: columnHeaders.map((header) => {
|
|
3546
3549
|
return (jsx(Box, { flex: "1 0 0%", paddingX: "2", py: "1", overflow: "auto", textOverflow: "ellipsis", children: translate.t(`column_header.${header}`) }));
|
|
3547
3550
|
}) }), data.map((record) => {
|
|
@@ -3655,7 +3658,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3655
3658
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3656
3659
|
const { formState: { errors }, setValue, watch, } = useFormContext();
|
|
3657
3660
|
const fields = (watch(colLabel) ?? []);
|
|
3658
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
3661
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxs(Flex, { flexFlow: "column", children: [jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsx(SchemaRenderer, { column: `${index}`,
|
|
3659
3662
|
prefix: `${colLabel}.`,
|
|
3660
3663
|
schema: items }) }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { variant: "ghost", onClick: () => {
|
|
3661
3664
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
@@ -3675,7 +3678,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3675
3678
|
return;
|
|
3676
3679
|
}
|
|
3677
3680
|
setValue(colLabel, [...fields, {}]);
|
|
3678
|
-
}, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
3681
|
+
}, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3679
3682
|
};
|
|
3680
3683
|
|
|
3681
3684
|
const Field = React.forwardRef(function Field(props, ref) {
|
|
@@ -3690,10 +3693,10 @@ const BooleanPicker = ({ schema, column, prefix }) => {
|
|
|
3690
3693
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3691
3694
|
const colLabel = `${prefix}${column}`;
|
|
3692
3695
|
const value = watch(colLabel);
|
|
3693
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
3696
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3694
3697
|
gridRow, children: [jsx(CheckboxCard, { checked: value, variant: "surface", onChange: () => {
|
|
3695
3698
|
setValue(colLabel, !value);
|
|
3696
|
-
} }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
3699
|
+
} }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3697
3700
|
};
|
|
3698
3701
|
|
|
3699
3702
|
const monthNamesShort = [
|
|
@@ -3792,7 +3795,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3792
3795
|
const [open, setOpen] = useState(false);
|
|
3793
3796
|
const selectedDate = watch(colLabel);
|
|
3794
3797
|
const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
|
|
3795
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
3798
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3796
3799
|
gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { size: "sm", variant: "outline", onClick: () => {
|
|
3797
3800
|
setOpen(true);
|
|
3798
3801
|
}, children: selectedDate !== undefined ? `${formatedDate}` : "" }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
|
|
@@ -3804,7 +3807,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3804
3807
|
onDateSelected: ({ date }) => {
|
|
3805
3808
|
setValue(colLabel, dayjs(date).format("YYYY-MM-DD"));
|
|
3806
3809
|
setOpen(false);
|
|
3807
|
-
} })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
3810
|
+
} })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3808
3811
|
};
|
|
3809
3812
|
|
|
3810
3813
|
function filterArray(array, searchTerm) {
|
|
@@ -3837,7 +3840,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3837
3840
|
setSearchText(event.target.value);
|
|
3838
3841
|
setLimit(10);
|
|
3839
3842
|
};
|
|
3840
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
3843
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3841
3844
|
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
|
|
3842
3845
|
const item = enumValue;
|
|
3843
3846
|
if (item === undefined) {
|
|
@@ -3851,7 +3854,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3851
3854
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
3852
3855
|
}), jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
3853
3856
|
setOpenSearchResult(true);
|
|
3854
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
3857
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
|
|
3855
3858
|
setOpenSearchResult(true);
|
|
3856
3859
|
}, children: watchEnum === undefined
|
|
3857
3860
|
? ""
|
|
@@ -3873,7 +3876,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3873
3876
|
}, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
3874
3877
|
? renderDisplay(item)
|
|
3875
3878
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
3876
|
-
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: translate.t(removeIndex(`${colLabel}.
|
|
3879
|
+
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3877
3880
|
};
|
|
3878
3881
|
|
|
3879
3882
|
function isEnteringWindow(_ref) {
|
|
@@ -4235,7 +4238,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4235
4238
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4236
4239
|
const currentFiles = (watch(column) ?? []);
|
|
4237
4240
|
const colLabel = `${prefix}${column}`;
|
|
4238
|
-
return (jsxs(Field, { label: `${translate.t(`${colLabel}.
|
|
4241
|
+
return (jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsx(FileDropzone, { onDrop: ({ files }) => {
|
|
4239
4242
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4240
4243
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4241
4244
|
}, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsx(Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4244,7 +4247,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4244
4247
|
return name !== file.name;
|
|
4245
4248
|
}));
|
|
4246
4249
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
|
|
4247
|
-
}) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4250
|
+
}) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4248
4251
|
};
|
|
4249
4252
|
|
|
4250
4253
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
@@ -4361,7 +4364,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4361
4364
|
}
|
|
4362
4365
|
return record[display_column];
|
|
4363
4366
|
};
|
|
4364
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(removeIndex(`${column}.
|
|
4367
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(removeIndex(`${column}.field_label`)))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4365
4368
|
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
|
|
4366
4369
|
const item = idMap[id];
|
|
4367
4370
|
if (item === undefined) {
|
|
@@ -4374,7 +4377,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4374
4377
|
: item[display_column] }, id));
|
|
4375
4378
|
}), jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
4376
4379
|
setOpenSearchResult(true);
|
|
4377
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
4380
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
|
|
4378
4381
|
setOpenSearchResult(true);
|
|
4379
4382
|
}, 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) => {
|
|
4380
4383
|
onSearchChange(event);
|
|
@@ -4399,7 +4402,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4399
4402
|
}, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
4400
4403
|
? renderDisplay(item)
|
|
4401
4404
|
: item[display_column] }, item[column_ref]));
|
|
4402
|
-
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.
|
|
4405
|
+
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), 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}.field_required`)) }))] }));
|
|
4403
4406
|
};
|
|
4404
4407
|
|
|
4405
4408
|
const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
|
|
@@ -4417,9 +4420,9 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4417
4420
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4418
4421
|
const colLabel = `${prefix}${column}`;
|
|
4419
4422
|
const value = watch(`${colLabel}`);
|
|
4420
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4423
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(NumberInputRoot, { children: jsx(NumberInputField$1, { required: isRequired, value: value, onChange: (event) => {
|
|
4421
4424
|
setValue(`${colLabel}`, Number(event.target.value));
|
|
4422
|
-
} }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4425
|
+
} }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4423
4426
|
};
|
|
4424
4427
|
|
|
4425
4428
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
@@ -4431,13 +4434,13 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4431
4434
|
if (properties === undefined) {
|
|
4432
4435
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4433
4436
|
}
|
|
4434
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
4437
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
|
|
4435
4438
|
return (
|
|
4436
4439
|
// @ts-expect-error find suitable types
|
|
4437
4440
|
jsx(ColumnRenderer, { column: `${key}`,
|
|
4438
4441
|
prefix: `${prefix}${column}.`,
|
|
4439
4442
|
properties }, `form-${colLabel}-${key}`));
|
|
4440
|
-
}) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4443
|
+
}) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4441
4444
|
};
|
|
4442
4445
|
|
|
4443
4446
|
const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
@@ -4449,7 +4452,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4449
4452
|
const [showNewEntries, setShowNewEntries] = useState(false);
|
|
4450
4453
|
const [newKey, setNewKey] = useState();
|
|
4451
4454
|
const [newValue, setNewValue] = useState();
|
|
4452
|
-
return (jsxs(Field, { label: `${translate.t(`${column}.
|
|
4455
|
+
return (jsxs(Field, { label: `${translate.t(`${column}.field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
|
|
4453
4456
|
return (jsxs(Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsx(Input, { value: key, onChange: (e) => {
|
|
4454
4457
|
const filtered = entries.filter(([target]) => {
|
|
4455
4458
|
return target !== key;
|
|
@@ -4489,7 +4492,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4489
4492
|
setShowNewEntries(true);
|
|
4490
4493
|
setNewKey(undefined);
|
|
4491
4494
|
setNewValue(undefined);
|
|
4492
|
-
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.
|
|
4495
|
+
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4493
4496
|
};
|
|
4494
4497
|
|
|
4495
4498
|
const StringInputField = ({ column, schema, prefix, }) => {
|
|
@@ -4498,7 +4501,7 @@ const StringInputField = ({ column, schema, prefix, }) => {
|
|
|
4498
4501
|
const { required, gridColumn, gridRow } = schema;
|
|
4499
4502
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4500
4503
|
const colLabel = `${prefix}${column}`;
|
|
4501
|
-
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4504
|
+
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4502
4505
|
};
|
|
4503
4506
|
|
|
4504
4507
|
const RadioCardItem = React.forwardRef(function RadioCardItem(props, ref) {
|
|
@@ -4662,9 +4665,9 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4662
4665
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4663
4666
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4664
4667
|
const values = watch(colLabel) ?? [];
|
|
4665
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
4668
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), values.map((field, index) => (jsx(Flex, { flexFlow: "column", children: jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsx(SchemaViewer, { column: `${index}`,
|
|
4666
4669
|
prefix: `${colLabel}.`,
|
|
4667
|
-
schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4670
|
+
schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4668
4671
|
};
|
|
4669
4672
|
|
|
4670
4673
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4674,10 +4677,10 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
|
4674
4677
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4675
4678
|
const colLabel = `${prefix}${column}`;
|
|
4676
4679
|
const value = watch(colLabel);
|
|
4677
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4680
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4678
4681
|
gridRow, children: [jsx(Text, { children: value
|
|
4679
4682
|
? translate.t(removeIndex(`${colLabel}.true`))
|
|
4680
|
-
: translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4683
|
+
: translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4681
4684
|
};
|
|
4682
4685
|
|
|
4683
4686
|
const DateViewer = ({ column, schema, prefix }) => {
|
|
@@ -4687,8 +4690,8 @@ const DateViewer = ({ column, schema, prefix }) => {
|
|
|
4687
4690
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4688
4691
|
const colLabel = `${prefix}${column}`;
|
|
4689
4692
|
const selectedDate = watch(colLabel);
|
|
4690
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4691
|
-
gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.
|
|
4693
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4694
|
+
gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4692
4695
|
};
|
|
4693
4696
|
|
|
4694
4697
|
const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
@@ -4700,7 +4703,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4700
4703
|
const colLabel = `${prefix}${column}`;
|
|
4701
4704
|
const watchEnum = watch(colLabel);
|
|
4702
4705
|
const watchEnums = (watch(colLabel) ?? []);
|
|
4703
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4706
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4704
4707
|
gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
|
|
4705
4708
|
const item = enumValue;
|
|
4706
4709
|
if (item === undefined) {
|
|
@@ -4709,7 +4712,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4709
4712
|
return (jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4710
4713
|
? renderDisplay(item)
|
|
4711
4714
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
4712
|
-
}) })), !isMultiple && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4715
|
+
}) })), !isMultiple && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4713
4716
|
};
|
|
4714
4717
|
|
|
4715
4718
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
@@ -4719,7 +4722,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4719
4722
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4720
4723
|
const currentFiles = (watch(column) ?? []);
|
|
4721
4724
|
const colLabel = `${prefix}${column}`;
|
|
4722
|
-
return (jsxs(Field, { label: `${translate.t(`${colLabel}.
|
|
4725
|
+
return (jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsx(FileDropzone, { onDrop: ({ files }) => {
|
|
4723
4726
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4724
4727
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4725
4728
|
}, placeholder: translate.t(`${colLabel}.fileDropzone`) }), jsx(Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4728,7 +4731,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4728
4731
|
return name !== file.name;
|
|
4729
4732
|
}));
|
|
4730
4733
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
|
|
4731
|
-
}) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4734
|
+
}) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4732
4735
|
};
|
|
4733
4736
|
|
|
4734
4737
|
const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
@@ -4750,7 +4753,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4750
4753
|
}
|
|
4751
4754
|
return record[display_column];
|
|
4752
4755
|
};
|
|
4753
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4756
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4754
4757
|
gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchIds.map((id) => {
|
|
4755
4758
|
const item = idMap[id];
|
|
4756
4759
|
if (item === undefined) {
|
|
@@ -4759,7 +4762,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4759
4762
|
return (jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4760
4763
|
? renderDisplay(item)
|
|
4761
4764
|
: item[display_column] }, id));
|
|
4762
|
-
}) })), !isMultiple && jsx(Text, { children: getPickedValue() }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4765
|
+
}) })), !isMultiple && jsx(Text, { children: getPickedValue() }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4763
4766
|
};
|
|
4764
4767
|
|
|
4765
4768
|
const NumberViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4769,7 +4772,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
4769
4772
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4770
4773
|
const colLabel = `${prefix}${column}`;
|
|
4771
4774
|
const value = watch(colLabel);
|
|
4772
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4775
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(Text, { children: value }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4773
4776
|
};
|
|
4774
4777
|
|
|
4775
4778
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
@@ -4781,13 +4784,13 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
4781
4784
|
if (properties === undefined) {
|
|
4782
4785
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4783
4786
|
}
|
|
4784
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.
|
|
4787
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
|
|
4785
4788
|
return (
|
|
4786
4789
|
// @ts-expect-error find suitable types
|
|
4787
4790
|
jsx(ColumnViewer, { column: `${key}`,
|
|
4788
4791
|
prefix: `${prefix}${column}.`,
|
|
4789
4792
|
properties }, `form-objectviewer-${colLabel}-${key}`));
|
|
4790
|
-
}) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.
|
|
4793
|
+
}) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4791
4794
|
};
|
|
4792
4795
|
|
|
4793
4796
|
const RecordInput = ({ column, schema, prefix }) => {
|
|
@@ -4799,7 +4802,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4799
4802
|
const [showNewEntries, setShowNewEntries] = useState(false);
|
|
4800
4803
|
const [newKey, setNewKey] = useState();
|
|
4801
4804
|
const [newValue, setNewValue] = useState();
|
|
4802
|
-
return (jsxs(Field, { label: `${translate.t(`${column}.
|
|
4805
|
+
return (jsxs(Field, { label: `${translate.t(`${column}.field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
|
|
4803
4806
|
return (jsxs(Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsx(Input, { value: key, onChange: (e) => {
|
|
4804
4807
|
const filtered = entries.filter(([target]) => {
|
|
4805
4808
|
return target !== key;
|
|
@@ -4839,7 +4842,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4839
4842
|
setShowNewEntries(true);
|
|
4840
4843
|
setNewKey(undefined);
|
|
4841
4844
|
setNewValue(undefined);
|
|
4842
|
-
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.
|
|
4845
|
+
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4843
4846
|
};
|
|
4844
4847
|
|
|
4845
4848
|
const TagViewer = ({ column, schema, prefix }) => {
|
|
@@ -4934,7 +4937,7 @@ const StringViewer = ({ column, schema, prefix, }) => {
|
|
|
4934
4937
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4935
4938
|
const colLabel = `${prefix}${column}`;
|
|
4936
4939
|
const value = watch(colLabel);
|
|
4937
|
-
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4940
|
+
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { children: value }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4938
4941
|
};
|
|
4939
4942
|
|
|
4940
4943
|
const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
@@ -5073,7 +5076,7 @@ const FormBody = () => {
|
|
|
5073
5076
|
include,
|
|
5074
5077
|
});
|
|
5075
5078
|
if (isSuccess) {
|
|
5076
|
-
return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("
|
|
5079
|
+
return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("submit_success") })] }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { onClick: async () => {
|
|
5077
5080
|
setIsError(false);
|
|
5078
5081
|
setIsSubmiting(false);
|
|
5079
5082
|
setIsSuccess(false);
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
1
2
|
export interface TableDataDisplayProps {
|
|
2
3
|
colorPalette?: string;
|
|
4
|
+
emptyComponent?: ReactNode;
|
|
3
5
|
}
|
|
4
|
-
export declare const TableDataDisplay: ({ colorPalette }: TableDataDisplayProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDisplayProps) => import("react/jsx-runtime").JSX.Element;
|