@headless-adminapp/fluent 1.1.11 → 1.1.12

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

@@ -5,6 +5,7 @@ interface AttributeControllerProps<TFieldValues extends FieldValues = FieldValue
     attributeName: FieldPath<TFieldValues>;
     control: Control<TFieldValues>;
     readOnly?: boolean;
+    labelPosition?: 'left' | 'top';
 }
-export declare function AttributeController<TFieldValues extends FieldValues = FieldValues>({ attribute, attributeName, control, readOnly, }: Readonly<AttributeControllerProps<TFieldValues>>): import("react/jsx-runtime").JSX.Element;
+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

@@ -5,13 +5,13 @@ 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, }) {
+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: "left", 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 }) }));
+            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.1.11",
+  "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": "e88cae2cc31abaf6852549e3fbc3235eec84cc8c"
+  "gitHead": "ead918f1f609c2a260ceae498368ddc2c4980725"
 }