Fix import of bootstrap JS plugins

#6

src/components/BootstrapModal.vue

 <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"

src/components/CreateBucketComponent.vue

 <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>

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";

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">