@headless-adminapp/app 1.0.2 → 1.1.2

package/board/BoardColumnDataResolver.js

@@ -16,7 +16,7 @@ function DataResolver() {
     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 queryKey = (0, useRetriveRecords_1.useRetrieveRecordsKey)({
+    const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage, queryKey, } = (0, useRetriveRecords_1.useRetriveRecords)({
         columns,
         expand,
         filter,
@@ -26,18 +26,11 @@ function DataResolver() {
         sorting,
     });
     (0, useRetriveRecords_1.useClearDataExceptFirstPage)(queryKey);
-    const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage } = (0, useRetriveRecords_1.useRetriveRecords)(queryKey, {
-        columns,
-        expand,
-        filter,
-        maxRecords,
-        schema,
-        search,
-        sorting,
-    });
     (0, react_1.useEffect)(() => {
         setState({
-            fetchNextPage: fetchNextPage,
+            fetchNextPage: () => {
+                fetchNextPage().catch(console.error);
+            },
         });
     }, [fetchNextPage, setState]);
     (0, react_1.useEffect)(() => {

package/board/types.d.ts

@@ -44,4 +44,8 @@ export interface BoardConfig<S extends SchemaAttributes = SchemaAttributes> {
     };
     columnConfigs: BoardColumnConfig[];
     PreviewComponent: BoardColumnCardPreviewFC;
+    HeaderComponent?: FC;
+    emptyMessage?: string;
+    minColumnWidth?: number;
+    maxColumnWidth?: number;
 }

package/builders/CommandBuilder/ViewCommandBuilder.d.ts

@@ -1,6 +1,13 @@
-import { EntityMainGridCommandItemExperience } from '@headless-adminapp/core/experience/view';
+import { EntityMainGridCommandContext, EntityMainGridCommandItemExperience } from '@headless-adminapp/core/experience/view';
 import { Localized } from '@headless-adminapp/core/types';
 import { Icon } from '@headless-adminapp/icons';
+export declare namespace EnabledRules {
+    function HasCreatePermisssion(context: EntityMainGridCommandContext): boolean;
+    function HasUpdatePermission(context: EntityMainGridCommandContext): boolean;
+    function HasDeletePermission(context: EntityMainGridCommandContext): boolean;
+    function HasSingleRecordSelected(context: EntityMainGridCommandContext): boolean;
+    function HasAtLeastOneRecordSelected(context: EntityMainGridCommandContext): boolean;
+}
 export declare namespace ViewCommandBuilder {
     function createNewRecordCommand({ Icon, text, localizedTexts, }: {
         Icon: Icon;
@@ -61,3 +68,9 @@ export declare namespace ViewCommandBuilder {
         };
     }): EntityMainGridCommandItemExperience;
 }
+export declare function exportRecordsToExcel(context: EntityMainGridCommandContext): Promise<void>;
+export declare function exportRecordsToCSV(context: EntityMainGridCommandContext): Promise<void>;
+export declare function processDeleteRecordRequest(context: EntityMainGridCommandContext, { stringSet, localizedStringSet, }: {
+    stringSet: ViewCommandBuilder.DeleteRecordCommandStringSet;
+    localizedStringSet?: Localized<ViewCommandBuilder.DeleteRecordCommandStringSet>;
+}): Promise<void>;

package/builders/CommandBuilder/ViewCommandBuilder.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewCommandBuilder = void 0;
+exports.ViewCommandBuilder = exports.EnabledRules = void 0;
+exports.exportRecordsToExcel = exportRecordsToExcel;
+exports.exportRecordsToCSV = exportRecordsToCSV;
+exports.processDeleteRecordRequest = processDeleteRecordRequest;
 const utils_1 = require("../utils");
 const utils_2 = require("./utils");
 var EnabledRules;
@@ -25,7 +28,7 @@ var EnabledRules;
         return context.primaryControl.selectedIds.length > 0;
     }
     EnabledRules.HasAtLeastOneRecordSelected = HasAtLeastOneRecordSelected;
-})(EnabledRules || (EnabledRules = {}));
+})(EnabledRules || (exports.EnabledRules = EnabledRules = {}));
 var ViewCommandBuilder;
 (function (ViewCommandBuilder) {
     function createNewRecordCommand({ Icon, text, localizedTexts, }) {
@@ -92,42 +95,10 @@ var ViewCommandBuilder;
             danger: true,
             isContextMenu: true,
             onClick: async (context) => {
-                const recordIds = context.primaryControl.selectedIds;
-                if (!recordIds.length) {
-                    return;
-                }
-                const localizeSelector = (0, utils_2.createLocalizedSelector)(stringSet, localizedStringSet, context.locale.language);
-                try {
-                    const confirmResult = await context.utility.openConfirmDialog({
-                        title: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.confirmation.title)),
-                        text: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.confirmation.text)),
-                        cancelButtonLabel: localizeSelector((s) => s.confirmation.buttonCancel),
-                        confirmButtonLabel: localizeSelector((s) => s.confirmation.buttonConfirm),
-                    });
-                    if (!confirmResult?.confirmed) {
-                        return;
-                    }
-                    context.utility.showProgressIndicator((0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.status.deleting)) + '...');
-                    for (const recordId of recordIds) {
-                        await context.dataService.deleteRecord(context.primaryControl.logicalName, recordId);
-                    }
-                    context.utility.showNotification({
-                        title: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.successNotification.title)),
-                        text: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.successNotification.text)),
-                        type: 'success',
-                    });
-                    context.primaryControl.refresh();
-                }
-                catch (error) {
-                    context.utility.showNotification({
-                        title: localizeSelector((s) => s.errorNotification.title),
-                        text: error.message,
-                        type: 'error',
-                    });
-                }
-                finally {
-                    context.utility.hideProgressIndicator();
-                }
+                await processDeleteRecordRequest(context, {
+                    stringSet,
+                    localizedStringSet,
+                });
             },
             hidden: [
                 (context) => !EnabledRules.HasAtLeastOneRecordSelected(context),
@@ -161,32 +132,7 @@ var ViewCommandBuilder;
                         text: excel.text,
                         localizedTexts: excel.localizedTexts,
                         onClick: async (context) => {
-                            context.utility.showProgressIndicator('Exporting to Excel...');
-                            try {
-                                const result = await (0, utils_1.retriveRecords)({
-                                    columnFilters: context.primaryControl.columnFilter,
-                                    dataService: context.dataService,
-                                    gridColumns: context.primaryControl.gridColumns,
-                                    schema: context.primaryControl.schema,
-                                    schemaStore: context.stores.schemaStore,
-                                    view: context.primaryControl.view,
-                                    search: context.primaryControl.searchText,
-                                    extraFilter: context.primaryControl.extraFilter,
-                                    sorting: context.primaryControl.sorting,
-                                    skip: 0,
-                                    limit: 5000,
-                                });
-                                await (0, utils_1.exportRecordsXLS)({
-                                    fileName: context.primaryControl.view.name + '.xlsx',
-                                    gridColumns: context.primaryControl.gridColumns,
-                                    records: result.records,
-                                    schema: context.primaryControl.schema,
-                                    schemaStore: context.stores.schemaStore,
-                                });
-                            }
-                            finally {
-                                context.utility.hideProgressIndicator();
-                            }
+                            await exportRecordsToExcel(context);
                         },
                     },
                     {
@@ -194,32 +140,7 @@ var ViewCommandBuilder;
                         text: csv.text,
                         localizedTexts: csv.localizedTexts,
                         onClick: async (context) => {
-                            context.utility.showProgressIndicator('Exporting to CSV...');
-                            try {
-                                const result = await (0, utils_1.retriveRecords)({
-                                    columnFilters: context.primaryControl.columnFilter,
-                                    dataService: context.dataService,
-                                    gridColumns: context.primaryControl.gridColumns,
-                                    schema: context.primaryControl.schema,
-                                    schemaStore: context.stores.schemaStore,
-                                    view: context.primaryControl.view,
-                                    search: context.primaryControl.searchText,
-                                    extraFilter: context.primaryControl.extraFilter,
-                                    sorting: context.primaryControl.sorting,
-                                    skip: 0,
-                                    limit: 5000,
-                                });
-                                await (0, utils_1.exportRecordsCSV)({
-                                    fileName: context.primaryControl.view.name + '.csv',
-                                    gridColumns: context.primaryControl.gridColumns,
-                                    records: result.records,
-                                    schema: context.primaryControl.schema,
-                                    schemaStore: context.stores.schemaStore,
-                                });
-                            }
-                            finally {
-                                context.utility.hideProgressIndicator();
-                            }
+                            await exportRecordsToCSV(context);
                         },
                     },
                 ],
