@bsol-oss/react-datatable5 12.0.0-beta.11 → 12.0.0-beta.13
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 +43 -43
- package/dist/index.mjs +43 -43
- package/package.json +1 -1
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",
|
|
@@ -3678,7 +3678,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3678
3678
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3679
3679
|
const { formState: { errors }, setValue, watch, } = reactHookForm.useFormContext();
|
|
3680
3680
|
const fields = (watch(colLabel) ?? []);
|
|
3681
|
-
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}`,
|
|
3682
3682
|
prefix: `${colLabel}.`,
|
|
3683
3683
|
schema: items }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
|
|
3684
3684
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
@@ -3698,7 +3698,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3698
3698
|
return;
|
|
3699
3699
|
}
|
|
3700
3700
|
setValue(colLabel, [...fields, {}]);
|
|
3701
|
-
}, 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`)) }))] }));
|
|
3702
3702
|
};
|
|
3703
3703
|
|
|
3704
3704
|
const Field = React__namespace.forwardRef(function Field(props, ref) {
|
|
@@ -3713,10 +3713,10 @@ const BooleanPicker = ({ schema, column, prefix }) => {
|
|
|
3713
3713
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3714
3714
|
const colLabel = `${prefix}${column}`;
|
|
3715
3715
|
const value = watch(colLabel);
|
|
3716
|
-
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,
|
|
3717
3717
|
gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onChange: () => {
|
|
3718
3718
|
setValue(colLabel, !value);
|
|
3719
|
-
} }), 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`)) }))] }));
|
|
3720
3720
|
};
|
|
3721
3721
|
|
|
3722
3722
|
const monthNamesShort = [
|
|
@@ -3815,7 +3815,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3815
3815
|
const [open, setOpen] = React.useState(false);
|
|
3816
3816
|
const selectedDate = watch(colLabel);
|
|
3817
3817
|
const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
|
|
3818
|
-
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,
|
|
3819
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: () => {
|
|
3820
3820
|
setOpen(true);
|
|
3821
3821
|
}, children: selectedDate !== undefined ? `${formatedDate}` : "" }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
|
|
@@ -3827,7 +3827,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3827
3827
|
onDateSelected: ({ date }) => {
|
|
3828
3828
|
setValue(colLabel, dayjs(date).format("YYYY-MM-DD"));
|
|
3829
3829
|
setOpen(false);
|
|
3830
|
-
} })] }) })] }), 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`)) }))] }));
|
|
3831
3831
|
};
|
|
3832
3832
|
|
|
3833
3833
|
function filterArray(array, searchTerm) {
|
|
@@ -3860,7 +3860,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3860
3860
|
setSearchText(event.target.value);
|
|
3861
3861
|
setLimit(10);
|
|
3862
3862
|
};
|
|
3863
|
-
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,
|
|
3864
3864
|
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
|
|
3865
3865
|
const item = enumValue;
|
|
3866
3866
|
if (item === undefined) {
|
|
@@ -3874,7 +3874,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3874
3874
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
3875
3875
|
}), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
3876
3876
|
setOpenSearchResult(true);
|
|
3877
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
3877
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
|
|
3878
3878
|
setOpenSearchResult(true);
|
|
3879
3879
|
}, children: watchEnum === undefined
|
|
3880
3880
|
? ""
|
|
@@ -3896,7 +3896,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3896
3896
|
}, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
3897
3897
|
? renderDisplay(item)
|
|
3898
3898
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
3899
|
-
}) }), 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`)) }))] }));
|
|
3900
3900
|
};
|
|
3901
3901
|
|
|
3902
3902
|
function isEnteringWindow(_ref) {
|
|
@@ -4258,7 +4258,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4258
4258
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4259
4259
|
const currentFiles = (watch(column) ?? []);
|
|
4260
4260
|
const colLabel = `${prefix}${column}`;
|
|
4261
|
-
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 }) => {
|
|
4262
4262
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4263
4263
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4264
4264
|
}, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4267,7 +4267,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4267
4267
|
return name !== file.name;
|
|
4268
4268
|
}));
|
|
4269
4269
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
|
|
4270
|
-
}) }), 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`)) }))] }));
|
|
4271
4271
|
};
|
|
4272
4272
|
|
|
4273
4273
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
@@ -4384,7 +4384,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4384
4384
|
}
|
|
4385
4385
|
return record[display_column];
|
|
4386
4386
|
};
|
|
4387
|
-
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,
|
|
4388
4388
|
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
|
|
4389
4389
|
const item = idMap[id];
|
|
4390
4390
|
if (item === undefined) {
|
|
@@ -4397,7 +4397,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4397
4397
|
: item[display_column] }, id));
|
|
4398
4398
|
}), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
4399
4399
|
setOpenSearchResult(true);
|
|
4400
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
4400
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
|
|
4401
4401
|
setOpenSearchResult(true);
|
|
4402
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) => {
|
|
4403
4403
|
onSearchChange(event);
|
|
@@ -4422,7 +4422,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4422
4422
|
}, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
4423
4423
|
? renderDisplay(item)
|
|
4424
4424
|
: item[display_column] }, item[column_ref]));
|
|
4425
|
-
}) }), 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`)) }))] }));
|
|
4426
4426
|
};
|
|
4427
4427
|
|
|
4428
4428
|
const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
|
|
@@ -4440,9 +4440,9 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4440
4440
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4441
4441
|
const colLabel = `${prefix}${column}`;
|
|
4442
4442
|
const value = watch(`${colLabel}`);
|
|
4443
|
-
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) => {
|
|
4444
4444
|
setValue(`${colLabel}`, Number(event.target.value));
|
|
4445
|
-
} }) }), 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`)) }))] }));
|
|
4446
4446
|
};
|
|
4447
4447
|
|
|
4448
4448
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
@@ -4454,13 +4454,13 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4454
4454
|
if (properties === undefined) {
|
|
4455
4455
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4456
4456
|
}
|
|
4457
|
-
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) => {
|
|
4458
4458
|
return (
|
|
4459
4459
|
// @ts-expect-error find suitable types
|
|
4460
4460
|
jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
|
|
4461
4461
|
prefix: `${prefix}${column}.`,
|
|
4462
4462
|
properties }, `form-${colLabel}-${key}`));
|
|
4463
|
-
}) }), 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`)) }))] }));
|
|
4464
4464
|
};
|
|
4465
4465
|
|
|
4466
4466
|
const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
@@ -4472,7 +4472,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4472
4472
|
const [showNewEntries, setShowNewEntries] = React.useState(false);
|
|
4473
4473
|
const [newKey, setNewKey] = React.useState();
|
|
4474
4474
|
const [newValue, setNewValue] = React.useState();
|
|
4475
|
-
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]) => {
|
|
4476
4476
|
return (jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
|
|
4477
4477
|
const filtered = entries.filter(([target]) => {
|
|
4478
4478
|
return target !== key;
|
|
@@ -4512,7 +4512,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4512
4512
|
setShowNewEntries(true);
|
|
4513
4513
|
setNewKey(undefined);
|
|
4514
4514
|
setNewValue(undefined);
|
|
4515
|
-
}, 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`) }))] }));
|
|
4516
4516
|
};
|
|
4517
4517
|
|
|
4518
4518
|
const StringInputField = ({ column, schema, prefix, }) => {
|
|
@@ -4521,7 +4521,7 @@ const StringInputField = ({ column, schema, prefix, }) => {
|
|
|
4521
4521
|
const { required, gridColumn, gridRow } = schema;
|
|
4522
4522
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4523
4523
|
const colLabel = `${prefix}${column}`;
|
|
4524
|
-
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`)) }))] }) }));
|
|
4525
4525
|
};
|
|
4526
4526
|
|
|
4527
4527
|
const RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
|
|
@@ -4685,9 +4685,9 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4685
4685
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4686
4686
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4687
4687
|
const values = watch(colLabel) ?? [];
|
|
4688
|
-
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}`,
|
|
4689
4689
|
prefix: `${colLabel}.`,
|
|
4690
|
-
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`)) }))] }));
|
|
4691
4691
|
};
|
|
4692
4692
|
|
|
4693
4693
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4697,10 +4697,10 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
|
4697
4697
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4698
4698
|
const colLabel = `${prefix}${column}`;
|
|
4699
4699
|
const value = watch(colLabel);
|
|
4700
|
-
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,
|
|
4701
4701
|
gridRow, children: [jsxRuntime.jsx(react.Text, { children: value
|
|
4702
4702
|
? translate.t(removeIndex(`${colLabel}.true`))
|
|
4703
|
-
: 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`)) }))] }));
|
|
4704
4704
|
};
|
|
4705
4705
|
|
|
4706
4706
|
const DateViewer = ({ column, schema, prefix }) => {
|
|
@@ -4710,8 +4710,8 @@ const DateViewer = ({ column, schema, prefix }) => {
|
|
|
4710
4710
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4711
4711
|
const colLabel = `${prefix}${column}`;
|
|
4712
4712
|
const selectedDate = watch(colLabel);
|
|
4713
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4714
|
-
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`) }))] }));
|
|
4715
4715
|
};
|
|
4716
4716
|
|
|
4717
4717
|
const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
@@ -4723,7 +4723,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4723
4723
|
const colLabel = `${prefix}${column}`;
|
|
4724
4724
|
const watchEnum = watch(colLabel);
|
|
4725
4725
|
const watchEnums = (watch(colLabel) ?? []);
|
|
4726
|
-
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,
|
|
4727
4727
|
gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
|
|
4728
4728
|
const item = enumValue;
|
|
4729
4729
|
if (item === undefined) {
|
|
@@ -4732,7 +4732,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4732
4732
|
return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4733
4733
|
? renderDisplay(item)
|
|
4734
4734
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
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}.
|
|
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`)) }))] }));
|
|
4736
4736
|
};
|
|
4737
4737
|
|
|
4738
4738
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
@@ -4742,7 +4742,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4742
4742
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4743
4743
|
const currentFiles = (watch(column) ?? []);
|
|
4744
4744
|
const colLabel = `${prefix}${column}`;
|
|
4745
|
-
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 }) => {
|
|
4746
4746
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4747
4747
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4748
4748
|
}, placeholder: translate.t(`${colLabel}.fileDropzone`) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4751,7 +4751,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4751
4751
|
return name !== file.name;
|
|
4752
4752
|
}));
|
|
4753
4753
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
|
|
4754
|
-
}) }), 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`)) }))] }));
|
|
4755
4755
|
};
|
|
4756
4756
|
|
|
4757
4757
|
const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
@@ -4773,7 +4773,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4773
4773
|
}
|
|
4774
4774
|
return record[display_column];
|
|
4775
4775
|
};
|
|
4776
|
-
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,
|
|
4777
4777
|
gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchIds.map((id) => {
|
|
4778
4778
|
const item = idMap[id];
|
|
4779
4779
|
if (item === undefined) {
|
|
@@ -4782,7 +4782,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4782
4782
|
return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4783
4783
|
? renderDisplay(item)
|
|
4784
4784
|
: item[display_column] }, id));
|
|
4785
|
-
}) })), !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`)) }))] }));
|
|
4786
4786
|
};
|
|
4787
4787
|
|
|
4788
4788
|
const NumberViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4792,7 +4792,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
4792
4792
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4793
4793
|
const colLabel = `${prefix}${column}`;
|
|
4794
4794
|
const value = watch(colLabel);
|
|
4795
|
-
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`)) }))] }));
|
|
4796
4796
|
};
|
|
4797
4797
|
|
|
4798
4798
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
@@ -4804,13 +4804,13 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
4804
4804
|
if (properties === undefined) {
|
|
4805
4805
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4806
4806
|
}
|
|
4807
|
-
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) => {
|
|
4808
4808
|
return (
|
|
4809
4809
|
// @ts-expect-error find suitable types
|
|
4810
4810
|
jsxRuntime.jsx(ColumnViewer, { column: `${key}`,
|
|
4811
4811
|
prefix: `${prefix}${column}.`,
|
|
4812
4812
|
properties }, `form-objectviewer-${colLabel}-${key}`));
|
|
4813
|
-
}) }), 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`)) }))] }));
|
|
4814
4814
|
};
|
|
4815
4815
|
|
|
4816
4816
|
const RecordInput = ({ column, schema, prefix }) => {
|
|
@@ -4822,7 +4822,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4822
4822
|
const [showNewEntries, setShowNewEntries] = React.useState(false);
|
|
4823
4823
|
const [newKey, setNewKey] = React.useState();
|
|
4824
4824
|
const [newValue, setNewValue] = React.useState();
|
|
4825
|
-
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]) => {
|
|
4826
4826
|
return (jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
|
|
4827
4827
|
const filtered = entries.filter(([target]) => {
|
|
4828
4828
|
return target !== key;
|
|
@@ -4862,7 +4862,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4862
4862
|
setShowNewEntries(true);
|
|
4863
4863
|
setNewKey(undefined);
|
|
4864
4864
|
setNewValue(undefined);
|
|
4865
|
-
}, 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`) }))] }));
|
|
4866
4866
|
};
|
|
4867
4867
|
|
|
4868
4868
|
const TagViewer = ({ column, schema, prefix }) => {
|
|
@@ -4957,7 +4957,7 @@ const StringViewer = ({ column, schema, prefix, }) => {
|
|
|
4957
4957
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4958
4958
|
const colLabel = `${prefix}${column}`;
|
|
4959
4959
|
const value = watch(colLabel);
|
|
4960
|
-
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`)) }))] }) }));
|
|
4961
4961
|
};
|
|
4962
4962
|
|
|
4963
4963
|
const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
@@ -5096,7 +5096,7 @@ const FormBody = () => {
|
|
|
5096
5096
|
include,
|
|
5097
5097
|
});
|
|
5098
5098
|
if (isSuccess) {
|
|
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("
|
|
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 () => {
|
|
5100
5100
|
setIsError(false);
|
|
5101
5101
|
setIsSubmiting(false);
|
|
5102
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",
|
|
@@ -3658,7 +3658,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3658
3658
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3659
3659
|
const { formState: { errors }, setValue, watch, } = useFormContext();
|
|
3660
3660
|
const fields = (watch(colLabel) ?? []);
|
|
3661
|
-
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}`,
|
|
3662
3662
|
prefix: `${colLabel}.`,
|
|
3663
3663
|
schema: items }) }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { variant: "ghost", onClick: () => {
|
|
3664
3664
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
@@ -3678,7 +3678,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3678
3678
|
return;
|
|
3679
3679
|
}
|
|
3680
3680
|
setValue(colLabel, [...fields, {}]);
|
|
3681
|
-
}, 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`)) }))] }));
|
|
3682
3682
|
};
|
|
3683
3683
|
|
|
3684
3684
|
const Field = React.forwardRef(function Field(props, ref) {
|
|
@@ -3693,10 +3693,10 @@ const BooleanPicker = ({ schema, column, prefix }) => {
|
|
|
3693
3693
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3694
3694
|
const colLabel = `${prefix}${column}`;
|
|
3695
3695
|
const value = watch(colLabel);
|
|
3696
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
3696
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3697
3697
|
gridRow, children: [jsx(CheckboxCard, { checked: value, variant: "surface", onChange: () => {
|
|
3698
3698
|
setValue(colLabel, !value);
|
|
3699
|
-
} }), 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`)) }))] }));
|
|
3700
3700
|
};
|
|
3701
3701
|
|
|
3702
3702
|
const monthNamesShort = [
|
|
@@ -3795,7 +3795,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3795
3795
|
const [open, setOpen] = useState(false);
|
|
3796
3796
|
const selectedDate = watch(colLabel);
|
|
3797
3797
|
const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
|
|
3798
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
3798
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3799
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: () => {
|
|
3800
3800
|
setOpen(true);
|
|
3801
3801
|
}, children: selectedDate !== undefined ? `${formatedDate}` : "" }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
|
|
@@ -3807,7 +3807,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3807
3807
|
onDateSelected: ({ date }) => {
|
|
3808
3808
|
setValue(colLabel, dayjs(date).format("YYYY-MM-DD"));
|
|
3809
3809
|
setOpen(false);
|
|
3810
|
-
} })] }) })] }), 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`)) }))] }));
|
|
3811
3811
|
};
|
|
3812
3812
|
|
|
3813
3813
|
function filterArray(array, searchTerm) {
|
|
@@ -3840,7 +3840,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3840
3840
|
setSearchText(event.target.value);
|
|
3841
3841
|
setLimit(10);
|
|
3842
3842
|
};
|
|
3843
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
3843
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3844
3844
|
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
|
|
3845
3845
|
const item = enumValue;
|
|
3846
3846
|
if (item === undefined) {
|
|
@@ -3854,7 +3854,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3854
3854
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
3855
3855
|
}), jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
3856
3856
|
setOpenSearchResult(true);
|
|
3857
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
3857
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
|
|
3858
3858
|
setOpenSearchResult(true);
|
|
3859
3859
|
}, children: watchEnum === undefined
|
|
3860
3860
|
? ""
|
|
@@ -3876,7 +3876,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3876
3876
|
}, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
3877
3877
|
? renderDisplay(item)
|
|
3878
3878
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
3879
|
-
}) }), 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`)) }))] }));
|
|
3880
3880
|
};
|
|
3881
3881
|
|
|
3882
3882
|
function isEnteringWindow(_ref) {
|
|
@@ -4238,7 +4238,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4238
4238
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4239
4239
|
const currentFiles = (watch(column) ?? []);
|
|
4240
4240
|
const colLabel = `${prefix}${column}`;
|
|
4241
|
-
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 }) => {
|
|
4242
4242
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4243
4243
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4244
4244
|
}, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsx(Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4247,7 +4247,7 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4247
4247
|
return name !== file.name;
|
|
4248
4248
|
}));
|
|
4249
4249
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
|
|
4250
|
-
}) }), 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`)) }))] }));
|
|
4251
4251
|
};
|
|
4252
4252
|
|
|
4253
4253
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
@@ -4364,7 +4364,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4364
4364
|
}
|
|
4365
4365
|
return record[display_column];
|
|
4366
4366
|
};
|
|
4367
|
-
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,
|
|
4368
4368
|
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
|
|
4369
4369
|
const item = idMap[id];
|
|
4370
4370
|
if (item === undefined) {
|
|
@@ -4377,7 +4377,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4377
4377
|
: item[display_column] }, id));
|
|
4378
4378
|
}), jsx(Tag, { cursor: "pointer", onClick: () => {
|
|
4379
4379
|
setOpenSearchResult(true);
|
|
4380
|
-
}, children: translate.t(removeIndex(`${colLabel}.
|
|
4380
|
+
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
|
|
4381
4381
|
setOpenSearchResult(true);
|
|
4382
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) => {
|
|
4383
4383
|
onSearchChange(event);
|
|
@@ -4402,7 +4402,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4402
4402
|
}, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
|
|
4403
4403
|
? renderDisplay(item)
|
|
4404
4404
|
: item[display_column] }, item[column_ref]));
|
|
4405
|
-
}) }), 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`)) }))] }));
|
|
4406
4406
|
};
|
|
4407
4407
|
|
|
4408
4408
|
const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
|
|
@@ -4420,9 +4420,9 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4420
4420
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4421
4421
|
const colLabel = `${prefix}${column}`;
|
|
4422
4422
|
const value = watch(`${colLabel}`);
|
|
4423
|
-
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) => {
|
|
4424
4424
|
setValue(`${colLabel}`, Number(event.target.value));
|
|
4425
|
-
} }) }), 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`)) }))] }));
|
|
4426
4426
|
};
|
|
4427
4427
|
|
|
4428
4428
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
@@ -4434,13 +4434,13 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4434
4434
|
if (properties === undefined) {
|
|
4435
4435
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4436
4436
|
}
|
|
4437
|
-
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) => {
|
|
4438
4438
|
return (
|
|
4439
4439
|
// @ts-expect-error find suitable types
|
|
4440
4440
|
jsx(ColumnRenderer, { column: `${key}`,
|
|
4441
4441
|
prefix: `${prefix}${column}.`,
|
|
4442
4442
|
properties }, `form-${colLabel}-${key}`));
|
|
4443
|
-
}) }), 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`)) }))] }));
|
|
4444
4444
|
};
|
|
4445
4445
|
|
|
4446
4446
|
const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
@@ -4452,7 +4452,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4452
4452
|
const [showNewEntries, setShowNewEntries] = useState(false);
|
|
4453
4453
|
const [newKey, setNewKey] = useState();
|
|
4454
4454
|
const [newValue, setNewValue] = useState();
|
|
4455
|
-
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]) => {
|
|
4456
4456
|
return (jsxs(Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsx(Input, { value: key, onChange: (e) => {
|
|
4457
4457
|
const filtered = entries.filter(([target]) => {
|
|
4458
4458
|
return target !== key;
|
|
@@ -4492,7 +4492,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4492
4492
|
setShowNewEntries(true);
|
|
4493
4493
|
setNewKey(undefined);
|
|
4494
4494
|
setNewValue(undefined);
|
|
4495
|
-
}, 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`) }))] }));
|
|
4496
4496
|
};
|
|
4497
4497
|
|
|
4498
4498
|
const StringInputField = ({ column, schema, prefix, }) => {
|
|
@@ -4501,7 +4501,7 @@ const StringInputField = ({ column, schema, prefix, }) => {
|
|
|
4501
4501
|
const { required, gridColumn, gridRow } = schema;
|
|
4502
4502
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4503
4503
|
const colLabel = `${prefix}${column}`;
|
|
4504
|
-
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`)) }))] }) }));
|
|
4505
4505
|
};
|
|
4506
4506
|
|
|
4507
4507
|
const RadioCardItem = React.forwardRef(function RadioCardItem(props, ref) {
|
|
@@ -4665,9 +4665,9 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4665
4665
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4666
4666
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4667
4667
|
const values = watch(colLabel) ?? [];
|
|
4668
|
-
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}`,
|
|
4669
4669
|
prefix: `${colLabel}.`,
|
|
4670
|
-
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`)) }))] }));
|
|
4671
4671
|
};
|
|
4672
4672
|
|
|
4673
4673
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4677,10 +4677,10 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
|
4677
4677
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4678
4678
|
const colLabel = `${prefix}${column}`;
|
|
4679
4679
|
const value = watch(colLabel);
|
|
4680
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.
|
|
4680
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4681
4681
|
gridRow, children: [jsx(Text, { children: value
|
|
4682
4682
|
? translate.t(removeIndex(`${colLabel}.true`))
|
|
4683
|
-
: 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`)) }))] }));
|
|
4684
4684
|
};
|
|
4685
4685
|
|
|
4686
4686
|
const DateViewer = ({ column, schema, prefix }) => {
|
|
@@ -4690,8 +4690,8 @@ const DateViewer = ({ column, schema, prefix }) => {
|
|
|
4690
4690
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4691
4691
|
const colLabel = `${prefix}${column}`;
|
|
4692
4692
|
const selectedDate = watch(colLabel);
|
|
4693
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4694
|
-
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`) }))] }));
|
|
4695
4695
|
};
|
|
4696
4696
|
|
|
4697
4697
|
const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
@@ -4703,7 +4703,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4703
4703
|
const colLabel = `${prefix}${column}`;
|
|
4704
4704
|
const watchEnum = watch(colLabel);
|
|
4705
4705
|
const watchEnums = (watch(colLabel) ?? []);
|
|
4706
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4706
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4707
4707
|
gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
|
|
4708
4708
|
const item = enumValue;
|
|
4709
4709
|
if (item === undefined) {
|
|
@@ -4712,7 +4712,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4712
4712
|
return (jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4713
4713
|
? renderDisplay(item)
|
|
4714
4714
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }));
|
|
4715
|
-
}) })), !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`)) }))] }));
|
|
4716
4716
|
};
|
|
4717
4717
|
|
|
4718
4718
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
@@ -4722,7 +4722,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4722
4722
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4723
4723
|
const currentFiles = (watch(column) ?? []);
|
|
4724
4724
|
const colLabel = `${prefix}${column}`;
|
|
4725
|
-
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 }) => {
|
|
4726
4726
|
const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
|
|
4727
4727
|
setValue(colLabel, [...currentFiles, ...newFiles]);
|
|
4728
4728
|
}, placeholder: translate.t(`${colLabel}.fileDropzone`) }), jsx(Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
@@ -4731,7 +4731,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4731
4731
|
return name !== file.name;
|
|
4732
4732
|
}));
|
|
4733
4733
|
}, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
|
|
4734
|
-
}) }), 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`)) }))] }));
|
|
4735
4735
|
};
|
|
4736
4736
|
|
|
4737
4737
|
const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
@@ -4753,7 +4753,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4753
4753
|
}
|
|
4754
4754
|
return record[display_column];
|
|
4755
4755
|
};
|
|
4756
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.
|
|
4756
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
4757
4757
|
gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchIds.map((id) => {
|
|
4758
4758
|
const item = idMap[id];
|
|
4759
4759
|
if (item === undefined) {
|
|
@@ -4762,7 +4762,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4762
4762
|
return (jsx(Tag, { closable: true, children: !!renderDisplay === true
|
|
4763
4763
|
? renderDisplay(item)
|
|
4764
4764
|
: item[display_column] }, id));
|
|
4765
|
-
}) })), !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`)) }))] }));
|
|
4766
4766
|
};
|
|
4767
4767
|
|
|
4768
4768
|
const NumberViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4772,7 +4772,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
4772
4772
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4773
4773
|
const colLabel = `${prefix}${column}`;
|
|
4774
4774
|
const value = watch(colLabel);
|
|
4775
|
-
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`)) }))] }));
|
|
4776
4776
|
};
|
|
4777
4777
|
|
|
4778
4778
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
@@ -4784,13 +4784,13 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
4784
4784
|
if (properties === undefined) {
|
|
4785
4785
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4786
4786
|
}
|
|
4787
|
-
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) => {
|
|
4788
4788
|
return (
|
|
4789
4789
|
// @ts-expect-error find suitable types
|
|
4790
4790
|
jsx(ColumnViewer, { column: `${key}`,
|
|
4791
4791
|
prefix: `${prefix}${column}.`,
|
|
4792
4792
|
properties }, `form-objectviewer-${colLabel}-${key}`));
|
|
4793
|
-
}) }), 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`)) }))] }));
|
|
4794
4794
|
};
|
|
4795
4795
|
|
|
4796
4796
|
const RecordInput = ({ column, schema, prefix }) => {
|
|
@@ -4802,7 +4802,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4802
4802
|
const [showNewEntries, setShowNewEntries] = useState(false);
|
|
4803
4803
|
const [newKey, setNewKey] = useState();
|
|
4804
4804
|
const [newValue, setNewValue] = useState();
|
|
4805
|
-
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]) => {
|
|
4806
4806
|
return (jsxs(Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsx(Input, { value: key, onChange: (e) => {
|
|
4807
4807
|
const filtered = entries.filter(([target]) => {
|
|
4808
4808
|
return target !== key;
|
|
@@ -4842,7 +4842,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4842
4842
|
setShowNewEntries(true);
|
|
4843
4843
|
setNewKey(undefined);
|
|
4844
4844
|
setNewValue(undefined);
|
|
4845
|
-
}, 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`) }))] }));
|
|
4846
4846
|
};
|
|
4847
4847
|
|
|
4848
4848
|
const TagViewer = ({ column, schema, prefix }) => {
|
|
@@ -4937,7 +4937,7 @@ const StringViewer = ({ column, schema, prefix, }) => {
|
|
|
4937
4937
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4938
4938
|
const colLabel = `${prefix}${column}`;
|
|
4939
4939
|
const value = watch(colLabel);
|
|
4940
|
-
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`)) }))] }) }));
|
|
4941
4941
|
};
|
|
4942
4942
|
|
|
4943
4943
|
const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
@@ -5076,7 +5076,7 @@ const FormBody = () => {
|
|
|
5076
5076
|
include,
|
|
5077
5077
|
});
|
|
5078
5078
|
if (isSuccess) {
|
|
5079
|
-
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 () => {
|
|
5080
5080
|
setIsError(false);
|
|
5081
5081
|
setIsSubmiting(false);
|
|
5082
5082
|
setIsSuccess(false);
|