@headless-adminapp/app 0.0.17-alpha.8 → 1.0.0

package/dataform/DataFormProvider/utils.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getControls = getControls;
+exports.getColumns = getColumns;
+exports.transformFormInternal = transformFormInternal;
+exports.getIsFieldDisabled = getIsFieldDisabled;
+exports.getIsControlHidden = getIsControlHidden;
+exports.getIsFieldRequired = getIsFieldRequired;
+function getControls(form) {
+    const controls = form.experience.tabs
+        .flatMap((tab) => tab.tabColumns)
+        .flatMap((tabColumn) => tabColumn.sections)
+        .flatMap((section) => section.controls);
+    return controls;
+}
+function getColumns(form, schema) {
+    const set = new Set([
+        ...(form.experience.includeAttributes ?? []),
+        ...(form.experience.headerControls ?? []),
+        ...getControls(form)
+            .filter((control) => control.type === 'standard')
+            .map((control) => control.attributeName),
+    ]);
+    if (schema.avatarAttribute) {
+        set.add(schema.avatarAttribute);
+    }
+    const columns = Array.from(set);
+    return columns;
+}
+function transformFormInternal(form) {
+    const controls = getControls(form);
+    const dict = controls.reduce((acc, control) => {
+        let key = control.key;
+        if (!key && control.type === 'standard') {
+            key = control.attributeName;
+        }
+        if (key) {
+            acc[key] = control;
+        }
+        return acc;
+    }, {});
+    const sections = form.experience.tabs
+        .flatMap((tab) => tab.tabColumns)
+        .flatMap((tabColumn) => tabColumn.sections);
+    const dictBySectionKey = sections.reduce((acc, section) => {
+        acc[section.name] = section;
+        return acc;
+    }, {});
+    const tabsDict = form.experience.tabs.reduce((acc, tab) => {
+        acc[tab.name] = tab;
+        return acc;
+    }, {});
+    return {
+        controls: {
+            list: controls,
+            dict,
+        },
+        sections: {
+            list: sections,
+            dict: dictBySectionKey,
+        },
+        tabs: {
+            dict: tabsDict,
+        },
+    };
+}
+function getIsFieldDisabled({ attribute, isFormReadonly, disabledFields, control, }) {
+    let disabled = isFormReadonly ?? false;
+    if (!disabled) {
+        if (control.type === 'standard' &&
+            typeof control.attributeName === 'string' &&
+            disabledFields[control.attributeName] !== undefined) {
+            disabled = disabledFields[control.attributeName];
+        }
+        else if (control.disabled !== undefined) {
+            disabled = control.disabled;
+        }
+        else if (attribute.readonly !== undefined) {
+            disabled = attribute.readonly;
+        }
+    }
+    return disabled;
+}
+function getIsControlHidden({ control, hiddenControls, }) {
+    let hidden = control.hidden ?? false;
+    let key = control.key;
+    if (!key && control.type === 'standard') {
+        key = control.attributeName;
+    }
+    if (key && hiddenControls[key] !== undefined) {
+        hidden = hiddenControls[key];
+    }
+    return hidden;
+}
+function getIsFieldRequired({ attribute, control, requiredFields, }) {
+    const attributeName = control.attributeName;
+    let required = attribute.required ?? false;
+    if (requiredFields[attributeName] !== undefined) {
+        required = requiredFields[attributeName];
+    }
+    else if (control.required !== undefined) {
+        required = control.required;
+    }
+    return required;
+}

package/dataform/FormManager.d.ts

