Added favourites toggle to dataview title

Signed-off-by: Emil Balitzki <[email protected]>
amosproj · May 18, 2024 · 0cee601 · 0cee601
1 parent e697a2a
commit 0cee601
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 1 deletion.
diff --git a/frontend/src/components/DataView/DataView.css b/frontend/src/components/DataView/DataView.css
@@ -12,3 +12,16 @@
 .dataview-tab {
   padding: 0 !important;
 }
+
+.dataview-title-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.favourite-icon-container {
+  width: 1rem;
+}
+
+.location-icon {
+  margin-left: 0.5rem;
+}
diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx
@@ -6,8 +6,44 @@ import TabPanel from "@mui/lab/TabPanel/TabPanel";
 import TabContext from "@mui/lab/TabContext/TabContext";
 import Tab from "@mui/material/Tab/Tab";
 import TabList from "@mui/lab/TabList/TabList";
+import { CaretDown } from "@phosphor-icons/react";
+import PopUp from "../Popup/Popup";
+import { useState } from "react";
+
+interface OptionItem {
+  id: string;
+  displayValue: string;
+}
 
 function DataView() {
+  const [openDialog, setOpenDialog] = useState(false);
+
+  const handleOpenDialog = () => {
+    setOpenDialog(true);
+  };
+
+  const handleCloseDialog = () => {
+    setOpenDialog(false);
+  };
+
+  const [favorites, setFavorites] = useState<OptionItem[]>([
+    { id: "1", displayValue: "Nuremberg" },
+    { id: "2", displayValue: "Munich" },
+  ]);
+  const [options] = useState<OptionItem[]>([
+    { id: "1", displayValue: "Nuremberg" },
+    { id: "2", displayValue: "Munich" },
+    {
+      id: "3",
+      displayValue: "Andreij Sacharow Platz 1, 90402 Nuremberg",
+    },
+    { id: "4", displayValue: "Main train station Nuremberg" },
+    { id: "5", displayValue: "Walter-Meckauer-Street 20" },
+    { id: "6", displayValue: "49°26'46.6\"N 11°04'33.7\"E" },
+  ]);
+
+  const onCurrentSearchChanged = () => {};
+
   return (
     <div className="dataview-container">
       <TabContext value="1">
@@ -19,7 +55,36 @@ function DataView() {
             aria-label="lab API multimap tabs"
             selectionFollowsFocus
           >
-            <Tab label="Nuremberg" value="1"></Tab>
+            <Tab
+              label={
+                <div className="dataview-title-container">
+                  <span>Nuremberg</span>
+                  <div className="favourite-icon-container">
+                    <CaretDown
+                      weight="bold"
+                      className="location-icon"
+                      onClick={handleOpenDialog}
+                    />
+                    <PopUp
+                      title="Locations"
+                      favorites={favorites}
+                      setFavorites={setFavorites}
+                      onClose={handleCloseDialog}
+                      openDialog={openDialog}
+                      onCurrentSearchChanged={onCurrentSearchChanged}
+                      options={options}
+                      onItemSelected={(item) => {
+                        handleCloseDialog();
+                        setTimeout(() => {
+                          alert(item.displayValue);
+                        }, 400);
+                      }}
+                    ></PopUp>
+                  </div>
+                </div>
+              }
+              value="1"
+            ></Tab>
           </TabList>
         </div>