From effb0726325c1c6030c4d4b0ea9a509b86edb219 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 27 Aug 2024 12:58:43 +0200
Subject: [PATCH] feat: display static map for inactive List "map" fields
 (#3568)

---
 .../@planx/components/List/Public/index.tsx   |  4 +-
 .../src/@planx/components/List/utils.tsx      | 54 +++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
index 8783f7ed3c..cd1d4f3aae 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -105,7 +105,9 @@ const InactiveListCard: React.FC<{
         <TableBody>
           {schema.fields.map((field, j) => (
             <TableRow key={`tableRow-${j}`}>
-              <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}>
+              <TableCell
+                sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD, maxWidth: "100px" }}
+              >
                 {field.data.title}
               </TableCell>
               <TableCell>
diff --git a/editor.planx.uk/src/@planx/components/List/utils.tsx b/editor.planx.uk/src/@planx/components/List/utils.tsx
index cbc4cd9df3..71044f10aa 100644
--- a/editor.planx.uk/src/@planx/components/List/utils.tsx
+++ b/editor.planx.uk/src/@planx/components/List/utils.tsx
@@ -43,6 +43,60 @@ export function formatSchemaDisplayValue(
       );
       return matchingOption?.data.text;
     }
+    case "map": {
+      const feature = value[0] as string as any; // won't be necessary to cast once we're only setting "geojsonData" prop in future
+      const drawType = field.data.mapOptions?.drawType;
+
+      switch (drawType) {
+        case "Point":
+          // Our "geojsonData" layer doesn't have a "point" style yet, so make due with center marker for now!
+          //   Once style layers are more comprehensive, share same map as "Polygon" style here
+          return (
+            <>
+              {/* @ts-ignore */}
+              <my-map
+                id="inactive-list-map"
+                latitude={feature.geometry.coordinates[1]}
+                longitude={feature.geometry.coordinates[0]}
+                zoom={19}
+                showCentreMarker
+                markerLatitude={feature.geometry.coordinates[1]}
+                markerLongitude={feature.geometry.coordinates[0]}
+                markerColor={field.data.mapOptions?.drawColor}
+                osProxyEndpoint={`${
+                  import.meta.env.VITE_APP_API_URL
+                }/proxy/ordnance-survey`}
+                hideResetControl
+                staticMode
+                style={{ width: "100%", height: "30vh" }}
+                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                collapseAttributions
+              />
+            </>
+          );
+        case "Polygon":
+          return (
+            <>
+              {/* @ts-ignore */}
+              <my-map
+                id="inactive-list-map"
+                geojsonData={JSON.stringify(feature)}
+                geojsonColor={field.data.mapOptions?.drawColor}
+                geojsonFill
+                geojsonBuffer={20}
+                osProxyEndpoint={`${
+                  import.meta.env.VITE_APP_API_URL
+                }/proxy/ordnance-survey`}
+                hideResetControl
+                staticMode
+                style={{ width: "100%", height: "30vh" }}
+                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                collapseAttributions
+              />
+            </>
+          );
+      }
+    }
   }
 }