@headless-adminapp/app 0.0.8-0.0.9-alpha.1.0

package/dist/datagrid/DataGridProvider/DataResolver.js

@@ -0,0 +1,208 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataResolver = DataResolver;
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const useDebouncedValue_1 = require("../../hooks/useDebouncedValue");
+const useMetadata_1 = require("../../metadata/hooks/useMetadata");
+const context_1 = require("../../mutable/context");
+const transport_1 = require("../../transport");
+const context_2 = require("../context");
+const hooks_1 = require("../hooks");
+const utils_1 = require("./utils");
+const ROWS_PER_PAGE = 100;
+const MAX_RECORDS = 10000;
+function mergeConditions(schema, filter, extraFilter, columnFilters, getSchema) {
+    const conditions = [];
+    if (filter) {
+        conditions.push(filter);
+    }
+    if (extraFilter) {
+        conditions.push(extraFilter);
+    }
+    if (columnFilters) {
+        const transformedColumnFilters = (0, utils_1.transformColumnFilter)(columnFilters, schema, getSchema);
+        if (transformedColumnFilters) {
+            conditions.push({
+                type: 'and',
+                conditions: Object.entries(transformedColumnFilters).map(([field, condition]) => {
+                    return {
+                        field,
+                        operator: condition.operator,
+                        value: condition.value,
+                        extendedKey: condition.extendedKey,
+                    };
+                }),
+            });
+        }
+    }
+    if (conditions.length === 0) {
+        return null;
+    }
+    if (conditions.length === 1) {
+        return conditions[0];
+    }
+    return {
+        type: 'and',
+        conditions,
+    };
+}
+function DataResolver() {
+    var _a;
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const view = (0, hooks_1.useSelectedView)();
+    const dataService = (0, transport_1.useDataService)();
+    const [sorting] = (0, hooks_1.useGridSorting)();
+    const [searchText] = (0, hooks_1.useSearchText)();
+    const extraFilter = (0, hooks_1.useGridExtraFilter)();
+    const [columnFilters] = (0, hooks_1.useGridColumnFilter)();
+    const gridColumns = (0, hooks_1.useGridColumns)();
+    const maxRecords = (_a = (0, hooks_1.useMaxRecords)()) !== null && _a !== void 0 ? _a : MAX_RECORDS;
+    const { getSchema } = (0, useMetadata_1.useMetadata)();
+    const setState = (0, context_1.useContextSetValue)(context_2.GridContext);
+    const [search] = (0, useDebouncedValue_1.useDebouncedValue)(searchText, 500);
+    const columns = (0, react_1.useMemo)(() => Array.from(new Set([
+        ...gridColumns.filter((x) => !x.expandedKey).map((x) => x.name),
+        schema.primaryAttribute,
+    ])), [gridColumns, schema.primaryAttribute]);
+    const expand = (0, react_1.useMemo)(() => gridColumns
+        .filter((x) => x.expandedKey)
+        .reduce((acc, x) => {
+        if (!acc[x.name]) {
+            acc[x.name] = [];
+        }
+        if (!acc[x.name].includes(x.expandedKey)) {
+            acc[x.name].push(x.expandedKey);
+        }
+        return acc;
+    }, {}), [gridColumns]);
+    const queryKey = (0, react_1.useMemo)(() => [
+        'data',
+        'retriveRecords',
+        schema.logicalName,
+        search,
+        view.experience.filter,
+        extraFilter,
+        sorting,
+        columnFilters,
+        columns,
+        expand,
+        maxRecords,
+    ], [
+        columnFilters,
+        columns,
+        expand,
+        extraFilter,
+        schema.logicalName,
+        search,
+        sorting,
+        view.experience.filter,
+        maxRecords,
+    ]);
+    const queryClient = (0, react_query_1.useQueryClient)();
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // Clear all pages except the first one when the component is unmounted
+            queryClient.setQueryData(queryKey, (oldData) => {
+                if (!oldData) {
+                    return oldData;
+                }
+                if (!oldData.pageParams.length || !oldData.pages.length) {
+                    return oldData;
+                }
+                return {
+                    pageParams: [oldData.pageParams[0]],
+                    pages: [oldData.pages[0]],
+                };
+            });
+        };
+    }, [queryClient, queryKey]);
+    const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = (0, react_query_1.useInfiniteQuery)({
+        queryKey: queryKey,
+        queryFn: (queryContext) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const params = (_a = queryContext.pageParam) !== null && _a !== void 0 ? _a : {
+                pageIndex: 0,
+            };
+            const skip = params.pageIndex * ROWS_PER_PAGE;
+            const limit = Math.min(ROWS_PER_PAGE, Math.max(0, maxRecords - skip));
+            if (limit <= 0) {
+                return {
+                    params: params,
+                    data: {
+                        logicalName: schema.logicalName,
+                        count: 0,
+                        records: [],
+                    },
+                };
+            }
+            const result = yield dataService.retriveRecords({
+                logicalName: schema.logicalName,
+                search,
+                columns: columns,
+                expand,
+                filter: mergeConditions(schema, view.experience.filter, extraFilter, columnFilters, getSchema),
+                skip,
+                limit,
+                sort: sorting,
+            });
+            return {
+                params: params,
+                data: result,
+            };
+        }),
+        getNextPageParam: (lastPage) => {
+            if (lastPage.data.count <
+                ROWS_PER_PAGE * (lastPage.params.pageIndex + 1)) {
+                return undefined;
+            }
+            return {
+                pageIndex: lastPage.params.pageIndex + 1,
+            };
+        },
+        initialPageParam: {
+            pageIndex: 0,
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        setState({
+            fetchNextPage: fetchNextPage,
+        });
+    }, [fetchNextPage, setState]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        if (!(data === null || data === void 0 ? void 0 : data.pages.length)) {
+            setState({
+                data: null,
+            });
+            return;
+        }
+        const finalData = {
+            logicalName: (_a = data === null || data === void 0 ? void 0 : data.pages) === null || _a === void 0 ? void 0 : _a[0].data.logicalName,
+            count: (_c = (_b = data === null || data === void 0 ? void 0 : data.pages) === null || _b === void 0 ? void 0 : _b[0].data.count) !== null && _c !== void 0 ? _c : 0,
+            records: (_d = data === null || data === void 0 ? void 0 : data.pages.map((x) => x.data.records).flat()) !== null && _d !== void 0 ? _d : [],
+        };
+        setState({
+            data: finalData,
+        });
+    }, [data, setState]);
+    (0, react_1.useEffect)(() => {
+        setState({
+            dataState: {
+                isFetching,
+                hasNextPage,
+                isFetchingNextPage,
+            },
+        });
+    }, [hasNextPage, isFetching, isFetchingNextPage, setState]);
+    return null;
+}

