fix: complete catalog pagination and recovery states

app/admin.py

@@ -2,6 +2,7 @@ from fastapi import APIRouter, BackgroundTasks, Depends, Form, Request
 from fastapi.responses import HTMLResponse, RedirectResponse
 from fastapi.templating import Jinja2Templates
 from sqlalchemy import desc, func, select
+from sqlalchemy.exc import SQLAlchemyError
 from sqlalchemy.orm import Session
 
 from app.config import Settings, get_settings
@@ -93,19 +94,23 @@ def directory(
     parsed_started_to = _parse_date(started_to)
     parsed_has_email = None if has_email in (None, "") else has_email == "true"
     parsed_has_academic_degree = None if has_academic_degree in (None, "") else has_academic_degree == "true"
-    page = list_employees_page(
-        db,
-        status=status,
-        q=q,
-        started_from=parsed_started_from,
-        started_to=parsed_started_to,
-        has_email=parsed_has_email,
-        has_academic_degree=parsed_has_academic_degree,
-        sort=sort,
-        direction=direction,
-        limit=limit,
-        offset=offset,
-    )
+    try:
+        page = list_employees_page(
+            db,
+            status=status,
+            q=q,
+            started_from=parsed_started_from,
+            started_to=parsed_started_to,
+            has_email=parsed_has_email,
+            has_academic_degree=parsed_has_academic_degree,
+            sort=sort,
+            direction=direction,
+            limit=limit,
+            offset=offset,
+        )
+    except SQLAlchemyError:
+        db.rollback()
+        return _render(request, "directory_error.html", {}, status_code=503)
     return _render(
         request,
         "directory.html",
@@ -121,7 +126,7 @@ def directory(
                 "sort": sort,
                 "direction": direction,
                 "limit": page["limit"],
-                "offset": offset,
+                "offset": page["offset"],
             },
         },
     )

app/services/admin_data.py

@@ -132,6 +132,8 @@ def list_employees_page(
         has_academic_degree=has_academic_degree,
     )
     total = db.scalar(select(func.count()).select_from(base_stmt.subquery())) or 0
+    if offset >= total:
+        offset = 0
     sort_column = EMPLOYEE_SORTS.get(sort, Employee.full_name)
     order = desc(sort_column) if direction == "desc" else sort_column
     employees = db.scalars(base_stmt.order_by(order).limit(limit).offset(offset)).all()

app/static/admin.css

@@ -61,8 +61,8 @@
   text-underline-offset: 4px;
 }
 
-:is(a, button, input, select):focus-visible {
-  outline: 3px solid #14b8a6;
+:is(a, button, input, select, summary):focus-visible {
+  outline: 3px solid #0f766e;
   outline-offset: 2px;
 }
 
@@ -133,10 +133,6 @@
   border-collapse: collapse;
 }
 
-.table__row {
-  cursor: pointer;
-}
-
 .table__row:hover {
   background: #f0fdfa;
 }
@@ -205,6 +201,19 @@
 
 .button--compact {
   padding: 8px 12px;
+}
+
+.button:hover {
+  filter: brightness(0.9);
+}
+
+.button:active {
+  filter: brightness(0.8);
+}
+
+.button:disabled {
+  cursor: wait;
+  opacity: 0.65;
 }
 
 .code {
@@ -537,7 +546,7 @@
 
 .directory__filters {
   display: grid;
-  grid-template-columns: 1.1fr 2fr 1.25fr 2fr;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 10px;
   padding: 16px;
   background: #ffffff;
@@ -547,7 +556,7 @@
 
 .directory__filter-group {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  grid-template-columns: 1fr;
   align-content: start;
   gap: 8px;
   min-width: 0;
@@ -578,6 +587,9 @@
 }
 
 .directory__input {
+  font: inherit;
+  font-size: 16px;
+  font-weight: 400;
   min-width: 0;
   padding: 10px 12px;
   border: 1px solid #cbd5e1;
@@ -611,9 +623,18 @@
   font-weight: 700;
 }
 
+.directory__help {
+  color: #4b5563;
+  line-height: 1.5;
+}
+
+.directory__help summary {
+  cursor: pointer;
+}
+
 .directory-table {
   width: 100%;
-  min-width: 960px;
+  min-width: 640px;
   border-collapse: collapse;
 }
 
@@ -628,10 +649,15 @@
 }
 
 .directory-table__cell {
+  overflow-wrap: anywhere;
   max-width: 280px;
   padding: 12px 10px;
   border-bottom: 1px solid #e5e7eb;
   vertical-align: top;
+}
+
+.directory-table .badge {
+  white-space: nowrap;
 }
 
 .directory-table__row {
@@ -751,6 +777,14 @@
 }
 
 @media (max-width: 620px) {
+  .directory-table [data-column="full_name"] {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    min-width: 130px;
+    max-width: 160px;
+    background: #ffffff;
+  }
   .admin__header {
     align-items: flex-start;
     padding: 16px;
@@ -780,11 +814,3 @@
     font-size: 13px;
   }
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .progress-bar__fill {
-    transition-property: width;
-    transition-duration: 0.25s;
-    transition-timing-function: ease;
-  }
-}

app/static/admin.js

@@ -3,11 +3,7 @@
     "full_name",
     "status",
     "positions",
-    "hse_start_year",
-    "email",
-    "academic_degree",
     "last_seen_at",
-    "dismissed_at",
     "profile",
   ];
   const storageKey = "miem.directory.columns";
