feat(ui): new AccessEditForm using antd

ui/src/components/access/AccessEditModal.tsx

@@ -0,0 +1,108 @@
+import { cloneElement, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useControllableValue } from "ahooks";
+import { Modal, notification } from "antd";
+
+import { type AccessModel } from "@/domain/access";
+import { useAccessStore } from "@/stores/access";
+import AccessEditForm, { type AccessEditFormInstance } from "./AccessEditForm";
+
+export type AccessEditModalProps = {
+  data?: Partial<AccessModel>;
+  loading?: boolean;
+  mode: "add" | "edit" | "copy";
+  open?: boolean;
+  trigger?: React.ReactElement;
+  onOpenChange?: (open: boolean) => void;
+};
+
+const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditModalProps) => {
+  const { t } = useTranslation();
+
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const { createAccess, updateAccess } = useAccessStore();
+
+  const [open, setOpen] = useControllableValue<boolean>(props, {
+    valuePropName: "open",
+    defaultValuePropName: "defaultOpen",
+    trigger: "onOpenChange",
+  });
+
+  const triggerEl = useMemo(() => {
+    if (!trigger) {
+      return null;
+    }
+
+    return cloneElement(trigger, {
+      ...trigger.props,
+      onClick: () => {
+        setOpen(true);
+        trigger.props?.onClick?.();
+      },
+    });
+  }, [trigger, setOpen]);
+
+  const formRef = useRef<AccessEditFormInstance>(null);
+  const [formPending, setFormPending] = useState(false);
+
+  const handleClickOk = async () => {
+    setFormPending(true);
+    try {
+      await formRef.current!.validateFields();
+    } catch (err) {
+      setFormPending(false);
+      return Promise.reject();
+    }
+
+    try {
+      if (mode === "add") {
+        await createAccess(formRef.current!.getFieldsValue() as AccessModel);
+      } else {
+        await updateAccess({ ...data, ...formRef.current!.getFieldsValue() } as AccessModel);
+      }
+
+      setOpen(false);
+    } catch (err) {
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
+
+      throw err;
+    } finally {
+      setFormPending(false);
+    }
+  };
+
+  const handleClickCancel = () => {
+    if (formPending) return Promise.reject();
+
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {NotificationContextHolder}
+
+      {triggerEl}
+
+      <Modal
+        afterClose={() => setOpen(false)}
+        cancelButtonProps={{ disabled: formPending }}
+        closable
+        confirmLoading={formPending}
+        destroyOnClose
+        loading={loading}
+        okText={mode === "edit" ? t("common.button.save") : t("common.button.submit")}
+        open={open}
+        title={t(`access.action.${mode}`)}
+        onOk={handleClickOk}
+        onCancel={handleClickCancel}
+      >
+        <div className="pt-4 pb-2">
+          <AccessEditForm ref={formRef} mode={mode === "add" ? "add" : "edit"} model={data} />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default AccessEditModal;