@gisce/react-ooui 2.0.0-rc.0 → 2.0.0-rc.11

package/src/widgets/views/Tree.tsx

@@ -1,12 +1,11 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Pagination, Checkbox, Space, Row, Col, Spin, Tag, Badge } from "antd";
-import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
+import {
+  getTree,
+  getTableColumns,
+  getTableItems,
+  hasActualValues,
+} from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
 
 import { TreeView, Column } from "@/types";
@@ -32,6 +31,7 @@ import dayjs from "dayjs";
 import Avatar from "../custom/Avatar";
 import { TagInput } from "../custom/Tag";
 import { DatePickerConfig } from "@/common/DatePicker";
+import { SelectAllRecordsRow } from "@/common/SelectAllRecordsRow";
 
 type Props = {
   total?: number;
@@ -54,6 +54,7 @@ type Props = {
   rootTree?: boolean;
   context?: any;
   readonly?: boolean;
+  onSelectAllRecords?: () => Promise<void>;
 };
 
 const booleanComponentFn = (value: boolean): React.ReactElement => {
@@ -114,8 +115,8 @@ const floatTimeComponent = (value: number): React.ReactElement => {
   return <>{parseFloatToString(value)}</>;
 };
 
-const numberComponent = (value: any): React.ReactElement => {
-  return <div style={{ textAlign: "right" }}>{JSON.stringify(value)}</div>;
+const numberComponent = (value: number): React.ReactElement => {
+  return <div style={{ textAlign: "right" }}>{value}</div>;
 };
 
 const imageComponent = (value: string): React.ReactElement => {
@@ -191,6 +192,7 @@ function Tree(props: Props): React.ReactElement {
     rootTree = false,
     context,
     readonly,
+    onSelectAllRecords,
   } = props;
 
   const [items, setItems] = useState<Array<any>>([]);
@@ -215,22 +217,22 @@ function Tree(props: Props): React.ReactElement {
     const columns = getTableColumns(
       treeOoui.current,
       {
-        boolean: numberComponent,
-        many2one: numberComponent,
-        text: numberComponent,
-        one2many: numberComponent,
-        many2many: numberComponent,
-        progressbar: numberComponent,
-        float_time: numberComponent,
-        image: numberComponent,
+        boolean: booleanComponentFn,
+        many2one: many2OneComponentFn,
+        text: textComponentFn,
+        one2many: one2ManyComponentFn,
+        many2many: one2ManyComponentFn,
+        progressbar: progressBarComponentFn,
+        float_time: floatTimeComponent,
+        image: imageComponent,
         integer: numberComponent,
         float: numberComponent,
-        reference: numberComponent,
-        tag: numberComponent,
-        selection: numberComponent,
-        date: numberComponent,
-        datetime: numberComponent,
-        avatar: numberComponent,
+        reference: referenceComponent,
+        tag: TagComponent,
+        selection: SelectionComponent,
+        date: dateComponentFn,
+        datetime: dateTimeComponentFn,
+        avatar: AvatarFn,
       },
       context
     );
@@ -270,7 +272,7 @@ function Tree(props: Props): React.ReactElement {
       <Spin className="pb-4" />
     ) : (
       <Row align="bottom" className="pb-4">
-        <Col span={12}>
+        <Col span={8}>
           <Pagination
             total={total}
             pageSize={
@@ -281,7 +283,18 @@ function Tree(props: Props): React.ReactElement {
             onChange={onRequestPageChange}
           />
         </Col>
-        <Col span={12} className="text-right">
+        <Col span={8} className="text-center">
+          {onSelectAllRecords && (
+            <SelectAllRecordsRow
+              numberOfVisibleSelectedRows={numberOfVisibleSelectedRows}
+              numberOfRealSelectedRows={rowSelection?.selectedRowKeys.length}
+              numberOfTotalRows={items.length}
+              totalRecords={total || 0}
+              onSelectAllRecords={onSelectAllRecords}
+            />
+          )}
+        </Col>
+        <Col span={8} className="text-right">
           {summary}
         </Col>
       </Row>
@@ -337,27 +350,13 @@ function Tree(props: Props): React.ReactElement {
     }
   }
 
-  const onRowStyle = useCallback(
-    (record: any) => {
-      if (colorsForResults![record.id]) {
-        return { color: colorsForResults![record.id] };
-      }
-      return undefined;
-    },
-    [colorsForResults]
-  );
-
-  const onRowStatus = useCallback(
-    (record: any) => {
-      if (statusForResults![record.id]) {
-        return <Badge color={statusForResults[record.id]} />;
-      }
-      return undefined;
-    },
-    [statusForResults]
-  );
+  const numberOfVisibleSelectedRows = items.filter((entry) =>
+    rowSelection?.selectedRowKeys.includes(entry.id)
+  ).length;
 
-  return treeOoui.current === null ? (
+  return treeOoui.current === null ||
+    !dataTable ||
+    dataTable.columns?.length === 0 ? (
     <Spin style={{ padding: "2rem" }} />
   ) : (
     <div>
@@ -368,9 +367,24 @@ function Tree(props: Props): React.ReactElement {
         dataSource={items}
         loading={loading}
         loadingComponent={<Spin />}
-        onRowStyle={onRowStyle}
-        onRowStatus={onRowStatus}
+        onRowStyle={(record: any) => {
+          if (colorsForResults![record.id]) {
+            return { color: colorsForResults![record.id] };
+          }
+          return undefined;
+        }}
+        onRowStatus={
+          hasActualValues(statusForResults)
+            ? (record: any) => {
+                if (statusForResults![record.id]) {
+                  return <Badge color={statusForResults[record.id]} />;
+                }
+                return undefined;
+              }
+            : undefined
+        }
         onRowDoubleClick={onRowClicked}
+        selectionRowKeys={rowSelection?.selectedRowKeys}
         onRowSelectionChange={rowSelection?.onChange}
         onChangeSort={onChangeSort}
         sorter={sorter}

package/src/widgets/views/searchFilter/SearchFilter.tsx

@@ -31,7 +31,6 @@ type Props = {
   searchError?: string;
   searchValues?: any;
   showLimitOptions?: boolean;
-  formXml: string;
 };
 
 function SearchFilter(props: Props) {
@@ -49,7 +48,6 @@ function SearchFilter(props: Props) {
     searchError,
     searchValues,
     showLimitOptions = true,
-    formXml,
   } = props;
 
   const [simpleSearchFields, setSimpleSearchFields] = useState<Container>();
@@ -89,7 +87,7 @@ function SearchFilter(props: Props) {
 
   useDeepCompareEffect(() => {
     setAdvancedFilter(false);
-    sfo.current = new SearchFilterOoui(searchFields, fields, formXml);
+    sfo.current = new SearchFilterOoui(searchFields, fields);
     sfo.current.parse();
     setSimpleSearchFields(sfo.current._simpleSearchContainer);
     setAdvancedSearchFields(sfo.current._advancedSearchContainer);