@uxf/data-grid 11.74.0 → 11.74.1

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

package/_components/drawer.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+interface DrawerProps {
+    title?: ReactNode;
+    onClose: () => void;
+    children?: ReactNode;
+}
+export declare function Drawer(props: DrawerProps): React.JSX.Element | null;
+export {};

package/_components/drawer.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 });
+exports.Drawer = Drawer;
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const dialog_1 = require("@uxf/ui/dialog");
+const modal_header_1 = require("@uxf/ui/modal-header");
+const react_1 = __importDefault(require("react"));
+function Drawer(props) {
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    if (!isMounted) {
+        return null;
+    }
+    return (react_1.default.createElement(dialog_1.DialogPanel, { className: "uxf-dg-dialog-panel" },
+        react_1.default.createElement(modal_header_1.ModalHeader, { onClose: props.onClose, title: props.title }),
+        react_1.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children)));
+}

package/_store/reducer.d.ts

@@ -0,0 +1,8 @@
+import { Nullish } from "@uxf/core/types";
+import { Reducer } from "react";
+import { Request } from "../types/api";
+import { BaseGridType, Schema } from "../types/schema";
+import { DataGridState, DataGridUserConfig } from "../types/state";
+import { Action } from "../use-data-grid-control/action";
+export declare function getInitialState<GridType extends BaseGridType>(schema: Schema<GridType>, init?: Request | string | Nullish, initialUserConfig?: DataGridUserConfig<GridType> | Nullish): DataGridState<GridType>;
+export declare const reducer: Reducer<DataGridState<any>, Action>;

package/_store/reducer.js

