@gisce/react-ooui 0.1.0

package/src/widgets/base/many2one/Many2oneSuffix.tsx

@@ -0,0 +1,210 @@
+import React, { useContext, useState, useEffect } from "react";
+import {
+  RightCircleOutlined,
+  PrinterOutlined,
+  ThunderboltOutlined,
+  EnterOutlined,
+} from "@ant-design/icons";
+import { Menu, Dropdown, Spin } from "antd";
+import {
+  TabManagerContext,
+  TabManagerContextType,
+} from "@/context/TabManagerContext";
+import { FormView } from "@/types";
+import { Many2oneSuffixModal } from "./Many2oneSuffixModal";
+import {
+  ContentRootContext,
+  ContentRootContextType,
+} from "@/context/ContentRootContext";
+import ConnectionProvider from "@/ConnectionProvider";
+import { processValues } from "@/helpers/formHelper";
+import showErrorDialog from "@/ui/ActionErrorDialog";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+type Props = {
+  id: number;
+  model: string;
+  context?: any;
+};
+
+export const Many2oneSuffix = (props: Props) => {
+  const { id, model, context = {} } = props;
+  const [actionModalVisible, setActionModalVisible] = useState<boolean>(false);
+  const [printModalVisible, setPrintModalVisible] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [formView, setFormView] = useState<FormView>();
+  const [targetValues, setTargetValues] = useState<any>();
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  const tabManagerContext = useContext(
+    TabManagerContext
+  ) as TabManagerContextType;
+  const { openRelate } = tabManagerContext || {};
+
+  const contentRootContext = useContext(
+    ContentRootContext
+  ) as ContentRootContextType;
+  const { processAction } = contentRootContext || {};
+
+  if (!id) {
+    return null;
+  }
+
+  async function fetchData() {
+    setIsLoading(true);
+
+    try {
+      const formView = await ConnectionProvider.getHandler().getView({
+        model,
+        type: "form",
+        context,
+      });
+      setFormView(formView);
+      const { fields, arch } = formView;
+
+      const values = (
+        await ConnectionProvider.getHandler().readObjects({
+          arch,
+          model,
+          ids: [id],
+          fields,
+          context,
+        })
+      )[0];
+
+      setTargetValues({ ...processValues(values, fields), active_id: id });
+
+      setIsLoading(false);
+    } catch (err) {
+      setIsLoading(false);
+      showErrorDialog(err);
+      return;
+    }
+  }
+
+  function menu() {
+    if (isLoading) {
+      return (
+        <Menu>
+          <div style={{ padding: 15 }}>
+            <Spin />
+          </div>
+        </Menu>
+      );
+    }
+
+    if (!formView || !formView.toolbar) {
+      return <Menu />;
+    }
+
+    const relateItems = formView?.toolbar?.relate.map((item: any) => {
+      return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
+    });
+
+    return (
+      <Menu onClick={handleMenuClick}>
+        {[
+          <Menu.Item
+            key="action"
+            disabled={
+              !formView!.toolbar.action || formView!.toolbar.action.length === 0
+            }
+            icon={<ThunderboltOutlined />}
+          >
+            {t("action")}
+          </Menu.Item>,
+          <Menu.Item
+            key="print"
+            disabled={
+              !formView!.toolbar.print || formView!.toolbar.print.length === 0
+            }
+            icon={<PrinterOutlined />}
+          >
+            {t("report")}
+          </Menu.Item>,
+          <Menu.Divider />,
+          <Menu.ItemGroup
+            title={
+              <>
+                <EnterOutlined /> <span> {t("related")}</span>
+              </>
+            }
+          >
+            {relateItems}
+          </Menu.ItemGroup>,
+        ]}
+      </Menu>
+    );
+  }
+
+  function handleMenuClick(event: any) {
+    if (event.key === "action") {
+      setActionModalVisible(true);
+    } else if (event.key === "print") {
+      setPrintModalVisible(true);
+    } else {
+      const relateItemClicked = formView!.toolbar.relate.find((item: any) => {
+        return item.id === parseInt(event.key);
+      });
+      if (!relateItemClicked) {
+        return;
+      }
+
+      openRelate({
+        relateData: relateItemClicked,
+        values: targetValues,
+        fields: formView!.fields,
+        action_id: relateItemClicked.id,
+        action_type: relateItemClicked.type,
+      });
+    }
+  }
+
+  function onActionItemClicked(actionData: any) {
+    setActionModalVisible(false);
+    processAction?.({
+      actionData,
+      values: targetValues,
+      fields: formView!.fields,
+      context: { active_id: id, active_ids: [id] },
+    });
+  }
+
+  function onPrintItemClicked(reportData: any) {
+    setPrintModalVisible(false);
+    processAction?.({
+      actionData: {
+        ...reportData,
+        datas: { ...(reportData.datas || {}), ids: [id] },
+      },
+      values: targetValues,
+      fields: formView!.fields,
+    });
+  }
+
+  return (
+    <>
+      <Dropdown overlay={menu()} trigger={["click"]}>
+        <RightCircleOutlined
+          style={{ color: "rgba(0,0,0,.45)" }}
+          onClick={(e) => {
+            e.preventDefault();
+            fetchData();
+          }}
+        />
+      </Dropdown>
+      <Many2oneSuffixModal
+        visible={actionModalVisible}
+        items={formView?.toolbar?.action}
+        onItemClicked={onActionItemClicked}
+        onCancel={() => setActionModalVisible(false)}
+      />
+      <Many2oneSuffixModal
+        visible={printModalVisible}
+        items={formView?.toolbar?.print}
+        onItemClicked={onPrintItemClicked}
+        onCancel={() => setPrintModalVisible(false)}
+      />
+    </>
+  );
+};

