@gisce/react-ooui 0.1.0

package/src/views/RootView.tsx

@@ -0,0 +1,467 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import { ConnectionProvider, ContentRootProvider, FormView } from "..";
+import { v4 as uuidv4 } from "uuid";
+import Welcome from "./Welcome";
+import TabManagerProvider from "@/context/TabManagerContext";
+import ActionView, { View } from "./ActionView";
+import { parseContext } from "@gisce/ooui";
+import LocaleContextProvider from "@/context/LocaleContext";
+import { tForLang } from "@/context/LocaleContext";
+import { ShortcutApi } from "@/ui/FavouriteButton";
+import showErrorDialog from "@/ui/ActionErrorDialog";
+import { ViewType } from "@/types";
+
+type RootViewProps = {
+  children: React.ReactNode;
+  globalValues?: any;
+  rootContext?: any;
+  lang: string;
+};
+
+export type ActionInfo = {
+  id: number;
+  type: string;
+};
+
+function RootView(props: RootViewProps, ref: any) {
+  const { children, globalValues = {}, rootContext = {}, lang } = props;
+  const [activeKey, setActiveKey] = useState<string>("welcome");
+
+  const [tabs, setTabs] = useState<any>([
+    {
+      title: tForLang("welcome", lang),
+      key: "welcome",
+      closable: true,
+      content: <Welcome />,
+    },
+  ]);
+  const tabViewsCloseFunctions = useRef(new Map<string, any>());
+  const contentRootProvider = useRef();
+
+  useImperativeHandle(ref, () => ({
+    retrieveAndOpenAction,
+    openShortcut,
+  }));
+
+  function remove(key: string) {
+    if (key === activeKey) {
+      const currentIndex = tabs.findIndex((tab: any) => tab.key === key);
+
+      if (tabs[currentIndex - 1]) {
+        setActiveKey(tabs[currentIndex - 1].key);
+      }
+      if (tabs[currentIndex + 1]) {
+        setActiveKey(tabs[currentIndex + 1].key);
+      }
+    }
+
+    setTabs(tabs.filter((tab: any) => tab.key !== key));
+    tabViewsCloseFunctions.current.delete(key);
+  }
+
+  function registerViewCloseFn({
+    tabKey,
+    canWeClose,
+  }: {
+    tabKey: string;
+    canWeClose: any;
+  }) {
+    tabViewsCloseFunctions.current.set(tabKey, canWeClose);
+  }
+
+  async function retrieveAndOpenAction({
+    action,
+    values,
+    forced_values,
+    initialViewType,
+    res_id,
+  }: {
+    action: string;
+    values?: any;
+    forced_values?: any;
+    initialViewType?: ViewType;
+    res_id?: number;
+  }) {
+    const dataForAction = await ConnectionProvider.getHandler().getActionData({
+      action,
+      context: rootContext,
+    });
+
+    if (dataForAction.type === "ir.actions.wizard") {
+      showErrorDialog("Action type not supported");
+      return;
+    }
+
+    const [action_type, action_id_string] = action.split(",");
+    const action_id = parseInt(action_id_string);
+
+    const parsedContext = parseContext({
+      context: dataForAction.context,
+      values: globalValues,
+      fields: {},
+    });
+
+    const parsedDomain = dataForAction.domain
+      ? await ConnectionProvider.getHandler().evalDomain({
+          domain: dataForAction.domain,
+          values: globalValues,
+          context: { ...rootContext, ...parsedContext },
+        })
+      : [];
+
+    const { res_model: model, views, name: title, target } = dataForAction;
+
+    const finalViews = [];
+
+    for (const viewArray of views) {
+      const [id, viewType] = viewArray;
+
+      if (!id) {
+        if (viewType === "dashboard") {
+          finalViews.push([undefined, "dashboard"]);
+        } else {
+          const { view_id } = await ConnectionProvider.getHandler().getView({
+            model,
+            type: viewType,
+            id,
+            context: { ...rootContext, ...parsedContext },
+          });
+          finalViews.push([view_id, viewType]);
+        }
+      } else {
+        finalViews.push(viewArray);
+      }
+    }
+
+    let initialView;
+
+    if (initialViewType) {
+      const [id, type] = finalViews.find(
+        ([_, type]) => type === initialViewType
+      );
+      initialView = { id, type };
+    } else {
+      const [id, type] = finalViews[0];
+      initialView = { id, type };
+    }
+
+    openAction({
+      domain: parsedDomain,
+      context: { ...rootContext, ...parsedContext },
+      model,
+      views: finalViews,
+      title,
+      target,
+      initialView,
+      action_type,
+      action_id,
+      values,
+      forced_values,
+      res_id,
+    });
+  }
+
+  function addNewTab({
+    title,
+    content,
+    key,
+    action,
+  }: {
+    title: string;
+    content: any;
+    key: string;
+    action?: ActionInfo;
+  }) {
+    let newTabs = [...tabs];
+
+    if (tabs.length === 1 && tabs[0].key === "welcome") {
+      newTabs = [...tabs.filter((tab: any) => tab.key !== "welcome")];
+    }
+
+    setTabs([
+      ...newTabs,
+      {
+        title,
+        key,
+        closable: true,
+        content,
+        action,
+      },
+    ]);
+
+    setActiveKey(key);
+  }
+
+  async function openRelate({
+    relateData,
+    fields,
+    values,
+    action_id,
+    action_type,
+  }: {
+    relateData: any;
+    fields: any;
+    values: any;
+    action_id: number;
+    action_type: string;
+  }) {
+    const {
+      res_model: model,
+      context,
+      domain,
+      views,
+      target,
+      string: title,
+    } = relateData;
+
+    const [id, type] = views[0];
+    const initialView = { id, type };
+
+    const parsedContext = parseContext({
+      context,
+      values: { ...values, ...globalValues },
+      fields,
+    });
+
+    const parsedDomain = domain
+      ? await ConnectionProvider.getHandler().evalDomain({
+          domain: domain,
+          values: { ...values, ...globalValues },
+          context: { ...rootContext, ...parsedContext },
+        })
+      : [];
+
+    openAction({
+      model,
+      target,
+      views,
+      context: { ...rootContext, ...parsedContext },
+      domain: parsedDomain,
+      title,
+      initialView,
+      action_id,
+      action_type,
+    });
+  }
+
+  async function openShortcut(shortcut: ShortcutApi) {
+    const { action_id, action_type, res_id, view_id } = shortcut;
+    const action = `${action_type},${action_id}`;
+
+    const dataForAction = await ConnectionProvider.getHandler().getActionData({
+      action,
+      context: rootContext,
+    });
+    const parsedContext = parseContext({
+      context: dataForAction.context,
+      values: globalValues,
+      fields: {},
+    });
+
+    const parsedDomain = dataForAction.domain
+      ? await ConnectionProvider.getHandler().evalDomain({
+          domain: dataForAction.domain,
+          values: globalValues,
+          context: { ...rootContext, ...parsedContext },
+        })
+      : [];
+
+    const { res_model: model, views, name: title, target } = dataForAction;
+
+    const finalViews = [];
+
+    for (const viewArray of views) {
+      const [id, viewType] = viewArray;
+
+      if (!id) {
+        if (viewType === "dashboard") {
+          finalViews.push([undefined, "dashboard"]);
+        } else {
+          const { view_id } = await ConnectionProvider.getHandler().getView({
+            model,
+            type: viewType,
+            id,
+            context: { ...rootContext, ...parsedContext },
+          });
+          finalViews.push([view_id, viewType]);
+        }
+      } else {
+        finalViews.push(viewArray);
+      }
+    }
+
+    let id, type;
+    if (view_id === undefined || view_id === null) {
+      const view = finalViews.find((view: any[]) => {
+        return view[0] === undefined;
+      });
+      id = undefined;
+      type = view[1];
+    } else {
+      [id, type] = finalViews.find((view: any[]) => {
+        if (view[0] === undefined) {
+          return false;
+        }
+        return view[0] === view_id;
+      });
+    }
+
+    const initialView = { id, type };
+
+    openAction({
+      domain: parsedDomain,
+      context: { ...rootContext, ...parsedContext },
+      model,
+      views: finalViews,
+      title,
+      target,
+      initialView,
+      action_id,
+      action_type,
+      res_id,
+    });
+  }
+
+  async function openDefaultActionForModel({
+    model,
+    values,
+    forced_values,
+    initialViewType,
+    res_id,
+  }: {
+    model: string;
+    values?: any;
+    forced_values?: any;
+    initialViewType?: ViewType;
+    res_id?: number;
+  }) {
+    const actionString = await ConnectionProvider.getHandler().getActionStringForModel(
+      model
+    );
+    await retrieveAndOpenAction({
+      action: actionString,
+      values,
+      forced_values,
+      initialViewType,
+      res_id,
+    });
+  }
+
+  async function openAction({
+    domain,
+    context,
+    model,
+    views,
+    title,
+    target,
+    initialView,
+    action_id,
+    action_type,
+    res_id,
+    values,
+    forced_values,
+  }: {
+    domain: any;
+    context: any;
+    model: string;
+    views: Array<any>;
+    title: string;
+    target: string;
+    initialView: View;
+    action_id: number;
+    action_type: string;
+    res_id?: number | boolean;
+    values?: any;
+    forced_values?: any;
+  }) {
+    const key = uuidv4();
+
+    if (target !== "current") {
+      const formView = (await ConnectionProvider.getHandler().getView({
+        model,
+        type: "form",
+        id: initialView.type === "form" ? initialView.id : undefined,
+        context: { ...rootContext, ...context },
+      })) as FormView;
+
+      (contentRootProvider.current as any).openActionModal({
+        domain,
+        model,
+        formView,
+        context: { ...rootContext, ...context },
+        actionData: {
+          action_id,
+          action_type,
+          res_id,
+          view_id: formView.view_id,
+        },
+      });
+    } else {
+      addNewTab({
+        title,
+        action: {
+          id: action_id,
+          type: action_type,
+        },
+        content: (
+          <ActionView
+            action_id={action_id}
+            action_type={action_type}
+            tabKey={key}
+            title={title}
+            views={views}
+            model={model}
+            context={{ ...rootContext, ...context }}
+            domain={domain}
+            setCanWeClose={registerViewCloseFn}
+            initialView={initialView}
+            res_id={res_id}
+            formDefaultValues={values}
+            formForcedValues={forced_values}
+          />
+        ),
+        key,
+      });
+    }
+  }
+
+  return (
+    <LocaleContextProvider lang={lang}>
+      <TabManagerProvider
+        openShortcut={openShortcut}
+        openAction={openAction}
+        openRelate={openRelate}
+        openDefaultActionForModel={openDefaultActionForModel}
+        tabs={tabs}
+        activeKey={activeKey}
+        onRemoveTab={async (key: string) => {
+          const canWeCloseFn = tabViewsCloseFunctions.current.get(
+            key as string
+          );
+          const canWeClose = await canWeCloseFn?.();
+
+          if (canWeClose || activeKey === "welcome") {
+            remove(key as string);
+          }
+        }}
+        onChangeTab={(key: string) => {
+          setActiveKey(key);
+        }}
+      >
+        <ContentRootProvider
+          ref={contentRootProvider}
+          globalValues={globalValues}
+        >
+          {children}
+        </ContentRootProvider>
+      </TabManagerProvider>
+    </LocaleContextProvider>
+  );
+}
+
+export default forwardRef(RootView);

