Spaces:

OrganizedProgrammers
/

Docxtract

Sleeping

App Files Files Community

om4r932 commited on Jun 30

Commit

ed24fa8

1 Parent(s): 58becbd

Filters update

Browse files

Files changed (3) hide show

index.html +83 -25
static/script.js +167 -27
updates.md +16 -0

index.html CHANGED Viewed

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Requirements Extractor</title>
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <!-- Loading Overlay -->
     <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
@@ -57,23 +60,61 @@
         <!-- Filters -->
         <div id="filters-container" class="mb-6 hidden">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div>
-                    <label for="doc-type-filter" class="block text-sm font-medium text-gray-700 mb-2">Type</label>
-                    <select id="doc-type-filter" class="w-full p-2 border border-gray-300 rounded-md">
-                        <option value="">Tous</option>
-                    </select>
                 </div>
-                <div>
-                    <label for="doc-status-filter" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
-                    <select id="doc-status-filter" class="w-full p-2 border border-gray-300 rounded-md">
-                        <option value="">Tous</option>
-                    </select>
                 </div>
-                <div>
-                    <label for="agenda-item-filter" class="block text-sm font-medium text-gray-700 mb-2">Agenda Item</label>
-                    <select id="agenda-item-filter" class="w-full p-2 border border-gray-300 rounded-md">
-                        <option value="">Tous</option>
-                    </select>
                 </div>
             </div>
         </div>
@@ -81,21 +122,33 @@
         <!-- Action Buttons -->
         <div id="action-buttons-container" class="mb-6 hidden">
             <div class="flex flex-wrap gap-2">
-                <button id="download-tdocs-btn" class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600">
                     Download TDocs
                 </button>
-                <button id="extract-requirements-btn" class="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
                     Extract Requirements
                 </button>
-                <button id="find-requirements-btn" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 hidden">
                     Find Requirements
                 </button>
-                <button id="categorize-requirements-btn" class="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 hidden">
                     Categorize Requirements
                 </button>
             </div>
         </div>
         <!-- Data Table -->
         <div id="data-table-container" class="mb-6 hidden">
             <table id="data-table" class="w-full bg-white rounded-lg shadow overflow-hidden">
@@ -126,8 +179,10 @@
         <div id="query-requirements-container" class="mb-6 hidden">
             <h2 class="text-2xl font-bold mb-4">Query requirements</h2>
             <div class="flex gap-2">
-                <input type="text" id="query-input" class="flex-1 p-2 border border-gray-300 rounded-md" placeholder="Enter your query...">
-                <button id="search-requirements-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                     Search
                 </button>
             </div>
@@ -143,10 +198,12 @@
         <!-- Solutions Action Buttons -->
         <div id="solutions-action-buttons-container" class="mb-6 hidden">
             <div class="flex flex-wrap gap-2 justify-center">
-                <button id="get-solutions-btn" class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600">
                     Get Solutions
                 </button>
-                <button id="get-solutions-step-btn" class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600">
                     Get Solutions (Step-by-step)
                 </button>
             </div>
@@ -161,4 +218,5 @@
     <script src="/static/script.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Requirements Extractor</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/5.0.43/daisyui.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <!-- Loading Overlay -->
     <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         <!-- Filters -->
         <div id="filters-container" class="mb-6 hidden">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <!-- Type Filter Dropdown -->
+                <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
+                    <div tabindex="0" role="button" class="btn w-full justify-between" id="doc-type-filter-btn">
+                        <span id="doc-type-filter-label">Type</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </div>
+                    <ul tabindex="0"
+                        class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-full min-w-[200px] max-h-60 overflow-y-auto"
+                        id="doc-type-filter-menu">
+                        <!-- Rempli par JS -->
+                    </ul>
                 </div>
+                <!-- Status Filter Dropdown -->
+                <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
+                    <div tabindex="0" role="button" class="btn w-full justify-between" id="status-dropdown-btn">
+                        <span id="status-filter-label">Status (Tous)</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </div>
+                    <ul tabindex="0"
+                        class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto">
+                        <li class="border-b pb-2 mb-2">
+                            <label class="flex items-center gap-2 cursor-pointer">
+                                <input type="checkbox" class="status-checkbox" value="all" checked>
+                                <span class="font-semibold">Tous</span>
+                            </label>
+                        </li>
+                        <div id="status-options" class="flex flex-col gap-1"></div>
+                    </ul>
                 </div>
