Merge pull request #1 from abhilash-aot/leaflet-skeleton

fixed Unknown Component Render issue
RyanBirtch-aot · Jun 4, 2024 · a236b63 · a236b63
2 parents 00b4953 + 183e48d
commit a236b63
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 48 deletions.
diff --git a/app/frontend/src/components/designer/FormDesigner.vue b/app/frontend/src/components/designer/FormDesigner.vue
@@ -184,7 +184,7 @@ export default {
               simplefile: this.form.userType !== this.ID_MODE.PUBLIC,
               bcaddress: true,
               simplebcaddress: true,
-              MapComponent: true,
+              map: true,
             },
           },
         },

diff --git a/components/package-lock.json b/components/package-lock.json
diff --git a/components/package.json b/components/package.json
@@ -50,6 +50,7 @@
     "@bcgov/smk": "^1.2.1",
     "autocompleter": "^7.0.1",
     "formiojs": "^4.14.6",
+    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "native-promise-only": "^0.8.1",
     "path-browserify": "^1.0.1",

diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts
@@ -2,55 +2,53 @@ import { Components } from 'formiojs';
 const FieldComponent = (Components as any).components.field;
 // import MapService from './services/MapService';
 
-const CENTER = [48.41939025932759,-123.37029576301576]
+const CENTER = [48.41939025932759, -123.37029576301576];
 
-class Component extends (FieldComponent as any) {
-    static schema(...extend) {
-        return FieldComponent.schema({
-            type: 'map',
-            label: 'Map',
-            key: 'map',
-            input: true,
-            ...extend,
-        });
-    }
-    static get builderInfo() {
-        return {
-            title: 'Map',
-            group: 'basic',
-            icon: 'map',
-            weight: 70,
-            schema: Component.schema(),
-        };
-    }
-    
-    render() {
-        return super.render(        
-        `
+export default class Component extends (FieldComponent as any) {
+  static schema(...extend) {
+    return FieldComponent.schema({
+      type: 'map',
+      label: 'Map',
+      key: 'map',
+      input: true,
+      ...extend,
+    });
+  }
+  static get builderInfo() {
+    return {
+      title: 'Map',
+      group: 'basic',
+      icon: 'map',
+      weight: 70,
+      schema: Component.schema(),
+    };
+  }
+
+  render() {
+    return super.render(
+      `
         <div id="mapContainer" style="height:400px; z-index:1;"></div>
         
         `
-        )
-    }
-    attach(element) {
-        const superAttach = super.attach(element);
-        this.loadMap();
-        return superAttach
-    }
-    loadMap() {
-        const mapContainer = document.getElementById("mapContainer");
-        const form = document.getElementsByClassName("formio")
-        const drawOptions = {
-            circlemarker:false,
-            polygon: false,
-            polyline: false,
-            rectangle:false
-        }
-        // MapService({mapContainer, drawOptions, center:CENTER, form})
-
-    }
-
+    );
+  }
+  attach(element) {
+    const superAttach = super.attach(element);
+    this.loadMap();
+    return superAttach;
+  }
+  loadMap() {
+    const mapContainer = document.getElementById('mapContainer');
+    const form = document.getElementsByClassName('formio');
+    const drawOptions = {
+      circlemarker: false,
+      polygon: false,
+      polyline: false,
+      rectangle: false,
+    };
+    // MapService({mapContainer, drawOptions, center:CENTER, form})
+  }
 }
 
 // Components.addComponent('map', MapComponent);
-export default Component;
+export {};
diff --git a/components/src/components/index.ts b/components/src/components/index.ts
@@ -45,7 +45,7 @@ import simplesignatureadvanced from './SimpleSignatureAdvanced/Component';
 import simplebuttonadvanced from './SimpleButtonAdvanced/Component';
 import bcaddress from './BCAddress/Component';
 import simplebcaddress from './SimpleBCAddress/Component';
-import MapComponent from './Map/Component';
+import map from './Map/Component';
 
 export default {
   orgbook,
@@ -95,5 +95,5 @@ export default {
   simplebuttonadvanced,
   bcaddress,
   simplebcaddress,
-  MapComponent,
+  map,
 };