Merge remote-tracking branch 'origin/main'

goat-community · Nov 9, 2023 · f8b22da · f8b22da
2 parents 961f036 + c057227
commit f8b22da
Show file tree

Hide file tree

Showing 24 changed files with 1,507 additions and 28 deletions.
diff --git a/apps/web/components/map/panels/ProjectNavigation.tsx b/apps/web/components/map/panels/ProjectNavigation.tsx
@@ -5,7 +5,7 @@ import { ICON_NAME } from "@p4b/ui/components/Icon";
 import LayerPanel from "@/components/map/panels/layer/Layer";
 import Legend from "@/components/map/panels/Legend";
 import Charts from "@/components/map/panels/Charts";
-import Toolbox from "@/components/map/panels/Toolbox";
+import Toolbox from "@/components/map/panels/toolbox/Toolbox";
 import Filter from "@/components/map/panels/filter/Filter";
 import Scenario from "@/components/map/panels/Scenario";
 import MapStyle from "@/components/map/panels/mapStyle/MapStyle";

diff --git a/apps/web/components/map/panels/Toolbox.tsx → ...components/map/panels/toolbox/Toolbox.tsx b/apps/web/components/map/panels/Toolbox.tsx → ...components/map/panels/toolbox/Toolbox.tsx
@@ -1,6 +1,6 @@
 import Container from "@/components/map/panels/Container";
-import { Typography } from "@mui/material";
 import type { MapSidebarItem } from "@/types/map/sidebar";
+import ToolTabs from "@/components/map/panels/toolbox/tools/ToolTabs";
 
 interface ToolboxPanelProps {
   setActiveRight: (item: MapSidebarItem | undefined) => void;
@@ -13,7 +13,7 @@ const ToolboxPanel = (props: ToolboxPanelProps) => {
     <Container
       title="Toolbox"
       close={setActiveRight}
-      body={<Typography variant="body1">Body</Typography>}
+      body={<ToolTabs/>}
     />
   );
 };

