@gisce/react-ooui 0.1.0

package/src/types/index.ts

@@ -0,0 +1,275 @@
+import { Field as FieldOoui } from "@gisce/ooui";
+
+type Strings = {
+  [key: string]: string;
+};
+
+type Column = {
+  title: string;
+  dataIndex: string;
+  key: string;
+  type?: string;
+};
+
+type WidgetProps = {
+  ooui: FieldOoui;
+  layout?: "horizontal" | "vertical";
+  showLabel?: boolean;
+};
+
+type SearchFields = {
+  primary: string[];
+  secondary: string[];
+};
+
+type TreeView = {
+  view_id: number;
+  arch: string;
+  fields: any;
+  search_fields?: SearchFields;
+};
+
+type FormView = TreeView & {
+  search_fields?: SearchFields;
+  toolbar?: any;
+};
+
+type SearchResponse = {
+  totalItems: number;
+  results: any[];
+  attrsEvaluated?: any;
+};
+
+type SearchRequest = {
+  params: Array<any>;
+  limit?: number;
+  offset?: number;
+  model: string;
+  fields?: any;
+  context?: any;
+  attrs?: any;
+  order?: number | string;
+};
+
+type SearchAllIdsRequest = SearchCountRequest & {
+  totalItems?: number;
+};
+
+type SearchCountRequest = {
+  params: Array<any>;
+  model: string;
+  context?: any;
+};
+
+type CreateObjectRequest = {
+  model: string;
+  values: any;
+  fields: any;
+  context?: any;
+};
+
+type UpdateObjectRequest = CreateObjectRequest & {
+  id: number;
+};
+
+type Views = Map<string, any>;
+
+type ViewData = {
+  views: Views;
+  limit: number;
+  model: string;
+  domain?: any;
+  context?: any;
+};
+
+type ExecuteRequest = {
+  model: string;
+  action: string;
+  payload?: any;
+  context?: any;
+};
+
+type NameSearchRequest = {
+  model: string;
+  limit?: number;
+  payload?: any;
+  context?: any;
+  attrs?: any;
+  operator?: string;
+};
+
+type ExecuteOnChangeRequest = {
+  model: string;
+  action: string;
+  payload?: any;
+  ids: number[];
+  fields: any;
+};
+
+type ReadObjectsRequest = {
+  arch?: string;
+  fields?: any;
+  model: string;
+  ids: number[];
+  context?: any;
+  fieldsToRetrieve?: any;
+};
+
+type GetLogInfoRequest = {
+  model: string;
+  ids: number[];
+  context?: any;
+};
+
+type ReadEvalUiObjectsRequest = {
+  arch?: string;
+  fields?: any;
+  model: string;
+  ids: number[];
+  context?: any;
+  attrs?: any;
+};
+
+type ParseConditionRequest = {
+  condition: string;
+  values: any;
+  context?: any;
+};
+
+type DeleteObjectsRequest = {
+  model: string;
+  ids: number[];
+};
+
+type CreateReportRequest = {
+  name: string;
+  model: string;
+  ids: number[];
+  datas?: any;
+  context?: any;
+};
+
+type GenerateReportOptions = {
+  reportData: any;
+  fields: any;
+  values: any;
+  context?: any;
+};
+
+type GetReportRequest = {
+  id: number;
+};
+
+type GetViewRequest = {
+  model: string;
+  id?: number;
+  type: ViewType;
+  context?: any;
+};
+
+type DefaultGetRequest = {
+  model: string;
+  fields?: any;
+  context?: any;
+  extraValues?: any; // For inv_fields many2one's and other fields.
+};
+
+type DuplicateRequest = {
+  id: number;
+  model: string;
+  context?: any;
+};
+
+type EvalDomainRequest = {
+  domain: string;
+  values: any;
+  context?: any;
+};
+
+type IsShortcutFavoriteOptions = {
+  action_id: number;
+  action_type: string;
+  res_id: number | boolean;
+  view_id: number;
+  context?: any;
+};
+
+type ConnectionProviderType = {
+  getActionStringForModel: (model: string) => Promise<string>;
+  getViewsForAction: ({
+    action,
+    context,
+  }: {
+    action: string;
+    context?: any;
+  }) => Promise<ViewData>;
+  getView: (options: GetViewRequest) => Promise<FormView | TreeView>;
+  searchAllIds: (options: SearchAllIdsRequest) => Promise<number[]>;
+  searchCount: (options: SearchCountRequest) => Promise<number>;
+  search: (options: SearchRequest) => Promise<SearchResponse>;
+  searchForTree: (options: SearchRequest) => Promise<SearchResponse>;
+  update: (options: UpdateObjectRequest) => Promise<any>;
+  create: (options: CreateObjectRequest) => Promise<any>;
+  delete: (options: DeleteObjectsRequest) => Promise<any>;
+  execute: (options: ExecuteRequest) => Promise<any>;
+  readObjects: (options: ReadObjectsRequest) => Promise<any>;
+  readEvalUiObjects: (options: ReadEvalUiObjectsRequest) => Promise<any>;
+  parseCondition: (options: ParseConditionRequest) => Promise<any>;
+  executeWorkflow: (options: ExecuteRequest) => Promise<any>;
+  createReport: (options: CreateReportRequest) => Promise<any>;
+  getReport: (options: GetReportRequest) => Promise<any>;
+  executeOnChange: (options: ExecuteOnChangeRequest) => Promise<any>;
+  defaultGet: (options: DefaultGetRequest) => Promise<any>;
+  getActionData: ({
+    action,
+    context,
+  }: {
+    action: string;
+    context?: any;
+  }) => Promise<any>;
+  nameSearch: (options: NameSearchRequest) => Promise<any>;
+  duplicate: (options: DuplicateRequest) => Promise<any>;
+  evalDomain: (options: EvalDomainRequest) => Promise<any>;
+  getLogInfo: (options: GetLogInfoRequest) => Promise<any>;
+  isShortcutFavorite: (
+    options: IsShortcutFavoriteOptions
+  ) => Promise<number | boolean>;
+  removeFavourite: ({ shortcut_id }: { shortcut_id: number }) => Promise<void>;
+  addFavourite: (options: IsShortcutFavoriteOptions) => Promise<void>;
+};
+
+type ViewType = "tree" | "form" | "dashboard" | "graph";
+
+export type {
+  Strings,
+  SearchFields,
+  TreeView,
+  FormView,
+  Column,
+  WidgetProps,
+  SearchRequest,
+  SearchResponse,
+  ConnectionProviderType,
+  UpdateObjectRequest,
+  CreateObjectRequest,
+  ViewData,
+  Views,
+  ExecuteRequest,
+  ReadObjectsRequest,
+  DeleteObjectsRequest,
+  CreateReportRequest,
+  GetReportRequest,
+  ExecuteOnChangeRequest,
+  ViewType,
+  SearchAllIdsRequest,
+  SearchCountRequest,
+  GetViewRequest,
+  DefaultGetRequest,
+  GenerateReportOptions,
+  ReadEvalUiObjectsRequest,
+  NameSearchRequest,
+  DuplicateRequest,
+  GetLogInfoRequest,
+  IsShortcutFavoriteOptions,
+  ParseConditionRequest,
+};

