Merge remote-tracking branch 'origin/main'

goat-community · Dec 5, 2023 · ede7f5c · ede7f5c
2 parents 74099cf + 74e58ef
commit ede7f5c
Show file tree

Hide file tree

Showing 42 changed files with 2,073 additions and 366 deletions.
diff --git a/apps/web/app/[lng]/map/[projectId]/page.tsx b/apps/web/app/[lng]/map/[projectId]/page.tsx
@@ -7,7 +7,7 @@ import React, { useMemo } from "react";
 import type { ViewStateChangeEvent } from "react-map-gl";
 import Map, { MapProvider } from "react-map-gl";
 import Layers from "@/components/map/Layers";
-
+import Markers from "@/components/map/Markers";
 import ProjectNavigation from "@/components/map/panels/ProjectNavigation";
 import Header from "@/components/header/Header";
 import {
@@ -123,6 +123,7 @@ export default function MapPage({ params: { projectId } }) {
                 mapboxAccessToken={MAPBOX_TOKEN}
               >
                 <Layers projectId={projectId} />
+                <Markers />
               </Map>
             </Box>
           </Box>

diff --git a/apps/web/components/common/LayerMetadataForm.tsx b/apps/web/components/common/LayerMetadataForm.tsx
@@ -1,7 +1,7 @@
 import type { LayerMetadata } from "@/lib/validations/layer";
 import { layerMetadataSchema } from "@/lib/validations/layer";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Box, TextField } from "@mui/material";
+import { Box } from "@mui/material";
 import { useForm } from "react-hook-form";
 
 interface LayerMetadataFormProps {
@@ -18,8 +18,6 @@ const LayerMetadataForm: React.FC<LayerMetadataFormProps> = ({
 }) => {
   const {
     handleSubmit,
-    register,
-    formState: { errors },
   } = useForm<LayerMetadata>({
     mode: "onChange",
     resolver: zodResolver(layerMetadataSchema),
@@ -30,9 +28,7 @@ const LayerMetadataForm: React.FC<LayerMetadataFormProps> = ({
     console.log(data);
   };
   return (
-    <Box component="form" onSubmit={handleSubmit(onSubmit)} {...props}>
-
-    </Box>
+    <Box component="form" onSubmit={handleSubmit(onSubmit)} {...props} />
   );
 };
 

diff --git a/apps/web/components/dashboard/Sidebar.tsx b/apps/web/components/dashboard/Sidebar.tsx
@@ -14,6 +14,7 @@ import {
 import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
 import NextLink from "next/link";
 import { usePathname } from "next/navigation";
+import { useTranslation } from "@/i18n/client";
 
 const openedMixin = (theme: Theme): CSSObject => ({
   transition: theme.transitions.create("width", {
@@ -42,6 +43,8 @@ const DashboardSidebar = (props: Props) => {
   const theme = useTheme();
   const pathname = usePathname();
 
+  const {t} = useTranslation("dashboard");
+
   const MobileDrawerProps = {
     open: navVisible,
     onOpen: () => setNavVisible(true),
@@ -61,31 +64,31 @@ const DashboardSidebar = (props: Props) => {
     {
       link: "/home",
       icon: ICON_NAME.HOUSE,
-      label: "Home",
+      label: t("sidebar.home"),
       current: pathname?.includes("/home"),
     },
     {
       link: "/projects",
       icon: ICON_NAME.MAP,
-      label: "Projects",
+      label: t("sidebar.projects"),
       current: pathname?.includes("/projects"),
     },
     {
       link: "/datasets",
       icon: ICON_NAME.DATABASE,
-      label: "Datasets",
+      label: t("sidebar.datasets"),
       current: pathname?.includes("/data"),
     },
     {
       link: "/catalog",
       icon: ICON_NAME.GLOBE,
-      label: "Catalog",
+      label: t("sidebar.catalog"),
       current: pathname?.includes("/catalog"),
     },
     {
       link: "/settings",
       icon: ICON_NAME.SETTINGS,
-      label: "Settings",
+      label: t("sidebar.settings"),
       current: pathname?.includes("/settings"),
     },
   ];

diff --git a/apps/web/components/jobs/JobsPopper.tsx b/apps/web/components/jobs/JobsPopper.tsx
@@ -48,6 +48,7 @@ export default function JobsPopper() {
         setIntervalId(null);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [jobs?.items, intervalId]);
 
   const [isBusy, setIsBusy] = useState(false);

diff --git a/apps/web/components/map/Markers.tsx b/apps/web/components/map/Markers.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Marker } from "react-map-gl";
+import { useSelector } from "react-redux/es/hooks/useSelector";
+import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
+import { Box, useTheme } from "@mui/material";
+
+import type { IStore } from "@/types/store";
+
+const Markers = () => {
+  const { markers } = useSelector((state: IStore) => state.map);
+
+  const theme = useTheme();
+
+  return (
+    <>
+      {markers.map((marker) => (
+        <Marker
+          key={marker.id}
+          longitude={marker.long}
+          latitude={marker.lat}
+          anchor="bottom"
+        >
+          <Box position="relative">
+            <Icon iconName={ICON_NAME.LOCATION_MARKER} htmlColor="#cf0707" fontSize="large"/>
+            <Box position="absolute" top="3px" left="50%" sx={{
+              transform: "translateX(-50%)"
+            }}>
+              <Icon iconName={marker.iconName as ICON_NAME} htmlColor={theme.palette.background.paper} sx={{
+                fontSize: "17px"
+              }}/>
+            </Box>
+          </Box>
+        </Marker>
+      ))}
+    </>
+  );
+};
+
+export default Markers;
diff --git a/apps/web/components/map/controls/Geocoder.tsx b/apps/web/components/map/controls/Geocoder.tsx
@@ -22,6 +22,14 @@ import search from "@/lib/services/geocoder";
 import type { FeatureCollection } from "geojson";
 import { match } from "@/lib/utils/match";
 
+import type {
+  Result,
+  // Feature,
+  // Context,
+  // Geometry,
+  // Properties,
+} from "@/types/map/controllers";
+
 type Props = {
   endpoint?: string;
   source?: string;
@@ -36,42 +44,6 @@ type Props = {
   pointZoom?: number;
 };
 
-export interface Result {
-  feature: Feature;
-  label: string;
-}
-
-interface Feature {
-  id: string;
-  type: string;
-  place_type: string[];
-  relevance: number;
-  properties: Properties;
-  text: string;
-  place_name: string;
-  center: [number, number];
-  geometry: Geometry;
-  address: string;
-  context: Context[];
-}
-
-interface Context {
-  id: string;
-  text: string;
-  wikidata?: string;
-  short_code?: string;
-}
-
-interface Geometry {
-  type: string;
-  coordinates: [number, number];
-  interpolated: boolean;
-}
-
-interface Properties {
-  accuracy: string;
-}
-
 const COORDINATE_REGEX_STRING =
   "^[-+]?([1-8]?\\d(\\.\\d+)?|90(\\.0+)?),\\s*[-+]?(180(\\.0+)?|((1[0-7]\\d)|([1-9]?\\d))(\\.\\d+)?)";
 const COORDINATE_REGEX = RegExp(COORDINATE_REGEX_STRING);
@@ -290,7 +262,7 @@ export default function Geocoder({
                       display: "flex",
                       alignItems: "center",
                       width: 350,
-                      [theme.breakpoints.down('sm')]: {
+                      [theme.breakpoints.down("sm")]: {
                         width: 270,
                       },
                     }}
@@ -300,9 +272,9 @@ export default function Geocoder({
                       fontSize="small"
                       sx={{
                         color: focused
-                              ? theme.palette.primary.main
-                              : theme.palette.text.secondary,
-                            margin: theme.spacing(2),
+                          ? theme.palette.primary.main
+                          : theme.palette.text.secondary,
+                        margin: theme.spacing(2),
                       }}
                     />
                     <Divider
@@ -385,8 +357,7 @@ export default function Geocoder({
                       sx={{
                         paddingLeft: theme.spacing(3),
                         "&:hover": {
-                          backgroundColor:
-                            theme.palette.background.default,
+                          backgroundColor: theme.palette.background.default,
                         },
                       }}
                     >
@@ -431,4 +402,4 @@ export default function Geocoder({
       )}
     </>
   );
-}
+}
diff --git a/apps/web/components/map/panels/Container.tsx b/apps/web/components/map/panels/Container.tsx
@@ -44,7 +44,20 @@ export default function Container(props: ContainerProps) {
         direction="row"
       >
         {header ? (
-          header
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "20px",
+              width: "100%",
+            }}
+          >
+            {header}
+            <IconButton onClick={() => close(undefined)}>
+              <Icon iconName={ICON_NAME.CLOSE} fontSize="small" />
+            </IconButton>
+          </Box>
         ) : (
           <Box
             sx={{

diff --git a/apps/web/components/map/panels/mapStyle/ColorOptionFill.tsx b/apps/web/components/map/panels/mapStyle/ColorOptionFill.tsx
@@ -10,6 +10,7 @@ import {
 } from "@mui/material";
 import React from "react";
 import { useSelector } from "react-redux";
+import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
 
 import { useAppDispatch } from "@/hooks/store/ContextHooks";
 

diff --git a/apps/web/components/map/panels/mapStyle/ColorOptionSymbol.tsx b/apps/web/components/map/panels/mapStyle/ColorOptionSymbol.tsx
@@ -11,6 +11,7 @@ import {
 import React from "react";
 import { useSelector } from "react-redux";
 import { useAppDispatch } from "@/hooks/store/ContextHooks";
+import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
 
 const ColorOptionSymbol = () => {
   const mapLayer = useSelector(selectMapLayer);

diff --git a/apps/web/components/map/panels/mapStyle/MapStyle.tsx b/apps/web/components/map/panels/mapStyle/MapStyle.tsx
@@ -10,17 +10,16 @@ import {
   InputLabel,
 } from "@mui/material";
 import { useDispatch } from "react-redux";
-
 import { useTranslation } from "@/i18n/client";
 import { setActiveRightPanel } from "@/lib/store/map/slice";
 import { useState } from "react";
 import ProjectLayerDropdown from "@/components/map/panels/ProjectLayerDropdown";
 import { useActiveLayer } from "@/hooks/map/LayerPanelHooks";
 import Marker from "@/components/map/panels/mapStyle/Marker";
 
-interface MapStyleProps {
-  projectId: string;
-}
+// interface MapStyleProps {
+//   projectId: string;
+// }
 
 const MapStylePanel = ({ projectId }: MapStyleProps) => {
   const theme = useTheme();

diff --git a/apps/web/components/map/panels/properties/Properties.tsx b/apps/web/components/map/panels/properties/Properties.tsx
@@ -200,7 +200,7 @@ const Visibility = ({
   );
 };
 
-const Symbology = ({ layer }: { layer: ProjectLayer }) => {
+const Symbology = () => {
   return (
     <AccordionWrapper
       header={<AccordionHeader title="Symbology" />}

diff --git a/apps/web/components/map/panels/toolbox/Toolbox.tsx b/apps/web/components/map/panels/toolbox/Toolbox.tsx
@@ -1,15 +1,53 @@
+import React, { useState } from "react";
 import Container from "@/components/map/panels/Container";
 import ToolTabs from "@/components/map/panels/toolbox/tools/ToolTabs";
 import { useAppDispatch } from "@/hooks/store/ContextHooks";
 import { setActiveRightPanel } from "@/lib/store/map/slice";
+import { Box, Typography, IconButton } from "@mui/material";
+import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
+import { useTranslation } from "@/i18n/client";
 
 const ToolboxPanel = () => {
+  const [title, setTitle] = useState<string>("Toolbox");
+  const [defaultRoute, setDefaultRoute] = useState<"root" | undefined>(
+    undefined,
+  );
+
   const dispatch = useAppDispatch();
+  const { t } = useTranslation("maps");
+
   return (
     <Container
-      title="Toolbox"
+      header={
+        <>
+          <Box display="flex" justifyContent="start" alignItems="center">
+            {title !== "Toolbox" ? (
+              <IconButton onClick={() => setDefaultRoute("root")}>
+                <Icon iconName={ICON_NAME.CHEVRON_LEFT} sx={{fontSize: "15px"}}/>
+              </IconButton>
+            ) : null}
+            <Typography
+              variant="body1"
+              fontWeight="bold"
+              sx={{
+                display: "flex",
+              }}
+            >
+              {title !== "Toolbox"
+                ? t(`panels.tools.${title}.${title}`)
+                : title}
+            </Typography>
+          </Box>
+        </>
+      }
       close={() => dispatch(setActiveRightPanel(undefined))}
-      body={<ToolTabs />}
+      body={
+        <ToolTabs
+          setTitle={setTitle}
+          defaultRoute={defaultRoute}
+          setDefaultRoute={setDefaultRoute}
+        />
+      }
     />
   );
 };