@headless-adminapp/fluent 0.0.17-alpha.7 → 1.0.0

package/PageCalendar/renderEventContent.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderEventContent = renderEventContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function renderEventContent(eventInfo) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            backgroundColor: react_components_1.tokens.colorBrandBackground2,
+            color: react_components_1.tokens.colorNeutralForeground1,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            paddingBlock: react_components_1.tokens.spacingVerticalXXS,
+            paddingInline: react_components_1.tokens.spacingHorizontalS,
+            border: `1px solid ${react_components_1.tokens.colorBrandStroke2}`,
+            gap: react_components_1.tokens.spacingHorizontalS,
+            width: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            height: '100%',
+            cursor: 'pointer',
+        }, children: [eventInfo.timeText && (0, jsx_runtime_1.jsx)("span", { children: eventInfo.timeText }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: react_components_1.tokens.fontWeightSemibold }, children: eventInfo.event.title })] }));
+}

package/PageCalendar/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum ViewType {
+    Month = "dayGridMonth",
+    Week = "timeGridWeek",
+    Day = "timeGridDay"
+}

package/PageCalendar/types.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewType = void 0;
+var ViewType;
+(function (ViewType) {
+    ViewType["Month"] = "dayGridMonth";
+    ViewType["Week"] = "timeGridWeek";
+    ViewType["Day"] = "timeGridDay";
+})(ViewType || (exports.ViewType = ViewType = {}));

package/PageCalendar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { EventInput } from '@fullcalendar/core';
+import { CalendarEvent } from '@headless-adminapp/app/calendar/types';
+export declare function transformEvent(event: CalendarEvent): EventInput;

package/PageCalendar/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformEvent = transformEvent;
+function transformEvent(event) {
+    const { id, title, description, end, start, ...rest } = event;
+    return {
+        id,
+        title,
+        description,
+        start: start ?? undefined,
+        end: end ?? undefined,
+        allDay: event.allDay ?? false,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        extendedProps: rest,
+    };
+}

package/PageEntityForm/CommandContainer.js

