@gisce/react-ooui 0.1.0

package/src/actionbar/FormActionBar.tsx

@@ -0,0 +1,412 @@
+import React, { useContext } from "react";
+import { Space, Spin } from "antd";
+import {
+  SaveOutlined,
+  RightOutlined,
+  LeftOutlined,
+  DeleteOutlined,
+  ThunderboltOutlined,
+  PrinterOutlined,
+  EnterOutlined,
+  ReloadOutlined,
+  CopyOutlined,
+  InfoCircleOutlined,
+} from "@ant-design/icons";
+import ChangeViewButton from "./ChangeViewButton";
+import DropdownButton from "./DropdownButton";
+import ActionButton from "./ActionButton";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import NewButton from "./NewButton";
+import showUnsavedChangesDialog from "@/ui/UnsavedChangesDialog";
+import showConfirmDialog from "@/ui/ConfirmDialog";
+import showErrorDialog from "@/ui/GenericErrorDialog";
+import ConnectionProvider from "@/ConnectionProvider";
+import refreshChangesDialog from "@/ui/RefreshItemDialog";
+import { showLogInfo } from "@/helpers/logInfoHelper";
+
+import {
+  TabManagerContext,
+  TabManagerContextType,
+} from "@/context/TabManagerContext";
+
+import {
+  ContentRootContext,
+  ContentRootContextType,
+} from "@/context/ContentRootContext";
+import AttachmentsButton from "./AttachmentsButton";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { View } from "@/views/ActionView";
+import { Attachment } from "./AttachmentsButtonWrapper";
+
+function FormActionBar() {
+  const {
+    availableViews,
+    currentView,
+    setCurrentView,
+    onFormSave,
+    formHasChanges,
+    formIsSaving,
+    currentId,
+    results,
+    setCurrentItemIndex,
+    currentItemIndex,
+    setCurrentId,
+    currentModel,
+    setRemovingItem,
+    removingItem,
+    duplicatingItem,
+    setDuplicatingItem,
+    setResults,
+    formIsLoading,
+    toolbar,
+    attachments,
+    formRef,
+    setFormHasChanges,
+    searchTreeRef,
+  } = useContext(ActionViewContext) as ActionViewContextType;
+  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
+
+  const contentRootContext = useContext(
+    ContentRootContext
+  ) as ContentRootContextType;
+  const { processAction } = contentRootContext || {};
+
+  const tabManagerContext = useContext(
+    TabManagerContext
+  ) as TabManagerContextType;
+  const { openRelate, openDefaultActionForModel } = tabManagerContext || {};
+
+  function tryRefresh(callback: any) {
+    if (formHasChanges) {
+      refreshChangesDialog({
+        lang,
+        onOk: () => {
+          callback();
+        },
+      });
+      return;
+    }
+
+    callback();
+  }
+
+  function tryNavigate(callback: any) {
+    if (formHasChanges) {
+      showUnsavedChangesDialog({
+        lang,
+        onOk: () => {
+          callback();
+        },
+      });
+      return;
+    }
+
+    callback();
+  }
+
+  function onNextClick() {
+    if (results && results.length > currentItemIndex! + 1) {
+      setCurrentItemIndex?.(currentItemIndex! + 1);
+      setCurrentId?.(results[currentItemIndex! + 1].id);
+    } else if (results && currentItemIndex! + 1 === results.length) {
+      setCurrentItemIndex?.(0);
+      setCurrentId?.(results[0].id);
+    }
+  }
+
+  function onPreviousClick() {
+    if (results && currentItemIndex! > 0) {
+      setCurrentItemIndex?.(currentItemIndex! - 1);
+      setCurrentId?.(results[currentItemIndex! - 1].id);
+    } else if (results && currentItemIndex === 0) {
+      setCurrentItemIndex?.(results.length - 1);
+      setCurrentId?.(results[results.length - 1].id);
+    }
+  }
+
+  function tryDelete() {
+    showConfirmDialog({
+      confirmMessage: t("confirmRemoveItem"),
+      lang,
+      onOk: () => {
+        remove();
+      },
+    });
+  }
+
+  async function remove() {
+    try {
+      setRemovingItem?.(true);
+
+      await ConnectionProvider.getHandler().delete({
+        model: currentModel!,
+        ids: [currentId!],
+      });
+
+      const filteredResults = results?.filter((item: any) => {
+        return item.id !== currentId;
+      });
+      setResults?.(filteredResults!);
+
+      let newIndex = 0;
+
+      if (currentItemIndex! > 0 && currentItemIndex! <= results!.length - 1) {
+        newIndex = currentItemIndex! - 1;
+      }
+
+      if (!filteredResults?.[newIndex]) {
+        setCurrentId?.(undefined);
+        setCurrentItemIndex?.(undefined);
+      } else {
+        setCurrentId?.(filteredResults?.[newIndex].id);
+        setCurrentItemIndex?.(newIndex);
+      }
+    } catch (e) {
+      showErrorDialog(JSON.stringify(e));
+    } finally {
+      setRemovingItem?.(false);
+    }
+  }
+
+  async function duplicate() {
+    try {
+      setDuplicatingItem?.(true);
+
+      const newId = await ConnectionProvider.getHandler().duplicate({
+        id: currentId!,
+        model: currentModel!,
+        context: (formRef.current as any).getContext(),
+      });
+
+      if (newId) {
+        await searchTreeRef?.current?.refreshResults();
+        setCurrentId?.(newId);
+        setCurrentItemIndex?.(currentItemIndex! + 1);
+      }
+    } catch (e) {
+      showErrorDialog(JSON.stringify(e));
+    } finally {
+      setDuplicatingItem?.(false);
+    }
+  }
+
+  const mustDisableButtons =
+    formIsSaving || removingItem || formIsLoading || duplicatingItem;
+
+  function runAction(actionData: any) {
+    processAction?.({
+      actionData,
+      values: (formRef.current as any).getValues(),
+      fields: (formRef.current as any).getFields(),
+      context: (formRef.current as any).getContext(),
+      onRefreshParentValues: () => {
+        (formRef.current as any).fetchValues();
+      },
+    });
+  }
+
+  if (!currentView) {
+    return null;
+  }
+
+  return (
+    <Space wrap={true}>
+      {formIsLoading && (
+        <>
+          <Spin />
+          {separator()}
+          {separator()}
+        </>
+      )}
+      <NewButton
+        disabled={
+          formIsSaving || formIsLoading || removingItem || duplicatingItem
+        }
+      />
+      <ActionButton
+        icon={<SaveOutlined />}
+        tooltip={t("save")}
+        disabled={!formHasChanges || mustDisableButtons}
+        loading={formIsSaving}
+        onClick={onFormSave}
+      />
+      <ActionButton
+        icon={<CopyOutlined />}
+        tooltip={t("duplicate")}
+        disabled={
+          formHasChanges ||
+          formIsSaving ||
+          currentId === undefined ||
+          duplicatingItem ||
+          formIsLoading
+        }
+        loading={duplicatingItem}
+        onClick={duplicate}
+      />
+      <ActionButton
+        icon={<DeleteOutlined />}
+        tooltip={t("delete")}
+        disabled={
+          formIsSaving ||
+          currentId === undefined ||
+          removingItem ||
+          duplicatingItem ||
+          formIsLoading
+        }
+        loading={removingItem}
+        onClick={tryDelete}
+      />
+      {separator()}
+      <ActionButton
+        icon={<InfoCircleOutlined />}
+        tooltip={t("showLogs")}
+        disabled={
+          formIsSaving ||
+          currentId === undefined ||
+          removingItem ||
+          duplicatingItem ||
+          formIsLoading
+        }
+        loading={false}
+        onClick={() => {
+          showLogInfo(currentModel!, currentId!, t);
+        }}
+      />
+      <ActionButton
+        icon={<ReloadOutlined />}
+        tooltip={t("refresh")}
+        disabled={
+          formIsSaving ||
+          currentId === undefined ||
+          removingItem ||
+          duplicatingItem ||
+          formIsLoading
+        }
+        loading={false}
+        onClick={() => {
+          tryRefresh(() => {
+            (formRef.current as any).fetchValues();
+          });
+        }}
+      />
+      {separator()}
+      <ChangeViewButton
+        currentView={currentView}
+        availableViews={availableViews.filter(
+          (view: View) => view.type === "tree" || view.type === "form"
+        )}
+        onChangeView={(view: any) => {
+          setFormHasChanges?.(false);
+          setCurrentView?.(view);
+        }}
+        disabled={mustDisableButtons}
+        formHasChanges={formHasChanges}
+      />
+      {separator()}
+      <Space>
+        <ActionButton
+          icon={<LeftOutlined />}
+          tooltip={t("previous")}
+          disabled={mustDisableButtons}
+          loading={false}
+          onClick={() => {
+            tryNavigate(onPreviousClick);
+          }}
+        />
+        <ActionButton
+          icon={<RightOutlined />}
+          tooltip={t("next")}
+          disabled={mustDisableButtons}
+          loading={false}
+          onClick={() => {
+            tryNavigate(onNextClick);
+          }}
+        />
+      </Space>
+      {separator()}
+      <DropdownButton
+        icon={<ThunderboltOutlined />}
+        disabled={mustDisableButtons}
+        tooltip={t("actions")}
+        items={toolbar?.action}
+        onItemClick={(action: any) => {
+          if (!action) {
+            return;
+          }
+
+          runAction(action);
+        }}
+      />
+      <DropdownButton
+        icon={<PrinterOutlined />}
+        disabled={mustDisableButtons}
+        tooltip={t("reports")}
+        items={toolbar?.print}
+        onItemClick={(report: any) => {
+          if (!report) {
+            return;
+          }
+
+          runAction({
+            ...report,
+            datas: { ...(report.datas || {}), ids: [currentId as number] },
+          });
+        }}
+      />
+      <DropdownButton
+        icon={<EnterOutlined />}
+        disabled={mustDisableButtons}
+        tooltip={t("related")}
+        items={toolbar?.relate}
+        onItemClick={async (relate: any) => {
+          if (!relate) {
+            return;
+          }
+
+          openRelate({
+            relateData: relate,
+            values: (formRef.current as any).getValues(),
+            fields: (formRef.current as any).getFields(),
+            action_id: relate.id,
+            action_type: relate.type,
+          });
+        }}
+      />
+      <AttachmentsButton
+        disabled={mustDisableButtons}
+        attachments={attachments}
+        onAddNewAttachment={() => {
+          const res_id = currentId as number;
+          const res_model = currentModel as string;
+          openDefaultActionForModel({
+            model: "ir.attachment",
+            values: {
+              selection_associated_object: `${res_model},${res_id}`,
+            },
+            forced_values: {
+              res_model,
+              res_id,
+            },
+            initialViewType: "form",
+          });
+        }}
+        onViewAttachmentDetails={(attachment: Attachment) => {
+          openDefaultActionForModel({
+            model: "ir.attachment",
+            res_id: attachment.id,
+            initialViewType: "form",
+          });
+        }}
+      />
+    </Space>
+  );
+}
+
+function separator() {
+  return <div className="inline-block w-2" />;
+}
+
+export default FormActionBar;