package/dist/datagrid/DataGridProvider/index.d.ts

@@ -0,0 +1,18 @@
+import { LocalizedDataLookup } from '@headless-adminapp/core/attributes';
+import { CommandItemExperience } from '@headless-adminapp/core/experience/command';
+import { EntityMainGridCommandContext, EntitySubGridCommandContext, View } from '@headless-adminapp/core/experience/view';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Filter } from '@headless-adminapp/core/transport';
+import { PropsWithChildren } from 'react';
+export interface DataGridProviderProps<S extends SchemaAttributes = SchemaAttributes, CommandContext extends EntityMainGridCommandContext | EntitySubGridCommandContext = EntityMainGridCommandContext> {
+    schema: Schema<S>;
+    views: LocalizedDataLookup[];
+    view: View<S>;
+    extraFilter?: Filter;
+    commands: CommandItemExperience<CommandContext>[][];
+    onChangeView: (viewId: string) => void;
+    isSubGrid?: boolean;
+    allowViewSelection?: boolean;
+    maxRecords?: number;
+}
+export declare function DataGridProvider<S extends SchemaAttributes = SchemaAttributes, CommandContext extends EntityMainGridCommandContext | EntitySubGridCommandContext = EntityMainGridCommandContext>(props: PropsWithChildren<DataGridProviderProps<S, CommandContext>>): import("react/jsx-runtime").JSX.Element;

