fixing layout for multipolygon

Author: KittyJose

packages/tdb-documents-ui/diff/src/Output.js

@@ -62,7 +62,7 @@ export const Output = () => {
     "@id": "People/1",
     "@type": "People",
     "desc": [
-      "In 2015, the character was selected by Empire magazine as the 50th greatest movie character of all time.[2] On their list of the 100 Greatest Fictional Characters, Fandomania.com ranked the character at number 14.[3]\n\nIn his younger years, Luke used to be called Lukey and it annoyed him very much.\n\n54 43 That's My Number.",
+      "KITTY In 2015, the character was selected by Empire magazine as the 50th greatest movie character of all time.[2] On their list of the 100 Greatest Fictional Characters, Fandomania.com ranked the character at number 14.[3]\n\nIn his younger years, Luke used to be called Lukey and it annoyed him very much.\n\n54 43 That's My Number.",
       "Luke Skywalker is a fictional character and the main protagonist of the original film trilogy of the Star Wars franchise created by George Lucas. The character, portrayed by Mark Hamill, is an important figure in the Rebel Alliance's struggle against the Galactic Empire. He is the twin brother of Rebellion leader Princess Leia Organa of Alderaan, a friend and brother-in-law of smuggler Han Solo, an apprentice to Jedi Masters Obi-Wan \"Ben\" Kenobi and Yoda, the son of fallen Jedi Anakin Skywalker (Darth Vader) and Queen of Naboo/Republic Senator Padmé Amidala and maternal uncle of Kylo Ren / Ben Solo. The now non-canon Star Wars expanded universe depicts him as a powerful Jedi Master, husband of Mara Jade, the father of Ben Skywalker and maternal uncle of Jaina, Jacen and Anakin Solo.\n\nHappy go lucky."
     ],
     "vehicle": [

packages/tdb-documents-ui/geoJSONPlayground/src/frames.js

@@ -17,7 +17,7 @@ export const GEO_JSON_FRAMES = {
       "@subdocument": []
     }
   },
-  "Location": {
+  "Location": { 
     "@key": {
       "@type": "Random"
     },

packages/tdb-documents-ui/src/arrayHelpers/NestedMultiPolygonTemplate.js

@@ -113,7 +113,7 @@ const AddCoordinatesPerPolygon = ({ polygonCount, setPolygon, polygon, data, set
       for(let count = 0; count < polygonCount; count ++) {
         let countID = `Polygon__${count}`
         polygonArray.push(
-          <Card className="bg-secondary" key={`Polygon__${count}`}>
+          <Card className="bg-secondary w-100 mb-3" key={`Polygon__${count}`}>
             <Card.Body>
               <Card.Text className="text-muted fst-italic">{`Polygon number - ${count+1}`}</Card.Text>
               {coordinatesPerPolygon.hasOwnProperty(countID) && <DisplayCoordinatesLatLng 
@@ -160,24 +160,25 @@ export const NestedMultiPolygonArrayFieldTemplate = (args, props, property, id)
     setData(arr => [...arr, []])
   }
 
-  console.log("data", data)
 
-  return <Stack gap={3} className="mb-3">
-    <Stack>
+  return <Stack gap={3} direction="horizontal" className="mb-3">
+    <Stack className="col-md-2">
       <TDBLabel name={props.name} 
         required={props.required} 
         className="tdb__label__width"
         id={id}/>
       <small className="text-muted fst-italic">Click here to add a new Polygon</small>
     </Stack>
-    <AddCoordinatesPerPolygon polygonCount={polygonCount} 
-      onChangeHandler={props.onChange}
-      data={data}
-      setData={setData}
-      setPolygon={setPolygon} 
-      polygon={polygon}/>
-    <Button className="btn btn-sm bg-light text-dark" onClick={addPolygon}>
-      <BiPlus className="mr-1"/>Add Polygon
-    </Button>
+    <Stack className="p-3">
+      <AddCoordinatesPerPolygon polygonCount={polygonCount} 
+          onChangeHandler={props.onChange}
+        data={data}
+        setData={setData}
+        setPolygon={setPolygon} 
+        polygon={polygon}/>
+      <Button className="btn btn-sm bg-light text-dark" onClick={addPolygon}>
+        <BiPlus className="mr-1"/>Add Polygon
+      </Button>
+    </Stack>
   </Stack>
 }

packages/tdb-documents-ui/src/arrayHelpers/geoJSONTemplates.js

@@ -291,7 +291,7 @@ export function PolygonArrayFieldTemplate(props) {
 }
 
 // DISPLAY ADD POLYGON ARRAY TEMPLATE (MULTIPOLYGON)
-export function MultiPolygonArrayFieldTemplate(props) {
+/*export function MultiPolygonArrayFieldTemplate(props) {
   let variant="secondary"
   let label=props.title 
 
@@ -312,7 +312,7 @@ export function MultiPolygonArrayFieldTemplate(props) {
     <small className="text-muted fst-italics">{`Click here to add another Polygon`}</small>
     <AddButton props={props} label={CONST.POLYGON}/>
   </div>
-}
+}*/
 
 // BINDING BOX 
 export function BBoxFieldTemplate(args, props, property) { 
@@ -642,10 +642,11 @@ export const NestedMultiPolygonArrayFieldTemplate = (args, props, property) => {
 		<TDBLabel name={label} 
       hideFieldLabel={props.hideFieldLabel}
       required={props.required}
+      className="tdb__label__width"
       comment={documentation.comment} 
       id={`root_Set_${label}`}/>
 
-    <Stack gap={2}>
+    <Stack gap={2} className="test">
 
       <small className="fst-italic text-muted">Click here to add another Polygon</small>
 

packages/tdb-documents-ui/src/helpers/displayHelper.js

@@ -459,7 +459,7 @@ export function displayMultiPolygonEditDocument(args, props, property, id) {
 
 export function displayNestedMultiPolygonEditDocument (args, props, property, id) { 
   //return geoTemplate.NestedMultiPolygonArrayFieldTemplate(args, props, property, id)
-  return NestedMultiPolygonArrayFieldTemplate(args, props, property, id)
+  return NestedMultiPolygonArrayFieldTemplate(args, props, property, id) 
 }
 
 

packages/tdb-documents-ui/src/helpers/widgetHelper.js

@@ -244,19 +244,23 @@ export function getMultiPolygonUIDisplay (args, property) {
     return { "ui:field": displayGeoJSONView } 
   }
 
-  function coordinatesArrayTemplate(props) { 
-    return display.displayMultiPolygonEditDocument(args, props, property) 
+  function displayMultiPolygonEdit(props) {  
+    //return display.displayMultiPolygonEditDocument(args, props, property) 
+    let id = props.idSchema["$id"]
+    return display.displayNestedMultiPolygonEditDocument(args, props, property, id)
   } 
+
+  return { "ui:field": displayMultiPolygonEdit } 
 
-  return { 
+  /*return { 
     "ui:ArrayFieldTemplate": geoTemplate.MultiPolygonArrayFieldTemplate,
     "items": {
       "ui:ArrayFieldTemplate": coordinatesArrayTemplate,
       "items": {
         "ui:options": CONST.UI_HIDDEN_ARRAY_OPTIONS
       }
     }
-  }
+  }*/
 
 }