[airavata-django-portal] 04/05: Add metadata field editor to app input editor

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git

commit bdb9e4a5827e7c0f15a98deeb493352ef441874b
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Thu Oct 11 16:52:24 2018 -0400

    Add metadata field editor to app input editor
---
 .../applications/ApplicationInputFieldEditor.vue   | 14 +++++--
 .../src/components/applications/JSONEditor.vue     | 47 ++++++++++++++++++++++
 django_airavata/apps/api/serializers.py            |  8 ++++
 3 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
index 99dbadf..b3efbab 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue
@@ -26,7 +26,8 @@
       </b-form-group>
       <div class="d-flex">
         <b-form-group class="flex-fill" label="Standard Input" :label-for="id+'-standard-input'">
-          <b-form-radio-group :id="id+'-standard-input'" v-model="data.standardInput" :options="trueFalseOptions" :disabled="readonly">
+          <b-form-radio-group :id="id+'-standard-input'" v-model="data.standardInput" :options="trueFalseOptions"
+            :disabled="readonly">
           </b-form-radio-group>
         </b-form-group>
         <b-form-group class="flex-fill" label="Read Only" :label-for="id+'-read-only'">
@@ -35,8 +36,8 @@
         </b-form-group>
       </div>
       <b-form-group label="User Friendly Description" :label-for="id+'-user-friendly-description'">
-        <b-form-textarea :id="id+'-user-friendly-description'" v-model="data.userFriendlyDescription" :rows="3" :disabled="readonly"
-        />
+        <b-form-textarea :id="id+'-user-friendly-description'" v-model="data.userFriendlyDescription" :rows="3"
+          :disabled="readonly" />
       </b-form-group>
       <div class="d-flex">
         <b-form-group class="flex-fill" label="Data is staged" :label-for="id+'-data-staged'">
@@ -53,6 +54,9 @@
           :disabled="readonly">
         </b-form-radio-group>
       </b-form-group>
+      <b-form-group label="Metadata" :label-for="id+'-metadata'" description="Metadata for this input, in the JSON format">
+        <json-editor :id="id+'-metadata'" v-model="data.metaData" :rows="5" :disabled="readonly" />
+      </b-form-group>
     </b-collapse>
   </b-card>
 </template>
@@ -60,6 +64,7 @@
 <script>
 import { models } from "django-airavata-api";
 import vmodel_mixin from "../commons/vmodel_mixin";
+import JSONEditor from "./JSONEditor.vue";
 
 export default {
   name: "application-input-field-editor",
@@ -80,6 +85,9 @@ export default {
       default: false
     }
   },
+  components: {
+    'json-editor': JSONEditor
+  },
   computed: {
     inputTypeOptions() {
       return models.DataType.values.map(dataType => {
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/JSONEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/JSONEditor.vue
new file mode 100644
index 0000000..54f8941
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/JSONEditor.vue
@@ -0,0 +1,47 @@
+<template>
+  <b-form-textarea :id="id" v-model="jsonString" @input="valueChanged" :rows="rows" :disabled="disabled" :state="state" />
+</template>
+
+<script>
+export default {
+  name: "json-editor",
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+    id: String,
+    rows: Number,
+    disabled: Boolean
+  },
+  data() {
+    return {
+      jsonString: this.value ? this.formatJSON(this.value) : null,
+      state: null
+    };
+  },
+  methods: {
+    formatJSON(value) {
+      return JSON.stringify(value, null, 4);
+    },
+    valueChanged(newValue) {
+      try {
+        if (newValue) {
+          const parsedValue = JSON.parse(newValue);
+          this.$emit("input", parsedValue);
+        } else {
+          this.$emit("input", null);
+        }
+        this.state = true;
+      } catch (e) {
+        this.state = false;
+      }
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.jsonString = newValue ? this.formatJSON(newValue) : null;
+    }
+  }
+};
+</script>
diff --git a/django_airavata/apps/api/serializers.py b/django_airavata/apps/api/serializers.py
index d29f726..5be55d4 100644
--- a/django_airavata/apps/api/serializers.py
+++ b/django_airavata/apps/api/serializers.py
@@ -98,6 +98,12 @@ class StoredJSONField(serializers.JSONField):
         except Exception:
             return value
 
+    def to_internal_value(self, data):
+        try:
+            return json.dumps(data)
+        except (TypeError, ValueError):
+            self.fail('invalid')
+
 
 class OrderedListField(serializers.ListField):
 
@@ -245,6 +251,8 @@ class ApplicationModuleSerializer(
 class InputDataObjectTypeSerializer(
         thrift_utils.create_serializer_class(InputDataObjectType)):
 
+    metaData = StoredJSONField(required=False, allow_null=True)
+
     class Meta:
         required = ('name',)