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

package/DataGrid/useTableColumns.js

@@ -13,6 +13,7 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
 const hooks_4 = require("@headless-adminapp/app/recordset/hooks");
 const hooks_5 = require("@headless-adminapp/app/route/hooks");
 const utils_1 = require("@headless-adminapp/app/utils");
+const phone_1 = require("@headless-adminapp/app/utils/phone");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
@@ -264,6 +265,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         currencyDisplay: currency.currencyDisplay,
         currencySign: currency.currencySign,
         locale: locale.locale,
+        region: locale.region,
     }) ?? '';
     if (column.plainText) {
         return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
@@ -311,6 +313,18 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         case 'choice':
             return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
     }
+    if (attribute.type === 'string' && attribute.format === 'phone') {
+        const parsedNumber = (0, phone_1.parsePhoneNumber)(value, locale.region);
+        if (parsedNumber.isValid && parsedNumber.uri) {
+            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: parsedNumber.uri }, column.id));
+        }
+    }
+    if (attribute.type === 'string' &&
+        attribute.format === 'email' &&
+        value &&
+        typeof value === 'string') {
+        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: `mailto:${value}` }, column.id));
+    }
     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
 }
 function renderPrimaryAttribute({ info, column, schema, routeResolver, openRecord, value, }) {

package/DialogContainer/PromptDialog.d.ts

@@ -15,12 +15,22 @@ interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     onDismiss?: PromptDialogOptions<SA>['onDismiss'];
 }
 export declare function PromptDialog(props: PromptDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
+export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
 }>>) & import("lodash").MemoizedFunction;
-export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => yup.ObjectSchema<{
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => yup.ObjectSchema<{
     [x: string]: any;
 }, yup.AnyObject, {
     [x: string]: any;

package/DialogContainer/PromptDialog.js

@@ -37,13 +37,18 @@ const yup = __importStar(require("yup"));
 const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
-    const { language } = (0, locale_1.useLocale)();
+    const { language, region } = (0, locale_1.useLocale)();
     const formValidationStrings = (0, form_1.useFormValidationStrings)();
     const form = (0, react_hook_form_1.useForm)({
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, exports.formValidator)(props.attributes, language, formValidationStrings),
+        resolver: (0, exports.formValidator)({
+            attributes: props.attributes,
+            language,
+            strings: formValidationStrings,
+            region,
+        }),
     });
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             props.onDismiss?.();
@@ -70,24 +75,29 @@ function PromptDialog(props) {
                                     })();
                                 }, children: props.confirmText ?? 'Confirm' })] })] }) }) }));
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes, language, strings) {
+exports.formValidator = (0, lodash_1.memoize)(function formValidator({ attributes, language, strings, region, }) {
     return async (values, context, options) => {
-        const validator = (0, exports.generateValidationSchema)(attributes, language, strings);
+        const validator = (0, exports.generateValidationSchema)({
+            attributes,
+            language,
+            strings,
+            region,
+        });
         const resolver = (0, yup_1.yupResolver)(validator);
         const result = await resolver(values, context, options);
         return result;
     };
-}, (attributes) => JSON.stringify({ attributes }));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes, language, strings) {
+}, (options) => JSON.stringify(options));
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ attributes, language, strings, region, }) {
     const columns = Object.keys(attributes);
     return yup.object().shape({
         ...columns.reduce((acc, column) => {
             const attribute = attributes[column];
-            const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings);
+            const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings, region);
             return {
                 ...acc,
                 [column]: validationSchema,
             };
         }, {}),
     });
-}, (attributes) => JSON.stringify({ attributes }));
+}, (options) => JSON.stringify(options));

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -19,6 +19,7 @@ const CommandContainer_1 = require("./CommandContainer");
 const FormTabRelated_1 = require("./FormTabRelated");
 const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
 const ProcessFlow_1 = require("./ProcessFlow");
+const RecordAvatar_1 = require("./RecordAvatar");
 const RelatedViewSelector_1 = require("./RelatedViewSelector");
 const SectionContainer_1 = require("./SectionContainer");
 let previousCachedActiveTabInfo = null;
