Merge pull request #21 from mulesoft/persistent_filters

Persistent filters

Author: machaval

scripts/portal_generator/assets/portal.js

@@ -961,6 +961,35 @@ function filterByTags() {
 
     // Update results count and type
     updateResultsCount(visibleApis + visibleSkills, selectedType);
+
+    // Update URL with current filter
+    updateURLWithFilter(selectedType);
+}
+
+function updateURLWithFilter(filterType) {
+    const url = new URL(window.location);
+    if (filterType && filterType !== 'all') {
+        url.searchParams.set('filter', filterType);
+        localStorage.setItem('homepage-filter', filterType);
+    } else {
+        url.searchParams.delete('filter');
+        localStorage.removeItem('homepage-filter');
+    }
+    console.log('Updating URL to:', url.toString());
+    window.history.replaceState({}, '', url);
+}
+
+function getFilterFromURL() {
+    const url = new URL(window.location);
+    const urlFilter = url.searchParams.get('filter');
+
+    // Priority: URL parameter > localStorage > default 'all'
+    if (urlFilter) {
+        return urlFilter;
+    }
+
+    const savedFilter = localStorage.getItem('homepage-filter');
+    return savedFilter || 'all';
 }
 
 function updateResultsCount(count, filterType) {
@@ -1127,6 +1156,19 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    // Initialize filter from URL on page load
+    const urlFilter = getFilterFromURL();
+    console.log('URL filter:', urlFilter);
+    if (urlFilter !== 'all') {
+        const targetTab = document.querySelector(`.hero-tab[data-filter="${urlFilter}"]`);
+        console.log('Target tab:', targetTab);
+        if (targetTab) {
+            heroTabs.forEach(t => t.classList.remove('active'));
+            targetTab.classList.add('active');
+            filterByTags();
+        }
+    }
+
     // Set up tag search input
     const tagSearchInput = document.getElementById('tagSearchInput');
     const tagSearchContainer = document.getElementById('tagSearchInputContainer');
@@ -7133,6 +7175,22 @@ function toggleParamDescription(button) {
                 return direction === 'asc'
                     ? aValue.localeCompare(bValue)
                     : bValue.localeCompare(aValue);
+            } else if (sortBy === 'type') {
+                aValue = a.getAttribute('data-type') || '';
+                bValue = b.getAttribute('data-type') || '';
+                // Sort by type, then by name as secondary sort
+                const typeCompare = direction === 'asc'
+                    ? aValue.localeCompare(bValue)
+                    : bValue.localeCompare(aValue);
+
+                if (typeCompare !== 0) {
+                    return typeCompare;
+                }
+
+                // Secondary sort by name
+                const aName = a.getAttribute('data-name') || '';
+                const bName = b.getAttribute('data-name') || '';
+                return aName.localeCompare(bName);
             } else if (sortBy === 'endpoints') {
                 // Extract count from the badge text (endpoints for APIs, steps for Skills)
                 const aCard = a.querySelector('.badge-count');

scripts/portal_generator/assets/styles.css

@@ -1136,6 +1136,7 @@ code {
     font-weight: var(--font-weight-semibold);
     color: var(--color-gray-900);
     margin: 0 0 20px 0;
+    border-bottom: 1px solid var(--color-gray-300);
 }
 
 .sort-modal-field {
@@ -6328,7 +6329,8 @@ details[open] .examples-toggle-icon {
     display: flex;
     flex-direction: column;
     flex: 1;
-    min-height: 200px;  /* Ensure content area has minimum height */
+    min-height: 200px;
+    /* Ensure content area has minimum height */
 }
 
 .try-response-body,
@@ -6347,7 +6349,8 @@ details[open] .examples-toggle-icon {
     white-space: pre-wrap;
     word-break: break-word;
     flex: 1;
-    min-height: 200px;  /* Ensure ACE editor has minimum height */
+    min-height: 200px;
+    /* Ensure ACE editor has minimum height */
 }
 
 .try-response-body.active,

scripts/portal_generator/templates/homepage.html

@@ -65,6 +65,7 @@ <h3 class="sort-modal-title">Sort</h3>
                                 <label for="sortBy" class="sort-modal-label">Sort by</label>
                                 <select id="sortBy" class="sort-modal-select">
                                     <option value="name">Name</option>
+                                    <option value="type">Type</option>
                                     <option value="endpoints">Endpoints</option>
                                 </select>
                             </div>