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

package/src/actionbar/TreeActionBar.tsx

@@ -1,376 +0,0 @@
-import React, { useContext, useState } from "react";
-import { Space, Spin } from "antd";
-import ChangeViewButton from "./ChangeViewButton";
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
-import NewButton from "./NewButton";
-import ActionButton from "./ActionButton";
-import Icon, {
-  DeleteOutlined,
-  PrinterOutlined,
-  ThunderboltOutlined,
-  CopyOutlined,
-  ReloadOutlined,
-  InfoCircleOutlined,
-  FilterOutlined,
-} from "@ant-design/icons";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import showConfirmDialog from "@/ui/ConfirmDialog";
-import ConnectionProvider from "@/ConnectionProvider";
-import showErrorDialog from "@/ui/ActionErrorDialog";
-import DropdownButton from "./DropdownButton";
-import {
-  ContentRootContext,
-  ContentRootContextType,
-} from "@/context/ContentRootContext";
-import ButtonWithBadge from "./ButtonWithBadge";
-import { showLogInfo } from "@/helpers/logInfoHelper";
-import SearchBar from "./SearchBar";
-import { ExportModal } from "..";
-import { mergeParams } from "@/helpers/searchHelper";
-import { ConfigContext } from "@/context/ConfigContext";
-
-type Props = {
-  parentContext?: any;
-  treeExpandable: boolean;
-  toolbar: any;
-};
-
-function TreeActionBar(props: Props) {
-  const {
-    availableViews,
-    currentView,
-    setCurrentView,
-    selectedRowItems,
-    setRemovingItem,
-    removingItem,
-    duplicatingItem,
-    setDuplicatingItem,
-    currentModel,
-    searchTreeRef,
-    setCurrentId,
-    setCurrentItemIndex,
-    searchParams,
-    searchVisible,
-    setSearchVisible,
-    setSearchTreeNameSearch,
-    searchTreeNameSearch,
-    treeIsLoading,
-    setPreviousView,
-    previousView,
-    results,
-    limit,
-    totalItems,
-  } = useContext(ActionViewContext) as ActionViewContextType;
-
-  const { parentContext = {}, treeExpandable, toolbar } = props;
-  const { previewFeatures } = useContext(ConfigContext);
-  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
-  const contentRootContext = useContext(
-    ContentRootContext
-  ) as ContentRootContextType;
-  const { processAction } = contentRootContext || {};
-  const [exportModalVisible, setExportModalVisible] = useState(false);
-
-  const hasNameSearch: boolean =
-    searchTreeNameSearch !== undefined &&
-    searchTreeNameSearch.trim().length > 0;
-
-  function tryDelete() {
-    showConfirmDialog({
-      confirmMessage: t("confirmRemove"),
-      lang,
-      onOk: () => {
-        remove();
-      },
-    });
-  }
-
-  async function remove() {
-    try {
-      setRemovingItem?.(true);
-
-      await ConnectionProvider.getHandler().deleteObjects({
-        model: currentModel!,
-        ids: selectedRowItems!.map((item) => item.id),
-      });
-
-      setCurrentId?.(undefined);
-      setCurrentItemIndex?.(undefined);
-
-      searchTreeRef?.current?.refreshResults();
-    } catch (e) {
-      showErrorDialog(e);
-    } finally {
-      setRemovingItem?.(false);
-    }
-  }
-
-  async function duplicate() {
-    try {
-      setDuplicatingItem?.(true);
-
-      const currentId = selectedRowItems![0].id;
-
-      const newId = await ConnectionProvider.getHandler().duplicate({
-        id: currentId,
-        model: currentModel!,
-        context: { ...parentContext },
-      });
-
-      if (newId) {
-        searchTreeRef?.current?.refreshResults();
-      }
-    } catch (e) {
-      showErrorDialog(e);
-    } finally {
-      setDuplicatingItem?.(false);
-    }
-  }
-
-  function runAction(actionData: any) {
-    processAction?.({
-      actionData,
-      values: {
-        active_id: selectedRowItems?.map((item) => item.id)[0],
-        active_ids: selectedRowItems?.map((item) => item.id),
-      },
-      fields: {},
-      context: {
-        ...parentContext,
-        active_id: selectedRowItems?.map((item) => item.id)[0],
-        active_ids: selectedRowItems?.map((item) => item.id),
-      },
-      onRefreshParentValues: () => {
-        searchTreeRef?.current?.refreshResults();
-      },
-    });
-  }
-
-  return (
-    <Space wrap={true}>
-      {treeIsLoading && (
-        <>
-          <Spin />
-          {separator()}
-          {separator()}
-        </>
-      )}
-      {treeExpandable ? null : (
-        <>
-          <SearchBar
-            disabled={duplicatingItem || removingItem || treeIsLoading}
-            searchText={searchTreeNameSearch}
-            onSearch={(searchString?: string) => {
-              if (searchString && searchString.trim().length > 0) {
-                setSearchTreeNameSearch?.(searchString);
-              } else {
-                setSearchTreeNameSearch?.(undefined);
-              }
-            }}
-          />
-          {!treeExpandable && (
-            <ButtonWithBadge
-              icon={
-                <FilterOutlined
-                  style={{ color: searchVisible ? "white" : undefined }}
-                />
-              }
-              tooltip={t("advanced_search")}
-              type={searchVisible ? "primary" : "default"}
-              onClick={() => {
-                setSearchVisible?.(!searchVisible);
-              }}
-              disabled={duplicatingItem || removingItem || treeIsLoading}
-              badgeNumber={searchParams?.length}
-            />
-          )}
-          {separator()}
-          <NewButton disabled={treeIsLoading} />
-          <ActionButton
-            icon={<CopyOutlined />}
-            tooltip={t("duplicate")}
-            disabled={
-              !selectedRowItems ||
-              selectedRowItems?.length !== 1 ||
-              duplicatingItem ||
-              treeIsLoading
-            }
-            loading={duplicatingItem}
-            onClick={duplicate}
-          />
-          <ActionButton
-            icon={<DeleteOutlined />}
-            tooltip={t("delete")}
-            disabled={
-              !(selectedRowItems && selectedRowItems?.length > 0) ||
-              treeIsLoading
-            }
-            loading={removingItem}
-            onClick={tryDelete}
-          />
-          {separator()}
-        </>
-      )}
-      <ActionButton
-        icon={<InfoCircleOutlined />}
-        tooltip={t("showLogs")}
-        disabled={
-          !(selectedRowItems && selectedRowItems?.length > 0) || treeIsLoading
-        }
-        loading={false}
-        onClick={() => {
-          showLogInfo(currentModel!, selectedRowItems![0].id, t);
-        }}
-      />
-      <ActionButton
-        icon={<ReloadOutlined />}
-        tooltip={t("refresh")}
-        disabled={duplicatingItem || removingItem || treeIsLoading}
-        loading={false}
-        onClick={() => {
-          searchTreeRef?.current?.refreshResults();
-        }}
-      />
-      {!treeExpandable && (
-        <>
-          {separator()}
-          <ChangeViewButton
-            currentView={currentView}
-            availableViews={availableViews}
-            onChangeView={(newView) => {
-              setPreviousView?.(currentView);
-              setCurrentView?.(newView);
-            }}
-            previousView={previousView}
-            disabled={treeIsLoading}
-          />
-        </>
-      )}
-      {separator()}
-      <DropdownButton
-        icon={<ThunderboltOutlined />}
-        disabled={
-          !(selectedRowItems && selectedRowItems?.length > 0) || treeIsLoading
-        }
-        tooltip={t("actions")}
-        items={toolbar?.action}
-        onItemClick={(action: any) => {
-          if (!action) {
-            return;
-          }
-
-          runAction(action);
-        }}
-      />
-      <DropdownButton
-        icon={<PrinterOutlined />}
-        disabled={
-          !(selectedRowItems && selectedRowItems?.length > 0) || treeIsLoading
-        }
-        tooltip={t("reports")}
-        items={toolbar?.print}
-        onItemClick={(report: any) => {
-          if (!report) {
-            return;
-          }
-
-          runAction({
-            ...report,
-            datas: {
-              ...(report.datas || {}),
-              ids: selectedRowItems!.map((item) => item.id),
-            },
-          });
-        }}
-      />
-
-      {separator()}
-      <DropdownButton
-        icon={
-          <Icon
-            component={() => (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="icon icon-tabler icon-tabler-database-export"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-                strokeWidth="1.5"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <ellipse cx="12" cy="6" rx="8" ry="3" />
-                <path d="M4 6v6c0 1.657 3.582 3 8 3a19.84 19.84 0 0 0 3.302 -.267m4.698 -2.733v-6" />
-                <path d="M4 12v6c0 1.599 3.335 2.905 7.538 2.995m8.462 -6.995v-2m-6 7h7m-3 -3l3 3l-3 3" />
-              </svg>
-            )}
-          />
-        }
-        tooltip={t("export")}
-        items={[
-          {
-            id: "print_screen",
-            name: t("printScreen"),
-          },
-          {
-            id: "export",
-            name: t("advancedExport"),
-          },
-        ]}
-        onItemClick={(itemClicked: any) => {
-          if (itemClicked.id === "print_screen") {
-            let idsToExport = selectedRowItems?.map((item) => item.id) || [];
-
-            if (idsToExport.length === 0) {
-              idsToExport = results?.map((item) => item.id) || [];
-            }
-
-            runAction({
-              id: -1,
-              model: currentModel,
-              report_name: "printscreen.list",
-              type: "ir.actions.report.xml",
-              datas: {
-                model: currentModel,
-                ids: idsToExport,
-              },
-            });
-            return;
-          }
-
-          setExportModalVisible(true);
-        }}
-        disabled={
-          duplicatingItem || removingItem || treeIsLoading || hasNameSearch
-        }
-      />
-      <ExportModal
-        visible={exportModalVisible}
-        locale={lang}
-        onClose={() => setExportModalVisible(false)}
-        model={currentModel!}
-        domain={mergeParams(
-          searchTreeRef?.current?.getDomain() || [],
-          searchParams || []
-        )}
-        limit={limit}
-        totalRegisters={totalItems || 0}
-        selectedRegistersToExport={selectedRowItems}
-        visibleRegisters={results?.length || 0}
-        context={parentContext}
-      />
-    </Space>
-  );
-}
-
-function separator() {
-  return <div className="inline-block w-2" />;
-}
-
-export default TreeActionBar;

