@gisce/react-ooui 2.0.0-rc.9 → 2.0.0

package/src/widgets/views/Tree.tsx

@@ -1,400 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { Pagination, Checkbox, Space, Row, Col, Spin, Tag, Badge } from "antd";
-import {
-  getTree,
-  getTableColumns,
-  getTableItems,
-  hasActualValues,
-} from "@/helpers/treeHelper";
-import { Tree as TreeOoui } from "@gisce/ooui";
-
-import { TreeView, Column } from "@/types";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
-import { parseFloatToString } from "@/helpers/timeHelper";
-import { ProgressBarInput } from "../base/ProgressBar";
-import { Table as GisceTable } from "@gisce/react-formiga-table";
-import {
-  PlusSquareOutlined,
-  MinusSquareOutlined,
-  LoadingOutlined,
-} from "@ant-design/icons";
-import { One2manyValue } from "../base/one2many/One2manyInput";
-import { Interweave } from "interweave";
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
-import { Many2oneTree } from "../base/many2one/Many2oneTree";
-import { ReferenceTree } from "../base/ReferenceTree";
-import dayjs from "dayjs";
-import Avatar from "../custom/Avatar";
-import { TagInput } from "../custom/Tag";
-import { DatePickerConfig } from "@/common/DatePicker";
-
-type Props = {
-  total?: number;
-  limit: number;
-  page?: number;
-  loading: boolean;
-  treeView: TreeView;
-  results: Array<any>;
-  showPagination?: boolean;
-  onRequestPageChange?: (page: number, pageSize?: number) => void;
-  onRowClicked?: (record: any) => void;
-  rowSelection?: any;
-  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>;
-};
-
-const booleanComponentFn = (value: boolean): React.ReactElement => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignContent: "center",
-      }}
-    >
-      <Checkbox checked={value} disabled />
-    </div>
-  );
-};
-
-const many2OneComponentFn = (m2oField: any): React.ReactElement => {
-  return <Many2oneTree m2oField={m2oField} />;
-};
-
-const textComponentFn = (value: any): React.ReactElement => {
-  return (
-    <Interweave
-      content={value?.toString().replace(/(?:\r\n|\r|\n)/g, "<br>")}
-    />
-  );
-};
-
-const dateComponentFn = (value: any): React.ReactElement => {
-  if (!value || (value && value.length === 0)) return <></>;
-
-  const formattedValue = dayjs(
-    value,
-    DatePickerConfig.date.dateInternalFormat
-  ).format(DatePickerConfig.date.dateDisplayFormat);
-  return <>{formattedValue}</>;
-};
-
-const dateTimeComponentFn = (value: any): React.ReactElement => {
-  if (!value || (value && value.length === 0)) return <></>;
-  const formattedValue = dayjs(
-    value,
-    DatePickerConfig.time.dateInternalFormat
-  ).format(DatePickerConfig.time.dateDisplayFormat);
-  return <>{formattedValue}</>;
-};
-
-const one2ManyComponentFn = (value: One2manyValue): React.ReactElement => {
-  const length = Array.isArray(value?.items) ? value?.items.length : 0;
-  return <>{`( ${length} )`}</>;
-};
-
-const progressBarComponentFn = (value: any): React.ReactElement => {
-  return <ProgressBarInput value={value} />;
-};
-
-const floatTimeComponent = (value: number): React.ReactElement => {
-  return <>{parseFloatToString(value)}</>;
-};
-
-const numberComponent = (value: number): React.ReactElement => {
-  return <div style={{ textAlign: "right" }}>{value}</div>;
-};
-
-const imageComponent = (value: string): React.ReactElement => {
-  return (
-    <img
-      src={`data:image/*;base64,${value}`}
-      style={{ maxWidth: "50px", padding: "5px" }}
-    />
-  );
-};
-
-const TagComponent = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any
-): React.ReactElement => {
-  return <TagInput ooui={ooui} value={value} />;
-};
-
-const SelectionComponent = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any
-): React.ReactElement => {
-  return <>{ooui.selectionValues.get(value)}</>;
-};
-
-const referenceComponent = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any
-): React.ReactElement => {
-  return (
-    <>
-      <ReferenceTree
-        value={value}
-        selectionValues={ooui.selectionValues}
-        context={context}
-      />
-    </>
-  );
-};
-
-const AvatarFn = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any
-): React.ReactElement => <Avatar ooui={ooui} value={value} />;
-
-function Tree(props: Props): React.ReactElement {
-  const {
-    page = 1,
-    limit,
-    total,
-    treeView,
-    results,
-    onRequestPageChange,
-    loading,
-    onRowClicked,
-    showPagination = true,
-    rowSelection,
-    scrollY,
-    colorsForResults = {},
-    statusForResults = {},
-    onChangeSort,
-    sorter,
-    onFetchChildrenForRecord,
-    childField,
-    rootTree = false,
-    context,
-    readonly,
-    onSelectAllRecords,
-  } = props;
-
-  const [items, setItems] = useState<Array<any>>([]);
-  const [columns, setColumns] = useState<Array<Column>>([]);
-
-  const errorInParseColors = useRef<boolean>(false);
-
-  const treeOoui = useRef<any>(null);
-
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-  const internalLimit = useRef(limit);
-
-  const actionViewContext = useContext(
-    ActionViewContext
-  ) as ActionViewContextType;
-  const { title = undefined, setTitle = undefined } =
-    (rootTree ? actionViewContext : {}) || {};
-
-  useEffect(() => {
-    treeOoui.current = getTree(treeView);
-
-    const columns = getTableColumns(
-      treeOoui.current,
-      {
-        boolean: booleanComponentFn,
-        many2one: many2OneComponentFn,
-        text: textComponentFn,
-        one2many: one2ManyComponentFn,
-        many2many: one2ManyComponentFn,
-        progressbar: progressBarComponentFn,
-        float_time: floatTimeComponent,
-        image: imageComponent,
-        integer: numberComponent,
-        float: numberComponent,
-        reference: referenceComponent,
-        tag: TagComponent,
-        selection: SelectionComponent,
-        date: dateComponentFn,
-        datetime: dateTimeComponentFn,
-        avatar: AvatarFn,
-      },
-      context
-    );
-
-    setColumns(columns);
-
-    if (treeOoui.current.string && title !== treeOoui.current.string) {
-      setTitle?.(treeOoui.current.string);
-    }
-  }, [treeView]);
-
-  useEffect(() => {
-    errorInParseColors.current = false;
-    const items = getTableItems(treeOoui.current, results);
-    setItems(items);
-    internalLimit.current = limit;
-  }, [results]);
-
-  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 = () => {
-    if (!showPagination || treeView.isExpandable) {
-      return null;
-    }
-
-    return loading ? null : total === undefined ? (
-      <Spin className="pb-4" />
-    ) : (
-      <Row align="bottom" className="pb-4">
-        <Col span={12}>
-          <Pagination
-            total={total}
-            pageSize={
-              internalLimit.current === 0 ? total : internalLimit.current
-            }
-            current={page}
-            showSizeChanger={false}
-            onChange={onRequestPageChange}
-          />
-        </Col>
-        <Col span={12} className="text-right">
-          {summary}
-        </Col>
-      </Row>
-    );
-  };
-
-  function getSums() {
-    const tree = treeOoui.current as TreeOoui;
-
-    const sumFields = tree.columns
-      .filter((it) => it.sum !== undefined)
-      .map((it) => {
-        return { label: it.sum, field: it.id };
-      });
-
-    if (!sumFields || sumFields.length === 0) {
-      return null;
-    }
-
-    let summary: string[] = [];
-    let sumItems =
-      rowSelection?.selectedRowKeys?.length > 0
-        ? items.filter((result: any) => {
-            return rowSelection?.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>;
-  }
-
-  let dataTable;
-  let adjustedHeight = scrollY;
-
-  // This helper function helps to calculate the width for each column
-  // based on all table cells - column cell and source cell
-  if (treeOoui.current !== null) {
-    const maxWidthPerCell = 600;
-    dataTable = calculateColumnsWidth(columns, items, maxWidthPerCell);
-    const tree = treeOoui.current as TreeOoui;
-
-    if (scrollY && tree.columns.some((it) => it.sum !== undefined)) {
-      adjustedHeight = scrollY - 30;
-    }
-  }
-
-  return treeOoui.current === null ||
-    !dataTable ||
-    dataTable.columns?.length === 0 ? (
-    <Spin style={{ padding: "2rem" }} />
-  ) : (
-    <div>
-      {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}
-        selectionRowKeys={rowSelection?.selectedRowKeys}
-        onRowSelectionChange={rowSelection?.onChange}
-        onChangeSort={onChangeSort}
-        sorter={sorter}
-        readonly={readonly}
-        expandableOpts={
-          onFetchChildrenForRecord
-            ? {
-                expandIcon: PlusSquareOutlined,
-                collapseIcon: MinusSquareOutlined,
-                loadingIcon: LoadingOutlined,
-                onFetchChildrenForRecord,
-                childField: childField!,
-              }
-            : undefined
-        }
-        onSelectAllRecords={onSelectAllRecords}
-        totalItems={total || 0}
-        translations={{
-          recordsSelected: t("recordsSelected"),
-          selectAllRecords: t("selectAllRecords"),
-          allRecordsSelected: t("allRecordsSelected"),
-        }}
-      />
-      {getSums()}
-    </div>
-  );
-}
-
-export default Tree;

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

@@ -1,16 +0,0 @@
-import { DatePicker } from "antd";
-
-import React from "react";
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-
-export const DateRangePicker = (props: WidgetProps) => {
-  return (
-    <Field {...props} layout={"vertical"}>
-      <DatePicker.RangePicker
-        allowEmpty={[true, true]}
-        format={"DD/MM/YYYY"}
-      ></DatePicker.RangePicker>
-    </Field>
-  );
-};

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

@@ -1,63 +0,0 @@
-import { DatePicker, TimePicker } from "antd";
-
-import React from "react";
-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 { Row, Col } from "antd";
-
-export const DateTimeRangePicker = (props: WidgetProps) => {
-  const { ooui, showLabel = false } = props;
-  const { label, id } = ooui;
-
-  const fields = [
-    new FieldOoui({
-      name: id + "#date",
-      label: "",
-    }),
-    new FieldOoui({
-      name: id + "#time",
-      label: "",
-    }),
-  ];
-
-  return (
-    <>
-      {showLabel && (
-        <Label
-          ooui={
-            new LabelOoui({
-              name: id + "_label",
-              string: label,
-              help: ooui.tooltip,
-              fieldForLabel: id,
-            })
-          }
-          align={"left"}
-        />
-      )}
-      <Row align={"bottom"} className="p-0">
-        <Col className="mr-2">
-          <Field {...props} ooui={fields[0]} showLabel={false}>
-            <DatePicker.RangePicker
-              className="w-60"
-              allowEmpty={[true, true]}
-              format={"DD/MM/YYYY"}
-            ></DatePicker.RangePicker>
-          </Field>
-        </Col>
-        <Col>
-          <Field {...props} ooui={fields[1]} showLabel={false}>
-            <TimePicker.RangePicker
-              className="w-60"
-              allowEmpty={[true, true]}
-              format={"HH:mm"}
-            ></TimePicker.RangePicker>
-          </Field>
-        </Col>
-      </Row>
-    </>
-  );
-};

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

@@ -1,56 +0,0 @@
-import React from "react";
-import { Row, Col } from "antd";
-import { Float } from "@/widgets/base/Float";
-import { Integer } from "@/widgets/base/Integer";
-import { Integer as IntegerOoui, Label as LabelOoui } from "@gisce/ooui";
-import Label from "@/widgets/base/Label";
-import { WidgetProps } from "@/types";
-
-type Props = {
-  ooui: any;
-};
-
-export function PairFields(props: WidgetProps): React.ReactElement {
-  const { ooui, showLabel } = props;
-  const { id, label, tooltip } = ooui;
-  const Widget = ooui instanceof IntegerOoui ? Integer : Float;
-
-  const getWidget = (suffix: string) => {
-    return (
-      <Widget
-        ooui={{
-          ...(ooui as any),
-          id: id + suffix,
-          label: "",
-          tooltip: undefined,
-        }}
-        layout="vertical"
-      />
-    );
-  };
-
-  return (
-    <>
-      {showLabel && (
-        <Label
-          ooui={
-            new LabelOoui({
-              name: id + "_label",
-              string: label,
-              help: tooltip,
-              fieldForLabel: id,
-            })
-          }
-          align={"left"}
-        />
-      )}
-      <Row align={"bottom"} className="mt-0" wrap={false}>
-        <Col>{getWidget("#from")}</Col>
-        <Col className="pb-1">
-          <span className="pl-2 pr-2 h-full"> - </span>
-        </Col>
-        <Col>{getWidget("#to")}</Col>
-      </Row>
-    </>
-  );
-}

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

@@ -1,58 +0,0 @@
-import React, { useContext } from "react";
-
-import { Row, Col, Button } from "antd";
-import {
-  DownOutlined,
-  UpOutlined,
-  SearchOutlined,
-  ClearOutlined,
-} from "@ant-design/icons";
-
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-type Props = {
-  advancedFilter: boolean;
-  isSearching: boolean;
-  onAdvancedFilterToggle: () => void;
-  onClear: () => void;
-};
-
-export function SearchBottomBar(props: Props): React.ReactElement {
-  const {
-    onAdvancedFilterToggle,
-    advancedFilter,
-    onClear,
-    isSearching,
-  } = props;
-
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  return (
-    <Row>
-      <Col span={12} className="text-left pt-4 pb-2 pl-2">
-        <a className="text-xs" onClick={onAdvancedFilterToggle}>
-          {advancedFilter ? (
-            <UpOutlined className="pr-1" />
-          ) : (
-            <DownOutlined className="pr-1" />
-          )}
-          {advancedFilter ? t("simple_search") : t("advanced_search")}
-        </a>
-      </Col>
-      <Col span={12} className="text-right pb-2">
-        <Button className="mr-5" icon={<ClearOutlined />} onClick={onClear}>
-          {t("clear")}
-        </Button>
-        <Button
-          icon={<SearchOutlined />}
-          loading={isSearching}
-          className="mr-2"
-          type="primary"
-          htmlType="submit"
-        >
-          {t("search")}
-        </Button>
-      </Col>
-    </Row>
-  );
-}

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

@@ -1,59 +0,0 @@
-import React, { useContext } from "react";
-
-import { Char } from "@/widgets/base/Char";
-import { Selection } from "@/widgets/base/Selection";
-import { DateRangePicker } from "./DateRangePicker";
-import { DateTimeRangePicker } from "./DateTimeRangePicker";
-import { PairFields } from "./PairFields";
-
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-import { Field, SearchFieldTypes, Selection as SelectionOoui } from "@gisce/ooui";
-import { MultiSelection } from "@/widgets/base/MultiSelection";
-
-type Props = {
-  field: Field;
-};
-
-export function SearchField(props: Props) {
-  const { field } = props;
-  field.readOnly = false;
-  field.required = false;
-
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  const widgetType = field.type;
-
-  switch (widgetType) {
-    case SearchFieldTypes.boolean: {
-      const ooui = new SelectionOoui({
-        name: field._id,
-        string: field.label,
-        selection: [
-          ["true", t("true")],
-          ["false", t("false")],
-        ],
-      });
-
-      return <Selection layout="vertical" ooui={ooui} showLabel />;
-    }
-    case SearchFieldTypes.float:
-    case SearchFieldTypes.progressbar:
-    case SearchFieldTypes.float_time:
-    case SearchFieldTypes.integer: {
-      return <PairFields ooui={field} showLabel />;
-    }
-    case SearchFieldTypes.date: {
-      return <DateRangePicker ooui={field} layout="vertical" showLabel />;
-    }
-    case SearchFieldTypes.datetime: {
-      return <DateTimeRangePicker ooui={field} layout="vertical" showLabel />;
-    }
-    case SearchFieldTypes.selection: {
-      return <MultiSelection layout="vertical" ooui={field} showLabel />;
-    }
-    default: {
-      return <Char ooui={field} layout="vertical" showLabel isSearchField />;
-    }
-  }
-}