@gisce/react-ooui 1.0.19 → 1.1.0

package/src/views/actionViews/GraphActionView.tsx

@@ -0,0 +1,136 @@
+import GraphActionBar from "@/actionbar/GraphActionBar";
+import TitleHeader from "@/ui/TitleHeader";
+import { Graph } from "@/widgets/views/Graph/Graph";
+import React, { useContext, useRef } from "react";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import { FormView, TreeView } from "@/types";
+import { mergeSearchFields } from "@/helpers/formHelper";
+import { useSearch } from "@/hooks/useSearch";
+import SearchFilter from "@/widgets/views/searchFilter/SearchFilter";
+import { Spin } from "antd";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+export type GraphActionViewProps = {
+  viewData: any;
+  visible: boolean;
+  model: string;
+  context: any;
+  domain: any;
+  formView: FormView;
+  treeView: TreeView;
+};
+
+export const GraphActionView = (props: GraphActionViewProps) => {
+  const { viewData, visible, model, context, domain, formView, treeView } =
+    props;
+  const graphRef = useRef();
+
+  const actionViewContext = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+  const {
+    setResults: setResultsActionView = undefined,
+    setCurrentItemIndex = undefined,
+    currentId = undefined,
+    results: resultsActionView = undefined,
+    setSelectedRowItems = undefined,
+    setSearchParams = undefined,
+    searchVisible = true,
+    setSearchVisible = undefined,
+    sorter = undefined,
+    setSorter = undefined,
+    setTotalItems: setActionViewTotalItems = undefined,
+    setSearchTreeNameSearch = undefined,
+    setTreeIsLoading = undefined,
+    results = undefined,
+  } = actionViewContext || {};
+
+  const { searchParams, searchValues, setSearchValues } = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  const {
+    submit,
+    clear,
+    searchFilterLoading,
+    searchError,
+    offset,
+    limit,
+    tableRefreshing,
+  } = useSearch({
+    model,
+    setSearchTreeNameSearch,
+    setSelectedRowItems,
+    searchParams,
+    setSearchValues,
+    setSearchParams,
+    setSearchVisible,
+    setTreeIsLoading,
+    context,
+    formView: formView!,
+    treeView: treeView!,
+    sorter,
+    setSorter,
+    setCurrentItemIndex,
+    setResultsActionView,
+    resultsActionView,
+    domain,
+    currentId,
+    setActionViewTotalItems,
+  });
+
+  if (!visible) {
+    return null;
+  }
+
+  if (!viewData) {
+    return null;
+  }
+
+  return (
+    <>
+      <TitleHeader title={viewData.name}>
+        <GraphActionBar
+          refreshGraph={() => {
+            (graphRef.current as any).refresh();
+          }}
+        />
+      </TitleHeader>
+      <SearchFilter
+        fields={{ ...treeView.fields, ...formView.fields }}
+        searchFields={mergeSearchFields([
+          formView.search_fields,
+          treeView.search_fields,
+        ])}
+        limit={limit!}
+        onClear={clear}
+        offset={offset}
+        isSearching={searchFilterLoading}
+        onSubmit={submit}
+        searchError={searchError}
+        searchVisible={searchVisible}
+        searchValues={searchValues}
+      />
+      {tableRefreshing ? (
+        <Spin />
+      ) : (
+        <>
+          <p style={{ textAlign: "right" }}>
+            {`${t("totalRegisters")} ${results?.length}`}
+          </p>
+          <Graph
+            ref={graphRef}
+            view_id={viewData.view_id}
+            model={model}
+            context={context}
+            domain={searchParams || domain}
+          />
+        </>
+      )}
+    </>
+  );
+};

package/src/views/actionViews/TreeActionView.tsx

