актуальное обновление и отображение

src/components/Section.vue

@@ -1,4 +1,3 @@
-<!-- AdminLogin.vue -->
 <template>
   <div class="w-full sm:w-4/5 dark:text-neutral-300">
     <div class="bg-white flex justify-between p-3 lg:p-5 dark:bg-gray-800">
@@ -34,12 +33,11 @@
       <Time />
     </div>
 
-    <div class="p-4">
+    <!-- Контейнер с рефом для отслеживания скролла -->
+    <div ref="scrollContainer" class="p-4">
       <Stat
         v-for="item in items"
         :key="item.url"
-        :translation_text="item.translation_text"
-        :original_text="item.original_text"
         :url="item.url"
         :title="item.title"
         :article_date="item.article_date"
@@ -48,7 +46,11 @@
         :parsed_at="item.parsed_at"
         :status="item.status"
         :viewed="item.viewed"
+        :original_text="item.original_text"
+        :translation_text="item.translation_text"
         :other="item.other"
+        @update:viewed="handleViewedChange"
+        @update:status="handleStatusChange"
       />
       <!-- Sentinel для бесконечного скролла -->
       <div ref="sentinel" class="h-4"></div>
@@ -61,49 +63,50 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick } from "vue";
+import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
 import Stat from "./Stat.vue";
 import Time from "./Time.vue";
 import axios from "axios";
 
-// Перенесли props в начало
 const props = defineProps({
-  filter: {
+  filter: { type: String, default: "all" },
-    type: String,
-    default: "all",
-  },
 });
 
+// Константы
+const LIMIT = 50;
+const POLL_INTERVAL = 5000; // 5 секунд
+
+// Состояния
 const isDarkMode = ref(document.documentElement.classList.contains("dark"));
 const sentinel = ref(null);
+const scrollContainer = ref(null); // ✅ Реф контейнера скролла
 const isLoading = ref(false);
 const hasMore = ref(true);
-
-// Состояния для пагинации
-let currentFilter = "default";
-let currentOffset = 0;
-const LIMIT = 50;
-
-// Состояния страницы и данные для входа
 const items = ref([]);
 const poisk = ref("");
 
-// Универсальная функция для получения данных
+// Пагинация
+let currentFilter = "default";
+let currentOffset = 0;
+let pollTimer = null;
+let lastScrollTop = 0; // ✅ Сохраняем позицию скролла
+
+// === API ===
+
 const fetchData = async (url) => {
   try {
     const { data } = await axios.get(url);
     return data;
   } catch (err) {
-    console.error(`Ошибка при получении данных с ${url}:`, err);
+    console.error(`Ошибка при получении данных:`, err);
     return [];
   }
 };
 
