gomtm 0.0.356 → 0.0.359

package/dist/esm/curd/form/CurdEditPanel.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function CurdEditPanel(props: {}): import("react").JSX.Element | null | undefined;

package/dist/esm/curd/form/CurdEditPanel.js

@@ -0,0 +1,56 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useMtRouter } from "mtxuilib/hooks/use-router";
+import { MtPopupPanel } from "mtxuilib/ui/ui-mt/MtPopupPanel";
+import { useMemo } from "react";
+import { useGomtmSuspenseQuery } from "../../gomtmQuery";
+import { RenderViewByName } from "../DynViews";
+import { useListview } from "../listview/list-store";
+import { useGomtmForm2 } from "./formStore";
+function CurdEditPanel(props) {
+  const gomtmForm = useGomtmForm2();
+  const router = useMtRouter();
+  if (!gomtmForm.open) {
+    return null;
+  }
+  if (!gomtmForm.viewName) {
+    return /* @__PURE__ */ jsx("div", { children: "missing viewUpdate value" });
+  }
+  if (gomtmForm.viewName.startsWith("/")) {
+    router.push(gomtmForm.viewName);
+    return;
+  }
+  if (!gomtmForm.viewName) {
+    return /* @__PURE__ */ jsx("div", { children: "missing viewName" });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    MtPopupPanel,
+    {
+      open: gomtmForm.open,
+      onOpenChange: gomtmForm.setOpen,
+      fullScreen: gomtmForm.fullScreen,
+      title: gomtmForm.title,
+      children: /* @__PURE__ */ jsx(RenderViewByName, { name: gomtmForm.viewName })
+    }
+  ) });
+}
+const WithLoadGetData = (props) => {
+  const { children } = props;
+  const methodGet = useListview((x) => x.methodGet);
+  const svc = useListview((x) => x.svc);
+  const activateItem = useListview((x) => x.activateItem);
+  const setDetailData = useListview((x) => x.setDetailData);
+  const detailQuery = useGomtmSuspenseQuery(svc, methodGet, {
+    id: parseInt(activateItem.id)
+  });
+  useMemo(() => {
+    setDetailData(detailQuery.data);
+  }, [detailQuery.data, setDetailData]);
+  if (detailQuery.isLoading) {
+    return /* @__PURE__ */ jsx("div", { children: "loading detail" });
+  }
+  return children;
+};
+export {
+  CurdEditPanel as default
+};

package/dist/esm/curd/form/GomtmForm.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare const GomtmForm: (props: {} & PropsWithChildren) => import("react").JSX.Element;

package/dist/esm/curd/form/GomtmForm.js

@@ -0,0 +1,46 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EditFormToolbar } from "mtxuilib/form/EditFormToolbar";
+import { MtForm } from "mtxuilib/ui/ui-mt/MtForm";
+import { useGomtmForm, useGomtmForm2 } from "./formStore";
+const GomtmForm = (props) => {
+  const { children } = props;
+  const handleSubmit = useGomtmForm((x) => x.handleSubmit);
+  const handleCancel = useGomtmForm((x) => x.handleCancel);
+  const gomtmForm = useGomtmForm2();
+  if (!gomtmForm.form) {
+    return /* @__PURE__ */ jsx("div", { children: "missing form object" });
+  }
+  return /* @__PURE__ */ jsx(MtForm, __spreadProps(__spreadValues({}, gomtmForm.form), { children: /* @__PURE__ */ jsxs("form", { onSubmit: gomtmForm.form.handleSubmit(handleSubmit), children: [
+    /* @__PURE__ */ jsx("div", { className: " sticky top-0 z-30 p-1", children: /* @__PURE__ */ jsx(
+      EditFormToolbar,
+      {
+        onSubmit: handleSubmit,
+        onCancel: handleCancel
+      }
+    ) }),
+    children
+  ] }) }));
+};
+export {
+  GomtmForm
+};

package/dist/esm/curd/form/formStore.d.ts