@@ -3,18 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const hooks_2 = require("@headless-adminapp/app/hooks");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const recordset_1 = require("@headless-adminapp/app/recordset");
-const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
-const hooks_3 = require("@headless-adminapp/app/route/hooks");
+const hooks_3 = require("@headless-adminapp/app/recordset/hooks");
+const hooks_4 = require("@headless-adminapp/app/route/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
 const CommandContainer = () => {
     const gridCommands = (0, hooks_1.useMainFormCommands)();
-    const router = (0, hooks_3.useRouter)();
+    const router = (0, hooks_4.useRouter)();
+    const isMobile = (0, hooks_2.useIsMobile)();
     const schema = (0, hooks_1.useDataFormSchema)();
-    const [recordSetVisible, setRecordSetVisible] = (0, hooks_2.useRecordSetVisibility)();
+    const [recordSetVisible, setRecordSetVisible] = (0, hooks_3.useRecordSetVisibility)();
     const recordSetContext = (0, mutable_1.useContextSelector)(recordset_1.RecordSetContext, (state) => state);
     const extendedCommands = (0, react_1.useMemo)(() => {
         return [
@@ -28,7 +30,8 @@ const CommandContainer = () => {
                 },
             ],
             ...(recordSetContext.logicalName === schema.logicalName &&
-                recordSetContext.ids.length > 0
+                recordSetContext.ids.length > 0 &&
+                !isMobile
                 ? [
                     [
                         {
@@ -45,6 +48,7 @@ const CommandContainer = () => {
         ];
     }, [
         gridCommands,
+        isMobile,
         recordSetContext.ids.length,
         recordSetContext.logicalName,
         recordSetVisible,

package/PageEntityForm/PageCustomEntityForm.d.ts

@@ -0,0 +1,15 @@
+import { RetriveRecordFn } from '@headless-adminapp/app/dataform/DataFormProvider/types';
+import { SaveRecordFn } from '@headless-adminapp/app/dataform/utils/saveRecord';
+import { EntityMainFormCommandItemExperience, Form } from '@headless-adminapp/core/experience/form';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { FC } from 'react';
+interface PageCustomEntityFormProps<SA extends SchemaAttributes = SchemaAttributes> {
+    recordId?: string;
+    schema: Schema<SA>;
+    form: Form<SA>;
+    commands: EntityMainFormCommandItemExperience[][];
+    retriveRecordFn?: RetriveRecordFn<SA>;
+    saveRecordFn?: SaveRecordFn;
+}
+export declare const PageCustomEntityForm: FC<PageCustomEntityFormProps>;
+export {};

package/PageEntityForm/PageCustomEntityForm.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCustomEntityForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const PageEntityFormProvider_1 = require("@headless-adminapp/app/providers/PageEntityFormProvider");
+const PageEntityFormDesktopContainer_1 = require("./PageEntityFormDesktopContainer");
+const PageCustomEntityForm = ({ recordId, commands, form, schema, retriveRecordFn, saveRecordFn, }) => {
+    return ((0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, retriveRecordFn: retriveRecordFn, saveRecordFn: saveRecordFn, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                flex: 1,
+                flexDirection: 'row',
+                backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                overflow: 'hidden',
+            }, children: (0, jsx_runtime_1.jsx)(PageEntityFormDesktopContainer_1.PageEntityFormDesktopContainer, {}) }) }));
+};
+exports.PageCustomEntityForm = PageCustomEntityForm;

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityFormDesktopContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const builders_1 = require("@headless-adminapp/app/builders");
 const dataform_1 = require("@headless-adminapp/app/dataform");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
 const mutable_1 = require("@headless-adminapp/app/mutable");
-const utils_1 = require("@headless-adminapp/app/utils");
+const utils_2 = require("@headless-adminapp/app/utils");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const PageBroken_1 = require("../components/PageBroken");
@@ -18,10 +18,12 @@ const FormTab_1 = require("../form/layout/FormTab");
 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;
 const PageEntityFormDesktopContainer = () => {
-    var _a, _b;
     const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
     const recordId = (0, hooks_1.useRecordId)();
@@ -30,13 +32,29 @@ const PageEntityFormDesktopContainer = () => {
     const { language } = (0, locale_1.useLocale)();
     const schema = (0, hooks_1.useDataFormSchema)();
     const formConfig = (0, hooks_1.useSelectedForm)();
+    const processFlowSteps = (0, hooks_1.useProcessFlowSteps)();
     const setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
-        setValue((state) => (Object.assign(Object.assign({}, state), { activeTab: value })));
+        setValue((state) => ({
+            ...state,
+            activeTab: value,
+        }));
     });
     (0, react_1.useEffect)(() => {
-        setActiveTab('general');
-    }, [setActiveTab]);
-    const recordTitle = (0, hooks_1.useRecordTitle)();
+        if (previousCachedActiveTabInfo &&
+            previousCachedActiveTabInfo.logicalName === schema.logicalName) {
+            setActiveTab(previousCachedActiveTabInfo.name);
+            setSelectedRelatedItem(previousCachedActiveTabInfo.relatedItem);
+        }
+        else {
+            setActiveTab(formConfig.experience.tabs[0].name);
+            previousCachedActiveTabInfo = {
+                logicalName: schema.logicalName,
+                name: formConfig.experience.tabs[0].name,
+                relatedItem: null,
+            };
+        }
+    }, [setActiveTab, formConfig, schema]);
+    const [recordTitle] = (0, hooks_1.useRecordTitle)();
     // const readonly = useIsFormReadonly();
     const formInstance = (0, hooks_1.useFormInstance)();
     const isDirty = (0, hooks_1.useFormIsDirty)();
@@ -84,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',
@@ -92,28 +110,30 @@ const PageEntityFormDesktopContainer = () => {
                                                             ? `- ${strings.unsaved}`
                                                             : !!record
                                                                 ? `- ${strings.saved}`
-                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, builders_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls.map((controlName, index) => {
+                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, utils_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls?.map((controlName, index) => {
                                             const attribute = schema.attributes[controlName];
                                             return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: {
                                                             width: react_components_1.tokens.spacingHorizontalXXL,
                                                             opacity: 0.5,
                                                         } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
-                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_1.getAttributeFormattedValue)(attribute, field.value) }));
+                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value) }));
                                                                 } })] })] }, controlName));
-                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, builders_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_b = (_a = selectedRelatedItem.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
+                                        }) })] }), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
+                                            setActiveTab(value.value);
+                                            previousCachedActiveTabInfo = {
+                                                logicalName: schema.logicalName,
+                                                name: value.value,
+                                                relatedItem: null,
+                                            };
+                                        }, children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: selectedRelatedItem.localizedPluralLabels?.[language] ??
+                                                    selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
                                             setSelectedRelatedItem(item);
                                             setActiveTab('related');
