@gisce/react-ooui 0.7.0 → 0.8.0

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

@@ -5,7 +5,7 @@ import Tree from "@/widgets/views/Tree";
 import { FormView, TreeView } from "@/types/index";
 import ConnectionProvider from "@/ConnectionProvider";
 
-import { getColorMap, getTree } from "@/helpers/treeHelper";
+import { getColorMap, getTree, sortResults } from "@/helpers/treeHelper";
 
 const DEFAULT_SEARCH_LIMIT = 80;
 
@@ -117,7 +117,12 @@ function DashboardTree(props: Props) {
     setTotalItems(totalItems);
     setColorsForResults(getColorMap(attrsEvaluated));
 
-    const resultsSorted = sortResults(results, sorter);
+    const resultsSorted = sortResults({
+      resultsToSort: results,
+      sorter: sorter,
+      fields: { ...treeView!.fields, ...formView!.fields },
+    });
+
     setResults(resultsSorted);
   };
 
@@ -211,38 +216,6 @@ function DashboardTree(props: Props) {
     });
   };
 
-  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;
@@ -257,7 +230,6 @@ function DashboardTree(props: Props) {
           showPagination={false}
           total={totalItems}
           limit={limitRef.current}
-          disableScroll
           page={page}
           treeView={treeView}
           results={results}
@@ -265,9 +237,14 @@ function DashboardTree(props: Props) {
           loading={tableRefreshing}
           onRowClicked={onRowClickedHandler}
           colorsForResults={colorsForResults}
+          sorter={sorter}
           onChangeSort={(newSorter) => {
             setSorter?.(newSorter);
-            const sortedResults = sortResults(results, newSorter);
+            const sortedResults = sortResults({
+              resultsToSort: results,
+              sorter: newSorter,
+              fields: { ...treeView.fields, ...formView.fields },
+            });
             setResults(sortedResults);
           }}
         />

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

@@ -94,6 +94,7 @@ function getGraphProps(props: GetGraphPropsType) {
     graphProps.isGroup = isGroup;
 
     if (isStack) {
+      graphProps.isStack = true;
       graphProps.groupField = "stacked";
     }
   }

package/src/widgets/views/SearchTree.tsx

@@ -5,6 +5,7 @@ import React, {
   useContext,
   forwardRef,
   useImperativeHandle,
+  useCallback,
 } from "react";
 import { Alert, Spin } from "antd";
 
@@ -17,7 +18,7 @@ import {
   ActionViewContext,
   ActionViewContextType,
 } from "@/context/ActionViewContext";
-import { getColorMap, getTree } from "@/helpers/treeHelper";
+import { getColorMap, getTree, sortResults } from "@/helpers/treeHelper";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import Measure from "react-measure";
 import { mergeSearchFields } from "@/helpers/formHelper";
@@ -94,6 +95,8 @@ function SearchTree(props: Props, ref: any) {
   const actionDomain = useRef<any>([]);
   const [searchFilterHeight, setSearchFilterHeight] = useState<number>(200);
 
+  const originalResults = useRef<any[]>([]);
+
   const { height } = useWindowDimensions();
 
   const actionViewContext = useContext(
@@ -114,7 +117,6 @@ function SearchTree(props: Props, ref: any) {
     setTotalItems: setActionViewTotalItems = undefined,
     setSearchTreeNameSearch = undefined,
     setTreeIsLoading = undefined,
-    treeIsLoading = false,
   } = (rootTree ? actionViewContext : {}) || {};
 
   useImperativeHandle(ref, () => ({
@@ -131,16 +133,16 @@ function SearchTree(props: Props, ref: any) {
   };
 
   function setResults(results: any) {
-    setResultsActionView?.(results);
-    setResultsInternal(results);
+    setResultsActionView?.([...results]);
+    setResultsInternal([...results]);
   }
 
-  function getResults() {
+  const getResults = useCallback(() => {
     if (!resultsActionView) {
       return resultsInternal;
     }
     return resultsActionView;
-  }
+  }, [resultsActionView, resultsInternal]);
 
   const searchByNameSearch = async () => {
     const searchResults = await ConnectionProvider.getHandler().nameSearch({
@@ -175,12 +177,21 @@ function SearchTree(props: Props, ref: any) {
       );
       const resultsData = resultsWithData[0];
 
+      originalResults.current = [...resultsData];
+
       setColorsForResults(getColorMap(resultsWithData[1]));
-      setResults(resultsData);
 
       const newResultIds = resultsData.map((item: any) => item.id);
 
-      const resultsSorted = sortResults(resultsData, sorter);
+      const resultsSorted =
+        sorter !== undefined
+          ? sortResults({
+              resultsToSort: resultsData,
+              sorter,
+              fields: { ...treeView!.fields, ...formView!.fields },
+            })
+          : [...originalResults.current];
+
       setResults(resultsSorted);
 
       if (newResultIds.length > 0) {
@@ -251,7 +262,17 @@ function SearchTree(props: Props, ref: any) {
     setActionViewTotalItems?.(totalItems);
     setColorsForResults(getColorMap(attrsEvaluated));
 
-    const resultsSorted = sortResults(results, sorter);
+    originalResults.current = [...results];
+
+    const resultsSorted =
+      sorter !== undefined
+        ? sortResults({
+            resultsToSort: results,
+            sorter: sorter,
+            fields: { ...treeView!.fields, ...formView!.fields },
+          })
+        : [...originalResults.current];
+
     setResults(resultsSorted);
 
     if (resultsActionView && resultsSorted.length > 0) {
@@ -418,49 +439,14 @@ function SearchTree(props: Props, ref: any) {
     });
   };
 
-  function changeSelectedRowKeys(selectedRowKeys: number[]) {
-    const items = getResults().filter((result: any) => {
-      return selectedRowKeys.includes(result.id);
-    });
-
-    setSelectedRowItems?.(items);
+  function changeSelectedRowKeys(selectedRowItems: any[]) {
+    setSelectedRowItems?.(selectedRowItems);
+    const selectedRowKeys = selectedRowItems.map((entry: any) => entry.id);
     onChangeSelectedRowKeys?.(selectedRowKeys);
   }
 
   function calculateTableHeight() {
-    return height - (searchFilterHeight + 255);
-  }
-
-  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);
+    return height - (searchFilterHeight + 210);
   }
 
   const content = () => {
@@ -520,9 +506,17 @@ function SearchTree(props: Props, ref: any) {
             selectedRowKeys: selectedRowItems?.map((item) => item.id),
             onChange: changeSelectedRowKeys,
           }}
+          sorter={sorter}
           onChangeSort={(newSorter) => {
             setSorter?.(newSorter);
-            const sortedResults = sortResults(getResults(), newSorter);
+            const sortedResults =
+              newSorter !== undefined
+                ? sortResults({
+                    resultsToSort: getResults(),
+                    sorter: newSorter,
+                    fields: { ...treeView.fields, ...formView.fields },
+                  })
+                : [...originalResults.current];
             setResults(sortedResults);
           }}
         />

package/src/widgets/views/Tree.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Table, Pagination, Checkbox, Space, Row, Col, Spin } from "antd";
+import { Pagination, Checkbox, Space, Row, Col, Spin } from "antd";
 import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
 
@@ -9,17 +9,8 @@ import { Many2oneSuffix } from "../base/many2one/Many2oneSuffix";
 import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
 import { parseFloatToString } from "@/helpers/timeHelper";
 import { ProgressBarInput } from "../base/ProgressBar";
-import styled from "styled-components";
-
-interface TableProps {
-  minHeight: number;
-}
-
-const StyledTable = styled(Table)`
-  .ant-table-body {
-    min-height: ${(props: TableProps) => props.minHeight}px;
-  }
-`;
+import { Table as GisceTable } from "@gisce/react-formiga-table";
+import useDeepCompareEffect from "use-deep-compare-effect";
 
 type Props = {
   total: number;
@@ -35,11 +26,21 @@ type Props = {
   scrollY?: number;
   colorsForResults?: { [key: number]: string };
   onChangeSort?: (results: any) => void;
-  disableScroll?: boolean;
+  sorter?: any;
 };
 
 const booleanComponentFn = (value: boolean): React.ReactElement => {
-  return <Checkbox defaultChecked={value} disabled />;
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignContent: "center",
+      }}
+    >
+      <Checkbox defaultChecked={value} disabled />
+    </div>
+  );
 };
 
 const many2OneComponentFn = (m2oField: any): React.ReactElement => {
@@ -70,6 +71,10 @@ const floatTimeComponent = (value: number): React.ReactElement => {
   return <>{parseFloatToString(value)}</>;
 };
 
+const numberComponent = (value: number): React.ReactElement => {
+  return <div style={{ textAlign: "right" }}>{value}</div>;
+};
+
 const imageComponent = (value: string): React.ReactElement => {
   return (
     <img
@@ -94,7 +99,7 @@ function Tree(props: Props): React.ReactElement {
     scrollY,
     colorsForResults = {},
     onChangeSort,
-    disableScroll = false,
+    sorter,
   } = props;
 
   const [items, setItems] = useState<Array<any>>([]);
@@ -118,7 +123,10 @@ function Tree(props: Props): React.ReactElement {
       progressbar: progressBarComponentFn,
       float_time: floatTimeComponent,
       image: imageComponent,
+      integer: numberComponent,
+      float: numberComponent,
     });
+
     setColumns(columns);
   }, [treeView]);
 
@@ -220,32 +228,12 @@ function Tree(props: Props): React.ReactElement {
   ) : (
     <div>
       {pagination()}
-      {/* {results.map((result) => {
-        return (
-          <div key={result.id}>
-            <br />
-            <span>{result.name}</span>
-          </div>
-        );
-      })} */}
-      <StyledTable
-        minHeight={adjustedHeight!}
+      <GisceTable
+        height={adjustedHeight!}
         columns={dataTable.columns}
-        scroll={
-          disableScroll
-            ? undefined
-            : { x: dataTable.tableWidth, y: adjustedHeight }
-        }
-        size="small"
         dataSource={items}
-        pagination={false}
         loading={loading}
-        rowClassName={(record: any) => {
-          return `cursor-pointer select-none record-row-${record.id}`;
-        }}
-        rowKey={(item: any) => {
-          return item.id;
-        }}
+        loadingComponent={<Spin />}
         onRow={(record: any) => {
           let style = undefined;
 
@@ -260,14 +248,9 @@ function Tree(props: Props): React.ReactElement {
             },
           };
         }}
-        rowSelection={rowSelection}
-        onChange={(pagination, filters, sorter, extraInfo) => {
-          if (!(sorter as any).order) {
-            onChangeSort?.(undefined);
-          } else {
-            onChangeSort?.(sorter);
-          }
-        }}
+        onRowSelectionChange={rowSelection?.onChange}
+        onChangeSort={onChangeSort}
+        sorter={sorter}
       />
       {getSums()}
     </div>