diff --git a/frontend/components/dropdown/Dropdown.vue b/frontend/components/dropdown/Dropdown.vue index 017e0661bb817e2b9109309bd3a3487b35e32554..99fb4da72949fd993e269f08c9afe356d33ce2f8 100644 --- a/frontend/components/dropdown/Dropdown.vue +++ b/frontend/components/dropdown/Dropdown.vue @@ -1,11 +1,13 @@ <template> <div :key="dataReady"> - <vue-dropdown - ref="dropdown" - class="dropdown" - :config="config" - @setSelectedOption="setNewSelectedOption($event)" - /> + <b-dropdown :text="dataset"> + <b-dropdown-item + v-for="(item, idx) in config.options" :key="idx" + @click.native="setNewSelectedOption(item)" + > + {{ item.value }} + </b-dropdown-item> + </b-dropdown> </div> </template> @@ -25,13 +27,8 @@ export default { return { config: { options: [], - width: 200, - placeholder: "Choose folder", - backgroundColor: "white", - textColor: "#1E889B", - border: "" }, - folder: [], + dataset: '', dataReady: false } }, @@ -42,6 +39,18 @@ export default { }) } await this.getOptions() + if (this.dropdownValue) { + this.dataset = this.dropdownValue + } else { + this.dataset = "Choose Folder" + console.log("Dataset: ", this.dataset) + if (!this.isFolderNotExist()) { + if (!this.isUpload) { + this.dataset = this.config.options[0].value + } + } + this.$emit("onDatasetChanged", this.dataset) + } this.dataReady = true }, methods: { @@ -58,19 +67,6 @@ export default { }) } } - if (this.dropdownValue) { - this.config.placeholder = this.dropdownValue - } else { - if (!this.isFolderNotExist()) { - if (this.isUpload) { - this.config.placeholder = this.config.options[1].value - } else { - this.config.placeholder = this.config.options[0].value - } - this.dataset = this.config.placeholder - this.$emit("onDatasetChanged", this.dataset) - } - } }, isFolderNotExist () { if (this.isUpload) { @@ -80,7 +76,6 @@ export default { } }, async setNewSelectedOption(selectedOption) { - this.config.placeholder = selectedOption.value this.dataset = selectedOption.value if (this.dataset === "Add New Folder") { this.createNewFolder() @@ -89,29 +84,36 @@ export default { }, createNewFolder() { this.$swal.fire({ - title: "New folder name", + title: "New folder name: ", input:'text', inputValidator: (value) => { if (!value) { return 'You need to write something!' } else { - this.config.placeholder = value this.dataset = value this.$emit("onDatasetChanged", this.dataset) } }, confirmButtonColor: '#11616F', showCancelButton: true - }) + }).then((result) => { + console.log("Result: ", result) + if (!result.value) { + this.dataset = "Choose Folder" + console.log("Dataset: ", this.dataset) + } + }) }, } } </script> -<style scoped> - .dropdown { - -webkit-box-shadow: 2px 5px 5px 0px rgba(0,0,0,0.15); - -moz-box-shadow: 2px 5px 5px 0px rgba(0,0,0,0.15); - box-shadow: 2px 5px 5px 0px rgba(0,0,0,0.15); +<style> + .dropdown .btn { + background-color: #1E889B; + color: white; + font-family: "Open Sans Bold"; + border: 0; + border-radius: 7px; } </style> \ No newline at end of file diff --git a/frontend/components/label/Label.vue b/frontend/components/label/Label.vue index 80354ab045c2c3c8cc6712b21d9d7af297f201d4..ce0eb25b260f31ad1a153ce718eb49b4577c4471 100644 --- a/frontend/components/label/Label.vue +++ b/frontend/components/label/Label.vue @@ -2,24 +2,11 @@ <div class="col"> <div class="ml-4"> <div class="row"> - <div class="col"> - <h5 class="title users-margin"> - {{ title }} - </h5> - </div> - </div> - <br> - <div class="row form-title-margin"> <div class="col"> <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" - > + <h5 class="title users-margin"> + {{ title }} + </h5> <div class="slot-margin"> <slot /> </div> @@ -27,6 +14,19 @@ </div> </div> <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> + </div> + <br> <b-row v-if="images" :key="updateUI"> <b-col v-for="id in Object.keys(images)" :key="id"> <div id="container"> @@ -242,8 +242,8 @@ export default { } .slot-margin { - margin-left: 1.5rem; - margin-top: -0.15rem; + margin-left: 2.25rem; + margin-top: 3.25rem; } .flex-display { diff --git a/frontend/pages/main/coco.vue b/frontend/pages/main/coco.vue index 2dbab7e08d56611fd0dddfd1d493462043d65b22..8f70c58e2fc5dadae06a9d3982e89d9c975dfa56 100644 --- a/frontend/pages/main/coco.vue +++ b/frontend/pages/main/coco.vue @@ -175,7 +175,7 @@ export default { .margin-dropdown { margin-top: 3.5rem; - margin-left: -0.775rem; + margin-left: -0.1rem; } </style> \ No newline at end of file diff --git a/frontend/pages/main/upload.vue b/frontend/pages/main/upload.vue index ea03051cbccc87bbc9e284d3367188f7fe036ab4..531f1e198ea1c2014d326458b5cf848b973d7fdf 100644 --- a/frontend/pages/main/upload.vue +++ b/frontend/pages/main/upload.vue @@ -208,7 +208,7 @@ export default { }, async handleUpload(){ this.files = this.$refs.myDropzone.getAcceptedFiles() - if (!this.dataset) { + if (!this.dataset || this.dataset === "Choose Folder") { this.invalidFolder() } else { if(this.files.length === 0){