@gisce/react-ooui 1.3.0 → 1.4.0-rc.1

package/dist/widgets/views/SearchTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTree.d.ts","sourceRoot":"","sources":["SearchTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAgBnD,aAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,uBAAuB,CAAC,EAAE,CAAC,eAAe,EAAE,GAAG,KAAK,IAAI,CAAC;CAC1D,CAAC;;AA+SF,wBAAsC"}
+{"version":3,"file":"SearchTree.d.ts","sourceRoot":"","sources":["SearchTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAgBnD,aAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,uBAAuB,CAAC,EAAE,CAAC,eAAe,EAAE,GAAG,KAAK,IAAI,CAAC;CAC1D,CAAC;;AAiTF,wBAAsC"}

package/dist/widgets/views/Tree.d.ts

@@ -15,6 +15,9 @@ declare type Props = {
     colorsForResults?: {
         [key: number]: string;
     };
+    statusForResults?: {
+        [key: number]: string;
+    };
     onChangeSort?: (results: any) => void;
     sorter?: any;
     onFetchChildrenForRecord?: (item: any) => Promise<any[]>;

package/dist/widgets/views/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAwB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8GF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA8M9C;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAwB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+GF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAoN9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.3.0",
+  "version": "1.4.0-rc.1",
   "files": [
     "dist",
     "src",
@@ -33,9 +33,9 @@
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "^1.1.0-rc.3",
-    "@gisce/ooui": "^0.21.0",
+    "@gisce/ooui": "^0.22.0",
     "@gisce/react-formiga-components": "^1.0.9-rc.21",
-    "@gisce/react-formiga-table": "^0.7.0",
+    "@gisce/react-formiga-table": "^0.8.0",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",
     "antd": "^5.5.2",

package/src/actionbar/TreeActionBar.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Space } from "antd";
+import { Space, Spin } from "antd";
 import ChangeViewButton from "./ChangeViewButton";
 import {
   ActionViewContext,
@@ -151,6 +151,13 @@ function TreeActionBar(props: Props) {
 
   return (
     <Space wrap={true}>
+      {treeIsLoading && (
+        <>
+          <Spin />
+          {separator()}
+          {separator()}
+        </>
+      )}
       {treeExpandable ? null : (
         <>
           <SearchBar

package/src/helpers/treeHelper.ts

@@ -6,6 +6,7 @@ import {
   Reference,
 } from "@gisce/ooui";
 import { TreeView, Column } from "@/types";
+import {object} from "@storybook/addon-knobs";
 
 const getTree = (treeView: TreeView): TreeOoui => {
   const xml = treeView.arch;
@@ -121,12 +122,20 @@ function convertBooleansToNumeric({
 }
 
 function getColorMap(colorsValue: any) {
-  if (!colorsValue) {
-    return undefined;
+  return getItemsAttributes(colorsValue, "colors");
+}
+
+function getStatusMap(values: any){
+  return getItemsAttributes(values, "status");
+}
+
+function getItemsAttributes(attributes: object[], attribute: string) {
+  if (!attributes) {
+    return undefined
   }
   const map: any = {};
-  colorsValue.forEach((colorEntry: any) => {
-    map[colorEntry.id] = colorEntry.colors;
+  attributes.forEach((entry: any) => {
+    map[entry.id] = entry[attribute];
   });
   return map;
 }
@@ -179,5 +188,6 @@ export {
   convertBooleansToNumeric,
   itemHasBooleans,
   getColorMap,
+  getStatusMap,
   sortResults,
 };

package/src/hooks/useSearch.ts

@@ -1,6 +1,6 @@
 import { mergeParams } from "@/helpers/searchHelper";
 import {
-  getColorMap,
+  getColorMap, getStatusMap,
   getTableItems,
   getTree,
   sortResults,
@@ -72,6 +72,7 @@ export const useSearch = (opts: UseSearchOpts) => {
   const [totalItems, setTotalItems] = useState<number>();
   const [resultsInternal, setResultsInternal] = useState<any>([]);
   const [colorsForResults, setColorsForResults] = useState<any>(undefined);
+  const [statusForResults, setStatusForResults] = useState<any>(undefined);
   const internalLimit = useRef(limit || DEFAULT_SEARCH_LIMIT);
 
   const originalResults = useRef<any[]>([]);
@@ -105,7 +106,14 @@ export const useSearch = (opts: UseSearchOpts) => {
         return item?.[0];
       });
 
-      const { colors } = getTree(treeView!);
+      const { colors, status } = getTree(treeView!);
+      const attrs: any = {};
+      if (colors) {
+        attrs.colors = colors;
+      }
+      if (status) {
+        attrs.status = status;
+      }
 
       const resultsWithData =
         await ConnectionProvider.getHandler().readEvalUiObjects({
@@ -116,15 +124,14 @@ export const useSearch = (opts: UseSearchOpts) => {
             ? { ...treeView!.fields, [treeView!.field_parent]: {} }
             : treeView!.fields,
           context,
-          attrs: colors && {
-            colors,
-          },
+          attrs,
         });
       const resultsData = resultsWithData[0];
 
       originalResults.current = [...resultsData];
 
       setColorsForResults(getColorMap(resultsWithData[1]));
+      setStatusForResults(getStatusMap(resultsWithData[1]));
 
       const newResultIds = resultsData.map((item: any) => item.id);
 
@@ -169,7 +176,14 @@ export const useSearch = (opts: UseSearchOpts) => {
       const { params, newOffset } = opts || {};
 
       const mergedParams = mergeParams(params || searchParams, domain);
-      const { colors } = getTree(treeView!);
+      const { colors, status } = getTree(treeView!);      const attrs: any = {};
+      if (colors) {
+        attrs.colors = colors;
+      }
+      if (status) {
+        attrs.status = status;
+      }
+
 
       const { totalItems, results, attrsEvaluated } =
         await ConnectionProvider.getHandler().searchForTree({
@@ -181,9 +195,10 @@ export const useSearch = (opts: UseSearchOpts) => {
             ? { ...treeView!.fields, [treeView!.field_parent]: {} }
             : treeView!.fields,
           context,
-          attrs: colors && { colors },
+          attrs,
         });
       setColorsForResults(getColorMap(attrsEvaluated));
+      setStatusForResults(getStatusMap(attrsEvaluated));
 
       originalResults.current = [...results];
 
@@ -278,6 +293,7 @@ export const useSearch = (opts: UseSearchOpts) => {
 
   const changeSort = useCallback(
     (newSorter: any) => {
+      if (JSON.stringify(newSorter) === JSON.stringify(sorter)) return;
       setSorter?.(newSorter);
       const sortedResults =
         newSorter !== undefined
@@ -400,6 +416,7 @@ export const useSearch = (opts: UseSearchOpts) => {
     changeSort,
     fetchChildrenForRecord,
     colorsForResults,
+    statusForResults,
     totalItems,
   };
 };

package/src/stories/views/Tree.stories.jsx

@@ -99,6 +99,10 @@ Default.args = {
       progressbar: 20.01,
     },
   ],
+  colorsForResults: {
+    32: "red",
+    33: "red"
+  },
   treeView: {
     arch:
       `<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="user_id" widget="avatar"/><field name="name"/>\n                    <field name="title" widget="tag" widget_props="{'colors': {'corp': 'red', 'ltd': 'green'}}"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>`,

package/src/widgets/views/SearchTree.tsx

@@ -123,6 +123,7 @@ function SearchTree(props: Props, ref: any) {
     changeSort,
     fetchChildrenForRecord,
     colorsForResults,
+    statusForResults,
     totalItems,
   } = useSearch({
     model: currentModel!,
@@ -181,9 +182,9 @@ function SearchTree(props: Props, ref: any) {
       setInitialFetchDone(true);
     } catch (error) {
       setInitialError(error);
+      setTreeIsLoading?.(false);
     } finally {
       setIsLoading(false);
-      setTreeIsLoading?.(false);
     }
   };
 
@@ -319,6 +320,7 @@ function SearchTree(props: Props, ref: any) {
           onRowClicked={onRowClickedHandler}
           scrollY={treeScrollY || calculateTableHeight()}
           colorsForResults={colorsForResults}
+          statusForResults={statusForResults}
           rowSelection={{
             selectedRowKeys: selectedRowItems?.map((item) => item.id),
             onChange: changeSelectedRowKeys,

package/src/widgets/views/Tree.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Pagination, Checkbox, Space, Row, Col, Spin, Tag } from "antd";
+import { Pagination, Checkbox, Space, Row, Col, Spin, Tag, Badge } from "antd";
 import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
 
@@ -40,6 +40,7 @@ type Props = {
   rowSelection?: any;
   scrollY?: number;
   colorsForResults?: { [key: number]: string };
+  statusForResults?: { [key: number]: string };
   onChangeSort?: (results: any) => void;
   sorter?: any;
   onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
@@ -117,7 +118,7 @@ const imageComponent = (value: string): React.ReactElement => {
 };
 
 const TagComponent = (
-value: any,
+  value: any,
   key: string,
   ooui: any,
   context: any
@@ -126,14 +127,12 @@ value: any,
 };
 
 const SelectionComponent = (
-value: any,
+  value: any,
   key: string,
   ooui: any,
   context: any
 ): React.ReactElement => {
-  return (
-    <>{ooui.selectionValues.get(value)}</>
-  );
+  return <>{ooui.selectionValues.get(value)}</>;
 };
 
 const referenceComponent = (
@@ -153,9 +152,12 @@ const referenceComponent = (
   );
 };
 
-const AvatarFn = (value: any, key:string, ooui: any, context: any): React.ReactElement => (
-  <Avatar ooui={ooui} value={value} />
-)
+const AvatarFn = (
+  value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => <Avatar ooui={ooui} value={value} />;
 
 function Tree(props: Props): React.ReactElement {
   const {
@@ -171,6 +173,7 @@ function Tree(props: Props): React.ReactElement {
     rowSelection,
     scrollY,
     colorsForResults = {},
+    statusForResults = {},
     onChangeSort,
     sorter,
     onFetchChildrenForRecord,
@@ -306,9 +309,7 @@ function Tree(props: Props): React.ReactElement {
       summary.push(`${sumField.label}: ${Math.round(total * 100) / 100}`);
     });
 
-    return (
-      <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>
-    );
+    return <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>;
   }
 
   let dataTable;
@@ -331,11 +332,12 @@ function Tree(props: Props): React.ReactElement {
   ) : (
     <div>
       {pagination()}
+      {loading && <Spin className="pb-4" />}
       <GisceTable
         height={adjustedHeight!}
         columns={dataTable.columns}
         dataSource={items}
-        loading={loading}
+        loading={false}
         loadingComponent={<Spin />}
         onRowStyle={(record: any) => {
           if (colorsForResults![record.id]) {
@@ -343,6 +345,12 @@ function Tree(props: Props): React.ReactElement {
           }
           return undefined;
         }}
+        onRowStatus={(record: any) => {
+          if (statusForResults![record.id]) {
+            return <Badge color={statusForResults[record.id]}/>
+          }
+          return undefined
+        }}
         onRowDoubleClick={onRowClicked}
         onRowSelectionChange={rowSelection?.onChange}
         onChangeSort={onChangeSort}