@@ -0,0 +1,34 @@
+import { PropsWithChildren } from 'react';
+interface GomtmFormProps {
+    open?: boolean;
+    fullScreen?: boolean;
+    viewName: string;
+    title?: string;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface GomtmFormState extends GomtmFormProps {
+    setOpen: (open: boolean) => void;
+    setFullScreen: (open: boolean) => void;
+    setTitle: (title: string) => void;
+    handleSubmit: (values: any) => void;
+    handleCancel: (values?: any) => void;
+}
+export declare const gomtmFormContext: import("react").Context<import("zustand").StoreApi<GomtmFormState> | null>;
+export declare const GomtmFormProvider: (props: PropsWithChildren<GomtmFormProps>) => import("react").JSX.Element;
+export declare function useGomtmForm(): GomtmFormState;
+export declare function useGomtmForm<T>(selector: (state: GomtmFormState) => T): T;
+export declare function useGomtmForm2(): {
+    form: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues, any, undefined>;
+    open: boolean | undefined;
+    setOpen: (open: boolean) => void;
+    fullScreen: boolean | undefined;
+    viewName: string;
+    title: string | undefined;
+    setFullScreen: (open: boolean) => void;
+    setTitle: (title: string) => void;
+    handleSubmit: (values: any) => void;
+    handleCancel: (values?: any) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+};
+export declare function GomtmFormDebug(): import("react").JSX.Element;
+export {};

package/dist/esm/curd/form/formStore.js

@@ -0,0 +1,121 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef } from "react";
+import { useForm } from "react-hook-form";
+import { useStore } from "zustand";
+import { createStore } from "zustand/vanilla";
+const createGomtmFormStore = (initProps) => {
+  const DEFAULT_PROPS = {
+    open: false,
+    viewName: ""
+  };
+  return createStore()((set, get) => __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_PROPS), initProps), {
+    setOpen: (open) => set({ open }),
+    setFullScreen: (fullScreen) => set({ fullScreen }),
+    setTitle: (title) => set({ title }),
+    handleSubmit: (values) => {
+      console.log("TODO submit formvalues", values);
+    },
+    handleCancel: (values) => {
+      set({ open: false });
+      const onOpenChange = get().onOpenChange;
+      if (onOpenChange) {
+        onOpenChange(false);
+      }
+    }
+  }));
+};
+const gomtmFormContext = createContext(null);
+const GomtmFormProvider = (props) => {
+  const _a = props, { children } = _a, etc = __objRest(_a, ["children"]);
+  const storeRef = useRef();
+  if (!storeRef.current) {
+    storeRef.current = createGomtmFormStore(props);
+  }
+  useMemo(() => {
+    var _a2;
+    (_a2 = storeRef.current) == null ? void 0 : _a2.setState({ open: props.open });
+  }, [props.open]);
+  useMemo(() => {
+    var _a2;
+    (_a2 = storeRef.current) == null ? void 0 : _a2.setState({ viewName: props.viewName });
+  }, [props.viewName]);
+  return /* @__PURE__ */ jsxs(gomtmFormContext.Provider, { value: storeRef.current, children: [
+    children,
+    /* @__PURE__ */ jsx(GomtmFormDebug, {})
+  ] });
+};
+function useGomtmForm(selector) {
+  const store = useContext(gomtmFormContext);
+  if (!store)
+    throw new Error("useGomtmForm Missing GomtmFormProvider in the tree");
+  const formStore = useStore(store, selector);
+  return formStore;
+}
+function useGomtmForm2() {
+  const storeForm = useGomtmForm();
+  const _setOpen = useGomtmForm((x) => x.setOpen);
+  const fullScreen = useGomtmForm((x) => x.fullScreen);
+  const viewName = useGomtmForm((x) => x.viewName);
+  const title = useGomtmForm((x) => x.title);
+  const form = useForm();
+  const open = storeForm.open;
+  const setOpen = useCallback((open2) => {
+    _setOpen(open2);
+  }, [_setOpen]);
+  return __spreadProps(__spreadValues({}, storeForm), {
+    form,
+    open,
+    setOpen,
+    fullScreen,
+    viewName,
+    title
+  });
+}
+function GomtmFormDebug() {
+  const viewName = useGomtmForm((x) => x.viewName);
+  const open = useGomtmForm((x) => x.open);
+  const gomtmForm = useGomtmForm2();
+  return /* @__PURE__ */ jsxs("div", { className: "bg-blue-100 p-2", children: [
+    /* @__PURE__ */ jsx("h1", { children: "GomtmFormDebug" }),
+    /* @__PURE__ */ jsx("pre", { children: JSON.stringify({ viewName, open, open2: gomtmForm.open }, null, 2) })
+  ] });
+}
+export {
+  GomtmFormDebug,
+  GomtmFormProvider,
+  gomtmFormContext,
+  useGomtmForm,
+  useGomtmForm2
+};

package/dist/esm/curd/form/useCurdUpdateForm.d.ts

@@ -0,0 +1,7 @@
+import { FieldValues } from "react-hook-form";
+export declare function useCurdUpdateForm<TFieldValues extends FieldValues = FieldValues>(): {
+    form: import("react-hook-form").UseFormReturn<TFieldValues, any, undefined>;
+    handleSubmit: (values: any) => void;
+    detailData: any;
+    setOpenEdit: (openEdit: boolean) => void;
+};

