@gisce/react-ooui 1.0.18 → 1.1.0

package/src/views/ActionView.tsx

@@ -9,15 +9,18 @@ import React, {
 
 import { Spin } from "antd";
 
-import { FormView, TreeView, ViewType } from "@/types/index";
+import {
+  DashboardView,
+  FormView,
+  GraphView,
+  InitialViewData,
+  TreeView,
+  View,
+  ViewType,
+} from "@/types/index";
 import ConnectionProvider from "@/ConnectionProvider";
-import Form from "@/widgets/views/Form";
-import SearchTree from "@/widgets/views/SearchTree";
 
 import ActionViewProvider from "@/context/ActionViewContext";
-import TitleHeader from "@/ui/TitleHeader";
-import FormActionBar from "@/actionbar/FormActionBar";
-import TreeActionBar from "@/actionbar/TreeActionBar";
 import {
   TabManagerContext,
   TabManagerContextType,
@@ -26,20 +29,20 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { GoToResourceModal } from "@/ui/GoToResourceModal";
 import showInfo from "@/ui/InfoDialog";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { Dashboard } from "@/index";
-import { DashboardProps } from "@/widgets/views/Dashboard/Dashboard.types";
-import DashboardActionProvider from "@/context/DashboardActionContext";
-import DashboardActionBar from "@/actionbar/DashboardActionBar";
+import { GraphActionView } from "@/views/actionViews/GraphActionView";
+import { FormActionView } from "./actionViews/FormActionView";
+import { TreeActionView } from "./actionViews/TreeActionView";
+import { DashboardActionView } from "./actionViews/DashboardActionView";
 
 type Props = {
   domain: any;
   context: any;
   model: string;
-  views: Array<any>;
+  views: Array<[number, ViewType]>;
   title: string;
   tabKey: string;
   setCanWeClose: (f: any) => void;
-  initialView: View;
+  initialView: InitialViewData;
   formDefaultValues?: any;
   formForcedValues?: any;
   res_id?: number | boolean;
@@ -48,11 +51,6 @@ type Props = {
   treeExpandable?: boolean;
 };
 
-export type View = {
-  id: number;
-  type: ViewType;
-};
-
 function ActionView(props: Props, ref: any) {
   const {
     domain,
@@ -71,44 +69,36 @@ function ActionView(props: Props, ref: any) {
     treeExpandable = false,
   } = props;
   const [currentView, setCurrentViewInternal] = useState<View>();
+
   const [availableViews, setAvailableViews] = useState<View[]>([]);
 
-  const [treeView, setTreeView] = useState<TreeView>();
-  const [formView, setFormView] = useState<FormView>();
-  const [dashboardData, setDashboardData] = useState<DashboardProps>();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const res_id_parsed: number | undefined = res_id
     ? (res_id as number)
     : undefined;
 
-  const [currentId, setCurrentIdInternal] = useState<number | undefined>(
-    res_id_parsed
-  );
+  const [currentId, setCurrentIdInternal] =
+    useState<number | undefined>(res_id_parsed);
   const [selectedRowItems, setSelectedRowItems] = useState<any[]>([]);
   const [currentItemIndex, setCurrentItemIndex] = useState<number>();
   const [results, setResults] = useState<any>([]);
-  const [toolbar, setToolbar] = useState<any>();
   const [sorter, setSorter] = useState<any>();
   const [totalItems, setTotalItems] = useState<number>(0);
-  const [gtResourceModalVisible, setGtResourceModalVisible] = useState<boolean>(
-    false
-  );
-  const [searchingForResourceId, setSearchingForResourceId] = useState<boolean>(
-    false
-  );
+  const [gtResourceModalVisible, setGtResourceModalVisible] =
+    useState<boolean>(false);
+  const [searchingForResourceId, setSearchingForResourceId] =
+    useState<boolean>(false);
   const [searchTreeNameSearch, setSearchTreeNameSearch] = useState<string>();
 
   const { t } = useContext(LocaleContext) as LocaleContextType;
 
   const formRef = useRef();
   const searchTreeRef = useRef();
-  const dashboardRef = useRef();
 
   const tabManagerContext = useContext(
     TabManagerContext
   ) as TabManagerContextType;
   const {
-    openShortcut,
     setCurrentView: setCurrentViewTabContext,
     setCurrentId: setCurrentIdTabContext,
     tabs,
@@ -142,13 +132,32 @@ function ActionView(props: Props, ref: any) {
   const fetchData = async () => {
     setIsLoading(true);
 
-    const availableViews = [];
+    const viewDataRetrieved: View[] = [];
 
     for (const viewArray of views) {
       const [id, viewType] = viewArray;
 
+      let viewInfo;
+
       try {
-        if (viewType === "dashboard") {
+        if (viewType !== "dashboard") {
+          viewInfo = await ConnectionProvider.getHandler().getView({
+            model,
+            type: viewType,
+            id,
+            context,
+          });
+        }
+      } catch (err) {
+        console.error(
+          `${model} - ${viewType} - ${JSON.stringify(err, null, 2)}`
+        );
+
+        continue;
+      }
+
+      switch (viewType) {
+        case "dashboard": {
           const formView = views.find((view: any[]) => {
             const [, type] = view;
             return type === "form";
@@ -168,56 +177,70 @@ function ActionView(props: Props, ref: any) {
             };
           }
 
-          setDashboardData({
+          viewDataRetrieved.push({
+            type: "dashboard",
             id: context["active_id"],
             model,
             context,
             configAction,
           });
-          availableViews.push({ id, type: viewType });
+          break;
         }
-
-        const viewData = await ConnectionProvider.getHandler().getView({
-          model,
-          type: viewType,
-          id,
-          context,
-        });
-
-        if (viewType === "tree") {
-          setTreeView({ ...viewData, isExpandable: treeExpandable });
-        } else if (viewType === "form") {
-          setFormView(viewData);
-          setToolbar((viewData as any)?.toolbar);
+        case "form": {
+          viewDataRetrieved.push({
+            ...(viewInfo as FormView),
+          });
+          break;
         }
-
-        availableViews.push({ id, type: viewType });
-      } catch (err) {
-        console.error(
-          `${model} - ${viewType} - ${JSON.stringify(err, null, 2)}`
-        );
+        case "tree": {
+          viewDataRetrieved.push({
+            ...(viewInfo as TreeView),
+            isExpandable: treeExpandable,
+          });
+          break;
+        }
+        case "graph": {
+          viewDataRetrieved.push({
+            ...(viewInfo as GraphView),
+          });
+          break;
+        }
+        default:
+          break;
       }
     }
 
-    // TODO: We will have to improve this when more views are supported
-    if (!initialView && availableViews.find((v) => v.type === "tree")) {
-      setCurrentView(availableViews.find((v) => v.type === "tree"));
+    if (!initialView && viewDataRetrieved.find((v) => v.type === "tree")) {
+      const treeView: TreeView = viewDataRetrieved.find(
+        (v) => v.type === "tree"
+      ) as TreeView;
+      setCurrentView(treeView);
     } else if (!initialView) {
-      setCurrentView(availableViews.find((v) => v.type === "form"));
+      const formView: TreeView = viewDataRetrieved.find(
+        (v) => v.type === "form"
+      ) as TreeView;
+
+      setCurrentView(formView);
     } else {
-      setCurrentView(initialView);
+      const view = viewDataRetrieved.find(
+        (v) => v.type === initialView.type && v.view_id === initialView.id
+      );
+      setCurrentView(view);
     }
 
-    setAvailableViews(availableViews);
+    setAvailableViews(viewDataRetrieved);
     setIsLoading(false);
   };
 
   setCanWeClose({ tabKey, canWeClose });
 
   useEffect(() => {
-    setCurrentView(
-      initialView || availableViews.find((v) => v.type === "tree")
-    );
+    const treeView = availableViews.find((v) => v.type === "tree") as TreeView;
+    const initialViewWithData: View = availableViews.find(
+      (v) => v.type === initialView.type && v.view_id === initialView.id
+    ) as View;
+
+    setCurrentView(initialViewWithData || treeView);
     if (!res_id) {
       setCurrentId(undefined);
       setCurrentItemIndex(undefined);
@@ -300,7 +323,7 @@ function ActionView(props: Props, ref: any) {
       views,
       title,
       target: "current",
-      initialView: { id: viewForm[0], type: "form" },
+      initialView: { id: viewForm?.[0]!, type: "form" },
       action_id,
       action_type,
       res_id: id,
@@ -308,56 +331,86 @@ function ActionView(props: Props, ref: any) {
   }
 
   function content() {
-    if (isLoading) {
-      return <Spin />;
-    }
-
-    return (
-      <>
-        <Form
-          rootForm={true}
-          visible={currentView!.type === "form"}
-          ref={formRef}
-          model={model}
-          defaultValues={formDefaultValues}
-          forcedValues={formForcedValues}
-          formView={formView}
-          actionDomain={domain}
-          id={currentId}
-          parentContext={context}
-          onSubmitSucceed={(id, values) => {
-            const itemIndex = results!.findIndex((item: any) => {
-              return item.id === id;
-            });
-            if (itemIndex === -1) {
-              results!.push(values);
-              setResults(results);
-              setCurrentItemIndex(results!.length - 1);
-            }
-          }}
-        />
-        <SearchTree
-          visible={currentView!.type === "tree"}
-          ref={searchTreeRef}
-          rootTree={true}
-          model={model}
-          parentContext={context}
-          nameSearch={searchTreeNameSearch}
-          formView={formView}
-          treeView={treeView}
-          domain={domain}
-          onRowClicked={(event: any) => {
-            const { id } = event;
-            setCurrentId(id);
-            const itemIndex = results.findIndex((item: any) => {
-              return item.id === id;
-            });
-            setCurrentItemIndex(itemIndex);
-            setCurrentView(availableViews.find((v) => v.type === "form"));
-          }}
-        />
-      </>
-    );
+    return availableViews.map((view) => {
+      switch (view.type) {
+        case "form": {
+          return (
+            <FormActionView
+              key={`${view.type}-${view.view_id}`}
+              formRef={formRef}
+              currentId={currentId}
+              visible={
+                currentView!.type === view.type &&
+                currentView!.view_id === view.view_id
+              }
+              formView={view as FormView}
+              model={model}
+              context={context}
+              domain={domain}
+              defaultValues={formDefaultValues}
+              forcedValues={formForcedValues}
+              results={results}
+              setResults={setResults}
+              setCurrentItemIndex={setCurrentItemIndex}
+            />
+          );
+        }
+        case "tree": {
+          return (
+            <TreeActionView
+              key={`${view.type}-${view.view_id}`}
+              visible={
+                currentView!.type === view.type &&
+                currentView!.view_id === view.view_id
+              }
+              model={model}
+              context={context}
+              domain={domain}
+              formView={
+                availableViews.find((v) => v.type === "form") as FormView
+              }
+              treeView={view as TreeView}
+              searchTreeRef={searchTreeRef}
+              searchTreeNameSearch={searchTreeNameSearch}
+              availableViews={availableViews}
+              results={results}
+              setCurrentItemIndex={setCurrentItemIndex}
+              setCurrentId={setCurrentId}
+              setCurrentView={setCurrentView}
+            />
+          );
+        }
+        case "graph": {
+          return (
+            <GraphActionView
+              key={`${view.type}-${view.view_id}`}
+              visible={
+                currentView!.type === view.type &&
+                currentView!.view_id === view.view_id
+              }
+              viewData={view as GraphView}
+              model={model}
+              context={context}
+              domain={domain}
+              treeView={
+                availableViews.find((v) => v.type === "tree") as TreeView
+              }
+              formView={
+                availableViews.find((v) => v.type === "form") as FormView
+              }
+            />
+          );
+        }
+        case "dashboard": {
+          return (
+            <DashboardActionView
+              key={`${view.type}-${view.view_id}`}
+              dashboardData={view as DashboardView}
+            />
+          );
+        }
+      }
+    });
   }
 
   function onNewClicked() {
@@ -365,64 +418,19 @@ function ActionView(props: Props, ref: any) {
       (formRef.current as any).clearAndReload();
     } else {
       setCurrentId(undefined);
-      setCurrentView(availableViews.find((v) => v.type === "form"));
+      const formView: FormView = availableViews.find(
+        (v) => v.type === "form"
+      ) as FormView;
+      setCurrentView(formView);
     }
   }
 
-  if (!currentView) {
-    return null;
+  if (isLoading) {
+    return <Spin />;
   }
 
-  function viewContent() {
-    if (currentView!.type === "dashboard") {
-      if (!dashboardData) {
-        return null;
-      }
-
-      return (
-        <DashboardActionProvider
-          dashboardRef={dashboardRef}
-          openAction={(action) => {
-            openShortcut(action!);
-          }}
-        >
-          <TitleHeader>
-            <DashboardActionBar />
-          </TitleHeader>
-          <Dashboard
-            ref={dashboardRef}
-            model={dashboardData!.model}
-            id={dashboardData!.id}
-            context={dashboardData?.context}
-            configAction={dashboardData?.configAction}
-          />
-        </DashboardActionProvider>
-      );
-    }
-
-    return (
-      <>
-        <TitleHeader>
-          {currentView!.type === "form" ? (
-            <FormActionBar />
-          ) : (
-            <TreeActionBar
-              parentContext={context}
-              treeExpandable={treeView?.isExpandable || false}
-            />
-          )}
-        </TitleHeader>
-        {content()}
-        <GoToResourceModal
-          visible={gtResourceModalVisible}
-          onIdSubmitted={goToResourceId}
-          isSearching={searchingForResourceId}
-          onCancel={() => {
-            setGtResourceModalVisible(false);
-          }}
-        />
-      </>
-    );
+  if (!currentView) {
+    return null;
   }
 
   return (
@@ -441,8 +449,6 @@ function ActionView(props: Props, ref: any) {
       results={results}
       setResults={setResults}
       currentModel={model}
-      toolbar={toolbar}
-      setToolbar={setToolbar}
       sorter={sorter}
       setSorter={setSorter}
       totalItems={totalItems}
@@ -453,7 +459,15 @@ function ActionView(props: Props, ref: any) {
       searchTreeNameSearch={searchTreeNameSearch}
       goToResourceId={goToResourceId}
     >
-      {viewContent()}
+      {content()}
+      <GoToResourceModal
+        visible={gtResourceModalVisible}
+        onIdSubmitted={goToResourceId}
+        isSearching={searchingForResourceId}
+        onCancel={() => {
+          setGtResourceModalVisible(false);
+        }}
+      />
     </ActionViewProvider>
   );
 }

package/src/views/RootView.tsx

@@ -8,13 +8,13 @@ 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 ActionView 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";
+import { InitialViewData, ViewType } from "@/types";
 
 type RootViewProps = {
   children: React.ReactNode;
@@ -361,9 +361,8 @@ function RootView(props: RootViewProps, ref: any) {
     res_id?: number;
     domain?: any;
   }) {
-    const actionString = await ConnectionProvider.getHandler().getActionStringForModel(
-      model
-    );
+    const actionString =
+      await ConnectionProvider.getHandler().getActionStringForModel(model);
     await retrieveAndOpenAction({
       action: actionString,
       values,
@@ -395,7 +394,7 @@ function RootView(props: RootViewProps, ref: any) {
     views: Array<any>;
     title: string;
     target: string;
-    initialView: View;
+    initialView: InitialViewData;
     action_id: number;
     action_type: string;
     res_id?: number | boolean;

package/src/views/actionViews/DashboardActionView.tsx

@@ -0,0 +1,47 @@
+import DashboardActionBar from "@/actionbar/DashboardActionBar";
+import DashboardActionProvider from "@/context/DashboardActionContext";
+import TitleHeader from "@/ui/TitleHeader";
+import Dashboard from "@/widgets/views/Dashboard/Dashboard";
+import React, { useContext, useRef } from "react";
+import {
+  TabManagerContext,
+  TabManagerContextType,
+} from "@/context/TabManagerContext";
+import { DashboardProps } from "@/types";
+
+export type DashboardActionViewProps = {
+  dashboardData: DashboardProps;
+};
+
+export const DashboardActionView = (props: DashboardActionViewProps) => {
+  const { dashboardData } = props;
+  const dashboardRef = useRef();
+  const tabManagerContext = useContext(
+    TabManagerContext
+  ) as TabManagerContextType;
+  const { openShortcut } = tabManagerContext || {};
+
+  if (!dashboardData) {
+    return null;
+  }
+
+  return (
+    <DashboardActionProvider
+      dashboardRef={dashboardRef}
+      openAction={(action) => {
+        openShortcut(action!);
+      }}
+    >
+      <TitleHeader>
+        <DashboardActionBar />
+      </TitleHeader>
+      <Dashboard
+        ref={dashboardRef}
+        model={dashboardData!.model}
+        id={dashboardData!.id}
+        context={dashboardData?.context}
+        configAction={dashboardData?.configAction}
+      />
+    </DashboardActionProvider>
+  );
+};

package/src/views/actionViews/FormActionView.tsx

@@ -0,0 +1,70 @@
+import FormActionBar from "@/actionbar/FormActionBar";
+import { FormView } from "@/types";
+import TitleHeader from "@/ui/TitleHeader";
+import Form from "@/widgets/views/Form";
+import React from "react";
+
+export type FormActionViewProps = {
+  formView?: FormView;
+  visible: boolean;
+  formRef: any;
+  model: string;
+  currentId?: number;
+  domain: any;
+  context: any;
+  defaultValues?: any;
+  forcedValues?: any;
+  results: any[];
+  setResults: (value: any[]) => void;
+  setCurrentItemIndex: (value?: number) => void;
+};
+
+export const FormActionView = (props: FormActionViewProps) => {
+  const {
+    visible,
+    formRef,
+    model,
+    currentId,
+    domain,
+    formView,
+    context,
+    defaultValues,
+    forcedValues,
+    results,
+    setResults,
+    setCurrentItemIndex,
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <>
+      <TitleHeader>
+        <FormActionBar toolbar={formView?.toolbar} />
+      </TitleHeader>
+      <Form
+        rootForm={true}
+        ref={formRef}
+        model={model}
+        defaultValues={defaultValues}
+        forcedValues={forcedValues}
+        formView={formView}
+        actionDomain={domain}
+        id={currentId}
+        parentContext={context}
+        onSubmitSucceed={(id, values) => {
+          const itemIndex = results!.findIndex((item: any) => {
+            return item.id === id;
+          });
+          if (itemIndex === -1) {
+            results!.push(values);
+            setResults(results);
+            setCurrentItemIndex(results!.length - 1);
+          }
+        }}
+      />
+    </>
+  );
+};