From 1f20c8d21d8b6c1bbc88f1a1b829485acfb0afcc Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Fri, 20 Dec 2024 12:26:05 +0100
Subject: [PATCH] ILEX-81 add button to change active ontology

---
 src/components/SingleTermView/CustomMenu.jsx  | 67 +++++++++++++++----
 .../SingleTermView/OntologySearch.jsx         |  1 +
 src/components/SingleTermView/index.jsx       |  6 +-
 3 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/src/components/SingleTermView/CustomMenu.jsx b/src/components/SingleTermView/CustomMenu.jsx
index 5371c74..a9a56d1 100644
--- a/src/components/SingleTermView/CustomMenu.jsx
+++ b/src/components/SingleTermView/CustomMenu.jsx
@@ -5,6 +5,7 @@ import Divider from '@mui/material/Divider';
 import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined';
 import ForkRightOutlinedIcon from '@mui/icons-material/ForkRightOutlined';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import FolderCopyOutlinedIcon from '@mui/icons-material/FolderCopyOutlined';
 import { vars } from '../../theme/variables';
 
 const { gray100, gray200, gray600, error700 } = vars;
@@ -31,7 +32,7 @@ const menuStyles = {
         },
     },
     dangerMenuItem: {
-        color: error700,
+        color: `${error700} !important`,
         '&:hover': {
             background: 'transparent',
         },
@@ -43,37 +44,77 @@ const menuStyles = {
 };
 
 const CustomMenu = ({ open, anchorRef, setOpen }) => {
+    const handleAddToActiveOntology = () => {
+        console.log('Add term to active ontology');
+        setOpen(false);
+    };
+
+    const handleCreateFork = () => {
+        console.log('Create fork');
+        setOpen(false);
+    };
+
+    const handleAddToAnotherOntology = () => {
+        console.log('Add term to another ontology');
+        setOpen(false);
+    };
+
+    const handleRemoveFromActiveOntology = () => {
+        console.log('Remove from active ontology');
+        setOpen(false);
+    };
+
+    const menuOptions = [
+        {
+            icon: <CreateNewFolderOutlinedIcon fontSize="small" />,
+            name: "Add term to active ontology",
+            onClick: handleAddToActiveOntology
+        },
+        {
+            icon: <ForkRightOutlinedIcon fontSize="small" />,
+            name: "Create fork",
+            onClick: handleCreateFork
+        },
+        {
+            icon: <FolderCopyOutlinedIcon fontSize="small" />,
+            name: "Add term to another ontology",
+            onClick: handleAddToAnotherOntology
+        }
+    ]
+
     return (
         <Menu
             id="customized-menu"
             open={open}
-            onClose={() => setOpen(false)} 
+            onClose={() => setOpen(false)}
             anchorEl={anchorRef.current}
             keepMounted
             elevation={0}
             anchorOrigin={{
                 vertical: 'bottom',
-                horizontal: 'right',
+                horizontal: 'left',
             }}
             transformOrigin={{
                 vertical: 'top',
-                horizontal: 'right',
+                horizontal: 'left',
             }}
             sx={{
                 '& .MuiPaper-root': menuStyles.paper,
                 '& .MuiList-root': menuStyles.list,
             }}
         >
-            <MenuItem onClick={() => setOpen(false)} sx={menuStyles.menuItem}>
-                <CreateNewFolderOutlinedIcon fontSize="small" />
-                Add term to active ontology
-            </MenuItem>
-            <MenuItem onClick={() => setOpen(false)} sx={menuStyles.menuItem}>
-                <ForkRightOutlinedIcon fontSize="small" />
-                Create fork
-            </MenuItem>
+            {menuOptions.map((item, index) => (
+                <MenuItem
+                    key={`${item.name}_${index}`}
+                    onClick={item.onClick}
+                    sx={menuStyles.menuItem}
+                >
+                    {item.icon}
+                    {item.name}
+                </MenuItem>
+            ))}
             <Divider sx={menuStyles.divider} />
-            <MenuItem onClick={() => setOpen(false)} sx={{ ...menuStyles.menuItem, ...menuStyles.dangerMenuItem }}>
+            <MenuItem onClick={handleRemoveFromActiveOntology} sx={{ ...menuStyles.menuItem, ...menuStyles.dangerMenuItem }}>
                 <DeleteOutlineOutlinedIcon fontSize="small" sx={{ color: error700 }} />
                 Remove from active ontology
             </MenuItem>
diff --git a/src/components/SingleTermView/OntologySearch.jsx b/src/components/SingleTermView/OntologySearch.jsx
index 7133f60..c5d70bc 100644
--- a/src/components/SingleTermView/OntologySearch.jsx
+++ b/src/components/SingleTermView/OntologySearch.jsx
@@ -41,6 +41,7 @@ const OntologySearch = () => {
   const onSetActive = (event) => {
     event.stopPropagation();
     event.preventDefault();
+    console.log("selected value: ", selectedValue)
     setOpenList(false);
     setSelectedValue({ ...selectedValue, selected: true });
   };
diff --git a/src/components/SingleTermView/index.jsx b/src/components/SingleTermView/index.jsx
index 6f29c63..57443ed 100644
--- a/src/components/SingleTermView/index.jsx
+++ b/src/components/SingleTermView/index.jsx
@@ -133,7 +133,7 @@ const SingleTermView = () => {
       <Box display="flex" flexDirection="column">
         <Box p="1.5rem 5rem 0rem 5rem">
           <Grid container>
-            <Grid item xs={12} lg={6}>
+            <Grid container xs={12} lg={12} direction="row" alignItems="center" justifyContent="space-between">
               <Stack direction="row" spacing=".75rem">
                 <CustomBreadcrumbs breadcrumbItems={breadcrumbItems} />
                 <ForkRightIcon fontSize="medium" htmlColor={brand700} />
@@ -147,6 +147,10 @@ const SingleTermView = () => {
                   className="rounded not-merged"
                 />
               </Stack>
+              <Stack direction="row" alignItems="center" gap={1}>
+                <Typography variant="caption" sx={{ fontSize: '0.875rem', color: gray600 }}>Active Ontology:</Typography>
+                <OntologySearch />
+              </Stack>
             </Grid>
             <Grid container mt="1.75rem">
               <Grid item xs={12} lg={2}>