@uxf/data-grid 11.12.1 → 11.15.0

package/README.md

@@ -43,6 +43,18 @@ const { state, actions } = useDataGridControl({
 });
 ```
 
+## Supported FilterHandlers
+
+- `bool` - Select (yes / no / null)
+- `checkbox`, `boolean` - Checkbox (is sent only if checkbox is checked)
+- `date`
+- `datetime`
+- `entityMultiSelect`
+- `entitySelect`
+- `interval`
+- `multiSelect`
+- `select` 
+- `string`, `text`
 
 ## Examples
 

package/_api/index.d.ts

@@ -0,0 +1,8 @@
+import { Request, Response } from "../types/api";
+export declare function dataGridGetResult(gridName: string, request: Request): Promise<Response>;
+type Option = {
+    id: number | string;
+    label: string;
+};
+export declare function dataGridAutocomplete(name: string, term: string): Promise<Option[]>;
+export {};

package/_api/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridAutocomplete = exports.dataGridGetResult = void 0;
+const qs_1 = require("qs");
+function dataGridGetResult(gridName, request) {
+    return fetch(`/api/cms/datagrid/${gridName}?${(0, qs_1.stringify)(request)}`).then((response) => response.json());
+}
+exports.dataGridGetResult = dataGridGetResult;
+function dataGridAutocomplete(name, term) {
+    return fetch(`/api/cms/autocomplete/${name}?${(0, qs_1.stringify)({ term })}`).then((response) => response.json());
+}
+exports.dataGridAutocomplete = dataGridAutocomplete;

package/_generator/cli.js

@@ -12,17 +12,18 @@ Usage:
         .option("o", { alias: "outputDirectory", type: "string" })
         .option("l", { alias: "requiredLoader", type: "boolean" })
         .option("h", { alias: "help", group: "Options" })
+        .option("t", { alias: "columnTypes", type: "string" })
         .strict(false)
         .exitProcess(false);
 
     try {
-        const { help, schemaDirectory, outputDirectory, requiredLoader } = cli.parse(argv.slice(2));
+        const { help, schemaDirectory, outputDirectory, requiredLoader, columnTypes } = cli.parse(argv.slice(2));
 
         if (Boolean(help)) {
             return 0;
         }
 
-        await require("./index")(schemaDirectory, outputDirectory, requiredLoader);
+        await require("./index")(schemaDirectory, outputDirectory, requiredLoader, columnTypes);
     } catch (e) {
         console.error(e);
         return 1;

package/_generator/index.js

@@ -14,23 +14,51 @@ function writeFile(filename, value) {
     writeFileSync(filename, value);
 }
 
-function generateSchemaFile(gridName, schema, schemaRelativeImport) {
-    return `import { Schema } from "@uxf/data-grid";
-import json from "${schemaRelativeImport}";
-
-type DataGrid_${camelize(gridName)} = {
+function generateGridType(gridName, schema) {
+    return `type DataGrid_${camelize(gridName)} = {
     columns: {
         ${schema.columns.map((column) => `"${column.name}": "${column.type}",`).join("\n        ")}
     },
     filters: {
         ${schema.filters.map((filter) => `"${filter.name}": "${filter.type}",`).join("\n        ")}
     }
+}`;
+}
+
+function generateRowType(gridName, schema, columnTypes) {
+    if (!columnTypes) {
+        return "";
+    }
+
+    return `export type DataGridRow_${camelize(gridName)} = {
+    ${schema.columns.map((column) => `"${column.name}": ColumnTypes["${column.type}"]`).join("\n    ")}
+}`;
+}
+
+function generateGridSchema(gridName) {
+    return `export const dataGridSchema_${camelize(gridName)}: Schema<DataGrid_${camelize(gridName)}> = json as any;`;
 }
 
-export const dataGridSchema_${camelize(gridName)}: Schema<DataGrid_${camelize(gridName)}> = json as any;`;
+function generateSchemaFile(gridName, schema, schemaRelativeImport, columnTypes) {
+    const imports = [
+        'import { Schema } from "@uxf/data-grid";',
+        `import json from "${schemaRelativeImport}";`,
+        !!columnTypes && `import { ColumnTypes } from "${columnTypes}";`,
+    ]
+        .filter(Boolean)
+        .join("\n");
+
+    return [
+        imports,
+        !!columnTypes && generateRowType(gridName, schema, columnTypes),
+        generateGridType(gridName, schema),
+        generateGridSchema(gridName),
+    ]
+        .filter(Boolean)
+        .join("\n\n");
 }
 
-function generate(schema, filename, outputDirectory) {
+function generate(schema, filename, outputDirectory, columnTypes) {
     const gridName = parse(filename).name;
     const generatedPath = join(process.cwd(), outputDirectory, gridName);
 
@@ -38,12 +66,12 @@ function generate(schema, filename, outputDirectory) {
 
     writeFile(
         generatedSchemaFilename,
-        generateSchemaFile(gridName, schema, relative(dirname(generatedSchemaFilename), filename)),
+        generateSchemaFile(gridName, schema, relative(dirname(generatedSchemaFilename), filename), columnTypes),
     );
 }
 
-module.exports = (schemaDirectory, outputDirectory, requiredLoader) => {
+module.exports = (schemaDirectory, outputDirectory, requiredLoader, columnTypes) => {
     globSync(schemaDirectory + "/*.json")
         .map((path) => process.cwd() + "/" + path)
-        .forEach((filename) => generate(JSON.parse(readFileSync(filename)), filename, outputDirectory, requiredLoader));
+        .forEach((filename) => generate(JSON.parse(readFileSync(filename)), filename, outputDirectory, columnTypes));
 };

package/_store/reducer.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.debugReducer = exports.reducer = exports.getInitialState = void 0;
 const is_nil_1 = require("@uxf/core/utils/is-nil");
+const deepmerge_1 = __importDefault(require("deepmerge"));
 const utils_1 = require("../utils");
 function getInitialState(schema, init, initialUserConfig) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
@@ -48,15 +52,28 @@ const reducer = (state, action) => {
             };
         case "FILTER":
             // eslint-disable-next-line no-case-declarations
-            const filterValue = action.filterValue;
+            const name = action.name;
+            // eslint-disable-next-line no-case-declarations
+            const value = action.value;
+            // eslint-disable-next-line no-case-declarations
+            const op = action.op;
             return {
                 ...state,
                 request: {
                     ...state.request,
                     page: 0,
-                    f: state.request.f.find((f) => f.name === filterValue.name)
-                        ? state.request.f.map((f) => (f.name === filterValue.name ? filterValue : f))
-                        : [...state.request.f, filterValue],
+                    f: state.request.f.find((f) => f.name === name)
+                        ? state.request.f.map((f) => (f.name === name ? { value, name, op } : f))
+                        : [...state.request.f, { value, name, op }],
+                },
+            };
+        case "FILTER_CLEAR":
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    page: 0,
+                    f: state.request.f.filter((filter) => filter.name !== action.name),
                 },
             };
         case "FILTER_RESET":
@@ -131,7 +148,6 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                             ...((_k = (_j = state.userConfig.columns) === null || _j === void 0 ? void 0 : _j[action.name]) !== null && _k !== void 0 ? _k : {}),
                             isHidden: true,
                         },
@@ -146,13 +162,17 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                             ...((_m = (_l = state.userConfig.columns) === null || _l === void 0 ? void 0 : _l[action.name]) !== null && _m !== void 0 ? _m : {}),
                             isHidden: false,
                         },
                     },
                 },
             };
+        case "UPDATE_USER_CONFIG":
+            return {
+                ...state,
+                userConfig: (0, deepmerge_1.default)(state.userConfig, action.userConfig),
+            };
         default:
             // eslint-disable-next-line no-console
             console.warn("Unknown datagrid action.", action);

package/_story-utils/schema.js

@@ -15,17 +15,17 @@ exports.schema = {
     filters: [
         { name: "text", type: "text", label: "Text" },
         { name: "bool", type: "boolean", label: "Boolean" },
-        { name: "ival", type: "interval", label: "Super interval" },
+        { name: "interval", type: "interval", label: "Super interval" },
         { name: "mail", type: "string", label: "E-mail" },
         { name: "date", type: "date", label: "Date" },
+        { name: "datetime", type: "datetime", label: "Datetime" },
         { name: "tel", type: "string", label: "Phone" },
         { name: "link", type: "string", label: "Link" },
         {
-            name: "sele",
+            name: "select",
             type: "select",
             label: "Select",
             options: [
-                { id: "", label: "" },
                 { id: 1, label: "A" },
                 { id: 2, label: "B" },
             ],
@@ -42,14 +42,16 @@ exports.schema = {
             ],
         },
         {
-            name: "seleBool",
-            type: "select",
-            label: "Select Boolean",
-            options: [
-                { id: "", label: "" },
-                { id: 1, label: "Ano" },
-                { id: 0, label: "Ne" },
-            ],
+            name: "entitySelect",
+            label: "Entity select",
+            type: "entitySelect",
+            autocomplete: "user",
+        },
+        {
+            name: "entityMultiSelect",
+            label: "Entity multi select",
+            type: "entityMultiSelect",
+            autocomplete: "user",
         },
     ],
     tabs: [

package/components.d.ts

@@ -11,6 +11,7 @@ import * as rowCountsStories from "./row-counts/row-counts.stories";
 import * as rowsPerPageSelectStories from "./rows-per-page-select/rows-per-page-select.stories";
 import * as selectedRowsToolbarStories from "./selected-rows-toolbar/selected-rows-toolbar.stories";
 import * as tableStories from "./table/table.stories";
+import * as tableV2Stories from "./table-v2/table-v2.stories";
 import * as toolbarControlStories from "./toolbar-control/toolbar-control.stories";
 import * as toolbarCustomsStories from "./toolbar-customs/toolbar-customs.stories";
 import * as toolbarTabsStories from "./toolbar-tabs/toolbar-tabs.stories";
@@ -67,6 +68,10 @@ export declare const components: {
         readonly title: "Table";
         readonly stories: typeof tableStories;
     };
+    readonly "table-v2": {
+        readonly title: "TableV2";
+        readonly stories: typeof tableV2Stories;
+    };
     readonly "toolbar-control": {
         readonly title: "ToolbarControl";
         readonly stories: typeof toolbarControlStories;

package/components.js

@@ -38,6 +38,7 @@ const rowCountsStories = __importStar(require("./row-counts/row-counts.stories")
 const rowsPerPageSelectStories = __importStar(require("./rows-per-page-select/rows-per-page-select.stories"));
 const selectedRowsToolbarStories = __importStar(require("./selected-rows-toolbar/selected-rows-toolbar.stories"));
 const tableStories = __importStar(require("./table/table.stories"));
+const tableV2Stories = __importStar(require("./table-v2/table-v2.stories"));
 const toolbarControlStories = __importStar(require("./toolbar-control/toolbar-control.stories"));
 const toolbarCustomsStories = __importStar(require("./toolbar-customs/toolbar-customs.stories"));
 const toolbarTabsStories = __importStar(require("./toolbar-tabs/toolbar-tabs.stories"));
@@ -94,6 +95,10 @@ exports.components = {
         title: "Table",
         stories: tableStories
     },
+    "table-v2": {
+        title: "TableV2",
+        stories: tableV2Stories
+    },
     "toolbar-control": {
         title: "ToolbarControl",
         stories: toolbarControlStories

package/filter-handler/boolean-select.d.ts

@@ -0,0 +1,4 @@
+import { FilterHandler } from "./types";
+type StateValue = 1 | 0 | null;
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/boolean-select.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const chip_1 = require("@uxf/ui/chip");
+const select_1 = require("@uxf/ui/select");
+const react_1 = __importDefault(require("react"));
+const filterHandler = {
+    Input(props) {
+        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 }));
+    },
+    ListItem(props) {
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ":\u00A0",
+            props.value ? "Ano" : "Ne"));
+    },
+};
+exports.default = filterHandler;

package/filter-handler/checkbox.d.ts

@@ -0,0 +1,4 @@
+import { FilterHandler } from "./types";
+type StateValue = boolean | undefined;
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/checkbox.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const checkbox_input_1 = require("@uxf/ui/checkbox-input");
+const chip_1 = require("@uxf/ui/chip");
+const react_1 = __importDefault(require("react"));
+const filterHandler = {
+    Input(props) {
+        var _a;
+        return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: props.filter.label, value: (_a = props.value) !== null && _a !== void 0 ? _a : false, onChange: (value) => props.onChange(value ? value : undefined), name: props.filter.name }));
+    },
+    ListItem: (props) => (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+        props.filter.label,
+        ":\u00A0",
+        props.value ? "Ano" : "Ne")),
+};
+exports.default = filterHandler;

package/filter-handler/date.d.ts

@@ -1,3 +1,7 @@
 import { FilterHandler } from "./types";
-declare const date: FilterHandler;
-export default date;
+type StateValue = {
+    from?: string;
+    to?: string;
+} | undefined;
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/date.js

@@ -9,35 +9,38 @@ const chip_1 = require("@uxf/ui/chip");
 const date_picker_input_1 = require("@uxf/ui/date-picker-input");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importDefault(require("react"));
-const date = {
-    input: function (props) {
-        var _a, _b;
-        const initializedValue = typeof ((_a = props.value.value) === null || _a === void 0 ? void 0 : _a.from) !== "undefined" && typeof ((_b = props.value.value) === null || _b === void 0 ? void 0 : _b.to) !== "undefined"
-            ? props.value
-            : { name: props.filter.name, value: { from: null, to: null } };
+const filterHandler = {
+    Input(props) {
+        var _a, _b, _c, _d, _e, _f;
+        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)
+                ? props.onChange(undefined)
+                : props.onChange({ ...props.value, from: value !== null && value !== void 0 ? value : undefined });
+        };
+        const onChangeTo = (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.from)
+                ? props.onChange(undefined)
+                : 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: initializedValue.value.from, onChange: (changedValue) => props.onFilter({
-                    ...initializedValue,
-                    value: { ...initializedValue.value, from: changedValue },
-                }), label: `${props.filter.label} (od)`, name: props.filter.name }),
-            react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: initializedValue.value.to, onChange: (changedValue) => props.onFilter({ ...initializedValue, value: { ...initializedValue.value, to: changedValue } }), label: `${props.filter.label} (do)`, name: props.filter.name })));
+            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 })));
     },
-    listItem: function (props) {
-        if ((0, is_nil_1.isNil)(props.value.value)) {
-            return null;
-        }
-        const value = props.value.value;
-        if ((0, is_nil_1.isNil)(value.from) && (0, is_nil_1.isNil)(value.to)) {
+    ListItem: function (props) {
+        var _a, _b;
+        if ((0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.from) && (0, is_nil_1.isNil)((_b = props.value) === null || _b === void 0 ? void 0 : _b.to)) {
             return null;
         }
         const formatDate = [
-            value.from ? "od " + (0, dayjs_1.default)(value.from).format("l") : "",
-            value.to ? "do " + (0, dayjs_1.default)(value.to).format("l") : "",
+            props.value.from ? "od " + (0, dayjs_1.default)(props.value.from).format("l") : null,
+            props.value.to ? "do " + (0, dayjs_1.default)(props.value.to).format("l") : null,
         ];
-        return (react_1.default.createElement(chip_1.Chip, { onClose: () => props.onFilter({ ...props.value, value: undefined }) },
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
             props.filter.label,
-            " ",
+            ": ",
             (0, filter_nullish_1.filterNullish)(formatDate).join(" ")));
     },
 };
-exports.default = date;
+exports.default = filterHandler;

package/filter-handler/datetime.d.ts

@@ -0,0 +1,7 @@
+import { FilterHandler } from "./types";
+type StateValue = {
+    from?: string;
+    to?: string;
+} | undefined;
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/datetime.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const filter_nullish_1 = require("@uxf/core/utils/filter-nullish");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const chip_1 = require("@uxf/ui/chip");
+const datetime_picker_input_1 = require("@uxf/ui/datetime-picker-input");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importDefault(require("react"));
+const filterHandler = {
+    Input(props) {
+        var _a, _b, _c, _d, _e, _f;
+        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 })));
+    },
+    ListItem: function (props) {
+        var _a, _b;
+        if ((0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.from) && (0, is_nil_1.isNil)((_b = props.value) === null || _b === void 0 ? void 0 : _b.to)) {
+            return null;
+        }
+        const formatDate = [
+            props.value.from ? "od " + (0, dayjs_1.default)(props.value.from).format("l LT") : null,
+            props.value.to ? "do " + (0, dayjs_1.default)(props.value.to).format("l LT") : null,
+        ];
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ": ",
+            (0, filter_nullish_1.filterNullish)(formatDate).join(" ")));
+    },
+};
+exports.default = filterHandler;

package/filter-handler/entity-multi-select.d.ts

@@ -0,0 +1,5 @@
+import { MultiComboboxProps } from "@uxf/ui/multi-combobox";
+import { FilterHandler } from "./types";
+type StateValue = MultiComboboxProps["value"];
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const chip_1 = require("@uxf/ui/chip");
+const multi_combobox_1 = require("@uxf/ui/multi-combobox");
+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 }));
+    },
+    ListItem(props) {
+        var _a;
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ":\u00A0", (_a = props.value) === null || _a === void 0 ? void 0 :
+            _a.map((item) => item.label).join(", ")));
+    },
+};
+exports.default = filterHandler;

package/filter-handler/entity-select.d.ts

@@ -0,0 +1,5 @@
+import { ComboboxProps } from "@uxf/ui/combobox";
+import { FilterHandler } from "./types";
+type StateValue = ComboboxProps["value"];
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/entity-select.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const chip_1 = require("@uxf/ui/chip");
+const combobox_1 = require("@uxf/ui/combobox");
+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 }));
+    },
+    ListItem(props) {
+        var _a;
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ":\u00A0", (_a = props.value) === null || _a === void 0 ? void 0 :
+            _a.label));
+    },
+};
+exports.default = filterHandler;

package/filter-handler/index.d.ts

@@ -1,4 +1,4 @@
 import { FilterHandler } from "./types";
 export * from "./types";
-export type FilterHandlers = Record<string, FilterHandler>;
+export type FilterHandlers = Partial<Record<string, FilterHandler<any>>>;
 export declare const defaultFilterHandlers: FilterHandlers;

package/filter-handler/index.js

@@ -18,22 +18,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultFilterHandlers = void 0;
-const bool_filter_1 = __importDefault(require("./bool-filter"));
-const boolean_filter_1 = __importDefault(require("./boolean-filter"));
+const boolean_select_1 = __importDefault(require("./boolean-select"));
+const checkbox_1 = __importDefault(require("./checkbox"));
 const date_1 = __importDefault(require("./date"));
-const interval_filter_1 = __importDefault(require("./interval-filter"));
+const datetime_1 = __importDefault(require("./datetime"));
+const entity_multi_select_1 = __importDefault(require("./entity-multi-select"));
+const entity_select_1 = __importDefault(require("./entity-select"));
+const interval_1 = __importDefault(require("./interval"));
 const multi_select_1 = __importDefault(require("./multi-select"));
-const select_filter_1 = __importDefault(require("./select-filter"));
-const text_filter_1 = __importDefault(require("./text-filter"));
+const select_1 = __importDefault(require("./select"));
+const string_1 = __importDefault(require("./string"));
 __exportStar(require("./types"), exports);
 exports.defaultFilterHandlers = {
-    text: text_filter_1.default,
-    string: text_filter_1.default,
-    date: date_1.default,
-    bool: bool_filter_1.default,
-    boolean: boolean_filter_1.default,
-    checkbox: boolean_filter_1.default,
-    interval: interval_filter_1.default,
+    bool: boolean_select_1.default, // TODO smazat
+    boolean: checkbox_1.default, // TODO smazat
+    text: string_1.default, // TODO smazat
+    date: // TODO smazat
+    date_1.default,
+    datetime: datetime_1.default,
+    entityMultiSelect: entity_multi_select_1.default,
+    entitySelect: entity_select_1.default,
+    checkbox: checkbox_1.default,
+    interval: interval_1.default,
     multiSelect: multi_select_1.default,
-    select: select_filter_1.default,
+    select: select_1.default,
+    string: string_1.default,
 };

package/filter-handler/interval.d.ts

@@ -0,0 +1,7 @@
+import { FilterHandler } from "./types";
+type StateValue = {
+    from?: number | null;
+    to?: number | null;
+} | undefined;
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/interval.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const filter_nullish_1 = require("@uxf/core/utils/filter-nullish");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const chip_1 = require("@uxf/ui/chip");
+const text_input_1 = require("@uxf/ui/text-input");
+const react_1 = __importDefault(require("react"));
+const filterHandler = {
+    Input(props) {
+        var _a, _b, _c, _d, _e, _f;
+        const onChangeFrom = (value) => props.onChange({
+            ...props.value,
+            from: (0, is_not_nil_1.isNotNil)(value) && !(0, is_empty_1.isEmpty)(value) ? parseInt(value, 10) : null,
+        });
+        const onChangeTo = (value) => props.onChange({
+            ...props.value,
+            to: (0, is_not_nil_1.isNotNil)(value) && !(0, is_empty_1.isEmpty)(value) ? parseInt(value, 10) : null,
+        });
+        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(text_input_1.TextInput, { label: `${props.filter.label} od:`, value: (_c = (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "", onChange: onChangeFrom, name: props.filter.name }),
+                react_1.default.createElement("div", { className: "uxf-data-grid__filter-gap" }, "\u2013"),
+                react_1.default.createElement(text_input_1.TextInput, { label: `${props.filter.label} do:`, value: (_f = (_e = (_d = props.value) === null || _d === void 0 ? void 0 : _d.to) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : "", onChange: onChangeTo, name: props.filter.name }))));
+    },
+    ListItem(props) {
+        var _a, _b;
+        if ((0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.from) && (0, is_nil_1.isNil)((_b = props.value) === null || _b === void 0 ? void 0 : _b.to)) {
+            return null;
+        }
+        const formatInterval = [
+            props.value.from ? "od " + props.value.from : null,
+            props.value.to ? "do " + props.value.to : null,
+        ];
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            " ",
+            (0, filter_nullish_1.filterNullish)(formatInterval).join(" ")));
+    },
+};
+exports.default = filterHandler;