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

package/src/widgets/base/Time.tsx

@@ -1,40 +0,0 @@
-import Field from "@/common/Field";
-import { Time as TimeOoui } from "@gisce/ooui";
-import { WidgetProps } from "@/types";
-import dayjs from "@/helpers/dayjs";
-import { Dayjs } from "dayjs";
-import { TimePicker } from "../../common/TimePicker";
-
-const Time = (props: WidgetProps) => {
-  const { ooui } = props;
-
-  return (
-    <Field {...props}>
-      <TimeInput ooui={ooui as TimeOoui} />
-    </Field>
-  );
-};
-
-type TimeInputProps = {
-  ooui: TimeOoui;
-  value?: string;
-  onChange?: (value?: string) => void;
-};
-
-export const TimeInput = (props: TimeInputProps) => {
-  const onChange = (time: Dayjs | null, timestring?: string) => {
-    if (props.onChange) {
-      props.onChange(timestring);
-    }
-  };
-
-  return (
-    <TimePicker
-      onChange={onChange}
-      numberOfSelectsToHide={3} // Since it has hours, minutes, and seconds
-      value={props.value ? dayjs(props.value, "HH:mm:ss") : undefined}
-    />
-  );
-};
-
-export default Time;

package/src/widgets/base/Url.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import isURL from "validator/lib/isURL";
-import Field from "@/common/Field";
-
-import { WidgetProps } from "@/types";
-import { LinkInput } from "./LinkInput";
-import { Char as CharOoui } from "@gisce/ooui";
-
-export const Url = (props: WidgetProps) => {
-  const { ooui } = props;
-  const { required } = ooui as CharOoui;
-
-  return (
-    <Field required={required} {...props}>
-      <LinkInput
-        ooui={ooui as CharOoui}
-        valueValidator={(value) => {
-          if (!value) {
-            return false;
-          }
-          return isURL(value);
-        }}
-      />
-    </Field>
-  );
-};

package/src/widgets/base/many2one/Many2one.tsx