+                <!-- Agenda Item Filter Dropdown -->
+                <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
+                    <div tabindex="0" role="button" class="btn w-full justify-between" id="agenda-dropdown-btn">
+                        <span id="agenda-filter-label">Agenda Item (Tous)</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </div>
+                    <ul tabindex="0"
+                        class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto">
+                        <li class="border-b pb-2 mb-2">
+                            <label class="flex items-center gap-2 cursor-pointer">
+                                <input type="checkbox" class="agenda-checkbox" value="all" checked>
+                                <span class="font-semibold">Tous</span>
+                            </label>
+                        </li>
+                        <div id="agenda-options" class="flex flex-col gap-1"></div>
+                    </ul>
                 </div>
             </div>
         </div>
         <!-- Action Buttons -->
         <div id="action-buttons-container" class="mb-6 hidden">
             <div class="flex flex-wrap gap-2">
+                <button id="download-tdocs-btn"
+                    class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600">
                     Download TDocs
                 </button>
+                <button id="extract-requirements-btn"
+                    class="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
                     Extract Requirements
                 </button>
+                <button id="find-requirements-btn"
+                    class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 hidden">
                     Find Requirements
                 </button>
+                <button id="categorize-requirements-btn"
+                    class="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 hidden">
                     Categorize Requirements
                 </button>
             </div>
         </div>
+        <!-- Data Table Informations -->
+        <div class="flex justify-end mb-2 gap-2 items-center">
+            <span id="displayed-count" class="text-sm text-gray-700 bg-white rounded px-3 py-1 shadow">
+                0 document affiché
+            </span>
+            <span id="selected-count" class="text-sm text-blue-700 bg-blue-50 rounded px-3 py-1 shadow">
+                0 document sélectionné
+            </span>
+        </div>
         <!-- Data Table -->
         <div id="data-table-container" class="mb-6 hidden">
             <table id="data-table" class="w-full bg-white rounded-lg shadow overflow-hidden">
         <div id="query-requirements-container" class="mb-6 hidden">
             <h2 class="text-2xl font-bold mb-4">Query requirements</h2>
             <div class="flex gap-2">
+                <input type="text" id="query-input" class="flex-1 p-2 border border-gray-300 rounded-md"
+                    placeholder="Enter your query...">
+                <button id="search-requirements-btn"
+                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                     Search
                 </button>
             </div>
         <!-- Solutions Action Buttons -->
         <div id="solutions-action-buttons-container" class="mb-6 hidden">
             <div class="flex flex-wrap gap-2 justify-center">
+                <button id="get-solutions-btn"
+                    class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600">
                     Get Solutions
                 </button>
+                <button id="get-solutions-step-btn"
+                    class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600">
                     Get Solutions (Step-by-step)
                 </button>
             </div>
     <script src="/static/script.js"></script>
 </body>
+</html>

static/script.js CHANGED Viewed

@@ -1,5 +1,8 @@
 // Variables globales
 let requirements = [];
 let accordionStates = {};
 let formattedRequirements = [];
 let categorizedRequirements = [];
@@ -81,6 +84,113 @@ function populateSelect(selectId, options, defaultText = 'Sélectionner...') {
     }
 }
 /**
  * Extrait les données du tableau selon un mapping
  * @param {Object} mapping - Mapping des colonnes {columnName: propertyName}
@@ -218,24 +328,32 @@ function populateDataTable(data) {
     });
     setupTableEvents();
 }
-/**
- * Configure les filtres basés sur les données
- * @param {Array} data - Données pour extraire les valeurs uniques
- */
 function setupFilters(data) {
     const types = [...new Set(data.map(item => item.Type).filter(Boolean))];
     const statuses = [...new Set(data.map(item => item['TDoc Status']).filter(Boolean))];
     const agendaItems = [...new Set(data.map(item => item['Agenda item description']).filter(Boolean))];
-    populateSelect('doc-type-filter', Object.fromEntries(types.map(t => [t, t])), 'Tous');
-    populateSelect('doc-status-filter', Object.fromEntries(statuses.map(s => [s, s])), 'Tous');
-    populateSelect('agenda-item-filter', Object.fromEntries(agendaItems.map(a => [a, a])), 'Tous');
-    setupFilterEvents();
-}
 /**
  * Configure les événements des filtres
  */
