@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/formBuilder/FormBuilderScreen.tsx

@@ -0,0 +1,491 @@
+import {
+  Alert,
+  AsyncBoundary,
+  AsyncSkeleton,
+  Chip,
+  Card,
+  ConfirmDialog,
+  EmptyState,
+  ScrollView,
+  SheetModal,
+  XStack,
+  YStack,
+  isWeb,
+  notify,
+} from "@multiplatform.one/components";
+import { Button, Form, useFormContext, type UseNavigationBlocker } from "@multiplatform.one/forms";
+import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import { Surface, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { FormToolbar } from "../form/FormToolbar";
+import { createHttpClient } from "../form/formActions";
+import { useBeforeUnloadGuard, useNavigationDirtyGuard } from "../form/platformHooks";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { useDoctypeMeta, type DoctypeMeta } from "../shared/useDoctypeMeta";
+import {
+  formBuilderFields,
+  formBuilderMode,
+  loadFormBuilderSource,
+  parseFormBuilderError,
+  saveFormBuilderLayout,
+} from "./api";
+import { DoctypePicker } from "./DoctypePicker";
+import { FieldPalette } from "./FieldPalette";
+import { FieldPropertiesPanel, type BuilderErrors } from "./FieldPropertiesPanel";
+import { FormBuilderCanvas } from "./FormBuilderCanvas";
+import {
+  fieldLocation,
+  findField,
+  insertField,
+  layoutFromFields,
+  newFieldFromType,
+  validateLayout,
+  type BuilderLayout,
+} from "./model";
+import { useFormBuilderDrag } from "./useFormBuilderDrag";
+
+export interface FormBuilderScreenProps {
+  doctype?: string;
+  /** Fieldname selected when the DocType loads; later changes do not reset the selection. */
+  initialSelection?: string;
+}
+
+const useBuilderBlocker: UseNavigationBlocker = (dirty) => {
+  const blocker = useNavigationDirtyGuard(dirty);
+  useBeforeUnloadGuard(dirty);
+  return {
+    state: blocker.blocked ? "blocked" : "unblocked",
+    proceed: blocker.proceed,
+    reset: blocker.reset,
+  };
+};
+
+export function FormBuilderScreen({ doctype, initialSelection }: FormBuilderScreenProps) {
+  return doctype ? (
+    <LoadedFormBuilder key={doctype} doctype={doctype} initialSelection={initialSelection} />
+  ) : (
+    <DoctypePicker />
+  );
+}
+
+function LoadedFormBuilder({
+  doctype,
+  initialSelection,
+}: FormBuilderScreenProps & { doctype: string }) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { meta, loading, error, reload } = useDoctypeMeta(doctype);
+  const [generation, setGeneration] = useState(0);
+  const refresh = () => {
+    setGeneration((value) => value + 1);
+    reload();
+  };
+  return (
+    <AsyncBoundary
+      flex={1}
+      minHeight={0}
+      minWidth={0}
+      keepPrevious={false}
+      loading={loading ? <AsyncSkeleton layout="generic" /> : false}
+      error={error}
+      onRetry={refresh}
+      empty={
+        !loading && !meta && !error ? (
+          <EmptyState title={t("formBuilder.noMeta", "No form metadata available")} />
+        ) : (
+          false
+        )
+      }
+    >
+      {meta ? (
+        <BuilderForm
+          key={`${doctype}:${generation}`}
+          meta={meta}
+          doctype={doctype}
+          reload={refresh}
+          initialSelection={initialSelection}
+        />
+      ) : null}
+    </AsyncBoundary>
+  );
+}
+
+function BuilderForm({
+  meta,
+  doctype,
+  reload,
+  initialSelection,
+}: {
+  initialSelection?: string;
+  meta: DoctypeMeta;
+  doctype: string;
+  reload: () => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const config = useFrappeConfig();
+  const layout = useMemo(() => layoutFromFields(formBuilderFields(meta)), [meta]);
+  const [errors, setErrors] = useState<BuilderErrors>({});
+  const [general, setGeneral] = useState<string>();
+  const [selection, setSelection] = useState<string | undefined>(
+    () =>
+      layout.tabs
+        .flatMap((tab) =>
+          tab.sections.flatMap((section) => section.columns.flatMap((column) => column.fields)),
+        )
+        .find((field) => field.df.fieldname === initialSelection)?.key,
+  );
+  const [validated, setValidated] = useState(false);
+  const clearIssues = useCallback(() => {
+    setErrors({});
+    setGeneral(undefined);
+    setSelection(undefined);
+    setValidated(false);
+  }, []);
+  const mode = formBuilderMode({ custom: meta.custom });
+
+  function clientErrors(next: BuilderLayout): BuilderErrors {
+    return Object.fromEntries(
+      Object.entries(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 }: { layout: BuilderLayout }) {
+    const invalid = clientErrors(next);
+    setErrors(invalid);
+    setGeneral(undefined);
+    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
+        ? createHttpClient({ ...config, baseURL: config.baseURL })
+        : undefined;
+      const source = config.fixtures
+        ? { doctype: "DocType", name: doctype, fields: formBuilderFields(meta) }
+        : await loadFormBuilderSource(http!, doctype, mode);
+      await saveFormBuilderLayout({
+        http,
+        fixtures: config.fixtures,
+        doctype,
+        mode,
+        source,
+        layout: next,
+      });
+      notify({
+        body: t("formBuilder.saved", "Form layout saved"),
+        severity: "success",
+        scope: "page",
+      });
+      reload();
+    } catch (error) {
+      const parsed = parseFormBuilderError(error, next);
+      const mapped: BuilderErrors = {};
+      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] : undefined;
+        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 (
+    <Form
+      formOptions={{ defaultValues: { layout } }}
+      onSubmit={submit}
+      saveBar={{ useBlocker: useBuilderBlocker }}
+      flex={1}
+      minHeight={0}
+      minWidth={0}
+    >
+      <BuilderEditor
+        doctype={doctype}
+        mode={mode}
+        reload={reload}
+        errors={errors}
+        general={general}
+        selection={selection}
+        onSelect={setSelection}
+        onReset={clearIssues}
+        onEdit={(next) => {
+          setGeneral(undefined);
+          setErrors(validated ? clientErrors(next) : {});
+        }}
+      />
+    </Form>
+  );
+}
+
+function BuilderEditor({
+  doctype,
+  mode,
+  reload,
+  errors,
+  general,
+  selection,
+  onSelect,
+  onEdit,
+  onReset,
+}: {
+  doctype: string;
+  mode: "customize" | "doctype";
+  reload: () => void;
+  errors: BuilderErrors;
+  general?: string;
+  selection?: string;
+  onSelect: (key: string) => void;
+  onEdit: (layout: BuilderLayout) => void;
+  onReset: () => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const sizeClass = useLayoutSizeClass();
+  const compact = sizeClass === "compact";
+  const sheets = sizeClass !== "large" && sizeClass !== "xl";
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const form = useFormContext<{ layout: BuilderLayout }>();
+  const subscribe = useCallback(
+    (listener: () => void) => {
+      const sub = form.store.subscribe(listener);
+      return () => sub.unsubscribe();
+    },
+    [form],
+  );
+  const state = useSyncExternalStore(
+    subscribe,
+    () => form.store.state,
+    () => form.store.state,
+  );
+  const layout = state.values.layout;
+  const [tabKey, setTabKey] = useState(layout.tabs[0].key);
+  const activeTab = layout.tabs.find((tab) => tab.key === tabKey) ?? layout.tabs[0];
+  const [sheet, setSheet] = useState<"palette" | "properties">();
+  const [pending, setPending] = useState<() => void>();
+  const change = (next: BuilderLayout) => {
+    if (state.isSubmitting) return;
+    form.setFieldValue("layout", next);
+    onEdit(next);
+  };
+  function select(key: string) {
+    onSelect(key);
+    if (sheets) setSheet("properties");
+  }
+  const drag = useFormBuilderDrag({
+    layout,
+    tabKey: activeTab.key,
+    onChange: change,
+    onSelect: select,
+  });
+
+  useEffect(() => {
+    if (!state.isDirty && (general || Object.keys(errors).length)) onReset();
+  }, [state.isDirty, general, errors, onReset]);
+
+  useEffect(() => {
+    if (!selection) return;
+    const location = fieldLocation(layout, selection);
+    if (location) setTabKey(location.tabKey);
+    else if (layout.tabs.some((tab) => tab.key === selection)) setTabKey(selection);
+    if (sheets && (errors[selection] || findField(layout, selection))) setSheet("properties");
+  }, [layout, selection, errors, sheets]);
+  useEffect(() => {
+    if (!isWeb || !sheet) return;
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setSheet(undefined);
+    };
+    document.addEventListener("keydown", escape);
+    return () => document.removeEventListener("keydown", escape);
+  }, [sheet]);
+
+  function guarded(action: () => void) {
+    if (state.isDirty) setPending(() => action);
+    else action();
+  }
+  const navigate = (href: string) => guarded(() => navigator.navigate(href));
+  function add(type: string) {
+    if (drag.suppressClick.current) return;
+    const location = selection ? fieldLocation(layout, selection) : undefined;
+    const column =
+      activeTab.sections
+        .flatMap((section) => section.columns)
+        .find((column) => column.key === location?.columnKey) ?? activeTab.sections[0].columns[0];
+    const inserted = insertField(layout, 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 = <FieldPalette onAdd={add} onPointerDown={drag.palettePointerDown} />;
+  const properties = (
+    <FieldPropertiesPanel
+      key={selection}
+      layout={layout}
+      selection={selection}
+      mode={mode}
+      errors={errors}
+      onChange={change}
+    />
+  );
+  const modeChip = (
+    <Chip size="$2">
+      {mode === "customize"
+        ? t("formBuilder.customizeMode", "Saves through Customize Form")
+        : t("formBuilder.doctypeMode", "Saves to DocType")}
+    </Chip>
+  );
+  return (
+    <YStack flex={1} minWidth={0} minHeight={0} {...knobProps.gap} testID="form-builder-screen">
+      <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 ? undefined : 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 ? (
+        <YStack {...knobProps.panelPadding}>
+          <Alert
+            intent="error"
+            title={t("formBuilder.saveFailed", "Unable to save the form layout.")}
+            testID="form-builder-error"
+          >
+            {general}
+          </Alert>
+        </YStack>
+      ) : null}
+      <YStack flex={1} minWidth={0} minHeight={0} {...knobProps.gap} {...knobProps.panelPadding}>
+        {sheets ? (
+          <XStack {...knobProps.gapSm}>
+            <Button size="$3" flex={1} onPress={() => setSheet("palette")}>
+              {t("formBuilder.fieldTypes", "Field types")}
+            </Button>
+            <Button size="$3" flex={1} onPress={() => setSheet("properties")}>
+              {t("formBuilder.properties", "Field properties")}
+            </Button>
+          </XStack>
+        ) : null}
+        <XStack flex={1} minWidth={0} minHeight={0} {...knobProps.gapLg}>
+          {!sheets ? (
+            <ScrollView flex={2} minWidth={0}>
+              <Card tier="content" minWidth={0}>
+                {palette}
+              </Card>
+            </ScrollView>
+          ) : null}
+          <YStack flex={4} minWidth={0} minHeight={0}>
+            <FormBuilderCanvas
+              layout={layout}
+              activeTab={activeTab.key}
+              selection={selection}
+              stacked={compact}
+              mode={mode}
+              errors={errors}
+              drag={drag}
+              onChange={change}
+              onTab={setTabKey}
+              onSelect={select}
+              onAdd={() => (sheets ? setSheet("palette") : add("Data"))}
+            />
+          </YStack>
+          {!sheets ? (
+            <ScrollView flex={2} minWidth={0}>
+              <Card tier="content" minWidth={0}>
+                <Surface size="$3">{properties}</Surface>
+              </Card>
+            </ScrollView>
+          ) : null}
+        </XStack>
+      </YStack>
+      {sheets ? (
+        <SheetModal
+          open={!!sheet}
+          onOpenChange={(open) => {
+            if (!open) setSheet(undefined);
+          }}
+          scrollable
+          snapPoint={85}
+        >
+          {sheet === "palette" ? palette : properties}
+        </SheetModal>
+      ) : null}
+      <ConfirmDialog
+        open={!!pending}
+        onOpenChange={(open) => {
+          if (!open) setPending(undefined);
+        }}
+        title={t("formBuilder.discardTitle", "Discard unsaved changes?")}
+        confirmLabel={t("formBuilder.discard", "Discard")}
+        onConfirm={() => {
+          form.reset();
+          pending?.();
+          setPending(undefined);
+        }}
+      />
+    </YStack>
+  );
+}