@headless-adminapp/app 1.1.10 → 1.2.0

package/board/BoardColumnDataResolver.js

@@ -2,24 +2,56 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataResolver = DataResolver;
 const react_1 = require("react");
+const auth_1 = require("../auth");
 const hooks_1 = require("../hooks");
 const mutable_1 = require("../mutable");
 const useRetriveRecords_1 = require("../transport/hooks/useRetriveRecords");
 const context_1 = require("./context");
 const useBoardColumnConfig_1 = require("./hooks/useBoardColumnConfig");
 const useBoardConfig_1 = require("./hooks/useBoardConfig");
+const useQuickFilter_1 = require("./hooks/useQuickFilter");
 const useSearchText_1 = require("./hooks/useSearchText");
 const MAX_RECORDS = 10000;
 function DataResolver() {
     const { schema, sorting, projection: { columns, expand }, } = (0, useBoardConfig_1.useBoardConfig)();
     const [searchText] = (0, useSearchText_1.useSearchText)();
+    const [quickFilter, quickFilterValues] = (0, useQuickFilter_1.useQuickFilter)();
+    const authSession = (0, auth_1.useAuthSession)();
     const { filter, maxRecords = MAX_RECORDS } = (0, useBoardColumnConfig_1.useBoardColumnConfig)();
     const setState = (0, mutable_1.useContextSetValue)(context_1.BoardColumnContext);
     const [search] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const quickFilterResults = (0, react_1.useMemo)(() => {
+        if (!quickFilter) {
+            return null;
+        }
+        if (!quickFilterValues) {
+            return null;
+        }
+        return quickFilter.resolver(quickFilterValues, authSession);
+    }, [authSession, quickFilter, quickFilterValues]);
+    const mergedFilter = (0, react_1.useMemo)(() => {
+        const filters = [];
+        if (filter) {
+            filters.push(filter);
+        }
+        if (quickFilterResults) {
+            filters.push(quickFilterResults);
+        }
+        if (filters.length === 0) {
+            return null;
+        }
+        if (filters.length === 1) {
+            return filters[0];
+        }
+        return {
+            type: 'and',
+            filters,
+        };
+    }, [filter, quickFilterResults]);
     const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage, queryKey, } = (0, useRetriveRecords_1.useRetriveRecords)({
         columns,
         expand,
-        filter,
+        filter: mergedFilter,
         maxRecords,
         schema,
         search,

package/board/context.d.ts

@@ -4,6 +4,7 @@ import { BoardColumnConfig, BoardConfig } from './types';
 export interface BoardContextState<S extends SchemaAttributes = SchemaAttributes> {
     config: BoardConfig<S>;
     searchText: string;
+    quickFilterValues: Record<string, unknown>;
 }
 export interface BoardColumnContextState<S extends SchemaAttributes = SchemaAttributes> {
     config: BoardColumnConfig;

package/board/hooks/useQuickFilter.d.ts

@@ -0,0 +1 @@
+export declare function useQuickFilter(): readonly [import("@headless-adminapp/core/experience/view/QuickFilter").QuickFilter<import("@headless-adminapp/core/schema").SchemaAttributes> | undefined, Record<string, unknown>, (key: string, value: unknown) => void];

package/board/hooks/useQuickFilter.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuickFilter = useQuickFilter;
+const react_1 = require("react");
+const context_1 = require("../../mutable/context");
+const context_2 = require("../context");
+function useQuickFilter() {
+    const quickFilter = (0, context_1.useContextSelector)(context_2.BoardContext, (state) => state.config.quickFilter);
+    const values = (0, context_1.useContextSelector)(context_2.BoardContext, (state) => state.quickFilterValues);
+    const _setValue = (0, context_1.useContextSetValue)(context_2.BoardContext);
+    const setValue = (0, react_1.useCallback)((key, value) => {
+        _setValue((state) => ({
+            quickFilterValues: {
+                ...state.quickFilterValues,
+                [key]: value,
+            },
+        }));
+    }, [_setValue]);
+    return [quickFilter, values, setValue];
+}

package/board/types.d.ts

@@ -1,5 +1,6 @@
 import { CommandContextBase } from '@headless-adminapp/core/experience/command';
 import { SortingState, View } from '@headless-adminapp/core/experience/view';
+import { QuickFilter } from '@headless-adminapp/core/experience/view/QuickFilter';
 import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { Filter } from '@headless-adminapp/core/transport';
 import { FC } from 'react';
@@ -48,4 +49,5 @@ export interface BoardConfig<S extends SchemaAttributes = SchemaAttributes> {
     emptyMessage?: string;
     minColumnWidth?: number;
     maxColumnWidth?: number;
+    quickFilter?: QuickFilter;
 }

package/builders/CommandBuilder/DefaultCommandBuilder.js

@@ -34,6 +34,11 @@ var DefaultCommandBuilder;
                     text: strings.new,
                     localizedTexts: extractLocalizedStrings(localizedSrings, (x) => x.new),
                 }),
+                ViewCommandBuilder_1.ViewCommandBuilder.createNewRecordForVirtualCommand({
+                    Icon: icons.New,
+                    text: strings.new,
+                    localizedTexts: extractLocalizedStrings(localizedSrings, (x) => x.new),
+                }),
                 ViewCommandBuilder_1.ViewCommandBuilder.createEditRecordCommand({
                     Icon: icons.Edit,
                     text: strings.edit,

package/builders/CommandBuilder/ViewCommandBuilder.d.ts

@@ -15,6 +15,11 @@ export declare namespace ViewCommandBuilder {
         text: string;
         localizedTexts?: Record<string, string>;
     }): EntityMainGridCommandItemExperience;
+    function createNewRecordForVirtualCommand({ Icon, text, localizedTexts, }: {
+        Icon: Icon;
+        text: string;
+        localizedTexts?: Record<string, string>;
+    }): EntityMainGridCommandItemExperience;
     function createEditRecordCommand({ Icon, text, localizedTexts, }: {
         Icon: Icon;
         text: string;

package/builders/CommandBuilder/ViewCommandBuilder.js

@@ -86,6 +86,54 @@ var ViewCommandBuilder;
         };
     }
     ViewCommandBuilder.createNewRecordCommand = createNewRecordCommand;
+    function createNewRecordForVirtualCommand({ Icon, text, localizedTexts, }) {
+        return {
+            type: 'button',
+            Icon,
+            text,
+            localizedText: localizedTexts,
+            onClick: async (context) => {
+                if (!context.primaryControl.schema.baseSchemaLogicalNames?.length) {
+                    return;
+                }
+                const data = await context.utility.openPromptDialog({
+                    title: 'Select type',
+                    attributes: {
+                        type: {
+                            type: 'choice',
+                            label: 'Select type',
+                            string: true,
+                            required: true,
+                            options: context.primaryControl.schema.baseSchemaLogicalNames?.map((x) => {
+                                const schema = context.stores.schemaStore.getSchema(x);
+                                return {
+                                    value: x,
+                                    label: schema.label,
+                                };
+                            }),
+                        },
+                    },
+                    defaultValues: {},
+                });
+                if (!data) {
+                    return;
+                }
+                context.navigation.openForm({
+                    logicalName: data.type,
+                });
+            },
+            hidden: (context) => {
+                if (EnabledRules.IsPhysicalSchema(context)) {
+                    return true;
+                }
+                if (!context.primaryControl.schema.baseSchemaLogicalNames?.length) {
+                    return true;
+                }
+                return false;
+            },
+        };
+    }
+    ViewCommandBuilder.createNewRecordForVirtualCommand = createNewRecordForVirtualCommand;
     function createEditRecordCommand({ Icon, text, localizedTexts, }) {
         return {
             type: 'button',
@@ -94,11 +142,35 @@ var ViewCommandBuilder;
             localizedText: localizedTexts,
             isContextMenu: true,
             onClick: (context) => {
-                context.primaryControl.openRecord(context.primaryControl.selectedIds[0], context.primaryControl.schema.logicalName);
+                if (EnabledRules.IsPhysicalSchema(context)) {
+                    context.primaryControl.openRecord(context.primaryControl.selectedIds[0], context.primaryControl.schema.logicalName);
+                }
+                else {
+                    if (!context.primaryControl.schema.virtualLogicalNameAttribute) {
+                        return;
+                    }
+                    const logicalName = context.primaryControl.selectedRecords[0][context.primaryControl.schema.virtualLogicalNameAttribute];
+                    if (!logicalName) {
+                        return;
+                    }
+                    context.primaryControl.openRecord(context.primaryControl.selectedIds[0], logicalName);
+                }
             },
             hidden: [
                 (context) => !EnabledRules.HasSingleRecordSelected(context),
-                (context) => !EnabledRules.IsPhysicalSchema(context),
+                (context) => {
+                    if (EnabledRules.IsPhysicalSchema(context)) {
+                        return false;
+                    }
+                    if (!context.primaryControl.schema.virtualLogicalNameAttribute) {
+                        return true;
+                    }
+                    const logicalName = context.primaryControl.selectedRecords[0][context.primaryControl.schema.virtualLogicalNameAttribute];
+                    if (!logicalName) {
+                        return true;
+                    }
+                    return false;
+                },
             ],
         };
     }
@@ -115,7 +187,16 @@ var ViewCommandBuilder;
             },
             hidden: [
                 (context) => !EnabledRules.HasSingleRecordSelected(context),
-                (context) => EnabledRules.IsPhysicalSchema(context),
+                (context) => {
+                    if (EnabledRules.IsPhysicalSchema(context)) {
+                        return true;
+                    }
+                    if (context.primaryControl.schema.virtualLogicalNameAttribute ||
+                        context.primaryControl.schema.baseSchemaLogicalName) {
+                        return true;
+                    }
+                    return false;
+                },
             ],
         };
     }