@@ -53,7 +54,7 @@ const PageEntityFormDesktopContainer = () => {
             };
         }
     }, [setActiveTab, formConfig, schema]);
-    const recordTitle = (0, hooks_1.useRecordTitle)();
+    const [recordTitle] = (0, hooks_1.useRecordTitle)();
     // const readonly = useIsFormReadonly();
     const formInstance = (0, hooks_1.useFormInstance)();
     const isDirty = (0, hooks_1.useFormIsDirty)();
@@ -101,7 +102,7 @@ const PageEntityFormDesktopContainer = () => {
                                     paddingInline: react_components_1.tokens.spacingHorizontalM,
                                     paddingTop: react_components_1.tokens.spacingVerticalS,
                                     marginBottom: react_components_1.tokens.spacingVerticalS,
-                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, children: [(0, jsx_runtime_1.jsx)(RecordAvatar_1.RecordAvatar, {}), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     gap: react_components_1.tokens.spacingHorizontalXS,
                                                     alignItems: 'center',

package/PageEntityForm/RecordAvatar.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const RecordAvatar: FC;

package/PageEntityForm/RecordAvatar.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordAvatar = void 0;
+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 dataform_1 = require("@headless-adminapp/app/dataform");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const dialog_1 = require("@headless-adminapp/app/dialog");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const progress_indicator_1 = require("@headless-adminapp/app/progress-indicator");
+const transport_1 = require("@headless-adminapp/app/transport");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const avatar_1 = require("../utils/avatar");
+const UploadImageDialog_1 = require("./UploadImageDialog");
+const RecordAvatar = () => {
+    const [recordTitle, isPlaceholder] = (0, hooks_1.useRecordTitle)();
+    const schema = (0, hooks_1.useDataFormSchema)();
+    const record = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.record);
+    const recordId = (0, hooks_1.useRecordId)();
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
+    const dataService = (0, transport_1.useDataService)();
+    const refresh = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.refresh);
+    const [showAvatarChangeDialog, setShowAvatarChangeDialog] = (0, react_1.useState)(false);
+    const { showProgressIndicator, hideProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
+    const openErrorDialog = (0, dialog_1.useOpenErrorDialog)();
+    if (!schema.avatarAttribute) {
+        return null;
+    }
+    const avatarAttribute = schema.attributes[schema.avatarAttribute];
+    if (avatarAttribute?.type !== 'attachment') {
+        return null;
+    }
+    const value = record?.[schema.avatarAttribute];
+    const handleChange = async (value) => {
+        if (!recordId) {
+            return;
+        }
+        console.log('onChange', value);
+        try {
+            showProgressIndicator();
+            await dataService.updateRecord(schema.logicalName, recordId, {
+                [schema.avatarAttribute]: value,
+            });
+            await refresh();
+        }
+        catch (error) {
+            openErrorDialog({
+                title: 'Error',
+                text: 'Unable to update record',
+            });
+        }
+        finally {
+            hideProgressIndicator();
+        }
+    };
+    if (isPlaceholder && !value) {
+        const experienceSchema = schemaMetadataDic[schema.logicalName];
+        const Icon = experienceSchema.icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-start',
+                marginRight: react_components_1.tokens.spacingHorizontalM,
+                marginTop: 2,
+            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: { width: 36, height: 36 }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            marginRight: react_components_1.tokens.spacingHorizontalM,
+            marginTop: 2,
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: { width: 36, height: 36 }, name: recordTitle, color: (0, avatar_1.getAvatarColor)(recordTitle), image: {
+                    src: value?.url,
+                }, onClick: () => {
+                    setShowAvatarChangeDialog(true);
+                } }), !!recordId && ((0, jsx_runtime_1.jsx)(UploadImageDialog_1.UploadImageDialog, { recordTitle: recordTitle, currentImage: value, onChange: handleChange, recordId: recordId, open: showAvatarChangeDialog, onOpenChange: (open) => setShowAvatarChangeDialog(open) }))] }));
+};
+exports.RecordAvatar = RecordAvatar;

