@headless-adminapp/fluent 1.1.10 → 1.1.12

package/PageCalendar/EventDialog/EventFormContent.js

@@ -4,7 +4,7 @@ exports.EventFormContent = EventFormContent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEventAttributes");
-const AttributeController_1 = require("./AttributeController");
+const AttributeController_1 = require("../../form/AttributeController");
 function EventFormContent({ form, afterDescriptionAttributes, beforeDescriptionAttributes, readOnly, config, }) {
     const allDay = form.watch('allDay');
     return ((0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
@@ -13,15 +13,15 @@ function EventFormContent({ form, afterDescriptionAttributes, beforeDescriptionA
                 gap: react_components_1.tokens.spacingVerticalM,
                 marginTop: react_components_1.tokens.spacingVerticalL,
                 marginBottom: react_components_1.tokens.spacingVerticalL,
-            }, children: [(0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "title", attribute: baseEventAttributes_1.baseEventAttributes.title, readOnly: readOnly }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "start", attribute: {
+            }, children: [(0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { control: form.control, attributeName: "title", attribute: baseEventAttributes_1.baseEventAttributes.title, readOnly: readOnly }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { control: form.control, attributeName: "start", attribute: {
                         ...baseEventAttributes_1.baseEventAttributes.start,
                         ...(allDay ? { format: 'date' } : { format: 'datetime' }),
-                    }, readOnly: readOnly }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "end", attribute: {
+                    }, readOnly: readOnly }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { control: form.control, attributeName: "end", attribute: {
                         ...baseEventAttributes_1.baseEventAttributes.end,
                         ...(allDay ? { format: 'date' } : { format: 'datetime' }),
-                    }, readOnly: readOnly }), !config.disableAllDay && ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "allDay", attribute: baseEventAttributes_1.baseEventAttributes.allDay, readOnly: readOnly })), Object.entries(beforeDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
-                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute, readOnly: readOnly }, attributeName));
-                }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: "description", attribute: baseEventAttributes_1.baseEventAttributes.description, readOnly: readOnly }), Object.entries(afterDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
-                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { form: form, attributeName: attributeName, attribute: attribute, readOnly: readOnly }, attributeName));
+                    }, readOnly: readOnly }), !config.disableAllDay && ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { control: form.control, attributeName: "allDay", attribute: baseEventAttributes_1.baseEventAttributes.allDay, readOnly: readOnly })), Object.entries(beforeDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
+                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { control: form.control, attributeName: attributeName, attribute: attribute, readOnly: readOnly }, attributeName));
+                }), (0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { control: form.control, attributeName: "description", attribute: baseEventAttributes_1.baseEventAttributes.description, readOnly: readOnly }), Object.entries(afterDescriptionAttributes ?? {}).map(([attributeName, attribute]) => {
+                    return ((0, jsx_runtime_1.jsx)(AttributeController_1.AttributeController, { control: form.control, attributeName: attributeName, attribute: attribute, readOnly: readOnly }, attributeName));
                 })] }) }));
 }

package/PageEntityForm/EditableGridControl/EditableGridControl.d.ts