package/dist/datagrid/DataGridProvider/index.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridProvider = DataGridProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useLocale_1 = require("../../locale/useLocale");
+const useMetadata_1 = require("../../metadata/hooks/useMetadata");
+const context_1 = require("../../mutable/context");
+const context_2 = require("../context");
+const DataResolver_1 = require("./DataResolver");
+const transformViewColumns_1 = require("./transformViewColumns");
+function DataGridProvider(props) {
+    var _a, _b, _c;
+    const onChangeViewRef = (0, react_1.useRef)(props.onChangeView);
+    onChangeViewRef.current = props.onChangeView;
+    const { schemaStore } = (0, useMetadata_1.useMetadata)();
+    const [{ language }] = (0, useLocale_1.useLocale)();
+    const handleViewChange = (0, react_1.useCallback)((viewId) => {
+        onChangeViewRef.current(viewId);
+    }, []);
+    const contextValue = (0, context_1.useCreateContextStore)({
+        schema: props.schema,
+        columnFilters: {},
+        data: {
+            logicalName: props.schema.logicalName,
+            records: [],
+            count: 0,
+        },
+        searchText: '',
+        selectedIds: [],
+        sorting: (_a = props.view.experience.defaultSorting) !== null && _a !== void 0 ? _a : [],
+        view: props.view,
+        commands: props.commands,
+        columns: (0, transformViewColumns_1.transformViewColumns)(props.view.logicalName, props.view.experience.grid.columns, schemaStore, language),
+        viewLookup: props.views,
+        extraFilter: props.extraFilter,
+        dataState: {
+            hasNextPage: false,
+            isFetching: false,
+            isFetchingNextPage: false,
+        },
+        fetchNextPage: () => { },
+        onChangeView: handleViewChange,
+        isSubGrid: (_b = props.isSubGrid) !== null && _b !== void 0 ? _b : false,
+        allowViewSelection: (_c = props.allowViewSelection) !== null && _c !== void 0 ? _c : false,
+        maxRecords: props.maxRecords,
+    });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        contextValue.setValue({
+            view: props.view,
+            searchText: '',
+            selectedIds: [],
+            sorting: (_a = props.view.experience.defaultSorting) !== null && _a !== void 0 ? _a : [],
+            columns: (0, transformViewColumns_1.transformViewColumns)(props.view.logicalName, props.view.experience.grid.columns, schemaStore, language),
+            maxRecords: props.maxRecords,
+        });
+    }, [props.view, props.maxRecords, contextValue, schemaStore, language]);
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            schema: props.schema,
+            searchText: '',
+            selectedIds: [],
+        });
+    }, [props.schema, contextValue]);
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            extraFilter: props.extraFilter,
+        });
+    }, [props.extraFilter, contextValue]);
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            commands: props.commands,
+        });
+    }, [props.commands, contextValue]);
+    return ((0, jsx_runtime_1.jsxs)(context_2.GridContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)(DataResolver_1.DataResolver, {}), props.children] }));
+}

package/dist/datagrid/DataGridProvider/transformViewColumns.d.ts

@@ -0,0 +1,5 @@
+import { ViewColumn } from '@headless-adminapp/core/experience/view';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { ISchemaStore } from '@headless-adminapp/core/store';
+import { TransformedViewColumn } from '../context';
+export declare function transformViewColumns<S extends SchemaAttributes>(logicalName: string, columns: ViewColumn<S>[], schemaStore: ISchemaStore, language: string): TransformedViewColumn<S>[];

