fastapi-rtk/dist/core/esm/Dialogs/EditDialog.mjs

A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.

import { jsx } from "react/jsx-runtime";
import { JsonFormsWithCustomizer } from "fastapi-rtk/.bundled-jsonforms";
import { DEBOUNCE_LOADING_DELAY, initialState, VIEW_MODE } from "fastapi-rtk/constants";
import { deepMerge, getItemId } from "fastapi-rtk/utils";
import { useProps, Stack } from "@mantine/core";
import { useForm } from "@mantine/form";
import { useDebouncedState } from "@mantine/hooks";
import { l as lodashExports } from "../_virtual/lodash.mjs";
import { yupResolver } from "../../../.external/esm/mantine-form-yup-resolver@2.0.0_@mantine_form@8.3.1_yup@1.7.0/mantine-form-yup-resolver/dist/esm/index.mjs";
import { useMemo, useRef, useEffect, useCallback } from "react";
import { convertToFormInputs as convertToFormInputs$1 } from "../ActionIcons/utils/convertToFormInputs.mjs";
import { convertToFormInputs } from "../fab-react-toolkit-patch/utils/convertToFormInputs.mjs";
import { useApi } from "../hooks/api/useApi.mjs";
import { useForms } from "../hooks/api/useForms.mjs";
import { useInfo } from "../hooks/auth/useInfo.mjs";
import "../Wrappers/Provider/Contexts/LangContext.mjs";
import { CommonModal } from "../Modals/CommonModal.mjs";
import { normalProps } from "../Modals/normalProps.mjs";
import { overlayProps } from "../Modals/overlayProps.mjs";
import { FormField } from "../Tables/DataGrid/FormField/FormField.mjs";
import { useTranslation } from "../../../.external/esm/react-i18next@15.7.3_i18next@25.5.2_react-dom@18.3.1_react@18.3.1_typescript@5.9.2/react-i18next/dist/es/useTranslation.mjs";
function EditDialog({
  jsonForms: __jsonForms,
  onSuccess,
  onError,
  translations,
  hideWarnings,
  jsonFormsProps,
  ...props
}) {
  var _a;
  const { info, refetch, refetchInfo, updateEntry } = useApi();
  const { t } = useTranslation();
  const { opened, setOpened, item, getItem, state, getState, setState, reset, view, setView } = useForms("edit");
  const [loading, setLoading] = useDebouncedState(false, DEBOUNCE_LOADING_DELAY);
  const { jsonForms: _jsonForms } = useProps("EditDialog", {}, {});
  const jsonForms = useMemo(
    () => deepMerge({ __: { setNull: true } }, _jsonForms, __jsonForms),
    [_jsonForms, __jsonForms]
  );
  const mergedTranslations = useMemo(
    () => (info == null ? void 0 : info.edit_translations) ?? translations ? deepMerge(info.edit_translations, translations) : void 0,
    [info == null ? void 0 : info.edit_translations, translations]
  );
  const { fab } = useInfo();
  const initialState$1 = useMemo(
    () => ({
      ...initialState,
      data: fab ? convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1((item == null ? void 0 : item.result) || {}, info.edit_schema)
    }),
    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
  );
  const initialStateRef = useRef(initialState$1);
  useEffect(() => {
    setState({ data: initialState$1.data });
    initialStateRef.current = initialState$1;
  }, [initialState$1, setState]);
  const onSubmit = useCallback(
    (e) => {
      e == null ? void 0 : e.preventDefault();
      setLoading(true);
      const new_data = Object.entries(getState().data).reduce((acc, [key, value]) => {
        if (lodashExports.isEqual(value, initialStateRef.current.data[key])) {
          return acc;
        }
        acc[key] = value;
        return acc;
      }, {});
      updateEntry(getItemId(getItem()), new_data).then((res) => {
        onSuccess == null ? void 0 : onSuccess(res);
        if (res) {
          refetch();
          refetchInfo();
        }
      }).catch(onError).finally(() => {
        setLoading(false);
        setOpened(false);
      });
    },
    [setLoading, getState, updateEntry, getItem, onError, onSuccess, refetch, refetchInfo, setOpened]
  );
  const form = useForm({ initialValues: info.edit.defaultValues, validate: yupResolver(info.edit.schema) });
  const onSubmitFunc = fab ? form.onSubmit((values, e) => {
    setState({ data: values });
    onSubmit(e);
  }) : onSubmit;
  useEffect(() => {
    if (JSON.stringify(state.data) !== JSON.stringify(form.getValues())) {
      form.setValues(state.data);
    }
  }, [state.data]);
  return /* @__PURE__ */ jsx(
    CommonModal,
    {
      view,
      setView,
      onSubmit: onSubmitFunc,
      actionButtons: { withResetButton: false },
      buttonText: t("Edit"),
      buttonLoading: loading,
      opened,
      onClose: () => setOpened(false),
      onExitTransitionEnd: reset,
      ...view === VIEW_MODE.OVERLAY ? overlayProps : {},
      ...view === VIEW_MODE.NORMAL ? normalProps : {},
      ...props,
      title: props.title ?? (info == null ? void 0 : info.edit_title),
      children: fab ? (
        //* Backward compatibility to fab-react-toolkit
        /* @__PURE__ */ jsx(Stack, { gap: "xs", children: (_a = info.edit.columns) == null ? void 0 : _a.map((item2, index) => /* @__PURE__ */ jsx(
          FormField,
          {
            form,
            name: item2.name,
            label: item2.label,
            description: item2.description,
            schema: item2,
            withAsterisk: item2.required
          },
          index
        )) })
      ) : /* @__PURE__ */ jsx(
        JsonFormsWithCustomizer,
        {
          schema: info.edit_schema,
          uischema: info.edit_uischema,
          data: state.data,
          onChange: setState,
          customizer: jsonForms,
          translations: mergedTranslations,
          hideWarnings,
          ...jsonFormsProps
        }
      )
    }
  );
}
export {
  EditDialog
};