package/src/views/TabContent.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from "react";
+
+import {
+  TabManagerContext,
+  TabManagerContextType,
+} from "@/context/TabManagerContext";
+
+type Props = {
+  tab: any;
+};
+
+function TabContent(props: Props) {
+  const { tab } = props;
+
+  const tabManagerContext = useContext(
+    TabManagerContext
+  ) as TabManagerContextType;
+  const { activeKey } = tabManagerContext || {};
+
+  const hiddenStyle: any = {
+    display: "none",
+  };
+
+  return (
+    <div style={tab.key !== activeKey ? hiddenStyle : undefined}>
+      {tab.content}
+    </div>
+  );
+}
+
+export default React.memo(TabContent, () => true);

package/src/views/TabSelector.tsx

@@ -0,0 +1,31 @@
+import React, { useContext, useState } from "react";
+
+import {
+  TabManagerContext,
+  TabManagerContextType,
+} from "@/context/TabManagerContext";
+import Tab from "./tabs/Tab";
+
+function TabSelector() {
+  const tabManagerContext = useContext(
+    TabManagerContext
+  ) as TabManagerContextType;
+  const { activeKey, tabs, onRemoveTab, onChangeTab } = tabManagerContext || {};
+
+  return (
+    <>
+      {tabs.map((tab: any) => (
+        <Tab
+          key={tab.key}
+          tabKey={tab.key}
+          label={tab.title}
+          onClose={onRemoveTab}
+          isActive={activeKey === tab.key}
+          onSelected={onChangeTab}
+        />
+      ))}
+    </>
+  );
+}
+
+export default TabSelector;