package/dist/datagrid/DataGridProvider/transformViewColumns.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformViewColumns = transformViewColumns;
+const CommandBuilder_1 = require("../../builders/CommandBuilder");
+function transformViewColumns(logicalName, columns, schemaStore, language) {
+    const schema = schemaStore.getSchema(logicalName);
+    return columns
+        .map((column) => {
+        const attribute = schema.attributes[column.name];
+        if (!attribute) {
+            return null;
+        }
+        const label = (0, CommandBuilder_1.localizedLabel)(language, attribute);
+        if (column.expandedKey) {
+            if (attribute.type !== 'lookup') {
+                return null;
+            }
+            const lookupSchema = schemaStore.getSchema(attribute.entity);
+            const lookupAttribute = lookupSchema.attributes[column.expandedKey];
+            if (!lookupAttribute) {
+                return null;
+            }
+            const lookupLabel = (0, CommandBuilder_1.localizedLabel)(language, lookupAttribute);
+            return Object.assign(Object.assign({}, column), { id: `${column.name}.${column.expandedKey}`, label: `${lookupLabel} (${label})` });
+        }
+        return Object.assign(Object.assign({}, column), { id: column.name, label: label });
+    })
+        .filter(Boolean);
+}

package/dist/datagrid/DataGridProvider/utils.d.ts

@@ -0,0 +1,3 @@
+import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import { Schema } from '@headless-adminapp/core/schema';
+export declare function transformColumnFilter(filter: Partial<Record<string, ColumnCondition>>, schema: Schema, getSchema: (logicalName: string) => Schema): Record<string, ColumnCondition> | null;

package/dist/datagrid/DataGridProvider/utils.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformColumnFilter = transformColumnFilter;
+const dayjs_1 = __importDefault(require("dayjs"));
+function transformColumnFilter(filter, schema, getSchema) {
+    const transformedResult = Object.entries(filter).reduce((acc, [id, value]) => {
+        const [key, extendedKey] = id.split('.');
+        let attribute = schema.attributes[key];
+        if (!attribute) {
+            return acc;
+        }
+        if (extendedKey) {
+            if (attribute.type !== 'lookup') {
+                throw new Error(`Invalid column filter key: ${id}. Key ${key} is not a lookup column.`);
+            }
+            const lookupSchema = getSchema(attribute.entity);
+            attribute = lookupSchema.attributes[extendedKey];
+        }
+        if (!attribute) {
+            return acc;
+        }
+        if (value) {
+            let transformedValue = undefined;
+            switch (value.operator) {
+                case 'eq':
+                case 'ne':
+                case 'begins-with':
+                case 'not-begin-with':
+                case 'like':
+                case 'not-like':
+                case 'ends-with':
+                case 'not-end-with':
+                case 'gt':
+                case 'gte':
+                case 'lt':
+                case 'lte':
+                case 'last-x-days':
+                case 'last-x-hours':
+                    transformedValue = value.value[0];
+                    break;
+                case 'on':
+                case 'on-or-after':
+                case 'on-or-before':
+                    transformedValue = (0, dayjs_1.default)(value.value[0]).format('YYYY-MM-DD');
+                    break;
+                case 'in':
+                case 'not-in':
+                    if (attribute.type === 'lookup') {
+                        transformedValue = value.value[0].map((x) => x.id);
+                    }
+                    else {
+                        transformedValue = value.value[0];
+                    }
+                    break;
+                case 'between':
+                    transformedValue = value.value;
+                    break;
+            }
+            acc[key] = {
+                operator: value.operator,
+                value: transformedValue,
+                extendedKey,
+            };
+        }
+        return acc;
+    }, {});
+    if (Object.keys(transformedResult).length === 0) {
+        return null;
+    }
+    return transformedResult;
+}

package/dist/datagrid/column-filter/constants.d.ts

@@ -0,0 +1,4 @@
+import type { AttributeType } from '@headless-adminapp/core/attributes';
+import { OperatorOptionConfig, OperatorStrings } from './types';
+export declare const defaultOperatorStrings: OperatorStrings;
+export declare const operatorOptions: Record<AttributeType, OperatorOptionConfig[]>;