@@ -245,44 +363,66 @@ function setupFilterEvents() {
     });
 }
 /**
  * Applique les filtres au tableau
  */
 function applyFilters() {
-    const typeFilter = document.getElementById('doc-type-filter').value;
-    const statusFilter = document.getElementById('doc-status-filter').value;
-    const agendaFilter = document.getElementById('agenda-item-filter').value;
     const rows = document.querySelectorAll('#data-table tbody tr');
     rows.forEach(row => {
-        const type = row.getAttribute('data-type');
-        const status = row.getAttribute('data-status');
-        const agenda = row.getAttribute('data-agenda');
-        const typeMatch = !typeFilter || type === typeFilter;
-        const statusMatch = !statusFilter || status === statusFilter;
-        const agendaMatch = !agendaFilter || agenda === agendaFilter;
-        if (typeMatch && statusMatch && agendaMatch) {
-            row.style.display = '';
-        } else {
-            row.style.display = 'none';
-        }
     });
 }
 /**
  * Configure les événements du tableau
  */
 function setupTableEvents() {
-    // Checkbox "Sélectionner tout"
     document.getElementById('select-all-checkbox').addEventListener('change', function() {
         const checkboxes = document.querySelectorAll('.row-checkbox');
         checkboxes.forEach(checkbox => {
-            if(checkbox.parentElement.parentElement.style.display != "none"){checkbox.checked = this.checked;}
         });
     });
 }
 /**

 // Variables globales
 let requirements = [];
+let selectedType = ""; // "" = Tous
+let selectedStatus = new Set(); // valeurs cochées (hors "Tous")
+let selectedAgenda = new Set();
 let accordionStates = {};
 let formattedRequirements = [];
 let categorizedRequirements = [];
     }
 }
+function populateCheckboxDropdown(optionsContainerId, options, filterType, labelId, selectionSet) {
+    const container = document.getElementById(optionsContainerId);
+    container.innerHTML = '';
+    selectionSet.clear(); // reset all
+    // Ajoute chaque option
+    options.forEach(option => {
+        const safeId = `${filterType}-${encodeURIComponent(option).replace(/[%\s]/g, '_')}`;
+        const label = document.createElement('label');
+        label.className = "flex items-center gap-2 cursor-pointer py-1";
+        label.innerHTML = `
+            <input type="checkbox" class="${filterType}-checkbox option-checkbox" id="${safeId}" value="${option}">
+            <span>${option}</span>
+        `;
+        label.querySelector('input').addEventListener('change', function() {
+            if (this.checked) {
+                selectionSet.add(this.value);
+            } else {
+                selectionSet.delete(this.value);
+            }
+            // Gestion du label "Tous"
+            updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
+            // Gestion du "Tous" global
+            const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
+            if (allBox && allBox.checked) allBox.checked = false;
+            // Si plus rien n'est coché, recoche "Tous"
+            if (selectionSet.size === 0 && allBox) allBox.checked = true;
+            applyFilters();
+        });
+        container.appendChild(label);
+    });
+    // Réinitialise le label
+    updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
+    // Gestion de "Tous"
+    const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
+    if (allBox) {
+        allBox.addEventListener('change', function() {
+            if (this.checked) {
+                // Décoche tout le reste
+                selectionSet.clear();
+                container.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
+                this.checked = true; // reste coché
+                updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
+                applyFilters();
+            }
+        });
+    }
+}
+function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
+    const label = document.getElementById(labelId);
+    if (!set.size) {
+        label.textContent = type.charAt(0).toUpperCase() + type.slice(1) + " (Tous)";
+    } else if (set.size === 1) {
+        label.textContent = [...set][0];
+    } else {
+        label.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)} (${set.size}/${totalCount})`;
+    }
+}
+function updateSelectedFilters(filterType, value, isChecked) {
+  if (isChecked) {
+    selectedFilters[filterType].add(value);
+  } else {
+    selectedFilters[filterType].delete(value);
+  }
+}
+function populateDaisyDropdown(menuId, options, labelId, onSelect) {
+    const menu = document.getElementById(menuId);
+    menu.innerHTML = '';
+    // Option "Tous"
+    const liAll = document.createElement('li');
+    liAll.innerHTML = `<a data-value="">Tous</a>`;
+    liAll.querySelector('a').onclick = e => {
+        e.preventDefault();
+        document.getElementById(labelId).textContent = "Type";
+        onSelect("");
+    };
+    menu.appendChild(liAll);
+    // Ajoute chaque option
+    options.forEach(opt => {
+        const li = document.createElement('li');
+        li.innerHTML = `<a data-value="${opt}">${opt}</a>`;
+        li.querySelector('a').onclick = e => {
+            e.preventDefault();
+            document.getElementById(labelId).textContent = opt;
+            onSelect(opt);
+        };
+        menu.appendChild(li);
+    });
+}
+function updateFilterLabel(filterType) {
+  const selectedCount = selectedFilters[filterType].size;
+  const labelElement = document.getElementById(`${filterType}-filter-label`);
+  if (selectedCount === 0) {
+    labelElement.textContent = `${filterType} (Tous)`;
+  } else {
+    labelElement.textContent = `${filterType} (${selectedCount} sélectionné${selectedCount > 1 ? 's' : ''})`;
+  }
+}
 /**
  * Extrait les données du tableau selon un mapping
  * @param {Object} mapping - Mapping des colonnes {columnName: propertyName}
     });
     setupTableEvents();
+    updateSelectedAndDisplayedCount();
 }
 function setupFilters(data) {
+    // Extrait les valeurs uniques
     const types = [...new Set(data.map(item => item.Type).filter(Boolean))];
     const statuses = [...new Set(data.map(item => item['TDoc Status']).filter(Boolean))];
     const agendaItems = [...new Set(data.map(item => item['Agenda item description']).filter(Boolean))];
+    // Type (sélection unique DaisyUI)
+    populateDaisyDropdown('doc-type-filter-menu', types, 'doc-type-filter-label', type => {
+        selectedType = type;
+        applyFilters();
+    });
+    // Status (checkbox multiselect)
+    populateCheckboxDropdown('status-options', statuses, 'status', 'status-filter-label', selectedStatus);
+    // Agenda (checkbox multiselect)
+    populateCheckboxDropdown('agenda-options', agendaItems, 'agenda', 'agenda-filter-label', selectedAgenda);
+    // Initialisation des labels (optionnel)
+    document.getElementById('doc-type-filter-label').textContent = 'Type';
+    document.getElementById('status-filter-label').textContent = 'Status (Tous)';
+    document.getElementById('agenda-filter-label').textContent = 'Agenda Item (Tous)';
+}
 /**
  * Configure les événements des filtres
  */
     });
 }