@@ -0,0 +1,57 @@
+import { Attribute } from '@headless-adminapp/core';
+import { Section } from '@headless-adminapp/core/experience/form';
+import { SectionControl } from '@headless-adminapp/core/experience/form/SectionControl';
+import { Tab } from '@headless-adminapp/core/experience/form/Tab';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { ContextValue } from '../mutable';
+import { DataFormContextState } from './context';
+export declare class FormManager<SA extends SchemaAttributes = SchemaAttributes> {
+    private readonly contextState;
+    constructor(contextState: ContextValue<DataFormContextState<SA>>);
+    private get context();
+    getAttribute(attributeName: keyof SA): FormAttribute<SA> | null;
+    getControl<C extends Control<SA>>(name: string): C | null;
+    getSection(name: string): FormSection<SA> | null;
+    getTab(name: string): FormTab<SA> | null;
+}
+declare class FormAttribute<SA extends SchemaAttributes = SchemaAttributes> {
+    private readonly contextState;
+    private readonly attributeName;
+    private readonly attribute;
+    constructor(contextState: ContextValue<DataFormContextState<SA>>, attributeName: keyof SA, attribute: Attribute);
+    getInnerAttribute(): Attribute;
+    setRequired(state: boolean): void;
+    getRequired(): boolean;
+    resetRequired(): void;
+    getControls(): Control<SA>[];
+}
+declare class Control<SA extends SchemaAttributes = SchemaAttributes> {
+    private readonly contextState;
+    private readonly control;
+    constructor(contextState: ContextValue<DataFormContextState<SA>>, control: SectionControl<SA>);
+    private get context();
+    getKey(): string | undefined;
+    getDisabled(): boolean;
+    setDisabled(state: boolean): void;
+    resetDisabled(): void;
+    getHidden(): boolean;
+    setHidden(state: boolean): void;
+    resetHidden(): void;
+}
+declare class FormSection<SA extends SchemaAttributes = SchemaAttributes> {
+    private readonly contextState;
+    private readonly section;
+    constructor(contextState: ContextValue<DataFormContextState<SA>>, section: Section<SA>);
+    setHidden(state: boolean): void;
+    getHidden(): boolean;
+    resetHidden(): void;
+}
+declare class FormTab<SA extends SchemaAttributes = SchemaAttributes> {
+    private readonly contextState;
+    private readonly tab;
+    constructor(contextState: ContextValue<DataFormContextState<SA>>, tab: Tab<SA>);
+    setHidden(state: boolean): void;
+    getHidden(): boolean;
+    resetHidden(): void;
+}
+export {};

