Merge pull request #241 from terminusdb/recentBranch

Recent branch

Author: Francesca-Bit

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/addGeoJSONLayout.js

@@ -34,12 +34,12 @@ export function addGeoJSONLayout (layout, documentFrame, property) {
   } 
   else if (util.isMultiPolygonType(field) && util.isMultiPolygon(documentFrame)) {
     layout["items"]= {
-      "type": CONST.ARRAY_TYPE,
+      "type": CONST.ARRAY_TYPE/*,
       "items": {
         "type": CONST.ARRAY_TYPE,
         "items": { type: CONST.STRING_TYPE },
         "minItems": CONST.POINT_MIN_ITEMS  
-      }
+      }*/
     }
   } 
 }

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

@@ -35,7 +35,8 @@ const DisplayCoordinatesLatLng = ({ coordinatesPerPolygon, polygonID, polygonInd
     }
     //temp[polygonIndex][coordinateIndex]=coord
     temp[polygonIndex][coordinateIndex]=coord
-    if(onChangeHandler) onChangeHandler([data], CONST.COORDINATES_FIELD)
+    //if(onChangeHandler) onChangeHandler([data], CONST.COORDINATES_FIELD)
+    if(onChangeHandler) onChangeHandler([data])
     setData(data)
   }
 
@@ -113,7 +114,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 +161,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

@@ -642,6 +642,7 @@ 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}`}/>
 

packages/tdb-documents-ui/src/css/terminusdb__styles.css

@@ -28,7 +28,7 @@
 
 /** tdb input */
 .tdb__doc__input { 
-  color: var(--input-color);
+  color: var(--input-color) !important;
   background-color: transparent;
   border: var(--input-border) !important;
   display: block;
@@ -40,6 +40,19 @@
   background-clip: padding-box;
 }
 
+/** remove spinners from input of number type*/
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 /** all property labels */
 label.control-label {
   text-align:left; 

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

@@ -9,11 +9,8 @@ import { TDBSubDocument, populateSubDocumentData } from "../widgets/subDocumentW
 import { TDBDocument } from "../widgets/documentWidget"
 import { TDBJSON } from "../widgets/JSONWidget"
 import * as CONST from "../constants"
-import { TDBPointDocuments } from "../widgets/pointGeoJSONWidget"
-import { TDBLineStringDocuments } from "../widgets/lineStringGeoJSONWidget"
 import { TDBGeoCollectionDocuments } from "../mapComponents/geoCollectionWidget"
 import { TDBFeatureCollectionDocuments } from "../mapComponents/featureCollectionWidget"
-import { TDBPolygonDocuments } from "../widgets/polygonGeoJSONWidget"
 import { TDBBBoxDocuments } from "../widgets/bboxGeoJSONWidget"
 import { extractPropertyDocumentation } from "./widgetHelper"
 import { TDBRDFLanguage } from "../widgets/rdfLanguageWidget"
@@ -459,7 +456,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/typeHelper.js

@@ -48,11 +48,13 @@ export const typeHelper = (documentFrame, property, fullFrame, isArray) => {
   }
   else if (util.isPointType(field) || 
     util.isLineStringType(field) ||
-    util.isPolygonType(field)|| 
-    util.isMultiPolygonType(field)) { 
+    util.isPolygonType(field)) { 
     // GEO JSON Types
     return CONST.ARRAY_TYPE
   } 
+  else if(util.isMultiPolygonType(field)){
+    return CONST.ARRAY_TYPE
+  }
   else if(util.isSysUnitDataType(field)) {
     return CONST.ARRAY_TYPE
   }

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
       }
     }
-  }
+  }*/
 
 }
 

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

@@ -31,6 +31,7 @@ export function makeMandatoryFrames (args, property) {
   } 
 
   if(util.isInherritedFromGeoJSONTypes(documentFrame)) {
+      // for multi polyfon logic works differently 
     addGeoJSONLayout(layout, documentFrame, property)
   }
   if(util.isSysUnitDataType(documentFrame[property])) {