Skip to content
Snippets Groups Projects
Quantification.vue 3.87 KiB
<!--
    
  Copyright (c) 2022 NIBIO <http://www.nibio.no/>. 
  
  This file is part of VIPSObservationApp.
  VIPSObservationApp is free software: you can redistribute it and/or modify
  it under the terms of the NIBIO Open Source License as published by 
  NIBIO, either version 1 of the License, or (at your option) any
  later version.
  
  VIPSObservationApp is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  NIBIO Open Source License for more details.
  
  You should have received a copy of the NIBIO Open Source License
  along with VIPSObservationApp.  If not, see <http://www.nibio.no/licenses/>.
    
  Author: Bhabesh Bhabani Mukhopadhyay
  Author: Tor-Einar Skog <tor-einar.skog@nibio.no>
  Dated : 19-Aug-2021
    
-->
<template>
	<div>
		<div id="quantificationForm"/>
	</div>
</template>
<script>
	import CommonUtil from '@/components/CommonUtil';
	import { JSONEditor } from "@json-editor/json-editor/dist/jsoneditor";

	export default {
		props: ['observationId', 'organismId', 'isEditable', 'schemaData'],
		data() {
			return {
				observation_Id: '',
				organism_id: '',
				iseditable: true,
				observationDataSchema: {},
				observationData: null,
				editor: null
			}
		},
		watch: {
			organismId: function(val, oldVal)
			{
				this.observationData = null;
				this.initQuantification();
			}
		},
		methods:
		{
			change() {
				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)
				{
					// TODO: i18n this!!
					pest = {
						observationDataSchema: "{\"$schema\":\"http://json-schema.org/draft-04/schema#\",\"type\":\"object\",\"title\":\" \",\"properties\":{\"number\":{\"title\":\"Antall\",\"type\":\"string\"},\"unit\":{\"title\":\"Måleenhet\",\"type\":\"string\"}}}"
					}
				}
				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) {
			CommonUtil.logInfo('err : ' + err);
			CommonUtil.logInfo('vm : ' + vm);
			CommonUtil.logInfo('info : ' + info);
		},
		mounted() {
			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();
		},

	}
</script>