package/dataform/FormManager.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormManager = void 0;
+const utils_1 = require("./DataFormProvider/utils");
+class FormManager {
+    contextState;
+    constructor(contextState) {
+        this.contextState = contextState;
+    }
+    get context() {
+        return this.contextState.value.current;
+    }
+    getAttribute(attributeName) {
+        return new FormAttribute(this.contextState, attributeName, this.context.schema.attributes[attributeName]);
+    }
+    getControl(name) {
+        const control = this.context.formInternal.controls.dict[name] ?? null;
+        if (!control) {
+            return null;
+        }
+        return new Control(this.contextState, control);
+    }
+    getSection(name) {
+        const section = this.context.formInternal.sections.dict[name];
+        if (!section) {
+            return null;
+        }
+        return new FormSection(this.contextState, section);
+    }
+    getTab(name) {
+        const tab = this.context.formInternal.tabs.dict[name];
+        if (!tab) {
+            return null;
+        }
+        return new FormTab(this.contextState, tab);
+    }
+}
+exports.FormManager = FormManager;
+class FormAttribute {
+    contextState;
+    attributeName;
+    attribute;
+    constructor(contextState, attributeName, attribute) {
+        this.contextState = contextState;
+        this.attributeName = attributeName;
+        this.attribute = attribute;
+    }
+    getInnerAttribute() {
+        return this.attribute;
+    }
+    setRequired(state) {
+        const control = this.contextState.value.current.formInternal.controls.dict[this.attributeName];
+        if (!control) {
+            return;
+        }
+        if (control.type !== 'standard') {
+            return;
+        }
+        this.contextState.setValue((prev) => {
+            return {
+                requiredFields: {
+                    ...prev.requiredFields,
+                    [this.attributeName]: state,
+                },
+            };
+        });
+    }
+    getRequired() {
+        const attribute = this.attribute;
+        const control = this.contextState.value.current.formInternal.controls.dict[this.attributeName];
+        if (control.type !== 'standard') {
+            return false;
+        }
+        return (0, utils_1.getIsFieldRequired)({
+            attribute,
+            control,
+            requiredFields: this.contextState.value.current.requiredFields,
+        });
+    }
+    resetRequired() {
+        this.contextState.setValue((prev) => {
+            const requiredFields = { ...prev.requiredFields };
+            delete requiredFields[this.attributeName];
+            return {
+                requiredFields,
+            };
+        });
+    }
+    getControls() {
+        return this.contextState.value.current.formInternal.controls.list
+            .filter((control) => control.type === 'standard' &&
+            control.attributeName === this.attributeName)
+            .map((control) => new Control(this.contextState, control));
+    }
+}
+class Control {
+    contextState;
+    control;
+    constructor(contextState, control) {
+        this.contextState = contextState;
+        this.control = control;
+    }
+    get context() {
+        return this.contextState.value.current;
+    }
+    getKey() {
+        let key = this.control.key;
+        if (!key && this.control.type === 'standard') {
+            key = this.control.attributeName;
+        }
+        return key;
+    }
+    getDisabled() {
+        if (this.control.type !== 'standard') {
+            return false;
+        }
+        const attributeName = this.control.attributeName;
+        return (0, utils_1.getIsFieldDisabled)({
+            control: this.control,
+            attribute: this.context.schema.attributes[attributeName],
+            disabledFields: this.context.disabledControls,
+            isFormReadonly: this.context.isReadonly,
+        });
+    }
+    setDisabled(state) {
+        if (this.control.type !== 'standard') {
+            return;
+        }
+        const key = this.control.attributeName;
+        this.contextState.setValue((prev) => {
+            return {
+                disabledControls: {
+                    ...prev.disabledControls,
+                    [key]: state,
+                },
+            };
+        });
+    }
+    resetDisabled() {
+        if (this.control.type !== 'standard') {
+            return;
+        }
+        const key = this.control.attributeName;
+        this.contextState.setValue((prev) => {
+            const disabledFields = { ...prev.disabledControls };
+            delete disabledFields[key];
+            return {
+                disabledControls: disabledFields,
+            };
+        });
+    }
+    getHidden() {
+        return (0, utils_1.getIsControlHidden)({
+            control: this.control,
+            hiddenControls: this.context.hiddenControls,
+        });
+    }
+    setHidden(state) {
+        const key = this.getKey();
+        if (!key) {
+            return;
+        }
+        this.contextState.setValue((prev) => {
+            return {
+                hiddenControls: {
+                    ...prev.hiddenControls,
+                    [key]: state,
+                },
+            };
+        });
+    }
+    resetHidden() {
+        const key = this.getKey();
+        if (!key) {
+            return;
+        }
+        this.contextState.setValue((prev) => {
+            const hiddenControls = { ...prev.hiddenControls };
+            delete hiddenControls[key];
+            return {
+                hiddenControls,
+            };
+        });
+    }
+}
+class FormSection {
+    contextState;
+    section;
+    constructor(contextState, section) {
+        this.contextState = contextState;
+        this.section = section;
+    }
+    setHidden(state) {
+        this.contextState.setValue((prev) => {
+            return {
+                hiddenSections: {
+                    ...prev.hiddenSections,
+                    [this.section.name]: state,
+                },
+            };
+        });
+    }
+    getHidden() {
+        return (this.contextState.value.current.hiddenSections[this.section.name] ??
+            this.section.hidden ??
+            false);
+    }
+    resetHidden() {
+        this.contextState.setValue((prev) => {
+            const hiddenSections = { ...prev.hiddenSections };
+            delete hiddenSections[this.section.name];
+            return {
+                hiddenSections,
+            };
+        });
+    }
+}
+class FormTab {
+    contextState;
+    tab;
+    constructor(contextState, tab) {
+        this.contextState = contextState;
+        this.tab = tab;
+    }
+    setHidden(state) {
+        this.contextState.setValue((prev) => {
+            return {
+                hiddenTabs: {
+                    ...prev.hiddenTabs,
+                    [this.tab.name]: state,
+                },
+            };
+        });
+    }
+    getHidden() {
+        return this.contextState.value.current.hiddenTabs[this.tab.name] ?? false;
+    }
+    resetHidden() {
+        this.contextState.setValue((prev) => {
+            const hiddenTabs = { ...prev.hiddenTabs };
+            delete hiddenTabs[this.tab.name];
+            return {
+                hiddenTabs,
+            };
+        });
+    }
+}

