Refactor projects page #294

DinneK · 2024-12-03T20:30:50Z

module-name: Refactor functionality projects.js

Problem:

Metrics project page needs pagination. Fixes on search functionality, filter functionality and sort.

Solution:

Refactor projects page to include pagination. Refactor search to work with pagination. Fix filter boxes. Sort is functional. All icons display. Contrast fixed in footer.

Result:

All functionality works as intended.

Test Plan:

Test in prod

Next steps:

Signed-off-by: Dinne Kopelevich <[email protected]>

github-actions

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 10 in e181739

    
           import { reportHeadingTemplate, projectCardTemplate } from "./templates"; 
        
           import DOMPurify from 'dompurify'; 
        
           const projectsData = document.getElementById('metrics').textContent; 
        
           const orgsData = document.getElementById('org-data').textContent; 
        
           const parsedOrgsData = JSON.parse(orgsData); 
        
           const siteData = JSON.parse(document.getElementById('site-data').textContent); 
        
           const parsedProjectsData = JSON.parse(projectsData); 
        
           const filtersContainer = document.querySelector('.filters-container'); 
        
           const templateDiv = document.getElementById('content-container');

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 12 to 17 in e181739

    
           const sortDirection = document.getElementById('sort-direction'); 
        
           const sortSelection = document.getElementById('sort-selection'); 
        
           let currentPage = 1; 
        
           const itemsPerPage = 10; 
        
           let filteredProjects = [...parsedProjectsData];

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 27 in e181739

sortSelection.addEventListener('change', () => {

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 29 to 30 in e181739

    
           document.getElementById("sort-direction-form").hidden = false; 
        
           sortCards();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 34 to 36 in e181739

    
           sortDirection.addEventListener('change', () => { 
        
             const isDescending = sortDirection.value === 'descending' ? true : false;  
        
             sortCards(isDescending);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 104 to 107 in e181739

    
           if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) { 
        
             sortByNumberAttribute(targetProjects, selection, isDescending); 
        
           } else {  
        
             sortByStringAttribute(targetProjects, selection, isDescending);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 117 to 124 in e181739

    
           const allProjects = (filteredProjects || parsedProjectsData).map((project) => ({ 
        
             ...project, 
        
             org: project.owner 
        
           })); 
        
           const startIndex = (currentPage - 1) * itemsPerPage; 
        
           const endIndex = startIndex + itemsPerPage; 
        
           const paginatedProjects = allProjects.slice(startIndex, endIndex);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 127 in e181739

if(!acc[curr.org]) {

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 130 in e181739

acc[curr.org].push(curr);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 132 in e181739

}, {});

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 168 to 170 in e181739

    
           const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div'); 
        
           paginationDiv.id = 'pagination-controls'; 
        
           paginationDiv.innerHTML = '';

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 173 to 174 in e181739

    
           // const totalProjects = Object.values(projects).flat().length;  
        
           const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 177 to 180 in e181739

    
           const prevButton = document.createElement('button'); 
        
           prevButton.textContent = 'Previous'; 
        
           prevButton.disabled = currentPage === 1; 
        
           prevButton.addEventListener('click', () => {

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 182 to 183 in e181739

    
           currentPage--; 
        
           createProjectCards();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 185 to 186 in e181739

    
           }); 
        
           paginationDiv.appendChild(prevButton);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 190 to 197 in e181739

    
           const pageButton = document.createElement('button'); 
        
           pageButton.textContent = i; 
        
           pageButton.disabled = i === currentPage;  
        
           pageButton.addEventListener('click', () => { 
        
             currentPage = i; 
        
             createProjectCards();  
        
           }); 
        
           paginationDiv.appendChild(pageButton);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 201 to 204 in e181739

    
           const nextButton = document.createElement('button'); 
        
           nextButton.textContent = 'Next'; 
        
           nextButton.disabled = currentPage === totalPages; 
        
           nextButton.addEventListener('click', () => {

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 206 to 207 in e181739

    
           currentPage++; 
        
           createProjectCards(); // Re-render cards

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 209 to 210 in e181739

    
           }); 
        
           paginationDiv.appendChild(nextButton);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 214 in e181739

templateDiv.parentElement.appendChild(paginationDiv);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 219 to 223 in e181739

    
           addGlobalEventListener('change', '.usa-checkbox__input', e => { 
        
             // Can use this e.target.name to update selected filters object 
        
             updateFilters(); 
        
             updateFilteredProjects() 
        
           }, filtersContainer)

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 263 in e181739

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 268 in e181739

projectType: []

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 271 to 284 in e181739

    
           document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.organization.push(checkbox.value); 
        
           }); 
        
           document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.maturityModelTier.push(checkbox.value); 
        
           }); 
        
           document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.fismaLevel.push(checkbox.value); 
        
           }); 
        
           document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.projectType.push(checkbox.value); 
        
           }); 
        
           const allProjects = Object.keys(projects).flatMap((org) => projects[org].map((project) => ({...project, org})))

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 286 to 293 in e181739

    
             const matchesOrg = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.org); 
        
             const matchesTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes("Tier" + project.maturityModelTier); 
        
             const matchesFisma = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.fismaLevel); 
        
             const matchesType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.projectType); 
        
             return  matchesOrg && matchesTier && matchesFisma && matchesType; 
        
           }); 
        
           updatePagination(filteredProjects);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 295 in e181739

