@headless-adminapp/app 0.0.17-alpha.56 → 0.0.17-alpha.59

package/dataform/DataFormProvider/index.js

@@ -15,7 +15,7 @@ const InitialValueResolver_1 = require("./InitialValueResolver");
 const ReadonlyInfoResolver_1 = require("./ReadonlyInfoResolver");
 function DataFormProvider(props) {
     const { schemaStore } = (0, useMetadata_1.useMetadata)();
-    const { language } = (0, useLocale_1.useLocale)();
+    const { language, region } = (0, useLocale_1.useLocale)();
     const formValidationStrings = (0, FormValidationStringContext_1.useFormValidationStrings)();
     const [formReadOnly, setFormReadOnly] = (0, react_1.useState)(false); // A trick to provide readOnly info to formInstance
     const formInstance = (0, react_hook_form_1.useForm)({
@@ -28,6 +28,7 @@ function DataFormProvider(props) {
             schema: props.schema,
             strings: formValidationStrings,
             formReadOnly,
+            region,
         }),
         shouldUnregister: false,
     });

package/dataform/hooks/useFormSave.js

@@ -11,6 +11,7 @@ exports.useFormSave = useFormSave;
 // Wrapper - Loader, response message
 // Core - Extract modified fields, prepare operations, perform operations
 const route_1 = require("@headless-adminapp/app/route");
+const app_1 = require("@headless-adminapp/core/experience/app");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -35,6 +36,7 @@ function useFormSave() {
     const dataService = (0, transport_1.useDataService)();
     const { showProgressIndicator, hideProgressIndicator } = (0, useProgressIndicator_1.useProgressIndicator)();
     const openToastNotification = (0, useOpenToastNotification_1.useOpenToastNotification)();
+    const routeResolver = (0, route_1.useRouteResolver)();
     const client = (0, react_query_1.useQueryClient)();
     const router = (0, route_1.useRouter)();
     function showMessageAfterSave({ isCreatedMode }) {
@@ -81,12 +83,17 @@ function useFormSave() {
                     });
                     return;
                 }
