Added new generic field components

src/components/controlComponents/paneCapture.vue

@@ -42,22 +42,7 @@
         <a class="uk-accordion-title" href="#">Metadata</a>
         <div class="uk-accordion-content">
 
-          <form @submit.prevent="handleMetadataSubmit">
+          <keyvalList v-model="metadata"/>
-            <div class="uk-margin-remove uk-flex uk-flex-middle">
-              <div class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand" uk-grid>
-                <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
-                <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
-              </div>
-              
-              <a href="#" v-on:click="handleMetadataSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
-
-            </div>
-          </form>
-
-          <div v-for="(value, key) in customMetadata" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
-            <div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ value }}</div>
-            <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
-          </div>
 
         </div>
       </li>
@@ -65,23 +50,7 @@
       <li>
         <a class="uk-accordion-title" href="#">Tags</a>
         <div class="uk-accordion-content">
-
+          <tagList v-model="tags"/>
-          <form @submit.prevent="handleTagSubmit">
-            <div class="uk-margin-small uk-flex uk-flex-middle">
-
-              <div class="uk-margin-remove-top uk-width-expand">
-                <div class="uk-inline uk-width-1-1">
-                  <span class="uk-form-icon"><i class="material-icons">label</i></span>
-                  <input v-model="newTag" class="uk-input uk-form-small" type="text" name="flavor" placeholder="Tag">
-                </div>
-              </div>
-
-              <a href="#" v-on:click="handleTagSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
-            </div>
-          </form>
-
-          <span v-for="tag in tags" :key="tag" v-on:click="delTag(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
-
         </div>
       </li>
 
@@ -185,10 +154,19 @@
 <script>
 import axios from 'axios'
 
+import tagList from "../fieldComponents/tagList"
+import keyvalList from "../fieldComponents/keyvalList"
+
 // Export main app
 export default {
   name: 'paneCapture',
 
+  components: {
+    tagList,
+    keyvalList
+  },
+
+
   data: function () {
     return {
       filename: '',
@@ -212,42 +190,14 @@ export default {
         z: 5
       },
       resizeDims: [640, 480],
-      newTag: "",
       tags: [],
-      customMetadata: {
+      metadata: {
         Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
-      },
-      newMetadata: {
-        key: "",
-        value: ""
       }
     }
   },
 
   methods: {
-    handleMetadataSubmit: function () {
-      console.log("Adding metadata");
-      this.customMetadata[this.newMetadata.key] = this.newMetadata.value
-      this.newMetadata.key = "";
-      this.newMetadata.value = "";
-    },
-
-    delMetadataKey: function (key) {
-      this.$delete(this.customMetadata, key)
-    },
-
-    handleTagSubmit: function () {
-      this.tags.push(this.newTag)
-      this.newTag = "";
-    },
-
-    delTag: function (tag) {
-      console.log(tag)
-      var index = this.tags.indexOf(tag);
-      if (index > -1) {
-        this.tags.splice(index, 1);
-      }
-    },
 
     handleCapture: function() {
       var payload = this.basePayload
@@ -345,7 +295,7 @@ export default {
       }
 
       // Additional metadata
-      payload.metadata = this.customMetadata
+      payload.metadata = this.metadata
       payload.tags = this.tags
 
       // Attach notes

src/components/fieldComponents/keyvalList.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <form @submit.prevent="handleMetadataSubmit">
+      <div class="uk-margin-remove uk-flex uk-flex-middle">
+        <div class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand" uk-grid>
+          <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
+          <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
+        </div>
+        
+        <a href="#" v-on:click="handleMetadataSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
+
+      </div>
+    </form>
+
+    <div v-for="(val, key) in value" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
+      <div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ val }}</div>
+      <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
+    </div>
+  
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'keyvalList',
+
+  data: function () {
+    return {
+      newMetadata: {
+        key: "",
+        value: ""
+      }
+    }
+  },
+
+  props: [
+    'value'
+  ],
+
+  methods: {
+    handleMetadataSubmit: function () {
+      var newSelected = {}
+
+      if (this.value != null) {
+        Object.assign(newSelected, this.value)
+      }
+
+      newSelected[this.newMetadata.key] = this.newMetadata.value
+      this.newMetadata.key = "";
+      this.newMetadata.value = "";
+
+      this.$emit('input', newSelected)
+    },
+
+    delMetadataKey: function (key) {
+      var newSelected = {}
+
+      if (this.value != null) {
+        Object.assign(newSelected, this.value)
+      }
+
+      this.$delete(newSelected, key)
+
+      this.$emit('input', newSelected)
+    },
+
+  }
+}
+</script>
+
+<style scoped></style>

src/components/fieldComponents/tagList.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+
+    <form @submit.prevent="handleTagSubmit">
+      <div class="uk-margin-small uk-flex uk-flex-middle">
+
+        <div class="uk-margin-remove-top uk-width-expand">
+          <div class="uk-inline uk-width-1-1">
+            <span class="uk-form-icon"><i class="material-icons">label</i></span>
+            <input v-model="newTag" class="uk-input uk-form-small" type="text" name="flavor" placeholder="Tag">
+          </div>
+        </div>
+
+        <a href="#" v-on:click="handleTagSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
+      </div>
+    </form>
+
+    <span v-for="tag in value" :key="tag" v-on:click="delTag(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tagList',
+
+  data: function () {
+    return {
+      newTag: ""
+    }
+  },
+
+  props: [
+    'value'
+  ],
+
+  methods: {
+    handleTagSubmit: function () {
+      var newSelected = this.value != null ? [...this.value] : []  // Clone value array
+
+      newSelected.push(this.newTag)
+      this.newTag = "";
+
+      this.$emit('input', newSelected)
+    },
+
+    delTag: function (tag) {
+      var newSelected = this.value != null ? [...this.value] : []  // Clone value array
+
+      if (newSelected.includes(tag)) {
+        var newSelected = newSelected.filter(function(value, index, arr){
+            return value != tag;
+        })
+      }
+
+      this.$emit('input', newSelected)
+    }
+
+  }
+}
+</script>
+
+<style scoped></style>

src/components/panelLeft.vue

@@ -85,7 +85,7 @@ import paneCapture from './controlComponents/paneCapture'
 import paneSettings from './controlComponents/paneSettings'
 
 // Import plugin components
-import JsonForm from './pluginComponents/formComponents/JsonForm'
+import JsonForm from './pluginComponents/JsonForm'
 
 // Export main app
 export default {

src/components/pluginComponents/JsonForm.vue

@@ -41,14 +41,16 @@
 <script>
 import axios from 'axios'
 
-import numberInput from "./fieldComponents/numberInput";
+import numberInput from "../fieldComponents/numberInput"
-import selectList from "./fieldComponents/selectList";
+import selectList from "../fieldComponents/selectList"
-import textInput from "./fieldComponents/textInput";
+import textInput from "../fieldComponents/textInput"
-import htmlBlock from "./fieldComponents/htmlBlock";
+import htmlBlock from "../fieldComponents/htmlBlock"
-import radioList from "./fieldComponents/radioList";
+import radioList from "../fieldComponents/radioList"
-import checkList from "./fieldComponents/checkList"
+import checkList from "../fieldComponents/checkList"
+import tagList from "../fieldComponents/tagList"
+import keyvalList from "../fieldComponents/keyvalList"
 
-import progressBar from "../../genericComponents/progressBar"
+import progressBar from "../genericComponents/progressBar"
 
 export default {
   name: 'JsonForm',
@@ -60,6 +62,8 @@ export default {
     htmlBlock,
     radioList,
     checkList,
+    tagList,
+    keyvalList,
     progressBar
   },