@@ -1,322 +0,0 @@
-import React, { useState, useRef, useEffect, useContext } from "react";
-import { Input, Button, Row, Col, theme } from "antd";
-import {
-  SearchOutlined,
-  FolderOpenOutlined,
-  LoadingOutlined,
-} from "@ant-design/icons";
-import styled from "styled-components";
-
-import {
-  Many2one as Many2oneOoui,
-  transformDomainForChildWidget,
-} from "@gisce/ooui";
-import Field from "@/common/Field";
-import { SearchModal } from "@/widgets/modals/SearchModal";
-import { FormModal } from "@/widgets/modals/FormModal";
-import ConnectionProvider from "@/ConnectionProvider";
-import { Many2oneSuffix } from "./Many2oneSuffix";
-import showErrorDialog from "@/ui/GenericErrorDialog";
-import { FormContext, FormContextType } from "@/context/FormContext";
-import { transformPlainMany2Ones } from "@/helpers/formHelper";
-
-const { defaultAlgorithm, defaultSeed } = theme;
-
-const mapToken = defaultAlgorithm(defaultSeed);
-
-type Props = {
-  ooui: Many2oneOoui;
-  onOpenDetailClick?:
-    | ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void)
-    | undefined;
-  onSearchClick?:
-    | ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void)
-    | undefined;
-};
-
-export const Many2one = (props: Props) => {
-  const { ooui } = props;
-  const { required } = ooui;
-  const validator = async (_: any, value: any) => {
-    if (!value) throw new Error();
-    if (!Array.isArray(value)) throw new Error();
-    if (Array.isArray(value) && !value[0]) throw new Error();
-  };
-
-  return (
-    <Field required={required} type={"array"} validator={validator} {...props}>
-      <Many2oneInput ooui={ooui} />
-    </Field>
-  );
-};
-
-interface Many2oneInputProps {
-  ooui: Many2oneOoui;
-  value?: any[];
-  onChange?: (value: any[]) => void;
-}
-
-export const Many2oneInput: React.FC<Many2oneInputProps> = (
-  props: Many2oneInputProps,
-) => {
-  const { value, onChange, ooui } = props;
-  const {
-    required,
-    relation,
-    readOnly,
-    context,
-    id: fieldName,
-    domain: widgetDomain,
-  } = ooui;
-  const requiredStyle =
-    required && !readOnly
-      ? { backgroundColor: mapToken.colorPrimaryBg }
-      : undefined;
-  const [showSearchModal, setShowSearchModal] = useState<boolean>(false);
-  const [showFormModal, setShowFormModal] = useState<boolean>(false);
-  const [searching, setSearching] = useState<boolean>(false);
-  const [searchText, setSearchText] = useState<string>();
-  const searchButtonTappedRef = useRef<boolean>(false);
-  const [inputText, setInputText] = useState<string>("");
-  const inputTextRef = useRef<string>();
-  const formContext = useContext(FormContext) as FormContextType;
-  const { domain, getValues, getFields, getContext, elementHasLostFocus } =
-    formContext || {};
-  const transformedDomain = useRef<any[]>([]);
-  const [searchDomain, setSearchDomain] = useState<any>([]);
-
-  const id = (value && value[0]) || undefined;
-  const text = (value && value[1]) || "";
-
-  useEffect(() => {
-    if (!Array.isArray(value) && value) {
-      fetchNameAndUpdate(value as any);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    if (id && text.length === 0) {
-      fetchNameAndUpdate(id);
-    } else if (id && text.length > 0) {
-      setInputText(text);
-    } else if (!id && !text) {
-      setInputText(inputTextRef.current || "");
-    }
-  }, [value]);
-
-  const triggerChange = (changedValue: any[]) => {
-    onChange?.(changedValue);
-    elementHasLostFocus?.();
-  };
-
-  const onValueStringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    inputTextRef.current = e.target.value;
-    triggerChange([undefined, ""]);
-  };
-
-  const onElementLostFocus = async () => {
-    if (!searching && inputText !== text) {
-      // Debounce this event to give time to the search button onClick to set the flag
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // If the focus is lost because the user tapped the search button, we don't need to do nothing here
-      if (searchButtonTappedRef.current) {
-        triggerChange([undefined, ""]);
-        return;
-      }
-
-      setSearching(true);
-
-      try {
-        if (transformedDomain.current && transformedDomain.current.length > 0) {
-          tryFetchFirstResultOrShowSearch(inputTextRef.current as string);
-        } else {
-          const results: any[] =
-            await ConnectionProvider.getHandler().nameSearch({
-              model: relation,
-              payload: inputTextRef.current as string,
-              context: { ...getContext?.(), ...context },
-            });
-
-          if (results.length === 1) {
-            inputTextRef.current = undefined;
-            triggerChange(results[0]);
-          } else {
-            tryFetchFirstResultOrShowSearch(inputTextRef.current as string);
-          }
-        }
-      } catch (err) {
-        showErrorDialog(err);
-      } finally {
-        setSearching(false);
-      }
-    }
-  };
-
-  const tryFetchFirstResultOrShowSearch = async (text: string) => {
-    await parseDomain();
-
-    if (transformedDomain.current && transformedDomain.current.length > 0) {
-      const resultIds = await ConnectionProvider.getHandler().searchAllIds({
-        params: transformedDomain.current,
-        model: relation,
-        context: { ...getContext?.(), ...context },
-        totalItems: 2,
-      });
-
-      if (resultIds.length === 1) {
-        fetchNameAndUpdate(resultIds[0]);
-      } else {
-        setSearchText(text);
-        setShowSearchModal(true);
-      }
-      return;
-    }
-
-    setSearchText(text);
-    setShowSearchModal(true);
-  };
-
-  const fetchNameAndUpdate = async (id: number) => {
-    setSearching(true);
-
-    try {
-      const value = await ConnectionProvider.getHandler().execute({
-        action: "name_get",
-        payload: [id],
-        model: relation,
-        context: { ...getContext?.(), ...context },
-      });
-
-      triggerChange([id, value[0][1]]);
-    } catch (err) {
-      showErrorDialog(err);
-    } finally {
-      setSearching(false);
-    }
-  };
-
-  async function parseDomain() {
-    if (widgetDomain) {
-      transformedDomain.current =
-        await ConnectionProvider.getHandler().evalDomain({
-          domain: widgetDomain,
-          values: transformPlainMany2Ones({
-            fields: getFields(),
-            values: getValues(),
-          }),
-          fields: getFields(),
-          context: getContext(),
-        });
-    }
-
-    if (domain && domain.length > 0) {
-      transformedDomain.current = transformedDomain.current.concat(
-        transformDomainForChildWidget({
-          domain,
-          widgetFieldName: fieldName,
-        }),
-      );
-    }
-
-    setSearchDomain(transformedDomain.current);
-  }
-
-  async function onKeyDown(event: any) {
-    if (event.keyCode === 13) {
-      event.preventDefault();
-      event.stopPropagation();
-      await onElementLostFocus();
-    } else if (event.code === "Backspace" && id !== undefined) {
-      event.preventDefault();
-      event.stopPropagation();
-      triggerChange([undefined, ""]);
-    }
-  }
-
-  const CustomInput: any = required && !readOnly ? RequiredInput : Input;
-
-  return (
-    <Row gutter={8} wrap={false}>
-      <Col flex="auto">
-        <CustomInput
-          type="text"
-          value={inputText}
-          disabled={readOnly}
-          onChange={onValueStringChange}
-          style={requiredStyle}
-          onBlur={onElementLostFocus}
-          onKeyDown={onKeyDown}
-          suffix={
-            <Many2oneSuffix
-              id={id}
-              model={relation}
-              context={{ ...getContext?.(), ...context }}
-            />
-          }
-        />
-      </Col>
-      <Col flex="32px" style={{ paddingRight: 0 }}>
-        <Button
-          icon={<FolderOpenOutlined />}
-          disabled={id === undefined || text === "" || inputText === undefined}
-          onClick={() => {
-            setShowFormModal(true);
-          }}
-          style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
-          tabIndex={-1}
-        />
-      </Col>
-      <Col flex="32px" style={{ paddingLeft: 0 }}>
-        <Button
-          icon={searching ? <LoadingOutlined /> : <SearchOutlined />}
-          disabled={readOnly || searching}
-          onClick={() => {
-            searchButtonTappedRef.current = true;
-            tryFetchFirstResultOrShowSearch(text);
-          }}
-          style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
-          tabIndex={-1}
-        />
-      </Col>
-      <SearchModal
-        model={relation}
-        domain={searchDomain}
-        context={{ ...getContext?.(), ...context }}
-        visible={showSearchModal}
-        nameSearch={!id ? searchText : undefined}
-        onSelectValues={(ids: number[]) => {
-          setShowSearchModal(false);
-          fetchNameAndUpdate(ids[0]);
-          searchButtonTappedRef.current = false;
-          inputTextRef.current = undefined;
-        }}
-        onCloseModal={() => {
-          setShowSearchModal(false);
-          searchButtonTappedRef.current = false;
-        }}
-      />
-      <FormModal
-        model={relation}
-        parentContext={{ ...getContext?.(), ...context }}
-        id={value && value[0]}
-        visible={showFormModal}
-        onSubmitSucceed={(id?: number) => {
-          setShowFormModal(false);
-          fetchNameAndUpdate(id!);
-        }}
-        onCancel={() => {
-          setShowFormModal(false);
-        }}
-        mustClearAfterSave={true}
-        readOnly={readOnly}
-      />
-    </Row>
-  );
-};
-
-const RequiredInput = styled(Input)`
-  .ant-input {
-    background-color: ${mapToken.colorPrimaryBg};
-  }
-`;

