@gisce/react-ooui 2.0.0-alpha.62 → 2.0.0-alpha.64

package/src/widgets/views/SearchTree.tsx

@@ -1,367 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  useRef,
-  useContext,
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-  useCallback,
-} from "react";
-import { Alert, Spin } from "antd";
-
-import SearchFilter from "@/widgets/views/searchFilter/SearchFilter";
-import { Tree } from "@/widgets/views/Tree";
-import { FormView, TreeView } from "@/types/index";
-import ConnectionProvider from "@/ConnectionProvider";
-
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
-import { mergeSearchFields } from "@/helpers/formHelper";
-import {
-  ContentRootContext,
-  ContentRootContextType,
-} from "@/context/ContentRootContext";
-import showErrorDialog from "@/ui/ActionErrorDialog";
-import { DEFAULT_SEARCH_LIMIT, useSearch } from "@/hooks/useSearch";
-
-type OnRowClickedData = {
-  id: number;
-  model: string;
-  formView: FormView;
-  treeView: TreeView;
-};
-
-type Props = {
-  model?: string;
-  formView?: FormView;
-  treeView?: TreeView;
-  onRowClicked: (data: OnRowClickedData) => void;
-  nameSearch?: string;
-  treeScrollY?: number;
-  domain?: any;
-  visible?: boolean;
-  rootTree?: boolean;
-  parentContext?: any;
-  onChangeSelectedRowKeys?: (selectedRowKeys: any) => void;
-};
-
-function SearchTree(props: Props, ref: any) {
-  const {
-    model,
-    formView: formViewProps,
-    treeView: treeViewProps,
-    onRowClicked,
-    nameSearch,
-    treeScrollY,
-    domain = [],
-    visible = true,
-    rootTree = false,
-    parentContext = {},
-    onChangeSelectedRowKeys,
-  } = props;
-
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [initialFetchDone, setInitialFetchDone] = useState<boolean>(false);
-
-  const searchNameGetDoneRef = useRef(false);
-
-  const [currentModel, setCurrentModel] = useState<string>();
-  const [treeView, setTreeView] = useState<TreeView>();
-  const [formView, setFormView] = useState<FormView>();
-
-  const [initialError, setInitialError] = useState<string>();
-
-  const [searchFilterHeight, setSearchFilterHeight] = useState<number>(200);
-
-  const expandableClickActionData = useRef<any>();
-
-  const { height } = useWindowDimensions();
-
-  const contentRootContext = useContext(
-    ContentRootContext,
-  ) as ContentRootContextType;
-  const { processAction } = contentRootContext || {};
-
-  const actionViewContext = useContext(
-    ActionViewContext,
-  ) as ActionViewContextType;
-  const {
-    setResults: setResultsActionView = undefined,
-    setCurrentItemIndex = undefined,
-    currentId = undefined,
-    results: resultsActionView = undefined,
-    selectedRowItems = undefined,
-    setSelectedRowItems = undefined,
-    searchParams = [],
-    setSearchParams = undefined,
-    searchVisible = true,
-    setSearchVisible = undefined,
-    sorter = undefined,
-    setSorter = undefined,
-    setTotalItems: setActionViewTotalItems = undefined,
-    setSearchTreeNameSearch = undefined,
-    setTreeIsLoading = undefined,
-    searchValues = {},
-    setSearchValues = undefined,
-    limit = DEFAULT_SEARCH_LIMIT,
-    setLimit = undefined,
-  } = (rootTree ? actionViewContext : {}) || {};
-
-  const changeSelectedRowKeys = useCallback(
-    (newSelectedRowKeys: any[]) => {
-      setSelectedRowItems?.(newSelectedRowKeys.map((id: number) => ({ id })));
-      onChangeSelectedRowKeys?.(newSelectedRowKeys);
-    },
-    [onChangeSelectedRowKeys, setSelectedRowItems],
-  );
-
-  const {
-    submit,
-    clear,
-    fetchResults,
-    tableRefreshing,
-    searchFilterLoading,
-    searchError,
-    page,
-    offset,
-    getResults,
-    requestPageChange,
-    changeSort,
-    fetchChildrenForRecord,
-    colorsForResults,
-    statusForResults,
-    totalItems,
-    getAllIds,
-  } = useSearch({
-    model: currentModel!,
-    setSearchTreeNameSearch,
-    setSelectedRowItems: changeSelectedRowKeys,
-    setSearchParams,
-    setSearchValues,
-    searchParams,
-    setSearchVisible,
-    setTreeIsLoading,
-    nameSearch,
-    searchNameGetDoneRef,
-    context: parentContext,
-    formView: formView!,
-    treeView: treeView!,
-    sorter,
-    setSorter,
-    setCurrentItemIndex,
-    setResultsActionView,
-    resultsActionView,
-    domain,
-    currentId,
-    setActionViewTotalItems,
-    limit,
-    setLimit,
-  });
-
-  useImperativeHandle(ref, () => ({
-    refreshResults: () => {
-      searchNameGetDoneRef.current = false;
-      fetchResults();
-    },
-    getFields: () => treeView?.fields,
-    getDomain: () => domain,
-  }));
-
-  useEffect(() => {
-    if (!initialFetchDone) {
-      return;
-    }
-
-    if (visible && treeView) {
-      searchNameGetDoneRef.current = false;
-      fetchResults();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page, offset, initialFetchDone, visible, nameSearch, treeView]);
-
-  const fetchData = async () => {
-    setInitialFetchDone(false);
-    setIsLoading(true);
-    setInitialError(undefined);
-    setTreeIsLoading?.(true);
-
-    try {
-      await fetchModelData();
-      setInitialFetchDone(true);
-    } catch (error) {
-      setInitialError(error);
-      setTreeIsLoading?.(false);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const fetchModelData = async () => {
-    setCurrentModel(model);
-
-    let _formView = formViewProps;
-
-    if (!formViewProps) {
-      _formView = (await ConnectionProvider.getHandler().getView({
-        model: model!,
-        type: "form",
-        context: parentContext,
-      })) as FormView;
-    }
-
-    let _treeView = treeViewProps;
-
-    if (!treeViewProps) {
-      _treeView = (await ConnectionProvider.getHandler().getView({
-        model: model!,
-        type: "tree",
-        context: parentContext,
-      })) as TreeView;
-    }
-
-    setFormView(_formView as FormView);
-    setTreeView(_treeView as TreeView);
-  };
-
-  useEffect(() => {
-    fetchData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [model]);
-
-  const onSearchTreeLimitChange = (newLimit: number) => {
-    setLimit?.(newLimit);
-  };
-
-  const treeButOpen = async (record: any) => {
-    const { id } = record;
-
-    if (!expandableClickActionData.current) {
-      expandableClickActionData.current =
-        await ConnectionProvider.getHandler().treeButOpen({
-          id: treeView!.view_id,
-          model: currentModel!,
-          context: parentContext,
-        });
-    }
-
-    const actionData: any = expandableClickActionData.current[0][2];
-
-    await processAction?.({
-      actionData,
-      fields: treeView!.fields,
-      values: {
-        active_id: id,
-        ...record,
-      },
-      context: parentContext,
-    });
-  };
-
-  const onRowClickedHandler = async (record: any) => {
-    const { id } = record;
-
-    if (treeView?.isExpandable) {
-      try {
-        await treeButOpen(record);
-      } catch (err) {
-        showErrorDialog(err);
-      }
-      return;
-    }
-
-    onRowClicked({
-      id,
-      model: currentModel!,
-      formView: formView!,
-      treeView: treeView!,
-    });
-  };
-
-  async function selectAllRecords() {
-    const allIds = await getAllIds();
-    setSelectedRowItems?.(allIds.map((id: number) => ({ id })));
-    onChangeSelectedRowKeys?.(allIds);
-  }
-
-  function calculateTableHeight() {
-    if (treeView?.isExpandable) {
-      return height - 160;
-    }
-    return height - (searchFilterHeight + 240);
-  }
-
-  const selectedRowKeys = useMemo(
-    () => selectedRowItems?.map((item) => item.id),
-    [selectedRowItems],
-  );
-
-  const content = () => {
-    if (!treeView || !formView) {
-      return null;
-    }
-
-    return (
-      <>
-        <SearchFilter
-          fields={{ ...formView.fields, ...treeView.fields }}
-          searchFields={mergeSearchFields([
-            formView.search_fields,
-            treeView.search_fields,
-          ])}
-          onClear={clear}
-          limit={limit}
-          offset={offset}
-          isSearching={searchFilterLoading}
-          onSubmit={submit}
-          onLimitChange={onSearchTreeLimitChange}
-          setSearchFilterHeight={setSearchFilterHeight}
-          searchError={searchError}
-          searchVisible={searchVisible}
-          searchValues={searchValues}
-        />
-        <Tree
-          context={parentContext}
-          total={totalItems}
-          limit={limit}
-          page={page}
-          treeView={treeView}
-          results={getResults()}
-          onRequestPageChange={requestPageChange}
-          loading={tableRefreshing}
-          onRowClicked={onRowClickedHandler}
-          scrollY={treeScrollY || calculateTableHeight()}
-          colorsForResults={colorsForResults}
-          statusForResults={statusForResults}
-          selectedRowKeys={selectedRowKeys}
-          onRowSelectionChange={changeSelectedRowKeys}
-          sorter={sorter}
-          onChangeSort={changeSort}
-          onFetchChildrenForRecord={
-            treeView.isExpandable ? fetchChildrenForRecord : undefined
-          }
-          childField={treeView.field_parent}
-          rootTree={rootTree}
-          onSelectAllRecords={selectAllRecords}
-        />
-      </>
-    );
-  };
-
-  const error = initialError || searchError;
-
-  if (error) {
-    return <Alert className="mt-10" message={error} type="error" banner />;
-  }
-
-  return (
-    <div style={!visible ? { display: "none" } : {}}>
-      {isLoading ? <Spin /> : content()}
-    </div>
-  );
-}
-
-export default forwardRef(SearchTree);

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

@@ -1,295 +0,0 @@
-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

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