package/src/widgets/base/many2one/Many2oneSuffixModal.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import { Modal, Button, Space } from "antd";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+type Props = {
+  visible: boolean;
+  items: any[];
+  onItemClicked: (item: any) => void;
+  onCancel: () => void;
+};
+
+export const Many2oneSuffixModal = (props: Props) => {
+  const { visible, onCancel, items = [], onItemClicked } = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  return (
+    <Modal
+      title={t("selectAction")}
+      centered
+      visible={visible}
+      footer={null}
+      destroyOnClose
+      onCancel={onCancel}
+    >
+      <Space direction="vertical" className="w-full">
+        {items.map((item) => {
+          return (
+            <Button
+              className="w-full"
+              onClick={() => {
+                onItemClicked(item);
+              }}
+            >
+              {item.name}
+            </Button>
+          );
+        })}
+      </Space>
+    </Modal>
+  );
+};

package/src/widgets/base/one2many/One2many.tsx

@@ -0,0 +1,102 @@
+import React, { useContext, useState } from "react";
+import { One2many as One2manyOoui } from "@gisce/ooui";
+import Field from "@/common/Field";
+import { Spin, Alert } from "antd";
+import { Views } from "@/types";
+import ConnectionProvider from "@/ConnectionProvider";
+import One2manyProvider from "@/context/One2manyContext";
+import { One2manyInput } from "@/widgets/base/one2many/One2manyInput";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import { FormContext, FormContextType } from "@/context/FormContext";
+
+type Props = {
+  ooui: One2manyOoui;
+};
+
+export type ViewModes = "tree" | "form" | "graph";
+
+export const One2many = (props: Props) => {
+  const { ooui } = props;
+  const { mode, relation, views: oouiViews, required, context } = ooui;
+
+  let initialView: ViewModes;
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string>();
+  const [views, setViews] = useState<Views>(new Map<string, any>());
+  const formContext = useContext(FormContext) as FormContextType;
+  const { getContext } = formContext || {};
+
+  useDeepCompareEffect(() => {
+    fetchData();
+  }, [ooui]);
+
+  const getViewData = async (type: ViewModes) => {
+    if (oouiViews && oouiViews[type]) {
+      return oouiViews[type];
+    }
+    return await ConnectionProvider.getHandler().getView({
+      model: relation,
+      type,
+      context: { ...getContext?.(), ...context },
+    });
+  };
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      if (mode && mode.length > 0) {
+        for (const m of mode as ViewModes[]) {
+          const v = await getViewData(m);
+          views.set(m, v)
+        }
+        setViews(views)
+      } else {
+        const formView = await getViewData("form");
+        const treeView = await getViewData("tree");
+        views.set("form", formView);
+        views.set("tree", treeView);
+        setViews(views);
+      }
+    } catch (err) {
+      setError(JSON.stringify(err));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (mode && mode.length > 0) {
+    initialView = mode[0] as ViewModes;
+  } else {
+    initialView = "tree";
+  }
+
+  if (isLoading) {
+    return <Spin />;
+  }
+
+  if (error) {
+    return <Alert className="mt-10" message={error} type="error" banner />;
+  }
+
+  const validator = async (_: any, value: any) => {
+    if (!value) throw new Error();
+    if (!value.items) throw new Error();
+    if (!Array.isArray(value.items)) throw new Error();
+    if (value.items.length === 0) throw new Error();
+  };
+
+  return (
+    <One2manyProvider initialView={initialView}>
+      <Field
+        required={required}
+        type={"array"}
+        validator={validator}
+        {...props}
+      >
+        <One2manyInput ooui={ooui} views={views} />
+      </Field>
+    </One2manyProvider>
+  );
+};