@@ -0,0 +1,209 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = void 0;
+exports.getInitialState = getInitialState;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const empty_object_1 = require("@uxf/core/constants/empty-object");
+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;
+    const initialState = (0, is_nil_1.isNil)(init) ? {} : typeof init === "string" ? ((_a = (0, utils_1.decodeFilter)(init)) !== null && _a !== void 0 ? _a : {}) : init;
+    const initialTabName = (_e = (_b = initialState.tab) !== null && _b !== void 0 ? _b : (_d = (_c = schema.tabs) === null || _c === void 0 ? void 0 : _c.at(0)) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : null;
+    const initialTabSort = initialTabName !== null ? (_g = (_f = schema.tabs) === null || _f === void 0 ? void 0 : _f.find((t) => t.name === initialTabName)) === null || _g === void 0 ? void 0 : _g.s : null;
+    return {
+        request: {
+            f: (_h = initialState.f) !== null && _h !== void 0 ? _h : [],
+            s: (_k = (_j = initialState.s) !== null && _j !== void 0 ? _j : initialTabSort) !== null && _k !== void 0 ? _k : schema.s,
+            page: (_l = initialState.page) !== null && _l !== void 0 ? _l : 0,
+            perPage: (_o = (_m = initialState.perPage) !== null && _m !== void 0 ? _m : initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _o !== void 0 ? _o : schema.perPage,
+            tab: initialTabName,
+            search: (_p = initialState.search) !== null && _p !== void 0 ? _p : "",
+        },
+        userConfig: initialUserConfig !== null && initialUserConfig !== void 0 ? initialUserConfig : {},
+        tabRequests: {},
+    };
+}
+// eslint-disable-next-line complexity
+const reducer = (state, action) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    switch (action.type) {
+        case "CHANGE_PAGE":
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    page: action.page,
+                },
+            };
+        case "CHANGE_PER_PAGE":
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    perPage: action.perPage,
+                    page: 0,
+                },
+                userConfig: {
+                    ...state.userConfig,
+                    perPage: action.perPage,
+                },
+            };
+        case "FILTER":
+            // eslint-disable-next-line no-case-declarations
+            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.filter((filter) => filter.name !== action.name),
+                },
+            };
+        case "FILTER_CLEAR_ALL":
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    page: 0,
+                    f: [],
+                },
+            };
+        case "SORT":
+            if (((_a = state.request.s) === null || _a === void 0 ? void 0 : _a.name) === action.columnName) {
+                return (0, deepmerge_1.default)(state, {
+                    request: {
+                        s: {
+                            dir: ((_b = state.request.s) === null || _b === void 0 ? void 0 : _b.dir) === "asc" ? "desc" : "asc",
+                        },
+                    },
+                });
+            }
+            return (0, deepmerge_1.default)(state, {
+                request: {
+                    s: { name: action.columnName, dir: (_c = action.direction) !== null && _c !== void 0 ? _c : "asc" },
+                },
+            });
+        case "SORT_CLEAR":
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    s: null,
+                },
+            };
+        case "FULLTEXT":
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    search: action.search,
+                    page: 0,
+                },
+            };
+        case "CHANGE_TAB": {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            const tabHistory = (_d = state.tabRequests[action.tab.name]) !== null && _d !== void 0 ? _d : empty_object_1.EMPTY_OBJECT;
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    page: (_e = tabHistory.page) !== null && _e !== void 0 ? _e : 0,
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    perPage: (_f = tabHistory.perPage) !== null && _f !== void 0 ? _f : state.request.perPage,
+                    tab: action.tab.name,
+                    // when sharedFiltersAndSearchAndSort, f, s and search is in common state.request, i.e. same like
+                    //...(action.filterBehavior === "sharedFiltersAndSearchAndSort" && {}),
+                    // sort is handled separately for each tab
+                    ...(action.filterBehavior === "sharedFiltersAndSearch" && {
+                        s: (_h = (_g = tabHistory.s) !== null && _g !== void 0 ? _g : action.tab.s) !== null && _h !== void 0 ? _h : state.request.s,
+                    }),
+                    // filter, search and sort are all handled separately for each tab
+                    ...(action.filterBehavior === "filtersPerTab" && {
+                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                        f: (_j = tabHistory.f) !== null && _j !== void 0 ? _j : empty_array_1.EMPTY_ARRAY,
+                        s: (_l = (_k = tabHistory.s) !== null && _k !== void 0 ? _k : action.tab.s) !== null && _l !== void 0 ? _l : state.request.s,
+                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                        search: (_m = tabHistory.search) !== null && _m !== void 0 ? _m : "",
+                    }),
+                },
+                tabRequests: {
+                    ...state.tabRequests,
+                    [(_o = state.request.tab) !== null && _o !== void 0 ? _o : "__DEFAULT_TAB__"]: state.request,
+                },
+            };
+        }
+        case "SET_SELECTED_ROWS":
+            return {
+                ...state,
+                selectedRows: action.rows,
+            };
+        case "HIDE_COLUMN":
+            return {
+                ...state,
+                userConfig: {
+                    ...state.userConfig,
+                    columns: {
+                        ...state.userConfig.columns,
+                        [action.name]: {
+                            ...(_p = state.userConfig.columns) === null || _p === void 0 ? void 0 : _p[action.name],
+                            isHidden: true,
+                        },
+                    },
+                },
+            };
+        case "SHOW_COLUMN":
+            return {
+                ...state,
+                userConfig: {
+                    ...state.userConfig,
+                    columns: {
+                        ...state.userConfig.columns,
+                        [action.name]: {
+                            ...(_q = state.userConfig.columns) === null || _q === void 0 ? void 0 : _q[action.name],
+                            isHidden: false,
+                        },
+                    },
+                },
+            };
+        case "UPDATE_USER_CONFIG":
+            return {
+                ...state,
+                userConfig: (0, deepmerge_1.default)(state.userConfig, action.userConfig),
+            };
+        case "REINITIALIZE_USER_CONFIG":
+            return {
+                ...state,
+                request: {
+                    ...state.request,
+                    perPage: (_r = action.userConfig.perPage) !== null && _r !== void 0 ? _r : state.request.perPage,
+                },
+                userConfig: action.userConfig,
+            };
+        default:
+            // eslint-disable-next-line no-console
+            console.warn("Unknown datagrid action.", action);
+            return state;
+    }
+};
+exports.reducer = reducer;

package/_story-utils/data.d.ts

@@ -0,0 +1,34 @@
+import type { Money } from "@uxf/localize";
+import type { ChipColor } from "@uxf/ui/chip";
+interface Row {
+    id: number;
+    text: string | null | undefined;
+    bool: boolean | null | undefined;
+    tel: string | null | undefined;
+    mail: string | null | undefined;
+    link: string | null | undefined;
+    day: string | null | undefined;
+    dayAndTime: string | null | undefined;
+    uuid: string | null | undefined;
+    chip: {
+        id: number;
+        label: string;
+        color?: ChipColor | null;
+    } | null | undefined;
+    chips: {
+        id: number;
+        label: string;
+        color?: ChipColor | null;
+    }[] | null | undefined;
+    money: Money | null | undefined;
+    toOne: {
+        id: number;
+        label: string;
+    } | null | undefined;
+    toMany: {
+        id: number;
+        label: string;
+    }[] | null | undefined;
+}
+export declare const data: Row[];
+export {};

