diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue index b43e2c3e2178902528043e3a4c0ee5a817a37d4b..3e5e844f61fd1db7c620edb51d09a52803164881 100644 --- a/src/components/BucketView.vue +++ b/src/components/BucketView.vue @@ -17,7 +17,7 @@ import CopyObjectModal from "@/components/Modals/CopyObjectModal.vue"; import PermissionModal from "@/components/Modals/PermissionModal.vue"; import ObjectDetailModal from "@/components/Modals/ObjectDetailModal.vue"; import CreateFolderModal from "@/components/Modals/CreateFolderModal.vue"; -import DeleteModal from "@/components/Modals/DeleteModal.vue" +import DeleteModal from "@/components/Modals/DeleteModal.vue"; import { S3Client, DeleteObjectCommand, @@ -526,7 +526,11 @@ watch( modal-label="some-label" :object-name-delete="objectState.potentialObjectToDelete" :back-modal-id="undefined" - @confirm-delete="objectState.deleteFolder ? confirmedDeleteFolder(objectState.potentialObjectToDelete) : confirmedDeleteObject(objectState.potentialObjectToDelete)" + @confirm-delete=" + objectState.deleteFolder + ? confirmedDeleteFolder(objectState.potentialObjectToDelete) + : confirmedDeleteObject(objectState.potentialObjectToDelete) + " /> <!-- Navbar Breadcrumb --> <nav aria-label="breadcrumb" class="fs-2"> diff --git a/src/views/object-storage/BucketsView.vue b/src/views/object-storage/BucketsView.vue index 58422c9a24f31941c91b31b52198a2421b2b619b..ad7d4e5b542a5dde3de0b409273cbd67bbb6dbae 100644 --- a/src/views/object-storage/BucketsView.vue +++ b/src/views/object-storage/BucketsView.vue @@ -18,11 +18,13 @@ const authStore = useAuthStore(); const bucketsState = reactive({ buckets: [], permissions: {}, + filterString: "", potentialDeleteBucketName: "", loading: true, } as { buckets: BucketOut[]; loading: boolean; + filterString: string; permissions: Record<string, BucketPermission>; potentialDeleteBucketName: string; }); @@ -63,6 +65,14 @@ const currentPermission: ComputedRef<BucketPermission | undefined> = computed( } ); +const filteredBuckets: ComputedRef<BucketOut[]> = computed(() => { + return bucketsState.filterString.length > 0 + ? bucketsState.buckets.filter((bucket) => + bucket.name.includes(bucketsState.filterString) + ) + : bucketsState.buckets; +}); + function addBucket(bucket: BucketOut) { bucketsState.buckets.push(bucket); } @@ -143,25 +153,38 @@ onMounted(() => { placeholder="Search Buckets" aria-label="Search Buckets" aria-describedby="buckets-search-wrapping" - disabled + v-model.trim="bucketsState.filterString" /> </div> <div class="list-group mt-3"> <div v-if="!bucketsState.loading"> - <bucket-list-item - v-for="bucket in bucketsState.buckets" - :key="bucket.name" - :active=" - route.params.bucketName != null && - route.params.bucketName === bucket.name - " - :bucket="bucket" - :loading="false" - :permission="bucketsState.permissions[bucket.name]" - @delete-bucket="deleteBucket" - @permission-deleted="(bucketName) => bucketDeleted(bucketName)" - /> + <div v-if="filteredBuckets.length > 0"> + <bucket-list-item + v-for="bucket in filteredBuckets" + :key="bucket.name" + :active=" + route.params.bucketName != null && + route.params.bucketName === bucket.name + " + :bucket="bucket" + :loading="false" + :permission="bucketsState.permissions[bucket.name]" + @delete-bucket="deleteBucket" + @permission-deleted="(bucketName) => bucketDeleted(bucketName)" + /> + </div> + <div v-else class="text-center fs-2 mt-5"> + <bootstrap-icon + icon="search" + class="mb-2" + :width="56" + :height="56" + style="color: var(--bs-secondary)" + fill="currentColor" + /><br /> + Could not find any Buckets + </div> </div> <div v-else> <bucket-list-item