package/PageEntityForm/SubgridControl.js

@@ -7,6 +7,7 @@ const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProv
 const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const react_1 = require("react");
 const FormSubgridContainer_1 = require("../PageEntityView/FormSubgridContainer");
+const FormSubgridNotAvailableContainer_1 = require("../PageEntityView/FormSubgridNotAvailableContainer");
 function SubgridControl(props) {
     const schema = (0, hooks_1.useSchema)(props.logicalName);
     const [viewId, setViewId] = (0, react_1.useState)(props.viewId);
@@ -62,5 +63,6 @@ function SubgridControl(props) {
         return brokenContent;
     }
     const ContainerComponent = props.ContainerComponent ?? FormSubgridContainer_1.FormSubgridContainer;
-    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: !!props.associated, associated: props.associated, extraFilter: extraFilter, allowViewSelection: props.allowViewSelection ?? false, children: (0, jsx_runtime_1.jsx)(ContainerComponent, {}) }));
+    const disabled = !!props.associated && !props.associated.id;
+    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: !!props.associated, associated: props.associated, extraFilter: extraFilter, allowViewSelection: props.allowViewSelection ?? false, disabled: disabled, children: disabled ? (0, jsx_runtime_1.jsx)(FormSubgridNotAvailableContainer_1.FormSubgridNotAvailableContainer, {}) : (0, jsx_runtime_1.jsx)(ContainerComponent, {}) }));
 }

package/PageEntityForm/UploadImageDialog.d.ts

@@ -0,0 +1,12 @@
+import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+import { FC } from 'react';
+interface UploadImageDialogProps {
+    recordId: string;
+    recordTitle: string;
+    currentImage: FileObject | null;
+    onChange?: (value: FileObject | null) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare const UploadImageDialog: FC<UploadImageDialogProps>;
+export {};

package/PageEntityForm/UploadImageDialog.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadImageDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const dialog_1 = require("@headless-adminapp/app/dialog");
+const transport_1 = require("@headless-adminapp/app/transport");
+const utils_1 = require("@headless-adminapp/core/utils");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const avatar_1 = require("../utils/avatar");
+const UploadImageDialog = ({ currentImage, recordTitle, recordId, onChange, open, onOpenChange, }) => {
+    const schema = (0, hooks_1.useDataFormSchema)();
+    const fileService = (0, transport_1.useFileService)();
+    const [file, setFile] = (0, react_1.useState)(null); // new file (indicate if file is changed)
+    const [fileUrl, setFileUrl] = (0, react_1.useState)(null); // file url, indicate that file is either selected or changed
+    const openErrorDialog = (0, dialog_1.useOpenErrorDialog)();
+    (0, react_1.useEffect)(() => {
+        setFileUrl(currentImage?.url ?? null);
+    }, [currentImage?.url]);
+    const handleSelectFile = () => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = async (e) => {
+            const files = e.target.files;
+            if (!files?.length) {
+                return;
+            }
+            const _file = files[0];
+            setFile(_file);
+            const dataUrl = await (0, utils_1.readFileAsDataURL)(_file);
+            setFileUrl(dataUrl);
+        };
+        input.click();
+    };
+    const { isPending, mutate: handleApply } = (0, react_query_1.useMutation)({
+        mutationFn: async () => {
+            if (file) {
+                const url = await fileService.uploadFile(file, {
+                    context: {
+                        type: 'entity-form',
+                        recordId,
+                        attributeName: schema.avatarAttribute,
+                        logicalName: schema.logicalName,
+                    },
+                });
+                onChange?.({
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    url,
+                });
+            }
+            else {
+                onChange?.(null);
+            }
+            onOpenChange(false);
+        },
+        onError: (error) => {
+            console.error(error);
+            openErrorDialog({
+                title: 'Error',
+                text: 'Unable to upload image',
+            });
+        },
+    });
+    // No image - No image selected - Upload Image
+    // No image - Image selected - Change, Cancel
+    // Image - Not changed - Upload Image, Use Default
+    // Image - Removed - Change, Cancel
+    // Image - Changed - Change, Cancel
+    const isFileChanged = (fileUrl ?? null) !== (currentImage?.url ?? null);
+    const showUploadImage = !isFileChanged;
+    const showChangeImage = !!isFileChanged;
+    const showResetImage = !isFileChanged && !!fileUrl;
+    const showCancel = isFileChanged;
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: open, onOpenChange: (e, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { action: "close", children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}) }) }), children: "Choose Image" }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: "Upload an image from your device, or use the default image" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        marginTop: react_components_1.tokens.spacingVerticalM,
+                                        marginBottom: react_components_1.tokens.spacingVerticalM,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { shape: "square", style: { width: 120, height: 120 }, name: recordTitle, color: (0, avatar_1.getAvatarColor)(recordTitle), image: {
+                                            src: fileUrl ?? undefined,
+                                        } }) })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [showChangeImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => handleApply(), style: {
+                                    whiteSpace: 'nowrap',
+                                    fontWeight: 'normal',
+                                }, disabled: isPending, children: isPending ? 'Changing...' : 'Change' })), showUploadImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: handleSelectFile, style: {
+                                    whiteSpace: 'nowrap',
+                                    // minWidth: 0,
+                                    fontWeight: 'normal',
+                                }, children: "Upload Image" })), showResetImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { style: {
+                                    whiteSpace: 'nowrap',
+                                    // minWidth: 0,
+                                    fontWeight: 'normal',
+                                }, onClick: () => {
+                                    setFileUrl(null);
+                                    setFile(null);
+                                }, children: "Reset to Default" })), showCancel && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", style: {
+                                    whiteSpace: 'nowrap',
+                                    // minWidth: 0,
+                                    fontWeight: 'normal',
+                                }, onClick: () => {
+                                    setFileUrl(currentImage?.url ?? null);
+                                    setFile(null);
+                                }, children: "Cancel" }))] })] }) }) }));
+};
+exports.UploadImageDialog = UploadImageDialog;