@@ -85,6 +81,11 @@
   function setupProgress() {
     const panel = document.querySelector("[data-progress-panel]");
     if (!panel) return;
+    const state = document.createElement("p");
+    state.className = "progress-panel__empty";
+    state.setAttribute("role", "status");
+    panel.append(state);
+    let pending = false;
 
     const update = (run) => {
       if (!run) return;
@@ -111,17 +112,31 @@
     };
 
     const poll = async () => {
+      if (pending) return true;
+      pending = true;
+      state.textContent = "Обновляем прогресс…";
+      panel.setAttribute("aria-busy", "true");
       try {
-        const response = await fetch("/api/crawl-runs/latest", { credentials: "same-origin" });
+        const response = await fetch("/api/crawl-runs/latest", {
+          credentials: "same-origin",
+          signal: AbortSignal.timeout(15000),
+        });
         if (!response.ok) throw new Error("progress request failed");
         const data = await response.json();
         const run = data.running || data.latest;
         update(run);
+        state.textContent = run ? "Прогресс обновлён" : "Запусков пока нет. Запустите парсинг.";
+        const error = document.querySelector("[data-progress-error]");
+        if (error) error.hidden = true;
         return Boolean(data.running);
       } catch (_error) {
         const error = document.querySelector("[data-progress-error]");
         if (error) error.hidden = false;
+        state.textContent = "Показаны последние полученные данные. Прогресс может быть устаревшим.";
         return true;
+      } finally {
+        pending = false;
+        panel.setAttribute("aria-busy", "false");
       }
     };
 

app/templates/directory.html

@@ -45,7 +45,7 @@
       <legend class="directory__filter-legend">Сортировка и страница</legend>
       <label class="directory__field">Сортировать по<select class="directory__input" name="sort">
       {% for value, label in [("full_name", "ФИО"), ("status", "Статус"), ("hse_start_year", "Год начала"), ("first_seen_at", "Впервые найден"), ("last_seen_at", "Последний раз найден"), ("dismissed_at", "Дата увольнения")] %}
-      <option value="{{ value }}" {% if filters.sort == value %}selected{% endif %}>Сортировка: {{ label }}</option>
+      <option value="{{ value }}" {% if filters.sort == value %}selected{% endif %}>{{ label }}</option>
       {% endfor %}
       </select></label>
       <label class="directory__field">Направление<select class="directory__input" name="direction">
@@ -54,17 +54,21 @@
       </select></label>
       <label class="directory__field">Сотрудников на странице<select class="directory__input" name="limit">
       {% for value in [25, 50, 100] %}
-      <option value="{{ value }}" {% if filters.limit == value %}selected{% endif %}>На странице: {{ value }}</option>
+      <option value="{{ value }}" {% if filters.limit == value %}selected{% endif %}>{{ value }}</option>
       {% endfor %}
       </select></label>
     </fieldset>
-    <input type="hidden" name="offset" value="{{ filters.offset }}">
     <div class="directory__filter-actions">
       <button class="button" type="submit">Применить фильтры</button>
       <a class="button button--ghost" href="/admin/directory">Сбросить</a>
     </div>
   </form>
 
+  <details class="directory__help">
+    <summary>Что означают даты и статусы</summary>
+    <p>«Год начала» — начало работы в ВШЭ. «Впервые найден» и «Последний раз найден» — даты обнаружения сотрудника в списке источника, а не даты приёма и увольнения. «Требует проверки» означает, что профиль недоступен и увольнение ещё не подтверждено.</p>
+  </details>
+
   <div class="directory__table-wrap">
     <table class="directory-table" data-directory-table>
       <thead>

app/templates/directory_error.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+{% block title %}Каталог недоступен · MIEM Employees{% endblock %}
+{% block content %}
+<section class="panel">
+  <h2 class="panel__title">Не удалось загрузить сотрудников</h2>
+  <p>База данных временно недоступна. Повторите запрос; выбранные фильтры сохранятся.</p>
+  <a class="button" href="{{ request.url.path }}{% if request.url.query %}?{{ request.url.query }}{% endif %}">Повторить загрузку</a>
+</section>
+{% endblock %}

app/version.py

@@ -1,3 +1,3 @@
-APP_VERSION = "0.8.0"
-FRONTEND_VERSION = "0.8.0"
-BACKEND_VERSION = "0.8.0"
+APP_VERSION = "0.8.1"
+FRONTEND_VERSION = "0.8.1"
+BACKEND_VERSION = "0.8.1"