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

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/package.json

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

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 {};