package/PageEntityView/FormSubgridNotAvailableContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const FormSubgridNotAvailableContainer: FC;

package/PageEntityView/FormSubgridNotAvailableContainer.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSubgridNotAvailableContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const icons_1 = require("@headless-adminapp/icons");
+const FormSubgridViewSelector_1 = require("../DataGrid/FormSubgridViewSelector");
+const PageEntityViewStringContext_1 = require("./PageEntityViewStringContext");
+const FormSubgridNotAvailableContainer = () => {
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 8,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                // gap: 12,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                // overflow: 'hidden',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        height: 40,
+                    }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            gap: 16,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: 1,
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                flex: 1,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexDirection: 'column',
+                                gap: react_components_1.tokens.spacingVerticalM,
+                                minHeight: 300,
+                                color: react_components_1.tokens.colorNeutralForeground3,
+                            }, children: [(0, jsx_runtime_1.jsx)(icons_1.Icons.Grid, { size: 48 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: strings.subgridNotAvailable })] }) }) })] }) }));
+};
+exports.FormSubgridNotAvailableContainer = FormSubgridNotAvailableContainer;

package/PageEntityView/PageEntityViewStringContext.d.ts

@@ -18,6 +18,7 @@ export interface PageEntityViewStringSet {
     clearFilter: string;
     filterBy: string;
     noRecordsFound: string;
+    subgridNotAvailable: string;
 }
 export declare const defaultPageEntityViewStrings: PageEntityViewStringSet;
 export declare const PageEntityViewStringContext: import("react").Context<PageEntityViewStringSet>;

package/PageEntityView/PageEntityViewStringContext.js