package/builders/DefineViewExperience.d.ts

@@ -1,7 +1,7 @@
 import type { ViewColumn as $ViewColumn, ViewExperience as $ViewExperience } from '@headless-adminapp/core/experience/view';
 import type { SchemaAttributes } from '@headless-adminapp/core/schema';
 export declare namespace DefineViewExperience {
-    export type Experience<S extends SchemaAttributes = SchemaAttributes> = Pick<$ViewExperience<S>, 'filter' | 'defaultSorting' | 'card'> & {
+    export type Experience<S extends SchemaAttributes = SchemaAttributes> = Pick<$ViewExperience<S>, 'filter' | 'defaultSorting' | 'card' | 'quickFilter'> & {
         grid: GridView<S>;
     };
     type GridView<S extends SchemaAttributes = SchemaAttributes> = {

package/builders/SchemaExperienceBuilder.d.ts

@@ -39,7 +39,7 @@ export declare class SchemaExperienceBuilder<S extends SchemaAttributes = Schema
     private readonly defaults?;
     private readonly options?;
     constructor(schema: Schema<S>, defaults?: SchemaExperienceBuilderDefaults | undefined, options?: SchemaExperienceBuilderOptions | undefined);
-    defineViewExperience(viewExperience: Pick<DefineViewExperience.Experience<S>, 'filter' | 'defaultSorting'> & {
+    defineViewExperience(viewExperience: Pick<DefineViewExperience.Experience<S>, 'filter' | 'defaultSorting' | 'quickFilter'> & {
         grid?: DefineViewExperience.Experience<S>['grid'];
         card?: DefineViewExperience.Experience<S>['card'];
     }): ViewExperience<S>;

package/builders/utils.js

@@ -162,7 +162,8 @@ async function retriveRecords({ gridColumns, dataService, schema, search, view,
         search,
         columns: columns,
         expand,
-        filter: (0, utils_1.mergeConditions)(schema, view.experience.filter, extraFilter, columnFilters, schemaStore),
+        filter: (0, utils_1.mergeConditions)(schema, view.experience.filter, extraFilter, null, // quickFilterResults
+        columnFilters, schemaStore),
         skip,
         limit,
         sort: sorting,

package/calendar/CalendarProvider.d.ts

@@ -0,0 +1,8 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { PropsWithChildren } from 'react';
+import { CalendarConfig } from './types';
+interface CalendarProviderProps<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes> {
+    config: CalendarConfig<SA1, SA2, SA3>;
+}
+export declare function CalendarProvider<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes>(props: Readonly<PropsWithChildren<CalendarProviderProps<SA1, SA2, SA3>>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/calendar/CalendarProvider.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarProvider = CalendarProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mutable_1 = require("../mutable");
+const context_1 = require("./context");
+function CalendarProvider(props) {
+    const contextValue = (0, mutable_1.useCreateContextStore)({
+        config: props.config,
+    });
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            config: props.config,
+        });
+    }, [contextValue, props.config]);
+    return ((0, jsx_runtime_1.jsx)(context_1.CalendarContext.Provider, { value: contextValue, children: props.children }));
+}

package/calendar/hooks/useDeleteEvent.d.ts

@@ -0,0 +1 @@
+export declare function useDeleteEvent(): (id: string) => Promise<void>;

package/calendar/hooks/useDeleteEvent.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteEvent = useDeleteEvent;
+const dialog_1 = require("@headless-adminapp/app/dialog");
+const progress_indicator_1 = require("@headless-adminapp/app/progress-indicator");
+const toast_notification_1 = require("@headless-adminapp/app/toast-notification");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const useConfig_1 = require("./useConfig");
+function useDeleteEvent() {
+    const openConfirmDialog = (0, dialog_1.useOpenConfirmDialog)();
+    const openToastNotification = (0, toast_notification_1.useOpenToastNotification)();
+    const { hideProgressIndicator, showProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
+    const config = (0, useConfig_1.useConfig)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const deleteEvent = (0, react_1.useCallback)(async (id) => {
+        try {
+            if (!config.deleteEvent) {
+                throw new Error('Delete event function is not defined.');
+            }
+            const confirmResult = await openConfirmDialog({
+                title: 'Delete Event',
+                text: 'Are you sure you want to delete this event?',
+            });
+            if (!confirmResult?.confirmed) {
+                return;
+            }
+            showProgressIndicator('Deleting event...');
+            await config.deleteEvent(id);
+            await queryClient.invalidateQueries({
+                queryKey: ['calendar-events'],
+            });
+            close();
+        }
+        catch (error) {
+            openToastNotification({
+                title: 'Error',
+                text: error.message,
+                type: 'error',
+            });
+        }
+        finally {
+            hideProgressIndicator();
+        }
+    }, [
+        config,
+        hideProgressIndicator,
+        openConfirmDialog,
+        openToastNotification,
+        queryClient,
+        showProgressIndicator,
+    ]);
+    return deleteEvent;
+}

package/calendar/hooks/useOpenDetailDialog.d.ts

@@ -0,0 +1,2 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+export declare function useOpenDetailDialog<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes>(DialogComponent: React.ComponentType<any>): (values: unknown) => void;

package/calendar/hooks/useOpenDetailDialog.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpenDetailDialog = useOpenDetailDialog;
+const react_query_1 = require("@tanstack/react-query");
+const useOpenDialog_1 = require("../../dialog/hooks/useOpenDialog");
+const useOpenToastNotification_1 = require("../../toast-notification/hooks/useOpenToastNotification");
+const useConfig_1 = require("./useConfig");
+function useOpenDetailDialog(DialogComponent) {
+    const openDialog = (0, useOpenDialog_1.useOpenDialog)();
+    const openToastNotification = (0, useOpenToastNotification_1.useOpenToastNotification)();
+    const config = (0, useConfig_1.useConfig)();
+    const queryClient = (0, react_query_1.useQueryClient)();
+    function openEventDetailModel(values) {
+        const { close } = openDialog({
+            type: 'custom',
+            Component: DialogComponent,
+            props: {
+                onDismiss: () => {
+                    close();
+                },
+                config,
+                values,
+                onSubmit: async (data) => {
+                    if (!config.saveEvent) {
+                        return;
+                    }
+                    try {
+                        const { id, end, start, title, allDay, description, ...rest } = data.values;
+                        await config.saveEvent({
+                            event: {
+                                id,
+                                title,
+                                start: start ? new Date(start) : null,
+                                end: end ? new Date(end) : null,
+                                allDay: allDay ?? false,
+                                description,
+                                ...rest,
+                            },
+                            modifiedValues: data.modifiedValues,
+                        });
+                        await queryClient.invalidateQueries({
+                            queryKey: ['calendar-events'],
+                        });
+                        close();
+                    }
+                    catch (error) {
+                        openToastNotification({
+                            title: 'Error',
+                            text: error.message,
+                            type: 'error',
+                        });
+                    }
+                },
+                onCancel: () => {
+                    close();
+                },
+            },
+        });
+    }
+    return openEventDetailModel;
+}

package/calendar/types.d.ts

@@ -1,5 +1,7 @@
 import { AuthSession } from '@headless-adminapp/core/experience/auth';
+import { OpenFormOptions } from '@headless-adminapp/core/experience/command';
 import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { InternalRouteResolver, RouterInstance } from '../route/context';
 export interface CalendarEvent {
     id: string;
     title: string;
@@ -28,18 +30,35 @@ export type CalendarEventSaveFn<SA1 extends SchemaAttributes = SchemaAttributes,
 export interface CalendarConfig<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes, SA3 extends SchemaAttributes = SchemaAttributes> {
     eventsResolver: CalendarEventsResolverFn<SA3>;
     eventResolver?: CalendarEventResolverFn;
-    saveEvent: CalendarEventSaveFn<SA1, SA2>;
+    saveEvent?: CalendarEventSaveFn<SA1, SA2>;
     beforeDescriptionAttributes?: SA1;
     afterDescriptionAttributes?: SA2;
     filterAttributes?: SA3;
     defaultFilter?: InferredSchemaType<SA3>;
-    openRecord?: (id: string) => void;
-    deleteEvent: (id: string) => Promise<void>;
+    deleteEvent?: (id: string) => Promise<void>;
     title: string;
     description: string;
     eventLabel: string;
-    disableCreate?: boolean;
-    disableEdit?: boolean;
-    disableDelete?: boolean;
     disableAllDay?: boolean;
+    createOptions?: {
+        mode: 'dialog';
+    } | {
+        mode: 'custom';
+        allowQuickCreate?: boolean;
+        onClick: (defaultValues: Record<string, unknown>, options: {
+            router: RouterInstance;
+            routeResolver: InternalRouteResolver;
+            openForm: (options: OpenFormOptions) => void;
+        }) => void;
+    };
+    editOptions?: {
+        mode: 'dialog';
+    } | {
+        mode: 'custom';
+        onClick: (event: CalendarEvent, options: {
+            router: RouterInstance;
+            routeResolver: InternalRouteResolver;
+            openForm: (options: OpenFormOptions) => void;
+        }) => void;
+    };
 }

package/components/ScrollView/index.js

@@ -15,20 +15,21 @@ const ScrollView = ({ children, className, rtl, autoHide, onScroll, shadowEffect
     const [isTop, setIsTop] = (0, react_1.useState)(true);
     const [isBottom, setIsBottom] = (0, react_1.useState)(false);
     const handleScroll = (event) => {
-        const div = event.target;
-        const remainingSpace = getReaminingSpace(div);
-        const _isTop = div.scrollTop === 0;
-        const _isBottom = remainingSpace <= 0;
+        if (onScroll) {
+            onScroll(event);
+        }
+    };
+    const handleOnUpdate = (values) => {
+        const remainingSpace = values.scrollHeight - values.scrollTop - values.clientHeight;
+        const _isTop = values.scrollTop === 0;
+        const _isBottom = remainingSpace <= 10;
         if (isTop !== _isTop) {
             setIsTop(_isTop);
         }
         if (isBottom !== _isBottom) {
             setIsBottom(_isBottom);
         }
-        if (onScroll) {
-            onScroll(event);
-        }
     };
-    return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, { autoHide: autoHide, className: (0, clsx_1.default)(className, 'hdl-scrollbar', rtl && 'rtl', shadowEffect && !isTop && 'hdl-scrollbar-shadow-top', shadowEffect && !isBottom && 'hdl-scrollbar-shadow-bottom'), onScroll: handleScroll, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, { autoHide: autoHide, className: (0, clsx_1.default)(className, 'hdl-scrollbar', rtl && 'rtl', shadowEffect && !isTop && 'hdl-scrollbar-shadow-top', shadowEffect && !isBottom && 'hdl-scrollbar-shadow-bottom'), onScroll: handleScroll, onUpdate: handleOnUpdate, children: children }));
 };
 exports.ScrollView = ScrollView;

package/dataform/DataFormProvider/getRecord.d.ts

@@ -1,3 +1,12 @@
-import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { SectionEditableGridControl } from '@headless-adminapp/core/experience/form';
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { ISchemaStore } from '@headless-adminapp/core/store';
+import { IDataService } from '@headless-adminapp/core/transport';
 import { RetriveRecordFnOptions } from './types';
 export declare function getRecord<SA extends SchemaAttributes = SchemaAttributes>({ recordId, dataService, form, schema, columns, schemaStore, }: RetriveRecordFnOptions<SA>): Promise<import("@headless-adminapp/core/transport").Data<SA> | null>;
+export declare function getEditableSubgridRecords({ dataService, schemaStore, control, recordId, }: {
+    dataService: IDataService;
+    schemaStore: ISchemaStore;
+    control: SectionEditableGridControl<SchemaAttributes>;
+    recordId: string;
+}): Promise<import("@headless-adminapp/core/transport").Data<InferredSchemaType<SchemaAttributes>>[]>;

package/dataform/DataFormProvider/getRecord.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRecord = getRecord;
+exports.getEditableSubgridRecords = getEditableSubgridRecords;
 const transport_1 = require("@headless-adminapp/core/transport");
 const utils_1 = require("./utils");
 async function getRecord({ recordId, dataService, form, schema, columns, schemaStore, }) {
@@ -20,37 +21,46 @@ async function getRecord({ recordId, dataService, form, schema, columns, schemaS
     const controls = (0, utils_1.getControls)(form);
     const editableGridControls = controls.filter((control) => control.type === 'editablegrid');
     for (const control of editableGridControls) {
-        if (control.type !== 'editablegrid') {
+        if (!control.alias) {
             continue;
         }
-        const controlSchema = schemaStore.getSchema(control.logicalName);
-        const records = await dataService.retriveRecords({
-            logicalName: controlSchema.logicalName,
-            filter: {
-                type: 'and',
-                conditions: [
-                    {
-                        field: control.referenceAttribute,
-                        operator: 'eq',
-                        value: recordId,
-                    },
-                ],
-            },
-            sort: [
-                {
-                    field: controlSchema.createdAtAttribute ?? controlSchema.idAttribute,
-                    order: 'asc',
-                },
-            ],
-            limit: 5000,
-            search: '',
-            columns: [
-                controlSchema.idAttribute,
-                control.referenceAttribute,
-                ...control.attributes,
-            ],
+        const records = await getEditableSubgridRecords({
+            dataService,
+            control,
+            schemaStore,
+            recordId,
         });
-        record[control.attributeName] = records.records;
+        record[control.alias] = records;
     }
     return record;
 }
+async function getEditableSubgridRecords({ dataService, schemaStore, control, recordId, }) {
+    const controlSchema = schemaStore.getSchema(control.logicalName);
+    const result = await dataService.retriveRecords({
+        logicalName: controlSchema.logicalName,
+        filter: {
+            type: 'and',
+            conditions: [
+                {
+                    field: control.associatedAttribute,
+                    operator: 'eq',
+                    value: recordId,
+                },
+            ],
+        },
+        sort: control.sort ?? [
+            {
+                field: controlSchema.createdAtAttribute ?? controlSchema.idAttribute,
+                order: 'asc',
+            },
+        ],
+        limit: 5000,
+        search: '',
+        columns: [
+            controlSchema.idAttribute,
+            control.associatedAttribute,
+            ...control.controls.map((x) => typeof x === 'string' ? x : x.attributeName),
+        ],
+    });
+    return result.records;
+}

package/dataform/DataFormProvider/utils.d.ts

@@ -7,7 +7,7 @@ export declare function getControls<SA extends SchemaAttributes>(form: Form<SA>)
 export declare function getColumns<SA extends SchemaAttributes>(form: Form<SA>, schema: Schema<SA>): (keyof SA)[];
 export declare function transformFormInternal<SA extends SchemaAttributes>(form: Form<SA>): DataFormContextState<SA>['formInternal'];
 export declare function getIsFieldDisabled<S extends SchemaAttributes = SchemaAttributes>({ attribute, isFormReadonly, disabledFields, control, }: {
-    attribute: AttributeBase;
+    attribute: AttributeBase | null;
     isFormReadonly: boolean | undefined;
     disabledFields: Record<string, boolean>;
     control: Section<S>['controls'][0];

package/dataform/DataFormProvider/utils.js

@@ -76,7 +76,7 @@ function getIsFieldDisabled({ attribute, isFormReadonly, disabledFields, control
         else if ('disabled' in control && control.disabled !== undefined) {
             disabled = control.disabled;
         }
-        else if (attribute.readonly !== undefined) {
+        else if (attribute && attribute.readonly !== undefined) {
             disabled = attribute.readonly;
         }
     }

package/dataform/utils/index.d.ts

@@ -1,5 +1,5 @@
 import type { Attribute } from '@headless-adminapp/core/attributes';
-import { Form } from '@headless-adminapp/core/experience/form';
+import { Form, SectionEditableGridControl } from '@headless-adminapp/core/experience/form';
 import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { ISchemaStore } from '@headless-adminapp/core/store';
 import { Nullable } from '@headless-adminapp/core/types';
@@ -28,6 +28,19 @@ interface FormValidatorOptions<A extends SchemaAttributes = SchemaAttributes> {
 }
 type FormValidator = (<A extends SchemaAttributes = SchemaAttributes>(options: FormValidatorOptions<A>) => (values: Record<string, any>, context: any, options: any) => Promise<ResolverResult<{}>>) & MemoizedFunction;
 export declare const formValidator: FormValidator;
+interface EditableSubgridFormValidatorOptions<A extends SchemaAttributes = SchemaAttributes> {
+    schema: Schema<A>;
+    control: SectionEditableGridControl<A>;
+    language: string;
+    formReadOnly?: boolean;
+    readonlyAttributes?: string[];
+    strings: FormValidationStringSet;
+    schemaStore: ISchemaStore;
+    region: string;
+    alias: string;
+}
+type EditableSubgridFormValidator = (<A extends SchemaAttributes = SchemaAttributes>(options: EditableSubgridFormValidatorOptions<A>) => (values: Record<string, any>, context: any, options: any) => Promise<ResolverResult<{}>>) & MemoizedFunction;
+export declare const editableSubgridFormValidator: EditableSubgridFormValidator;
 export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ columns, editableGrids, language, schema, strings, readonlyAttributes, region, }: {
     schema: Schema<A>;
     columns: string[];

package/dataform/utils/index.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateAttributeValidationSchema = exports.generateValidationSchema = exports.formValidator = exports.saveRecord = void 0;
+exports.generateAttributeValidationSchema = exports.generateValidationSchema = exports.editableSubgridFormValidator = exports.formValidator = exports.saveRecord = void 0;
 exports.getInitialValues = getInitialValues;
 const phone_1 = require("@headless-adminapp/app/utils/phone");
 const yup_1 = require("@hookform/resolvers/yup");
@@ -35,10 +35,10 @@ var saveRecord_1 = require("./saveRecord");
 Object.defineProperty(exports, "saveRecord", { enumerable: true, get: function () { return saveRecord_1.saveRecord; } });
 function getInitialValues({ cloneRecord, form, record, recordId, schema, defaultParameters, }) {
     const formColumns = (0, utils_1.getColumns)(form, schema);
-    const editableGridControls = (0, utils_1.getControls)(form).filter((control) => control.type === 'editablegrid');
+    const editableGridControls = (0, utils_1.getControls)(form).filter((control) => control.type === 'editablegrid' && control.alias !== false);
     const allColumns = [
         ...formColumns,
-        ...editableGridControls.map((x) => x.attributeName),
+        ...editableGridControls.map((x) => x.alias),
     ];
     if (!recordId && !record && form.experience.cloneAttributes && cloneRecord) {
         const cloneAttributesObj = form.experience.cloneAttributes.reduce((acc, item) => {
@@ -116,7 +116,7 @@ exports.formValidator = (0, lodash_1.memoize)(function formValidator({ form, sch
                 }
                 return true;
             });
-            const editableGridControls = activeControls.filter((control) => control.type === 'editablegrid');
+            const editableGridControls = activeControls.filter((control) => control.type === 'editablegrid' && control.alias !== false);
             const columns = Array.from(new Set([
                 schema.primaryAttribute,
                 ...activeControls
@@ -125,14 +125,14 @@ exports.formValidator = (0, lodash_1.memoize)(function formValidator({ form, sch
             ]));
             validator = (0, exports.generateValidationSchema)({
                 editableGrids: editableGridControls.map((control) => {
-                    if (control.type !== 'editablegrid') {
+                    if (control.type !== 'editablegrid' || control.alias === false) {
                         throw new Error('Invalid control type');
                     }
                     const schema = schemaStore.getSchema(control.logicalName);
                     return {
-                        columns: control.attributes,
+                        columns: control.controls.map((x) => typeof x === 'string' ? x : x.attributeName),
                         schema: schema,
-                        attributeName: control.attributeName,
+                        attributeName: control.alias,
                         required: control.required,
                     };
                 }),
@@ -156,6 +156,44 @@ exports.formValidator = (0, lodash_1.memoize)(function formValidator({ form, sch
     readonlyAttributes,
     formReadOnly,
 }));
+exports.editableSubgridFormValidator = (0, lodash_1.memoize)(function formValidator({ schema, readonlyAttributes, formReadOnly, schemaStore, language, strings, region, control, alias, }) {
+    return async (values, context, options) => {
+        let validator = yup.object().shape({});
+        if (!formReadOnly) {
+            const controlSchema = schemaStore.getSchema(control.logicalName);
+            const columns = [];
+            validator = (0, exports.generateValidationSchema)({
+                editableGrids: [
+                    {
+                        columns: control.controls.map((x) => typeof x === 'string'
+                            ? x
+                            : x.attributeName),
+                        schema: controlSchema,
+                        attributeName: alias,
+                        required: control.required,
+                    },
+                ],
+                schema,
+                columns,
+                language,
+                strings,
+                readonlyAttributes,
+                region,
+            });
+        }
+        const resolver = (0, yup_1.yupResolver)(validator);
+        const result = await resolver(values, context, options);
+        return result;
+    };
+}, ({ language, schema, strings, readonlyAttributes, formReadOnly, alias, control, }) => JSON.stringify({
+    schema,
+    language,
+    strings,
+    readonlyAttributes,
+    formReadOnly,
+    alias,
+    control,
+}));
 exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ columns, editableGrids, language, schema, strings, readonlyAttributes, region, }) {
     return yup.object().shape({
         ...columns.reduce((acc, column) => {

package/dataform/utils/saveRecord.d.ts

@@ -1,5 +1,5 @@
 import { Id } from '@headless-adminapp/core';
-import { Form } from '@headless-adminapp/core/experience/form';
+import { Form, SectionEditableGridControl } from '@headless-adminapp/core/experience/form';
 import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { ISchemaStore } from '@headless-adminapp/core/store';
 import { IDataService } from '@headless-adminapp/core/transport';
@@ -25,3 +25,38 @@ export interface SaveRecordFnOptions<S extends SchemaAttributes = SchemaAttribut
 }
 export type SaveRecordFn = (options: SaveRecordFnOptions) => Promise<SaveRecordResult>;
 export declare function saveRecord({ values, form, schema, dataService, initialValues, record, schemaStore, }: SaveRecordFnOptions): Promise<SaveRecordResult>;
+interface SaveEditableGridControlOptions {
+    recordId: string;
+    control: SectionEditableGridControl;
+    schemaStore: ISchemaStore;
+    values: any;
+    initialValues: any;
+    dataService: IDataService;
+    alias: string;
+}
+export type SaveEditableGridResult = {
+    success: true;
+    updated: number;
+    created: number;
+} | {
+    success: false;
+    title?: string;
+    message: string;
+    isError: boolean;
+};
+export declare function saveEditableGridControl({ recordId, control, schemaStore, values, initialValues, dataService, alias, }: SaveEditableGridControlOptions): Promise<{
+    success: boolean;
+    title: string;
+    message: string;
+    isError: boolean;
+    updated?: undefined;
+    created?: undefined;
+} | {
+    success: boolean;
+    updated: number;
+    created: number;
+    title?: undefined;
+    message?: undefined;
+    isError?: undefined;
+}>;
+export {};

package/dataform/utils/saveRecord.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getModifiedValues = getModifiedValues;
 exports.saveRecord = saveRecord;
+exports.saveEditableGridControl = saveEditableGridControl;
 const utils_1 = require("../../dataform/DataFormProvider/utils");
 function getModifiedValues(initialValues, values, exclude) {
     const keys = Object.keys(values);
@@ -30,11 +31,11 @@ async function executeOperation(operation, dataService) {
             await dataService.deleteRecord(operation.logicalName, operation.id);
     }
 }
-function generateSubgridUpdateOperation({ recordId, control, schemaStore, values, initialValues, }) {
+function generateSubgridUpdateOperation({ recordId, control, schemaStore, values, initialValues, alias, }) {
     const operations = [];
     const gridSchema = schemaStore.getSchema(control.logicalName);
-    const gridRows = values[control.attributeName];
-    const initialGridRows = initialValues[control.attributeName];
+    const gridRows = values[alias];
+    const initialGridRows = initialValues[alias];
     const newRows = gridRows.filter((x) => !x[gridSchema.idAttribute]);
     const updatedRows = gridRows.filter((x) => x[gridSchema.idAttribute]);
     const deletedIds = initialGridRows
@@ -46,9 +47,10 @@ function generateSubgridUpdateOperation({ recordId, control, schemaStore, values
             logicalName: control.logicalName,
             data: {
                 ...row,
-                [control.referenceAttribute]: {
+                [control.associatedAttribute]: {
                     id: recordId,
                 },
+                [gridSchema.idAttribute]: undefined,
             },
         });
     }
@@ -79,15 +81,15 @@ function generateSubgridUpdateOperation({ recordId, control, schemaStore, values
 }
 async function createRecord({ values, form, schema, dataService, }) {
     const controls = (0, utils_1.getControls)(form);
-    const editableGridControls = controls.filter((control) => control.type === 'editablegrid');
+    const editableGridControls = controls.filter((control) => control.type === 'editablegrid' && control.alias);
     const result = await dataService.createRecord(schema.logicalName, values);
     const recordId = result.id;
     for (const control of editableGridControls) {
-        const gridRows = values[control.attributeName];
+        const gridRows = values[control.alias];
         for (const row of gridRows) {
             await dataService.createRecord(control.logicalName, {
                 ...row,
-                [control.referenceAttribute]: {
+                [control.associatedAttribute]: {
                     id: recordId,
                 },
             });
@@ -97,8 +99,8 @@ async function createRecord({ values, form, schema, dataService, }) {
 }
 async function updateRecord({ recordId, values, form, schema, dataService, initialValues, schemaStore, }) {
     const controls = (0, utils_1.getControls)(form);
-    const editableGridControls = controls.filter((control) => control.type === 'editablegrid');
-    const modifiedValues = getModifiedValues(initialValues, values, editableGridControls.map((x) => x.attributeName));
+    const editableGridControls = controls.filter((control) => control.type === 'editablegrid' && control.alias);
+    const modifiedValues = getModifiedValues(initialValues, values, editableGridControls.map((x) => x.alias));
     const operations = [];
     if (Object.keys(modifiedValues).length) {
         operations.push({
@@ -115,6 +117,7 @@ async function updateRecord({ recordId, values, form, schema, dataService, initi
             schemaStore,
             initialValues,
             values,
+            alias: control.alias,
         }));
     }
     if (!operations.length) {
@@ -161,3 +164,29 @@ async function saveRecord({ values, form, schema, dataService, initialValues, re
         recordId,
     };
 }
+async function saveEditableGridControl({ recordId, control, schemaStore, values, initialValues, dataService, alias, }) {
+    const operations = generateSubgridUpdateOperation({
+        recordId,
+        control,
+        schemaStore,
+        initialValues,
+        values,
+        alias,
+    });
+    if (!operations.length) {
+        return {
+            success: false,
+            title: 'No changes',
+            message: 'No changes made to the record',
+            isError: false,
+        };
+    }
+    for (const operation of operations) {
+        await executeOperation(operation, dataService);
+    }
+    return {
+        success: true,
+        updated: operations.filter((x) => x.type === 'update').length,
+        created: operations.filter((x) => x.type === 'create').length,
+    };
+}

package/datagrid/DataGridProvider/DataResolver.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataResolver = DataResolver;
 const react_1 = require("react");
+const auth_1 = require("../../auth");
 const hooks_1 = require("../../hooks");
 const useDebouncedValue_1 = require("../../hooks/useDebouncedValue");
 const useMetadata_1 = require("../../metadata/hooks/useMetadata");
@@ -10,6 +11,7 @@ const useRetriveRecords_1 = require("../../transport/hooks/useRetriveRecords");
 const context_2 = require("../context");
 const hooks_2 = require("../hooks");
 const useGridDisabled_1 = require("../hooks/useGridDisabled");
+const useQuickFilter_1 = require("../hooks/useQuickFilter");
 const utils_1 = require("./utils");
 function DataResolver() {
     const schema = (0, hooks_2.useDataGridSchema)();
@@ -22,6 +24,8 @@ function DataResolver() {
     const maxRecords = (0, hooks_2.useMaxRecords)();
     const [selectedIds] = (0, hooks_2.useGridSelection)();
     const disabled = (0, useGridDisabled_1.useGridDisabled)();
+    const [quickFilter, quickFilterValues] = (0, useQuickFilter_1.useQuickFilter)();
+    const authSession = (0, auth_1.useAuthSession)();
     const { schemaStore } = (0, useMetadata_1.useMetadata)();
     const selectedIdsRef = (0, react_1.useRef)(selectedIds);
     selectedIdsRef.current = selectedIds;
@@ -37,9 +41,25 @@ function DataResolver() {
     const expand = (0, react_1.useMemo)(() => isMobile
         ? (0, utils_1.collectCardExpandedKeys)({ cardView: view.experience.card })
         : (0, utils_1.collectExpandedKeys)(gridColumns), [gridColumns, isMobile, view.experience.card]);
+    const quickFilterResults = (0, react_1.useMemo)(() => {
+        if (!quickFilter) {
+            return null;
+        }
+        if (!quickFilterValues) {
+            return null;
+        }
+        return quickFilter.resolver(quickFilterValues, authSession);
+    }, [authSession, quickFilter, quickFilterValues]);
     const filter = (0, react_1.useMemo)(() => {
-        return (0, utils_1.mergeConditions)(schema, view.experience.filter, extraFilter, columnFilters, schemaStore);
-    }, [columnFilters, extraFilter, schema, schemaStore, view.experience.filter]);
+        return (0, utils_1.mergeConditions)(schema, view.experience.filter, extraFilter, quickFilterResults, columnFilters, schemaStore);
+    }, [
+        columnFilters,
+        extraFilter,
+        schema,
+        schemaStore,
+        view.experience.filter,
+        quickFilterResults,
+    ]);
     const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage, queryKey, } = (0, useRetriveRecords_1.useRetriveRecords)({
         columns,
         expand,

package/datagrid/DataGridProvider/index.js

@@ -28,6 +28,7 @@ function DataGridProvider(props) {
         searchText: '',
         selectedIds: [],
         sorting: props.view.experience.defaultSorting ?? [],
+        quickFilterValues: props.view.experience.quickFilter?.defaultValues ?? {},
         view: props.view,
         commands: props.commands,
         columns: (0, transformViewColumns_1.transformViewColumns)(props.view.logicalName, props.view.experience.grid.columns, schemaStore, language),
@@ -52,6 +53,7 @@ function DataGridProvider(props) {
             searchText: '',
             selectedIds: [],
             sorting: props.view.experience.defaultSorting ?? [],
+            quickFilterValues: props.view.experience.quickFilter?.defaultValues ?? {},
             columns: (0, transformViewColumns_1.transformViewColumns)(props.view.logicalName, props.view.experience.grid.columns, schemaStore, language),
             maxRecords: props.maxRecords,
         });

package/datagrid/DataGridProvider/utils.d.ts

@@ -4,7 +4,8 @@ import { ISchemaStore } from '@headless-adminapp/core/store';
 import { Filter } from '@headless-adminapp/core/transport';
 import { TransformedViewColumn } from '../context';
 export declare function transformColumnFilter<S extends SchemaAttributes = SchemaAttributes>(filter: Partial<Record<string, ColumnCondition>>, schema: Schema<S>, schemaStore: ISchemaStore): Record<string, ColumnCondition> | null;
-export declare function mergeConditions<S extends SchemaAttributes = SchemaAttributes>(schema: Schema<S>, filter: Filter | null | undefined, extraFilter: Filter | null | undefined, columnFilters: Partial<Record<string, ColumnCondition>> | undefined, schemaStore: ISchemaStore): Filter | null;
+export declare function mergeConditions<S extends SchemaAttributes = SchemaAttributes>(schema: Schema<S>, filter: Filter | null | undefined, extraFilter: Filter | null | undefined, quickFilterResults: Filter | null | undefined, columnFilters: Partial<Record<string, ColumnCondition>> | undefined, schemaStore: ISchemaStore): Filter | null;
+export declare function simplyfyFilter(filter: Filter): Filter | null;
 export declare function collectExpandedKeys(columns: TransformedViewColumn<SchemaAttributes>[]): Record<string, string[]>;
 export declare function collectGridColumns<S extends SchemaAttributes = SchemaAttributes>({ gridColumns, schema, }: {
     gridColumns: TransformedViewColumn<S>[];

package/datagrid/DataGridProvider/utils.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformColumnFilter = transformColumnFilter;
 exports.mergeConditions = mergeConditions;
+exports.simplyfyFilter = simplyfyFilter;
 exports.collectExpandedKeys = collectExpandedKeys;
 exports.collectGridColumns = collectGridColumns;
 exports.collectCardColumns = collectCardColumns;
@@ -77,7 +78,7 @@ function transformColumnFilter(filter, schema, schemaStore) {
     }
     return transformedResult;
 }
-function mergeConditions(schema, filter, extraFilter, columnFilters, schemaStore) {
+function mergeConditions(schema, filter, extraFilter, quickFilterResults, columnFilters, schemaStore) {
     const filters = [];
     if (filter) {
         filters.push(filter);
@@ -85,6 +86,9 @@ function mergeConditions(schema, filter, extraFilter, columnFilters, schemaStore
     if (extraFilter) {
         filters.push(extraFilter);
     }
+    if (quickFilterResults) {
+        filters.push(quickFilterResults);
+    }
     if (columnFilters) {
         const transformedColumnFilters = transformColumnFilter(columnFilters, schema, schemaStore);
         if (transformedColumnFilters) {
@@ -105,11 +109,42 @@ function mergeConditions(schema, filter, extraFilter, columnFilters, schemaStore
         return null;
     }
     if (filters.length === 1) {
-        return filters[0];
+        return simplyfyFilter(filters[0]);
     }
-    return {
+    return simplyfyFilter({
         type: 'and',
         filters: filters,
+    });
+}
+function simplyfyFilter(filter) {
+    const conditions = filter.conditions ?? [];
+    const filters = [];
+    if (filter.filters) {
+        for (const f of filter.filters) {
+            const _f = simplyfyFilter(f);
+            if (!_f) {
+                continue;
+            }
+            if (_f.type !== filter.type) {
+                filters.push(_f);
+            }
+            else {
+                if (_f.conditions) {
+                    conditions.push(..._f.conditions);
+                }
+                if (_f.filters) {
+                    filters.push(..._f.filters);
+                }
+            }
+        }
+    }
+    if (conditions.length === 0 && filters.length === 0) {
+        return null;
+    }
+    return {
+        type: filter.type,
+        conditions: conditions,
+        filters: filters,
     };
 }
 function collectExpandedKeys(columns) {

package/datagrid/context.d.ts

@@ -23,6 +23,7 @@ export interface GridContextState<S extends SchemaAttributes = SchemaAttributes,
     searchText: string;
     columnFilters: Partial<Record<keyof S, ColumnCondition>>;
     sorting: SortingState<S>;
+    quickFilterValues: Record<string, unknown>;
     selectedIds: string[];
     data: RetriveRecordsResult<InferredSchemaType<S>> | null;
     dataState: {

package/datagrid/hooks/useQuickFilter.d.ts

@@ -0,0 +1 @@
+export declare function useQuickFilter(): readonly [import("@headless-adminapp/core/experience/view/QuickFilter").QuickFilter<import("@headless-adminapp/core/schema").SchemaAttributes> | undefined, Record<string, unknown>, (key: string, value: unknown) => void];

package/datagrid/hooks/useQuickFilter.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuickFilter = useQuickFilter;
+const react_1 = require("react");
+const context_1 = require("../../mutable/context");
+const context_2 = require("../context");
+function useQuickFilter() {
+    const quickFilter = (0, context_1.useContextSelector)(context_2.GridContext, (state) => state.view.experience.quickFilter);
+    const values = (0, context_1.useContextSelector)(context_2.GridContext, (state) => state.quickFilterValues);
+    const _setValue = (0, context_1.useContextSetValue)(context_2.GridContext);
+    const setValue = (0, react_1.useCallback)((key, value) => {
+        _setValue((state) => ({
+            quickFilterValues: {
+                ...state.quickFilterValues,
+                [key]: value,
+            },
+        }));
+    }, [_setValue]);
+    return [quickFilter, values, setValue];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -36,5 +36,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "3920cedff7216fb37b07dff95c50499c0f56f57c"
+  "gitHead": "3c59cbbf000e71e39b81c9440a71363b729e6e3c"
 }

package/recordset/RecordSetProvider.js

@@ -28,7 +28,7 @@ const CardViewSetter = () => {
             return;
         }
         experienceStore
-            .getViewLookupV2(logicalName)
+            .getPublicView(logicalName)
             .then((view) => {
             setValue({
                 cardView: view.experience.card,

package/recordset/hooks/useRecordSetResult.js

@@ -29,6 +29,7 @@ function useRecordSetResult() {
             ...(cardView.secondaryColumns ?? [])
                 .filter((x) => !x.expandedKey)
                 .map((x) => x.name),
+            ...(cardView.rightColumn ?? []).map((x) => x.name),
         ])).filter(Boolean);
     }, [cardView]);
     const { isPending, data, error } = (0, react_query_1.useQuery)({

package/transport/hooks/useRetriveRecords.js

@@ -7,6 +7,7 @@ exports.useRetriveRecords = useRetriveRecords;
 const transport_1 = require("@headless-adminapp/app/transport");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
+const utils_1 = require("../../datagrid/DataGridProvider/utils");
 const ROWS_PER_PAGE = 100;
 const MAX_RECORDS = 10000;
 function useRetrieveRecordsKey({ schema, search, filter, sorting, columns, expand, maxRecords, }) {
@@ -125,10 +126,16 @@ function useRetriveRecordsInternal(queryKey, { columns, expand, filter, maxRecor
     };
 }
 function useRetriveRecords({ columns, expand, filter, maxRecords, schema, search, sorting, disabled, }) {
+    const _filter = (0, react_1.useMemo)(() => {
+        if (!filter) {
+            return null;
+        }
+        return (0, utils_1.simplyfyFilter)(filter);
+    }, [filter]);
     const queryKey = useRetrieveRecordsKey({
         columns,
         expand,
-        filter,
+        filter: _filter,
         maxRecords,
         schema,
         search,
@@ -137,7 +144,7 @@ function useRetriveRecords({ columns, expand, filter, maxRecords, schema, search
     const query = useRetriveRecordsInternal(queryKey, {
         columns,
         expand,
-        filter,
+        filter: _filter,
         maxRecords,
         schema,
         search,