diff --git a/src/components/BootstrapModal.vue b/src/components/BootstrapModal.vue index bf0e321f26909b8335dccc5eb28f38bc29bb640b..f672d021b32ae1cb1a5aab5627dc527199616ef3 100644 --- a/src/components/BootstrapModal.vue +++ b/src/components/BootstrapModal.vue @@ -1,6 +1,6 @@ <script setup lang="ts"> defineProps<{ - modalId: string; + modalID: string; modalLabel: string; staticBackdrop: boolean; }>(); @@ -9,7 +9,7 @@ defineProps<{ <template> <div class="modal" - :id="modalId" + :id="modalID" tabindex="-1" :aria-labelledby="modalLabel" aria-hidden="true" diff --git a/src/components/CreateBucketComponent.vue b/src/components/CreateBucketComponent.vue index 7980d6757d9cc68626b869215e3ab2b22781ad3c..094556790ef1a92647509d56b0d16ba1fce0987d 100644 --- a/src/components/CreateBucketComponent.vue +++ b/src/components/CreateBucketComponent.vue @@ -1,13 +1,10 @@ <script setup lang="ts"> import { BucketService } from "@/client"; import type { BucketIn } from "@/client"; -import { reactive } from "vue"; +import { reactive, onMounted } from "vue"; import BootstrapModal from "@/components/BootstrapModal.vue"; import { useRouter } from "vue-router"; -/* -import { onMounted } from "vue"; import { Modal } from "bootstrap"; -*/ const router = useRouter(); const emit = defineEmits(["bucketCreated"]); @@ -22,20 +19,17 @@ const formState = reactive({ loading: boolean; }); -defineProps<{ - modalid: string; - modallabel: string; +const props = defineProps<{ + modalID: string; + modalLabel: string; }>(); -/* -let theModal: Modal | null = null; -const modal = ref(null as Element | null); +let createBucketModal: Modal | null = null; onMounted(() => { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - theModal = Modal.getOrCreateInstance(modal.value!); + createBucketModal = new Modal("#" + props.modalID); + console.log("Modal ID", props.modalID); }); - */ function createBucket() { formState.validated = true; @@ -47,8 +41,7 @@ function createBucket() { BucketService.bucketCreateBucket(bucket) .then((createdBucket) => { emit("bucketCreated", createdBucket); - //console.log(theModal); - //theModal?.hide(); + createBucketModal?.hide(); bucket.name = ""; bucket.description = ""; formState.bucketNameTaken = false; @@ -80,9 +73,9 @@ function modalClosed() { <template> <bootstrap-modal - :modal-id="modalid" + :modal-id="modalID" :static-backdrop="true" - :modal-label="modallabel" + :modal-label="modalLabel" v-on="{ 'hidden.bs.modal': modalClosed }" > <template v-slot:header> Create new Bucket </template> diff --git a/src/main.ts b/src/main.ts index 8d09d0f8e38efb8f62e61b98896bb4465b9958de..b2caf371ccccc897f7de80d417efb181dc2948b4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -21,17 +21,5 @@ app.use(router); app.mount("#app"); -// Import just what we need - -// import "bootstrap/js/dist/alert"; -import "bootstrap/js/dist/button"; -// import "bootstrap/js/dist/carousel"; -import "bootstrap/js/dist/collapse"; -import "bootstrap/js/dist/dropdown"; -import "bootstrap/js/dist/modal"; -// import "bootstrap/js/dist/offcanvas"; -// import "bootstrap/js/dist/popover"; -// import "bootstrap/js/dist/scrollspy"; -// import "bootstrap/js/dist/tab"; -// import "bootstrap/js/dist/toast"; -// import "bootstrap/js/dist/tooltip"; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Modal, Collapse, Dropdown } from "bootstrap"; diff --git a/src/views/object-storage/BucketsView.vue b/src/views/object-storage/BucketsView.vue index a35fab70862ae2bf0008765e585947c598785469..cbb3d544f8b41c190adb872abf0dd1a6772932b2 100644 --- a/src/views/object-storage/BucketsView.vue +++ b/src/views/object-storage/BucketsView.vue @@ -73,8 +73,8 @@ onMounted(() => { </button> </div> <create-bucket-component - modalid="create-bucket-modal" - modallabel="create-bucket-modal-label" + modalID="create-bucket-modal" + modalLabel="create-bucket-modal-label" @bucket-created="addBucket" /> <div class="input-group flex-nowrap mt-2">