@@ -228,3 +149,88 @@ var ViewCommandBuilder;
     }
     ViewCommandBuilder.createExportCommand = createExportCommand;
 })(ViewCommandBuilder || (exports.ViewCommandBuilder = ViewCommandBuilder = {}));
+async function retrieveFilteredRecords(context) {
+    return (0, utils_1.retriveRecords)({
+        columnFilters: context.primaryControl.columnFilter,
+        dataService: context.dataService,
+        gridColumns: context.primaryControl.gridColumns,
+        schema: context.primaryControl.schema,
+        schemaStore: context.stores.schemaStore,
+        view: context.primaryControl.view,
+        search: context.primaryControl.searchText,
+        extraFilter: context.primaryControl.extraFilter,
+        sorting: context.primaryControl.sorting,
+        skip: 0,
+        limit: 5000,
+    });
+}
+async function exportRecordsToExcel(context) {
+    context.utility.showProgressIndicator('Exporting to Excel...');
+    try {
+        const result = await retrieveFilteredRecords(context);
+        await (0, utils_1.exportRecordsXLS)({
+            fileName: context.primaryControl.view.name + '.xlsx',
+            gridColumns: context.primaryControl.gridColumns,
+            records: result.records,
+            schema: context.primaryControl.schema,
+            schemaStore: context.stores.schemaStore,
+        });
+    }
+    finally {
+        context.utility.hideProgressIndicator();
+    }
+}
+async function exportRecordsToCSV(context) {
+    context.utility.showProgressIndicator('Exporting to CSV...');
+    try {
+        const result = await retrieveFilteredRecords(context);
+        await (0, utils_1.exportRecordsCSV)({
+            fileName: context.primaryControl.view.name + '.csv',
+            gridColumns: context.primaryControl.gridColumns,
+            records: result.records,
+            schema: context.primaryControl.schema,
+            schemaStore: context.stores.schemaStore,
+        });
+    }
+    finally {
+        context.utility.hideProgressIndicator();
+    }
+}
+async function processDeleteRecordRequest(context, { stringSet, localizedStringSet, }) {
+    const recordIds = context.primaryControl.selectedIds;
+    if (!recordIds.length) {
+        return;
+    }
+    const localizeSelector = (0, utils_2.createLocalizedSelector)(stringSet, localizedStringSet, context.locale.language);
+    try {
+        const confirmResult = await context.utility.openConfirmDialog({
+            title: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.confirmation.title)),
+            text: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.confirmation.text)),
+            cancelButtonLabel: localizeSelector((s) => s.confirmation.buttonCancel),
+            confirmButtonLabel: localizeSelector((s) => s.confirmation.buttonConfirm),
+        });
+        if (!confirmResult?.confirmed) {
+            return;
+        }
+        context.utility.showProgressIndicator((0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.status.deleting)) + '...');
+        for (const recordId of recordIds) {
+            await context.dataService.deleteRecord(context.primaryControl.logicalName, recordId);
+        }
+        context.utility.showNotification({
+            title: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.successNotification.title)),
+            text: (0, utils_2.plurialize)(recordIds.length, localizeSelector((s) => s.successNotification.text)),
+            type: 'success',
+        });
+        context.primaryControl.refresh();
+    }
+    catch (error) {
+        context.utility.showNotification({
+            title: localizeSelector((s) => s.errorNotification.title),
+            text: error.message,
+            type: 'error',
+        });
+    }
+    finally {
+        context.utility.hideProgressIndicator();
+    }
+}