@@ -23,6 +23,7 @@ exports.defaultPageEntityViewStrings = {
     sortByDescending: 'Sort by descending',
     filterBy: 'Filter by',
     noRecordsFound: "We didn't find anything to show here",
+    subgridNotAvailable: 'Save the record to view associated records.',
 };
 exports.PageEntityViewStringContext = (0, react_1.createContext)(exports.defaultPageEntityViewStrings);
 function usePageEntityViewStrings() {

package/form/controls/AttachmentControl.d.ts

@@ -2,6 +2,16 @@ import { AttachmentAttribute, FileObject } from '@headless-adminapp/core/attribu
 import { IFileService } from '@headless-adminapp/core/transport';
 import { FC } from 'react';
 import { ControlProps } from './types';
+interface UseAttachmentSelectorOptions {
+    fileService: IFileService | null;
+    fileServiceContext?: Record<string, unknown>;
+    location: AttachmentAttribute['location'];
+    onChange?: (fileObject: FileObject) => void;
+}
+export declare function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }: UseAttachmentSelectorOptions): {
+    isProcessing: boolean;
+    selectFile: (accept: string) => void;
+};
 export interface AttachmentImageControlProps extends ControlProps<FileObject> {
     fileService: IFileService;
     fileServiceContext?: Record<string, unknown>;

package/form/controls/AttachmentControl.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachmentControl = void 0;
+exports.useAttachmentSelector = useAttachmentSelector;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/dialog/hooks");
@@ -16,6 +17,9 @@ function useAttachmentSelector({ fileService, fileServiceContext, location, onCh
                 return (0, utils_1.fileToObject)(file);
             }
             else {
+                if (!fileService) {
+                    throw new Error('File service is not provided');
+                }
                 const url = await fileService.uploadFile(file, {
                     context: fileServiceContext,
                 });

package/form/controls/LookupControl.js

@@ -123,7 +123,12 @@ 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 }) })] }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        }, 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: () => {
+                                        router.push(routeResolver({
+                                            logicalName: schema.logicalName,
+                                            type: app_2.PageType.EntityForm,
+                                        }));
+                                    }, children: loockupStrings.newRecord }) })] }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     alignItems: 'center',

package/form/controls/TelephoneControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface TelephoneControlProps extends ControlProps<string> {
     autoComplete?: string;
 }
-export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }: Readonly<TelephoneControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -3,14 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TelephoneControl = TelephoneControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const phone_1 = require("@headless-adminapp/app/utils/phone");
 const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
 function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    const [internalValue, setInternalValue] = (0, react_1.useState)('');
+    const { region } = (0, locale_1.useLocale)();
+    const number = (0, react_1.useMemo)(() => {
+        if (!value) {
+            return null;
+        }
+        return (0, phone_1.parsePhoneNumber)(value, region);
+    }, [value, region]);
+    (0, react_1.useEffect)(() => {
+        setInternalValue(number?.formattedInternationalValue ?? '');
+    }, [number]);
+    const handleChange = () => {
+        const parsedPhoneNumber = (0, phone_1.parsePhoneNumber)(internalValue, region);
+        setInternalValue(parsedPhoneNumber.formattedInternationalValue);
+        onChange?.(parsedPhoneNumber.rawValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: (e) => setInternalValue?.(e.target.value), onBlur: () => {
+            handleChange();
+            onBlur?.();
+        }, onFocus: () => onFocus?.(), 
         // invalid={error}
         readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 
         // size="sm"
-        contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(`tel:${value}`, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
+        contentAfter: !!number?.uri ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(number.uri, '_blank'), title: number.uri, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.56",
+  "version": "0.0.17-alpha.59",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -42,5 +42,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "f9d26e133d9298174cde57f72a5d719d8320c667"
+  "gitHead": "813d07729a10a5613b46f012ba4b24bcaab384dc"
 }

package/types/index.d.ts

@@ -41,6 +41,8 @@ declare module '@headless-adminapp/icons/types' {
         Document: Icon;
         Image: Icon;
         Checkmark: Icon;
+        Block: Icon;
+        Grid: Icon;
     }
 }
 export {};