From a3d8f88aa7ede605a60fd4455756e534d5f8dc57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20G=C3=BCell=20Segarra?= <marc@ondori.dev>
Date: Thu, 18 Jan 2024 20:12:50 +0100
Subject: [PATCH] feat(New dropdown): refactor many2one suffix

---
 .../Many2OneSuffix/Many2OneSuffix.tsx         | 52 +++++--------------
 .../Many2OneSuffix/Many2OneSuffix.types.tsx   |  9 ++--
 .../Many2OneSuffix/Many2OneSuffixModal.tsx    | 43 +++++++++++++++
 .../widgets/Many2one/Many2OneSuffix/index.ts  |  2 +
 src/components/widgets/index.ts               |  1 +
 5 files changed, 63 insertions(+), 44 deletions(-)
 create mode 100644 src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffixModal.tsx

diff --git a/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.tsx b/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.tsx
index dfbd859..264bfdd 100644
--- a/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.tsx
+++ b/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.tsx
@@ -1,45 +1,19 @@
-import React from "react";
+import { Dropdown } from "@/components/ui/Dropdown";
 import { RightCircleOutlined } from "@ant-design/icons";
-import { Menu, Dropdown, Spin } from "antd";
 import { Many2OneSuffixProps } from "./Many2OneSuffix.types";
 
-export const Many2oneSuffix = (props: Many2OneSuffixProps) => {
-  const { loading, menuItems, onMenuItemClicked, onSuffixExpandClicked } =
-    props;
-
-  function menu() {
-    if (loading) {
-      return (
-        <Menu>
-          <div style={{ padding: 15 }}>
-            <Spin />
-          </div>
-        </Menu>
-      );
-    }
-
-    return (
-      <Menu
-        onClick={(e: any) => {
-          onMenuItemClicked(e);
-        }}
-      >
-        {menuItems}
-      </Menu>
-    );
-  }
-
+export const Many2OneSuffix = ({
+  onRetrieveData,
+  onItemClick,
+}: Many2OneSuffixProps) => {
   return (
-    <>
-      <Dropdown overlay={menu()} trigger={["click"]}>
-        <RightCircleOutlined
-          style={{ color: "rgba(0,0,0,.45)" }}
-          onClick={(e) => {
-            onSuffixExpandClicked();
-            e.preventDefault();
-          }}
-        />
-      </Dropdown>
-    </>
+    <Dropdown
+      onRetrieveData={onRetrieveData}
+      onItemClick={onItemClick}
+      maxHeight={300}
+      trigger={["click"]}
+    >
+      <RightCircleOutlined style={{ color: "rgba(0,0,0,.45)" }} />
+    </Dropdown>
   );
 };
diff --git a/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.types.tsx b/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.types.tsx
index c09cc4b..1ec34b8 100644
--- a/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.types.tsx
+++ b/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffix.types.tsx
@@ -1,7 +1,6 @@
+import { DropdownMenuGroup, DropdownMenuItem } from "@/components/ui";
 
 export type Many2OneSuffixProps = {
-  loading?: boolean;
-  menuItems: React.ReactNode;
-  onMenuItemClicked: (event: any) => void;
-  onSuffixExpandClicked: () => void;
-};
\ No newline at end of file
+  onRetrieveData: () => Promise<DropdownMenuGroup[]>;
+  onItemClick?: (item: DropdownMenuItem) => void;
+};
diff --git a/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffixModal.tsx b/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffixModal.tsx
new file mode 100644
index 0000000..80c9bdb
--- /dev/null
+++ b/src/components/widgets/Many2one/Many2OneSuffix/Many2OneSuffixModal.tsx
@@ -0,0 +1,43 @@
+import { Modal, Button, Space } from "antd";
+import { DropdownMenuItem } from "@/components/ui";
+import { useLocale } from "@/context/LocaleContext";
+
+type Props = {
+  visible: boolean;
+  items: DropdownMenuItem[];
+  onItemClicked?: (item: DropdownMenuItem) => void;
+  onCancel: () => void;
+};
+
+export const Many2OneSuffixModal = (props: Props) => {
+  const { visible, onCancel, items = [], onItemClicked } = props;
+  const { t } = useLocale();
+
+  return (
+    <Modal
+      title={t("selectAction")}
+      centered
+      open={visible}
+      footer={null}
+      destroyOnClose
+      onCancel={onCancel}
+      maskClosable={false}
+    >
+      <Space direction="vertical" className="w-full">
+        {items.map((item) => {
+          return (
+            <Button
+              key={item.id}
+              className="w-full"
+              onClick={() => {
+                onItemClicked?.(item);
+              }}
+            >
+              {item.name}
+            </Button>
+          );
+        })}
+      </Space>
+    </Modal>
+  );
+};
diff --git a/src/components/widgets/Many2one/Many2OneSuffix/index.ts b/src/components/widgets/Many2one/Many2OneSuffix/index.ts
index c0f8962..1d5d5a0 100644
--- a/src/components/widgets/Many2one/Many2OneSuffix/index.ts
+++ b/src/components/widgets/Many2one/Many2OneSuffix/index.ts
@@ -1 +1,3 @@
 export * from "./Many2OneSuffix";
+export * from "./Many2OneSuffix.types";
+export * from "./Many2OneSuffixModal";
diff --git a/src/components/widgets/index.ts b/src/components/widgets/index.ts
index 2a46ed8..2257043 100644
--- a/src/components/widgets/index.ts
+++ b/src/components/widgets/index.ts
@@ -10,3 +10,4 @@ export * from "./Selection";
 export * from "./Link";
 export * from "./ProgressBar";
 export * from "./Translatable";
+export * from "./Many2One";