@@ -0,0 +1,7 @@
+import { SectionEditableGridControl } from '@headless-adminapp/core/experience/form';
+interface EditableGridControlProps {
+    readOnly?: boolean;
+    control: SectionEditableGridControl;
+}
+export declare function EditableGridControl({ readOnly, control, }: Readonly<EditableGridControlProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageEntityForm/EditableGridControl/EditableGridControl.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableGridControl = EditableGridControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const getRecord_1 = require("@headless-adminapp/app/dataform/DataFormProvider/getRecord");
+const saveRecord_1 = require("@headless-adminapp/app/dataform/utils/saveRecord");
+const form_1 = require("@headless-adminapp/app/form");
+const locale_1 = require("@headless-adminapp/app/locale");
+const metadata_1 = require("@headless-adminapp/app/metadata");
+const transport_1 = require("@headless-adminapp/app/transport");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const BodyLoading_1 = require("../../components/BodyLoading");
+const TableUi_1 = require("./TableUi");
+function EditableGridControl({ readOnly, control, }) {
+    const recordId = (0, dataform_1.useRecordId)();
+    const dataService = (0, transport_1.useDataService)();
+    const { schemaStore } = (0, metadata_1.useMetadata)();
+    const { language, region } = (0, locale_1.useLocale)();
+    const formValidationStrings = (0, form_1.useFormValidationStrings)();
+    const schema = schemaStore.getSchema(control.logicalName);
+    const alias = control.alias ? control.alias : 'items';
+    const parentFormInstance = (0, dataform_1.useFormInstance)();
+    const localFormInstance = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: {
+            items: [],
+        },
+        resolver: (0, dataform_1.editableSubgridFormValidator)({
+            alias,
+            control,
+            schema: schemaStore.getSchema(control.logicalName),
+            language,
+            region,
+            schemaStore,
+            strings: formValidationStrings,
+            formReadOnly: readOnly,
+        }),
+        shouldUnregister: false,
+    });
+    const queryClient = (0, react_query_1.useQueryClient)();
+    const { data, isFetching } = (0, react_query_1.useQuery)({
+        queryKey: ['editable-grid', recordId, control],
+        queryFn: async () => {
+            return (0, getRecord_1.getEditableSubgridRecords)({
+                control,
+                schemaStore,
+                dataService,
+                recordId,
+            });
+        },
+        enabled: !!recordId && !control.alias,
+    });
+    const formInstanceRef = (0, react_1.useRef)(localFormInstance);
+    formInstanceRef.current = localFormInstance;
+    (0, react_1.useEffect)(() => {
+        if (!data) {
+            return;
+        }
+        formInstanceRef.current.reset({
+            items: data,
+        });
+    }, [data]);
+    const formControl = control.alias
+        ? parentFormInstance.control
+        : localFormInstance.control;
+    const fieldArray = (0, react_hook_form_1.useFieldArray)({
+        control: formControl,
+        name: alias,
+        keyName: '__key',
+        shouldUnregister: false,
+    });
+    const handleAddRow = () => {
+        const newItem = {
+            $entity: schema.logicalName,
+            [schema.idAttribute]: null,
+            [control.associatedAttribute]: {
+                id: recordId,
+            },
+        };
+        control.controls.forEach((control) => {
+            if (typeof control === 'string') {
+                newItem[control] = null;
+            }
+            else {
+                newItem[control.attributeName] = null;
+            }
+        });
+        fieldArray.append(newItem);
+    };
+    const handleSave = async () => {
+        await localFormInstance.handleSubmit(async (values) => {
+            try {
+                await (0, saveRecord_1.saveEditableGridControl)({
+                    recordId,
+                    values,
+                    initialValues: localFormInstance.formState.defaultValues,
+                    control,
+                    dataService,
+                    schemaStore,
+                    alias,
+                });
+                await queryClient.invalidateQueries({
+                    queryKey: ['editable-grid', recordId, control],
+                });
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }, (errors) => {
+            console.error(errors);
+        })();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    paddingInline: 16,
+                    paddingBlock: 8,
+                    height: 40,
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: control.label }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)("div", { style: { marginRight: -12 }, children: !control.alias && !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Save, {}), appearance: "subtle", style: { minWidth: 0 }, disabled: localFormInstance.formState.isSubmitting ||
+                                    !localFormInstance.formState.isValid ||
+                                    !localFormInstance.formState.isDirty, onClick: handleSave, children: "Save" })) })] }) }), (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: { padding: 16, position: 'relative' }, children: (0, jsx_runtime_1.jsx)(TableUi_1.TableUi, { schema: schema, control: control, formControl: formControl, alias: alias, onAddRow: handleAddRow, onRemoveRow: (index) => {
+                        fieldArray.remove(index);
+                    }, rows: fieldArray.fields }) }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching || localFormInstance.formState.isSubmitting })] }));
+}

package/PageEntityForm/EditableGridControl/TableUi.d.ts

@@ -0,0 +1,15 @@
+import { SectionEditableGridControl } from '@headless-adminapp/core/experience/form';
+import { Schema } from '@headless-adminapp/core/schema';
+import { FC } from 'react';
+import { Control } from 'react-hook-form';
+interface TableUiProps {
+    schema: Schema;
+    control: SectionEditableGridControl;
+    formControl: Control;
+    onAddRow?: () => void;
+    onRemoveRow?: (index: number) => void;
+    rows: Record<'__key', string>[];
+    alias: string;
+}
+export declare const TableUi: FC<TableUiProps>;
+export {};

package/PageEntityForm/EditableGridControl/TableUi.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableUi = 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 react_hook_form_1 = require("react-hook-form");
+const SectionControl_1 = require("../../DataForm/SectionControl");
+const StandardControl_1 = require("../StandardControl");
+const useStyles = (0, react_components_1.makeStyles)({
+    table: {
+        '& tbody tr:hover': {
+            backgroundColor: 'transparent',
+        },
+        '& tr': {
+            borderBottom: `${react_components_1.tokens.strokeWidthThin} solid transparent`,
+        },
+        '& th': {
+            fontWeight: react_components_1.tokens.fontWeightMedium,
+            paddingInline: react_components_1.tokens.spacingHorizontalXS,
+        },
+        '& td': {
+            paddingInline: react_components_1.tokens.spacingHorizontalXS,
+        },
+        '& tbody tr:last-child': {
+            borderBottom: 'none',
+        },
+        '& td:first-child': {
+            paddingLeft: 0,
+        },
+        '& th:first-child': {
+            paddingLeft: 0,
+        },
+        '& td:last-child': {
+            paddingRight: 0,
+        },
+        '& th:last-child': {
+            paddingRight: 0,
+        },
+    },
+});
+const TableUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, alias, }) => {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { className: styles.table, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [control.controls.map((_, index) => ((0, jsx_runtime_1.jsx)("col", {}, index))), (0, jsx_runtime_1.jsx)("col", { style: { width: 36 } })] }), (0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
+                            const attributeName = typeof control === 'string' ? control : control.attributeName;
+                            const attribute = schema.attributes[attributeName];
+                            if (!attribute) {
+                                return null;
+                            }
+                            return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: attribute.label ?? attribute.label }, attributeName));
+                        }), (0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "subtle", onClick: onAddRow }) })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: rows.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
+                            const attributeName = typeof control === 'string' ? control : control.attributeName;
+                            const attribute = schema.attributes[attributeName];
+                            if (!attribute) {
+                                return null;
+                            }
+                            return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: `${alias}.${index}.${attributeName}`, control: formControl, render: ({ field, fieldState, formState }) => {
+                                        const isError = (fieldState.isTouched || formState.isSubmitted) &&
+                                            !!fieldState.error?.message;
+                                        return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelHidden: true, labelPosition: "top", isError: isError, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, onChange: field.onChange, onBlur: field.onBlur, placeholder: "" }) }));
+                                    } }) }, attributeName));
+                        }), (0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: () => onRemoveRow?.(index) }) })] }, item.__key))) })] }));
+};
+exports.TableUi = TableUi;

