@multiplatform.one/backoffice 7.34.4 → 7.35.0

package/dist/cjs/formBuilder/FormBuilderScreen.cjs

@@ -0,0 +1,448 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FormBuilderScreen_exports = {};
+__export(FormBuilderScreen_exports, {
+  FormBuilderScreen: () => FormBuilderScreen
+});
+module.exports = __toCommonJS(FormBuilderScreen_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_frappe_ui = require("@multiplatform.one/frappe-ui");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+var import_BackofficeProvider = require("../config/BackofficeProvider.cjs");
+var import_FormToolbar = require("../form/FormToolbar.cjs");
+var import_formActions = require("../form/formActions.cjs");
+var import_platformHooks = require("../form/platformHooks.cjs");
+var import_i18n = require("../i18n/index.cjs");
+var import_useDoctypeMeta = require("../shared/useDoctypeMeta.cjs");
+var import_api = require("./api.cjs");
+var import_DoctypePicker = require("./DoctypePicker.cjs");
+var import_FieldPalette = require("./FieldPalette.cjs");
+var import_FieldPropertiesPanel = require("./FieldPropertiesPanel.cjs");
+var import_FormBuilderCanvas = require("./FormBuilderCanvas.cjs");
+var import_model = require("./model.cjs");
+var import_useFormBuilderDrag = require("./useFormBuilderDrag.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const useBuilderBlocker = dirty => {
+  const blocker = (0, import_platformHooks.useNavigationDirtyGuard)(dirty);
+  (0, import_platformHooks.useBeforeUnloadGuard)(dirty);
+  return {
+    state: blocker.blocked ? "blocked" : "unblocked",
+    proceed: blocker.proceed,
+    reset: blocker.reset
+  };
+};
+function FormBuilderScreen({
+  doctype,
+  initialSelection
+}) {
+  return doctype ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(LoadedFormBuilder, {
+    doctype,
+    initialSelection
+  }, doctype) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DoctypePicker.DoctypePicker, {});
+}
+function LoadedFormBuilder({
+  doctype,
+  initialSelection
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    meta,
+    loading,
+    error,
+    reload
+  } = (0, import_useDoctypeMeta.useDoctypeMeta)(doctype);
+  const [generation, setGeneration] = (0, import_react.useState)(0);
+  const refresh = () => {
+    setGeneration(value => value + 1);
+    reload();
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    keepPrevious: false,
+    loading: loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncSkeleton, {
+      layout: "generic"
+    }) : false,
+    error,
+    onRetry: refresh,
+    empty: !loading && !meta && !error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+      title: t("formBuilder.noMeta", "No form metadata available")
+    }) : false,
+    children: meta ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(BuilderForm, {
+      meta,
+      doctype,
+      reload: refresh,
+      initialSelection
+    }, `${doctype}:${generation}`) : null
+  });
+}
+function BuilderForm({
+  meta,
+  doctype,
+  reload,
+  initialSelection
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const config = (0, import_frappe_ui.useFrappeConfig)();
+  const layout = (0, import_react.useMemo)(() => (0, import_model.layoutFromFields)((0, import_api.formBuilderFields)(meta)), [meta]);
+  const [errors, setErrors] = (0, import_react.useState)({});
+  const [general, setGeneral] = (0, import_react.useState)();
+  const [selection, setSelection] = (0, import_react.useState)(() => layout.tabs.flatMap(tab => tab.sections.flatMap(section => section.columns.flatMap(column => column.fields))).find(field => field.df.fieldname === initialSelection)?.key);
+  const [validated, setValidated] = (0, import_react.useState)(false);
+  const clearIssues = (0, import_react.useCallback)(() => {
+    setErrors({});
+    setGeneral(void 0);
+    setSelection(void 0);
+    setValidated(false);
+  }, []);
+  const mode = (0, import_api.formBuilderMode)({
+    custom: meta.custom
+  });
+  function clientErrors(next) {
+    return Object.fromEntries(Object.entries((0, import_model.validateLayout)(next)).map(([key, messages]) => [key, Object.fromEntries(messages.map(message => [message.key.endsWith("optionsRequired") ? "options" : message.key.endsWith("labelRequired") ? "label" : "fieldname", t(message.key, message.default)]))]));
+  }
+  async function submit({
+    layout: next
+  }) {
+    const invalid = clientErrors(next);
+    setErrors(invalid);
+    setGeneral(void 0);
+    setValidated(true);
+    const keys = Object.keys(invalid);
+    if (keys.length) {
+      setSelection(keys[0]);
+      throw new Error(t("formBuilder.validation.summary", "{{count}} fields need attention.", {
+        count: keys.length
+      }));
+    }
+    try {
+      if (!config?.baseURL && !config?.fixtures) throw new Error(t("formBuilder.noConnection", "No Frappe connection is available."));
+      const http = config.baseURL ? (0, import_formActions.createHttpClient)({
+        ...config,
+        baseURL: config.baseURL
+      }) : void 0;
+      const source = config.fixtures ? {
+        doctype: "DocType",
+        name: doctype,
+        fields: (0, import_api.formBuilderFields)(meta)
+      } : await (0, import_api.loadFormBuilderSource)(http, doctype, mode);
+      await (0, import_api.saveFormBuilderLayout)({
+        http,
+        fixtures: config.fixtures,
+        doctype,
+        mode,
+        source,
+        layout: next
+      });
+      (0, import_components.notify)({
+        body: t("formBuilder.saved", "Form layout saved"),
+        severity: "success",
+        scope: "page"
+      });
+      reload();
+    } catch (error) {
+      const parsed = (0, import_api.parseFormBuilderError)(error, next);
+      const mapped = {};
+      for (const field of next.tabs.flatMap(tab => [tab, ...tab.sections.flatMap(section => [section, ...section.columns.flatMap(column => [column, ...column.fields])])])) {
+        const message = field.df ? parsed.fieldErrors[field.df.fieldname] : void 0;
+        if (message) mapped[field.key] = {
+          label: message
+        };
+      }
+      setErrors(mapped);
+      if (Object.keys(mapped)[0]) setSelection(Object.keys(mapped)[0]);
+      setGeneral(parsed.general);
+      throw new Error(parsed.general || t("formBuilder.saveFailed", "Unable to save the form layout."));
+    }
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Form, {
+    formOptions: {
+      defaultValues: {
+        layout
+      }
+    },
+    onSubmit: submit,
+    saveBar: {
+      useBlocker: useBuilderBlocker
+    },
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(BuilderEditor, {
+      doctype,
+      mode,
+      reload,
+      errors,
+      general,
+      selection,
+      onSelect: setSelection,
+      onReset: clearIssues,
+      onEdit: next => {
+        setGeneral(void 0);
+        setErrors(validated ? clientErrors(next) : {});
+      }
+    })
+  });
+}
+function BuilderEditor({
+  doctype,
+  mode,
+  reload,
+  errors,
+  general,
+  selection,
+  onSelect,
+  onEdit,
+  onReset
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const sizeClass = (0, import_theme.useLayoutSizeClass)();
+  const compact = sizeClass === "compact";
+  const sheets = sizeClass !== "large" && sizeClass !== "xl";
+  const navigator = (0, import_BackofficeProvider.useBackofficeNavigator)();
+  const paths = (0, import_BackofficeProvider.useBackofficePaths)();
+  const form = (0, import_forms.useFormContext)();
+  const subscribe = (0, import_react.useCallback)(listener => {
+    const sub = form.store.subscribe(listener);
+    return () => sub.unsubscribe();
+  }, [form]);
+  const state = (0, import_react.useSyncExternalStore)(subscribe, () => form.store.state, () => form.store.state);
+  const layout = state.values.layout;
+  const [tabKey, setTabKey] = (0, import_react.useState)(layout.tabs[0].key);
+  const activeTab = layout.tabs.find(tab => tab.key === tabKey) ?? layout.tabs[0];
+  const [sheet, setSheet] = (0, import_react.useState)();
+  const [pending, setPending] = (0, import_react.useState)();
+  const change = next => {
+    if (state.isSubmitting) return;
+    form.setFieldValue("layout", next);
+    onEdit(next);
+  };
+  function select(key) {
+    onSelect(key);
+    if (sheets) setSheet("properties");
+  }
+  const drag = (0, import_useFormBuilderDrag.useFormBuilderDrag)({
+    layout,
+    tabKey: activeTab.key,
+    onChange: change,
+    onSelect: select
+  });
+  (0, import_react.useEffect)(() => {
+    if (!state.isDirty && (general || Object.keys(errors).length)) onReset();
+  }, [state.isDirty, general, errors, onReset]);
+  (0, import_react.useEffect)(() => {
+    if (!selection) return;
+    const location = (0, import_model.fieldLocation)(layout, selection);
+    if (location) setTabKey(location.tabKey);else if (layout.tabs.some(tab => tab.key === selection)) setTabKey(selection);
+    if (sheets && (errors[selection] || (0, import_model.findField)(layout, selection))) setSheet("properties");
+  }, [layout, selection, errors, sheets]);
+  (0, import_react.useEffect)(() => {
+    if (!import_components.isWeb || !sheet) return;
+    const escape = event => {
+      if (event.key === "Escape") setSheet(void 0);
+    };
+    document.addEventListener("keydown", escape);
+    return () => document.removeEventListener("keydown", escape);
+  }, [sheet]);
+  function guarded(action) {
+    if (state.isDirty) setPending(() => action);else action();
+  }
+  const navigate = href => guarded(() => navigator.navigate(href));
+  function add(type) {
+    if (drag.suppressClick.current) return;
+    const location = selection ? (0, import_model.fieldLocation)(layout, selection) : void 0;
+    const column = activeTab.sections.flatMap(section => section.columns).find(column2 => column2.key === location?.columnKey) ?? activeTab.sections[0].columns[0];
+    const inserted = (0, import_model.insertField)(layout, (0, import_model.newFieldFromType)(layout, type), {
+      columnId: column.key,
+      index: column.fields.length
+    });
+    change(inserted.layout);
+    const newTab = inserted.layout.tabs.find(tab => tab.key === inserted.key);
+    if (newTab) setTabKey(newTab.key);
+    select(inserted.key);
+  }
+  const palette = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FieldPalette.FieldPalette, {
+    onAdd: add,
+    onPointerDown: drag.palettePointerDown
+  });
+  const properties = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FieldPropertiesPanel.FieldPropertiesPanel, {
+    layout,
+    selection,
+    mode,
+    errors,
+    onChange: change
+  }, selection);
+  const modeChip = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+    size: "$2",
+    children: mode === "customize" ? t("formBuilder.customizeMode", "Saves through Customize Form") : t("formBuilder.doctypeMode", "Saves to DocType")
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    ...knobProps.gap,
+    testID: "form-builder-screen",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FormToolbar.FormToolbar, {
+      title: doctype,
+      breadcrumbs: [{
+        label: t("formBuilder.home", "Home"),
+        href: paths.home()
+      }, {
+        label: t("formBuilder.title", "Customize Form"),
+        href: paths.formBuilder()
+      }, {
+        label: doctype
+      }],
+      onNavigate: navigate,
+      indicator: "saved",
+      showIndicator: false,
+      isSaving: state.isSubmitting,
+      isDirty: state.isDirty,
+      canSave: false,
+      canSubmit: false,
+      canCancel: false,
+      canAmend: false,
+      onSave: () => {},
+      onSubmit: () => {},
+      onCancel: () => {},
+      onAmend: () => {},
+      cluster: compact ? void 0 : modeChip,
+      menuItems: [{
+        key: "list",
+        icon: "list",
+        label: t("formBuilder.goToList", "Go to {{doctype}} list", {
+          doctype
+        }),
+        onSelect: () => navigate(paths.list(doctype))
+      }, {
+        key: "reload",
+        icon: "reload",
+        label: t("formBuilder.reload", "Reload"),
+        onSelect: () => guarded(reload)
+      }]
+    }), general ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      ...knobProps.panelPadding,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Alert, {
+        intent: "error",
+        title: t("formBuilder.saveFailed", "Unable to save the form layout."),
+        testID: "form-builder-error",
+        children: general
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      flex: 1,
+      minWidth: 0,
+      minHeight: 0,
+      ...knobProps.gap,
+      ...knobProps.panelPadding,
+      children: [sheets ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        ...knobProps.gapSm,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$3",
+          flex: 1,
+          onPress: () => setSheet("palette"),
+          children: t("formBuilder.fieldTypes", "Field types")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$3",
+          flex: 1,
+          onPress: () => setSheet("properties"),
+          children: t("formBuilder.properties", "Field properties")
+        })]
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0,
+        ...knobProps.gapLg,
+        children: [!sheets ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+          flex: 2,
+          minWidth: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Card, {
+            tier: "content",
+            minWidth: 0,
+            children: palette
+          })
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          flex: 4,
+          minWidth: 0,
+          minHeight: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FormBuilderCanvas.FormBuilderCanvas, {
+            layout,
+            activeTab: activeTab.key,
+            selection,
+            stacked: compact,
+            mode,
+            errors,
+            drag,
+            onChange: change,
+            onTab: setTabKey,
+            onSelect: select,
+            onAdd: () => sheets ? setSheet("palette") : add("Data")
+          })
+        }), !sheets ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+          flex: 2,
+          minWidth: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Card, {
+            tier: "content",
+            minWidth: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Surface, {
+              size: "$3",
+              children: properties
+            })
+          })
+        }) : null]
+      })]
+    }), sheets ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+      open: !!sheet,
+      onOpenChange: open => {
+        if (!open) setSheet(void 0);
+      },
+      scrollable: true,
+      snapPoint: 85,
+      children: sheet === "palette" ? palette : properties
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ConfirmDialog, {
+      open: !!pending,
+      onOpenChange: open => {
+        if (!open) setPending(void 0);
+      },
+      title: t("formBuilder.discardTitle", "Discard unsaved changes?"),
+      confirmLabel: t("formBuilder.discard", "Discard"),
+      onConfirm: () => {
+        form.reset();
+        pending?.();
+        setPending(void 0);
+      }
+    })]
+  });
+}