diff --git a/frontend/pages/main/edit.vue b/frontend/pages/main/edit.vue index c67010037cdec10794812f273baee265a1cd707c..cc4f8fb00619bd292ac6d4015427f5f280f48ac3 100644 --- a/frontend/pages/main/edit.vue +++ b/frontend/pages/main/edit.vue @@ -82,7 +82,7 @@ export default { config: { options: [], width: 300, - placeholder: "Choose a folder", + placeholder: "Choose folder", backgroundColor: "white" } } diff --git a/frontend/pages/main/label.vue b/frontend/pages/main/label.vue index 667eb1d40e1d59b1164842799aaa90b2e411c10d..7bb68bea05dd4903071343bd150d49c05ea6cdf5 100644 --- a/frontend/pages/main/label.vue +++ b/frontend/pages/main/label.vue @@ -82,7 +82,7 @@ export default { config: { options: [], width: 300, - placeholder: "Choose a folder", + placeholder: "Choose folder", backgroundColor: "white" } } diff --git a/frontend/pages/main/upload.vue b/frontend/pages/main/upload.vue index b0a55e5f11bf4076b10c2fc0e7703216182a1c59..c7d9567671742326e6e3162b15a85e9b79e4e0f1 100644 --- a/frontend/pages/main/upload.vue +++ b/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;