add choose folder in upload page

frontend/pages/main/edit.vue

@@ -82,7 +82,7 @@ export default {
       config: {
         options: [],
         width: 300,
-        placeholder: "Choose a folder",
+        placeholder: "Choose folder",
         backgroundColor: "white"
       }
     }

frontend/pages/main/label.vue

@@ -82,7 +82,7 @@ export default {
       config: {
         options: [],
         width: 300,
-        placeholder: "Choose a folder",
+        placeholder: "Choose folder",
         backgroundColor: "white"
       }
     }

frontend/pages/main/upload.vue

@@ -9,15 +9,6 @@
         </div>
       </div>
       <br>
-      <br>
-      <div class="row">
-        <div class="col">
-          <h5 class="title sub-title">
-            Add Folder
-          </h5>           
-        </div>
-      </div>
-      <br>
       <div class="row">
         <div class="col">
           <div class="uploader">
@@ -31,6 +22,18 @@
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col users-margin">
+          <div v-if="dataReady" class="col dropdown">
+            <vue-dropdown
+              :config="config"
+              @setSelectedOption="setNewSelectedOption($event)"
+            >
+            </vue-dropdown>
+          </div>
+        </div>
+      </div>
+      <br>
       <br>
       <div class="row">
         <div class="col">
@@ -48,11 +51,13 @@
 
 <script>
 import vue2Dropzone from 'vue2-dropzone'
+import VueDropdown from 'vue-dynamic-dropdown'
 import 'vue2-dropzone/dist/vue2Dropzone.min.css'
 
 export default {
   components: {
-    vueDropzone : vue2Dropzone
+    vueDropzone : vue2Dropzone,
+    VueDropdown
   },
   data(){
     return{
@@ -63,15 +68,78 @@ export default {
         autoQueue: false,
         thumbnailWidth: 60,
         thumbnailHeight: 60
+      },
+      dataReady: false,
+      folder: [],
+      dataset: "",
+      config: {
+        options: [{
+          value: "Add new folder"
+        }],
+        width: 300,
+        placeholder: "Choose folder",
+        backgroundColor: "white"
       }
     }
   },
-  mounted(){
+  async mounted(){
     var instance =  this.$refs.myDropzone.dropzone
     this.files = instance.files
     console.log("files",this.files)
+    await this.getOptions()
   },
   methods:{
+    newFolder() {
+      this.$swal.fire({
+        title: "New folder name",
+        input:'text',
+        inputValidator: (value) => {
+          if (!value) {
+            return 'You need to write something!'
+          } else {
+            console.log("ANJAYERS", value)
+            this.config.placeholder = value
+            this.dataset = value
+          }
+        },
+        confirmButtonColor: '#11616F',
+        showCancelButton: true
+      }) 
+    },
+    async getOptions() {
+      var urlGet = '/api/image'
+      const response = await this.$axios.get(urlGet, {
+        params: {
+          PerPage: 9999,
+          Page: 1,
+        }
+      }).catch((error) => console.error(error))
+      if (response.data.data.images) {
+        response.data.data.images.forEach((image) => {
+          if(this.folder.indexOf(image.Dataset) === -1) {
+            this.folder.push(image.Dataset)
+          }
+        })
+      }
+      console.log("asede", this.folder)
+      this.folder.forEach((folderName) => {
+        console.log(folderName)
+        var key = "value"
+        var obj = {}
+        obj[key] = folderName
+        this.config.options.push(obj)
+      })
+      console.log(this.config.options)
+      this.dataReady = true
+    },
+    async setNewSelectedOption(selectedOption) {
+      this.config.placeholder = selectedOption.value
+      this.dataset = selectedOption.value
+      console.log("UHUUY", this.dataset)
+      if (this.dataset == "Add new folder") {
+        this.newFolder()
+      }
+    },
     formatBytes(bytes,decimals) {
       if(bytes == 0){
         return '0 Bytes'
@@ -176,6 +244,8 @@ export default {
       var file = this.dataURItoBlob(dataURL)
       var formData = new FormData()
       formData.append("image", file, name)
+      formData.append("dataset", this.dataset)
+      console.log("huyhuy", formData)
       const config = {
         headers: {'Content-Type':'multipart/form-data'}
       }
@@ -294,6 +364,13 @@ export default {
     color: #11616F;
   }
 
+  .dropdown {
+    font-size: 0.55rem;
+    color: #1E889B;
+
+    font-family: 'Open Sans Regular';
+  }
+
   #dropzone{
     background-color: #fff;
     border: 0.3rem solid #11616F;