@uxf/data-grid 11.12.0 → 11.13.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/_store/reducer.js

@@ -48,15 +48,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 === 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.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.filter((filter) => filter.name !== action.name),
                 },
             };
         case "FILTER_RESET":

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/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;

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

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

package/filter-handler/multi-select.js

@@ -3,27 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
 const chip_1 = require("@uxf/ui/chip");
 const multi_select_1 = require("@uxf/ui/multi-select");
 const react_1 = __importDefault(require("react"));
-const multiSelect = {
-    input: (props) => {
-        var _a, _b;
-        return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: (_b = props.value.value) === null || _b === void 0 ? void 0 : _b.map((id) => { var _a; return (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id); }), onChange: (value) => {
-                props.onFilter({
-                    ...props.value,
-                    value: (0, is_nil_1.isNil)(value) || value.length === 0 ? null : value.map((item) => item.id),
-                });
-            }, name: props.filter.name }));
+const filterHandler = {
+    Input(props) {
+        var _a;
+        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 }));
     },
-    listItem: (props) => {
+    ListItem(props) {
+        var _a;
         return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
             props.filter.label,
-            ":\u00A0",
-            props.value.value
-                .map((id) => { var _a, _b; return (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id)) === null || _b === void 0 ? void 0 : _b.label; })
-                .join(", ")));
+            ":\u00A0", (_a = props.value) === null || _a === void 0 ? void 0 :
+            _a.map((item) => item.label).join(", ")));
     },
 };
-exports.default = multiSelect;
+exports.default = filterHandler;

package/filter-handler/select.d.ts

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

package/filter-handler/{select-filter.js → select.js}

@@ -6,16 +6,16 @@ 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 SelectFilterHandler = {
-    input: (props) => {
+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.value, onChange: (value) => props.onFilter({ ...props.value, value }), isClearable: true, name: props.filter.name }));
+        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 }));
     },
-    listItem: (props) => {
+    ListItem(props) {
         var _a, _b, _c;
         return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
             props.filter.label,
-            ":\u00A0", (_c = (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((v) => v.id === props.value.value)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : ""));
+            ":\u00A0", (_c = (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((v) => v.id === props.value)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : ""));
     },
 };
-exports.default = SelectFilterHandler;
+exports.default = filterHandler;

package/filter-handler/string.d.ts

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

package/filter-handler/{text-filter.js → string.js}

@@ -3,22 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const chip_1 = require("@uxf/ui/chip");
 const text_input_1 = require("@uxf/ui/text-input");
 const react_1 = __importDefault(require("react"));
-const TextFilterHandler = {
-    input: (props) => {
+const filterHandler = {
+    Input(props) {
         var _a;
-        return (react_1.default.createElement(text_input_1.TextInput, { label: props.filter.label, value: (_a = props.value.value) !== null && _a !== void 0 ? _a : "", onChange: (value) => props.onFilter({ ...props.value, value }), name: props.filter.name }));
+        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 }));
     },
-    listItem: (props) => {
-        if (!props.value.value) {
+    ListItem(props) {
+        if ((0, is_nil_1.isNil)(props.value) || (0, is_empty_1.isEmpty)(props.value)) {
             return null;
         }
         return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
             props.filter.label,
             ": ",
-            props.value.value));
+            props.value));
     },
 };
-exports.default = TextFilterHandler;
+exports.default = filterHandler;

package/filter-handler/types.d.ts

@@ -1,8 +1,7 @@
-import { ComponentType } from "react";
+import { FunctionComponent } from "react";
 import { FilterProps } from "../types/components";
