From eaa213933dd87765b8e1a67131c79a6b0e5b6b29 Mon Sep 17 00:00:00 2001
From: overtrue <anzhengchao@gmail.com>
Date: Wed, 26 Mar 2025 19:56:02 +0800
Subject: [PATCH] feat: object list search. resolved rustfs/s3-rustfs#278

---
 components/object/list.vue | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/components/object/list.vue b/components/object/list.vue
index f36fb2b..ba78a8f 100644
--- a/components/object/list.vue
+++ b/components/object/list.vue
@@ -2,7 +2,7 @@
   <n-page-header subtitle="" @back="router.back()">
     <template #title>
       <div class="flex items-center justify-between">
-        <n-input placeholder="搜索">
+        <n-input placeholder="搜索" v-model:value="searchTerm" @update:value="handleSearch">
           <template #prefix>
             <Icon name="ri:search-2-line" />
           </template>
@@ -48,7 +48,7 @@
       </div>
     </template>
   </n-page-header>
-  <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="objects" :row-key="rowKey" @update:checked-row-keys="handleCheck"
+  <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="filteredObjects" :row-key="rowKey" @update:checked-row-keys="handleCheck"
     :pagination="false" :bordered="false" />
   <object-upload-picker :show="uploadPickerVisible" @update:show="(val) => (uploadPickerVisible = val && refresh())" :bucketName="bucketName" :prefix="prefix" />
   <object-new-form :show="newObjectFormVisible" :asPrefix="newObjectAsPrefix" @update:show="(val) => (newObjectFormVisible = val && refresh())" :bucketName="bucketName"
@@ -86,6 +86,26 @@ const props = defineProps<{ bucket: string; path: string }>();
 const uploadPickerVisible = ref(false);
 const newObjectFormVisible = ref(false);
 const newObjectAsPrefix = ref(false);
+const searchTerm = ref('');
+
+// Add debounce function for search
+const debounce = (fn: Function, delay: number) => {
+  let timer: NodeJS.Timeout | null = null;
+  return (...args: any[]) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+};
+
+const handleSearch = debounce(() => {
+  // Reset pagination when searching
+  if (continuationToken.value) {
+    continuationToken.value = undefined;
+    tokenHistory.value = [];
+  }
+}, 300);
 
 // 上传任务
 const uploadTaskStore = useUploadTaskManagerStore();
@@ -232,7 +252,18 @@ const objects = computed(() => {
     );
 });
 
+// New computed property to filter objects based on search term
+const filteredObjects = computed(() => {
+  if (!searchTerm.value.trim()) {
+    return objects.value;
+  }
 
+  const term = searchTerm.value.toLowerCase();
+  return objects.value.filter(obj => {
+    const displayKey = prefix.value ? obj.Key?.substring(prefix.value.length) : obj.Key;
+    return displayKey?.toLowerCase().includes(term);
+  });
+});
 
 /** ************************************批量删除 */
 function rowKey(row: any): string {