Filter Buckets by their name

#8

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

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