diff --git a/apps/web/components/map/panels/toolbox/tools/InputLayer.tsx b/apps/web/components/map/panels/toolbox/tools/InputLayer.tsx
@@ -0,0 +1,152 @@
+import React from "react";
+import {
+  Typography,
+  useTheme,
+  Box,
+  Select,
+  FormControl,
+  InputLabel,
+  MenuItem,
+} 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, layerTypes } = props;
+
+  const theme = useTheme();
+  const { t } = useTranslation("maps");
+
+  const { projectLayers } = useProjectLayers();
+
+  const handleSingleChange = (event: SelectChangeEvent) => {
+    setInputValues(event.target.value as string);
+  };
+
+  const handleMultipleChange = (event: SelectChangeEvent, inputNr: number) => {
+    const multipleValues =
+      typeof inputValues !== "string" ? [...inputValues] : ["", ""];
+    multipleValues[inputNr] = event.target.value as string;
+
+    setInputValues(multipleValues);
+  };
+
+  return (
+    <Box>
+      {multiple ? (
+        <>
+          <Box
+            display="flex"
+            flexDirection="column"
+            gap={theme.spacing(2)}
+            marginBottom={theme.spacing(4)}
+          >
+            <Typography variant="body1" sx={{ color: "black" }}>
+              {t("panels.tools.join.pick_target_layer")}
+            </Typography>
+            <Typography variant="body2" sx={{ fontStyle: "italic" }}>
+              {t("panels.tools.join.target_layer_text")}
+            </Typography>
+            <FormControl fullWidth size="small">
+              <InputLabel id="demo-simple-select-label">
+                {t("panels.tools.select_layer")}
+              </InputLabel>
+              <Select
+                label={t("panels.tools.select_layer")}
+                value={inputValues[0]}
+                onChange={(event: SelectChangeEvent) =>
+                  handleMultipleChange(event, 0)
+                }
+              >
+                {projectLayers.map((layer) => (
+                  <MenuItem value={layer.id} key={v4()}>
+                    {layer.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+          <Box
+            display="flex"
+            flexDirection="column"
+            gap={theme.spacing(2)}
+            marginBottom={theme.spacing(4)}
+          >
+            <Typography
+              variant="body1"
+              sx={{ color: "black", marginBottom: theme.spacing(2) }}
+            >
+              {t("panels.tools.join.pick_join_layer")}
+            </Typography>
+            <Typography variant="body2" sx={{ fontStyle: "italic" }}>
+              {t("panels.tools.join.join_layer_text")}
+            </Typography>
+            <FormControl fullWidth size="small">
+              <InputLabel id="demo-simple-select-label">
+                {t("panels.tools.select_layer")}
+              </InputLabel>
+              <Select
+                label={t("panels.tools.select_layer")}
+                value={inputValues[1]}
+                onChange={(event: SelectChangeEvent) =>
+                  handleMultipleChange(event, 1)
+                }
+              >
+                {projectLayers.map((layer) => (
+                  <MenuItem value={layer.id} key={v4()}>
+                    {layer.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+        </>
+      ) : (
+        <Box
+          display="flex"
+          flexDirection="column"
+          gap={theme.spacing(2)}
+          marginBottom={theme.spacing(4)}
+        >
+          <Typography variant="body1" sx={{ color: "black" }}>
+            {t("panels.tools.aggregate.pick_layer")}
+          </Typography>
+          <Typography variant="body2" sx={{ fontStyle: "italic" }}>
+            {t("panels.tools.aggregate.pick_layer_text")}
+          </Typography>
+          <FormControl fullWidth size="small">
+            <InputLabel id="demo-simple-select-label">
+              {" "}
+              {t("panels.tools.select_layer")}
+            </InputLabel>
+            <Select
+              label={t("panels.tools.select_layer")}
+              value={inputValues}
+              onChange={handleSingleChange}
+            >
+              {projectLayers.map((layer) =>
+                layerTypes.includes(layer.feature_layer_geometry_type) ? (
+                  <MenuItem value={layer.id} key={v4()}>
+                    {layer.name}
+                  </MenuItem>
+                ) : null,
+              )}
+            </Select>
+          </FormControl>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default InputLayer;
diff --git a/apps/web/components/map/panels/toolbox/tools/SaveResult.tsx b/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;
diff --git a/apps/web/components/map/panels/toolbox/tools/ToolTabs.tsx b/apps/web/components/map/panels/toolbox/tools/ToolTabs.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+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;
+  tooltip: string;
+  value: string;
+  element: React.ReactNode;
+}
+
+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 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: <Aggregate projectId={typeof params.projectId === "string" ? params.projectId : ""}/>,
+    },
+    {
+      name: "Summarize features",
+      tooltip:
+        "Utilize join tool to merge columns from different layers. Apply functions like count, sum, min, etc., for desired results.",
+      value: "summarize_features",
+      element: <p>summarize</p>,
+    },
+    {
+      name: "Origin to destination",
+      tooltip:
+        "Utilize join tool to merge columns from different layers. Apply functions like count, sum, min, etc., for desired results.",
+      value: "origin_to_destination",
+      element: <p>origin</p>,
+    },
+  ];
+
+  const handleChange = (newValue: ToolTabType | undefined) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{maxHeight: "100%"}}>
+      {!value &&
+        tabs.map((tab) => (
+          <Box
+            key={v4()}
+            sx={{
+              padding: "12px 0",
+              borderBottom: `1px solid ${theme.palette.primary.main}80`,
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              cursor: "pointer",
+              transition: "all 0.3s ease-in-out",
+              "&:hover": {
+                backgroundColor: `${theme.palette.secondary.light}40`
+              }
+            }}
+            onClick={() => handleChange(tab)}
+          >
+            <Box sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}>
+              <Icon iconName={ICON_NAME.CIRCLEINFO} htmlColor={theme.palette.secondary.light} sx={{ fontSize: "12px" }} />
+              <Typography variant="body1">{tab.name}</Typography>
+            </Box>
+            <Icon
+              iconName={ICON_NAME.CHEVRON_RIGHT}
+              sx={{ fontSize: "12px" }}
+            />
+          </Box>
+        ))}
+      {value ? (
+        <>
+          {/* <Box onClick={() => handleChange(undefined)}>Back</Box> */}
+          {value.element}
+        </>
+      ) : null}
+    </Box>
+  );
+};
+
+export default ToolTabs;