adding fix for multi polygon

Author: KittyJose

packages/tdb-documents-ui/src/arrayTypeFrames/arrayTypeFrames.js

@@ -44,32 +44,18 @@ function gatherItems (item, dimension, type) {
 
     // multi polygon
     if(dimension === CONST.POLYGON_TYPE_DIMENSION && type === CONST.MULTIPOLYGON) {
-        let multipolygon=[]
-
-        let polygonLayout= {
-            type: "array",
-            [CONST.DIMENSION]: dimension,
-            items: [{
-                title: item,
-                type: "array",
-                items: helper.POINT_TYPE_LAYOUT
-            }],
-            additionalItems: {
-                title: item,
+        return {
+            type: "array", 
+            title: "Polygon",
+            description: "Add a polygon",
+            items: {
                 type: "array", 
-                items: helper.POINT_TYPE_LAYOUT
+                title: "coordinates",
+                description: "Add coordinates",
+                items: [ {type: CONST.STRING_TYPE}, {type: CONST.STRING_TYPE} ]
             }
         }
-
-        let multiPolygonLayout = {
-            type: "array",
-            title: "polygon",
-            [CONST.DIMENSION]: dimension,
-            items: [polygonLayout],
-            additionalItems: polygonLayout
-        }
-        multipolygon.push(multiPolygonLayout)
-        return multipolygon
+      
     }
 
     // mostly b_box
@@ -110,40 +96,48 @@ function gatherUIItems (frame, item, documentation, dimension, type) {
         }
     }
     else if (dimension === CONST.POLYGON_TYPE_DIMENSION && type === CONST.MULTIPOLYGON) {
-        let uiPolygon = {
-            "items": helper.POINT_TYPE_UI_LAYOUT
-        }
-        
-        let ui={
-            //"ui:title": "test", 
-            "ui:description": "Add a new Polygon ...",
-            "classNames": "tdb__input tdb__multipolygon__input",
-            "items": {
+        let uiMultiPolygionLayout={
+            "ui:title": "MultiPolygon",
+            "ui:description": "MultiPolygon",
+            "classNames": "card border border-secondary p-2",
+            items: {
+                "ui:title": "Polygon",
+                "ui:description": "Add Polygon ...",
                 "ui:ArrayFieldTemplate": ArrayFieldTemplate,
                 "ui:options" : {
                     addable: true,
                     orderable: true,
                     removable: true
                 },
-                "items" :  helper.POINT_TYPE_UI_LAYOUT,
-                "additionalItems": helper.POINT_TYPE_UI_LAYOUT 
-            }
-        }
-
-        return {
-            "ui:title": "polygon", 
-            "items": {
-                
-                "ui:ArrayFieldTemplate": ArrayFieldTemplate,
-                "ui:options" : {
-                    addable: true,
-                    orderable: true,
-                    removable: true
-                },
-                "items" : ui,
-                "additionalItems": ui
+                items: {
+                    "ui:title": "Coordinates",
+                    "ui:description": "Add Coordinates ...",
+                    "ui:ArrayFieldTemplate": ArrayFieldTemplate,
+                    "ui:options" : {
+                        addable: true,
+                        orderable: true,
+                        removable: true
+                    },
+                    items: [
+                        { 
+                            "ui:placeholder": `Enter latitude ...`,
+                            classNames: "tdb__input mb-3"
+                        },
+                        {
+                            "ui:placeholder": `Enter longitude ...`, 
+                            classNames: "tdb__input mb-3"
+                        }
+                    ]
+                }
+            },
+            "ui:ArrayFieldTemplate": ArrayFieldTemplate,
+            "ui:options" : {
+                addable: true,
+                orderable: true,
+                removable: true
             }
         }
+        return uiMultiPolygionLayout
     }
     else {
         // for points and line strings

packages/tdb-documents-ui/src/dataTypeFrames/dataType.utils.js

@@ -15,10 +15,12 @@ export function getUILayout(frame, item, uiFrame, mode, formData, documentation)
     let data = formData && formData.hasOwnProperty(item) ?  formData[item] : null
     let uiLayout=helper.getUIBasedOnType(frame, item, uiFrame, mode, data, documentation)
     // if property is lexical key then make read only
-    if(mode !== CONST.CREATE && frame && frame.hasOwnProperty("@key") && util.checkIfKey(item, frame["@key"])) {
-        //uiLayout["ui:readonly"] = true
+    if(mode === CONST.EDIT && frame && frame.hasOwnProperty("@key") && util.checkIfKey(item, frame["@key"])) {
         uiLayout["classNames"] = uiLayout["classNames"] + " tdb__key__field "
     } 
+    else if(mode === CONST.VIEW) {
+        uiLayout["ui:readonly"] = true
+    }
     //let addedCustomUI=util.addCustomUI(item, uiFrame, uiLayout)
     return uiLayout
 } 

packages/tdb-documents-ui/src/maps/polygonMapViewer.js

@@ -15,20 +15,10 @@ export const polygonMapViewer = (args) => {
 
 	useEffect(() => {
 		map()
-	}, []) 
+	}, [])  
 
 	const map = () => {
-		//var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
-		/*documents = [
-			[ // first polygon
-			  [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
-			  [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
-			],
-			[ // second polygon
-			  [[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]]
-			]
-		  ];*/
-
+		
 		let mapOptions = customMapOptions(zoom, [37, -109.05], documents, type)
         let markerOptions= customMarkerOptions(icon)