@gisce/react-ooui 0.1.0

package/src/actionbar/AttachmentsButton.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { getMimeType, openBase64InNewTab } from "@/helpers/filesHelper";
+import ConnectionProvider from "@/ConnectionProvider";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import showErrorDialog from "@/ui/ActionErrorDialog";
+import {
+  Attachment,
+  AttachmentsButtonWrapper,
+} from "./AttachmentsButtonWrapper";
+import { Modal, Spin } from "antd";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+export type AttachmentsButtonProps = {
+  attachments?: any;
+  disabled?: boolean;
+  onAddNewAttachment: () => void;
+  onViewAttachmentDetails: (attachment: Attachment) => void;
+};
+
+function AttachmentsButton(props: AttachmentsButtonProps) {
+  const {
+    attachments,
+    disabled = false,
+    onAddNewAttachment,
+    onViewAttachmentDetails,
+  } = props;
+  const { formRef } = useContext(ActionViewContext) as ActionViewContextType;
+  const [preloading, setPreloading] = useState(false);
+  const [preloadedAttachments, setPreloadedAttachments] = useState<
+    Attachment[]
+  >([]);
+  const [downloading, setDownloading] = useState(false);
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  const preloadAttachments = useCallback(async () => {
+    setPreloading(true);
+    try {
+      const results = await ConnectionProvider.getHandler().readObjects({
+        model: "ir.attachment",
+        ids: attachments.map((a: any) => a.id),
+        fieldsToRetrieve: ["name", "datas_fname", "link"],
+        context: (formRef.current as any).getContext(),
+      });
+      setPreloadedAttachments(
+        results.map((r: any) => ({
+          id: r.id,
+          name: r.name,
+          datas_fname: r.datas_fname,
+          link: r.link,
+        }))
+      );
+    } catch (error) {
+      showErrorDialog(error as any);
+    }
+    setPreloading(false);
+  }, attachments);
+
+  const openAttachmentLink = useCallback(async (attachment: any) => {
+    if (attachment.link) {
+      window.open(attachment.link);
+      return;
+    }
+
+    setDownloading(true);
+
+    let retrievedAttachment;
+
+    try {
+      const results = await ConnectionProvider.getHandler().readObjects({
+        model: "ir.attachment",
+        ids: [attachment.id],
+        context: (formRef.current as any).getContext(),
+      });
+      retrievedAttachment = results[0];
+    } catch (error) {
+      showErrorDialog(error as any);
+    }
+
+    setDownloading(false);
+
+    if (!retrievedAttachment) {
+      return;
+    }
+
+    if (retrievedAttachment.datas) {
+      const fileType: any = await getMimeType(retrievedAttachment.datas);
+      openBase64InNewTab(retrievedAttachment.datas, fileType.mime);
+    } else {
+      onViewAttachmentDetails(retrievedAttachment);
+    }
+  }, []);
+
+  const openAttachmentDetail = useCallback(async (attachment: any) => {
+    onViewAttachmentDetails(attachment);
+  }, []);
+
+  useEffect(() => {
+    preloadAttachments();
+  }, [preloadAttachments]);
+
+  return (
+    <>
+      <AttachmentsButtonWrapper
+        numberOfAttachments={attachments.length}
+        attachments={preloadedAttachments}
+        disabled={disabled}
+        loading={preloading}
+        onAddNewAttachment={onAddNewAttachment}
+        onopenAttachmentLink={openAttachmentLink}
+        onOpenAttachmentDetail={openAttachmentDetail}
+      />
+      <Modal
+        title={t("downloadingAttachment")}
+        visible={downloading}
+        footer={null}
+        closable={false}
+        centered
+      >
+        <Spin />
+      </Modal>
+    </>
+  );
+}
+
+export default AttachmentsButton;

package/src/actionbar/AttachmentsButtonWrapper.tsx

