добавлен поиск

src/components/Section.vue

@@ -15,7 +15,7 @@
             class="absolute top-4 left-3 h-5"
           />
           <input
-            v-model="time"
+            v-model="poisk"
             type="text"
             placeholder="Поиск..."
             class="dark:bg-gray-900 border-slate-100 shadow rounded-xl p-3 pl-11"
@@ -74,35 +74,109 @@ onMounted(() => {
   });
 
   // Загружаем данные при монтировании
-  loadItems(props.filter);
+  const initialFilter = props.filter === "all" ? "default" : props.filter;
+  loadItems(initialFilter);
 });
 
 // Состояния страницы и данные для входа
 const items = ref([]);
 // const filter = ref();
-const time = ref("");
+const poisk = ref("");
 
 // Универсальная функция для получения данных
-const fetchData = async (url, targetRef) => {
+const fetchData = async (url, targetRef, append = false) => {
   try {
     const { data } = await axios.get(url);
-    targetRef.value = data;
+    if (append) {
+      targetRef.value = [...targetRef.value, ...data];
+    } else {
+      targetRef.value = data;
+    }
   } catch (err) {
     console.error(`Ошибка при получении данных с ${url}:`, err);
   }
 };
 
+// Получение общего количества записей
+const fetchTotalCount = async (filterValue) => {
+  try {
+    const { data } = await axios.get(
+      `http://127.0.0.1:8002/records_all/count?item=${filterValue}`,
+    );
+    return data.count;
+  } catch (err) {
+    console.error("Ошибка при получении количества:", err);
+    return 0;
+  }
+};
+
+const fetchSearchCount = async (query) => {
+  try {
+    const { data } = await axios.get(
+      `http://127.0.0.1:8002/poisk/count?query=${query}`,
+    );
+    return data.count;
+  } catch (err) {
+    console.error("Ошибка при получении количества:", err);
+    return 0;
+  }
+};
+
+// Основная функция с циклом
+const loadItems = async (filterValue, limit = 100) => {
+  items.value = []; // очищаем перед загрузкой
+
+  let totalCount = 1;
+  let offset = 0;
+
+  while (offset < totalCount) {
+    await fetchData(
+      `http://127.0.0.1:8002/records_all?item=${filterValue}&offset=${offset}&limit=${limit}`,
+      items,
+      true, // включить режим добавления
+    );
+    if (offset === 0) {
+      totalCount = await fetchTotalCount(filterValue);
+    }
+    offset += limit;
+  }
+};
+
+let debounceTimer = null;
+watch(poisk, async (newVal) => {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(async () => {
+    if (newVal && newVal.trim()) {
+      await searchItems(newVal);
+    }
+  }, 800);
+});
+
+// Основная функция поиска с циклом
+const searchItems = async (poisk, limit = 500) => {
+  items.value = []; // очищаем перед загрузкой
+  let totalCount = 1;
+  let offset = 0;
+
+  while (offset < totalCount) {
+    await fetchData(
+      `http://127.0.0.1:8002/poisk?query=${poisk}&offset=${offset}&limit=${limit}`,
+      items,
+      true, // включить режим добавления
+    );
+
+    if (offset === 0) {
+      totalCount = await fetchSearchCount(poisk); // нужно добавить эндпоинт /poisk/count
+    }
+
+    offset += limit;
+  }
+};
+
 const onfilterItems = (filterValue) => {
-  console.log(filterValue);
+  const filter = filterValue === "all" ? "default" : filterValue;
-  loadItems(filterValue);
+  loadItems(filter);
 };
-
-// Обертки для вызова
-const loadItems = (filterValue) => {
-  fetchData(`http://127.0.0.1:8002/records_all?item=${filterValue}`, items);
-};
-//watch(items, loadItems(filter.value));
-
 const props = defineProps({
   filter: {
     type: String,