@gisce/react-ooui 2.0.0-alpha.6 → 2.0.0-alpha.61

package/src/widgets/views/Tree/Tree.tsx

@@ -0,0 +1,295 @@
+import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Pagination as AntPagination, Row, Col, Spin, Badge } from "antd";
+import {
+  getTree,
+  getTableColumns,
+  getTableItems,
+  hasActualValues,
+} from "@/helpers/treeHelper";
+import { Tree as TreeOoui } from "@gisce/ooui";
+import { TreeView } from "@/types";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
+import { Table as GisceTable } from "@gisce/react-formiga-table";
+import {
+  PlusSquareOutlined,
+  MinusSquareOutlined,
+  LoadingOutlined,
+} from "@ant-design/icons";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import { SelectAllRecordsRow } from "@/common/SelectAllRecordsRow";
+import { COLUMN_COMPONENTS } from "./treeComponents";
+import ErrorBoundary from "antd/es/alert/ErrorBoundary";
+
+type Props = {
+  total?: number;
+  limit: number;
+  page?: number;
+  loading: boolean;
+  treeView: TreeView;
+  results: any[];
+  showPagination?: boolean;
+  onRequestPageChange?: (page: number, pageSize?: number) => void;
+  onRowClicked?: (record: any) => void;
+  onRowSelectionChange?: (selectedRowKeys: any[]) => void;
+  selectedRowKeys?: number[];
+  scrollY?: number;
+  colorsForResults?: { [key: number]: string };
+  statusForResults?: { [key: number]: string };
+  onChangeSort?: (results: any) => void;
+  sorter?: any;
+  onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
+  childField?: string;
+  rootTree?: boolean;
+  context?: any;
+  readonly?: boolean;
+  onSelectAllRecords?: () => Promise<void>;
+};
+export const Tree = memo((props: Props) => {
+  const {
+    page = 1,
+    limit,
+    total,
+    treeView,
+    results,
+    onRequestPageChange,
+    loading,
+    onRowClicked,
+    showPagination = true,
+    selectedRowKeys = [],
+    onRowSelectionChange,
+    scrollY,
+    colorsForResults = {},
+    statusForResults = {},
+    onChangeSort,
+    sorter,
+    onFetchChildrenForRecord,
+    childField,
+    rootTree = false,
+    context,
+    readonly,
+    onSelectAllRecords,
+  } = props;
+
+  const [items, setItems] = useState<any[]>([]);
+
+  const errorInParseColors = useRef<boolean>(false);
+
+  const [treeOoui, setTreeOoui] = useState<TreeOoui>();
+
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  const internalLimit = useRef(limit);
+
+  const actionViewContext = useContext(
+    ActionViewContext,
+  ) as ActionViewContextType;
+  const { title = undefined, setTitle = undefined } =
+    (rootTree ? actionViewContext : {}) || {};
+
+  const columns = useMemo(() => {
+    if (!treeOoui) {
+      return undefined;
+    }
+
+    return getTableColumns(
+      treeOoui,
+      {
+        ...COLUMN_COMPONENTS,
+      },
+      context,
+    );
+  }, [context, treeOoui]);
+
+  useEffect(() => {
+    const treeOoui = getTree(treeView);
+    setTreeOoui(treeOoui);
+    if (treeOoui.string && title !== treeOoui.string) {
+      setTitle?.(treeOoui.string);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeView, title]);
+
+  useEffect(() => {
+    if (!treeOoui) {
+      return;
+    }
+    errorInParseColors.current = false;
+    const items = getTableItems(treeOoui, results);
+    setItems(items);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [results]);
+
+  useEffect(() => {
+    internalLimit.current = limit;
+  }, [limit]);
+
+  const from = (page - 1) * internalLimit.current + 1;
+  const to = from - 1 + items.length;
+  const summary =
+    total === undefined
+      ? null
+      : total === 0
+      ? t("no_results")
+      : t("summary")
+          .replace("{from}", from?.toString())
+          .replace("{to}", to?.toString())
+          .replace("{total}", total?.toString());
+
+  const pagination = useMemo(() => {
+    if (!showPagination || treeView.isExpandable) {
+      return null;
+    }
+
+    const numberOfVisibleSelectedRows = items?.filter(
+      (entry) => selectedRowKeys && selectedRowKeys.includes(entry.id),
+    ).length;
+
+    return loading ? null : total === undefined ? (
+      <Spin className="pb-4" />
+    ) : (
+      <Row align="bottom" className="pb-4">
+        <Col span={onSelectAllRecords ? 8 : 12}>
+          <AntPagination
+            total={total}
+            pageSize={
+              internalLimit.current === 0 ? total : internalLimit.current
+            }
+            current={page}
+            showSizeChanger={false}
+            onChange={onRequestPageChange}
+          />
+        </Col>
+        {onSelectAllRecords && (
+          <Col span={8} className="text-center">
+            <SelectAllRecordsRow
+              numberOfVisibleSelectedRows={numberOfVisibleSelectedRows}
+              numberOfRealSelectedRows={selectedRowKeys?.length || 0}
+              numberOfTotalRows={items.length}
+              totalRecords={total || 0}
+              onSelectAllRecords={onSelectAllRecords}
+            />
+          </Col>
+        )}
+        <Col span={onSelectAllRecords ? 8 : 12} className="text-right">
+          {summary}
+        </Col>
+      </Row>
+    );
+  }, [
+    items,
+    loading,
+    onRequestPageChange,
+    onSelectAllRecords,
+    page,
+    selectedRowKeys,
+    showPagination,
+    summary,
+    total,
+    treeView.isExpandable,
+  ]);
+
+  const sums = useMemo(() => {
+    if (!treeOoui) {
+      return null;
+    }
+    const sumFields = treeOoui.columns
+      .filter((it) => it.sum !== undefined)
+      .map((it) => {
+        return { label: it.sum, field: it.id };
+      });
+
+    if (!sumFields || sumFields.length === 0) {
+      return null;
+    }
+
+    const summary: string[] = [];
+    const sumItems =
+      selectedRowKeys?.length > 0
+        ? items.filter((result: any) => {
+            return selectedRowKeys.includes(result.id);
+          })
+        : items;
+
+    sumFields.forEach((sumField) => {
+      const total = sumItems.reduce((prev, current) => {
+        if (current[sumField.field] && !isNaN(current[sumField.field]))
+          return prev + current[sumField.field];
+        else return prev;
+      }, 0);
+
+      summary.push(`${sumField.label}: ${Math.round(total * 100) / 100}`);
+    });
+
+    return <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>;
+  }, [items, selectedRowKeys, treeOoui]);
+
+  const dataTable = useMemo(() => {
+    if (treeOoui !== null && columns && columns.length > 0) {
+      const maxWidthPerCell = 600;
+      return calculateColumnsWidth(columns, items, maxWidthPerCell);
+    }
+    return undefined;
+  }, [columns, items, treeOoui]);
+
+  const adjustedHeight = useMemo(() => {
+    if (scrollY && treeOoui?.columns.some((it: any) => it.sum !== undefined)) {
+      return scrollY - 30;
+    }
+    return scrollY;
+  }, [scrollY, treeOoui?.columns]);
+
+  if (treeOoui === null || !dataTable || dataTable?.columns?.length === 0) {
+    return <Spin style={{ padding: "2rem" }} />;
+  }
+
+  return (
+    <ErrorBoundary>
+      {pagination}
+      <GisceTable
+        height={adjustedHeight!}
+        columns={dataTable.columns}
+        dataSource={items}
+        loading={loading}
+        loadingComponent={<Spin />}
+        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}
+        onRowSelectionChange={onRowSelectionChange}
+        onChangeSort={onChangeSort}
+        sorter={sorter}
+        readonly={readonly}
+        expandableOpts={
+          onFetchChildrenForRecord
+            ? {
+                expandIcon: PlusSquareOutlined,
+                collapseIcon: MinusSquareOutlined,
+                loadingIcon: LoadingOutlined,
+                onFetchChildrenForRecord,
+                childField: childField!,
+              }
+            : undefined
+        }
+      />
+      {sums}
+    </ErrorBoundary>
+  );
+});
+
+Tree.displayName = "Tree";

package/src/widgets/views/Tree/index.ts

@@ -0,0 +1 @@
+export * from "./Tree";

package/src/widgets/views/Tree/treeComponents.tsx

@@ -0,0 +1,276 @@
+import { ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import { Checkbox, Spin } from "antd";
+import { parseFloatToString } from "@/helpers/timeHelper";
+import { ProgressBarInput } from "../../base/ProgressBar";
+import { One2manyValue } from "../../base/one2many/One2manyInput";
+import { Interweave } from "interweave";
+import { Many2oneTree } from "../../base/many2one/Many2oneTree";
+import { ReferenceTree } from "../../base/ReferenceTree";
+import dayjs from "@/helpers/dayjs";
+import Avatar from "../../custom/Avatar";
+import { CustomTag, TagInput } from "../../custom/Tag";
+import { DatePickerConfig } from "@/common/DatePicker";
+import ConnectionProvider from "@/ConnectionProvider";
+import { colorFromString } from "@/helpers/formHelper";
+
+export const BooleanComponent = ({
+  value,
+}: {
+  value: boolean;
+}): ReactElement => {
+  return useMemo(
+    () => (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignContent: "center",
+        }}
+      >
+        <Checkbox checked={value} disabled />
+      </div>
+    ),
+    [value],
+  );
+};
+
+export const Many2OneComponent = ({ value }: { value: any }): ReactElement => {
+  return useMemo(() => <Many2oneTree m2oField={value} />, [value]);
+};
+
+export const TextComponent = ({ value }: { value: any }): ReactElement => {
+  return useMemo(
+    () => (
+      <Interweave
+        content={value?.toString().replace(/(?:\r\n|\r|\n)/g, "<br>")}
+      />
+    ),
+    [value],
+  );
+};
+
+export const DateComponent = ({ value }: { value: any }): ReactElement => {
+  return useMemo(() => {
+    if (!value || (value && value.length === 0)) return <></>;
+
+    const formattedValue = dayjs(
+      value,
+      DatePickerConfig.date.dateInternalFormat,
+    ).format(DatePickerConfig.date.dateDisplayFormat);
+    return <>{formattedValue}</>;
+  }, [value]);
+};
+
+export const DateTimeComponent = ({ value }: { value: any }): ReactElement => {
+  return useMemo(() => {
+    if (!value || (value && value.length === 0)) return <></>;
+    const formattedValue = dayjs(
+      value,
+      DatePickerConfig.time.dateInternalFormat,
+    ).format(DatePickerConfig.time.dateDisplayFormat);
+    return <>{formattedValue}</>;
+  }, [value]);
+};
+
+export const One2ManyComponent = ({
+  value,
+}: {
+  value: One2manyValue;
+}): ReactElement => {
+  return useMemo(() => {
+    const length = Array.isArray(value?.items) ? value?.items.length : 0;
+    return <>{`( ${length} )`}</>;
+  }, [value]);
+};
+
+export const ProgressBarComponent = ({
+  value,
+}: {
+  value: any;
+}): ReactElement => {
+  return useMemo(() => <ProgressBarInput value={value} />, [value]);
+};
+
+export const FloatTimeComponent = ({ value }: { value: any }): ReactElement => {
+  return useMemo(() => <>{parseFloatToString(value)}</>, [value]);
+};
+
+export const NumberComponent = ({ value }: { value: number }): ReactElement => {
+  return useMemo(
+    () => <div style={{ textAlign: "right" }}>{value}</div>,
+    [value],
+  );
+};
+
+export const ImageComponent = ({ value }: { value: string }): ReactElement => {
+  return useMemo(
+    () => (
+      <img
+        src={`data:image/*;base64,${value}`}
+        style={{ maxWidth: "50px", padding: "5px" }}
+      />
+    ),
+    [value],
+  );
+};
+
+export const TagComponent = ({
+  value,
+  key,
+  ooui,
+  context,
+}: {
+  value: any;
+  key: string;
+  ooui: any;
+  context: any;
+}): ReactElement => {
+  return useMemo(() => <TagInput ooui={ooui} value={value} />, [ooui, value]);
+};
+
+export const SelectionComponent = ({
+  value,
+  key,
+  ooui,
+  context,
+}: {
+  value: any;
+  key: string;
+  ooui: any;
+  context: any;
+}): ReactElement => {
+  return useMemo(() => <>{ooui.selectionValues.get(value)}</>, [ooui, value]);
+};
+
+export const ReferenceComponent = ({
+  value,
+  key,
+  ooui,
+  context,
+}: {
+  value: any;
+  key: string;
+  ooui: any;
+  context: any;
+}): ReactElement => {
+  return useMemo(
+    () => (
+      <ReferenceTree
+        value={value}
+        selectionValues={ooui.selectionValues}
+        context={context}
+      />
+    ),
+    [context, ooui.selectionValues, value],
+  );
+};
+
+export const AvatarComponent = ({
+  value,
+  key,
+  ooui,
+  context,
+}: {
+  value: any;
+  key: string;
+  ooui: any;
+  context: any;
+}): ReactElement => {
+  return useMemo(() => <Avatar ooui={ooui} value={value} />, [ooui, value]);
+};
+
+export const TagsComponent = ({
+  value,
+  key,
+  ooui,
+  context,
+}: {
+  value: any;
+  key: string;
+  ooui: any;
+  context: any;
+}): ReactElement => {
+  const [values, setValues] = useState<Array<{ id: number; name: string }>>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const { relation, field } = ooui;
+
+  const loadValues = useCallback(async () => {
+    try {
+      setLoading(true);
+      const optionsRead = await ConnectionProvider.getHandler().search({
+        model: relation,
+        params: [["id", "in", value.items.map((v: any) => v.id)]],
+        fields: [field],
+        context,
+      });
+      setValues(
+        optionsRead.map((i: any) => {
+          const { id, name } = i;
+          return { id, name };
+        }),
+      );
+    } catch (error) {
+      console.error("Error loading data", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [context, field, relation, value.items]);
+
+  useEffect(() => {
+    if (value?.items && value?.items.length > 0) {
+      loadValues();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value?.items]);
+
+  const tags = useMemo(
+    () =>
+      values.map((entry) => {
+        const { id, name } = entry;
+        const color = colorFromString(name);
+        return (
+          <CustomTag key={`${id}`} color={color}>
+            {name}
+          </CustomTag>
+        );
+      }),
+    [values],
+  );
+
+  return useMemo(() => {
+    if (loading) {
+      return <Spin />;
+    }
+    return (
+      <div
+        style={{
+          maxWidth: "300px",
+          whiteSpace: "break-spaces",
+          lineHeight: "30px",
+        }}
+      >
+        {tags}
+      </div>
+    );
+  }, [tags, loading]);
+};
+
+export const COLUMN_COMPONENTS = {
+  boolean: BooleanComponent,
+  many2one: Many2OneComponent,
+  text: TextComponent,
+  one2many: One2ManyComponent,
+  many2many: One2ManyComponent,
+  progressbar: ProgressBarComponent,
+  float_time: FloatTimeComponent,
+  image: ImageComponent,
+  integer: NumberComponent,
+  float: NumberComponent,
+  reference: ReferenceComponent,
+  tag: TagComponent,
+  selection: SelectionComponent,
+  date: DateComponent,
+  datetime: DateTimeComponent,
+  avatar: AvatarComponent,
+  tags: TagsComponent,
+};

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

@@ -1,10 +1,9 @@
-import { DatePicker, TimePicker, Row, Col } from "antd";
-
-import React from "react";
+import { DatePicker, Row, Col } from "antd";
 import Field from "@/common/Field";
 import { Field as FieldOoui, Label as LabelOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Label from "@/widgets/base/Label";
+import { TimePicker } from "../../../common/TimePicker";
 
 export const DateTimeRangePicker = (props: WidgetProps) => {
   const { ooui, showLabel = false } = props;
@@ -48,14 +47,41 @@ export const DateTimeRangePicker = (props: WidgetProps) => {
         </Col>
         <Col>
           <Field {...props} ooui={fields[1]} showLabel={false}>
-            <TimePicker.RangePicker
-              className="w-60"
-              allowEmpty={[true, true]}
-              format={"HH:mm"}
-            ></TimePicker.RangePicker>
+            <TimeRangePicker />
           </Field>
         </Col>
       </Row>
     </>
   );
 };
+
+const TimeRangePicker = ({
+  value,
+  onChange,
+}: {
+  value?: any;
+  onChange?: (newValue: any) => void;
+}) => {
+  return (
+    <div style={{ marginTop: 5 }}>
+      <TimePicker
+        placeholder="Start time"
+        format={"HH:mm"}
+        style={{ width: 115, marginRight: 10 }}
+        value={value?.[0]}
+        onChange={(newValue) => {
+          onChange?.([newValue, value?.[1]]);
+        }}
+      />
+      <TimePicker
+        placeholder="End time"
+        style={{ width: 115 }}
+        format={"HH:mm"}
+        value={value?.[1]}
+        onChange={(newValue) => {
+          onChange?.([value?.[0], newValue]);
+        }}
+      />
+    </div>
+  );
+};

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { ReactElement, useContext } from "react";
 
 import { Row, Col, Button } from "antd";
 import {
@@ -17,13 +17,9 @@ type Props = {
   onClear: () => void;
 };
 
-export function SearchBottomBar(props: Props): React.ReactElement {
-  const {
-    onAdvancedFilterToggle,
-    advancedFilter,
-    onClear,
-    isSearching,
-  } = props;
+export function SearchBottomBar(props: Props): ReactElement {
+  const { onAdvancedFilterToggle, advancedFilter, onClear, isSearching } =
+    props;
 
   const { t } = useContext(LocaleContext) as LocaleContextType;
 

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

@@ -8,7 +8,11 @@ import { PairFields } from "./PairFields";
 
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 
-import { Field, SearchFieldTypes, Selection as SelectionOoui } from "@gisce/ooui";
+import {
+  Field,
+  SearchFieldTypes,
+  Selection as SelectionOoui,
+} from "@gisce/ooui";
 import { MultiSelection } from "@/widgets/base/MultiSelection";
 
 type Props = {

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Form, Row, Col, Alert, theme } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 
@@ -60,6 +60,7 @@ function SearchFilter(props: Props) {
 
   useEffect(() => {
     form.setFieldsValue(searchValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchValues]);
 
   const getRowsAndCols = () => {
@@ -101,7 +102,7 @@ function SearchFilter(props: Props) {
     delete values.limit;
     const newParams = getParamsForFields(
       values,
-      sfo.current?._advancedSearchContainer
+      sfo.current?._advancedSearchContainer,
     );
 
     onSubmit({ params: newParams, offset, limit, searchValues: values });