Add foldering

frontend/components/dropdown/Dropdown.vue

+<template>
+  <div :key="dataReady">
+    <vue-dropdown
+      ref="dropdown"
+      :config="config"
+      @setSelectedOption="setNewSelectedOption($event)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isUpload: {
+      type: Boolean,
+      default: false
+    },
+    dropdownValue: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      config: {
+        options: [],
+        width: 200,
+        placeholder: "Choose folder",
+        backgroundColor: "white",
+        textColor: "#1E889B",
+        border: ""
+      },
+      folder: [],
+      dataReady: false
+    }
+  },
+  async created () {
+    await this.getOptions()
+  },
+  methods: {
+    async getOptions() {
+      var urlGet = '/api/image/datasets'
+      const response = await this.$axios.get(urlGet).catch((error) => console.error(error))
+      if (response.data.status === "success") {
+        response.data.data.forEach((dataset) => {
+          var key = "value"
+          var obj = {}
+          obj[key] = dataset
+          this.config.options.push(obj)
+        })
+      }
+      if (this.dropdownValue) {
+        this.config.placeholder = this.dropdownValue
+      }
+      this.dataReady = true
+    },
+    async setNewSelectedOption(selectedOption) {
+      this.config.placeholder = selectedOption.value
+      this.dataset = selectedOption.value
+      this.$emit("onDatasetChanged", this.dataset)
+    }
+  }
+}
+</script>
\ No newline at end of file

frontend/components/label/Label.vue

@@ -11,14 +11,19 @@
       <br>
       <div class="row form-title-margin">
         <div class="col">
-          <input
-            id="imagesID"
-            type="text"
-            class="form-control form-border field-length form-content"
-            placeholder="Search for file name..."
-            name="imagesID"
-            @input="debounceWrapper"
-          >
+          <div class="flex-display">
+            <input
+              id="imagesID"
+              type="text"
+              class="form-control form-border field-length form-content"
+              placeholder="Search for file name..."
+              name="imagesID"
+              @input="debounceWrapper"
+            >
+            <div class="slot-margin">
+              <slot />
+            </div>
+          </div>
         </div>
       </div>
       <br>
@@ -74,6 +79,10 @@ export default {
       type: Boolean,
       default: false
     },
+    dataset: {
+      type: String,
+      default: ''
+    },
     output: {
       type: Object,
       default: () => {
@@ -89,7 +98,7 @@ export default {
       images: {},
       keyword: '',
       isViewerActive: false,
-      perPage: 2,
+      perPage: 3,
       totalRows: 0,
       page: 1,
       timer: '',
@@ -118,7 +127,8 @@ export default {
           PerPage: perPage,
           Page: page,
           search: keyword,
-          Labeled: this.isLabeled
+          Labeled: this.isLabeled,
+          Dataset: this.dataset
         }
       }).catch((error) => console.error(error))
       if (response.data.data.images) {
@@ -181,11 +191,11 @@ export default {
             await this.$axios.get(url)
             alert("This image is currently Labeled")
           } catch (e) {
-            this.$router.push({ path: this.viewerURL, query: { url: image.url, id: image.id }})
+            this.$router.push({ path: this.viewerURL, query: { url: image.url, id: image.id, dataset: this.dataset}})
           }
         }
       } else {
-        this.$router.push({ path: this.viewerURL, query: {type: this.output.type, id: image.id, name: image.name, standard: this.output.standard}})
+        this.$router.push({ path: this.viewerURL, query: {type: this.output.type, id: image.id, name: image.name, standard: this.output.standard, dataset: this.dataset }})
       }
       
     },
@@ -230,4 +240,13 @@ export default {
     justify-self: center;
     width: 18rem;
   }
+
+  .slot-margin {
+    margin-left: 1.5rem;
+  }
+
+  .flex-display {
+    display: flex;
+  }
+
 </style>
\ No newline at end of file

frontend/pages/main/coco.vue

@@ -15,12 +15,19 @@
     </div>
     <div class="row">
       <Label
+        :key="updateUI"
         :is-output-viewer="isOutputViewer"
         :is-labeled="isLabeled"
+        :dataset="dataset"
         title="JSON Per Image"
         viewer-u-r-l="/main/output-view"
         :output="{type: 'json', standard: standard}"
-      />
+      >
+        <Dropdown
+          :dropdown-value="dataset"
+          @onDatasetChanged="changeDataset"
+        />
+      </Label>
     </div>
   </div>
 </template>
@@ -29,10 +36,12 @@
 import getAllLabeledImages from '~/mixins/image/getAllLabeledImages.js'
 import  { backendURL } from '~/config.js'
 import Label from '~/components/label/Label'