-// Получение общего количества записей
 const fetchTotalCount = async (filterValue) => {
   try {
     const { data } = await axios.get(
-      `https://allowlgroup.ru/api/8002/records_all/count?item=${filterValue}`,
+      `https://allowlgroup.ru/api/8002/records_all/count?item=${filterValue}`
     );
     return data.count;
   } catch (err) {
@@ -115,7 +118,7 @@ const fetchTotalCount = async (filterValue) => {
 const fetchSearchCount = async (query, filterValue) => {
   try {
     const { data } = await axios.get(
-      `https://allowlgroup.ru/api/8002/poisk/count?query=${query}&item=${filterValue}`,
+      `https://allowlgroup.ru/api/8002/poisk/count?query=${query}&item=${filterValue}`
     );
     return data.count;
   } catch (err) {
@@ -124,84 +127,38 @@ const fetchSearchCount = async (query, filterValue) => {
   }
 };
 
-// Начальная загрузка (первые 50 записей)
+// === Загрузка данных ===
-const loadItems = async (filterValue) => {
+
+const loadItems = async (filterValue, append = false) => {
   if (isLoading.value) return;
 
   isLoading.value = true;
-  items.value = [];
+  
-  currentFilter = filterValue;
+  if (!append) {
-  currentOffset = 0;
-  hasMore.value = true;
-
-  try {
-    const totalCount = await fetchTotalCount(filterValue);
-    const data = await fetchData(
-      `https://allowlgroup.ru/api/8002/records_all?item=${filterValue}&offset=0&limit=${LIMIT}`,
-    );
-    items.value = data;
-    currentOffset = LIMIT;
-    hasMore.value = currentOffset < totalCount;
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// Подгрузка следующих записей (бесконечный скролл)
-const loadMore = async () => {
-  if (isLoading.value || !hasMore.value) return;
-
-  isLoading.value = true;
-
-  try {
-    // Если есть поисковый запрос - используем поиск с фильтром
-    if (poisk.value.trim()) {
-      const totalCount = await fetchSearchCount(poisk.value, currentFilter);
-      const data = await fetchData(
-        `https://allowlgroup.ru/api/8002/poisk?query=${poisk.value}&item=${currentFilter}&offset=${currentOffset}&limit=${LIMIT}`,
-      );
-      items.value = [...items.value, ...data];
-      currentOffset += LIMIT;
-      hasMore.value = currentOffset < totalCount;
-    } else {
-      // Иначе обычная загрузка с фильтром
-      const totalCount = await fetchTotalCount(currentFilter);
-      const data = await fetchData(
-        `https://allowlgroup.ru/api/8002/records_all?item=${currentFilter}&offset=${currentOffset}&limit=${LIMIT}`,
-      );
-      items.value = [...items.value, ...data];
-      currentOffset += LIMIT;
-      hasMore.value = currentOffset < totalCount;
-    }
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// Поиск с пагинацией
-const searchItems = async (query, filterValue, loadMoreFlag = false) => {
-  if (isLoading.value && !loadMoreFlag) return;
-
-  if (!loadMoreFlag) {
     items.value = [];
     currentOffset = 0;
     hasMore.value = true;
   }
 
-  isLoading.value = true;
+  currentFilter = filterValue;
 
   try {
-    const totalCount = await fetchSearchCount(query, filterValue);
+    const url = poisk.value.trim()
-    const data = await fetchData(
+      ? `https://allowlgroup.ru/api/8002/poisk?query=${poisk.value}&item=${filterValue}&offset=${currentOffset}&limit=${LIMIT}`
-      `https://allowlgroup.ru/api/8002/poisk?query=${query}&item=${filterValue}&offset=${currentOffset}&limit=${LIMIT}`,
+      : `https://allowlgroup.ru/api/8002/records_all?item=${filterValue}&offset=${currentOffset}&limit=${LIMIT}`;
-    );
+    
-
+    const totalCount = poisk.value.trim()
-    if (loadMoreFlag) {
+      ? await fetchSearchCount(poisk.value, filterValue)
+      : await fetchTotalCount(filterValue);
+    
+    const data = await fetchData(url);
+    
+    if (append) {
       items.value = [...items.value, ...data];
     } else {
       items.value = data;
     }
-
+    
     currentOffset += LIMIT;
     hasMore.value = currentOffset < totalCount;
   } finally {
@@ -209,46 +166,110 @@ const searchItems = async (query, filterValue, loadMoreFlag = false) => {
   }
 };
 
-// Debounce для поиска
+// === Polling - проверка новых данных ===
-let debounceTimer = null;
+
-watch(poisk, async (newVal) => {
+const checkForUpdates = async () => {
-  clearTimeout(debounceTimer);
+  // Не проверяем при активном поиске или загрузке
-  debounceTimer = setTimeout(async () => {
+  if (isLoading.value || (poisk.value && poisk.value.trim())) {
-    if (newVal && newVal.trim()) {
+    return;
-      currentOffset = 0;
+  }
-      await searchItems(newVal, currentFilter);
+
-    } else {
+  try {
-      // При пустом поиске - загружаем все записи
+    const totalCount = await fetchTotalCount(currentFilter);
-      await loadItems(currentFilter);
+    const data = await fetchData(
+      `https://allowlgroup.ru/api/8002/records_all?item=${currentFilter}&offset=0&limit=${LIMIT}`
+    );
+
+    if (!data.length) return;
+
+    // Создаём Map существующих URL для быстрого поиска
+    const existingUrls = new Map(items.value.map(item => [item.url, item]));
+    
+    const newItems = [];
+    let hasNew = false;
+
+    for (const item of data) {
+      const existing = existingUrls.get(item.url);
+      
+      if (!existing) {
+        // ✅ Новая запись - добавляем в начало
+        newItems.push(item);
+        hasNew = true;
+      } else if (existing.viewed !== item.viewed || existing.status !== item.status) {
+        // ✅ Изменились viewed/status - обновляем
+        const index = items.value.indexOf(existing);
+        items.value[index] = { ...item };
+        hasNew = true;
+      }
     }
+
+    // Добавляем новые записи в начало
+    if (newItems.length > 0) {
+      items.value = [...newItems, ...items.value];
+    }
+    
+  } catch (err) {
+    console.error("Ошибка при проверке обновлений:", err);
+  }
+};
+
+const startPolling = () => {
+  stopPolling();
+  pollTimer = setInterval(checkForUpdates, POLL_INTERVAL);
+};
+
+const stopPolling = () => {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+};
+
+// === Обработчики событий от Stat ===
+
+const handleViewedChange = ({ url, viewed }) => {
+  const item = items.value.find(i => i.url === url);
+  if (item) item.viewed = viewed;
+};
+
+const handleStatusChange = ({ url, status }) => {
+  const item = items.value.find(i => i.url === url);
+  if (item) item.status = status;
+};
+
+// === Watch ===
+
+let debounceTimer = null;
+watch(poisk, (newVal) => {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    currentOffset = 0;
+    loadItems(currentFilter);
   }, 800);
 });
 
-// ✅ Добавлен watch для обновления данных при изменении filter
 watch(
   () => props.filter,
-  async (newFilter) => {
+  (newFilter) => {
     const filterValue = newFilter === "all" ? "default" : newFilter;
     currentFilter = filterValue;
-    // Очищаем поиск при смене фильтра
     poisk.value = "";
-    await loadItems(filterValue);
+    loadItems(filterValue);
-  },
+  }
 );
 
 const onfilterItems = (filterValue) => {
   const filter = filterValue === "all" ? "default" : filterValue;
-  currentFilter = filter;
   loadItems(filter);
 };
 
-// Observer для бесконечного скролла
+// === Lifecycle ===
+
 let observer = null;
 
 onMounted(() => {
-  // Инициализация при загрузке
+  // Тема
   isDarkMode.value = document.documentElement.classList.contains("dark");
-
   const mutationObserver = new MutationObserver(() => {
     isDarkMode.value = document.documentElement.classList.contains("dark");
   });
@@ -257,20 +278,23 @@ onMounted(() => {
     attributeFilter: ["class"],
   });
 
-  // Загружаем данные при монтировании
+  // Загрузка данных
   const initialFilter = props.filter === "all" ? "default" : props.filter;
   currentFilter = initialFilter;
   loadItems(initialFilter);
+  
+  // Запускаем polling
+  startPolling();
 
-  // Настройка Intersection Observer для бесконечного скролла
+  // Observer для бесконечного скролла
   nextTick(() => {
     observer = new IntersectionObserver(
       (entries) => {
         if (entries[0].isIntersecting && hasMore.value) {
-          loadMore();
+          loadItems(currentFilter, true); // append = true
         }
       },
-      { rootMargin: "100px" },
+      { rootMargin: "100px" }
     );
 
     if (sentinel.value) {
@@ -278,4 +302,9 @@ onMounted(() => {
     }
   });
 });
-</script>
+
+onUnmounted(() => {
+  stopPolling();
+  if (observer) observer.disconnect();
+});
+</script>

src/components/Stat.vue

@@ -2,22 +2,8 @@
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import axios from "axios";
 
-// Реактивная проверка темной темы
+// ✅ Добавляем emit для уведомления родителя об изменениях
-const isDarkMode = ref(document.documentElement.classList.contains("dark"));
+const emit = defineEmits(["update:viewed", "update:status"]);
-
-// Следим за изменениями класса dark на html
-onMounted(() => {
-  // Инициализация при загрузке (если класс ещё не установлен)
-  isDarkMode.value = document.documentElement.classList.contains("dark");
-  
-  const observer = new MutationObserver(() => {
-    isDarkMode.value = document.documentElement.classList.contains("dark");
-  });
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["class"],
-  });
-});
 
 const props = defineProps({
   url: String,
@@ -33,12 +19,35 @@ const props = defineProps({
   status: Boolean,
 });
 
-//Код для раскрытия/скрытия карточки
+// ✅ Делаем viewed и status реактивными для локального обновления
+const localViewed = ref(props.viewed);
+const localStatus = ref(props.status);
+
+// Следим за изменениями props и обновляем локальные значения
+import { watch } from "vue";
+watch(() => props.viewed, (val) => { localViewed.value = val; });
+watch(() => props.status, (val) => { localStatus.value = val; });
+
+// Тема
+const isDarkMode = ref(document.documentElement.classList.contains("dark"));
+
+onMounted(() => {
+  isDarkMode.value = document.documentElement.classList.contains("dark");
+  const observer = new MutationObserver(() => {
+    isDarkMode.value = document.documentElement.classList.contains("dark");
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+});
+
+// Карточка
 const isOpen = ref(false);
 const cardRef = ref(null);
 
 function toggle() {
-  isOpen.value = true; //!isOpen.value;
+  isOpen.value = true;
 }
 
 function handleClickOutside(event) {
@@ -47,39 +56,42 @@ function handleClickOutside(event) {
   }
 }
 
+// ✅ Обновляем локально + отправляем emit
 const viewed_b = async () => {
+  const newValue = !localViewed.value;
+  localViewed.value = newValue; // Локальное обновление сразу
+  emit("update:viewed", { url: props.url, viewed: newValue });
+  
   try {
     await axios.post(
       "https://allowlgroup.ru/api/8002/update_viewed_status",
       null,
-      {
+      { params: { url: props.url, viewed: newValue } }
-        params: {
-          url: props.url,
-          viewed: !props.viewed,
-        },
-      },
     );
   } catch (err) {
     console.log(err);
+    // При ошибке откатываем локальное значение
+    localViewed.value = !newValue;
   }
 };
 
 const status_b = async () => {
+  const newValue = !localStatus.value;
+  localStatus.value = newValue; // Локальное обновление сразу
+  emit("update:status", { url: props.url, status: newValue });
+  
   try {
     await axios.post(
       "https://allowlgroup.ru/api/8002/update_status_status",
       null,
-      {
+      { params: { url: props.url, status: newValue } }
-        params: {
-          url: props.url,
-          status: !props.status,
-        },
-      },
     );
   } catch (err) {
     console.log(err);
+    localStatus.value = !newValue;
   }
 };
+
 const download = async () => {
   try {
     const rez = await axios.get("https://allowlgroup.ru/api/8001/file_download", {
@@ -95,10 +107,9 @@ const download = async () => {
       }),
     );
     const link = document.createElement("a");
-    // Принудительно добавляем .docx к имени файла
     let filename = props.title + ".docx";
     try {
-      const disposition = rez.headers && rez.headers["content-disposition"];
+      const disposition = rez.headers?.["content-disposition"];
       if (disposition) {
         const match = disposition.match(/filename\*?=([^;\n]+)/i);
         if (match) {
@@ -107,9 +118,7 @@ const download = async () => {
           filename = name;
         }
       }
-    } catch (e) {
+    } catch (e) { /* ignore */ }
-      /* ignore */
-    }
     link.href = blobUrl;
     link.setAttribute("download", filename);
     document.body.appendChild(link);
@@ -124,6 +133,7 @@ const download = async () => {
 onMounted(() => {
   document.addEventListener("click", handleClickOutside);
 });
+
 onBeforeUnmount(() => {
   document.removeEventListener("click", handleClickOutside);
 });
@@ -132,9 +142,8 @@ onBeforeUnmount(() => {
 <template>
   <div
     class="bg-white dark:bg-gray-800 hover:-translate-y-2 hover:shadow-2xl rounded-xl transition pb-1 mb-3"
-    :class="{ 'opacity-50': props.viewed }"
+    :class="{ 'opacity-50': localViewed }"
   >
-    <!--:class="{ 'opacity-50': props.viewed }" обработчик прочитанности-->
     <div ref="cardRef" class="cursor-pointer" @click="toggle">
       <div class="flex justify-between p-3">
         <p>{{ article_date }}</p>
@@ -152,7 +161,6 @@ onBeforeUnmount(() => {
         <p>{{ title }}</p>
       </div>
 
-      <!-- Вариант с Tailwind: показывать/скрывать по состоянию -->
       <div v-show="isOpen" class="transition-all">
         <div class="m-3 dark:bg-gray-900 shadow rounded-xl p-3">
           <p>{{ short_text }}</p>
@@ -172,7 +180,7 @@ onBeforeUnmount(() => {
       <div class="ml-4 mb-4">
         <button class="cursor-pointer" @click="viewed_b">
           <img
-            v-if="props.viewed"
+            v-if="localViewed"
             src="https://img.icons8.com/?size=100&id=IJNt9jGwqy9N&format=png&color=000000"
             class="h-12 hover:opacity-75 active:opacity-75"
           />
@@ -190,7 +198,7 @@ onBeforeUnmount(() => {
 
         <button class="cursor-pointer" @click="status_b">
           <img
-            v-if="props.status"
+            v-if="localStatus"
             src="https://img.icons8.com/?size=100&id=fiJBCEhvIMyT&format=png&color=000000"
             class="h-12 hover:opacity-75 active:opacity-75"
           />