@gisce/react-ooui 2.0.0-alpha.54 → 2.0.0-alpha.56

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/dist/widgets/views/Tree.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/widgets/views/Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AA2B3C,KAAK,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,GAAG,EAAE,CAAC;IACf,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;IACnB,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAsJF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA8O9C;AAED,eAAe,IAAI,CAAC"}