@gisce/react-ooui 0.6.0 → 0.7.2

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/Form.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useContext,
 } from "react";
-import { Form as FormOoui, parseContext } from "@gisce/ooui";
+import { Form as FormOoui } from "@gisce/ooui";
 import {
   Form as AntForm,
   Button,
@@ -115,7 +115,6 @@ function Form(props: FormProps, ref: any) {
   const [fields, setFields] = useState<any>();
   const formModalContext = useContext(FormModalContext) as FormModalContextType;
   const [containerWidth, setContainerWidth] = useState<any>();
-  const [defaultGetCalled, setDefaultGetCalled] = useState<boolean>(false);
 
   const createdId = useRef<number>();
   const originalFormValues = useRef<any>({});
@@ -183,15 +182,6 @@ function Form(props: FormProps, ref: any) {
     fetchData();
   }, [id, model, valuesProps, formViewProps, visible]);
 
-  useEffect(() => {
-    if (defaultGetCalled) {
-      checkFieldsChanges({
-        elementHasLostFocus: true,
-      });
-      setDefaultGetCalled(false);
-    }
-  }, [defaultGetCalled]);
-
   const onSubmitSucceed = (id?: number, values?: any, formValues?: any) => {
     setFormHasChanges?.(false);
     setFormIsSaving?.(false);
@@ -347,7 +337,6 @@ function Form(props: FormProps, ref: any) {
     let values;
     let _fields;
     let _arch;
-    let hasDefaultGetCalled;
 
     setFormIsLoading?.(true);
     setError(undefined);
@@ -363,13 +352,10 @@ function Form(props: FormProps, ref: any) {
     if (valuesProps) {
       values = valuesProps;
     } else {
-      ({
-        values,
-        defaultGetCalled: hasDefaultGetCalled,
-      } = await fetchValuesFromApi({
+      values = await fetchValuesFromApi({
         fields: _fields,
         arch: _arch!,
-      }));
+      });
     }
 
     if (actionDomain) {
@@ -379,18 +365,9 @@ function Form(props: FormProps, ref: any) {
     originalFormValues.current = processValues(values, _fields);
 
     parseForm({ fields: _fields, arch: _arch!, values });
-    assignNewValuesToForm({
-      values,
-      fields: _fields,
-      reset: true,
-      isDefaultGet: hasDefaultGetCalled,
-    });
+    assignNewValuesToForm({ values, fields: _fields, reset: true });
     setFormIsLoading?.(false);
     setFormHasChanges?.(false);
-
-    if (hasDefaultGetCalled) {
-      setDefaultGetCalled(true);
-    }
   };
 
   function setOriginalValue(field: string, value: any) {
@@ -443,12 +420,10 @@ function Form(props: FormProps, ref: any) {
     values: newValues,
     fields,
     reset,
-    isDefaultGet = false,
   }: {
     values: any;
     fields: any;
     reset: boolean;
-    isDefaultGet?: boolean;
   }) => {
     const currentValues = reset ? {} : antForm.getFieldsValue(true);
     const mergedValues = { ...currentValues, ...newValues };
@@ -465,10 +440,7 @@ function Form(props: FormProps, ref: any) {
       };
     });
 
-    if (!isDefaultGet) {
-      lastAssignedValues.current = valuesProcessed;
-    }
-
+    lastAssignedValues.current = valuesProcessed;
     antForm.setFields(fieldsToUpdate);
   };
 
@@ -480,8 +452,6 @@ function Form(props: FormProps, ref: any) {
     arch: string;
   }) => {
     let values = {};
-    let defaultGetCalled = false;
-
     if (getCurrentId()!) {
       values = (
         await ConnectionProvider.getHandler().readObjects({
@@ -506,9 +476,8 @@ function Form(props: FormProps, ref: any) {
     } else {
       setAttachments?.([]);
       values = await getDefaultValues(fields);
-      defaultGetCalled = true;
     }
-    return { values, defaultGetCalled };
+    return values;
   };
 
   const submitApi = async (options?: { callOnSubmitSucceed?: boolean }) => {
@@ -802,20 +771,7 @@ function Form(props: FormProps, ref: any) {
     ) {
       onSubmitSucceed?.(getCurrentId(), getValues(), getFormValues());
     } else if (response.type) {
-      let responseContext = {};
-
-      if (response.context) {
-        responseContext = parseContext({
-          context: response.context,
-          fields,
-          values: getValues(),
-        });
-      }
-
-      await runAction({
-        actionData: response,
-        context: { ...context, ...responseContext },
-      });
+      await runAction({ actionData: response, context });
     } else {
       await fetchValues();
     }
@@ -866,9 +822,9 @@ function Form(props: FormProps, ref: any) {
         fields,
         values: getValues(),
         context: {
+          ...context,
           ...parentContext,
           ...formOoui?.context,
-          ...context,
         },
         onRefreshParentValues: () => {
           fetchValues();

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>