@@ -0,0 +1,77 @@
+import TreeActionBar from "@/actionbar/TreeActionBar";
+import { FormView, TreeView, View } from "@/types";
+import TitleHeader from "@/ui/TitleHeader";
+import SearchTree from "@/widgets/views/SearchTree";
+import React from "react";
+
+export type TreeActionViewProps = {
+  formView?: FormView;
+  treeView?: TreeView;
+  visible: boolean;
+  searchTreeRef: any;
+  model: string;
+  domain: any;
+  context: any;
+  results: any[];
+  setCurrentItemIndex: (value?: number) => void;
+  setCurrentId: (id?: number) => void;
+  setCurrentView: (view: View) => void;
+  availableViews: View[];
+  searchTreeNameSearch?: string;
+};
+
+export const TreeActionView = (props: TreeActionViewProps) => {
+  const {
+    visible,
+    searchTreeRef,
+    model,
+    context,
+    formView,
+    treeView,
+    domain,
+    setCurrentItemIndex,
+    results,
+    setCurrentId,
+    setCurrentView,
+    availableViews,
+    searchTreeNameSearch,
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <>
+      <TitleHeader>
+        <TreeActionBar
+          toolbar={formView?.toolbar}
+          parentContext={context}
+          treeExpandable={treeView?.isExpandable || false}
+        />
+      </TitleHeader>
+      <SearchTree
+        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);
+          const formView = availableViews.find(
+            (v) => v.type === "form"
+          ) as FormView;
+          setCurrentView(formView);
+        }}
+      />
+    </>
+  );
+};

package/src/widgets/base/Button.tsx

@@ -53,7 +53,7 @@ export const Button = (props: Props) => {
   function getButtonIcon() {
     if (isRunning) return <LoadingOutlined />;
     if (icon) {
-      const Icon: React.ElementType = iconMapper(icon);
+      const Icon: React.ElementType = iconMapper(icon) as any;
       return Icon && <Icon />;
     }
     return undefined;

package/src/widgets/base/Image.tsx

@@ -21,7 +21,7 @@ export const Image = (props: Props) => {
   const { ooui } = props;
   const { required, id } = ooui;
 
-  const Icon: React.ElementType = iconMapper(id);
+  const Icon: React.ElementType = iconMapper(id) as any;
 
   if (Icon) {
     return <Icon />;

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

@@ -58,7 +58,7 @@ export const Many2oneSuffix = (props: Props) => {
         model,
         type: "form",
         context,
-      });
+      }) as FormView;
       setFormView(formView);
       const { fields, arch } = formView;
 

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

@@ -2,7 +2,7 @@ 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 { Views, ViewType } from "@/types";
 import ConnectionProvider from "@/ConnectionProvider";
 import One2manyProvider from "@/context/One2manyContext";
 import { One2manyInput } from "@/widgets/base/one2many/One2manyInput";
@@ -13,13 +13,11 @@ 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;
+  let initialView: ViewType;
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string>();
   const [views, setViews] = useState<Views>(new Map<string, any>());
@@ -30,7 +28,7 @@ export const One2many = (props: Props) => {
     fetchData();
   }, [ooui]);
 
