@headless-adminapp/fluent 1.4.5 → 1.4.6

package/App/AppStringContext.d.ts

@@ -2,7 +2,7 @@ import { CalendarStrings } from '@fluentui/react-datepicker-compat';
 import { OperatorStrings } from '@headless-adminapp/app/datagrid/column-filter';
 export interface AppStringSet {
     datePickerStrings: CalendarStrings;
-    loockupStrings: {
+    lookupStrings: {
         newRecord: string;
         noRecordsFound: string;
     };

package/App/AppStringContext.js

@@ -8,7 +8,7 @@ const react_1 = require("react");
 exports.defaultAppStrings = {
     datePickerStrings: react_datepicker_compat_1.defaultDatePickerStrings,
     operatorStrings: column_filter_1.defaultOperatorStrings,
-    loockupStrings: {
+    lookupStrings: {
         newRecord: 'New Record',
         noRecordsFound: 'No records found',
     },

package/PageEntityForm/StandardControl.js

@@ -180,7 +180,7 @@ const StandardControl = (props) => {
         }
         case 'lookup': {
             const Control = componentStore_1.componentStore.getComponent('Form.LookupControl') ?? LookupControl_1.LookupControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord, skeleton: skeleton }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), allowNavigation: allowNavigation, allowNewRecord: allowNewRecord, skeleton: skeleton }));
         }
         case 'lookups': {
             const Control = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl') ?? MultiSelectLookupControl_1.MultiSelectLookupControl;

package/form/controls/LookupControl.d.ts

@@ -1,5 +1,4 @@
 import { Schema } from '@headless-adminapp/core/schema';
-import { ISchemaExperienceStore } from '@headless-adminapp/core/store';
 import { IDataService } from '@headless-adminapp/core/transport';
 import { ControlProps } from './types';
 export interface LookupOption {
@@ -14,12 +13,8 @@ export type DataLookup = {
     avatar?: string;
 };
 export type LookupControlProps = ControlProps<DataLookup> & {
-    async?: boolean;
-    lookupKey?: string;
-    openRecord?: (id: string) => void;
     dataService: IDataService;
     schema: Schema;
-    experienceStore: ISchemaExperienceStore;
     viewId?: string;
     allowNavigation?: boolean;
     allowNewRecord?: boolean;

package/form/controls/LookupControl.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const app_1 = require("@headless-adminapp/app/app");
 const hooks_1 = require("@headless-adminapp/app/hooks");
+const useRecentItemStore_1 = require("@headless-adminapp/app/metadata/hooks/useRecentItemStore");
 const hooks_2 = require("@headless-adminapp/app/route/hooks");
 const app_2 = require("@headless-adminapp/core/experience/app");
 const icons_1 = require("@headless-adminapp/icons");
@@ -37,9 +38,10 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
-    const { loockupStrings } = (0, AppStringContext_1.useAppStrings)();
+    const { lookupStrings } = (0, AppStringContext_1.useAppStrings)();
     const routeResolver = (0, hooks_2.useRouteResolver)();
     const router = (0, hooks_2.useRouter)();
+    const recentItemStore = (0, useRecentItemStore_1.useRecentItemStore)();
     const path = (0, react_1.useMemo)(() => {
         if (!value) {
             return '';
@@ -67,24 +69,6 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     }, [open]);
     const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
     const styles = useStyles();
-    // const useLookupData = useMemo(
-    //   () =>
-    //     createUseLookupDataHook({
-    //       dataResolver: dataResolverRef.current,
-    //       useLookupQuery: undefined,
-    //       lookupKey,
-    //     }),
-    //   [lookupKey]
-    // );
-    // const {
-    //   data,
-    //   isLoading: loading,
-    //   isFetching,
-    // } = useLookupData({
-    //   limit: 10,
-    //   search: async ? debouncedSearchText : '',
-    //   enabled: lookupEnabled,
-    // });
     const { isLoading: isViewLoading, view } = (0, useLookupData_1.useGetLookupView)(schema.logicalName, viewId);
     const { data, isLoading } = (0, useLookupData_1.useLookupData)({
         schema,
@@ -123,16 +107,19 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     setSearchText(e.target.value);
                 }, onOptionSelect: (e, item) => {
                     const _item = data?.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
+                    if (_item) {
+                        recentItemStore.addItem((0, useLookupData_1.createLookupRecentKey)(schema.logicalName), _item[schema.idAttribute], _item[schema.idAttribute]);
+                    }
                     handleChange(_item ?? null);
                 }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: view?.experience.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: loockupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
                                         router.push(routeResolver({
                                             logicalName: schema.logicalName,
                                             type: app_2.PageType.EntityForm,
                                         }));
-                                    }, children: loockupStrings.newRecord }) })] }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    }, children: lookupStrings.newRecord }) })] }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     alignItems: 'center',