@@ -0,0 +1,139 @@
+import React, { useContext, useState } from "react";
+import {
+  DownOutlined,
+  FormOutlined,
+  DownloadOutlined,
+  LinkOutlined,
+} from "@ant-design/icons";
+import { Popover, Button, Row, Col, Tooltip, Spin } from "antd";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+export type Attachment = {
+  id: number;
+  name: string;
+  datas: string;
+  link: string;
+};
+
+export type AttachmentsButtonWrapperProps = {
+  attachments: Attachment[] | undefined;
+  numberOfAttachments: number;
+  disabled: boolean;
+  loading: boolean;
+  onAddNewAttachment: () => void;
+  onopenAttachmentLink: (attachment: Attachment) => void;
+  onOpenAttachmentDetail: (attachment: Attachment) => void;
+};
+
+export const AttachmentsButtonWrapper = (
+  props: AttachmentsButtonWrapperProps
+) => {
+  const { numberOfAttachments, disabled } = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  const [popoverVisible, setPopoverVisible] = useState<boolean>(false);
+
+  const button = (
+    <Button disabled={disabled}>
+      <LinkOutlined />
+      {`(${numberOfAttachments})`}
+      <DownOutlined style={{ fontSize: 12 }} />
+    </Button>
+  );
+
+  if (disabled) {
+    return button;
+  }
+
+  return (
+    <Popover
+      onVisibleChange={(visible: boolean) => setPopoverVisible(visible)}
+      visible={popoverVisible}
+      placement="bottom"
+      content={Content(props, setPopoverVisible)}
+      title={t("attachments")}
+      arrowContent={null}
+    >
+      {button}
+    </Popover>
+  );
+};
+
+const Content = (
+  props: AttachmentsButtonWrapperProps,
+  setPopoverVisible: (visible: boolean) => void
+) => {
+  const {
+    attachments = [],
+    loading,
+    onAddNewAttachment,
+    onopenAttachmentLink,
+    onOpenAttachmentDetail,
+  } = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  if (loading) {
+    return <Spin style={{ padding: 20 }} />;
+  }
+
+  return (
+    <>
+      <a
+        href="#"
+        onClick={() => {
+          setPopoverVisible(false);
+          onAddNewAttachment();
+        }}
+      >
+        {t("addNewAttachment")}
+      </a>
+      {attachments.length > 0 && (
+        <>
+          <li className=" ant-dropdown-menu-item-divider"></li>
+          {attachments.map((attachment: any) => {
+            const Icon = attachment.link ? LinkOutlined : DownloadOutlined;
+            return (
+              <Row
+                style={{ paddingTop: 4, paddingBottom: 4 }}
+                wrap={false}
+                align="middle"
+                key={attachment.id}
+              >
+                <Col flex="auto">{attachment.name}</Col>
+                <Col flex="25px" style={{ textAlign: "center" }}>
+                  {(attachment.datas_fname || attachment.link) && (
+                    <Tooltip
+                      title={
+                        attachment.link
+                          ? t("openAttachmentLink")
+                          : t("download")
+                      }
+                    >
+                      <Icon
+                        style={{ cursor: "pointer" }}
+                        onClick={() => {
+                          setPopoverVisible(false);
+                          onopenAttachmentLink(attachment);
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+                </Col>
+                <Col flex="25px" style={{ textAlign: "center" }}>
+                  <Tooltip title={t("openAttachment")}>
+                    <FormOutlined
+                      style={{ cursor: "pointer" }}
+                      onClick={() => {
+                        setPopoverVisible(false);
+                        onOpenAttachmentDetail(attachment);
+                      }}
+                    />
+                  </Tooltip>
+                </Col>
+              </Row>
+            );
+          })}
+        </>
+      )}
+    </>
+  );
+};

package/src/actionbar/ButtonWithBadge.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import ButtonWithTooltip, {Props as ButtonWithTooltipProps } from "@/common/ButtonWithTooltip";
+
+type Props = ButtonWithTooltipProps & {
+  badgeNumber?: number;
+};
+
+function ButtonWithBadge(props: Props) {
+  const { badgeNumber = 0, ...restProps } = props;
+
+  return (
+    <div style={{ position: "relative" }}>
+      {badgeNumber > 0 && (
+        <div style={{ position: "absolute", left: -10, top: -10, zIndex: 2 }}>
+          <span
+            style={{
+              display: "inline-block",
+              minWidth: "22px",
+              padding: "2px",
+              borderRadius: "50%",
+              fontSize: "12px",
+              textAlign: "center",
+              background: "#1890FF",
+              color: "#fefefe",
+            }}
+          >
+            {badgeNumber}
+          </span>
+        </div>
+      )}
+      <ButtonWithTooltip
+        {...restProps}
+        style={{ width: 46, zIndex: 0 }}
+      ></ButtonWithTooltip>
+    </div>
+  );
+}
+
+export default ButtonWithBadge;

package/src/actionbar/ChangeViewButton.tsx

@@ -0,0 +1,136 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Menu, Dropdown, Row, Col, Button } from "antd";
+import {
+  DownOutlined,
+  TableOutlined,
+  FormOutlined,
+  CheckOutlined,
+} from "@ant-design/icons";
+import { ViewType } from "@/types";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import showUnsavedChangesDialog from "@/ui/UnsavedChangesDialog";
+import ButtonWithTooltip from "@/common/ButtonWithTooltip";
+import { View } from "@/views/ActionView";
+
+type Props = {
+  onChangeView: (view: View) => void;
+  currentView: View;
+  availableViews: View[];
+  disabled?: boolean;
+  formHasChanges?: boolean;
+};
+
+function getIconForView(view?: View) {
+  if (!view) {
+    return null;
+  }
+
+  if (view.type === "tree") {
+    return <TableOutlined />;
+  } else {
+    // if (view === "form") {
+    return <FormOutlined />;
+  }
+}
+
+function ChangeViewButton(props: Props) {
+  const {
+    currentView,
+    availableViews,
+    onChangeView,
+    disabled = false,
+    formHasChanges = false,
+  } = props;
+  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
+
+  const [previousView, setPreviousView] = useState<View>();
+
+  useEffect(() => {
+    if (availableViews.length === 1) {
+      setPreviousView(availableViews[0]);
+    } else {
+      setPreviousView(
+        availableViews.filter((view) => view.id !== currentView.id)[0]
+      );
+    }
+  }, [availableViews]);
+
+  function getMenu() {
+    const menuItems = availableViews.map((view) => {
+      return (
+        <Menu.Item key={view.id}>
+          <Row wrap={false}>
+            <Col flex="none" style={{ paddingRight: 20 }}>
+              <CheckOutlined
+                style={{ opacity: currentView === view ? 1 : 0 }}
+              />
+            </Col>
+
+            <Col flex="auto" style={{ paddingRight: 20 }}>
+              {view.type.charAt(0).toUpperCase() + view.type.slice(1)}
+            </Col>
+            <Col flex="none">{getIconForView(view)}</Col>
+          </Row>
+        </Menu.Item>
+      );
+    });
+
+    return (
+      <Menu onClick={handleMenuClick}>
+        <Menu.ItemGroup title={t("viewAs")}>{menuItems}</Menu.ItemGroup>
+      </Menu>
+    );
+  }
+
+  function tryNavigate(callback: any) {
+    if (formHasChanges) {
+      showUnsavedChangesDialog({
+        lang,
+        onOk: () => {
+          callback();
+        },
+      });
+      return;
+    }
+
+    callback();
+  }
+
+  function handleMenuClick(event: any) {
+    tryNavigate(() => {
+      setPreviousView(currentView);
+      const selectedView = event.key;
+      onChangeView(selectedView);
+    });
+  }
+
+  if (!currentView) {
+    return null;
+  }
+
+  return (
+    <>
+      <ButtonWithTooltip
+        tooltip={previousView ? t("viewAs") + " " + t(previousView!.type) : ""}
+        icon={getIconForView(previousView)}
+        style={{ width: 50 }}
+        onClick={() => {
+          handleMenuClick({ key: previousView });
+        }}
+        disabled={disabled || availableViews.length === 1}
+      />
+      <Dropdown
+        overlay={getMenu()}
+        disabled={disabled || availableViews.length === 1}
+      >
+        <Button
+          style={{ width: 25 }}
+          icon={<DownOutlined style={{ fontSize: "0.5em" }} />}
+          onClick={(e) => e.preventDefault()}
+        ></Button>
+      </Dropdown>
+    </>
+  );
+}
+
+export default ChangeViewButton;

package/src/actionbar/DashboardActionBar.tsx

@@ -0,0 +1,67 @@
+import React, { useContext } from "react";
+import {
+  DashboardActionContext,
+  DashboardActionContextType,
+} from "@/context/DashboardActionContext";
+import { Space } from "antd";
+import ActionButton from "./ActionButton";
+import {
+  ReloadOutlined,
+  SettingOutlined,
+  BorderOuterOutlined,
+} from "@ant-design/icons";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+function DashboardActionBar() {
+  const {
+    isLoading,
+    dashboardRef,
+    moveItemsEnabled,
+    setMoveItemsEnabled,
+  } = useContext(DashboardActionContext) as DashboardActionContextType;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  return (
+    <Space wrap={true}>
+      <ActionButton
+        icon={
+          <BorderOuterOutlined
+            style={{ color: moveItemsEnabled ? "white" : undefined }}
+          />
+        }
+        type={moveItemsEnabled ? "primary" : "default"}
+        tooltip={t("moveDashboard")}
+        disabled={isLoading}
+        loading={false}
+        onClick={() => {
+          setMoveItemsEnabled(!moveItemsEnabled);
+        }}
+      />
+      {separator()}
+      <ActionButton
+        icon={<SettingOutlined />}
+        tooltip={t("configDashboard")}
+        disabled={isLoading}
+        loading={false}
+        onClick={() => {
+          dashboardRef?.current.configDashboard();
+        }}
+      />
+      <ActionButton
+        icon={<ReloadOutlined />}
+        tooltip={t("refresh")}
+        disabled={isLoading}
+        loading={false}
+        onClick={() => {
+          dashboardRef?.current.refresh();
+        }}
+      />
+    </Space>
+  );
+}
+
+function separator() {
+  return <div className="inline-block w-2" />;
+}
+
+export default DashboardActionBar;

package/src/actionbar/DropdownButton.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Menu, Dropdown, Button } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+
+type Props = {
+  onItemClick: (event: any) => void;
+  items: any[];
+  tooltip: string;
+  icon: any;
+  label?: string;
+  disabled?: boolean;
+};
+
+function DropdownButton(props: Props) {
+  const {
+    icon,
+    tooltip,
+    items = [],
+    onItemClick,
+    label,
+    disabled = false,
+  } = props;
+
+  function getMenu() {
+    const menuItems = items?.map((item, idx) => {
+      if (item.name === "divider") {
+        return <Menu.Divider key={"divider" + idx} />;
+      }
+      return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
+    });
+
+    return (
+      <Menu onClick={handleMenuClick}>
+        <Menu.ItemGroup title={tooltip}>{menuItems}</Menu.ItemGroup>
+      </Menu>
+    );
+  }
+
+  function handleMenuClick(event: any) {
+    const itemClicked = items.find((item: any) => {
+      return !isNaN(event.key)
+        ? item.id === parseInt(event.key)
+        : item.id === event.key;
+    });
+
+    onItemClick(itemClicked);
+  }
+
+  return (
+    <Dropdown
+      overlay={getMenu()}
+      disabled={disabled || !items || items.length === 0}
+    >
+      <Button>
+        {icon} {label} <DownOutlined />
+      </Button>
+    </Dropdown>
+  );
+}
+
+export default DropdownButton;