+import Dropdown from '~/components/dropdown/Dropdown'
 
 export default {
   components: {
-    Label
+    Label,
+    Dropdown
   },
   mixins: [getAllLabeledImages],
   data () {
@@ -41,17 +50,21 @@ export default {
       isLabeled: true,
       backendURL: backendURL,
       standard: 'coco',
-      search: ''
+      search: '',
+      updateUI: false
     }
   },
-  computed: {
-    filterImages: function(){
-      return this.labeledImages.filter((labs) => {
-        return labs.Filename.match(this.search)
-      })
+  mounted () {
+    if (this.$route.query.dataset) {
+      this.dataset = this.$route.query.dataset
+      this.updateUI = !this.updateUI
     }
   },
   methods: {
+    changeDataset (newDataset) {
+      this.dataset = newDataset
+      this.updateUI = !this.updateUI
+    },
     async getAllLabel(standard){
       var url = '/api/label'
       var response = await this.$axios(url).catch(error => console.log(error))

frontend/pages/main/edit.vue

 <template>
   <Label
+    :key="dataset"
     title="Label Labeled Images"
     viewer-u-r-l="/viewer/index-edit"
     :is-labeled="isLabeled"
-  />
+    :dataset="dataset"
+  >
+    <Dropdown :dropdown-value="dataset" @onDatasetChanged="changeDataset" />
+  </Label>
 </template>
 
 <script>
 import Label from '~/components/label/Label'
+import Dropdown from '~/components/dropdown/Dropdown'
 export default {
   components: {
-    Label
+    Label,
+    Dropdown
   },
   data () {
     return {
-      isLabeled: true
+      isLabeled: true,
+      dataset: ''
+    }
+  },
+  mounted () {
+    if (this.$route.query.dataset) {
+      this.dataset = this.$route.query.dataset
+    }
+  },
+  methods: {
+    changeDataset (newDataset) {
+      this.dataset = newDataset
     }
   }
 }

frontend/pages/main/label.vue

 <template>
-  <Label />
+  <Label :key="dataset" :dataset="dataset">
+    <Dropdown :dropdown-value="dataset" @onDatasetChanged="changeDataset" />
+  </Label>
 </template>
 
 <script>
+
 import Label from '~/components/label/Label'
+import Dropdown from '~/components/dropdown/Dropdown'
+
 export default {
   components: {
-    Label
+    Label,
+    Dropdown
+  },
+  data () {
+    return {
+      dataset: ''
+    }
+  },
+  mounted () {
+    if (this.$route.query.dataset) {
+      this.dataset = this.$route.query.dataset
+    }
+  },
+  methods: {
+    changeDataset (newDataset) {
+      this.dataset = newDataset
+    }
   }
 }
 </script>
\ No newline at end of file

frontend/pages/main/output-view/index.vue

@@ -56,7 +56,8 @@ export default {
         stripComments: true,
         collapseContent: true,
         lineSeparator: '\n'
-      }
+      },
+      dataset: ''
     }
   },
   async mounted() {
@@ -64,17 +65,18 @@ export default {
     this.id = this.$route.query.id
     this.name = this.$route.query.name
     this.standard = this.$route.query.standard
+    this.dataset = this.$route.query.dataset
     this.json = await this.getLabelByID(this.standard)
     // this.xml = XMLFormatter(this.convertToXML(),this.config)
     if(this.type === 'xml'){
       this.xml = this.convertToXML()
-      this.Format()  
+      this.Format()
     }
   },
   methods:{
     closeOutputViewer() {
       if(this.type === 'json'){
-        this.$router.push('/main/coco')
+        this.$router.push({path: '/main/coco', query:{ dataset: this.dataset }})
       }else{
         this.$router.push('/main/pascal')
       }

frontend/pages/viewer/index-edit.vue

@@ -99,6 +99,7 @@ export default {
         id: -1,
         url: ''
       },
+      dataset: '',
       canDelete: true,
       labelCount: 0,
       timer: '',
@@ -118,6 +119,7 @@ export default {
   async mounted () {
     this.image.url = this.$route.query.url
     this.image.id = this.$route.query.id
+    this.dataset = this.$route.query.dataset
     await this.drawAllBox()
     this.dataReady = false
     this.dataReady = true
@@ -209,7 +211,7 @@ export default {
         console.log(error)
       }
       clearInterval(this.timer)
-      this.$router.push('/main/edit')
+      this.$router.push({ path: '/main/edit', query: {dataset: this.dataset }})
     },
     async deleteImageAccessControlByImageID (imageID) {
       var url = '/api/accesscontrol/' + imageID

frontend/pages/viewer/index.vue

@@ -97,6 +97,7 @@ export default {
         id: -1,
         url: ''
       },
+      dataset: '',
       canDelete: true,
       labelCount: 0,
       timer: ''
@@ -113,6 +114,7 @@ export default {
   mounted () {
     this.image.url = this.$route.query.url
     this.image.id = this.$route.query.id
+    this.dataset = this.$route.query.dataset
   },
   async beforeDestroy () {
     // window.removeEventListener("beforeunload", true)
@@ -150,7 +152,7 @@ export default {
         console.log(error)
       }
       clearInterval(this.timer)
-      this.$router.push('/main/label')
+      this.$router.push({ path: '/main/label', query: {dataset: this.dataset }})
     },
     onMouseDownHandler (e) {
       if (this.drawingBox.active) {

frontend/plugins/vue-dynamic-dropdown.js

 import Vue from 'vue'
 import VueDropdown from 'vue-dynamic-dropdown'
-Vue.use(VueDropdown)
\ No newline at end of file
+Vue.component('vue-dropdown', VueDropdown)
\ No newline at end of file