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

package/src/actionbar/TreeActionBar.tsx

@@ -1,383 +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 { ErpFeatureKeys, useFeatureIsEnabled } 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 advancedExportEnabled = useFeatureIsEnabled(
-    ErpFeatureKeys.FEATURE_ADVANCED_EXPORT,
-  );
-  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),
-        context: { ...parentContext },
-      });
-
-      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),
-            },
-          });
-        }}
-      />
-      {advancedExportEnabled && (
-        <>
-          {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,98 +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 "@/helpers/dayjs";
-const { useToken } = theme;
-
-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}
-      showNow={false}
-      showToday={false}
-      changeOnBlur={true}
-    />
-  );
-};
-
-export default DatePicker;

package/src/common/Field.tsx

@@ -1,93 +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}
-      help={ooui.tooltipInline ? ooui.tooltip : null}
-    >
-      {children}
-    </Form.Item>
-  );
-
-  if (!showLabel) {
-    return formItem();
-  }
-
-  const labelWidget = (
-    <Label
-      ooui={
-        new LabelOoui({
-          name: id + "_label",
-          string: label,
-          help: ooui.tooltipInline ? false : 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();
-}

package/src/common/SelectAllRecordsRow.tsx

@@ -1,94 +0,0 @@
-import styled from "styled-components";
-import React, { useContext, useState } from "react";
-import { Spin } from "antd";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import Link from "antd/es/typography/Link";
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const SelectAllRecordsRow = ({
-  numberOfVisibleSelectedRows,
-  totalRecords,
-  numberOfTotalRows,
-  onSelectAllRecords,
-  numberOfRealSelectedRows,
-}: {
-  numberOfVisibleSelectedRows: number;
-  totalRecords: number;
-  numberOfTotalRows: number;
-  numberOfRealSelectedRows: number;
-  onSelectAllRecords: () => Promise<void>;
-}) => {
-  const [loading, setLoading] = useState(false);
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  const translations = {
-    recordsSelected: t("recordsSelected"),
-    selectAllRecords: t("selectAllRecords"),
-    allRecordsSelected: t("allRecordsSelected"),
-  };
-
-  if (numberOfTotalRows === 0) {
-    return null;
-  }
-
-  if (
-    numberOfVisibleSelectedRows < numberOfTotalRows &&
-    numberOfRealSelectedRows <= numberOfTotalRows
-  ) {
-    return null;
-  }
-
-  if (totalRecords === numberOfVisibleSelectedRows) {
-    return null;
-  }
-
-  const handleClick = async (event: any) => {
-    event.preventDefault(); // prevent the default action (navigation) from happening
-    event.stopPropagation();
-    setLoading(true);
-    await onSelectAllRecords();
-    setLoading(false);
-  };
-
-  const selectRowsComponent = (
-    <span>
-      {translations.recordsSelected.replace(
-        "{numberOfSelectedRows}",
-        numberOfVisibleSelectedRows.toString(),
-      ) + " "}
-
-      {loading ? (
-        <Spin />
-      ) : (
-        <Link onClick={handleClick} style={{ fontWeight: 600 }}>
-          {translations.selectAllRecords.replace(
-            "{totalRecords}",
-            totalRecords.toString(),
-          )}
-        </Link>
-      )}
-    </span>
-  );
-
-  const allRowsAreSelected = (
-    <span style={{ fontWeight: 600 }}>
-      {translations.allRecordsSelected.replace(
-        "{totalRecords}",
-        numberOfRealSelectedRows.toString(),
-      ) + " "}
-    </span>
-  );
-
-  return (
-    <Container>
-      {numberOfRealSelectedRows > numberOfTotalRows
-        ? allRowsAreSelected
-        : selectRowsComponent}
-    </Container>
-  );
-};