Add Json editor

package.json

@@ -16,6 +16,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@json-editor/json-editor": "^2.9.1",
     "browser-image-compression": "^1.0.17",
     "ekko-lightbox": "^5.3.0",
     "luxon": "^1.26.0",
@@ -93,4 +94,4 @@
     "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   }
-}
\ No newline at end of file
+}

src/components/Observation.vue

@@ -89,7 +89,7 @@
 					</legend>
 					<quantification :isEditable="false" :observationId="observation.observationId"
 						:organismId="observation.organismId" :schemaData="observation.observationData"
-						v-on:updateQuntificationData="updateQuntificationData"> </quantification>
+						v-on:updateQuantificationData="updateQuantificationData"> </quantification>
 				</fieldset>
 			</div>
 		</div>
@@ -661,7 +661,7 @@
 
 
 			},
-			updateQuntificationData(schemaData) {
+			updateQuantificationData(schemaData) {
 				this.observation.observationData = schemaData;
 			},
 

src/components/Quantification.vue

@@ -23,37 +23,42 @@
 -->
 <template>
 	<div>
-		<!-- <router-link v-show="iseditable" :to="{name:'Observation', params:{observationId:observation_Id}}">Back</router-link> -->
-		<div v-if="isMounted">
-			<FormSchema :schema="observationDataSchema" v-model="observationData" @change="change"></FormSchema>
-		</div>
-
+		<div id="quantificationForm"/>
 	</div>
 </template>
 <script>
-	import CommonUtil from '@/components/CommonUtil'
-	import FormSchema from '@formschema/native'
+	import CommonUtil from '@/components/CommonUtil';
+	import { JSONEditor } from "@json-editor/json-editor/dist/jsoneditor";
+
 	export default {
 		props: ['observationId', 'organismId', 'isEditable', 'schemaData'],
-		components: {FormSchema},
 		data() {
 			return {
-				isMounted: false,
 				observation_Id: '',
 				organism_id: '',
 				iseditable: true,
 				observationDataSchema: {},
-				observationData: {}
+				observationData: null,
+				editor: null
+			}
+		},
+		watch: {
+			organismId: function(val, oldVal)
+			{
+				this.observationData = null;
+				this.initQuantification();
 			}
 		},
 		methods:
 		{
 			change() {
-				this.$emit('updateQuntificationData', this.observationData);
+				this.observationData = this.editor.getValue();
+				this.$emit('updateQuantificationData', this.observationData);
 			},
 			initQuantification() {
-
-
+				this.observation_Id = (this.observationId) ? this.observationId : this.$route.params.observationId;
+				this.organism_id = (this.organismId) ? this.organismId : this.$route.params.organismId;
+				
 				let pestList = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_PEST_LIST));
 				let pest = pestList.find(({organismId}) => organismId === this.organism_id);
 				if(pest == null)
@@ -64,8 +69,31 @@
 					}
 				}
 				this.observationDataSchema = JSON.parse(pest.observationDataSchema);
+				if(this.observationData == null)
+				{ 
+					this.observationData = JSON.parse(pest.observationData);
+				}
 
-
+				// Only on first time setup
+				if(this.editor == null)
+				{
+					this.editor = new JSONEditor(document.getElementById('quantificationForm'),{
+						schema: this.observationDataSchema,
+						ajax: true, // If true, JSON Editor will load external URLs in $ref via ajax.
+						theme: "bootstrap4",
+						disable_edit_json: true, // If true, remove all Edit JSON buttons from objects.
+						disable_properties: true, // If true, remove all Edit Properties buttons from objects.
+						remove_button_labels: true, // Display only icons in buttons. This works only if iconlib is set.
+						disable_collapse: true // Make sure no elements can be collapsed
+					});
+					this.editor.on("ready",()=>{this.editor.setValue(this.observationData);})
+					this.editor.on("change",this.change);
+				}
+				else
+				{
+					// Subsequent calls to initQuantification() means that a new value must be set
+					this.editor.setValue(this.observationData);
+				}
 			}
 		},
 		errorCaptured(err, vm, info) {
@@ -74,22 +102,14 @@
 			CommonUtil.logInfo('info : ' + info);
 		},
 		mounted() {
-			this.isMounted = true;
-			this.observation_Id = (this.observationId) ? this.observationId : this.$route.params.observationId;
-			this.organism_id = (this.organismId) ? this.organismId : this.$route.params.organismId;
-			this.observationData = (this.schemaData) ? this.schemaData : (this.$route.params.schemaData) ? this.$route.params.schemaData : '';
-
-
+			this.observationData = (this.schemaData) ? this.schemaData : (this.$route.params.schemaData) ? this.$route.params.schemaData : null;
 			if (typeof (this.isEditable) === 'undefined') {
 				this.iseditable = true;
 			}
 			else {
 				this.iseditable = false;
 			}
-
 			this.initQuantification();
-			//CommonUtil.logInfo(this.observationDataSchema);
-
 		},
 
 	}