sortCards();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 299 to 300 in e181739

    
           const totalProjects = (filteredProjects || parsedProjectsData).length; 
        
           const totalPages = Math.ceil(totalProjects / itemsPerPage);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 302 to 303 in e181739

    
           currentPage = Math.min(currentPage, totalPages || 1); 
        
           renderPaginationControls(totalPages);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 307 to 309 in e181739

    
           const startIndex = (currentPage - 1) * itemsPerPage; 
        
           const endIndex = startIndex + itemsPerPage; 
        
           const paginatedProjects = projects.slice(startIndex, endIndex);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 311 in e181739

templateDiv.innerHTML = '';

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 314 in e181739

if(!acc[curr.owner]) {

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 317 in e181739

acc[curr.owner].push(curr);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 319 in e181739

}, {});

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 322 to 345 in e181739

    
           const orgProject = findObject(parsedOrgsData, org); 
        
           const orgHeading = reportHeadingTemplate(orgProject); 
        
           const projectSectionsTemplate = document.createElement('div'); 
        
           projectSectionsTemplate.className = 'project_section'; 
        
           const reportHeading = document.createElement('div'); 
        
           reportHeading.className = "report_heading"; 
        
           reportHeading.innerHTML = DOMPurify.sanitize(orgHeading); 
        
           projectSectionsTemplate.appendChild(reportHeading); 
        
           const projectCards = document.createElement('ul'); 
        
           projectCards.className = "usa-card-group flex-align-stretch"; 
        
           groupedByOrg[org].forEach(repoData => { 
        
             const projectCard = document.createElement('li'); 
        
             projectCard.className = 'usa-card project-card tablet:grid-col-12'; 
        
             projectCard.id = repoData.name; 
        
             projectCard.setAttribute('org-name', repoData.owner); 
        
             projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData)); 
        
             projectCards.appendChild(projectCard); 
        
           }); 
        
           projectSectionsTemplate.appendChild(projectCards); 
        
           templateDiv.append(projectSectionsTemplate);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 347 in e181739

updateHeadingVisibility();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 435 to 436 in e181739

    
           const searchForm = document.getElementById('search-form'); 
        
           const searchBox = document.getElementById("search-input");

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 441 in e181739