+function updateSelectedAndDisplayedCount() {
+    // Lignes visibles (après filtrage)
+    const rows = document.querySelectorAll('#data-table tbody tr');
+    let displayed = 0, selected = 0;
+    rows.forEach(row => {
+        // display: none signifie caché par le filtre
+        if (row.style.display === '' || row.style.display === undefined) {
+            displayed++;
+            const cb = row.querySelector('.row-checkbox');
+            if (cb && cb.checked) selected++;
+        }
+    });
+    document.getElementById('displayed-count').textContent =
+        `${displayed} document${displayed !== 1 ? 's' : ''} affiché${displayed > 1 ? 's' : ''}`;
+    document.getElementById('selected-count').textContent =
+        `${selected} document${selected !== 1 ? 's' : ''} sélectionné${selected > 1 ? 's' : ''}`;
+}
 /**
  * Applique les filtres au tableau
  */
 function applyFilters() {
     const rows = document.querySelectorAll('#data-table tbody tr');
     rows.forEach(row => {
+        const typeVal = row.getAttribute('data-type');
+        const statusVal = row.getAttribute('data-status');
+        const agendaVal = row.getAttribute('data-agenda');
+        const typeMatch = !selectedType || typeVal === selectedType;
+        const statusMatch = !selectedStatus.size || selectedStatus.has(statusVal);
+        const agendaMatch = !selectedAgenda.size || selectedAgenda.has(agendaVal);
+        row.style.display = (typeMatch && statusMatch && agendaMatch) ? '' : 'none';
     });
+    updateSelectedAndDisplayedCount?.();
 }
 /**
  * Configure les événements du tableau
  */
 function setupTableEvents() {
     document.getElementById('select-all-checkbox').addEventListener('change', function() {
         const checkboxes = document.querySelectorAll('.row-checkbox');
         checkboxes.forEach(checkbox => {
+            // Ne coche que les visibles
+            if (checkbox.closest('tr').style.display === '' || checkbox.closest('tr').style.display === undefined) {
+                checkbox.checked = this.checked;
+            }
         });
+        updateSelectedAndDisplayedCount();
     });
+    // Listener sur chaque ligne
+    const rowCheckboxes = document.querySelectorAll('.row-checkbox');
+    rowCheckboxes.forEach(cb => cb.addEventListener('change', updateSelectedAndDisplayedCount));
+    // Compteur initial
+    updateSelectedAndDisplayedCount();
 }
 /**

updates.md ADDED Viewed

	@@ -0,0 +1,16 @@

+# Mises à jour à réaliser (Fixes/UI change/API change)
+#### Remarques : Modifs appliqué à la V2 (refonte de l'UI)
+- [x] Permettre la séléction de plusieurs agendas & de status
+- [x] Déployer sous OrganizedProgrammers
+- [x] Afficher nombre de documents qui vont être traités, en bas du dataframe
+- [ ] Afficher une barre de chargement pour savoir ou en est le chargement
+- [ ] Accordéon par catégorie
+- [ ] Permettre de limiter le nombre de catégories
+- [ ] Regénérer les catégories
+- [ ] Bouton pour copier les tous les requirements catégorisés.
+- [ ]  Optionnellement, séléctionner avec une checkbox  ceux qu'on veut récup
+- [ ] Permettre de séléctionner catégories >> requirements utiliser pour les solutions à générer (ne plus tout utiliser pour l'instant)
+- [ ] Afficher en markdown la description en makrdown
+- [ ] Permettre de manager les solutions générées (supprimer)
+- [ ] BOUTON EXPORT OMARRRRRRRRRRRRRRRRRRRRRRRRRR
+- [ ] Catch quand on a un erreur dans le processing, pour indiquer sur les projects qui utilisent l'API de regarder manuellement