+                                            previousCachedActiveTabInfo = {
+                                                logicalName: schema.logicalName,
+                                                name: 'related',
+                                                relatedItem: item,
+                                            };
                                         } })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));
-    // return (
-    //   <Fragment>
-    //     <PageEntityViewDesktopFrame
-    //       commandBar={<CommandContainer />}
-    //       header={<GridHeaderContainer />}
-    //       content={<GridTableContainer />}
-    //       footer={<GridPaginationContainer />}
-    //     />
-    //     {/* <CustomizeColumnsContainer /> */}
-    //   </Fragment>
-    // );
 };
 exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;

package/PageEntityForm/ProcessFlow.d.ts

@@ -0,0 +1,10 @@
+interface ProcessFlowProps {
+    height?: number;
+    rounded?: boolean;
+    items: Array<{
+        label: string;
+        isActivated?: boolean;
+    }>;
+}
+export declare function ProcessFlow({ height, rounded, items, }: ProcessFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageEntityForm/ProcessFlow.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProcessFlow = ProcessFlow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function ProcessFlow({ height = 32, rounded = true, items, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', height }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                overflow: 'hidden',
+                borderRadius: rounded ? react_components_1.tokens.borderRadiusMedium : 0,
+            }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ProcessFlowItem, { height: height, label: item.label, isActivated: item.isActivated, isFirst: index === 0, isLast: index === items.length - 1 }, index))) }) }));
+}
+const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
+    const backgroundColor = isActivated
+        ? react_components_1.tokens.colorBrandBackground
+        : react_components_1.tokens.colorNeutralStrokeDisabled;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            flex: 1,
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { zIndex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            left: 20,
+                            right: 20,
+                            top: 0,
+                            height: '100%',
+                            backgroundColor: backgroundColor,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            left: 0,
+                            top: 0,
+                            width: 40,
+                            height: '50%',
+                            backgroundColor: backgroundColor,
+                            transform: isFirst ? 'skewX(0deg)' : 'skewX(30deg)',
+                            borderLeft: isFirst
+                                ? 'none'
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            right: 0,
+                            top: 0,
+                            width: 40,
+                            height: '50%',
+                            backgroundColor: backgroundColor,
+                            transform: isLast ? 'skewX(0deg)' : 'skewX(30deg)',
+                            borderRight: isLast
+                                ? 'none'
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            left: 0,
+                            top: '50%',
+                            width: 40,
+                            height: '50%',
+                            backgroundColor: backgroundColor,
+                            transform: isFirst ? 'skewX(0deg)' : 'skewX(-30deg)',
+                            borderLeft: isFirst
+                                ? 'none'
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            width: 40,
+                            height: '50%',
+                            backgroundColor: backgroundColor,
+                            transform: isLast ? 'skewX(0deg)' : 'skewX(-30deg)',
+                            borderRight: isLast
+                                ? 'none'
+                                : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
+                        } })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    alignItems: 'center',
+                    gap: react_components_1.tokens.spacingVerticalS,
+                    color: isActivated ? 'white' : undefined,
+                    zIndex: 2,
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { children: label }) })] }));
+};

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,83 @@
+"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 fileService = (0, transport_1.useFileService)();
+    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: () => {
+                    if (!fileService) {
+                        return;
+                    }
+                    setShowAvatarChangeDialog(true);
+                } }), !!recordId && !!fileService && ((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/RecordCard.d.ts

@@ -6,5 +6,5 @@ interface RecordCardProps<S extends SchemaAttributes = SchemaAttributes> {
     record: InferredSchemaType<S>;
     selected?: boolean;
 }
-export declare function RecordCard<S extends SchemaAttributes = SchemaAttributes>({ schema, cardView, record, selected, }: RecordCardProps<S>): import("react/jsx-runtime").JSX.Element;
+export declare function RecordCard<S extends SchemaAttributes = SchemaAttributes>({ schema, cardView, record, selected, }: Readonly<RecordCardProps<S>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/RecordCard.js

@@ -4,6 +4,7 @@ exports.RecordCard = RecordCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/utils");
+const color_1 = require("@headless-adminapp/app/utils/color");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         width: '100%',
@@ -26,10 +27,14 @@ const useStyles = (0, react_components_1.makeStyles)({
     selected: {},
 });
 function createIntial(name) {
-    return name === null || name === void 0 ? void 0 : name.split(' ').map((x) => x[0]).slice(0, 2).join('').toUpperCase();
+    return name
+        ?.split(' ')
+        .map((x) => x[0])
+        .slice(0, 2)
+        .join('')
+        .toUpperCase();
 }
 function RecordCard({ schema, cardView, record, selected, }) {
-    var _a, _b;
     const styles = useStyles();
     const _record = record;
     const recordTitle = _record[schema.primaryAttribute];
@@ -39,7 +44,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
         const avatarAttribute = schema.attributes[cardView.avatarColumn];
         if (avatarAttribute.type === 'attachment' &&
             avatarAttribute.format === 'image') {
-            avatarSrc = _record[cardView.avatarColumn];
+            avatarSrc = _record[cardView.avatarColumn]?.url;
         }
         else if (avatarAttribute.type === 'string' &&
             avatarAttribute.format === 'url') {
@@ -52,55 +57,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: _record[cardView.primaryColumn] }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((column) => {
-                        const value = _record[column.name];
-                        if (!value) {
-                            return null;
-                        }
-                        const attribute = schema.attributes[column.name];
-                        let label = '';
-                        if (column.label === true) {
-                            label = attribute.label;
-                        }
-                        else if (typeof column.label === 'string') {
-                            label = column.label;
-                        }
-                        if (column.variant === 'choice') {
-                            if (attribute.type === 'choice') {
-                                const choice = attribute.options.find((option) => option.value === value);
-                                if (!choice) {
-                                    return null;
-                                }
-                                return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
-                                        background: choice.color,
-                                        color: 'white',
-                                        height: 16,
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                    }, children: choice.label }, column.name));
-                            }
-                            if (attribute.type === 'choices') {
-                                const choices = attribute.options.filter((option) => value.includes(option.value));
-                                if (!choices.length) {
-                                    return null;
-                                }
-                                return ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        gap: 4,
-                                    }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
-                                            background: choice.color,
-                                            color: 'white',
-                                            height: 16,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                        }, children: choice.label }, choice.value))) }, column.name));
-                            }
-                        }
-                        return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
-                    })] }), !!((_b = cardView.rightColumn) === null || _b === void 0 ? void 0 : _b.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
@@ -129,6 +86,56 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     if (column.variant === 'strong') {
                         return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
                     }
-                    (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name);
+                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
                 }) }))] }));
 }