-import { BaseGridType, Filters } from "../types/schema";
-export type FilterComponent<F extends BaseGridType["filters"], T = any> = ComponentType<FilterProps<Filters<F>, T>>;
-export interface FilterHandler {
-    input: FilterComponent<any>;
-    listItem: FilterComponent<any>;
+export type FilterComponent<StateValue> = FunctionComponent<FilterProps<StateValue>>;
+export interface FilterHandler<StateValue> {
+    Input: FilterComponent<StateValue>;
+    ListItem: FilterComponent<StateValue>;
 }

package/filter-list/filter-list.js

@@ -5,25 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterList = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const react_1 = __importDefault(require("react"));
+const create_filter_component_props_1 = require("../utils/create-filter-component-props");
 function FilterList(props) {
     const renderedFilters = props.state.request.f
         .map((filterRequest) => {
-        var _a;
-        if (typeof filterRequest.value !== "number" && !filterRequest.value) {
-            return null;
-        }
         const filter = props.schema.filters.find((f) => f.name === filterRequest.name);
-        if (!filter) {
+        if ((0, is_nil_1.isNil)(filter)) {
             return null;
         }
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const FilterListItem = (_a = props.filterHandlers[filter.type]) === null || _a === void 0 ? void 0 : _a.listItem;
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const filterHandler = props.filterHandlers[filter.type];
+        const FilterListItem = filterHandler === null || filterHandler === void 0 ? void 0 : filterHandler.ListItem;
         if (!FilterListItem) {
             return null;
         }
-        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, filter: filter, onFilter: props.actions.filter, gridName: props.gridName, value: filterRequest, onClear: () => props.actions.filter({ name: filter.name, value: null }) }));
+        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.gridName, filter, props.state, props.actions) }));
     })
         .filter((item) => !!item);
     if (renderedFilters.length === 0) {

package/filters/filters.js

@@ -5,21 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filters = void 0;
 const react_1 = __importDefault(require("react"));
+const create_filter_component_props_1 = require("../utils/create-filter-component-props");
 function Filters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
-        var _a, _b;
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const FilterInput = (_a = props.filterHandlers[filter.type]) === null || _a === void 0 ? void 0 : _a.input;
+        const filterHandler = props.filterHandlers[filter.type];
+        const FilterInput = filterHandler === null || filterHandler === void 0 ? void 0 : filterHandler.Input;
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!FilterInput) {
             // eslint-disable-next-line no-console
             console.warn(`Unknown filter "${filter.type}".`);
             return null;
         }
-        return (react_1.default.createElement(FilterInput, { key: filter.name, gridName: props.gridName, filter: filter, value: (_b = props.state.request.f.find((f) => f.name === filter.name)) !== null && _b !== void 0 ? _b : {
-                name: filter.name,
-                value: null,
-            }, onFilter: (requestFilter) => props.actions.filter(requestFilter), onClear: () => props.actions.filter({ name: filter.name, value: null }) }));
+        return (react_1.default.createElement(FilterInput, { key: filter.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.gridName, filter, props.state, props.actions) }));
     })));
 }
 exports.Filters = Filters;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.12.0",
+  "version": "11.13.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -31,7 +31,7 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@uxf/ui": "11.12.0",
+    "@uxf/ui": "11.13.0",
     "dayjs": "1.11.10",
     "fast-glob": "3.3.2",
     "qs": "6.11.2",

package/styles.css