package/src/views/Welcome.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from "react";
+import { Layout, Typography } from "antd";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+const { Content } = Layout;
+const { Title } = Typography;
+
+function Welcome(): React.ReactElement {
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  return (
+    <Content className="m-5 select-none">
+      <Title level={5}>{t("welcome")}</Title>
+    </Content>
+  );
+}
+
+export default Welcome;

package/src/views/tabs/Tab.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { CloseOutlined } from "@ant-design/icons";
+
+type TabProps = {
+  tabKey: string;
+  label: string;
+  onClose: (key: string) => void;
+  isActive: boolean;
+  onSelected: (key: string) => void;
+};
+
+function Tab(props: TabProps) {
+  const { label, onClose, tabKey, isActive, onSelected } = props;
+
+  const bgColor = isActive ? "#ffffff" : "#F1F5F9";
+
+  return (
+    <div
+      onClick={() => {
+        !isActive && onSelected(tabKey);
+      }}
+      style={{
+        cursor: "pointer",
+        height: 40,
+        paddingTop: 7,
+        paddingBottom: 5,
+        paddingLeft: 10,
+        paddingRight: 10,
+        backgroundColor: bgColor,
+        display: "inline-flex",
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        marginLeft: 2,
+      }}
+    >
+      <div
+        style={{
+          color: isActive ? "#001529" : "#ADB0B3",
+          userSelect: "none",
+          height: 40,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingLeft: 5,
+          paddingRight: 5,
+          marginBottom: 2,
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          paddingLeft: 5,
+          height: 40,
+
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <CloseOutlined
+          style={{ color: isActive ? "#001529" : "#ADB0B3" }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose(tabKey);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Tab;