Add filtering and complex relations (#269)

Co-authored-by: Ruth Koole <[email protected]>
MinBZK · Sep 23, 2024 · 62ce4c4 · 62ce4c4
1 parent 22062b5
commit 62ce4c4
Show file tree

Hide file tree

Showing 126 changed files with 1,124 additions and 435 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,6 @@ site
 #  python cache
 **/__pycache__/**
 
-src/overrides/hooks/create_vereisten.py
+src/overrides/hooks/create_vereisten.py
+
+*.DS_Store
diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg
diff --git a/docs/governance/index.md b/docs/governance/index.md
@@ -24,8 +24,8 @@ Let wel: Het Algoritmekader schrijft niet voor hoe een organisatie ingericht moe
 
 ## Vereisten
 
-<!-- list_vereisten_1 onderwerp/governance -->
+<!-- list_vereisten onderwerp/governance no-search no-onderwerp no-rol no-levenscyclus -->
 
 ## Maatregelen
 
-<!-- list_maatregelen_1 onderwerp/governance -->
+<!-- list_maatregelen onderwerp/governance no-search no-onderwerp no-rol no-levenscyclus -->
diff --git a/docs/javascripts/extra.js b/docs/javascripts/extra.js
@@ -0,0 +1,174 @@
+// Wait for MkDocs Material content loading events
+document$.subscribe(function() {
+    // Initialize Choices.js when the document is loaded or content is switched
+    initializeChoices();
+
+    // Set active navigation link on page load or after navigation
+    setActiveLink();
+
+    // Attach event listeners to the filters for table filtering
+    attachFilterListeners();
+
+    // Reinitialize Choices.js when content is dynamically updated
+    document.addEventListener('contentUpdated', function() {
+        initializeChoices();
+        attachFilterListeners(); // Re-attach listeners after content updates
+    });
+});
+
+// Function to initialize Choices.js for multi-select filters
+function initializeChoices() {
+    const elements = document.querySelectorAll('.js-example-basic-multiple');
+
+    elements.forEach(function(element) {
+        // Check if Choices.js is already initialized
+        if (!element.choicesInstance) {
+            const choices = new Choices(element, {
+                removeItemButton: true,
+                placeholder: true,
+                searchEnabled: true,
+                noResultsText: 'Geen resultaten',
+                noChoicesText: 'Geen keuzes beschikbaar',
+                itemSelectText: 'Klik om te selecteren',
+                resetScrollPosition: false
+            });
+
+            // Store the Choices.js instance to avoid re-initialization
+            element.choicesInstance = choices;
+            console.log("Choices.js initialized");
+        }
+    });
+}
+
+// Function to set active link in the navigation based on the current page
+function setActiveLink() {
+    var currentUrl = window.location.pathname;
+
+    // Remove all existing active classes
+    document.querySelectorAll('.md-nav__item--active, .md-nav__link--active, .md-nav__dropdown-item--active, .md-nav__dropdown-link--active').forEach(function(el) {
+        el.classList.remove('md-nav__item--active', 'md-nav__link--active', 'md-nav__dropdown-item--active', 'md-nav__dropdown-link--active');
+    });
+
+    // Don't set any active class if on root URL
+    if (currentUrl === '/') {
+        return;
+    }
+
+    // Function to set the active class for a given element
+    function setActiveClass(el) {
+        el.classList.add('md-nav__link--active');
+        var item = el.closest('.md-nav__item');
+        if (item) {
+            item.classList.add('md-nav__item--active');
+        }
+    }
+
+    // Function to check if the link matches the current URL
+    function isPathActive(linkPath) {
+        return currentUrl === linkPath || currentUrl.startsWith(linkPath + '/');
+    }
+
+    // Set active class for top navigation links
+    document.querySelectorAll('.md-nav--top .md-nav__link').forEach(function(link) {
+        var linkPath = new URL(link.href).pathname;
+        if (isPathActive(linkPath)) {
+            setActiveClass(link);
+        }
+    });
+
+    // Set active class for dropdown links
+    document.querySelectorAll('.md-nav__dropdown-link').forEach(function(link) {
+        var linkPath = new URL(link.href).pathname;
+        if (isPathActive(linkPath)) {
+            link.classList.add('md-nav__dropdown-link--active');
+            var dropdownItem = link.closest('.md-nav__dropdown-item');
+            if (dropdownItem) {
+                dropdownItem.classList.add('md-nav__dropdown-item--active');
+                var parentItem = dropdownItem.closest('.md-nav__item');
+                if (parentItem) {
+                    parentItem.classList.add('md-nav__item--active');
+                }
+            }
+        }
+    });
+}
+
+// Attach event listeners to trigger table filtering when filters change
+function attachFilterListeners() {
+    var filterSelect = document.getElementById("filterSelect");
+    var levenscyclusSelect = document.getElementById("filterLevenscyclusSelect");
+    var onderwerpSelect = document.getElementById("filterOnderwerpSelect");
+    var filterInput = document.getElementById("filterInput");
+
+    if (filterSelect) {
+        filterSelect.addEventListener('change', filterTable);
+    }
+
+    if (levenscyclusSelect) {
+        levenscyclusSelect.addEventListener('change', filterTable);
+    }
+
+    if (onderwerpSelect) {
+        onderwerpSelect.addEventListener('change', filterTable);
+    }
+
+    if (filterInput) {
+        filterInput.addEventListener('input', filterTable);
+    }
+}
+
+// Example filterTable function for filtering a table based on selected choices
+function filterTable() {
+    console.log("filterTable is aangeroepen");
+
+    var input = document.getElementById("filterInput");
+    var filter = input ? input.value.toUpperCase() : "";
+
+    var select = document.getElementById("filterSelect"); // Rollen filter
+    var selectedRoles = Array.from(select.options)
+        .filter(option => option.selected)
+        .map(option => option.value.toUpperCase());
+
+    var levenscyclusSelect = document.getElementById("filterLevenscyclusSelect"); // Levenscyclus filter
+    var selectedLevenscyclus = Array.from(levenscyclusSelect.options)
+        .filter(option => option.selected)
+        .map(option => option.value.toUpperCase());
+
+    var onderwerpSelect = document.getElementById("filterOnderwerpSelect"); // Onderwerpen filter
+    var selectedOnderwerpen = Array.from(onderwerpSelect.options)
+        .filter(option => option.selected)
+        .map(option => option.value.toUpperCase());
+
+    var table = document.getElementById("myTable");
+    var tr = table ? table.getElementsByTagName("tr") : [];
+
+    for (var i = 1; i < tr.length; i++) { // Skip header row
+        var td = tr[i].getElementsByTagName("td")[0];  // Maatregelen column (td[0])
+        var roles = tr[i].getElementsByTagName("td")[1]; // Rollen column (td[1])
+        var lc = tr[i].getElementsByTagName("td")[2];   // Levenscyclus column (td[2])
+        var onderwerpen = tr[i].getElementsByTagName("td")[3]; // Onderwerpen column (td[3])
+
+        if (td && roles && lc && onderwerpen) {
+            var txtValue = td.textContent || td.innerText;  // Maatregelen value
+            var txtValue2 = roles.textContent || roles.innerText; // Rollen value
+            var txtValue3 = lc.textContent || lc.innerText; // Levenscyclus value
+            var txtValue4 = onderwerpen.textContent || onderwerpen.innerText; // Onderwerpen value
+
+            console.log(`Row ${i} values: `, { txtValue, txtValue2, txtValue3, txtValue4 });
+
+            // Check if all selected filters are present
+            var roleMatch = selectedRoles.every(role => txtValue2.toUpperCase().indexOf(role) > -1);
+            var lcMatch = selectedLevenscyclus.every(lc => txtValue3.toUpperCase().indexOf(lc) > -1);
+            var onderwerpMatch = selectedOnderwerpen.every(onderwerp => txtValue4.toUpperCase().indexOf(onderwerp) > -1);
+
+            if (txtValue.toUpperCase().indexOf(filter) > -1 && roleMatch && lcMatch && onderwerpMatch) {
+                tr[i].style.display = "";
+            } else {
+                tr[i].style.display = "none";
+            }
+        }
+    }
+
+    // Trigger contentUpdated to reinitialize Choices.js after filtering
+    document.dispatchEvent(new Event('contentUpdated'));
+}
diff --git a/docs/javascripts/filtering.js b/docs/javascripts/filtering.js
@@ -0,0 +1,156 @@
+// Wait for MkDocs Material content loading events
+document$.subscribe(function () {
+    // Initialize Choices.js when the document is loaded or content is switched
+    initializeChoices();
+
+    // Attach event listeners to the filters for table filtering
+    attachFilterListeners();
+
+    // Reinitialize Choices.js and filter listeners when content is dynamically updated
+    document.addEventListener('contentUpdated', function () {
+        initializeChoices();
+        attachFilterListeners();
+    });
+});
+
+// Function to initialize Choices.js for multi-select filters
+function initializeChoices() {
+    const elements = document.querySelectorAll('.js-example-basic-multiple');
+
+    elements.forEach(function (element) {
+        // Check if Choices.js is already initialized
+        if (!element.choicesInstance) {
+            const choices = new Choices(element, {
+                removeItemButton: true,
+                placeholder: true,
+                searchEnabled: true,
+                noResultsText: 'Geen resultaten',
+                noChoicesText: 'Geen keuzes beschikbaar',
+                itemSelectText: 'Klik om te selecteren',
+                resetScrollPosition: false
+            });
+
+            // Store the Choices.js instance to avoid re-initialization
+            element.choicesInstance = choices;
+            console.log("Choices.js initialized");
+        }
+    });
+}
+
+// Attach event listeners to trigger table filtering when filters change
+function attachFilterListeners() {
+    var filterSelect = document.getElementById("filterSelect");
+    var levenscyclusSelect = document.getElementById("filterLevenscyclusSelect");
+    var onderwerpSelect = document.getElementById("filterOnderwerpSelect");
+    var filterInput = document.getElementById("filterInput");
+
+    if (filterSelect) {
+        filterSelect.addEventListener('change', filterTable);
+    }
+
+    if (levenscyclusSelect) {
+        levenscyclusSelect.addEventListener('change', filterTable);
+    }
+
+    if (onderwerpSelect) {
+        onderwerpSelect.addEventListener('change', filterTable);
+    }
+
+    if (filterInput) {
+        filterInput.addEventListener('input', filterTable);
+    }
+}
+
+// Function for filtering a table based on selected choices
+function filterTable() {
+    console.log("filterTable is aangeroepen");
+
+    var input = document.getElementById("filterInput");
+    var filter = input ? input.value.toUpperCase() : "";
+
+    var select = document.getElementById("filterSelect"); // Rollen filter
+    var selectedRoles = Array.from(select.options)
+        .filter(option => option.selected)
+        .map(option => option.value.toUpperCase());
+
+    var levenscyclusSelect = document.getElementById("filterLevenscyclusSelect"); // Levenscyclus filter
+    var selectedLevenscyclus = Array.from(levenscyclusSelect.options)
+        .filter(option => option.selected)
+        .map(option => option.value.toUpperCase());
+
+    var onderwerpSelect = document.getElementById("filterOnderwerpSelect"); // Onderwerpen filter
+    var selectedOnderwerpen = Array.from(onderwerpSelect.options)
+        .filter(option => option.selected)
+        .map(option => option.value.toUpperCase());
+
+    var table = document.getElementById("myTable");
+    var tr = table ? table.getElementsByTagName("tr") : [];
+
+    for (var i = 1; i < tr.length; i++) { // Skip header row
+        var td = tr[i].getElementsByTagName("td")[0];  // Maatregelen column (td[0])
+        var roles = tr[i].getElementsByTagName("td")[1]; // Rollen column (td[1])
+        var lc = tr[i].getElementsByTagName("td")[2];   // Levenscyclus column (td[2])
+        var onderwerpen = tr[i].getElementsByTagName("td")[3]; // Onderwerpen column (td[3])
+
+        if (td && roles && lc && onderwerpen) {
+            var txtValue = td.textContent || td.innerText;  // Maatregelen value
+            var txtValue2 = roles.textContent || roles.innerText; // Rollen value
+            var txtValue3 = lc.textContent || lc.innerText; // Levenscyclus value
+            var txtValue4 = onderwerpen.textContent || onderwerpen.innerText; // Onderwerpen value
+
+            console.log(`Row ${i} values: `, { txtValue, txtValue2, txtValue3, txtValue4 });
+
+            // Check if all selected filters are present
+            var roleMatch = selectedRoles.every(role => txtValue2.toUpperCase().indexOf(role) > -1);
+            var lcMatch = selectedLevenscyclus.every(lc => txtValue3.toUpperCase().indexOf(lc) > -1);
+            var onderwerpMatch = selectedOnderwerpen.every(onderwerp => txtValue4.toUpperCase().indexOf(onderwerp) > -1);
+
+            if (txtValue.toUpperCase().indexOf(filter) > -1 && roleMatch && lcMatch && onderwerpMatch) {
+                tr[i].style.display = "";
+            } else {
+                tr[i].style.display = "none";
+            }
+        }
+    }
+
+    // Trigger contentUpdated to reinitialize Choices.js after filtering
+    document.dispatchEvent(new Event('contentUpdated'));
+}
+
+// Function to display vereisten when a specific maatregel is clicked
+function showVereisten(link) {
+    // Get the vereisten associated with the clicked maatregel from the data attribute
+    const vereisten = JSON.parse(link.getAttribute('data-vereisten'));
+
+    // Find or create a container for displaying vereisten
+    let vereistenTable = document.getElementById('vereistenTable');
+    if (!vereistenTable) {
+        vereistenTable = document.createElement('table');
+        vereistenTable.id = 'vereistenTable';
+        vereistenTable.innerHTML = `
+            <thead>
+                <tr>
+                    <th>Vereisten</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        `;
+        document.body.appendChild(vereistenTable); // You can place it in a specific container
+    }
+
+    // Clear previous vereisten content
+    const tbody = vereistenTable.querySelector('tbody');
+    tbody.innerHTML = '';
+
+    // Populate the table with the vereisten
+    vereisten.forEach(vereiste => {
+        const row = document.createElement('tr');
+        const cell = document.createElement('td');
+        cell.textContent = vereiste;
+        row.appendChild(cell);
+        tbody.appendChild(row);
+    });
+
+    // Optionally scroll to the vereisten table or focus on it
+    vereistenTable.scrollIntoView({ behavior: 'smooth' });
+}
diff --git a/docs/levenscyclus/archiveren.md b/docs/levenscyclus/archiveren.md
@@ -1,16 +1,19 @@
 --- 
 title: Archiveren
+hide:
+- navigation
+- toc
 ---
 
 Wanneer het algoritme of AI-model niet langer nodig is of wordt vervangen door een verbeterde versie, wordt het gearchiveerd. Dit omvat het behouden van documentatie en eventuele relevante artefacten.
 
 ## Vereisten
 
-<!-- list_vereisten levenscyclus/archiveren -->
+<!-- list_vereisten levenscyclus/archiveren no-rol no-levenscyclus no-search no-onderwerp -->
 
 ## Maatregelen
 
-<!-- list_maatregelen levenscyclus/archiveren -->
+<!-- list_maatregelen levenscyclus/archiveren no-rol no-levenscyclus no-search no-onderwerp -->
 
 !!! info "Disclaimer"
 

diff --git a/docs/levenscyclus/dataverkenning-en-datapreparatie.md b/docs/levenscyclus/dataverkenning-en-datapreparatie.md
@@ -1,5 +1,8 @@
 --- 
 title: Dataverkenning en datapreparatie
+hide:
+- navigation
+- toc
 ---
 
 In deze fase worden relevante datasets geïdentificeerd en wanneer nodig wordt nieuwe data verzameld. 
@@ -20,11 +23,11 @@ Als de verzamelde data van voldoende kwaliteit is en de vereiste maatregelen zij
 
 ## Vereisten
 
-<!-- list_vereisten levenscyclus/dataverkenning-en-datapreparatie -->
+<!-- list_vereisten levenscyclus/dataverkenning-en-datapreparatie no-rol no-levenscyclus no-search no-onderwerp -->
 
 ## Maatregelen
 
-<!-- list_maatregelen levenscyclus/dataverkenning-en-datapreparatie -->
+<!-- list_maatregelen levenscyclus/dataverkenning-en-datapreparatie no-rol no-levenscyclus no-search no-onderwerp -->
 
 !!! info "Disclaimer"