package/dataform/constants.d.ts

@@ -0,0 +1 @@
+export declare const EVENT_KEY_ON_FIELD_CHANGE = "onFieldChange";

package/dataform/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVENT_KEY_ON_FIELD_CHANGE = void 0;
+exports.EVENT_KEY_ON_FIELD_CHANGE = 'onFieldChange';

package/dataform/context.d.ts

@@ -1,17 +1,42 @@
-import { EntityMainFormCommandItemExperience, Form } from '@headless-adminapp/core/experience/form';
+import { EntityMainFormCommandItemExperience, Form, Section } from '@headless-adminapp/core/experience/form';
+import { SectionControl } from '@headless-adminapp/core/experience/form/SectionControl';
+import { Tab } from '@headless-adminapp/core/experience/form/Tab';
 import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { IEventManager } from '@headless-adminapp/core/store';
 import { Data } from '@headless-adminapp/core/transport';
 import { Nullable } from '@headless-adminapp/core/types';
+import { SaveRecordFn } from './utils/saveRecord';
 export type DataFormContextState<SA extends SchemaAttributes = SchemaAttributes> = {
+    contextKey: number;
     schema: Schema<SA>;
     form: Form<SA>;
     recordId?: string | number;
     cloneId?: string | number;
     commands: EntityMainFormCommandItemExperience[][];
+    saveRecordFn: SaveRecordFn;
     activeTab?: string;
+    disabledControls: Record<string, boolean>;
+    requiredFields: Record<string, boolean>;
+    hiddenControls: Record<string, boolean>;
+    hiddenSections: Record<string, boolean>;
+    hiddenTabs: Record<string, boolean>;
+    formInternal: {
+        controls: {
+            list: SectionControl<SA>[];
+            dict: Record<string, SectionControl<SA>>;
+        };
+        sections: {
+            list: Section<SA>[];
+            dict: Record<string, Section<SA>>;
+        };
+        tabs: {
+            dict: Record<string, Tab<SA>>;
+        };
+    };
     record?: Data<InferredSchemaType<SA>>;
     cloneRecord?: Data<InferredSchemaType<SA>>;
     isReadonly?: boolean;
+    eventManager: IEventManager;
     dataState: {
         isFetching: boolean;
         isError?: boolean;

package/dataform/hooks/index.d.ts

@@ -10,3 +10,14 @@ export * from './useRecordId';
 export * from './useRecordTitle';
 export * from './useSelectedForm';
 export * from './useLoadFormGridPage';
+export * from './useProcessFlowSteps';
+export * from './useEventManager';
+export * from './useIsControlHiddenByAttributeName';
+export * from './useIsControlHiddenByKey';
+export * from './useHiddenControlsManager';
+export * from './useDisabledControlsManager';
+export * from './useContextKey';
+export * from './useIsControlDisabled';
+export * from './useIsFieldRequired';
+export * from './useRequiredFieldManager';
+export * from './useFormManager';

package/dataform/hooks/index.js

@@ -26,3 +26,14 @@ __exportStar(require("./useRecordId"), exports);
 __exportStar(require("./useRecordTitle"), exports);
 __exportStar(require("./useSelectedForm"), exports);
 __exportStar(require("./useLoadFormGridPage"), exports);
+__exportStar(require("./useProcessFlowSteps"), exports);
+__exportStar(require("./useEventManager"), exports);
+__exportStar(require("./useIsControlHiddenByAttributeName"), exports);
+__exportStar(require("./useIsControlHiddenByKey"), exports);
+__exportStar(require("./useHiddenControlsManager"), exports);
+__exportStar(require("./useDisabledControlsManager"), exports);
+__exportStar(require("./useContextKey"), exports);
+__exportStar(require("./useIsControlDisabled"), exports);
+__exportStar(require("./useIsFieldRequired"), exports);
+__exportStar(require("./useRequiredFieldManager"), exports);
+__exportStar(require("./useFormManager"), exports);

package/dataform/hooks/useContextKey.d.ts

@@ -0,0 +1 @@
+export declare function useContextKey(): number;

package/dataform/hooks/useContextKey.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextKey = useContextKey;
+const context_1 = require("../../mutable/context");
+const context_2 = require("../context");
+function useContextKey() {
+    return (0, context_1.useContextSelector)(context_2.DataFormContext, (state) => state.contextKey);
+}

package/dataform/hooks/useDisabledControlsManager.d.ts

@@ -0,0 +1,6 @@
+/*** @deprecated */
+export declare function useDisabledControlsManager(): {
+    getIsControlDisabled: (attributeName: string) => boolean;
+    setControlDisabled: (attributeName: string, state: boolean) => void;
+    resetControlDisabled: (key: string) => void;
+};

package/dataform/hooks/useDisabledControlsManager.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisabledControlsManager = useDisabledControlsManager;
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const context_1 = require("@headless-adminapp/app/mutable/context");
+const react_1 = require("react");
+const context_2 = require("../context");
+const utils_1 = require("../DataFormProvider/utils");
+/*** @deprecated */
+function useDisabledControlsManager() {
+    const setValue = (0, mutable_1.useContextSetValue)(context_2.DataFormContext);
+    const dataFormContextValue = (0, context_1.useContextValue)(context_2.DataFormContext);
+    const _getIsControlDisabled = (0, react_1.useCallback)((attributeName) => {
+        const attribute = dataFormContextValue.current.schema.attributes[attributeName];
+        return (0, utils_1.getIsFieldDisabled)({
+            attribute,
+            control: dataFormContextValue.current.formInternal.controls.dict[attributeName],
+            disabledFields: dataFormContextValue.current.disabledControls,
+            isFormReadonly: dataFormContextValue.current.isReadonly,
+        });
+    }, [dataFormContextValue]);
+    const _setControlDisabled = (0, react_1.useCallback)((attributeName, state) => {
+        setValue((prev) => {
+            return {
+                disabledControls: {
+                    ...prev.disabledControls,
+                    [attributeName]: state,
+                },
+            };
+        });
+    }, [setValue]);
+    const _resetControlDisabled = (0, react_1.useCallback)((key) => {
+        setValue((prev) => {
+            const _disabledControls = { ...prev.disabledControls };
+            delete _disabledControls[key];
+            return {
+                hiddenControls: _disabledControls,
+            };
+        });
+    }, [setValue]);
+    return {
+        getIsControlDisabled: _getIsControlDisabled,
+        setControlDisabled: _setControlDisabled,
+        resetControlDisabled: _resetControlDisabled,
+    };
+}

package/dataform/hooks/useEventManager.d.ts

@@ -0,0 +1 @@
+export declare function useEventManager(): import("@headless-adminapp/core/store").IEventManager;

package/dataform/hooks/useEventManager.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEventManager = useEventManager;
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const context_1 = require("../context");
+function useEventManager() {
+    return (0, mutable_1.useContextSelector)(context_1.DataFormContext, (state) => state.eventManager);
+}

package/dataform/hooks/useFormManager.d.ts

@@ -0,0 +1,2 @@
+import { FormManager } from '../FormManager';
+export declare function useFormManager(): FormManager<import("@headless-adminapp/core/schema").SchemaAttributes>;

package/dataform/hooks/useFormManager.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormManager = useFormManager;
+const react_1 = require("react");
+const context_1 = require("../context");
+const FormManager_1 = require("../FormManager");
+function useFormManager() {
+    const context = (0, react_1.useContext)(context_1.DataFormContext);
+    if (!context) {
+        throw new Error('useFormManager must be used within a DataFormProvider');
+    }
+    return (0, react_1.useMemo)(() => new FormManager_1.FormManager(context), [context]);
+}

package/dataform/hooks/useFormNotifications.js

@@ -27,8 +27,8 @@ function useFormNotifications() {
         return notifications;
     }, [
         formInstanceAvailable,
-        formInstance === null || formInstance === void 0 ? void 0 : formInstance.formState.errors,
-        formInstance === null || formInstance === void 0 ? void 0 : formInstance.formState.isSubmitted,
+        formInstance?.formState.errors,
+        formInstance?.formState.isSubmitted,
         readonly,
     ]);
 }