@gisce/react-ooui 0.1.0

package/src/widgets/views/Tree.tsx

@@ -0,0 +1,267 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Table, Pagination, Checkbox, Space, Row, Col, Spin } from "antd";
+import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
+import { Tree as TreeOoui } from "@gisce/ooui";
+
+import { TreeView, Column } from "@/types";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { Many2oneSuffix } from "../base/many2one/Many2oneSuffix";
+import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
+import { parseFloatToString } from "@/helpers/timeHelper";
+import { ProgressBarInput } from "../base/ProgressBar";
+import styled from "styled-components";
+
+interface TableProps {
+  minHeight: number;
+}
+
+const StyledTable = styled(Table)`
+  .ant-table-body {
+    min-height: ${(props: TableProps) => props.minHeight}px;
+  }
+`;
+
+type Props = {
+  total: number;
+  limit: number;
+  page?: number;
+  loading: boolean;
+  treeView: TreeView;
+  results: Array<any>;
+  showPagination?: boolean;
+  onRequestPageChange?: (page: number, pageSize?: number) => void;
+  onRowClicked?: (id: number) => void;
+  rowSelection?: any;
+  scrollY?: number;
+  colorsForResults?: { [key: number]: string };
+  onChangeSort?: (results: any) => void;
+  disableScroll?: boolean;
+};
+
+const booleanComponentFn = (value: boolean): React.ReactElement => {
+  return <Checkbox defaultChecked={value} disabled />;
+};
+
+const many2OneComponentFn = (m2oField: any): React.ReactElement => {
+  if (!m2oField) {
+    return <></>;
+  }
+  return (
+    <Space>
+      <>{m2oField.value}</>
+      <Many2oneSuffix id={m2oField.id} model={m2oField.model} />
+    </Space>
+  );
+};
+const textComponentFn = (value: any): React.ReactElement => {
+  return <div style={{ whiteSpace: "pre-line" }}>{value}</div>;
+};
+
+const one2ManyComponentFn = (value: any): React.ReactElement => {
+  const length = Array.isArray(value) ? value.length : 0;
+  return <>{`( ${length} )`}</>;
+};
+
+const progressBarComponentFn = (value: any): React.ReactElement => {
+  return <ProgressBarInput value={value} />;
+};
+
+const floatTimeComponent = (value: number): React.ReactElement => {
+  return <>{parseFloatToString(value)}</>;
+};
+
+function Tree(props: Props): React.ReactElement {
+  const {
+    page = 1,
+    limit,
+    total,
+    treeView,
+    results,
+    onRequestPageChange,
+    loading,
+    onRowClicked,
+    showPagination = true,
+    rowSelection,
+    scrollY,
+    colorsForResults = {},
+    onChangeSort,
+    disableScroll = false,
+  } = 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;
+
+  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,
+    });
+    setColumns(columns);
+  }, [treeView]);
+
+  useEffect(() => {
+    errorInParseColors.current = false;
+    const items = getTableItems(treeOoui.current, results);
+    setItems(items);
+  }, [results]);
+
+  const from = (page - 1) * limit + 1;
+  const to = from - 1 + items.length;
+  const summary = loading
+    ? null
+    : total === 0
+    ? t("no_results")
+    : t("summary")
+        .replace("{from}", from?.toString())
+        .replace("{to}", to?.toString())
+        .replace("{total}", total?.toString());
+
+  const pagination = () => {
+    if (!showPagination) {
+      return null;
+    }
+
+    return loading ? null : (
+      <>
+        <Row align="bottom" className="pb-4">
+          <Col span={12}>
+            <Pagination
+              total={total}
+              pageSize={limit}
+              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="mt-2 p-1 pb-0 pl-2 bg-gray-50">{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 ? (
+    <Spin style={{ padding: "2rem" }} />
+  ) : (
+    <div>
+      {pagination()}
+      {/* {results.map((result) => {
+        return (
+          <div key={result.id}>
+            <br />
+            <span>{result.name}</span>
+          </div>
+        );
+      })} */}
+      <StyledTable
+        minHeight={adjustedHeight!}
+        columns={dataTable.columns}
+        scroll={
+          disableScroll
+            ? undefined
+            : { x: dataTable.tableWidth, y: adjustedHeight }
+        }
+        size="small"
+        dataSource={items}
+        pagination={false}
+        loading={loading}
+        rowClassName={(record: any) => {
+          return `cursor-pointer select-none record-row-${record.id}`;
+        }}
+        rowKey={(item: any) => {
+          return item.id;
+        }}
+        onRow={(record: any) => {
+          let style = undefined;
+
+          if (colorsForResults![record.id]) {
+            style = { color: colorsForResults![record.id] };
+          }
+
+          return {
+            style,
+            onDoubleClick: () => {
+              if (onRowClicked) onRowClicked(record.id);
+            },
+          };
+        }}
+        rowSelection={rowSelection}
+        onChange={(pagination, filters, sorter, extraInfo) => {
+          if (!(sorter as any).order) {
+            onChangeSort?.(undefined);
+          } else {
+            onChangeSort?.(sorter);
+          }
+        }}
+      />
+      {getSums()}
+    </div>
+  );
+}
+
+export default Tree;

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

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

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

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

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

@@ -0,0 +1,73 @@
+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, Selection as SelectionOoui } from "@gisce/ooui";
+import { MultiSelection } from "@/widgets/base/MultiSelection";
+
+type Props = {
+  field: Field;
+};
+
+const types = {
+  text: "text",
+  many2one: "many2one",
+  char: "char",
+  boolean: "boolean",
+  selection: "selection",
+  float: "float",
+  float_time: "float_time",
+  progressbar: "progressbar",
+  integer: "integer",
+  date: "date",
+  datetime: "datetime",
+};
+
+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 types.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 types.float:
+    case types.progressbar:
+    case types.float_time:
+    case types.integer: {
+      return <PairFields ooui={field} showLabel />;
+    }
+    case types.date: {
+      return <DateRangePicker ooui={field} layout="vertical" showLabel />;
+    }
+    case types.datetime: {
+      return <DateTimeRangePicker ooui={field} layout="vertical" showLabel />;
+    }
+    case types.selection: {
+      return <MultiSelection layout="vertical" ooui={field} showLabel />;
+    }
+    default: {
+      return <Char ooui={field} layout="vertical" showLabel isSearchField />;
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Form, Row, Col } from "antd";
+import useDeepCompareEffect from "use-deep-compare-effect";
+
+import {
+  SearchFilter as SearchFilterOoui,
+  Container,
+  Field,
+} from "@gisce/ooui";
+
+import { SearchField } from "./SearchField";
+import { SearchBottomBar } from "./SearchBottomBar";
+import { SearchFields } from "@/types";
+import { SearchParams } from "./SearchParams";
+
+import { getParamsForFields } from "@/helpers/searchFilterHelper";
+
+type Props = {
+  fields: any;
+  searchFields: SearchFields;
+  onClear: () => void;
+  onSubmit: (values: any) => void;
+  isSearching: boolean;
+  limit: number;
+  offset: number;
+  onLimitChange?: (limit: number) => void;
+};
+
+function SearchFilter(props: Props) {
+  const {
+    fields,
+    searchFields = { primary: [], secondary: [] },
+    onClear,
+    onSubmit,
+    isSearching,
+    offset,
+    limit,
+    onLimitChange,
+  } = props;
+
+  const [simpleSearchFields, setSimpleSearchFields] = useState<Container>();
+  const [advancedSearchFields, setAdvancedSearchFields] = useState<Container>();
+  const [advancedFilter, setAdvancedFilter] = useState(false);
+
+  const [form] = Form.useForm();
+
+  const getRowsAndCols = () => {
+    if (!advancedSearchFields) {
+      return;
+    }
+
+    const fields = advancedFilter ? advancedSearchFields : simpleSearchFields;
+    const rows = fields?.rows;
+
+    return rows?.map((row, i) => {
+      return (
+        <Row key={i}>
+          {row.map((item, j) => {
+            return (
+              <Col xs={24} className="p-2" xl={6} key={j}>
+                <SearchField field={item as Field} />
+              </Col>
+            );
+          })}
+        </Row>
+      );
+    });
+  };
+
+  useDeepCompareEffect(() => {
+    setAdvancedFilter(false);
+    const sfo = new SearchFilterOoui(searchFields, fields);
+    sfo.parse();
+    setSimpleSearchFields(sfo._simpleSearchContainer);
+    setAdvancedSearchFields(sfo._advancedSearchContainer);
+  }, [fields, searchFields]);
+
+  const rows = getRowsAndCols();
+
+  const onFinish = (values: any) => {
+    const { limit, offset } = values;
+    delete values.offset;
+    delete values.limit;
+    const newParams = getParamsForFields(values, fields);
+
+    onSubmit({ params: newParams, offset, limit });
+  };
+
+  return (
+    <Form
+      className="bg-gray-50 rounded p-3 shadow-md"
+      form={form}
+      onFinish={onFinish}
+      initialValues={{ offset, limit }}
+    >
+      {rows}
+      {advancedFilter && <SearchParams onLimitChange={onLimitChange}/>}
+      <SearchBottomBar
+        advancedFilter={advancedFilter}
+        onAdvancedFilterToggle={() => {
+          setAdvancedFilter(!advancedFilter);
+        }}
+        onClear={() => {
+          form.resetFields();
+          onClear();
+        }}
+        isSearching={isSearching}
+      />
+    </Form>
+  );
+}
+
+export default SearchFilter;

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

@@ -0,0 +1,32 @@
+import React, { useContext } from "react";
+
+import { Integer } from "@/widgets/base/Integer";
+import { Row, Space } from "antd";
+import { Integer as IntegerOoui } from "@gisce/ooui";
+
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+type SearchParamsProps = {
+  onLimitChange?: (limit: number) => void;
+}
+
+export function SearchParams(props: SearchParamsProps): React.ReactElement {
+  const { onLimitChange } = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  const limitOoui = new IntegerOoui({ name: "limit" });
+  const offsetOoui = new IntegerOoui({ name: "offset" });
+  return (
+    <div className="pl-2 pt-2">
+      <Row key={"count_params"}>{t("parameters")}</Row>
+      <Space align="center">
+        {t("limit") + " :"}
+        <Integer ooui={limitOoui} onChange={(newValue: number) => {
+          onLimitChange?.(newValue);
+        }}/>
+        {t("first") + " :"}
+        <Integer ooui={offsetOoui} />
+      </Space>
+    </div>
+  );
+}