package/src/widgets/base/many2one/Many2oneSuffix.tsx

@@ -1,232 +0,0 @@
-import React, { useContext, useState, useEffect } from "react";
-import {
-  RightCircleOutlined,
-  PrinterOutlined,
-  ThunderboltOutlined,
-  EnterOutlined,
-} from "@ant-design/icons";
-import { Menu, Dropdown, Spin } from "antd";
-import {
-  TabManagerContext,
-  TabManagerContextType,
-} from "@/context/TabManagerContext";
-import { FormView } from "@/types";
-import { Many2oneSuffixModal } from "./Many2oneSuffixModal";
-import {
-  ContentRootContext,
-  ContentRootContextType,
-} from "@/context/ContentRootContext";
-import ConnectionProvider from "@/ConnectionProvider";
-import { processValues } from "@/helpers/formHelper";
-import showErrorDialog from "@/ui/ActionErrorDialog";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { parseContextFields, parseDomainFields } from "@gisce/ooui";
-
-type Props = {
-  id: number;
-  model: string;
-  context?: any;
-};
-
-export const Many2oneSuffix = (props: Props) => {
-  const { id, model, context = {} } = props;
-  const [actionModalVisible, setActionModalVisible] = useState<boolean>(false);
-  const [printModalVisible, setPrintModalVisible] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [formView, setFormView] = useState<FormView>();
-  const [targetValues, setTargetValues] = useState<any>();
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  const tabManagerContext = useContext(
-    TabManagerContext,
-  ) as TabManagerContextType;
-  const { openRelate } = tabManagerContext || {};
-
-  const contentRootContext = useContext(
-    ContentRootContext,
-  ) as ContentRootContextType;
-  const { processAction } = contentRootContext || {};
-
-  if (!id) {
-    return null;
-  }
-
-  async function fetchData() {
-    setIsLoading(true);
-
-    try {
-      const formView = (await ConnectionProvider.getHandler().getView({
-        model,
-        type: "form",
-        context,
-      })) as FormView;
-      setFormView(formView);
-      let fields: string[] = [];
-      const { toolbar } = formView;
-      toolbar.action
-        ?.filter((item: any) => item.hasOwnProperty("context"))
-        .map((item: any) => fields.push(...parseContextFields(item.context)));
-      toolbar.action
-        ?.filter((item: any) => item.hasOwnProperty("domain"))
-        .map((item: any) => fields.push(...parseDomainFields(item.domain)));
-      toolbar.relate
-        ?.filter((item: any) => item.hasOwnProperty("context"))
-        .map((item: any) => fields.push(...parseContextFields(item.context)));
-      toolbar.relate
-        ?.filter((item: any) => item.hasOwnProperty("domain"))
-        .map((item: any) => fields.push(...parseDomainFields(item.domain)));
-      toolbar.print
-        ?.filter((item: any) => item.hasOwnProperty("context"))
-        .map((item: any) => fields.push(...parseContextFields(item.context)));
-      fields = fields.filter(
-        (i) => Object.keys(formView.fields).indexOf(i) > -1,
-      );
-
-      let values = {};
-
-      if (fields.length > 0) {
-        values = (
-          await ConnectionProvider.getHandler().readObjects({
-            model,
-            ids: [id],
-            fieldsToRetrieve: fields,
-            context,
-          })
-        )[0];
-      }
-      values = { ...processValues(values, fields), active_id: id };
-      setTargetValues(values);
-
-      setIsLoading(false);
-    } catch (err) {
-      setIsLoading(false);
-      showErrorDialog(err);
-    }
-  }
-
-  function menu() {
-    if (isLoading) {
-      return (
-        <Menu>
-          <div style={{ padding: 15 }}>
-            <Spin />
-          </div>
-        </Menu>
-      );
-    }
-
-    if (!formView || !formView.toolbar) {
-      return <Menu />;
-    }
-
-    const relateItems = formView?.toolbar?.relate.map((item: any) => {
-      return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
-    });
-
-    return (
-      <Menu onClick={handleMenuClick}>
-        {[
-          <Menu.Item
-            key="action"
-            disabled={
-              !formView!.toolbar.action || formView!.toolbar.action.length === 0
-            }
-            icon={<ThunderboltOutlined />}
-          >
-            {t("action")}
-          </Menu.Item>,
-          <Menu.Item
-            key="print"
-            disabled={
-              !formView!.toolbar.print || formView!.toolbar.print.length === 0
-            }
-            icon={<PrinterOutlined />}
-          >
-            {t("report")}
-          </Menu.Item>,
-          <Menu.Divider />,
-          <Menu.ItemGroup
-            title={
-              <>
-                <EnterOutlined /> <span> {t("related")}</span>
-              </>
-            }
-          >
-            {relateItems}
-          </Menu.ItemGroup>,
-        ]}
-      </Menu>
-    );
-  }
-
-  function handleMenuClick(event: any) {
-    if (event.key === "action") {
-      setActionModalVisible(true);
-    } else if (event.key === "print") {
-      setPrintModalVisible(true);
-    } else {
-      const relateItemClicked = formView!.toolbar.relate.find((item: any) => {
-        return item.id === parseInt(event.key);
-      });
-      if (!relateItemClicked) {
-        return;
-      }
-
-      openRelate({
-        relateData: relateItemClicked,
-        values: targetValues,
-        fields: formView!.fields,
-        action_id: relateItemClicked.id,
-        action_type: relateItemClicked.type,
-      });
-    }
-  }
-
-  function onActionItemClicked(actionData: any) {
-    setActionModalVisible(false);
-    processAction?.({
-      actionData,
-      values: targetValues,
-      fields: formView!.fields,
-      context: { active_id: id, active_ids: [id] },
-    });
-  }
-
-  function onPrintItemClicked(reportData: any) {
-    setPrintModalVisible(false);
-    processAction?.({
-      actionData: {
-        ...reportData,
-        datas: { ...(reportData.datas || {}), ids: [id] },
-      },
-      values: targetValues,
-      fields: formView!.fields,
-    });
-  }
-
-  return (
-    <>
-      <Dropdown overlay={menu()} trigger={["click"]}>
-        <RightCircleOutlined
-          style={{ color: "rgba(0,0,0,.45)" }}
-          onClick={(e) => {
-            e.preventDefault();
-            fetchData();
-          }}
-        />
-      </Dropdown>
-      <Many2oneSuffixModal
-        visible={actionModalVisible}
-        items={formView?.toolbar?.action}
-        onItemClicked={onActionItemClicked}
-        onCancel={() => setActionModalVisible(false)}
-      />
-      <Many2oneSuffixModal
-        visible={printModalVisible}
-        items={formView?.toolbar?.print}
-        onItemClicked={onPrintItemClicked}
-        onCancel={() => setPrintModalVisible(false)}
-      />
-    </>
-  );
-};

