basic ui skeleton

theopensystemslab · Aug 29, 2024 · 4cb3203 · 4cb3203
1 parent f484485
commit 4cb3203
Showing 1 changed file with 55 additions and 18 deletions.
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -1,18 +1,23 @@
+import DeleteIcon from "@mui/icons-material/Delete";
 import TabContext from "@mui/lab/TabContext";
 import TabPanel from "@mui/lab/TabPanel";
 import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import MenuItem from "@mui/material/MenuItem";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
 import { SiteAddress } from "@planx/components/FindProperty/model";
 import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
-import { Feature } from "geojson";
-import { GeoJsonObject } from "geojson";
+import { Feature, GeoJsonObject } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
+import SelectInput from "ui/editor/SelectInput";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
+import InputLabel from "ui/public/InputLabel";
 
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import Card from "../../shared/Preview/Card";
 import CardHeader from "../../shared/Preview/CardHeader";
 import { MapContainer } from "../../shared/Preview/MapContainer";
@@ -80,24 +85,57 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
             value={feature.properties?.label}
             sx={{ width: "100%" }}
           >
-            <Typography component="h2" variant="h3">
-              {`${schema.type} ${feature.properties?.label}`}
-            </Typography>
-            <Typography variant="body2" mb={2}>
-              {`${feature.geometry.type}`}
-              {feature.geometry.type === "Point"
-                ? ` (${feature.geometry.coordinates.map((coord) =>
-                    coord.toFixed(5),
-                  )})`
-                : ` (area ${
-                    feature.properties?.["area.squareMetres"] || 0
-                  } m²)`}
-            </Typography>
+            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", height: "90px" }}>
+              <Box>
+                <Typography component="h2" variant="h3">
+                  {`${schema.type} ${feature.properties?.label}`}
+                </Typography>
+                <Typography variant="body2" mb={2}>
+                  {`${feature.geometry.type}`}
+                  {feature.geometry.type === "Point"
+                    ? ` (${feature.geometry.coordinates.map((coord) =>
+                      coord.toFixed(5),
+                    )})`
+                    : ` (area ${feature.properties?.["area.squareMetres"] || 0
+                    } m²)`}
+                </Typography>
+              </Box>
+              <Box>
+                <InputLabel label="Copy from" id={`select-${i}`}>
+                  <SelectInput
+                    bordered
+                    required
+                    title={"Copy from"}
+                    labelId={`select-label-${i}`}
+                    value={""}
+                    onChange={() => console.log(`TODO - Copy data from another tab`)}
+                    name={""}
+                    style={{ width: "200px" }}
+                  >
+                    {features.filter((feature) => feature.properties?.label !== activeTab).map((option) => (
+                      <MenuItem
+                        key={option.properties?.label}
+                        value={option.properties?.label}
+                      >
+                        {`${schema.type} ${option.properties?.label}`}
+                      </MenuItem>
+                    ))}
+                  </SelectInput>
+                </InputLabel>
+              </Box>
+            </Box>
             <SchemaFields
               schema={schema}
               activeIndex={activeIndex}
               formik={formik}
             />
+            <Button
+              onClick={() => console.log(`TODO - Remove ${schema.type} ${feature.properties?.label}`)}
+              sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD, gap: (theme) => theme.spacing(2), marginTop: 2 }}
+            >
+              <DeleteIcon color="warning" fontSize="medium" />
+              Remove
+            </Button>
           </TabPanel>
         ))}
       </TabContext>
@@ -168,9 +206,8 @@ const Root = () => {
             maxZoom={23}
             latitude={latitude}
             longitude={longitude}
-            osProxyEndpoint={`${
-              import.meta.env.VITE_APP_API_URL
-            }/proxy/ordnance-survey`}
+            osProxyEndpoint={`${import.meta.env.VITE_APP_API_URL
+              }/proxy/ordnance-survey`}
             osCopyright={
               basemap === "OSVectorTile"
                 ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`