-                // invalidateQueriesAfterSave({
-                //   client,
-                // });
-                if (mode === 'save' && record) {
-                    await refresh();
-                    // client.invalidateQueries({ queryKey: ['data', 'retriveRecord'] });
+                if (mode === 'save') {
+                    if (record) {
+                        await refresh();
+                    }
+                    else {
+                        router.replace(routeResolver({
+                            type: app_1.PageType.EntityForm,
+                            logicalName: schema.logicalName,
+                            id: result.recordId,
+                        }));
+                    }
                 }
                 else {
                     await client.invalidateQueries({
@@ -99,14 +106,6 @@ function useFormSave() {
                 await client.invalidateQueries({
                     queryKey: ['data', 'retriveRecords'],
                 });
-                // redirectAfterSave({
-                //   navigation,
-                //   isCreatedMode: !context.state.record,
-                //   recordId: result.recordId,
-                //   reset: form.reset,
-                //   logicalName: schema.logicalName,
-                //   mode,
-                // });
                 showMessageAfterSave({
                     isCreatedMode: !record,
                 });

package/dataform/utils/index.d.ts

@@ -24,10 +24,11 @@ interface FormValidatorOptions<A extends SchemaAttributes = SchemaAttributes> {
     readonlyAttributes?: string[];
     strings: FormValidationStringSet;
     schemaStore: ISchemaStore;
+    region: string;
 }
 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;
-export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ columns, editableGrids, language, schema, strings, readonlyAttributes, }: {
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ columns, editableGrids, language, schema, strings, readonlyAttributes, region, }: {
     schema: Schema<A>;
     columns: string[];
     readonlyAttributes?: string[];
@@ -39,9 +40,10 @@ export declare const generateValidationSchema: (<A extends SchemaAttributes = Sc
     }> | undefined;
     language: string;
     strings: FormValidationStringSet;
+    region: string;
 }) => yup.ObjectSchema<{
     [x: string]: any;
 }, yup.AnyObject, {
     [x: string]: any;
 }, "">) & MemoizedFunction;
-export declare const generateAttributeValidationSchema: ((attribute: Attribute, language: string, strings: FormValidationStringSet) => yup.Schema<any, any, any, "">) & MemoizedFunction;
+export declare const generateAttributeValidationSchema: ((attribute: Attribute, language: string, strings: FormValidationStringSet, region: string) => yup.Schema<any, any, any, "">) & MemoizedFunction;

package/dataform/utils/index.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateAttributeValidationSchema = exports.generateValidationSchema = 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");
 const lodash_1 = require("lodash");
 const yup = __importStar(require("yup"));
@@ -96,7 +97,7 @@ function getInitialValues({ cloneRecord, form, record, recordId, schema, default
         };
     }, {});
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator({ form, schema, readonlyAttributes, formReadOnly, schemaStore, language, strings, }) {
+exports.formValidator = (0, lodash_1.memoize)(function formValidator({ form, schema, readonlyAttributes, formReadOnly, schemaStore, language, strings, region, }) {
     return async (values, context, options) => {
         let validator = yup.object().shape({});
         if (!formReadOnly) {
@@ -140,6 +141,7 @@ exports.formValidator = (0, lodash_1.memoize)(function formValidator({ form, sch
                 language,
                 strings,
                 readonlyAttributes,
+                region,
             });
         }
         const resolver = (0, yup_1.yupResolver)(validator);
@@ -154,14 +156,14 @@ exports.formValidator = (0, lodash_1.memoize)(function formValidator({ form, sch
     readonlyAttributes,
     formReadOnly,
 }));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ columns, editableGrids, language, schema, strings, readonlyAttributes, }) {
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ columns, editableGrids, language, schema, strings, readonlyAttributes, region, }) {
     return yup.object().shape({
         ...columns.reduce((acc, column) => {
             if (readonlyAttributes?.includes(column)) {
                 return acc;
             }
             const attribute = schema.attributes[column];
-            const validationSchema = (0, exports.generateAttributeValidationSchema)(attribute, language, strings);
+            const validationSchema = (0, exports.generateAttributeValidationSchema)(attribute, language, strings, region);
             return {
                 ...acc,
                 [column]: validationSchema,
@@ -173,7 +175,7 @@ exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValida
                 .of(yup.object().shape({
                 ...grid.columns.reduce((acc, column) => {
                     const attribute = grid.schema.attributes[column];
-                    const validationSchema = (0, exports.generateAttributeValidationSchema)(attribute, language, strings);
+                    const validationSchema = (0, exports.generateAttributeValidationSchema)(attribute, language, strings, region);
                     return {
                         ...acc,
                         [column]: validationSchema,
@@ -190,13 +192,14 @@ exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValida
             return acc;
         }, {}),
     });
-}, ({ columns, editableGrids, language, schema, strings, readonlyAttributes }) => JSON.stringify({
+}, ({ columns, editableGrids, language, schema, strings, readonlyAttributes, region, }) => JSON.stringify({
     schema,
     columns,
     editableGrids,
     language,
     strings,
     readonlyAttributes,
+    region,
 }));
 function createAttributeValidationSchema(attribute) {
     let validationSchema;
@@ -224,7 +227,7 @@ function extendAttributeRequiredValidationSchema({ attribute, validationSchema,
     }
     return validationSchema;
 }
-function extendAttributeValidationSchema({ attribute, validationSchema, label, strings, }) {
+function extendAttributeValidationSchema({ attribute, validationSchema, label, strings, region, }) {
     switch (attribute.type) {
         case 'string':
             validationSchema = extendAttributeStringValidationSchema({
@@ -232,6 +235,7 @@ function extendAttributeValidationSchema({ attribute, validationSchema, label, s
                 validationSchema: validationSchema,
                 label,
                 strings,
+                region,
             });
             break;
         case 'attachments':
@@ -247,7 +251,7 @@ function extendAttributeValidationSchema({ attribute, validationSchema, label, s
     }
     return validationSchema;
 }
-function extendAttributeStringValidationSchema({ attribute, validationSchema, label, strings, }) {
+function extendAttributeStringValidationSchema({ attribute, validationSchema, label, strings, region, }) {
     if (attribute.maxLength) {
         // extend the validation schema with the max length
         validationSchema = validationSchema.max(attribute.maxLength, `${label}: ${strings.maxLength}`);
@@ -266,7 +270,16 @@ function extendAttributeStringValidationSchema({ attribute, validationSchema, la
     }
     else if (attribute.format === 'phone') {
         // extend the validation schema with the phone format
-        validationSchema = validationSchema.matches(/^(\+\d{1,2}\s?)?\d{10}$/, `${label}: ${strings.invalidPhoneNumber}`);
+        validationSchema = validationSchema.test({
+            message: `${label}: ${strings.invalidPhoneNumber}`,
+            test: (value) => {
+                if (!value) {
+                    return true;
+                }
+                const phoneNumber = (0, phone_1.parsePhoneNumber)(value, region);
+                return phoneNumber.isValid;
+            },
+        });
     }
     return validationSchema;
 }
@@ -286,7 +299,7 @@ function extendAttributeAttachmentsValidationSchema({ attribute, validationSchem
     }
     return validationSchema;
 }
-exports.generateAttributeValidationSchema = (0, lodash_1.memoize)(function generateAttributeValidationSchema(attribute, language, strings) {
+exports.generateAttributeValidationSchema = (0, lodash_1.memoize)(function generateAttributeValidationSchema(attribute, language, strings, region) {
     let validationSchema = createAttributeValidationSchema(attribute);
     const label = (0, utils_1.localizedLabel)(language, attribute);
     validationSchema = extendAttributeRequiredValidationSchema({
@@ -300,6 +313,7 @@ exports.generateAttributeValidationSchema = (0, lodash_1.memoize)(function gener
         validationSchema,
         label,
         strings,
+        region,
     });
     validationSchema = validationSchema.transform((value) => {
         if (value === '') {

package/datagrid/DataGridProvider/DataResolver.js

@@ -8,6 +8,7 @@ const context_1 = require("../../mutable/context");
 const useRetriveRecords_1 = require("../../transport/hooks/useRetriveRecords");
 const context_2 = require("../context");
 const hooks_1 = require("../hooks");
+const useGridDisabled_1 = require("../hooks/useGridDisabled");
 const utils_1 = require("./utils");
 const MAX_RECORDS = 10000;
 function DataResolver() {
@@ -20,6 +21,7 @@ function DataResolver() {
     const gridColumns = (0, hooks_1.useGridColumns)();
     const maxRecords = (0, hooks_1.useMaxRecords)() ?? MAX_RECORDS;
     const [selectedIds] = (0, hooks_1.useGridSelection)();
+    const disabled = (0, useGridDisabled_1.useGridDisabled)();
     const { schemaStore } = (0, useMetadata_1.useMetadata)();
     const selectedIdsRef = (0, react_1.useRef)(selectedIds);
     selectedIdsRef.current = selectedIds;
@@ -57,6 +59,7 @@ function DataResolver() {
         schema,
         search,
         sorting,
+        disabled,
     });
     (0, react_1.useEffect)(() => {
         setState({

package/datagrid/DataGridProvider/index.d.ts

@@ -19,5 +19,6 @@ export interface DataGridProviderProps<S extends SchemaAttributes = SchemaAttrib
     };
     allowViewSelection?: boolean;
     maxRecords?: number;
+    disabled?: boolean;
 }
 export declare function DataGridProvider<S extends SchemaAttributes = SchemaAttributes, CommandContext extends EntityMainGridCommandContext | EntitySubGridCommandContext = EntityMainGridCommandContext>(props: PropsWithChildren<DataGridProviderProps<S, CommandContext>>): import("react/jsx-runtime").JSX.Element;

package/datagrid/DataGridProvider/index.js

@@ -44,6 +44,7 @@ function DataGridProvider(props) {
         allowViewSelection: props.allowViewSelection ?? false,
         maxRecords: props.maxRecords,
         associated: props.associated,
+        disabled: props.disabled ?? false,
     });
     (0, react_1.useEffect)(() => {
         contextValue.setValue({
@@ -78,5 +79,10 @@ function DataGridProvider(props) {
             associated: props.associated,
         });
     }, [props.isSubGrid, props.associated, contextValue]);
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            disabled: props.disabled ?? false,
+        });
+    }, [props.disabled, contextValue]);
     return ((0, jsx_runtime_1.jsxs)(context_2.GridContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)(DataResolver_1.DataResolver, {}), props.children] }));
 }

package/datagrid/context.d.ts

@@ -13,6 +13,7 @@ export interface GridContextState<S extends SchemaAttributes = SchemaAttributes,
     extraFilter?: Filter;
     commands?: CommandItemExperience<CommandContext>[][];
     maxRecords?: number;
+    disabled?: boolean;
     associated?: false | {
         logicalName: string;
         id: string;

package/datagrid/hooks/useGridDisabled.d.ts

@@ -0,0 +1 @@
+export declare function useGridDisabled(): boolean | undefined;

package/datagrid/hooks/useGridDisabled.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridDisabled = useGridDisabled;
+const mutable_1 = require("../../mutable");
+const context_1 = require("../context");
+function useGridDisabled() {
+    return (0, mutable_1.useContextSelector)(context_1.GridContext, (state) => state.disabled);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "0.0.17-alpha.56",
+  "version": "0.0.17-alpha.59",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,11 +27,12 @@
     "dayjs": "^1.11.13",
     "exceljs": "^4.4.0",
     "json-to-csv-export": "^2.1.1",
+    "libphonenumber-js": "1.11.20",
     "lodash": "^4.17.21",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-hook-form": "7.52.2",
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "f9d26e133d9298174cde57f72a5d719d8320c667"
+  "gitHead": "813d07729a10a5613b46f012ba4b24bcaab384dc"
 }

package/transport/hooks/useRetriveRecords.d.ts

@@ -10,10 +10,11 @@ interface UseRetriveRecordProps<S extends SchemaAttributes = SchemaAttributes> {
     columns: string[];
     expand?: Partial<Record<string, string[]>>;
     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 useClearDataExceptFirstPage(queryKey: QueryKey): void;
-export declare function useRetriveRecords<S extends SchemaAttributes = SchemaAttributes>(queryKey: QueryKey, { columns, expand, filter, maxRecords, schema, search, sorting, }: UseRetriveRecordProps): {
+export declare function useRetriveRecords<S extends SchemaAttributes = SchemaAttributes>(queryKey: QueryKey, { columns, expand, filter, maxRecords, schema, search, sorting, disabled, }: UseRetriveRecordProps): {
     data: {
         logicalName: string;
         count: number;

package/transport/hooks/useRetriveRecords.js

@@ -41,7 +41,7 @@ function useClearDataExceptFirstPage(queryKey) {
         };
     }, [queryClient, queryKey]);
 }
-function useRetriveRecords(queryKey, { columns, expand, filter, maxRecords, schema, search, sorting, }) {
+function useRetriveRecords(queryKey, { columns, expand, filter, maxRecords, schema, search, sorting, disabled, }) {
     const dataService = (0, transport_1.useDataService)();
     const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = (0, react_query_1.useInfiniteQuery)({
         queryKey: queryKey,
@@ -88,6 +88,7 @@ function useRetriveRecords(queryKey, { columns, expand, filter, maxRecords, sche
         initialPageParam: {
             pageIndex: 0,
         },
+        enabled: !disabled,
     });
     const finalData = (0, react_1.useMemo)(() => {
         if (!data?.pages.length) {

package/utils/getAttributeFormattedValue.d.ts

@@ -13,5 +13,6 @@ export declare function getAttributeFormattedValue<A extends Attribute = Attribu
     currencySign?: 'accounting' | 'standard';
     currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code';
     timezone?: string;
+    region?: string;
 }): string | null;
 export {};

package/utils/getAttributeFormattedValue.js

@@ -7,6 +7,7 @@ exports.getAttributeFormattedValue = getAttributeFormattedValue;
 const dayjs_1 = __importDefault(require("dayjs"));
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const phone_1 = require("./phone");
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
 const defaultAttributeFormattedValueStrings = {
@@ -108,6 +109,7 @@ function getAttributeFormattedValue(attribute, value, options) {
         return null;
     }
     const locale = options?.locale ?? defaultLocale;
+    const region = options?.region ?? 'US';
     switch (attribute.type) {
         case 'boolean':
             return getAttributeBooleanFormattedValue(attribute, value, options);
@@ -129,6 +131,13 @@ function getAttributeFormattedValue(attribute, value, options) {
             return new Intl.NumberFormat(locale).format(value);
         case 'attachment':
             return getAttributeAttachmentFormattedValue(value);
+        case 'string':
+            if (attribute.format === 'phone' && typeof value === 'string') {
+                return (0, phone_1.parsePhoneNumber)(value, region).formattedNationalValue;
+            }
+            return typeof value === 'object'
+                ? JSON.stringify(value)
+                : value;
         default:
             return typeof value === 'object'
                 ? JSON.stringify(value)

package/utils/phone.d.ts

@@ -0,0 +1,13 @@
+export declare function parsePhoneNumber(input: string, defaultCountry?: string): {
+    formattedInternationalValue: string;
+    formattedNationalValue: string;
+    rawValue: string;
+    isValid: boolean;
+    uri: string;
+} | {
+    formattedInternationalValue: string;
+    formattedNationalValue: string;
+    rawValue: string;
+    isValid: boolean;
+    uri: null;
+};

package/utils/phone.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parsePhoneNumber = parsePhoneNumber;
+const libphonenumber_js_1 = require("libphonenumber-js");
+function parsePhoneNumber(input, defaultCountry) {
+    try {
+        const phoneNumber = (0, libphonenumber_js_1.parsePhoneNumberWithError)(input, defaultCountry);
+        let rawValue = String(phoneNumber.number);
+        if (phoneNumber.ext) {
+            rawValue += ';ext=' + phoneNumber.ext;
+        }
+        let formattedNational = phoneNumber.formatInternational();
+        if (defaultCountry && defaultCountry === phoneNumber.country) {
+            formattedNational = phoneNumber.formatNational();
+        }
+        return {
+            formattedInternationalValue: phoneNumber.formatInternational(),
+            formattedNationalValue: formattedNational,
+            rawValue: rawValue,
+            isValid: phoneNumber.isPossible(),
+            uri: phoneNumber.getURI(),
+        };
+    }
+    catch (error) {
+        return {
+            formattedInternationalValue: input,
+            formattedNationalValue: input,
+            rawValue: input,
+            isValid: false,
+            uri: null,
+        };
+    }
+}