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

package/src/ui/FavouriteButton.tsx

@@ -1,272 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import {
-  StarOutlined,
-  StarFilled,
-  DownOutlined,
-  TableOutlined,
-  FormOutlined,
-  EditOutlined,
-} from "@ant-design/icons";
-import { Button, Col, Row, Spin, Tooltip, theme } from "antd";
-import { Menu, Dropdown } from "antd";
-import showErrorDialog from "@/ui/ActionErrorDialog";
-import {
-  TabManagerContext,
-  TabManagerContextType,
-} from "@/context/TabManagerContext";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { ViewType } from "@/types";
-const { useToken } = theme;
-
-export type ShortcutApi = {
-  action_id: number;
-  action_type: string;
-  id?: number;
-  name: string;
-  res_id: number | boolean;
-  res_model: string;
-  view_id: number;
-  view_type: string;
-};
-
-export type FavouriteOptions = {
-  action_id: number;
-  action_type: string;
-  res_id: number | boolean;
-  view_id: number;
-};
-
-type Props = {
-  onRetrieveShortcuts: () => Promise<ShortcutApi[]>;
-  onCheckIsFavourite: (options: FavouriteOptions) => Promise<number | boolean>;
-  onAddFavourite: (options: FavouriteOptions) => Promise<number>;
-  onRemoveFavourite: (shortcut_id: number) => Promise<void>;
-};
-
-const FavouriteButton = (props: Props) => {
-  const {
-    onRetrieveShortcuts,
-    onCheckIsFavourite,
-    onAddFavourite,
-    onRemoveFavourite,
-  } = props;
-
-  const [isFavourite, setIsFavourite] = useState(false);
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const [shortcuts, setShortcuts] = useState<ShortcutApi[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [currentShortcutId, setCurrentShortcutId] = useState<number>();
-  const { t } = (useContext(LocaleContext) as LocaleContextType) || {};
-
-  const { token } = useToken();
-
-  const tabManagerContext = useContext(
-    TabManagerContext
-  ) as TabManagerContextType;
-  const {
-    openShortcut,
-    tabs,
-    activeKey,
-    currentView,
-    currentId,
-    openDefaultActionForModel,
-  } = tabManagerContext || {};
-
-  useEffect(() => {
-    getShortcuts();
-  }, []);
-
-  useEffect(() => {
-    checkFavourite();
-  }, [tabs, activeKey, currentView, currentId]);
-
-  async function getShortcuts() {
-    try {
-      setLoading(true);
-      const shortcuts = await onRetrieveShortcuts();
-      setShortcuts(shortcuts);
-    } catch (e) {
-      showErrorDialog(e);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  function handleMenuClick(event: any) {
-    const { key } = event;
-    const shortcut = shortcuts.find((s) => s.id === Number(key));
-    if (shortcut?.action_type === "ir.actions.wizard") {
-      return;
-    }
-    if (shortcut) {
-      openShortcut(shortcut);
-    }
-    setDropdownVisible(false);
-  }
-
-  function handleVisibleChange(flag: boolean) {
-    if (flag) {
-      getShortcuts();
-    }
-    setDropdownVisible(flag);
-  }
-
-  async function checkFavourite() {
-    if (!currentView) {
-      return;
-    }
-
-    const currentTab = tabs.find((t) => t.key === activeKey);
-    const { id: action_id, type: action_type } = currentTab?.action || {};
-
-    if (!action_id || !action_type) {
-      setIsFavourite(false);
-      return;
-    }
-
-    const view_id = currentView.view_id!;
-    let res_id: boolean | number = false;
-
-    if (currentView.type === "form") {
-      res_id = currentId ? (currentId as number) : false;
-    }
-    const result = await onCheckIsFavourite({
-      action_id,
-      action_type,
-      view_id,
-      res_id,
-    });
-
-    if (result !== false) {
-      setCurrentShortcutId(result as number);
-    }
-
-    setIsFavourite(result !== false);
-  }
-
-  async function editFavourites() {
-    setDropdownVisible(false);
-    openDefaultActionForModel?.({ model: "ir.ui.view_sc" });
-  }
-
-  const menu = (
-    <Menu onClick={handleMenuClick}>
-      <div style={{ width: 300, padding: 5, display: "flex" }}>
-        <div style={{ paddingLeft: 15, color: "#ccc" }}>
-          {t?.("favorites").toUpperCase()}
-        </div>
-        <div style={{ flexGrow: 1, paddingLeft: 10 }}>
-          <Tooltip title={t?.("edit_favorites")}>
-            <EditOutlined
-              style={{ color: token.colorPrimary, cursor: "pointer" }}
-              onClick={editFavourites}
-            />
-          </Tooltip>
-        </div>
-      </div>
-      <Menu.Divider />
-      {loading ? (
-        <Spin style={{ padding: "1rem" }} />
-      ) : shortcuts.length > 0 ? (
-        <>
-          {shortcuts.map((shortcut) => (
-            <Menu.Item key={shortcut.id}>
-              <FavouriteItem
-                title={shortcut.name}
-                type={shortcut.view_type as ViewType}
-              />
-            </Menu.Item>
-          ))}
-        </>
-      ) : (
-        <div style={{ width: 300, padding: 5, paddingLeft: 15 }}>
-          {t?.("no_favorites")}
-        </div>
-      )}
-    </Menu>
-  );
-
-  function FavouriteItem({ title, type }: { title: string; type: ViewType }) {
-    const icon = type === "tree" ? <TableOutlined /> : <FormOutlined />;
-    return (
-      <Row wrap={false}>
-        <Col flex="none" style={{ paddingRight: 20 }}>
-          {icon}
-        </Col>
-        <Col flex="auto">{title}</Col>
-      </Row>
-    );
-  }
-
-  async function toggleFavourite() {
-    if (isFavourite && currentShortcutId) {
-      await onRemoveFavourite(currentShortcutId);
-    } else {
-      if (!currentView) {
-        return;
-      }
-
-      const currentTab = tabs.find((t) => t.key === activeKey);
-      const { id: action_id, type: action_type } = currentTab?.action || {};
-      const view_id = currentView.view_id!;
-      let res_id: boolean | number = false;
-
-      if (!action_id || !action_type) {
-        setIsFavourite(false);
-        return;
-      }
-
-      if (currentView.type === "form") {
-        res_id = currentId ? (currentId as number) : false;
-      }
-
-      await onAddFavourite({
-        action_id,
-        action_type,
-        view_id,
-        res_id,
-      });
-    }
-
-    await getShortcuts();
-    setIsFavourite(!isFavourite);
-  }
-
-  return (
-    <>
-      <Button
-        type={isFavourite ? "primary" : "default"}
-        icon={
-          isFavourite ? (
-            <StarFilled style={{ color: "white" }} />
-          ) : (
-            <StarOutlined />
-          )
-        }
-        style={{
-          width: 50,
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-        }}
-        onClick={toggleFavourite}
-      ></Button>
-      <Dropdown
-        overlay={menu}
-        onVisibleChange={handleVisibleChange}
-        open={dropdownVisible}
-      >
-        <Button
-          style={{
-            width: 25,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-          }}
-          icon={<DownOutlined style={{ fontSize: "0.5em" }} />}
-          onClick={(e) => e.preventDefault()}
-        ></Button>
-      </Dropdown>
-    </>
-  );
-};
-
-export default FavouriteButton;

package/src/ui/FormErrorsDialog.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { tForLang } from "@/context/LocaleContext";
-
-const { error } = Modal;
-
-const showDialog = (lang: string) => {
-  error({
-    title: tForLang("formHasErrors", lang),
-    icon: <ExclamationCircleOutlined />,
-    centered: true,
-    content: tForLang("fillRequiredFields", lang),
-  });
-};
-
-export default showDialog;

package/src/ui/GenericErrorDialog.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-
-const { error } = Modal;
-
-const showDialog = (message: string) => {
-  error({
-    title: "Error",
-    icon: <ExclamationCircleOutlined />,
-    centered: true,
-    content: message,
-  });
-};
-
-export default showDialog;

package/src/ui/GoToResourceModal.tsx

@@ -1,75 +0,0 @@
-import React, { useContext, useRef } from "react";
-import { Button, Col, Form, InputNumber, Modal, Row, Space } from "antd";
-import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-type Props = {
-  visible: boolean;
-  onIdSubmitted: (id: number) => void;
-  onCancel: () => void;
-  isSearching: boolean;
-};
-
-export const GoToResourceModal = (props: Props) => {
-  const { visible, onIdSubmitted, onCancel, isSearching } = props;
-
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  const inputRef = useRef<null | HTMLElement>();
-
-  function handleSubmit(values: any) {
-    onIdSubmitted(values.id);
-  }
-
-  return (
-    (<Modal
-      title={t("goToResourceId")}
-      centered
-      open={visible}
-      footer={null}
-      destroyOnClose
-      onCancel={onCancel}
-      maskClosable={false}
-      afterOpenChange={(open) => open && inputRef.current?.focus()}
-    >
-      <Form layout="vertical" onFinish={handleSubmit} autoComplete="off">
-        <Form.Item
-          name={"id"}
-          label={t("searchId")}
-          rules={[
-            {
-              required: true,
-              type: "number",
-            },
-          ]}
-        >
-          <InputNumber style={{ width: "100%" }} autoFocus ref={inputRef as any}/>
-        </Form.Item>
-        <Row align="middle" justify="end">
-          <Col>
-            <Space>
-              <Button
-                icon={<CloseOutlined />}
-                htmlType="button"
-                onClick={onCancel}
-                disabled={isSearching}
-              >
-                {t("cancel")}
-              </Button>
-              <Button
-                loading={isSearching}
-                style={{ marginLeft: 15 }}
-                icon={<CheckOutlined />}
-                htmlType="submit"
-                type="primary"
-                disabled={isSearching}
-              >
-                {t("ok")}
-              </Button>
-            </Space>
-          </Col>
-        </Row>
-      </Form>
-    </Modal>)
-  );
-};

package/src/ui/InfoDialog.tsx

@@ -1,13 +0,0 @@
-import { Modal } from "antd";
-
-const { info } = Modal;
-
-const showDialog = (content: any) => {
-  info({
-    title: "",
-    centered: true,
-    content,
-  });
-};
-
-export default showDialog;

package/src/ui/RefreshItemDialog.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { tForLang } from "@/context/LocaleContext";
-
-const { confirm } = Modal;
-
-const showDialog = ({
-  onOk,
-  onCancel,
-  lang,
-}: {
-  onOk: () => void;
-  onCancel?: () => void;
-  lang: string;
-}) => {
-  confirm({
-    title: tForLang("unsavedChanges", lang),
-    icon: <ExclamationCircleOutlined />,
-    centered: true,
-    content: tForLang("confirmRefreshWithoutSave", lang),
-    okText: tForLang("discardAndRefresh", lang),
-    cancelText: tForLang("cancel", lang),
-    onOk,
-    onCancel,
-  });
-};
-
-export default showDialog;

package/src/ui/RemoveItemDialog.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { tForLang } from "@/context/LocaleContext";
-
-const { confirm } = Modal;
-
-const showDialog = ({ onOk, lang }: { onOk: () => void; lang: string }) => {
-  confirm({
-    title: tForLang("removeItems", lang),
-    icon: <ExclamationCircleOutlined />,
-    centered: true,
-    content: tForLang("confirmRemove", lang),
-    okText: tForLang("yesConfirmRemove", lang),
-    onOk,
-    cancelText: tForLang("cancel", lang),
-  });
-};
-
-export default showDialog;

package/src/ui/TitleHeader.tsx

@@ -1,110 +0,0 @@
-import React, { useContext } from "react";
-import { Row, Col, Typography, theme } from "antd";
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-import { CopyOutlined } from "@ant-design/icons";
-
-const { useToken } = theme;
-
-const { Title, Text } = Typography;
-
-type Props = {
-  title?: string;
-  children?: any;
-};
-
-function TitleHeader(props: Props) {
-  const { title: titleProps, children } = props;
-  const {
-    title,
-    currentView,
-    currentId,
-    currentItemIndex,
-    results,
-    totalItems,
-    selectedRowItems,
-  } = useContext(ActionViewContext) as ActionViewContextType;
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-  const { token } = useToken();
-
-  function getSummary() {
-    if (currentView?.type === "form") {
-      if (!currentId) {
-        return "";
-      }
-
-      if (totalItems === 0) {
-        return (
-          <>
-            {t("editingDocument")} (id:{" "}
-            <Text
-              copyable={{ icon: <CopyOutlined style={{ color: "red" }} /> }}
-            >
-              {currentId}
-            </Text>
-            )
-          </>
-        );
-      }
-
-      return (
-        <>
-          {t("register")}{" "}
-          {currentItemIndex === undefined ? 1 : currentItemIndex + 1} /{" "}
-          {results!.length} {t("of")} {totalItems} - {t("editingDocument")} (id:{" "}
-          <Text copyable>{currentId}</Text>)
-        </>
-      );
-    } else if (currentView?.type === "tree" && selectedRowItems) {
-      if (selectedRowItems.length === 1) {
-        return (
-          <>
-            1 {t("selectedRegisters")} - (id:{" "}
-            <Text copyable>{selectedRowItems[0].id}</Text>)
-          </>
-        );
-      } else if (selectedRowItems.length > 1) {
-        return (
-          <>
-            {selectedRowItems.length} {t("selectedRegisters")}
-            <Text
-              copyable={{
-                text: selectedRowItems.map((reg) => reg.id).join(", "),
-              }}
-            ></Text>
-          </>
-        );
-      }
-    }
-    return null;
-  }
-  return (
-    <div style={{ position: "sticky", top: 80, zIndex: 3 }}>
-      <Row
-        className="shadow-md"
-        style={{
-          padding: "1em",
-          borderRadius: token.borderRadius,
-          backgroundColor: token.colorPrimaryBg,
-        }}
-        align="middle"
-      >
-        <Col flex={2}>
-          <Title level={3} style={{ marginBottom: 0 }}>
-            {titleProps || title}
-          </Title>
-          {getSummary()}
-        </Col>
-        <Col flex={3}>
-          <Row justify="end">{children}</Row>
-        </Col>
-      </Row>
-      <div className="pb-5" />
-    </div>
-  );
-}
-
-export default TitleHeader;

package/src/ui/UnlinkItemDialog.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { tForLang } from "@/context/LocaleContext";
-
-const { confirm } = Modal;
-
-const showDialog = ({ onOk, lang }: { onOk: () => void; lang: string }) => {
-  confirm({
-    title: tForLang("unlinkItems", lang),
-    icon: <ExclamationCircleOutlined />,
-    centered: true,
-    content: tForLang("confirmUnlink", lang),
-    okText: tForLang("yesConfirmUnlink", lang),
-    onOk,
-    cancelText: tForLang("cancel", lang),
-  });
-};
-
-export default showDialog;

package/src/ui/UnsavedChangesDialog.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { tForLang } from "@/context/LocaleContext";
-
-const { confirm } = Modal;
-
-const showDialog = ({
-  onOk,
-  onCancel,
-  lang,
-}: {
-  onOk: () => void;
-  onCancel?: () => void;
-  lang: string;
-}) => {
-  confirm({
-    title: tForLang("unsavedChanges", lang),
-    icon: <ExclamationCircleOutlined />,
-    centered: true,
-    content: tForLang("confirmCloseWithoutSave", lang),
-    okText: tForLang("closeWithoutSaving", lang),
-    onOk,
-    onCancel,
-    cancelText: tForLang("cancel", lang),
-  });
-};
-
-export default showDialog;

package/src/ui/WarningDialog.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { WarningOutlined } from "@ant-design/icons";
-
-const { warning } = Modal;
-
-const showDialog = (title: string, message: string, onOk?: () => void) => {
-  warning({
-    title,
-    icon: <WarningOutlined />,
-    centered: true,
-    content: message,
-    onOk,
-  });
-};
-
-export default showDialog;