package/_story-utils/data.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.data = void 0;
+exports.data = [
+    {
+        id: 1,
+        text: "Red",
+        bool: undefined,
+        tel: null,
+        mail: "dev@uxf.cz",
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: null,
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+    {
+        id: 2,
+        text: "Blue",
+        bool: null,
+        tel: undefined,
+        mail: "dev@uxf.cz",
+        link: undefined,
+        day: "2023-01-05",
+        dayAndTime: null,
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+    {
+        id: 3,
+        text: "Green",
+        bool: true,
+        tel: "777888999",
+        mail: undefined,
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: undefined,
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: null,
+        chips: [{ id: 2, label: "Chip 2", color: "blue" }],
+        money: null,
+        toOne: null,
+        toMany: [{ id: 2, label: "ToMany 2" }],
+    },
+    {
+        id: 4,
+        text: "Gray",
+        bool: false,
+        tel: "555777888",
+        mail: "dev@uxf.cz",
+        link: "https://www.uxf.cz",
+        day: "2023-01-05",
+        dayAndTime: undefined,
+        uuid: null,
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: null,
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: null,
+    },
+    {
+        id: 5,
+        text: "Pink",
+        bool: false,
+        tel: "45654412",
+        mail: undefined,
+        link: undefined,
+        day: "2023-01-05",
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [],
+    },
+    {
+        id: 6,
+        text: "Yellow",
+        bool: false,
+        tel: null,
+        mail: "root@uxf.cz",
+        link: "https://www.uxf.cz",
+        day: undefined,
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+    {
+        id: 7,
+        text: "Black",
+        bool: true,
+        tel: null,
+        mail: "dev@uxf.cz",
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+    {
+        id: 8,
+        text: "White",
+        bool: false,
+        tel: undefined,
+        mail: null,
+        link: "https://www.uxf.cz",
+        day: undefined,
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+    {
+        id: 9,
+        text: "Liberty",
+        bool: false,
+        tel: "999888777",
+        mail: "dev@uxf.cz",
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+    {
+        id: 10,
+        text: "Blue",
+        bool: false,
+        tel: "777888999",
+        mail: "root@uxf.cz",
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+    {
+        id: 11,
+        text: "Purple",
+        bool: false,
+        tel: "777888999",
+        mail: null,
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2000-12-31T01:00:00.000-07:30",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
+    },
+];

package/_story-utils/grid-type.d.ts

@@ -0,0 +1,32 @@
+export type GridType = {
+    columns: {
+        id: "id";
+        bool: "boolean";
+        chip: "chip";
+        chips: "chips";
+        day: "date";
+        dayAndTime: "datetime";
+        integer: "integer";
+        link: "url";
+        mail: "email";
+        money: "money";
+        tel: "phone";
+        text: "string";
+        toMany: "toMany";
+        toOne: "toOne";
+        uuid: "uuid";
+        hidden: "hidden";
+    };
+    filters: {
+        text: "text";
+        bool: "boolean";
+        date: "date";
+        ival: "interval";
+        tel: "string";
+        mail: "string";
+        link: "string";
+        sele: "select";
+        seleBool: "select";
+        multiSelect: "multiSelect";
+    };
+};

package/_story-utils/grid-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/_story-utils/json-renderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface JsonRenderer {
+    className?: string;
+    value: any;
+}
+export declare function JsonRenderer(props: JsonRenderer): React.JSX.Element | null;
+export {};

package/_story-utils/json-renderer.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonRenderer = JsonRenderer;
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const react_1 = __importDefault(require("react"));
+function JsonRenderer(props) {
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    return isMounted ? (react_1.default.createElement("pre", { className: "mt-10 bg-slate-100 p-2 text-xs dark:bg-slate-800 dark:text-white" }, JSON.stringify(props.value, null, "    "))) : null;
+}

package/_story-utils/loader.d.ts

@@ -0,0 +1,2 @@
+import { Loader } from "../types";
+export declare const loader: Loader;

package/_story-utils/loader.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loader = void 0;
+const data_1 = require("./data");
+const loader = async (_, request) => {
+    const { page = 1, perPage = 10, tab, s, f } = request;
+    // eslint-disable-next-line no-console
+    console.log("filter", f === null || f === void 0 ? void 0 : f.length);
+    const filteredData = data_1.data
+        .filter((item) => tab !== "only-odd-ids" || item.id % 2 === 0)
+        .filter((item) => { var _a; return (request.search ? (_a = item.text) === null || _a === void 0 ? void 0 : _a.match(new RegExp(request.search, "i")) : true); })
+        .sort((a, b) => {
+        if (!s) {
+            return 1;
+        }
+        const first = a[s.name];
+        const second = b[s.name];
+        if (typeof first === "number") {
+            return s.dir === "asc" ? first - second : second - first;
+        }
+        return s.dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
+    });
+    // eslint-disable-next-line no-console
+    console.log("loader", request);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return {
+        count: filteredData.length,
+        totalCount: data_1.data.length,
+        tabCounts: { all: 20, "only-odd-ids": 10 },
+        result: filteredData.slice(page * perPage, page * perPage + perPage),
+    };
+};
+exports.loader = loader;

package/_story-utils/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema } from "../types";
+import { GridType } from "./grid-type";
+export declare const schema: Schema<GridType>;