package/builders/DefineFormExperience.d.ts

@@ -5,12 +5,13 @@ import type { SchemaAttributes } from '@headless-adminapp/core/schema';
 export declare namespace DefineFormExperience {
     export type Experience<S extends SchemaAttributes = SchemaAttributes> = (Pick<$FormExperience<S>, 'useHookFn' | 'relatedItems' | 'processFlow' | 'cloneAttributes' | 'defaultValues' | 'includeAttributes' | 'headerControls'> & {
         tabs: Tab<S>[];
-    }) | (keyof S)[];
+    }) | SectionControl<S>[];
     export function resolveExperience<S extends SchemaAttributes = SchemaAttributes>(v: Experience<S>): $FormExperience<S>;
-    type Tab<S extends SchemaAttributes = SchemaAttributes> = Pick<$Tab<S>, 'label' | 'localizedLabels' | 'name'> & ({
-        tabColumns: TabColumn<S>[];
+    type Tab<S extends SchemaAttributes = SchemaAttributes> = Pick<$Tab<S>, 'label' | 'localizedLabels' | 'name'> & {
         columnCount?: $Tab<S>['columnCount'];
         columnWidths?: $Tab<S>['columnWidths'];
+    } & ({
+        tabColumns: TabColumn<S>[];
     } | {
         sections: Section<S>[];
     } | {

package/builders/DefineFormExperience.js

@@ -41,13 +41,12 @@ var DefineFormExperience;
             name: v.name,
             localizedLabels: v.localizedLabels,
         };
+        tab.columnCount = v.columnCount ?? 2;
+        tab.columnWidths = v.columnWidths;
         if ('tabColumns' in v) {
-            tab.columnCount = v.columnCount ?? 2;
-            tab.columnWidths = v.columnWidths;
             tab.tabColumns = v.tabColumns.map(resolveTabColumn);
         }
         else if ('sections' in v) {
-            tab.columnCount = 2;
             tab.tabColumns = [
                 {
                     sections: v.sections.map(resolveSection),
@@ -55,7 +54,6 @@ var DefineFormExperience;
             ];
         }
         else if ('controls' in v) {
-            tab.columnCount = 2;
             tab.tabColumns = [
                 {
                     sections: [

package/builders/SchemaExperienceBuilder.js

@@ -142,13 +142,14 @@ class SchemaExperienceBuilder extends BaseSchemaExperienceBuilder {
                 {
                     name: 'general',
                     label: 'General',
-                    columnCount: 1,
+                    columnCount: 2,
                     tabColumns: [
                         {
                             sections: [
                                 {
                                     name: 'general',
                                     label: 'General',
+                                    hideLabel: true,
                                     controls: [
                                         {
                                             type: 'standard',
@@ -244,7 +245,7 @@ class SchemaExperienceBuilder extends BaseSchemaExperienceBuilder {
         }
         return {
             logicalName: this.logicalName,
-            icon: experience.icon,
+            Icon: experience.Icon,
             defaultQuickCreateFormId: defaultQuickCreateFormId,
             defaultFormId,
             defaultViewId,

package/builders/utils.js

@@ -35,7 +35,7 @@ const getHeaders = (schema, gridColumns, schemaStore) => {
             const lookupSchema = schemaStore.getSchema(entity);
             return `${lookupSchema.attributes[field]?.label} (${schema.attributes[lookup]?.label})`;
         }
-        return schema.attributes[column.name]?.label;
+        return column.label ?? schema.attributes[column.name]?.label;
     });
     return headers;
 };

package/calendar/types.d.ts

@@ -16,7 +16,7 @@ export interface CalendarEventsResolverFnOptions<SA extends SchemaAttributes = S
     auth: AuthSession | null;
 }
 export type CalendarEventsResolverFn<SA extends SchemaAttributes = SchemaAttributes> = (options: CalendarEventsResolverFnOptions<SA>) => Promise<CalendarEvent[]>;
-export type CalendarEventResolverFn<T extends CalendarEvent = CalendarEvent> = (id: string) => Promise<T>;
+export type CalendarEventResolverFn<T extends CalendarEvent = CalendarEvent> = (id: string) => Promise<Partial<T>>;
 export type CalendarEventSaveData<SA1 extends SchemaAttributes = SchemaAttributes, SA2 extends SchemaAttributes = SchemaAttributes> = Omit<CalendarEvent, 'id'> & {
     id?: CalendarEvent['id'];
 } & InferredSchemaType<SA1> & InferredSchemaType<SA2>;
@@ -38,4 +38,8 @@ export interface CalendarConfig<SA1 extends SchemaAttributes = SchemaAttributes,
     title: string;
     description: string;
     eventLabel: string;
+    disableCreate?: boolean;
+    disableEdit?: boolean;
+    disableDelete?: boolean;
+    disableAllDay?: boolean;
 }

package/command/types.d.ts

@@ -36,6 +36,7 @@ interface BaseCommandState {
     iconPosition?: 'before' | 'after';
     danger?: boolean;
     hidden?: boolean;
+    appearance?: 'subtle' | 'colored';
 }
 interface ActionableCommandState {
     onClick?: () => void;

package/command/utils/index.js

@@ -27,6 +27,7 @@ function transformCommand(command, handlerContext) {
                 isQuickAction: command.isQuickAction,
                 danger: command.danger,
                 iconPosition: command.iconPosition,
+                appearance: command.appearance,
                 ...transformedProperties(command, handlerContext),
             };
         case 'button':
@@ -37,6 +38,7 @@ function transformCommand(command, handlerContext) {
                 danger: command.danger,
                 iconPosition: command.iconPosition,
                 localizedTexts: command.localizedText,
+                appearance: command.appearance,
                 ...transformedProperties(command, handlerContext),
             };
         case 'menu':
@@ -46,6 +48,7 @@ function transformCommand(command, handlerContext) {
                 danger: command.danger,
                 localizedTexts: command.localizedTexts,
                 iconPosition: command.iconPosition,
+                appearance: command.appearance,
                 ...transformedProperties(command, handlerContext),
                 items: command.items.map((item) => transformMenuItems(item, handlerContext)),
             };

package/dataform/utils/saveRecord.d.ts

@@ -4,7 +4,7 @@ import { ISchemaStore } from '@headless-adminapp/core/store';
 import { IDataService } from '@headless-adminapp/core/transport';
 import { Nullable } from '@headless-adminapp/core/types';
 export declare function getModifiedValues(initialValues: any, values: any, exclude?: string[]): Record<string, any>;
-type SaveRecordResult = {
+export type SaveRecordResult = {
     success: true;
     recordId: string;
 } | {
@@ -13,15 +13,14 @@ type SaveRecordResult = {
     message: string;
     isError: boolean;
 };
-export interface SaveRecordFnOptions {
+export interface SaveRecordFnOptions<S extends SchemaAttributes = SchemaAttributes> {
     values: any;
-    form: Form<SchemaAttributes>;
-    record: InferredSchemaType<SchemaAttributes> | undefined;
-    initialValues: Nullable<InferredSchemaType<SchemaAttributes>>;
-    schema: Schema<SchemaAttributes>;
+    form: Form<S>;
+    record: InferredSchemaType<S> | undefined;
+    initialValues: Nullable<InferredSchemaType<S>>;
+    schema: Schema<S>;
     dataService: IDataService;
     schemaStore: ISchemaStore;
 }
 export type SaveRecordFn = (options: SaveRecordFnOptions) => Promise<SaveRecordResult>;
 export declare function saveRecord({ values, form, schema, dataService, initialValues, record, schemaStore, }: SaveRecordFnOptions): Promise<SaveRecordResult>;
-export {};

package/datagrid/DataGridProvider/DataResolver.js

@@ -2,56 +2,45 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataResolver = DataResolver;
 const react_1 = require("react");
+const hooks_1 = require("../../hooks");
 const useDebouncedValue_1 = require("../../hooks/useDebouncedValue");
 const useMetadata_1 = require("../../metadata/hooks/useMetadata");
 const context_1 = require("../../mutable/context");
 const useRetriveRecords_1 = require("../../transport/hooks/useRetriveRecords");
 const context_2 = require("../context");
-const hooks_1 = require("../hooks");
+const hooks_2 = require("../hooks");
 const useGridDisabled_1 = require("../hooks/useGridDisabled");
 const utils_1 = require("./utils");
-const MAX_RECORDS = 10000;
 function DataResolver() {
-    const schema = (0, hooks_1.useDataGridSchema)();
-    const view = (0, hooks_1.useSelectedView)();
-    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 = (0, hooks_1.useMaxRecords)() ?? MAX_RECORDS;
-    const [selectedIds] = (0, hooks_1.useGridSelection)();
+    const schema = (0, hooks_2.useDataGridSchema)();
+    const view = (0, hooks_2.useSelectedView)();
+    const [sorting] = (0, hooks_2.useGridSorting)();
+    const [searchText] = (0, hooks_2.useSearchText)();
+    const extraFilter = (0, hooks_2.useGridExtraFilter)();
+    const [columnFilters] = (0, hooks_2.useGridColumnFilter)();
+    const gridColumns = (0, hooks_2.useGridColumns)();
+    const maxRecords = (0, hooks_2.useMaxRecords)();
+    const [selectedIds] = (0, hooks_2.useGridSelection)();
     const disabled = (0, useGridDisabled_1.useGridDisabled)();
     const { schemaStore } = (0, useMetadata_1.useMetadata)();
     const selectedIdsRef = (0, react_1.useRef)(selectedIds);
     selectedIdsRef.current = selectedIds;
     const setState = (0, context_1.useContextSetValue)(context_2.GridContext);
     const [search] = (0, useDebouncedValue_1.useDebouncedValue)(searchText, 500);
-    const columns = (0, react_1.useMemo)(() => {
-        const set = new Set([
-            ...gridColumns.filter((x) => !x.expandedKey).map((x) => x.name),
-            schema.primaryAttribute,
-        ]);
-        if (schema.avatarAttribute) {
-            set.add(schema.avatarAttribute);
-        }
-        return Array.from(set);
-    }, [gridColumns, schema.avatarAttribute, schema.primaryAttribute]);
-    const expand = (0, react_1.useMemo)(() => (0, utils_1.collectExpandedKeys)(gridColumns), [gridColumns]);
+    const isMobile = (0, hooks_1.useIsMobile)();
+    const columns = (0, react_1.useMemo)(() => isMobile
+        ? (0, utils_1.collectCardColumns)({ cardView: view.experience.card, schema })
+        : (0, utils_1.collectGridColumns)({
+            gridColumns,
+            schema,
+        }), [isMobile, view.experience.card, schema, gridColumns]);
+    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 filter = (0, react_1.useMemo)(() => {
         return (0, utils_1.mergeConditions)(schema, view.experience.filter, extraFilter, columnFilters, schemaStore);
     }, [columnFilters, extraFilter, schema, schemaStore, view.experience.filter]);
-    const queryKey = (0, useRetriveRecords_1.useRetrieveRecordsKey)({
-        columns,
-        expand,
-        filter,
-        maxRecords,
-        schema,
-        search,
-        sorting,
-    });
-    (0, useRetriveRecords_1.useClearDataExceptFirstPage)(queryKey);
-    const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage } = (0, useRetriveRecords_1.useRetriveRecords)(queryKey, {
+    const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage, queryKey, } = (0, useRetriveRecords_1.useRetriveRecords)({
         columns,
         expand,
         filter,
@@ -61,9 +50,12 @@ function DataResolver() {
         sorting,
         disabled,
     });
+    (0, useRetriveRecords_1.useClearDataExceptFirstPage)(queryKey);
     (0, react_1.useEffect)(() => {
         setState({
-            fetchNextPage: () => fetchNextPage,
+            fetchNextPage: () => {
+                fetchNextPage().catch(console.error);
+            },
         });
     }, [fetchNextPage, setState]);
     (0, react_1.useEffect)(() => {

package/datagrid/DataGridProvider/transformViewColumns.js

@@ -5,12 +5,12 @@ const utils_1 = require("../../locale/utils");
 function transformViewColumns(logicalName, columns, schemaStore, language) {
     const schema = schemaStore.getSchema(logicalName);
     return columns
-        .map(column => {
+        .map((column) => {
         const attribute = schema.attributes[column.name];
         if (!attribute) {
             return null;
         }
-        const label = (0, utils_1.localizedLabel)(language, attribute);
+        const label = column.label ?? (0, utils_1.localizedLabel)(language, attribute);
         if (column.expandedKey) {
             if (attribute.type !== 'lookup') {
                 return null;

package/datagrid/DataGridProvider/utils.d.ts

@@ -1,4 +1,4 @@
-import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import { CardView, ColumnCondition } from '@headless-adminapp/core/experience/view';
 import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { ISchemaStore } from '@headless-adminapp/core/store';
 import { Filter } from '@headless-adminapp/core/transport';
@@ -6,3 +6,14 @@ 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 collectExpandedKeys(columns: TransformedViewColumn<SchemaAttributes>[]): Record<string, string[]>;
+export declare function collectGridColumns<S extends SchemaAttributes = SchemaAttributes>({ gridColumns, schema, }: {
+    gridColumns: TransformedViewColumn<S>[];
+    schema: Schema<S>;
+}): (keyof S)[];
+export declare function collectCardColumns<S extends SchemaAttributes = SchemaAttributes>({ cardView, schema, }: {
+    cardView: CardView<S>;
+    schema: Schema<S>;
+}): string[];
+export declare function collectCardExpandedKeys<S extends SchemaAttributes = SchemaAttributes>({ cardView }: {
+    cardView: CardView<S>;
+}): Record<string, string[]> | undefined;

package/datagrid/DataGridProvider/utils.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformColumnFilter = transformColumnFilter;
 exports.mergeConditions = mergeConditions;
 exports.collectExpandedKeys = collectExpandedKeys;
+exports.collectGridColumns = collectGridColumns;
+exports.collectCardColumns = collectCardColumns;
+exports.collectCardExpandedKeys = collectCardExpandedKeys;
 const dayjs_1 = __importDefault(require("dayjs"));
 function transformColumnFilter(filter, schema, schemaStore) {
     const transformedResult = Object.entries(filter).reduce((acc, [id, value]) => {
@@ -122,3 +125,42 @@ function collectExpandedKeys(columns) {
         return acc;
     }, {});
 }
+function collectGridColumns({ gridColumns, schema, }) {
+    const set = new Set([
+        ...gridColumns.filter((x) => !x.expandedKey).map((x) => x.name),
+        schema.primaryAttribute,
+    ]);
+    if (schema.avatarAttribute) {
+        set.add(schema.avatarAttribute);
+    }
+    return Array.from(set);
+}
+function collectCardColumns({ cardView, schema, }) {
+    const set = new Set([
+        cardView.primaryColumn,
+        ...(cardView.secondaryColumns
+            ?.filter((x) => !x.expandedKey)
+            .map((x) => x.name) ?? []),
+        ...(cardView.rightColumn?.map((x) => x.name) ?? []),
+        schema.primaryAttribute,
+    ]);
+    if (cardView.showAvatar &&
+        (cardView.avatarColumn || schema.avatarAttribute)) {
+        set.add((cardView.avatarColumn ?? schema.avatarAttribute));
+    }
+    return Array.from(set);
+}
+function collectCardExpandedKeys({ cardView }) {
+    return cardView.secondaryColumns
+        ?.filter((x) => x.expandedKey)
+        .reduce((acc, x) => {
+        const name = x.name;
+        if (!acc[name]) {
+            acc[name] = [];
+        }
+        if (!acc[name].includes(x.expandedKey)) {
+            acc[name].push(x.expandedKey);
+        }
+        return acc;
+    }, {});
+}

package/insights/hooks/index.d.ts

@@ -1,3 +1,6 @@
-import { InsightsState } from '@headless-adminapp/core/experience/insights';
-import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { InsightConfig, InsightsState } from '@headless-adminapp/core/experience/insights';
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
 export declare function useInsightsState<S extends SchemaAttributes = SchemaAttributes>(): InsightsState<S>;
+export declare function useInsightConfig<S extends SchemaAttributes = SchemaAttributes>(): InsightConfig<S>;
+export declare function useInsightFilterValues<S extends SchemaAttributes = SchemaAttributes>(): InferredSchemaType<S>;
+export declare function useRefreshEventListener(callback: () => any): void;

package/insights/hooks/index.js

@@ -1,8 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInsightsState = useInsightsState;
+exports.useInsightConfig = useInsightConfig;
+exports.useInsightFilterValues = useInsightFilterValues;
+exports.useRefreshEventListener = useRefreshEventListener;
+const react_1 = require("react");
 const mutable_1 = require("../../mutable");
 const context_1 = require("../context");
 function useInsightsState() {
     return (0, mutable_1.useContextSelector)(context_1.InsightsContext, (state) => state);
 }
+function useInsightConfig() {
+    return (0, mutable_1.useContextSelector)(context_1.InsightsContext, (state) => state.config);
+}
+function useInsightFilterValues() {
+    return (0, mutable_1.useContextSelector)(context_1.InsightsContext, (state) => state.filterValues);
+}
+function useRefreshEventListener(callback) {
+    const eventManager = (0, mutable_1.useContextSelector)(context_1.InsightsContext, (state) => state.eventManager);
+    const callbackRef = (0, react_1.useRef)(callback);
+    callbackRef.current = callback;
+    (0, react_1.useEffect)(() => {
+        const handler = async () => {
+            await callbackRef.current();
+        };
+        eventManager.on('INSIGHT_REFRESH_TRIGGER', handler);
+        return () => {
+            eventManager.off('INSIGHT_REFRESH_TRIGGER', handler);
+        };
+    }, [eventManager]);
+}

package/metadata/MetadataProvider.js

@@ -20,7 +20,7 @@ const defaultApp = {
         label: 'Home',
         link: '/home',
         type: app_1.PageType.Custom,
-        icon: icons_1.IconPlaceholder,
+        Icon: icons_1.IconPlaceholder,
     },
     logo: {},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -36,5 +36,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "fc167255beb567e4557fa7024f8db669db8aaa33"
+  "gitHead": "8d492b1b7266fbb8bba1124a8dc51311f54f8fcb"
 }

package/store/SchemaExperienceStore.js

@@ -131,7 +131,7 @@ class SchemaExperienceStore {
     async getViewLookupV2(logicalName, viewId) {
         const experience = await this.getExperience(logicalName);
         if (!viewId) {
-            viewId = experience.defaultViewId;
+            viewId = experience.defaultLookupId;
         }
         const view = experience.lookups.find((v) => v.id === viewId);
         if (!view) {
@@ -221,7 +221,7 @@ class SchemaExperienceStore {
         const schemaMetadatas = this.getSchemaMetadataList();
         return schemaMetadatas.map((schemaMetadata) => ({
             ...schemaMetadata,
-            icon: this.experiences[schemaMetadata.logicalName]?.icon,
+            Icon: this.experiences[schemaMetadata.logicalName]?.Icon,
         }));
     }
 }

package/transport/RestDataService/index.d.ts

@@ -20,6 +20,6 @@ export declare class RestDataService implements IDataService {
     updateRecord<T>(logicalName: string, id: string, data: Partial<T>): Promise<CreateRecordResult<import("@headless-adminapp/core").Id>>;
     deleteRecord(logicalName: string, id: string): Promise<void>;
     retriveAggregate<Q extends Record<string, AggregateAttribute> = Record<string, AggregateAttribute>>(query: AggregateQuery<Q>): Promise<InferredAggregateQueryResult<Q>[]>;
-    customAction<T = unknown>(_actionName: string, _payload: unknown): Promise<T>;
+    customAction<T = unknown>(actionName: string, payload: unknown): Promise<T>;
 }
 export {};

package/transport/RestDataService/index.js

@@ -94,8 +94,15 @@ class RestDataService {
         });
         return result;
     }
-    async customAction(_actionName, _payload) {
-        throw new Error('Custom action not implemented in RestDataService, to use custom actions, define a custom data service extending RestDataService');
+    async customAction(actionName, payload) {
+        const result = await this.execute({
+            type: 'customAction',
+            payload: {
+                actionName,
+                payload,
+            },
+        });
+        return result;
     }
 }
 exports.RestDataService = RestDataService;

package/transport/hooks/useCustomActionQuery.d.ts

@@ -0,0 +1 @@
+export declare function useCustomActionQuery<T = unknown>(actionName: string, payload: unknown): import("@tanstack/react-query").UseQueryResult<T, Error>;

package/transport/hooks/useCustomActionQuery.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomActionQuery = useCustomActionQuery;
+const react_query_1 = require("@tanstack/react-query");
+const useDataService_1 = require("./useDataService");
+function useCustomActionQuery(actionName, payload) {
+    const dataService = (0, useDataService_1.useDataService)();
+    return (0, react_query_1.useQuery)({
+        queryKey: ['data', 'customAction', actionName, payload],
+        queryFn: async () => {
+            return dataService.customAction(actionName, payload);
+        },
+    });
+}

package/transport/hooks/useRetriveRecords.d.ts

@@ -4,17 +4,17 @@ import { Filter } from '@headless-adminapp/core/transport';
 import { QueryKey } from '@tanstack/react-query';
 interface UseRetriveRecordProps<S extends SchemaAttributes = SchemaAttributes> {
     schema: Schema<S>;
-    search: string;
-    filter: Filter | null;
-    sorting: SortingState<S>;
+    search?: string;
+    filter?: Filter | null;
+    sorting?: SortingState<S>;
     columns: string[];
     expand?: Partial<Record<string, string[]>>;
-    maxRecords: number;
+    maxRecords?: number;
     disabled?: boolean;
 }
-export declare function useRetrieveRecordsKey<S extends SchemaAttributes = SchemaAttributes>({ schema, search, filter, sorting, columns, expand, maxRecords, }: UseRetriveRecordProps<S>): (string | number | string[] | Filter | Partial<Record<string, string[]>> | SortingState<S> | null | undefined)[];
+export declare function useRetrieveRecordsKey<S extends SchemaAttributes = SchemaAttributes>({ schema, search, filter, sorting, columns, expand, maxRecords, }: UseRetriveRecordProps<S>): QueryKey;
 export declare function useClearDataExceptFirstPage(queryKey: QueryKey): void;
-export declare function useRetriveRecords<S extends SchemaAttributes = SchemaAttributes>(queryKey: QueryKey, { columns, expand, filter, maxRecords, schema, search, sorting, disabled, }: UseRetriveRecordProps): {
+export declare function useRetriveRecordsInternal<S extends SchemaAttributes = SchemaAttributes>(queryKey: QueryKey, { columns, expand, filter, maxRecords, schema, search, sorting, disabled, }: UseRetriveRecordProps<S>): {
     data: {
         logicalName: string;
         count: number;
@@ -29,5 +29,24 @@ export declare function useRetriveRecords<S extends SchemaAttributes = SchemaAtt
         data: import("@headless-adminapp/core/transport").RetriveRecordsResult<InferredSchemaType<S>>;
     }, unknown>, Error>>;
     isFetchingNextPage: boolean;
+    refetch: () => void;
+};
+export declare function useRetriveRecords<S extends SchemaAttributes = SchemaAttributes>({ columns, expand, filter, maxRecords, schema, search, sorting, disabled, }: UseRetriveRecordProps<S>): {
+    queryKey: QueryKey;
+    data: {
+        logicalName: string;
+        count: number;
+        records: import("@headless-adminapp/core/transport").Data<InferredSchemaType<S>>[];
+    } | null;
+    isFetching: boolean;
+    hasNextPage: boolean;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<{
+        params: {
+            pageIndex: number;
+        };
+        data: import("@headless-adminapp/core/transport").RetriveRecordsResult<InferredSchemaType<S>>;
+    }, unknown>, Error>>;
+    isFetchingNextPage: boolean;
+    refetch: () => void;
 };
 export {};

package/transport/hooks/useRetriveRecords.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRetrieveRecordsKey = useRetrieveRecordsKey;
 exports.useClearDataExceptFirstPage = useClearDataExceptFirstPage;
+exports.useRetriveRecordsInternal = useRetriveRecordsInternal;
 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 ROWS_PER_PAGE = 100;
+const MAX_RECORDS = 10000;
 function useRetrieveRecordsKey({ schema, search, filter, sorting, columns, expand, maxRecords, }) {
     const queryKey = (0, react_1.useMemo)(() => [
         'data',
@@ -26,31 +28,36 @@ function useClearDataExceptFirstPage(queryKey) {
     (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]],
-                };
-            });
+            clearDataExceptFirstPage(queryClient, queryKey);
         };
     }, [queryClient, queryKey]);
 }
-function useRetriveRecords(queryKey, { columns, expand, filter, maxRecords, schema, search, sorting, disabled, }) {
+function clearDataExceptFirstPage(queryClient, queryKey) {
+    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]],
+        };
+    });
+}
+function useRetriveRecordsInternal(queryKey, { columns, expand, filter, maxRecords, schema, search, sorting, disabled, }) {
     const dataService = (0, transport_1.useDataService)();
+    const queryClient = (0, react_query_1.useQueryClient)();
     const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = (0, react_query_1.useInfiniteQuery)({
         queryKey: queryKey,
         queryFn: async (queryContext) => {
             const params = queryContext.pageParam ?? {
                 pageIndex: 0,
             };
+            const _maxRecords = maxRecords ?? MAX_RECORDS;
             const skip = params.pageIndex * ROWS_PER_PAGE;
-            const limit = Math.min(ROWS_PER_PAGE, Math.max(0, maxRecords - skip));
+            const limit = Math.min(ROWS_PER_PAGE, Math.max(0, _maxRecords - skip));
             if (limit <= 0) {
                 return {
                     params: params,
@@ -100,11 +107,45 @@ function useRetriveRecords(queryKey, { columns, expand, filter, maxRecords, sche
             records: data?.pages.map((x) => x.data.records).flat() ?? [],
         };
     }, [data]);
+    const refech = (0, react_1.useCallback)(() => {
+        clearDataExceptFirstPage(queryClient, queryKey);
+        queryClient
+            .resetQueries({
+            queryKey,
+        })
+            .catch(console.error);
+    }, []);
     return {
         data: finalData,
         isFetching,
         hasNextPage,
         fetchNextPage,
         isFetchingNextPage,
+        refetch: refech,
+    };
+}
+function useRetriveRecords({ columns, expand, filter, maxRecords, schema, search, sorting, disabled, }) {
+    const queryKey = useRetrieveRecordsKey({
+        columns,
+        expand,
+        filter,
+        maxRecords,
+        schema,
+        search,
+        sorting,
+    });
+    const query = useRetriveRecordsInternal(queryKey, {
+        columns,
+        expand,
+        filter,
+        maxRecords,
+        schema,
+        search,
+        sorting,
+        disabled,
+    });
+    return {
+        ...query,
+        queryKey,
     };
 }

package/utils/getAttributeFormattedValue.d.ts

@@ -3,6 +3,7 @@ interface AttributeFormattedValueStringsSet {
     yes: string;
     no: string;
 }
+export declare function formatDuration(value: number | null): string;
 export declare function getAttributeFormattedValue<A extends Attribute = Attribute>(attribute: Attribute, value: InferredAttributeType<A> | null | undefined, options?: {
     maxCount?: number;
     strings?: AttributeFormattedValueStringsSet;

package/utils/getAttributeFormattedValue.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDuration = formatDuration;
 exports.getAttributeFormattedValue = getAttributeFormattedValue;
 const dayjs_1 = __importDefault(require("dayjs"));
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
@@ -104,11 +105,56 @@ function getAttributeMoneyFormattedValue(value, options) {
         currencyDisplay,
     }).format(value);
 }
+function getAttributeNumberFormattedValue(attribute, value, options) {
+    if (attribute.format === 'duration') {
+        return formatDuration(value);
+    }
+    if (attribute.format === 'time') {
+        return (0, dayjs_1.default)()
+            .startOf('day')
+            .add(value, 'minutes')
+            .format(options?.timeFormat ?? defaultTimeFormat);
+    }
+    return new Intl.NumberFormat(options?.locale).format(value);
+}
+function formatDuration(value) {
+    if (!value) {
+        return '';
+    }
+    // No decimal, if value is decimal, round to nearest whole number
+    // 1 - 1 minute
+    // 2-59 minutes -> 2-59 minutes
+    // 90 minutes -> 1.5 hours
+    // more than a day -> 1 day, 1.5 days, 2 days, etc.
+    // check if value has decimal
+    if (value % 1 !== 0) {
+        // round to nearest whole number
+        value = Math.round(value);
+    }
+    if (!value) {
+        return '';
+    }
+    if (value === 1) {
+        return '1 minute';
+    }
+    if (value < 60) {
+        return `${value} minutes`;
+    }
+    if (value === 60) {
+        return '1 hour';
+    }
+    if (value < 1440) {
+        return `${Number((value / 60).toFixed(2))} hours`;
+    }
+    if (value === 1440) {
+        return '1 day';
+    }
+    return `${Number((value / 1440).toFixed(2))} days`;
+}
 function getAttributeFormattedValue(attribute, value, options) {
     if (value === null || value === undefined) {
         return null;
     }
-    const locale = options?.locale ?? defaultLocale;
     const region = options?.region ?? 'US';
     switch (attribute.type) {
         case 'boolean':
@@ -128,7 +174,7 @@ function getAttributeFormattedValue(attribute, value, options) {
         case 'money':
             return getAttributeMoneyFormattedValue(value, options);
         case 'number':
-            return new Intl.NumberFormat(locale).format(value);
+            return getAttributeNumberFormattedValue(attribute, value, options);
         case 'attachment':
             return getAttributeAttachmentFormattedValue(value);
         case 'string':