package/src/widgets/base/many2one/Many2oneSuffixModal.tsx

@@ -1,42 +0,0 @@
-import React, { useContext } from "react";
-import { Modal, Button, Space } from "antd";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-type Props = {
-  visible: boolean;
-  items: any[];
-  onItemClicked: (item: any) => void;
-  onCancel: () => void;
-};
-
-export const Many2oneSuffixModal = (props: Props) => {
-  const { visible, onCancel, items = [], onItemClicked } = props;
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  return (
-    <Modal
-      title={t("selectAction")}
-      centered
-      open={visible}
-      footer={null}
-      destroyOnClose
-      onCancel={onCancel}
-      maskClosable={false}
-    >
-      <Space direction="vertical" className="w-full">
-        {items.map((item) => {
-          return (
-            <Button
-              className="w-full"
-              onClick={() => {
-                onItemClicked(item);
-              }}
-            >
-              {item.name}
-            </Button>
-          );
-        })}
-      </Space>
-    </Modal>
-  );
-};

package/src/widgets/base/many2one/Many2oneTree.tsx

@@ -1,18 +0,0 @@
-import { Space } from "antd";
-import React from "react";
-import { Many2oneSuffix } from "./Many2oneSuffix";
-
-export type Many2oneTreeProps = { m2oField: any };
-
-export const Many2oneTree = (props: Many2oneTreeProps): React.ReactElement => {
-  const { m2oField } = props;
-  if (!m2oField) {
-    return <></>;
-  }
-  return (
-    <Space>
-      <>{m2oField.value}</>
-      <Many2oneSuffix id={m2oField.id} model={m2oField.model} />
-    </Space>
-  );
-};