package/src/common/ButtonWithTooltip.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { Button, Tooltip, ButtonProps } from "antd";
-
-export type Props = ButtonProps & {
-  tooltip: string;
-};
-
-function ButtonWithTooltip(props: Props) {
-  const { tooltip, ...restProps } = props;
-
-  return (
-    <Tooltip title={tooltip}>
-      <Button {...restProps} />
-    </Tooltip>
-  );
-}
-
-export default ButtonWithTooltip;

package/src/common/DatePicker.tsx

@@ -1,99 +0,0 @@
-import { DatePicker as AntDatePicker, theme } from "antd";
-
-import React from "react";
-import Field from "@/common/Field";
-import { WidgetProps } from "@/types";
-import { Date as DateOoui } from "@gisce/ooui";
-import dayjs from "dayjs";
-const { useToken } = theme;
-import weekday from "dayjs/plugin/weekday";
-import localeData from "dayjs/plugin/localeData";
-dayjs.extend(weekday);
-dayjs.extend(localeData);
-
-type DatePickerProps = WidgetProps & {
-  showTime?: boolean;
-};
-
-export const DatePickerConfig = {
-  date: {
-    placeholder: "__/__/____",
-    dateDisplayFormat: "DD/MM/YYYY",
-    dateInternalFormat: "YYYY-MM-DD",
-  },
-  time: {
-    placeholder: "__/__/____ __:__:__",
-    dateDisplayFormat: "DD/MM/YYYY HH:mm:ss",
-    dateInternalFormat: "YYYY-MM-DD HH:mm:ss",
-  },
-};
-
-const DatePicker = (props: DatePickerProps) => {
-  const { ooui, showTime = false } = props;
-  const { required } = ooui;
-
-  return (
-    <Field required={required} {...props}>
-      <DatePickerInput ooui={ooui} showTime={showTime} />
-    </Field>
-  );
-};
-
-interface DatePickerInputProps {
-  ooui: DateOoui;
-  value?: undefined | string;
-  onChange?: (value: undefined | string) => void;
-  showTime?: boolean;
-}
-
-const DatePickerInput: React.FC<DatePickerInputProps> = (
-  props: DatePickerInputProps
-) => {
-  const { value, onChange, ooui, showTime } = props;
-  const { id, readOnly, required } = ooui as DateOoui;
-  const { token } = useToken();
-
-  const requiredStyle =
-    required && !readOnly
-      ? { backgroundColor: token.colorPrimaryBg }
-      : undefined;
-
-  const mode = showTime ? "time" : "date";
-
-  const triggerChange = (changedValue: undefined | string) => {
-    onChange?.(changedValue);
-  };
-
-  const onValueStringChange = (momentDate: any) => {
-    if (momentDate === null) {
-      triggerChange(undefined);
-      return;
-    }
-
-    triggerChange(momentDate.format(DatePickerConfig[mode].dateInternalFormat));
-  };
-
-  const dateValue = value
-    ? dayjs(value, DatePickerConfig[mode].dateInternalFormat)
-    : undefined;
-
-  return (
-    <AntDatePicker
-      style={{ width: "100%", ...requiredStyle }}
-      placeholder={
-        showTime
-          ? DatePickerConfig.time.placeholder
-          : DatePickerConfig.date.placeholder
-      }
-      disabled={readOnly}
-      id={id}
-      picker={"date"}
-      showTime={showTime}
-      format={DatePickerConfig[mode].dateDisplayFormat}
-      value={dateValue}
-      onChange={onValueStringChange}
-    />
-  );
-};
-
-export default DatePicker;