package/src/ui/ActionErrorDialog.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Modal } from "antd";
+import { ExclamationCircleOutlined, WarningOutlined } from "@ant-design/icons";
+
+const { error, warning } = Modal;
+
+const showDialog = (err: string) => {
+  let message;
+  let type;
+  let title;
+
+  if (
+    typeof err === "string" &&
+    err.indexOf(" -- ") !== -1 &&
+    err.indexOf("\n\n") !== -1
+  ) {
+    const splitted = err.split("\n\n");
+    message = splitted[1];
+    const args = splitted[0].split(" -- ");
+    type = args[0];
+    title = args[1];
+  } else {
+    message = err;
+    type = "error";
+    title = "Error";
+  }
+
+  const icon =
+    type === "error" ? <ExclamationCircleOutlined /> : <WarningOutlined />;
+
+  const modalType = type === "error" ? error : warning;
+
+  modalType({
+    title,
+    icon,
+    centered: true,
+    content: message,
+  });
+};
+
+export default showDialog;

package/src/ui/ConfirmDialog.tsx

@@ -0,0 +1,28 @@
+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,
+  confirmMessage,
+  lang
+}: {
+  onOk: () => void;
+  confirmMessage: string;
+  lang: string;
+}) => {
+  confirm({
+    title: tForLang("confirmation", lang),
+    icon: <ExclamationCircleOutlined />,
+    centered: true,
+    content: confirmMessage,
+    okText: tForLang("ok", lang),
+    cancelText: tForLang("cancel", lang),
+    onOk,
+  });
+};
+
+export default showDialog;

package/src/ui/FavouriteButton.tsx

@@ -0,0 +1,261 @@
+import React, { useContext, useEffect, useState } from "react";
+import {
+  StarOutlined,
+  StarFilled,
+  DownOutlined,
+  TableOutlined,
+  FormOutlined,
+  EditOutlined,
+} from "@ant-design/icons";
+import { Button, Col, Row, Spin, Tooltip } 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";
+
+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 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.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: "#1890FF", 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.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 }}
+        onClick={toggleFavourite}
+      ></Button>
+      <Dropdown
+        overlay={menu}
+        onVisibleChange={handleVisibleChange}
+        visible={dropdownVisible}
+      >
+        <Button
+          style={{ width: 25 }}
+          icon={<DownOutlined style={{ fontSize: "0.5em" }} />}
+          onClick={(e) => e.preventDefault()}
+        ></Button>
+      </Dropdown>
+    </>
+  );
+};
+
+export default FavouriteButton;

package/src/ui/Fieldset.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+type Props = {
+  label: string;
+  children: any;
+};
+
+const Fieldset = (props: Props): React.ReactElement => {
+  const { label, children } = props;
+
+  return (
+    // TODO: change in-line styles to TailWind classes
+    <fieldset className="p-2 border-gray-400 border border-solid  font-sans">
+      <legend
+        style={{
+          all: "initial",
+          marginLeft: "1em",
+          paddingLeft: "0.5em",
+          paddingRight: "0.5em",
+          fontFamily:
+            "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+        }}
+      >
+        {label}
+      </legend>
+      {children}
+    </fieldset>
+  );
+};
+
+export default Fieldset;

package/src/ui/FormErrorsDialog.tsx

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,16 @@
+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;