@uxf/data-grid 11.25.1 → 11.26.0

package/README.md

@@ -90,3 +90,34 @@ function BasicExample() {
     );
 }
 ```
+
+### FrontendConfig
+
+```tsx
+import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
+import { mergeSchemaWithConfig } from "@uxf/data-grid";
+
+const schema = mergeSchemaWithConfig(
+    dataGridSchema_ExampleGrid,
+    {
+        columns: {
+            id: { width: 100, isHidden: true },
+        },
+        filters: {
+            id: { placeholder: "Hledejte podle ID..." }
+        },
+        perPage: 100,
+    }
+);
+
+function Example_1(props) {
+    const { state, actions } = useDataGridControl({
+        schema,
+        initialUserConfig: props.userConfig,
+    })
+
+    return <Table schema={schema}/>
+}
+```
+
+

package/data-grid.stories.js

@@ -34,6 +34,7 @@ const data_grid_1 = require("./data-grid");
 const table_1 = require("./table");
 const use_data_grid_control_1 = require("./use-data-grid-control");
 const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
+const merge_schema_with_config_1 = require("./utils/merge-schema-with-config");
 const actionCell = {
     width: 100,
     Component: () => {
@@ -57,6 +58,15 @@ const actionCell = {
         return react_1.default.createElement(table_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
     },
 };
+const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema_1.schema, {
+    perPage: 100,
+    columns: {
+        bool: { width: 80 },
+    },
+    filters: {
+        text: { placeholder: "Custom placeholder ..." },
+    },
+});
 function Default() {
     const [noBorder, setNoBorder] = (0, react_1.useState)(false);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
@@ -77,7 +87,7 @@ function Default() {
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(toggle_1.Toggle, { label: "No border", value: noBorder, onChange: (value) => setNoBorder(!!value), name: "noBorder" }),
-        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, isRowSelectable: true, actionCell: actionCell }),
+        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schemaWithFrontendConfig, onCsvDownload: console.log, isRowSelectable: true, actionCell: actionCell }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/filter-handler/boolean-select.js

@@ -8,10 +8,11 @@ const select_1 = require("@uxf/ui/select");
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
+        var _a;
         return (react_1.default.createElement(select_1.Select, { options: [
                 { id: 1, label: "Ano" },
                 { id: 0, label: "Ne" },
-            ], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name }));
+            ], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder }));
     },
     ListItem(props) {
         return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },

package/filter-handler/date.js

@@ -11,7 +11,7 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const onChangeFrom = (value) => {
             var _a;
             return (0, is_nil_1.isNil)(value) && (0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.to)
@@ -25,8 +25,8 @@ const filterHandler = {
                 : props.onChange({ ...props.value, to: value !== null && value !== void 0 ? value : undefined });
         };
         return (react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--date" },
-            react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: onChangeFrom, label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, isClearable: true }),
-            react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_e = (_d = props.value) === null || _d === void 0 ? void 0 : _d.to) !== null && _e !== void 0 ? _e : null, onChange: onChangeTo, label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_f = props.value) === null || _f === void 0 ? void 0 : _f.from, isClearable: true })));
+            react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: onChangeFrom, label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, placeholder: (_d = props.filter.config) === null || _d === void 0 ? void 0 : _d.placeholder, isClearable: true }),
+            react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_f = (_e = props.value) === null || _e === void 0 ? void 0 : _e.to) !== null && _f !== void 0 ? _f : null, onChange: onChangeTo, label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_g = props.value) === null || _g === void 0 ? void 0 : _g.from, placeholder: (_h = props.filter.config) === null || _h === void 0 ? void 0 : _h.placeholder, isClearable: true })));
     },
     ListItem: function (props) {
         var _a, _b;

package/filter-handler/datetime.js

@@ -11,10 +11,10 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return (react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--datetime" },
-            react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: (value) => props.onChange({ ...props.value, from: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, isClearable: true }),
-            react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_e = (_d = props.value) === null || _d === void 0 ? void 0 : _d.to) !== null && _e !== void 0 ? _e : null, onChange: (value) => props.onChange({ ...props.value, to: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_f = props.value) === null || _f === void 0 ? void 0 : _f.from, isClearable: true })));
+            react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: (value) => props.onChange({ ...props.value, from: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, placeholder: (_d = props.filter.config) === null || _d === void 0 ? void 0 : _d.placeholder, isClearable: true }),
+            react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_f = (_e = props.value) === null || _e === void 0 ? void 0 : _e.to) !== null && _f !== void 0 ? _f : null, onChange: (value) => props.onChange({ ...props.value, to: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_g = props.value) === null || _g === void 0 ? void 0 : _g.from, placeholder: (_h = props.filter.config) === null || _h === void 0 ? void 0 : _h.placeholder, isClearable: true })));
     },
     ListItem: function (props) {
         var _a, _b;

package/filter-handler/entity-multi-select.js

@@ -11,7 +11,8 @@ const react_1 = __importDefault(require("react"));
 const _api_1 = require("../_api");
 const filterHandler = {
     Input(props) {
-        return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), name: props.filter.name }));
+        var _a;
+        return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), name: props.filter.name, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder }));
     },
     ListItem(props) {
         if ((0, is_nil_1.isNil)(props.value) || (0, is_empty_1.isEmpty)(props.value)) {

package/filter-handler/entity-select.js

@@ -9,7 +9,8 @@ const react_1 = __importDefault(require("react"));
 const _api_1 = require("../_api");
 const filterHandler = {
     Input(props) {
-        return (react_1.default.createElement(combobox_1.Combobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name }));
+        var _a;
+        return (react_1.default.createElement(combobox_1.Combobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), name: props.filter.name, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder, isClearable: true }));
     },
     ListItem(props) {
         var _a;

package/filter-handler/interval.js

@@ -9,10 +9,11 @@ const date_range_picker_input_1 = require("@uxf/ui/date-range-picker-input");
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
+        var _a;
         const onChange = (value) => props.onChange(value !== null && value !== void 0 ? value : "");
         return (react_1.default.createElement("div", { key: props.filter.name },
             react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--interval" },
-                react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: props.filter.label, name: props.filter.name, onChange: onChange, value: props.value }))));
+                react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: props.filter.label, name: props.filter.name, onChange: onChange, value: props.value, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder }))));
     },
     ListItem(props) {
         if ((0, is_nil_1.isNil)(props.value)) {

package/filter-handler/multi-select.js

@@ -9,11 +9,11 @@ const multi_select_1 = require("@uxf/ui/multi-select");
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
-        var _a;
+        var _a, _b;
         const onChange = (value) => {
             props.onChange(Array.isArray(value) && !(0, is_empty_1.isEmpty)(value) ? value : null);
         };
-        return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: onChange, name: props.filter.name }));
+        return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: onChange, name: props.filter.name, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder }));
     },
     ListItem(props) {
         var _a;

package/filter-handler/select.js

@@ -8,8 +8,8 @@ const select_1 = require("@uxf/ui/select");
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
-        var _a;
-        return (react_1.default.createElement(select_1.Select, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name }));
+        var _a, _b;
+        return (react_1.default.createElement(select_1.Select, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder }));
     },
     ListItem(props) {
         var _a, _b, _c;

package/filter-handler/string.js

@@ -10,8 +10,8 @@ const text_input_1 = require("@uxf/ui/text-input");
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
-        var _a;
-        return (react_1.default.createElement(text_input_1.TextInput, { label: props.filter.label, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onChange: (value) => props.onChange(value), name: props.filter.name }));
+        var _a, _b;
+        return (react_1.default.createElement(text_input_1.TextInput, { label: props.filter.label, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onChange: (value) => props.onChange(value), name: props.filter.name, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder }));
     },
     ListItem(props) {
         if ((0, is_nil_1.isNil)(props.value) || (0, is_empty_1.isEmpty)(props.value)) {

package/index.d.ts

@@ -2,3 +2,4 @@ export * from "./data-grid";
 export * from "./hooks/useCallbackRef";
 export * from "./types";
 export { decodeFilter, encodeFilter } from "./utils";
+export { mergeSchemaWithConfig } from "./utils/merge-schema-with-config";

package/index.js

@@ -14,10 +14,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.encodeFilter = exports.decodeFilter = void 0;
+exports.mergeSchemaWithConfig = exports.encodeFilter = exports.decodeFilter = void 0;
 __exportStar(require("./data-grid"), exports);
 __exportStar(require("./hooks/useCallbackRef"), exports);
 __exportStar(require("./types"), exports);
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "decodeFilter", { enumerable: true, get: function () { return utils_1.decodeFilter; } });
 Object.defineProperty(exports, "encodeFilter", { enumerable: true, get: function () { return utils_1.encodeFilter; } });
+var merge_schema_with_config_1 = require("./utils/merge-schema-with-config");
+Object.defineProperty(exports, "mergeSchemaWithConfig", { enumerable: true, get: function () { return merge_schema_with_config_1.mergeSchemaWithConfig; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.25.1",
+  "version": "11.26.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -25,7 +25,7 @@
     "dev": "next dev",
     "build": "tsc -P tsconfig.json",
     "gen:icons": "icons-gen",
-    "gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/test/data-grid-schema -o _generator/test/data-grid --requiredLoader",
+    "gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/__generator_tests__/data-grid-schema -o _generator/__generator_tests__/data-grid --requiredLoader",
     "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"",
     "test": "npm run-script typecheck",
     "typecheck": "tsc --noEmit --skipLibCheck"

package/types/schema.d.ts

@@ -26,6 +26,9 @@ export type Column<Name, Type> = {
     hidden?: boolean;
     config?: ColumnConfig;
 };
+export type FilterConfig = {
+    placeholder?: string;
+};
 export type ColumnConfig = {
     isHidden?: boolean;
     width?: number;
@@ -44,10 +47,11 @@ export interface Filter {
     type: string;
     options?: FilterOption[];
     autocomplete?: string | null;
+    config?: FilterConfig;
 }
-export interface Schema<GritType extends BaseGridType> {
+export interface Schema<GridType extends BaseGridType> {
     name?: string;
-    columns: Columns<GritType["columns"]>[];
+    columns: Columns<GridType["columns"]>[];
     filters: Filter[];
     tabs?: Tab[];
     s: DataGridSort;

package/types/state.d.ts

@@ -1,5 +1,5 @@
 import { RequestFilter } from "./api";
-import { BaseGridType, DataGridSort } from "./schema";
+import { BaseGridType, ColumnConfig, DataGridSort, FilterConfig } from "./schema";
 export type GridRequest = {
     f: RequestFilter[];
     s: DataGridSort | null;
@@ -8,15 +8,13 @@ export type GridRequest = {
     search: string;
     tab: string | null;
 };
-interface ColumnConfig {
-    isHidden?: boolean;
-    width?: number;
-    minWidth?: number;
-}
 export interface DataGridUserConfig<GridType extends BaseGridType> {
     columns?: Partial<Record<keyof GridType["columns"], ColumnConfig>>;
     perPage?: number;
 }
+export interface DataGridFrontendConfig<GridType extends BaseGridType> extends DataGridUserConfig<GridType> {
+    filters?: Partial<Record<keyof GridType["filters"], FilterConfig>>;
+}
 export interface DataGridState<GridType extends BaseGridType> {
     request: GridRequest;
     selectedRows?: any[];
@@ -25,4 +23,3 @@ export interface DataGridState<GridType extends BaseGridType> {
         [tab: string]: GridRequest;
     };
 }
-export {};

package/utils/merge-schema-with-config.d.ts

@@ -0,0 +1,3 @@
+import { BaseGridType, Schema } from "../types/schema";
+import { DataGridFrontendConfig } from "../types/state";
+export declare function mergeSchemaWithConfig<GridType extends BaseGridType>(schema: Schema<GridType>, frontendConfig: DataGridFrontendConfig<GridType>): Schema<GridType>;

package/utils/merge-schema-with-config.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeSchemaWithConfig = void 0;
+function mergeSchemaWithConfig(schema, frontendConfig) {
+    var _a;
+    return {
+        ...schema,
+        perPage: (_a = frontendConfig.perPage) !== null && _a !== void 0 ? _a : schema.perPage,
+        columns: schema.columns.map((column) => {
+            var _a;
+            return ({
+                ...column,
+                config: {
+                    ...column.config,
+                    ...(_a = frontendConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name],
+                },
+            });
+        }),
+        filters: schema.filters.map((filter) => {
+            var _a;
+            return ({
+                ...filter,
+                config: {
+                    ...filter.config,
+                    ...(_a = frontendConfig.filters) === null || _a === void 0 ? void 0 : _a[filter.name],
+                },
+            });
+        }),
+    };
+}
+exports.mergeSchemaWithConfig = mergeSchemaWithConfig;

package/utils/merge-schema-with-config.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/merge-schema-with-config.test.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const merge_schema_with_config_1 = require("./merge-schema-with-config");
+const schema = {
+    name: "test",
+    columns: [
+        { name: "id", type: "integer", label: "ID", config: { width: 50, isHidden: true } },
+        { name: "name", type: "string", label: "Name", config: {} },
+    ],
+    filters: [{ name: "id", type: "integer", label: "ID", config: { placeholder: "Placeholder" } }],
+    tabs: [],
+    s: { name: "id", dir: "asc" },
+    fullText: false,
+    perPage: 10,
+};
+test("merge perPage", () => {
+    expect((0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema, { perPage: 100 })).toStrictEqual({
+        name: "test",
+        columns: [
+            { name: "id", type: "integer", label: "ID", config: { width: 50, isHidden: true } },
+            { name: "name", type: "string", label: "Name", config: {} },
+        ],
+        filters: [{ name: "id", type: "integer", label: "ID", config: { placeholder: "Placeholder" } }],
+        tabs: [],
+        s: { name: "id", dir: "asc" },
+        fullText: false,
+        perPage: 100,
+    });
+});
+test("merge columns", () => {
+    expect((0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema, { columns: { id: { width: 100 } } })).toStrictEqual({
+        name: "test",
+        columns: [
+            { name: "id", type: "integer", label: "ID", config: { width: 100, isHidden: true } },
+            { name: "name", type: "string", label: "Name", config: {} },
+        ],
+        filters: [{ name: "id", type: "integer", label: "ID", config: { placeholder: "Placeholder" } }],
+        tabs: [],
+        s: { name: "id", dir: "asc" },
+        fullText: false,
+        perPage: 10,
+    });
+});
+test("merge filters", () => {
+    expect((0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema, { filters: { id: { placeholder: "CHANGED Placeholder" } } })).toStrictEqual({
+        name: "test",
+        columns: [
+            { name: "id", type: "integer", label: "ID", config: { width: 50, isHidden: true } },
+            { name: "name", type: "string", label: "Name", config: {} },
+        ],
+        filters: [{ name: "id", type: "integer", label: "ID", config: { placeholder: "CHANGED Placeholder" } }],
+        tabs: [],
+        s: { name: "id", dir: "asc" },
+        fullText: false,
+        perPage: 10,
+    });
+});