-  const getViewData = async (type: ViewModes) => {
+  const getViewData = async (type: ViewType) => {
     if (oouiViews && oouiViews[type]) {
       return oouiViews[type];
     }
@@ -47,7 +45,7 @@ export const One2many = (props: Props) => {
 
     try {
       if (mode && mode.length > 0) {
-        for (const m of mode as ViewModes[]) {
+        for (const m of mode as ViewType[]) {
           const v = await getViewData(m);
           views.set(m, v)
         }
@@ -67,7 +65,7 @@ export const One2many = (props: Props) => {
   };
 
   if (mode && mode.length > 0) {
-    initialView = mode[0] as ViewModes;
+    initialView = mode[0] as ViewType;
   } else {
     initialView = "tree";
   }

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

@@ -10,7 +10,7 @@ import {
   parseGraph,
   transformDomainForChildWidget,
 } from "@gisce/ooui";
-import { Views } from "@/types";
+import { Views, ViewType } from "@/types";
 import ConnectionProvider from "@/ConnectionProvider";
 import { FormModal } from "@/widgets/modals/FormModal";
 import showUnsavedChangesDialog from "@/ui/UnsavedChangesDialog";
@@ -25,7 +25,6 @@ import { One2manyTopBar } from "@/widgets/base/one2many/One2manyTopBar";
 import { readObjectValues, getNextPendingId } from "@/helpers/one2manyHelper";
 import { SearchModal } from "@/widgets/modals/SearchModal";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { ViewModes } from "@/widgets/base/one2many/One2many";
 import { sortResults, sortResultsWithOrder } from "@/helpers/treeHelper";
 
 type One2manyValue = {
@@ -90,9 +89,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const [showSearchModal, setShowSearchModal] = useState<boolean>(false);
   const [modalItem, setModalItem] = useState<One2manyItem>();
   const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]);
-  const [continuousEntryMode, setContinuousEntryMode] = useState<boolean>(
-    false
-  );
+  const [continuousEntryMode, setContinuousEntryMode] =
+    useState<boolean>(false);
   const transformedDomain = useRef<any[]>([]);
   const [sorter, setSorter] = useState<any>();
   const originalSortItemIds = useRef<number[]>();
@@ -185,7 +183,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
     const keys = Array.from(views.keys());
     const nextView = keys[
       (keys.indexOf(currentView) + 1) % keys.length
-    ] as ViewModes;
+    ] as ViewType;
     if (currentView === "form") {
       showFormChangesDialogIfNeeded(() => {
         setCurrentView(nextView);
@@ -486,7 +484,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
 
   // TODO: improve this. Do we really have to parse the entire object just to get the title?
   function getTitle() {
-    const ViewType: any = ViewObjects[currentView];
+    const ViewType: any = (ViewObjects as any)[currentView];
     if (currentView === "graph") {
       const parsedGraph = parseGraph(views.get("graph").arch);
       return parsedGraph.string!;

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

@@ -1,6 +1,5 @@
 import React from "react";
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
-import { ViewModes } from "@/widgets/base/one2many/One2many";
 
 import {
   FileAddOutlined,
@@ -11,10 +10,11 @@ import {
   SearchOutlined,
   ApiOutlined,
 } from "@ant-design/icons";
+import { ViewType } from "@/types";
 
 type One2manyTopBarProps = {
   title: string;
-  mode: ViewModes;
+  mode: ViewType;
   isMany2Many: boolean;
   readOnly: boolean;
   formHasChanges: boolean;
@@ -56,8 +56,8 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
 
   function title() {
     return (
-      <div className="h-8 flex flex-grow bg-gray-700 text-gray-200">
-        <div className="h-full flex flex-col justify-center items-center">
+      <div className="flex flex-grow h-8 text-gray-200 bg-gray-700">
+        <div className="flex flex-col items-center justify-center h-full">
           <span className="pl-2 font-bold">{titleString}</span>
         </div>
       </div>
@@ -115,7 +115,7 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
   return (
     <div className="flex mb-2">
       {title()}
-      <div className="h-8 flex-none pl-2">
+      <div className="flex-none h-8 pl-2">
         {mode !== "graph" && showCreateButton && (
           <ButtonWithTooltip
             tooltip={"Create new item"}

package/src/widgets/containers/Notebook.tsx

@@ -17,7 +17,7 @@ function Notebook(props: Props): React.ReactElement {
 
   function getPageIcon(icon: string) {
     if (icon) {
-      const Icon: React.ElementType = iconMapper(icon);
+      const Icon: React.ElementType = iconMapper(icon) as any;
       return Icon && <Icon />;
     }
     return undefined;

package/src/widgets/custom/ButtonGroup.tsx

@@ -1,8 +1,12 @@
 import React, { useContext, useState } from "react";
 import Field from "@/common/Field";
-import { DownOutlined } from '@ant-design/icons';
+import { DownOutlined } from "@ant-design/icons";
 import { Dropdown, Menu } from "antd";
-import { ButtonGroup as ButtonGroupOoui, Button as ButtonOoui, Field as FieldOoui } from "@gisce/ooui";
+import {
+  ButtonGroup as ButtonGroupOoui,
+  Button as ButtonOoui,
+  Field as FieldOoui,
+} from "@gisce/ooui";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import { FormContext, FormContextType } from "@/context/FormContext";
 import { LoadingOutlined } from "@ant-design/icons";
@@ -41,7 +45,7 @@ export const ButtonGroup = (props: ButtonGroupProps) => {
   function getButtonIcon() {
     if (isRunning) return <LoadingOutlined />;
     if (icon) {
-      const Icon: React.ElementType = iconMapper(icon);
+      const Icon: React.ElementType = iconMapper(icon) as any;
       return Icon && <Icon />;
     }
     return undefined;
@@ -71,21 +75,22 @@ export const ButtonGroup = (props: ButtonGroupProps) => {
   }
 
   return (
-    <Field ooui={new FieldOoui({...{ooui}})}>
+    <Field ooui={new FieldOoui({ ...{ ooui } })}>
       <Dropdown.Button
         disabled={!activated || readOnly}
         onClick={onClick}
-        icon={<DownOutlined/>}
+        icon={<DownOutlined />}
         type={primary ? "primary" : undefined}
         //danger={danger ? true : undefined} This works but typescript
         // doesn't accept
         overlay={<Items ooui={secondaryButtons} />}
       >
-      {getButtonIcon()}{caption}
+        {getButtonIcon()}
+        {caption}
       </Dropdown.Button>
     </Field>
-  )
-}
+  );
+};
 
 const Items = (props: ItemsProps) => {
   const { ooui } = props;
@@ -130,7 +135,7 @@ const Items = (props: ItemsProps) => {
     function getButtonIcon() {
       if (isRunning) return <LoadingOutlined />;
       if (icon) {
-        const Icon: React.ElementType = iconMapper(icon);
+        const Icon: React.ElementType = iconMapper(icon) as any;
         return Icon && <Icon />;
       }
       return undefined;
@@ -147,9 +152,5 @@ const Items = (props: ItemsProps) => {
       </Menu.Item>
     );
   });
-  return (
-    <Menu>
-      {items}
-    </Menu>
-  )
+  return <Menu>{items}</Menu>;
 };

package/src/widgets/custom/Indicator.tsx

@@ -34,12 +34,12 @@ const IndicatorInput = (props: IndicatorInputProps) => {
       <span>{ooui.label} </span>
       {ooui.tooltip &&
         <Tooltip title={ooui.tooltip}>
-          <QuestionCircleOutlined className="text-xs text-blue-400 pr-1"/>
+          <QuestionCircleOutlined className="pr-1 text-xs text-blue-400"/>
         </Tooltip>
       }
     </>
   );
-  const Icon: React.ElementType = iconMapper(ooui.icon);
+  const Icon: React.ElementType = iconMapper(ooui.icon) as any;
   let formattedValue = value;
   if (ooui.selectionValues.size) {
     formattedValue = ooui.selectionValues.get(value);

package/src/widgets/views/Dashboard/Dashboard.tsx

@@ -7,14 +7,13 @@ import React, {
   useState,
 } from "react";
 import ActionView from "@/views/ActionView";
-import { DashboardProps } from "./Dashboard.types";
 import { fetchAction } from "./dashboardHelper";
 import "react-resizable/css/styles.css";
 import "react-grid-layout/css/styles.css";
 import { Graph } from "../Graph/Graph";
 import { DashboardGrid, DashboardGridItem } from "../DashboardGrid";
 import ConnectionProvider from "@/ConnectionProvider";
-import { FormView } from "@/types";
+import { DashboardProps, FormView } from "@/types";
 import { One2manyItem } from "@/index";
 import { readObjectValues } from "@/helpers/one2manyHelper";
 import { LoadingOutlined } from "@ant-design/icons";
@@ -60,7 +59,7 @@ function Dashboard(props: DashboardProps, ref: any) {
     setError(undefined);
 
     try {
-      const view = await fetchView();
+      const view: FormView = (await fetchView()) as FormView;
       const values = await fetchValues(view);
       const model = view.fields[itemsField].relation;
       const items: One2manyItem[] = values[itemsField].items;
@@ -99,11 +98,11 @@ function Dashboard(props: DashboardProps, ref: any) {
     context: any;
   }) {
     itemsFields.current = (
-      await ConnectionProvider.getHandler().getView({
+      (await ConnectionProvider.getHandler().getView({
         model,
         type: "form",
         context,
-      })
+      })) as FormView
     ).fields;
 
     return await readObjectValues({

package/src/widgets/views/Dashboard/DashboardTree.tsx

@@ -101,20 +101,18 @@ function DashboardTree(props: Props) {
     const searchParams = mergeParams(paramsRef.current, domainParams);
     const { colors } = getTree(treeView!);
 
-    const {
-      totalItems,
-      results,
-      attrsEvaluated,
-    } = await ConnectionProvider.getHandler().searchForTree({
-      params: searchParams,
-      limit: limitRef.current,
-      offset,
-      model: currentModel!,
-      fields: treeView!.fields,
-      context: parentContext,
-      attrs: colors && { colors },
-    });
-    setTotalItems(totalItems);
+    const { totalItems, results, attrsEvaluated } =
+      await ConnectionProvider.getHandler().searchForTree({
+        params: searchParams,
+        limit: limitRef.current,
+        offset,
+        model: currentModel!,
+        fields: treeView!.fields,
+        context: parentContext,
+        attrs: colors && { colors },
+      });
+    const totalItemsResult = await totalItems;
+    setTotalItems(totalItemsResult);
     setColorsForResults(getColorMap(attrsEvaluated));
 
     const resultsSorted = sortResults({
@@ -167,12 +165,11 @@ function DashboardTree(props: Props) {
   };
 
   const fetchActionData = async () => {
-    const dataForAction = await ConnectionProvider.getHandler().getViewsForAction(
-      {
+    const dataForAction =
+      await ConnectionProvider.getHandler().getViewsForAction({
         action: action!,
         context: parentContext,
-      }
-    );
+      });
     actionDomain.current = dataForAction.domain;
     setFormView(dataForAction.views.get("form"));
     setTreeView(dataForAction.views.get("tree"));

package/src/widgets/views/Graph/Graph.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import {
   Graph as GraphOoui,
   parseGraph,
@@ -9,20 +15,35 @@ import { LoadingOutlined } from "@ant-design/icons";
 import ConnectionProvider from "@/ConnectionProvider";
 import { GraphIndicator } from "./GraphIndicator";
 import { GraphChart } from "./GraphChart";
+import { GraphView } from "@/types";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
 
 export type GraphProps = {
   view_id: number;
   model: string;
   domain: any;
   context: any;
-  limit: number;
+  limit?: number;
 };
 
-export const Graph = (props: GraphProps) => {
+const GraphComp = (props: GraphProps, ref: any) => {
   const { view_id, model, context, domain, limit } = props;
   const [loading, setLoading] = useState(false);
   const [graphOoui, setGraphOoui] = useState<GraphOoui>();
   const [graphXml, setGraphXml] = useState<string>();
+  const actionViewContext = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+  const { setGraphIsLoading = undefined } = actionViewContext || {};
+
+  useImperativeHandle(ref, () => ({
+    refresh: () => {
+      fetchData();
+    },
+  }));
 
   useEffect(() => {
     fetchData();
@@ -30,14 +51,15 @@ export const Graph = (props: GraphProps) => {
 
   async function fetchData() {
     setLoading(true);
+    setGraphIsLoading?.(true);
 
     try {
-      const viewData = await ConnectionProvider.getHandler().getView({
+      const viewData = (await ConnectionProvider.getHandler().getView({
         model,
         id: view_id,
         type: "graph",
         context,
-      });
+      })) as GraphView;
 
       setGraphXml(viewData.arch);
       const graph = parseGraph(viewData.arch);
@@ -48,11 +70,21 @@ export const Graph = (props: GraphProps) => {
     }
 
     setLoading(false);
+    setGraphIsLoading?.(false);
   }
 
   if (loading) {
     return (
-      <div style={{ padding: "1rem" }}>
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          height: "20%",
+          justifyContent: "center",
+          alignContent: "center",
+          padding: "1rem",
+        }}
+      >
         <LoadingOutlined style={{ height: "12px" }} />
       </div>
     );
@@ -106,3 +138,5 @@ export const Graph = (props: GraphProps) => {
     }
   }
 };
+
+export const Graph = forwardRef(GraphComp);

package/src/widgets/views/Graph/GraphChart.tsx

@@ -16,7 +16,7 @@ export type GraphChartProps = {
   domain: any;
   context: any;
   xml: string;
-  limit: number;
+  limit?: number;
 };
 
 export const GraphChart = (props: GraphChartProps) => {