From 427e9d718161e7bc3e961f76bbdb7df893bbbed6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Tue, 9 Aug 2022 16:21:16 +0200
Subject: [PATCH] Fix import of bootstrap JS plugins
#6
---
src/components/BootstrapModal.vue | 4 ++--
src/components/CreateBucketComponent.vue | 27 +++++++++---------------
src/main.ts | 16 ++------------
src/views/object-storage/BucketsView.vue | 4 ++--
4 files changed, 16 insertions(+), 35 deletions(-)
diff --git a/src/components/BootstrapModal.vue b/src/components/BootstrapModal.vue
index bf0e321..f672d02 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 7980d67..0945567 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 8d09d0f..b2caf37 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 a35fab7..cbb3d54 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">
--
GitLab