package/src/actionbar/NewButton.tsx

@@ -0,0 +1,46 @@
+import React, { useContext } from "react";
+import { FileAddOutlined } from "@ant-design/icons";
+import ActionButton from "./ActionButton";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import showUnsavedChangesDialog from "@/ui/UnsavedChangesDialog";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+type Props = {
+  disabled?: boolean;
+};
+
+function NewButton(props: Props) {
+  const { disabled = false } = props;
+
+  const { formHasChanges, onNewClicked: onNewClickedProps } = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+  const { t, lang } = useContext(LocaleContext) as LocaleContextType;
+
+  const onNewClicked = () => {
+    if (formHasChanges) {
+      showUnsavedChangesDialog({
+        lang,
+        onOk: () => {
+          onNewClickedProps();
+        },
+      });
+      return;
+    }
+
+    onNewClickedProps();
+  };
+
+  return (
+    <ActionButton
+      icon={<FileAddOutlined />}
+      tooltip={t("new")}
+      onClick={onNewClicked}
+      disabled={disabled}
+    />
+  );
+}
+export default NewButton;

package/src/actionbar/SearchBar.tsx

@@ -0,0 +1,69 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Button, Col, Form, Input, Row, Tooltip } from "antd";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { CloseCircleFilled } from "@ant-design/icons";
+
+type Props = {
+  onSearch: (searchValue?: string) => void;
+  searchText?: string;
+  disabled?: boolean;
+};
+
+function SearchBar(props: Props) {
+  const { onSearch, disabled = false, searchText } = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  const [form] = Form.useForm();
+  const [mustShowClearSuffix, setMustShowClearSuffix] = useState<boolean>(
+    false
+  );
+
+  function handleSubmit(values: any) {
+    onSearch(values.search);
+  }
+
+  useEffect(() => {
+    form.setFieldsValue({ search: searchText });
+  }, [searchText]);
+
+  function clear() {
+    setMustShowClearSuffix(false);
+    form.setFieldsValue({ search: undefined });
+    onSearch(undefined);
+  }
+
+  return (
+    <Form form={form} onFinish={handleSubmit} autoComplete="off">
+      <Row align="middle" justify="end">
+        <Col>
+          <Form.Item name={"search"} noStyle>
+            <Input
+              autoFocus
+              disabled={disabled}
+              onChange={(e) => {
+                setMustShowClearSuffix(e.target.value.length > 0);
+              }}
+              suffix={
+                (mustShowClearSuffix ||
+                  (searchText && searchText.length > 0)) && (
+                  <Tooltip title={t("clear")}>
+                    <CloseCircleFilled
+                      style={{ color: "rgba(0,0,0,.45)" }}
+                      onClick={clear}
+                    />
+                  </Tooltip>
+                )
+              }
+            />
+          </Form.Item>
+        </Col>
+        <Col>
+          <Button htmlType="submit" disabled={disabled}>
+            {t("search")}
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+}
+
+export default SearchBar;