e.preventDefault();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 443 in e181739

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 445 to 446 in e181739

    
           const query = searchBox.value.toLowerCase(); 
        
           filteredProjects = parsedProjectsData.filter((project) => project.name.toLowerCase().includes(query));

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in e181739

    
           export const reportHeadingTemplate = function(data) {   
        
               return `

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 14 to 17 in e181739

    
           export function projectCardTemplate(data) {   
        
               const description = data.description !== null ? data.description : "" 
        
               return `

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 20 in e181739

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 24 in e181739

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 27 in e181739

<div>${ description }</div>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 35 in e181739

<span> ${ data.stargazers_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 42 in e181739

<span> ${ data.forks_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 45 in e181739

    
                                               <svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 49 in e181739

<span> ${ data.issues_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 56 in e181739

<span> ${ data.pull_requests_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 62 in e181739

<span> ${ data.watchers_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 72 in e181739

app/src/css/style.css

app/src/js/nav.js

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 311 in d52ddd2

templateDiv.innerHTML = '';

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 314 in d52ddd2

if(!acc[curr.owner]) {

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 317 in d52ddd2

acc[curr.owner].push(curr);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 319 in d52ddd2

}, {});

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 322 to 345 in d52ddd2

    
           const orgProject = findObject(parsedOrgsData, org); 
        
           const orgHeading = reportHeadingTemplate(orgProject); 
        
           const projectSectionsTemplate = document.createElement('div'); 
        
           projectSectionsTemplate.className = 'project_section'; 
        
           const reportHeading = document.createElement('div'); 
        
           reportHeading.className = "report_heading"; 
        
           reportHeading.innerHTML = DOMPurify.sanitize(orgHeading); 
        
           projectSectionsTemplate.appendChild(reportHeading); 
        
           const projectCards = document.createElement('ul'); 
        
           projectCards.className = "usa-card-group flex-align-stretch"; 
        
           groupedByOrg[org].forEach(repoData => { 
        
             const projectCard = document.createElement('li'); 
        
             projectCard.className = 'usa-card project-card tablet:grid-col-12'; 
        
             projectCard.id = repoData.name; 
        
             projectCard.setAttribute('org-name', repoData.owner); 
        
             projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData)); 
        
             projectCards.appendChild(projectCard); 
        
           }); 
        
           projectSectionsTemplate.appendChild(projectCards); 
        
           templateDiv.append(projectSectionsTemplate);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 347 in d52ddd2

updateHeadingVisibility();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 435 to 436 in d52ddd2

    
           const searchForm = document.getElementById('search-form'); 
        
           const searchBox = document.getElementById("search-input");

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 441 in d52ddd2

e.preventDefault();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 443 in d52ddd2

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 445 to 446 in d52ddd2

    
           const query = searchBox.value.toLowerCase(); 
        
           filteredProjects = parsedProjectsData.filter((project) => project.name.toLowerCase().includes(query));

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in d52ddd2

    
           export const reportHeadingTemplate = function(data) {   
        
               return `

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 14 to 17 in d52ddd2

    
           export function projectCardTemplate(data) {   
        
               const description = data.description !== null ? data.description : "" 
        
               return `

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 20 in d52ddd2

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 24 in d52ddd2

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 27 in d52ddd2

<div>${ description }</div>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 35 in d52ddd2

<span> ${ data.stargazers_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 42 in d52ddd2

<span> ${ data.forks_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 45 in d52ddd2

    
                                               <svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 49 in d52ddd2

<span> ${ data.issues_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 56 in d52ddd2

<span> ${ data.pull_requests_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 62 in d52ddd2

<span> ${ data.watchers_count } </span>

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 72 in d52ddd2

app/src/js/projects.js

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

app/src/js/projects.js

app/site/_includes/project-card.liquid

app/src/js/templates.js

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

app/site/index.liquid

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

natalialuzuriaga

Ran npm start and npm run prod and ran into two things:

In the footer, the color of the link when hovered is too light as noted here: Refactor home page #292 (comment)
When I click on the project card, it doesn't take me to the project report. Instead, it takes me to the repo on github.com

Otherwise, all the issues pointed out in the previous PRs regarding icons and the footer have been resolved! Pagination works great on my end, the logic of it plus incorporating filtering + sort with it makes sense to me!

app/site/_includes/project-card.liquid

app/src/js/templates.js

decause-gov

I will defer to Nat/Murt on this one, but LGTM +1 🚢

We'll sort out any issues on dev branch :)

Signed-off-by: Dinne Kopelevich <[email protected]>

natalialuzuriaga

To fix the project report bug, I think this should work, check out this comment here: #294 (comment)

Signed-off-by: Dinne Kopelevich <[email protected]>

app/src/js/templates.js

Signed-off-by: Natalia Luzuriaga <[email protected]>

app/src/js/projects.js

app/src/js/templates.js

app/src/js/projects.js

natalialuzuriaga

Fixed the project card url bug and all LGTM! 🙌

DinneK added 10 commits November 26, 2024 13:43

Create menu toggle

853d164

Signed-off-by: Dinne Kopelevich <[email protected]>

Change navigation menu to toggle

f256c15

Signed-off-by: Dinne Kopelevich <[email protected]>

Reafactor home main

963c656

Signed-off-by: Dinne Kopelevich <[email protected]>

Refactor footer

6b675d6

Signed-off-by: Dinne Kopelevich <[email protected]>

Refactor orgs page

0b130a2

Signed-off-by: Dinne Kopelevich <[email protected]>

Add functionality to projects search

c2b0fa7

Signed-off-by: Dinne Kopelevich <[email protected]>

Add pagination

207edab

Signed-off-by: Dinne Kopelevich <[email protected]>

Fix search to hide org name when org.length === 0

5e233c9

Signed-off-by: Dinne Kopelevich <[email protected]>

Fix project filtering

a86938f

Signed-off-by: Dinne Kopelevich <[email protected]>

Fix check boxes

eb4a372

Signed-off-by: Dinne Kopelevich <[email protected]>

DinneK added bug Something isn't working enhancement New feature or request front-end labels Dec 3, 2024

DinneK requested review from IsaacMilarky, natalialuzuriaga and sachin-panayil December 3, 2024 20:30

DinneK self-assigned this Dec 3, 2024

DinneK and others added 3 commits December 4, 2024 14:53

Fix sort functioanlity

1ae823c

Signed-off-by: Dinne Kopelevich <[email protected]>

Fix sort functionality

9953c78

Signed-off-by: Dinne Kopelevich <[email protected]>

Merge branch 'dev' into Refactor-projects-page

e181739

github-actions bot reviewed Dec 4, 2024

View reviewed changes

DinneK and others added 2 commits December 4, 2024 16:44

Update app/.eleventy.js

d52ddd2

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update app/site/_includes/banner.liquid

10e3cc5

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions bot reviewed Dec 4, 2024

View reviewed changes

Update app/site/_includes/project-card.liquid

0c0c458

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions bot reviewed Dec 4, 2024

View reviewed changes

app/src/js/projects.js Show resolved Hide resolved

app/src/js/projects.js Show resolved Hide resolved

app/src/js/projects.js Show resolved Hide resolved

app/src/js/projects.js Show resolved Hide resolved

github-actions bot reviewed Dec 4, 2024

View reviewed changes

app/site/_includes/project-card.liquid Show resolved Hide resolved

app/src/js/templates.js Show resolved Hide resolved

Update app/site/index.liquid

7eb8e40

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions bot reviewed Dec 4, 2024

View reviewed changes

app/site/index.liquid Show resolved Hide resolved

app/site/index.liquid Show resolved Hide resolved

Update app/site/index.liquid

5a878a2

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

DinneK and others added 3 commits December 5, 2024 07:42

Update app/src/css/style.css

0ffd6c5

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update app/src/css/style.css

8a82ec3

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update app/src/css/style.css

aaf91af

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

natalialuzuriaga requested changes Dec 5, 2024

View reviewed changes

app/site/_includes/project-card.liquid Show resolved Hide resolved

app/src/js/templates.js Outdated Show resolved Hide resolved

decause-gov previously approved these changes Dec 5, 2024

View reviewed changes

fix report link

f2165a6

Signed-off-by: Dinne Kopelevich <[email protected]>

DinneK dismissed decause-gov’s stale review via f2165a6 December 5, 2024 22:09

DinneK requested a review from natalialuzuriaga December 5, 2024 22:14

natalialuzuriaga requested changes Dec 5, 2024

View reviewed changes

Add conditional for local and in prod testing

2fe83d7

Signed-off-by: Dinne Kopelevich <[email protected]>

github-advanced-security bot found potential problems Dec 5, 2024

View reviewed changes

app/src/js/templates.js Fixed Show fixed Hide fixed

Updated project card url

0925791

Signed-off-by: Natalia Luzuriaga <[email protected]>

github-actions bot reviewed Dec 6, 2024

View reviewed changes

app/src/js/projects.js Show resolved Hide resolved

github-actions bot reviewed Dec 6, 2024

View reviewed changes

app/src/js/projects.js Show resolved Hide resolved

github-actions bot reviewed Dec 6, 2024

View reviewed changes

app/src/js/projects.js Show resolved Hide resolved

natalialuzuriaga approved these changes Dec 6, 2024

View reviewed changes

DinneK merged commit 5d85a59 into dev Dec 6, 2024
8 of 10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor projects page #294

Refactor projects page #294

DinneK commented Dec 3, 2024 •

edited

Loading

github-actions bot left a comment

github-actions bot left a comment

natalialuzuriaga left a comment

decause-gov left a comment

natalialuzuriaga left a comment

natalialuzuriaga left a comment

	import { reportHeadingTemplate, projectCardTemplate } from "./templates";
	import DOMPurify from 'dompurify';

	const projectsData = document.getElementById('metrics').textContent;
	const orgsData = document.getElementById('org-data').textContent;
	const parsedOrgsData = JSON.parse(orgsData);
	const siteData = JSON.parse(document.getElementById('site-data').textContent);
	const parsedProjectsData = JSON.parse(projectsData);
	const filtersContainer = document.querySelector('.filters-container');
	const templateDiv = document.getElementById('content-container');

	const sortDirection = document.getElementById('sort-direction');
	const sortSelection = document.getElementById('sort-selection');

	let currentPage = 1;
	const itemsPerPage = 10;
	let filteredProjects = [...parsedProjectsData];

	document.getElementById("sort-direction-form").hidden = false;
	sortCards();

	sortDirection.addEventListener('change', () => {
	const isDescending = sortDirection.value === 'descending' ? true : false;
	sortCards(isDescending);

	if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) {
	sortByNumberAttribute(targetProjects, selection, isDescending);
	} else {
	sortByStringAttribute(targetProjects, selection, isDescending);

	const allProjects = (filteredProjects \|\| parsedProjectsData).map((project) => ({
	...project,
	org: project.owner
	}));

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = allProjects.slice(startIndex, endIndex);

	const paginationDiv = document.getElementById('pagination-controls') \|\| document.createElement('div');
	paginationDiv.id = 'pagination-controls';
	paginationDiv.innerHTML = '';

	// const totalProjects = Object.values(projects).flat().length;
	const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);

	const prevButton = document.createElement('button');
	prevButton.textContent = 'Previous';
	prevButton.disabled = currentPage === 1;
	prevButton.addEventListener('click', () => {

	const pageButton = document.createElement('button');
	pageButton.textContent = i;
	pageButton.disabled = i === currentPage;
	pageButton.addEventListener('click', () => {
	currentPage = i;
	createProjectCards();
	});
	paginationDiv.appendChild(pageButton);

	const nextButton = document.createElement('button');
	nextButton.textContent = 'Next';
	nextButton.disabled = currentPage === totalPages;
	nextButton.addEventListener('click', () => {

	addGlobalEventListener('change', '.usa-checkbox__input', e => {
	// Can use this e.target.name to update selected filters object
	updateFilters();
	updateFilteredProjects()
	}, filtersContainer)

	document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.organization.push(checkbox.value);
	});
	document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.maturityModelTier.push(checkbox.value);
	});
	document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.fismaLevel.push(checkbox.value);
	});
	document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.projectType.push(checkbox.value);
	});

	const allProjects = Object.keys(projects).flatMap((org) => projects[org].map((project) => ({...project, org})))

	const matchesOrg = selectedFiltersObject.organization.length === 0 \|\| selectedFiltersObject.organization.includes(project.org);
	const matchesTier = selectedFiltersObject.maturityModelTier.length === 0 \|\| selectedFiltersObject.maturityModelTier.includes("Tier" + project.maturityModelTier);
	const matchesFisma = selectedFiltersObject.fismaLevel.length === 0 \|\| selectedFiltersObject.fismaLevel.includes(project.fismaLevel);
	const matchesType = selectedFiltersObject.projectType.length === 0 \|\| selectedFiltersObject.projectType.includes(project.projectType);
	return matchesOrg && matchesTier && matchesFisma && matchesType;
	});

	updatePagination(filteredProjects);

	const totalProjects = (filteredProjects \|\| parsedProjectsData).length;
	const totalPages = Math.ceil(totalProjects / itemsPerPage);

	currentPage = Math.min(currentPage, totalPages \|\| 1);
	renderPaginationControls(totalPages);

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = projects.slice(startIndex, endIndex);

	const orgProject = findObject(parsedOrgsData, org);
	const orgHeading = reportHeadingTemplate(orgProject);
	const projectSectionsTemplate = document.createElement('div');
	projectSectionsTemplate.className = 'project_section';

	const reportHeading = document.createElement('div');
	reportHeading.className = "report_heading";
	reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
	projectSectionsTemplate.appendChild(reportHeading);

	const projectCards = document.createElement('ul');
	projectCards.className = "usa-card-group flex-align-stretch";

	groupedByOrg[org].forEach(repoData => {
	const projectCard = document.createElement('li');
	projectCard.className = 'usa-card project-card tablet:grid-col-12';
	projectCard.id = repoData.name;
	projectCard.setAttribute('org-name', repoData.owner);
	projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
	projectCards.appendChild(projectCard);
	});

	projectSectionsTemplate.appendChild(projectCards);
	templateDiv.append(projectSectionsTemplate);

	const searchForm = document.getElementById('search-form');
	const searchBox = document.getElementById("search-input");

	const query = searchBox.value.toLowerCase();
	filteredProjects = parsedProjectsData.filter((project) => project.name.toLowerCase().includes(query));

Refactor projects page #294

Refactor projects page #294

Conversation

DinneK commented Dec 3, 2024 • edited Loading

module-name: Refactor functionality projects.js

Problem:

Solution:

Result:

Test Plan:

Next steps:

github-actions bot left a comment

Choose a reason for hiding this comment

github-actions bot left a comment

Choose a reason for hiding this comment

natalialuzuriaga left a comment

Choose a reason for hiding this comment

decause-gov left a comment

Choose a reason for hiding this comment

natalialuzuriaga left a comment

Choose a reason for hiding this comment

natalialuzuriaga left a comment

Choose a reason for hiding this comment

DinneK commented Dec 3, 2024 •

edited

Loading

	export const reportHeadingTemplate = function(data) {
	return `


	export function projectCardTemplate(data) {
	const description = data.description !== null ? data.description : ""
	return `