package/src/common/Field.tsx

@@ -1,92 +0,0 @@
-import React, { useContext } from "react";
-import { Form, Row, Col } from "antd";
-import { Field as FieldOoui, Label as LabelOoui } from "@gisce/ooui";
-import Label from "@/widgets/base/Label";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-export default function Field({
-  ooui,
-  children,
-  layout = "horizontal",
-  valuePropName,
-  showLabel = false,
-  alignLabel = "left",
-  required = false,
-  type,
-  validator,
-}: {
-  ooui: FieldOoui;
-  children?: React.ReactNode;
-  layout?: "horizontal" | "vertical";
-  valuePropName?: string;
-  showLabel?: boolean;
-  alignLabel?: "left" | "center" | "right";
-  required?: boolean;
-  type?: any;
-  validator?: any;
-}) {
-  const { id, label, tooltip } = ooui;
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  const rules = required
-    ? [
-        {
-          required: true,
-          message: t("fillRequiredField"),
-          type,
-          validator,
-        },
-      ]
-    : undefined;
-
-  const formItem = () => (
-    <Form.Item
-      className="mb-0"
-      name={id}
-      valuePropName={valuePropName}
-      rules={rules}
-    >
-      {children}
-    </Form.Item>
-  );
-
-  if (!showLabel) {
-    return formItem();
-  }
-
-  const labelWidget = (
-    <Label
-      ooui={
-        new LabelOoui({
-          name: id + "_label",
-          string: label,
-          help: tooltip,
-          fieldForLabel: id,
-        })
-      }
-      align={alignLabel}
-    />
-  );
-
-  const horizontalMode = () => {
-    return (
-      <Row align="middle" className="pb-1 pt-1">
-        <Col className="ml-2" flex="7rem">
-          <div className="flex flex-col items-end">{labelWidget}</div>
-        </Col>
-        <Col flex="auto">{formItem()}</Col>
-      </Row>
-    );
-  };
-
-  const verticalMode = () => {
-    return (
-      <>
-        {labelWidget}
-        {formItem()}
-      </>
-    );
-  };
-
-  return layout === "horizontal" ? horizontalMode() : verticalMode();
-}