package/form/controls/MultiSelectLookupControl.js

@@ -35,7 +35,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
-    const { loockupStrings } = (0, AppStringContext_1.useAppStrings)();
+    const { lookupStrings } = (0, AppStringContext_1.useAppStrings)();
     (0, react_1.useEffect)(() => {
         if (open)
             setLookupEnabled(true);
@@ -145,7 +145,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                 }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view?.experience.card, record: item, schema: schema }) }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: loockupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), children: loockupStrings.newRecord }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: tagGroupContainerRef, style: {
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), children: lookupStrings.newRecord }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: tagGroupContainerRef, style: {
                     position: 'absolute',
                     top: 4,
                     left: 0,

package/form/controls/RegardingControl.js

@@ -39,7 +39,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
-    const { loockupStrings } = (0, AppStringContext_1.useAppStrings)();
+    const { lookupStrings } = (0, AppStringContext_1.useAppStrings)();
     const routeResolver = (0, hooks_2.useRouteResolver)();
     const router = (0, hooks_2.useRouter)();
     const path = (0, react_1.useMemo)(() => {
@@ -154,7 +154,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                         result.every((item) => !item.data?.records.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: loockupStrings.noRecordsFound }) }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.noRecordsFound }) }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     alignItems: 'center',

package/form/controls/useLookupData.d.ts

@@ -1,15 +1,15 @@
 import { ViewExperience } from '@headless-adminapp/core/experience/view';
 import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { IDataService, RetriveRecordsResult } from '@headless-adminapp/core/transport';
