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

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

@@ -1,276 +0,0 @@
-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/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,87 +0,0 @@
-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;
-  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}>
-            <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/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,54 +0,0 @@
-import { ReactElement, 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): 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,63 +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 />;
-    }
-  }
-}

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

@@ -1,160 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Form, Row, Col, Alert, theme } 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/searchHelper";
-import Measure from "react-measure";
-const { useToken } = theme;
-
-type Props = {
-  fields: any;
-  searchFields: SearchFields;
-  onClear: () => void;
-  onSubmit: (values: any) => void;
-  isSearching: boolean;
-  limit: number;
-  offset: number;
-  onLimitChange?: (limit: number) => void;
-  searchVisible?: boolean;
-  setSearchFilterHeight?: (height: number) => void;
-  searchError?: string;
-  searchValues?: any;
-  showLimitOptions?: boolean;
-};
-
-function SearchFilter(props: Props) {
-  const {
-    fields,
-    searchFields = { primary: [], secondary: [] },
-    onClear,
-    onSubmit,
-    isSearching,
-    offset,
-    limit,
-    onLimitChange,
-    searchVisible,
-    setSearchFilterHeight,
-    searchError,
-    searchValues,
-    showLimitOptions = true,
-  } = props;
-
-  const [simpleSearchFields, setSimpleSearchFields] = useState<Container>();
-  const [advancedSearchFields, setAdvancedSearchFields] = useState<Container>();
-  const [advancedFilter, setAdvancedFilter] = useState(false);
-  const sfo = useRef<SearchFilterOoui>();
-  const { token } = useToken();
-
-  const [form] = Form.useForm();
-
-  useEffect(() => {
-    form.setFieldsValue(searchValues);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchValues]);
-
-  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);
-    sfo.current = new SearchFilterOoui(searchFields, fields);
-    sfo.current.parse();
-    setSimpleSearchFields(sfo.current._simpleSearchContainer);
-    setAdvancedSearchFields(sfo.current._advancedSearchContainer);
-  }, [fields, searchFields]);
-
-  const rows = getRowsAndCols();
-
-  const onFinish = (values: any) => {
-    const { limit, offset } = values;
-    delete values.offset;
-    delete values.limit;
-    const newParams = getParamsForFields(
-      values,
-      sfo.current?._advancedSearchContainer,
-    );
-
-    onSubmit({ params: newParams, offset, limit, searchValues: values });
-  };
-
-  return (
-    <Measure
-      bounds
-      onResize={(contentRect) => {
-        setSearchFilterHeight?.(contentRect.bounds?.height!);
-      }}
-    >
-      {({ measureRef }) => (
-        <div ref={measureRef}>
-          <div style={{ display: searchVisible ? "block" : "none" }}>
-            <Form
-              className="p-3 shadow-md"
-              style={{ borderRadius: token.borderRadius }}
-              form={form}
-              onFinish={onFinish}
-              initialValues={{ offset, limit }}
-            >
-              {rows}
-              {advancedFilter && showLimitOptions && (
-                <SearchParams onLimitChange={onLimitChange} />
-              )}
-              <SearchBottomBar
-                advancedFilter={advancedFilter}
-                onAdvancedFilterToggle={() => {
-                  setAdvancedFilter(!advancedFilter);
-                }}
-                onClear={() => {
-                  form.resetFields();
-                  onClear();
-                }}
-                isSearching={isSearching}
-              />
-            </Form>
-            {searchError && (
-              <Alert
-                className="mt-10"
-                message={searchError}
-                type="error"
-                banner
-              />
-            )}
-            <div className="pb-5" />
-          </div>
-        </div>
-      )}
-    </Measure>
-  );
-}
-
-export default SearchFilter;