Document picker code and architecture

2026-09-05 13:24:00 +03:00
parent 13ea0efcd7
commit e4b4dca53a
18 changed files with 437 additions and 2 deletions
@@ -7,12 +7,15 @@
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
+    <!-- Основной контейнер демо: Flask только подставляет version, остальное работает в браузере. -->
    <main class="page">
+        <!-- Заголовок показывает назначение picker и текущую версию сборки. -->
        <header>
            <p class="eyebrow">FILE INTAKE / {{ version }}</p>
            <h1>Загрузка документов</h1>
            <p class="lede">Выберите отдельные файлы или целую папку. Архивы будут раскрыты автоматически.</p>
        </header>
+        <!-- Скрытые input дают браузеру FileList; кнопки ниже программно вызывают click(). -->
        <section class="toolbar" aria-label="Выбор файлов">
            <input id="file-input" type="file" accept=".pdf,.doc,.docx,.txt,.md,.zip" multiple hidden>
            <input id="folder-input" type="file" accept=".pdf,.doc,.docx,.txt,.md,.zip" webkitdirectory directory multiple hidden>
@@ -20,17 +23,22 @@
            <button id="folder-btn" type="button" class="secondary">Выбрать папку</button>
            <button id="clear-btn" type="button" class="quiet">Очистить</button>
        </section>
+        <!-- Сюда могут выводиться сообщения интегратора; таблица использует отдельный render(). -->
        <p id="status" class="status" role="status"></p>
+        <!-- tableBodyEl является обязательным DOM-контрактом initUploadTable. -->
        <div class="table-wrap">
            <table>
                <thead><tr><th>Путь</th><th>Размер</th><th>Статус</th><th></th></tr></thead>
                <tbody id="table-body"></tbody>
            </table>
        </div>
+        <!-- countEl обновляется render() и включает leaf-файлы даже в свернутых группах. -->
        <p id="count" class="count"></p>
    </main>
+    <!-- fflate должен быть загружен до ES-модулей, потому что ZIP-парсер использует global fflate. -->
    <script src="{{ url_for('static', filename='vendor/fflate.min.js') }}"></script>
    <script type="module">
+        // Конфигурация приходит из Flask; DOM-ссылки передаются в переиспользуемый picker.
        import { initUploadTable } from "/upload-frontend/table/init_upload_table.js";

        const cfg = {{ config|tojson }};
@@ -41,7 +49,9 @@
            tableBodyEl: document.querySelector('#table-body'),
            countEl: document.querySelector('#count'),
        });
+        // status зарезервирован для интегратора; picker сейчас обновляет только таблицу и count.
        const status = document.querySelector('#status');
+        // Кнопки не содержат собственной логики выбора: весь state остаётся внутри table API.
        document.querySelector('#files-btn').onclick = () => table.pickFiles();
        document.querySelector('#folder-btn').onclick = () => table.pickFolder();
        document.querySelector('#clear-btn').onclick = () => table.clear();