+function SecondaryColumnContent({ record: _record, column, schema, }) {
+    const value = _record[column.name];
+    if (!value) {
+        return null;
+    }
+    const attribute = schema.attributes[column.name];
+    let label = '';
+    if (column.label === true) {
+        label = attribute.label;
+    }
+    else if (typeof column.label === 'string') {
+        label = column.label;
+    }
+    if (column.variant === 'choice') {
+        if (attribute.type === 'choice') {
+            return (0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value });
+        }
+        if (attribute.type === 'choices') {
+            const choices = attribute.options.filter((option) => value.includes(option.value));
+            if (!choices.length) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 4,
+                }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: choice.value }, choice.value))) }, column.name));
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
+}
+const ChoiceTag = ({ attribute, value, }) => {
+    const choice = attribute.options.find((option) => option.value === value);
+    if (!choice) {
+        return null;
+    }
+    const bgColor = choice.color;
+    let color;
+    if (bgColor) {
+        color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+    }
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
+            background: bgColor,
+            color: color,
+            height: 16,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: choice.label }));
+};

package/PageEntityForm/RecordCardLoading.d.ts

@@ -0,0 +1,8 @@
+import { CardView } from '@headless-adminapp/core/experience/view';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+interface RecordCardLoadingProps<S extends SchemaAttributes = SchemaAttributes> {
+    schema: Schema<S>;
+    cardView: CardView<S>;
+}
+export declare function RecordCardLoading<S extends SchemaAttributes = SchemaAttributes>({ cardView }: RecordCardLoadingProps<S>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageEntityForm/RecordCardLoading.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordCardLoading = RecordCardLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        paddingInline: react_components_1.tokens.spacingHorizontalL,
+        paddingBlock: react_components_1.tokens.spacingVerticalS,
+        gap: react_components_1.tokens.spacingHorizontalS,
+    },
+});
+function RecordCardLoading({ cardView }) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { color: "neutral", style: { cursor: 'pointer' } })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    gap: react_components_1.tokens.spacingVerticalXXS,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { height: 16 } }) }), cardView.secondaryColumns?.map((_, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { width: 160, height: 12 } }) }, index)))] })] }));
+}