feat: added the translation and also finished the aggregation tool

apps/web/components/map/panels/toolbox/tools/join/InputLayer.tsx → apps/web/components/map/panels/toolbox/tools/InputLayer.tsx

@@ -10,19 +10,22 @@ import {
 } from "@mui/material";
 import { useProjectLayers } from "@/hooks/map/layersHooks";
 import { v4 } from "uuid";
+import { useTranslation } from "@/i18n/client";
 
 import type { SelectChangeEvent } from "@mui/material";
 
 interface PickLayerProps {
   multiple?: boolean;
   inputValues: string | string[];
   setInputValues: (value: string | string[]) => void;
+  layerTypes: string[];
 }
 
 const InputLayer = (props: PickLayerProps) => {
-  const { multiple = false, inputValues, setInputValues } = props;
+  const { multiple = false, inputValues, setInputValues, layerTypes } = props;
 
   const theme = useTheme();
+  const { t } = useTranslation("maps");
 
   const { projectLayers } = useProjectLayers();
 
@@ -49,17 +52,17 @@ const InputLayer = (props: PickLayerProps) => {
             marginBottom={theme.spacing(4)}
           >
             <Typography variant="body1" sx={{ color: "black" }}>
-              Pick a target layer
+              {t("panels.tools.join.pick_target_layer")}
             </Typography>
             <Typography variant="body2" sx={{ fontStyle: "italic" }}>
-              Select the layer you want to add data
+              {t("panels.tools.join.target_layer_text")}
             </Typography>
             <FormControl fullWidth size="small">
               <InputLabel id="demo-simple-select-label">
-                Select Option
+                {t("panels.tools.select_layer")}
               </InputLabel>
               <Select
-                label="Select Option"
+                label={t("panels.tools.select_layer")}
                 value={inputValues[0]}
                 onChange={(event: SelectChangeEvent) =>
                   handleMultipleChange(event, 0)
@@ -83,17 +86,17 @@ const InputLayer = (props: PickLayerProps) => {
               variant="body1"
               sx={{ color: "black", marginBottom: theme.spacing(2) }}
             >
-              Pick layer to join
+              {t("panels.tools.join.pick_join_layer")}
             </Typography>
             <Typography variant="body2" sx={{ fontStyle: "italic" }}>
-              Select the layer containing the data of interest
+              {t("panels.tools.join.join_layer_text")}
             </Typography>
             <FormControl fullWidth size="small">
               <InputLabel id="demo-simple-select-label">
-                Select Option
+                {t("panels.tools.select_layer")}
               </InputLabel>
               <Select
-                label="Select Option"
+                label={t("panels.tools.select_layer")}
                 value={inputValues[1]}
                 onChange={(event: SelectChangeEvent) =>
                   handleMultipleChange(event, 1)
@@ -116,21 +119,28 @@ const InputLayer = (props: PickLayerProps) => {
           marginBottom={theme.spacing(4)}
         >
           <Typography variant="body1" sx={{ color: "black" }}>
-            Pick a layer
+            {t("panels.tools.aggregate.pick_layer")}
           </Typography>
           <Typography variant="body2" sx={{ fontStyle: "italic" }}>
-            Select the layer you want to add data
+            {t("panels.tools.aggregate.pick_layer_text")}
           </Typography>
           <FormControl fullWidth size="small">
-            <InputLabel id="demo-simple-select-label">Age</InputLabel>
+            <InputLabel id="demo-simple-select-label">
+              {" "}
+              {t("panels.tools.select_layer")}
+            </InputLabel>
             <Select
-              label="age"
+              label={t("panels.tools.select_layer")}
               value={inputValues}
               onChange={handleSingleChange}
             >
-              <MenuItem value={10}>Ten</MenuItem>
-              <MenuItem value={20}>Twenty</MenuItem>
-              <MenuItem value={30}>Thirty</MenuItem>
+              {projectLayers.map((layer) =>
+                layerTypes.includes(layer.feature_layer_geometry_type) ? (
+                  <MenuItem value={layer.id} key={v4()}>
+                    {layer.name}
+                  </MenuItem>
+                ) : null,
+              )}
             </Select>
           </FormControl>
         </Box>

apps/web/components/map/panels/toolbox/tools/SaveResult.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import {
+  Box,
+  Typography,
+  Card,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+  useTheme,
+  TextField,
+  Select,
+  FormControl,
+  InputLabel,
+  MenuItem,
+} from "@mui/material";
+import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
+import { useFolders } from "@/lib/api/folders";
+import { v4 } from "uuid";
+import { useTranslation } from "@/i18n/client";
+
+import type { SelectChangeEvent } from "@mui/material";
+
+interface SaveResultProps {
+  outputName: string | undefined;
+  setOutputName: (value: string) => void;
+  folderSaveId: string | undefined;
+  setFolderSaveID: (value: string) => void;
+}
+
+const SaveResult = (props: SaveResultProps) => {
+  const { outputName, setOutputName, folderSaveId, setFolderSaveID } = props;
+
+  const theme = useTheme();
+  const { t } = useTranslation("maps");
+
+  const { folders } = useFolders();
+
+  return (
+    <Box display="flex" flexDirection="column" gap={theme.spacing(2)}>
+      <Typography variant="body1" sx={{ color: "black" }}>
+        {t("panels.tools.result")}
+      </Typography>
+      <Card
+        sx={{
+          paddingLeft: theme.spacing(2),
+          backgroundColor: `${theme.palette.background.default}80`,
+        }}
+      >
+        <RadioGroup aria-label="options" name="options">
+          <FormControlLabel
+            value={outputName}
+            sx={{
+              span: {
+                fontSize: "12px",
+                fontStyle: "italic",
+              },
+            }}
+            control={
+              <Radio
+                color="default"
+                icon={
+                  <Icon
+                    iconName={ICON_NAME.STAR}
+                    htmlColor={theme.palette.primary.dark}
+                    sx={{ fontSize: "18px" }}
+                  />
+                }
+                checkedIcon={
+                  <Icon
+                    iconName={ICON_NAME.STAR}
+                    htmlColor={theme.palette.primary.main}
+                    sx={{ fontSize: "18px" }}
+                  />
+                }
+              />
+            }
+            label={outputName}
+          />
+        </RadioGroup>
+      </Card>
+      <Typography variant="body1" sx={{ color: "black", marginTop: theme.spacing(5)}}>
+      {t("panels.tools.output_name")}
+      </Typography>
+      <Box>
+        <TextField
+          fullWidth
+          value={outputName ? outputName : ""}
+          label="Name"
+          size="small"
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            setOutputName(event.target.value as string)
+          }
+        />
+      </Box>
+      <Typography variant="body1" sx={{ color: "black" }}>
+      {t("panels.tools.save_in_folder")}
+      </Typography>
+      <Box>
+        <FormControl fullWidth size="small">
+          <InputLabel id="demo-simple-select-label">{t("panels.tools.select_option")}</InputLabel>
+          <Select
+            label={t("panels.tools.select_option")}
+            value={folderSaveId}
+            onChange={(event: SelectChangeEvent) =>
+              setFolderSaveID(event.target.value as string)
+            }
+          >
+            {folders
+              ? folders.map((folder) => (
+                  <MenuItem value={folder.id} key={v4()}>
+                    {folder.name}
+                  </MenuItem>
+                ))
+              : null}
+          </Select>
+        </FormControl>
+      </Box>
+    </Box>
+  );
+};
+
+export default SaveResult;

apps/web/components/map/panels/toolbox/tools/ToolTabs.tsx

@@ -3,6 +3,8 @@ import { Box, useTheme, Typography } from "@mui/material";
 import { v4 } from "uuid";
 import Join from "@/components/map/panels/toolbox/tools/join/Join";
 import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
+import Aggregate from "@/components/map/panels/toolbox/tools/aggregate/Aggregate";
+import { useParams } from "next/navigation";
 
 interface ToolTabType {
   name: string;
@@ -15,21 +17,22 @@ const ToolTabs = () => {
   const [value, setValue] = useState<ToolTabType | undefined>(undefined);
 
   const theme = useTheme();
-
+  const params = useParams();
+
   const tabs: ToolTabType[] = [
     {
       name: "Join",
       tooltip:
         "Utilize join tool to merge columns from different layers. Apply functions like count, sum, min, etc., for desired results.",
       value: "join",
-      element: <Join />,
+      element: <Join projectId={typeof params.projectId === "string" ? params.projectId : ""}/>,
     },
     {
       name: "Aggregate features",
       tooltip:
         "Utilize join tool to merge columns from different layers. Apply functions like count, sum, min, etc., for desired results.",
       value: "aggregate_features",
-      element: <p>aggregate</p>,
+      element: <Aggregate projectId={typeof params.projectId === "string" ? params.projectId : ""}/>,
     },
     {
       name: "Summarize features",