-interface UseLookupDataOptions {
+interface UseLookupDataOptions<S extends SchemaAttributes = SchemaAttributes> {
     dataService: IDataService;
     searchText?: string;
-    schema: Schema;
+    schema: Schema<S>;
     view: ViewExperience | null | undefined;
     enabled?: boolean;
 }
-export declare function useLookupData<S extends SchemaAttributes = SchemaAttributes>({ schema, view, searchText, dataService, enabled, }: UseLookupDataOptions): {
-    data: RetriveRecordsResult<InferredSchemaType<S>> | undefined;
+export declare function useLookupData<S extends SchemaAttributes = SchemaAttributes>({ schema, view, searchText, dataService, enabled, }: UseLookupDataOptions<S>): {
+    data: RetriveRecordsResult<InferredSchemaType<S>>;
     isLoading: boolean;
 };
 interface UseLookupsDataOptions {
@@ -26,4 +26,5 @@ export declare function useGetLookupView(logicalName: string, viewId?: string):
     isLoading: boolean;
     view: import("@headless-adminapp/core/experience/view").View<SchemaAttributes> | undefined;
 };
+export declare function createLookupRecentKey(logicalName: string): string;
 export {};

package/form/controls/useLookupData.js

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLookupData = useLookupData;
 exports.useLookupDatas = useLookupDatas;
 exports.useGetLookupView = useGetLookupView;
+exports.createLookupRecentKey = createLookupRecentKey;
+const utils_1 = require("@headless-adminapp/app/datagrid/DataGridProvider/utils");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
+const useRecentItemStore_1 = require("@headless-adminapp/app/metadata/hooks/useRecentItemStore");
+const useRetriveRecords_1 = require("@headless-adminapp/app/transport/hooks/useRetriveRecords");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 function extractColumns(schema, view) {
@@ -44,6 +48,7 @@ function getKey({ schema, view, columns, expand, search, }) {
 }
 function useLookupData({ schema, view, searchText, dataService, enabled, }) {
     const [search] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const recentIds = useLookupRecentIds(createLookupRecentKey(schema.logicalName));
     const columns = (0, react_1.useMemo)(() => {
         return extractColumns(schema, view);
     }, [schema, view]);
@@ -73,9 +78,63 @@ function useLookupData({ schema, view, searchText, dataService, enabled, }) {
         placeholderData: react_query_1.keepPreviousData,
         enabled: enabled ?? false,
     });
+    const recentQueryFilter = (0, react_1.useMemo)(() => {
+        return (0, utils_1.mergeFilters)(view?.filter, {
+            type: 'and',
+            conditions: [
+                {
+                    field: schema.idAttribute,
+                    operator: 'in',
+                    value: recentIds,
+                },
+            ],
+        });
+    }, [view?.filter, schema.idAttribute, recentIds]);
+    const { data: recentData, isFetching: isRecentFetching } = (0, useRetriveRecords_1.useRetriveRecords)({
+        columns,
+        expand,
+        schema,
+        search: '',
+        filter: recentQueryFilter,
+        disabled: !enabled || !recentIds.length,
+        sorting: view?.defaultSorting,
+        maxRecords: 5,
+    });
+    const mergedData = (0, react_1.useMemo)(() => {
+        const ids = new Set();
+        const items = [];
+        const idAttribute = schema.idAttribute;
+        if (recentData?.records) {
+            for (const id of recentIds) {
+                if (ids.has(id)) {
+                    continue;
+                }
+                const item = recentData.records.find((x) => x[idAttribute] === id);
+                if (item) {
+                    items.push(item);
+                    ids.add(item[idAttribute]);
+                }
+            }
+        }
+        if (data?.records) {
+            for (const item of data.records) {
+                if (ids.has(item[idAttribute])) {
+                    continue;
+                }
+                ids.add(item[idAttribute]);
+                items.push(item);
+            }
+        }
+        items.length = Math.min(items.length, 5);
+        return {
+            logicalName: schema.logicalName,
+            count: items.length,
+            records: items,
+        };
+    }, [data, recentData, recentIds, schema.idAttribute, schema.logicalName]);
     return {
-        data,
-        isLoading: isFetching,
+        data: mergedData,
+        isLoading: isFetching || isRecentFetching,
     };
 }
 function useLookupDatas({ dataService, searchText, enabled, items, }) {
@@ -131,3 +190,20 @@ function useGetLookupView(logicalName, viewId) {
         view: data,
     };
 }
+function useLookupRecentIds(cacheKey) {
+    const store = (0, useRecentItemStore_1.useRecentItemStore)();
+    const [items, setItems] = (0, react_1.useState)(store.getItems(cacheKey, 5).map((x) => x.value));
+    (0, react_1.useEffect)(() => {
+        const listener = (newItems) => {
+            setItems(newItems.map((x) => x.value));
+        };
+        store.addListener(cacheKey, listener);
+        return () => {
+            store.removeListener(cacheKey, listener);
+        };
+    }, [store, cacheKey]);
+    return items;
+}
+function createLookupRecentKey(logicalName) {
+    return `lookup-${logicalName}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "5f91697e5b3d509091ea75d4c2e61e64a492aa91"
+  "gitHead": "89d91fe63da3aae42fc34482cc90c1e12963810b"
 }