package/PageEntityForm/EditableGridControl/index.d.ts

@@ -0,0 +1 @@
+export { EditableGridControl } from './EditableGridControl';

package/PageEntityForm/EditableGridControl/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableGridControl = void 0;
+var EditableGridControl_1 = require("./EditableGridControl");
+Object.defineProperty(exports, "EditableGridControl", { enumerable: true, get: function () { return EditableGridControl_1.EditableGridControl; } });

package/PageEntityForm/SectionContainer.js

@@ -16,6 +16,7 @@ const react_hook_form_1 = require("react-hook-form");
 const componentStore_1 = require("../componentStore");
 const SectionControl_1 = require("../DataForm/SectionControl");
 const layout_1 = require("../form/layout");
+const EditableGridControl_1 = require("./EditableGridControl/EditableGridControl");
 const StandardControl_1 = require("./StandardControl");
 const SubgridControl_1 = require("./SubgridControl");
 function SectionContainer({ section }) {
@@ -98,7 +99,13 @@ function SectionContainer({ section }) {
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {
-                    return null;
+                    const disabled = (0, utils_1.getIsFieldDisabled)({
+                        isFormReadonly,
+                        disabledFields: disabledControls,
+                        attribute: null,
+                        control,
+                    });
+                    return ((0, jsx_runtime_1.jsx)(EditableGridControl_1.EditableGridControl, { readOnly: disabled, control: control }));
                 }
                 case 'quickview':
                     return null;

package/form/AttributeController.d.ts

@@ -0,0 +1,11 @@
+import { Attribute } from '@headless-adminapp/core';
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+interface AttributeControllerProps<TFieldValues extends FieldValues = FieldValues> {
+    attribute: Attribute;
+    attributeName: FieldPath<TFieldValues>;
+    control: Control<TFieldValues>;
+    readOnly?: boolean;
+    labelPosition?: 'left' | 'top';
+}
+export declare function AttributeController<TFieldValues extends FieldValues = FieldValues>({ attribute, attributeName, control, readOnly, labelPosition, }: Readonly<AttributeControllerProps<TFieldValues>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/form/AttributeController.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeController = AttributeController;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const SectionControl_1 = require("../DataForm/SectionControl");
+const StandardControl_1 = require("../PageEntityForm/StandardControl");
+function AttributeController({ attribute, attributeName, control, readOnly, labelPosition = 'left', }) {
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: attributeName, render: ({ field, fieldState, formState }) => {
+            const isError = (fieldState.isTouched || formState.isSubmitted) &&
+                !!fieldState.error?.message;
+            const errorMessage = fieldState.isTouched || formState.isSubmitted
+                ? fieldState.error?.message
+                : '';
+            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: readOnly || attribute.readonly }) }));
+        } }));
+}

package/form/useFormForAttributes.d.ts

@@ -0,0 +1,8 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Nullable } from '@headless-adminapp/core/types';
+interface UseFormForAttributesProps<SA extends SchemaAttributes = SchemaAttributes> {
+    attributes: SA;
+    defaultValues: Partial<Nullable<InferredSchemaType<SA>>>;
+}
+export declare function useFormForAttributes<SA extends SchemaAttributes = SchemaAttributes>(props: UseFormForAttributesProps<SA>): import("react-hook-form").UseFormReturn<Nullable<InferredSchemaType<SA>>, any, undefined>;
+export {};

package/form/useFormForAttributes.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormForAttributes = useFormForAttributes;
+const form_1 = require("@headless-adminapp/app/form");
+const locale_1 = require("@headless-adminapp/app/locale");
+const react_hook_form_1 = require("react-hook-form");
+const PromptDialog_1 = require("../DialogContainer/PromptDialog");
+function useFormForAttributes(props) {
+    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, PromptDialog_1.formValidator)({
+            attributes: props.attributes,
+            language,
+            strings: formValidationStrings,
+            region,
+        }),
+    });
+    return form;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -50,5 +50,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "3920cedff7216fb37b07dff95c50499c0f56f57c"
+  "gitHead": "ead918f1f609c2a260ceae498368ddc2c4980725"
 }