@gisce/react-ooui 0.1.0

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

@@ -0,0 +1,371 @@
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  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 { One2manyItem } from "@/index";
+import { readObjectValues } from "@/helpers/one2manyHelper";
+import { LoadingOutlined } from "@ant-design/icons";
+import { Alert } from "antd";
+import {
+  DashboardActionContext,
+  DashboardActionContextType,
+} from "@/context/DashboardActionContext";
+import { ShortcutApi } from "@/ui/FavouriteButton";
+import DashboardTree from "./DashboardTree";
+import { DashboardForm } from "./DashboardForm";
+
+const itemsField = "line_ids";
+
+function Dashboard(props: DashboardProps, ref: any) {
+  const { model, context = {}, id, configAction } = props;
+  const [dashboardItems, setDashboardItems] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const {
+    setIsLoading: setActionBarLoading,
+    openAction,
+    moveItemsEnabled,
+  } = useContext(DashboardActionContext) as DashboardActionContextType;
+
+  const itemsFields = useRef<any>();
+  const boardFields = useRef<any>();
+
+  useEffect(() => {
+    fetchData();
+  }, [model, id, context]);
+
+  useImperativeHandle(ref, () => ({
+    refresh: () => {
+      fetchData();
+    },
+    configDashboard: openConfigDashboard,
+  }));
+
+  async function fetchData() {
+    setIsLoading(true);
+    setActionBarLoading(true);
+    setError(undefined);
+
+    try {
+      const view = await fetchView();
+      const values = await fetchValues(view);
+      const model = view.fields[itemsField].relation;
+      const items: One2manyItem[] = values[itemsField].items;
+      boardFields.current = view.fields;
+
+      const originalItems: One2manyItem[] = await fetchDashboardItems({
+        items,
+        model,
+        context,
+      });
+
+      const itemsWithActions = await getItemsWithActions(originalItems);
+      setDashboardItems(itemsWithActions);
+      setIsLoading(false);
+      setActionBarLoading(false);
+    } catch (err) {
+      setError(JSON.stringify(err));
+    }
+  }
+
+  async function fetchView() {
+    return await ConnectionProvider.getHandler().getView({
+      model,
+      type: "form",
+      context,
+    });
+  }
+
+  async function fetchDashboardItems({
+    items,
+    model,
+    context,
+  }: {
+    items: One2manyItem[];
+    model: string;
+    context: any;
+  }) {
+    itemsFields.current = (
+      await ConnectionProvider.getHandler().getView({
+        model,
+        type: "form",
+        context,
+      })
+    ).fields;
+
+    return await readObjectValues({
+      treeFields: itemsFields.current,
+      formFields: itemsFields.current,
+      model,
+      items,
+      context,
+    });
+  }
+
+  async function fetchValues(view: FormView) {
+    return (
+      await ConnectionProvider.getHandler().readObjects({
+        arch: view.arch,
+        model,
+        ids: [id],
+        fields: view.fields,
+        context,
+      })
+    )[0];
+  }
+
+  async function getItemsWithActions(items: One2manyItem[]) {
+    const itemsWithActions = [];
+
+    for (const dashboardItem of items) {
+      const { values } = dashboardItem;
+      if (values.action_id && values.action_id.length > 0) {
+        const actionId = parseInt(values.action_id[0], 10);
+        const actionData = await fetchAction({
+          actionId,
+          rootContext: context,
+        });
+        itemsWithActions.push({ ...dashboardItem, actionData });
+      }
+    }
+
+    return itemsWithActions;
+  }
+
+  async function onPositionItemsChanged(itemPositions: any[]) {
+    if (!moveItemsEnabled) {
+      return;
+    }
+
+    const differences = itemPositions.filter((itemPosition) => {
+      const dashboardItem = dashboardItems.find(
+        (dashboardItem) => dashboardItem.id === itemPosition.id
+      );
+      if (!dashboardItem) {
+        return false;
+      }
+
+      if (!dashboardItem.position) {
+        return true;
+      }
+
+      const remotePosition = {
+        ...JSON.parse(dashboardItem.position.replace(/'/g, '"')),
+        id: dashboardItem.id,
+      };
+
+      return JSON.stringify(itemPosition) !== JSON.stringify(remotePosition);
+    });
+
+    if (differences.length === 0) {
+      return;
+    }
+
+    const itemsToUpdate = dashboardItems.filter((dashboardItem) => {
+      return differences.map((diff) => diff.id).includes(dashboardItem.id);
+    });
+
+    const itemsToUpdateWithUpdatedPos = itemsToUpdate.map((dashboardItem) => {
+      const diffItem = {
+        ...differences.find((diffItem) => diffItem.id === dashboardItem.id),
+      };
+      delete diffItem.id;
+
+      const item = { ...dashboardItem };
+      delete item.actionData;
+
+      return {
+        ...dashboardItem,
+        operation: "pendingUpdate",
+        values: {
+          ...dashboardItem.values,
+          position: JSON.stringify(diffItem).replace(/"/g, "'"),
+        },
+      };
+    });
+
+    const valueToUpdate = {
+      fields: itemsFields.current,
+      items: itemsToUpdateWithUpdatedPos,
+    };
+
+    await ConnectionProvider.getHandler().update({
+      model,
+      id,
+      values: { [itemsField]: valueToUpdate },
+      fields: boardFields.current,
+      context,
+    });
+  }
+
+  async function openConfigDashboard() {
+    openAction(configAction);
+  }
+
+  if (error) {
+    return (
+      <Alert className="mt-10 mb-20" message={error} type="error" banner />
+    );
+  }
+
+  if (isLoading) {
+    return <LoadingOutlined />;
+  }
+
+  return (
+    <DashboardGrid onPositionItemsChanged={onPositionItemsChanged}>
+      {dashboardItems.map((item, idx) => {
+        const { actionData, values } = item;
+        const { position, id } = values;
+
+        const {
+          actionId,
+          actionType,
+          key,
+          title,
+          views,
+          model,
+          context,
+          domain,
+          initialView,
+          limit,
+        } = actionData as any;
+
+        let parmsParsed = {};
+
+        try {
+          parmsParsed = JSON.parse(position.replace(/'/g, '"'));
+        } catch (err) {
+          // console.error(`Error parsing parms: ${action.position}`);
+          parmsParsed = { x: idx * 2, y: 0, w: 2, h: 3 };
+        }
+
+        let childContent = null;
+
+        if (initialView?.type === "graph") {
+          childContent = (
+            <Graph
+              view_id={
+                views.filter(
+                  (view: [number, string]) => view[1] === "graph"
+                )[0][0]
+              }
+              model={model}
+              context={context}
+              domain={domain}
+              limit={limit}
+            />
+          );
+        } else if (initialView?.type === "form") {
+          childContent = <DashboardForm model={model} actionDomain={domain} />;
+        } else if (initialView?.type === "tree") {
+          childContent = (
+            <DashboardTree
+              model={model}
+              domain={domain}
+              view_id={
+                views.filter(
+                  (view: [number, string]) => view[1] === "tree"
+                )[0][0]
+              }
+              onRowClicked={(record) => {
+                const formView = views.find((view: any[]) => {
+                  const [, type] = view;
+                  return type === "form";
+                });
+                if (formView) {
+                  const [id, type] = formView;
+                  const {
+                    actionId: action_id,
+                    actionType: action_type,
+                    title: name,
+                    model: res_model,
+                  } = actionData;
+
+                  const action: ShortcutApi = {
+                    action_id,
+                    action_type,
+                    name,
+                    res_id: record.id,
+                    res_model,
+                    view_id: id,
+                    view_type: type,
+                  };
+                  openAction(action);
+                }
+              }}
+            />
+          );
+        } else if (initialView !== undefined) {
+          childContent = (
+            <ActionView
+              action_id={actionId}
+              action_type={actionType}
+              tabKey={key}
+              title={title}
+              views={views}
+              model={model}
+              context={context}
+              domain={domain}
+              setCanWeClose={() => {}}
+              initialView={initialView}
+            />
+          );
+        }
+
+        let action: ShortcutApi;
+        const treeView = views.find((view: any[]) => {
+          const [, type] = view;
+          return type === "tree";
+        });
+        if (treeView) {
+          const [id, type] = treeView;
+          const {
+            actionId: action_id,
+            actionType: action_type,
+            title: name,
+            model: res_model,
+          } = actionData;
+
+          action = {
+            action_id,
+            action_type,
+            name,
+            res_id: false,
+            res_model,
+            view_id: id,
+            view_type: type,
+          };
+        }
+
+        return (
+          <DashboardGridItem
+            key={id}
+            id={id}
+            title={title}
+            parms={parmsParsed}
+            action={action!}
+            openAction={openAction}
+          >
+            {childContent}
+          </DashboardGridItem>
+        );
+      })}
+    </DashboardGrid>
+  );
+}
+
+export default forwardRef(Dashboard);

package/src/widgets/views/Dashboard/Dashboard.types.ts

@@ -0,0 +1,8 @@
+import { ShortcutApi } from "@/ui/FavouriteButton";
+
+export type DashboardProps = {
+  model: string;
+  id: number;
+  context?: any;
+  configAction?: ShortcutApi;
+};

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

@@ -0,0 +1,30 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import React, { useEffect, useState } from "react";
+import Form, { FormProps } from "../Form";
+
+export const DashboardForm = (props: FormProps) => {
+  const { model } = props;
+  const [firstId, setFirstId] = useState<number>();
+
+  useEffect(() => {
+    fetchData();
+  }, [model]);
+
+  async function fetchData() {
+    const results: any[] = (await ConnectionProvider.getHandler().search({
+      params: [],
+      model,
+      limit: 1,
+    })) as any;
+
+    if (results.length > 0) {
+      setFirstId(results[0].id);
+    }
+  }
+
+  return (
+    <div style={{ padding: "0.5rem", overflowY: "scroll" }}>
+      <Form {...props} model={model} id={firstId} readOnly />
+    </div>
+  );
+};

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

@@ -0,0 +1,287 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Alert, Spin } from "antd";
+
+import Tree from "@/widgets/views/Tree";
+import { FormView, TreeView } from "@/types/index";
+import ConnectionProvider from "@/ConnectionProvider";
+
+import { getColorMap, getTree } from "@/helpers/treeHelper";
+
+const DEFAULT_SEARCH_LIMIT = 80;
+
+type OnRowClickedData = {
+  id: number;
+  model: string;
+  treeView: TreeView;
+};
+
+type Props = {
+  action?: string;
+  model?: string;
+  view_id?: number;
+  onRowClicked: (data: OnRowClickedData) => void;
+  domain?: any;
+  visible?: boolean;
+  parentContext?: any;
+};
+
+function DashboardTree(props: Props) {
+  const {
+    action,
+    model,
+    view_id,
+    onRowClicked,
+    domain = [],
+    visible = true,
+    parentContext = {},
+  } = props;
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [initialFetchDone, setInitialFetchDone] = useState<boolean>(false);
+
+  const [currentModel, setCurrentModel] = useState<string>();
+  const [treeView, setTreeView] = useState<TreeView>();
+  const [formView, setFormView] = useState<FormView>();
+
+  const [page, setPage] = useState<number>(1);
+  const [offset, setOffset] = useState<number>(0);
+  const limitRef = useRef<number>(DEFAULT_SEARCH_LIMIT);
+
+  const paramsRef = useRef<Array<any>>([]);
+
+  const [totalItems, setTotalItems] = useState<number>(0);
+  const [results, setResults] = useState<any>([]);
+  const [colorsForResults, setColorsForResults] = useState<any>(undefined);
+  const [sorter, setSorter] = useState<any>();
+
+  const [searchError, setSearchError] = useState<string>();
+  const [initialError, setInitialError] = useState<string>();
+
+  const [tableRefreshing, setTableRefreshing] = useState<boolean>(false);
+
+  const actionDomain = useRef<any>([]);
+
+  const onRequestPageChange = (page: number) => {
+    setTableRefreshing(true);
+    setPage(page);
+    setOffset((page - 1) * limitRef.current!);
+  };
+
+  const getUniqueFieldsForParams = (params: any[]) => {
+    const uniqueFields: any = {};
+
+    params.forEach((param) => {
+      if (Array.isArray(param) && param[0]) {
+        uniqueFields[param[0]] = true;
+      }
+    });
+
+    return Object.keys(uniqueFields);
+  };
+
+  const mergeParams = (searchParams: any[], domainParams: any[]) => {
+    const finalParams = searchParams;
+    const uniqueParams = getUniqueFieldsForParams(searchParams);
+
+    domainParams.forEach((element) => {
+      if (Array.isArray(element) && element[0]) {
+        if (!uniqueParams.includes(element[0])) {
+          finalParams.push(element);
+        }
+      }
+    });
+
+    return finalParams;
+  };
+
+  const searchResults = async () => {
+    const domainParams =
+      actionDomain.current.length > 0 ? actionDomain.current : domain;
+
+    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);
+    setColorsForResults(getColorMap(attrsEvaluated));
+
+    const resultsSorted = sortResults(results, sorter);
+    setResults(resultsSorted);
+  };
+
+  const fetchResults = async () => {
+    try {
+      setTableRefreshing(true);
+      await searchResults();
+    } catch (error) {
+      setSearchError(JSON.stringify(error));
+    } finally {
+      setTableRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!initialFetchDone) {
+      return;
+    }
+
+    if (visible) {
+      fetchResults();
+    }
+  }, [page, offset, initialFetchDone, visible]);
+
+  const fetchData = async (type: "action" | "model") => {
+    setInitialFetchDone(false);
+    setIsLoading(true);
+    setInitialError(undefined);
+
+    try {
+      if (type === "action") {
+        await fetchActionData();
+      } else {
+        await fetchModelData();
+      }
+      setInitialFetchDone(true);
+    } catch (error) {
+      setInitialError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchActionData = async () => {
+    const dataForAction = await ConnectionProvider.getHandler().getViewsForAction(
+      {
+        action: action!,
+        context: parentContext,
+      }
+    );
+    actionDomain.current = dataForAction.domain;
+    setFormView(dataForAction.views.get("form"));
+    setTreeView(dataForAction.views.get("tree"));
+    setCurrentModel(dataForAction.model);
+    limitRef.current = dataForAction.limit;
+  };
+
+  const fetchModelData = async () => {
+    setCurrentModel(model);
+
+    const _formView = (await ConnectionProvider.getHandler().getView({
+      model: model!,
+      type: "form",
+      context: parentContext,
+    })) as FormView;
+    setFormView(_formView as FormView);
+
+    const _treeView = (await ConnectionProvider.getHandler().getView({
+      model: model!,
+      type: "tree",
+      id: view_id,
+      context: parentContext,
+    })) as TreeView;
+
+    setTreeView(_treeView as TreeView);
+  };
+
+  useEffect(() => {
+    if (action) {
+      fetchData("action");
+    } else if (model) {
+      fetchData("model");
+    }
+  }, [action, model]);
+
+  const onRowClickedHandler = (id: number) => {
+    onRowClicked({
+      id,
+      model: currentModel!,
+      treeView: treeView!,
+    });
+  };
+
+  function sortResults(resultsToSort: any[], sorter: any) {
+    if (!sorter) {
+      return resultsToSort;
+    }
+
+    const { field, order } = sorter;
+    const fields = { ...treeView!.fields, ...formView!.fields };
+    const type = fields[field].type;
+
+    const sortFn = (a: any, b: any) => {
+      let aItem = a[field] || "",
+        bItem = b[field] || "";
+
+      if (type === "many2one") {
+        aItem = a[field]?.value || "";
+        bItem = b[field]?.value || "";
+      }
+
+      if (aItem === bItem) {
+        return 0;
+      }
+
+      if (order === "ascend") {
+        return aItem > bItem ? 1 : -1;
+      }
+
+      return aItem < bItem ? 1 : -1;
+    };
+
+    return resultsToSort.sort(sortFn);
+  }
+
+  const content = () => {
+    if (!treeView || !formView) {
+      return null;
+    }
+
+    return (
+      <div style={{ overflowY: "scroll" }}>
+        {searchError && (
+          <Alert className="mt-10" message={searchError} type="error" banner />
+        )}
+        <Tree
+          showPagination={false}
+          total={totalItems}
+          limit={limitRef.current}
+          disableScroll
+          page={page}
+          treeView={treeView}
+          results={results}
+          onRequestPageChange={onRequestPageChange}
+          loading={tableRefreshing}
+          onRowClicked={onRowClickedHandler}
+          colorsForResults={colorsForResults}
+          onChangeSort={(newSorter) => {
+            setSorter?.(newSorter);
+            const sortedResults = sortResults(results, newSorter);
+            setResults(sortedResults);
+          }}
+        />
+      </div>
+    );
+  };
+
+  if (initialError) {
+    return (
+      <Alert className="mt-10" message={initialError} type="error" banner />
+    );
+  }
+
+  return isLoading ? <Spin style={{ padding: "2rem" }} /> : content();
+}
+
+export default DashboardTree;