package/dist/esm/curd/form/useCurdUpdateForm.js

@@ -0,0 +1,25 @@
+"use client";
+import { useForm } from "react-hook-form";
+import { useCurdUpdateMutation, useListview } from "../listview/list-store";
+function useCurdUpdateForm() {
+  const detailData = useListview((x) => x.detailData);
+  const setOpenEdit = useListview((x) => x.setOpenEdit);
+  const mutationUpdate = useCurdUpdateMutation();
+  const form = useForm(
+    {
+      defaultValues: detailData
+    }
+  );
+  const handleSubmit = (values) => {
+    mutationUpdate.mutateAsync(values);
+  };
+  return {
+    form,
+    handleSubmit,
+    detailData,
+    setOpenEdit
+  };
+}
+export {
+  useCurdUpdateForm
+};

package/dist/esm/curd/listview/CommonListView.js

@@ -1,19 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMtRouter } from "mtxuilib/hooks/use-router";
 import { Icons } from "mtxuilib/icons/icons";
 import { cn } from "mtxuilib/lib/utils";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "mtxuilib/ui/dropdown-menu";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "mtxuilib/ui/pagination";
 import { MtButton } from "mtxuilib/ui/ui-mt/Button";
-import { Suspense, lazy, useCallback, useMemo, useState } from "react";
+import { Suspense, lazy, useState } from "react";
 import { MtmErrorView } from "../../components/MtmErrorView";
 import { useGomtmSuspenseInfiniteQuery } from "../../gomtmQuery";
-import CurdEditPanel from "../edit/CurdEditPanel";
+import CurdEditPanel from "../form/CurdEditPanel";
+import { GomtmFormProvider } from "../form/formStore";
 import { CommontListResView } from "../list-item/ListViewLayoutRender";
 import { PanelRemove } from "../remove/RemovePanel";
 import { useListview } from "./list-store";
-import { GomtmFormProvider } from "../edit/formStore";
 const ALL_Layouts = [
   "default",
   "demo"
@@ -30,25 +29,6 @@ function CommonListView() {
   const setOpenCreate = useListview((x) => x.setOpenCreate);
   const viewUpdate = useListview((x) => x.viewUpdate);
   const viewCreate = useListview((x) => x.viewCreate);
-  const open = openEdit || openCreate;
-  const setOpen = useCallback((open2) => {
-    if (openCreate) {
-      setOpenCreate(false);
-    }
-    if (openEdit) {
-      setOpenEdit(false);
-    }
-  }, [openCreate, openEdit, setOpenCreate, setOpenEdit]);
-  const router = useMtRouter();
-  const viewName = useMemo(() => {
-    if (openCreate) {
-      return viewCreate;
-    }
-    if (openEdit) {
-      return viewUpdate;
-    }
-    return "";
-  }, [openCreate, openEdit, viewCreate, viewUpdate]);
   const listQuery = useGomtmSuspenseInfiniteQuery(svc, methodList, paramList);
   if (!(listQuery == null ? void 0 : listQuery.data)) {
     return null;
@@ -80,24 +60,34 @@ function CommonListView() {
       /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { href: "#" }) })
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "absolute right-1 top-1", children: /* @__PURE__ */ jsx(ListViewActions, {}) }),
-    /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsxs(
-      GomtmFormProvider,
-      {
-        open,
-        fullScreen: true,
-        viewName,
-        children: [
-          /* @__PURE__ */ jsx(CurdEditPanel, {}),
-          /* @__PURE__ */ jsx(PanelRemove, {})
-        ]
-      }
-    ) })
+    /* @__PURE__ */ jsxs(Suspense, { children: [
+      /* @__PURE__ */ jsx(
+        GomtmFormProvider,
+        {
+          open: openEdit,
+          fullScreen: true,
+          viewName: viewUpdate,
+          onOpenChange: setOpenEdit,
+          children: /* @__PURE__ */ jsx(CurdEditPanel, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        GomtmFormProvider,
+        {
+          open: openCreate,
+          fullScreen: true,
+          viewName: viewCreate,
+          onOpenChange: setOpenCreate,
+          children: /* @__PURE__ */ jsx(CurdEditPanel, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(PanelRemove, {})
+    ] })
   ] });
 }
 const ListViewActions = () => {
   const [open, setOpen] = useState(false);
   const setOpenCreate = useListview((x) => x.setOpenCreate);
-  setOpen;
   return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { variant: "ghost", className: "m-0 flex h-10 w-10 items-center justify-center border p-0 shadow-sm backdrop-blur", children: /* @__PURE__ */ jsx(Icons.ellipsis, {}) }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", children: [