@@ -165,7 +165,8 @@
     }
 
     &__filter {
-        &--date {
+        &--date,
+        &--datetime {
             display: grid;
             gap: theme("spacing.4");
             grid-template-columns: repeat(2, 1fr);

package/types/api.d.ts

@@ -3,7 +3,6 @@ export type ResultItem = any;
 export interface RequestFilter<T = any> {
     name: string;
     value: T;
-    label?: string;
     op?: string;
 }
 export interface Request {

package/types/components.d.ts

@@ -1,5 +1,4 @@
 import { ComponentType, FC } from "react";
-import { RequestFilter } from "./api";
 import { BaseGridType, Columns, Filter } from "./schema";
 export interface ActionCellProps<R> {
     row: R;
@@ -17,10 +16,11 @@ export type BodyCellComponents<C, R> = {
     [key: string]: BodyCellComponent<C, R>;
     default: BodyCellComponent<C, R>;
 };
-export interface FilterProps<F extends Filter<any, any>, T> {
+export interface FilterProps<StateValue> {
     gridName?: string;
-    filter: F;
-    value: RequestFilter<T>;
-    onFilter: (value: RequestFilter<T>) => void;
+    filter: Filter;
+    value: StateValue;
+    op?: string;
+    onChange: (value: StateValue | undefined, op?: string) => void;
     onClear: () => void;
 }

package/types/schema.d.ts

@@ -37,19 +37,17 @@ export interface FilterOption {
     id: string | number;
     label: string;
 }
-export interface Filter<N, T> {
-    name: N;
+export interface Filter {
+    name: string;
     label: string;
-    type?: T;
+    type: string;
     options?: FilterOption[];
+    autocomplete?: string | null;
 }
-export type Filters<F extends BaseGridType["filters"]> = {
-    [K in keyof F]: Filter<K, F[K]>;
-}[keyof F];
 export interface Schema<GritType extends BaseGridType> {
     name?: string;
     columns: Columns<GritType["columns"]>[];
-    filters: Filters<GritType["filters"]>[];
+    filters: Filter[];
     tabs?: Tab[];
     s: DataGridSort;
     perPage: number;

package/use-data-grid-control/actions-factory.d.ts

@@ -1,10 +1,10 @@
 import { Dispatch } from "react";
-import { RequestFilter } from "../types/api";
 import { Tab } from "../types/schema";
 export declare function createActions(dispatch: Dispatch<any>): {
     changePage: (page: number) => void;
     changePerPage: (perPage: number) => void;
-    filter: (filterValue: RequestFilter) => void;
+    filter: (name: string, value: any, op?: string) => void;
+    filterClear: (name: string) => void;
     sort: (columnName: string, direction: string) => void;
     sortClear: () => void;
     search: (search: string) => void;

package/use-data-grid-control/actions-factory.js

@@ -5,7 +5,8 @@ function createActions(dispatch) {
     return {
         changePage: (page) => dispatch({ type: "CHANGE_PAGE", page }),
         changePerPage: (perPage) => dispatch({ type: "CHANGE_PER_PAGE", perPage }),
-        filter: (filterValue) => dispatch({ type: "FILTER", filterValue }),
+        filter: (name, value, op) => dispatch({ type: "FILTER", name, value, op }),
+        filterClear: (name) => dispatch({ type: "FILTER_CLEAR", name }),
         sort: (columnName, direction) => dispatch({ type: "SORT", columnName, direction }),
         sortClear: () => dispatch({ type: "SORT_CLEAR" }),
         search: (search) => dispatch({ type: "FULLTEXT", search }),

package/use-data-grid-control/use-data-grid-control.d.ts

@@ -13,7 +13,8 @@ export declare function useDataGridControl<T extends BaseGridType>(config: UseDa
     actions: {
         changePage: (page: number) => void;
         changePerPage: (perPage: number) => void;
-        filter: (filterValue: import("../types/api").RequestFilter<any>) => void;
+        filter: (name: string, value: any, op?: string | undefined) => void;
+        filterClear: (name: string) => void;
         sort: (columnName: string, direction: string) => void;
         sortClear: () => void;
         search: (search: string) => void;

package/use-data-grid-fetching/loader.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dataGridLoader = void 0;
-const qs_1 = require("qs");
-const dataGridLoader = (gridName, request) => {
-    return fetch(`/api/cms/datagrid/${gridName}?${(0, qs_1.stringify)(request)}`).then((response) => response.json());
-};
+const _api_1 = require("../_api");
+const dataGridLoader = (gridName, request) => (0, _api_1.dataGridGetResult)(gridName !== null && gridName !== void 0 ? gridName : "", request);
 exports.dataGridLoader = dataGridLoader;

package/utils/create-filter-component-props.d.ts

@@ -0,0 +1,4 @@
+import { FilterProps } from "../types/components";
+import { Filter } from "../types/schema";
+import { DataGridControl } from "../use-data-grid-control";
+export declare function createFilterComponentProps(gridName: string | undefined, filter: Filter, state: DataGridControl["state"], actions: DataGridControl["actions"]): FilterProps<any>;

package/utils/create-filter-component-props.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFilterComponentProps = void 0;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+function createFilterComponentProps(gridName, filter, state, actions) {
+    const requestFilter = state.request.f.find((f) => f.name === filter.name);
+    return {
+        filter,
+        value: requestFilter === null || requestFilter === void 0 ? void 0 : requestFilter.value,
+        op: requestFilter === null || requestFilter === void 0 ? void 0 : requestFilter.op,
+        gridName,
+        onChange: (value, op) => (0, is_nil_1.isNil)(value) ? actions.filterClear(filter.name) : actions.filter(filter.name, value, op),
+        onClear: () => actions.filterClear(filter.name),
+    };
+}
+exports.createFilterComponentProps = createFilterComponentProps;

package/_store/actions.d.ts

@@ -1,45 +0,0 @@
-import { DataGridSortDir, RequestFilter, Response, Tab } from "../types";
-export declare const dataGridActions: {
-    filter: (filterValue: RequestFilter) => {
-        type: string;
-        filterValue: RequestFilter<any>;
-    };
-    filterReset: () => {
-        type: string;
-    };
-    changePage: (page: number) => {
-        type: string;
-        page: number;
-    };
-    changePerPage: (perPage: number) => {
-        type: string;
-        perPage: number;
-    };
-    changeTab: (tab: Tab) => {
-        type: string;
-        tab: Tab;
-    };
-    reload: () => {
-        type: string;
-    };
-    reloadDone: (response: Response) => {
-        type: string;
-        response: Response;
-    };
-    reloadFailed: (error: any) => {
-        type: string;
-        error: any;
-    };
-    search: (term: string) => {
-        type: string;
-        search: string;
-    };
-    sort: (columnName: string, direction: DataGridSortDir) => {
-        type: string;
-        columnName: string;
-        direction: DataGridSortDir;
-    };
-    sortClear: () => {
-        type: string;
-    };
-};

package/_store/actions.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridActions = void 0;
-exports.dataGridActions = {
-    filter: (filterValue) => ({
-        type: "FILTER",
-        filterValue,
-    }),
-    filterReset: () => ({
-        type: "FILTER_RESET",
-    }),
-    changePage: (page) => ({
-        type: "CHANGE_PAGE",
-        page,
-    }),
-    changePerPage: (perPage) => ({
-        type: "CHANGE_PER_PAGE",
-        perPage,
-    }),
-    changeTab: (tab) => ({
-        type: "CHANGE_TAB",
-        tab,
-    }),
-    reload: () => ({
-        type: "RELOAD",
-    }),
-    reloadDone: (response) => ({
-        type: "RELOAD_DONE",
-        response,
-    }),
-    reloadFailed: (error) => ({
-        type: "RELOAD_FAILED",
-        error,
-    }),
-    search: (term) => ({
-        type: "FULLTEXT",
-        search: term,
-    }),
-    sort: (columnName, direction) => ({
-        type: "SORT",
-        columnName,
-        direction,
-    }),
-    sortClear: () => ({
-        type: "SORT_CLEAR",
-    }),
-};

package/filter-handler/bool-filter.d.ts

@@ -1,3 +0,0 @@
-import { FilterHandler } from "./types";
-declare const BoolFilterHandler: FilterHandler;
-export default BoolFilterHandler;

package/filter-handler/bool-filter.js

@@ -1,20 +0,0 @@
-"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 BoolFilterHandler = {
-    input: (props) => (react_1.default.createElement(select_1.Select, { options: [
-            { id: "", label: "Nerozhoduje" },
-            { id: 1, label: "Ano" },
-            { id: 0, label: "Ne" },
-        ], label: props.filter.label, value: props.value.value, onChange: (value) => props.onFilter({ ...props.value, value }), isClearable: true, name: props.filter.name })),
-    listItem: (props) => (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
-        props.filter.label,
-        ":\u00A0",
-        props.value.value ? "Ano" : "Ne")),
-};
-exports.default = BoolFilterHandler;

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

@@ -1,3 +0,0 @@
-import { FilterHandler } from "./types";
-declare const BooleanFilterHandler: FilterHandler;
-export default BooleanFilterHandler;

package/filter-handler/boolean-filter.js

@@ -1,16 +0,0 @@
-"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 BooleanFilterHandler = {
-    input: (props) => (react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: props.filter.label, value: props.value.value, onChange: (value) => props.onFilter({ ...props.value, value: value === true ? value : undefined }), name: props.filter.name })),
-    listItem: (props) => (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
-        props.filter.label,
-        ":\u00A0",
-        props.value.value ? "Ano" : "Ne")),
-};
-exports.default = BooleanFilterHandler;

package/filter-handler/interval-filter.d.ts

@@ -1,3 +0,0 @@
-import { FilterHandler } from "./types";
-declare const IntervalFilterHandler: FilterHandler;
-export default IntervalFilterHandler;

package/filter-handler/interval-filter.js

@@ -1,50 +0,0 @@
-"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 text_input_1 = require("@uxf/ui/text-input");
-const react_1 = __importDefault(require("react"));
-const IntervalFilterHandler = {
-    input: (props) => {
-        const initializedValue = props.value.value &&
-            typeof props.value.value.from !== "undefined" &&
-            typeof props.value.value.to !== "undefined"
-            ? props.value
-            : { name: props.filter.name, value: { from: null, to: 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: props.value.value ? props.value.value.from : "", onChange: (val) => {
-                        return props.onFilter({
-                            ...initializedValue,
-                            value: {
-                                ...initializedValue.value,
-                                from: val ? parseInt(val, 10) : null,
-                            },
-                        });
-                    }, 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: props.value.value ? props.value.value.to : "", onChange: (val) => {
-                        return props.onFilter({
-                            ...initializedValue,
-                            value: {
-                                ...initializedValue.value,
-                                to: val ? parseInt(val, 10) : null,
-                            },
-                        });
-                    }, name: props.filter.name }))));
-    },
-    listItem: (props) => {
-        if (!props.value.value) {
-            return null;
-        }
-        const { from, to } = props.value.value;
-        const formatInterval = [from ? "od " + from : "", to ? "do " + to : ""];
-        return from || to ? (react_1.default.createElement(chip_1.Chip, { onClose: () => props.onFilter({ ...props.value, value: undefined }) },
-            props.filter.label,
-            " ",
-            formatInterval.filter((i) => !!i).join(" "))) : null;
-    },
-};
-exports.default = IntervalFilterHandler;

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

@@ -1,3 +0,0 @@
-import { FilterHandler } from "./types";
-declare const SelectFilterHandler: FilterHandler;
-export default SelectFilterHandler;

package/filter-handler/text-filter.d.ts

@@ -1,3 +0,0 @@
-import { FilterHandler } from "./types";
-declare const TextFilterHandler: FilterHandler;
-export default TextFilterHandler;