Skip to content

Commit

Permalink
Merge pull request #198 from DSACMS/ricardo/sorting-filtering-repo-li…
Browse files Browse the repository at this point in the history 
…st-page

Add Sorting and Filtering to Projects Page
  • Loading branch information
@IsaacMilarky
IsaacMilarky authored Aug 14, 2024
2 parents 24e94cc + 8b423c7 commit d1ec0f8
Show file tree
Hide file tree
Showing 9 changed files with 606 additions and 35 deletions.
11 changes: 11 additions & 0 deletions app/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@11ty/eleventy-img": "^3.1.1",
"@grimlink/eleventy-plugin-lucide-icons": "^1.0.5",
"@uswds/uswds": "^3.6.1",
"dompurify": "^3.1.6",
"dotenv": "^16.3.1",
"markdown-it": "^13.0.2",
"markdown-it-link-attributes": "^4.0.1"
Expand Down
29 changes: 29 additions & 0 deletions app/site/_data/filters.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"organizations": [
"DSACMS",
"CMS-Enterprise",
"CMSgov",
"Enterprise-CMCS"
],
"maturity_model_tier": [
"Tier 1",
"Tier 2",
"Tier 3",
"Tier 4"
],
"fisma_level": [
"Low",
"Moderate",
"High"
],
"project_type": [
"Package",
"Website",
"Standards",
"Libraries",
"Data",
"Apps",
"Tools",
"APIs"
]
}
2 changes: 1 addition & 1 deletion app/site/_includes/project-card.liquid
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% capture new_link_var %}/{{ repo.owner }}/{{ repo.name }}/{% endcapture %}
<li class="usa-card project-card tablet:grid-col-12" org-name="{{ repo.owner }}">
<li class="usa-card project-card tablet:grid-col-12" id="{{ repo.name }}" org-name="{{ repo.owner }}">
<div class="usa-card__container">
<div class="usa-card__header">
<h2 class="usa-card__heading">
Expand Down
3 changes: 2 additions & 1 deletion app/site/_layouts/repo-report.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,12 @@ layout: base
{% endif %}
{% if project.project_fisma_level %}
{% assign fismaLevel = project.project_fisma_level %}
{% assign fismaLevelIcon = "chevron.svg" %}
{% if fismaLevel == "Moderate" %}
{% assign fismaLevelIcon = "chevron-two.svg" %}
{% else if fismaLevel == "High" %}
{% assign fismaLevelIcon = "chevron-three.svg" %}
{% else %}
{% assign fismaLevelIcon = "chevron.svg" %}
{% endif %}
<span
class="usa-tag usa-tag--big main-tag icon-tag">{{ project.project_fisma_level }}
Expand Down
165 changes: 135 additions & 30 deletions app/site/projects.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,148 @@
layout: base
---
<script type="module" src="{{ "/assets/js/projects.js" | url }}"></script>
<div class="grid-container">
<span style="display:none;" id="metrics">
{{projects | json }}
</span>
<span style="display:none;" id="org-data">
{{organizations | json }}
</span>
<div class="grid-container ">
<p>
The Centers for Medicare and Medicaid Services develops and supports many open-source projects found in our various
GitHub Organizations.
</p>
{% assign allFields = "project_type, user_input, project_fisma_level, group, subset_in_healthcare, user_type, repository_host, maturity_model_tier" | split: "," %}

<div class="margin-bottom-2">
<label class="usa-label" for="filter-input">Search</label>
<div class="usa-input-group width-full maxw-none">
<div class="usa-input-prefix" aria-hidden="true">
<svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
<use xlink:href={{ "/assets/img/sprite.svg#search"| url }} ></use>
</svg>
<div class="dashboard-container">
<div class="filters-container">

{% comment %} filter by organization {% endcomment %}
<div class="usa-accordion border-base-lighter border-2px">
<div class="usa-accordion__heading">
<button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="true" aria-controls="organization-content" id="organization">Organization</button>
</div>
<div id="organization-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
<form class="usa-form">
<fieldset class="usa-fieldset" aria-labelledby="organization-filter">
<legend class="usa-sr-only" aria-labelledby="organization-filtering"></legend>
{% for org in filters.organizations %}
<div class="usa-checkbox padding-bottom-1">
<input type="checkbox" class="usa-checkbox__input" name="org-filter" id="{{ org }}" value="{{ org }}">
<label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ org }}">
<span>{{ org }}</span>
</label>
</div>
{% endfor %}
</fieldset>
</form>
</div>
</div>

{% comment %} filter by maturity model tier {% endcomment %}
<div class="usa-accordion border-base-lighter border-2px">
<div class="usa-accordion__heading">
<button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="tier-content" id="mauturity-model-tier">Maturity Model Tier</button>
</div>
<div id="tier-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
<form class="usa-form">
<fieldset class="usa-fieldset" aria-labelledby="tier-filter">
<legend class="usa-sr-only" aria-labelledby="tier-filtering"></legend>
{% for tier in filters.maturity_model_tier %}
<div class="usa-checkbox padding-bottom-1">
<input type="checkbox" class="usa-checkbox__input" name="tier-filter" id="{{ tier | slug }}" value="{{ tier }}">
<label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ tier | slug }}">
<span>{{ tier }}</span>
</label>
</div>
{% endfor %}
</fieldset>
</form>
</div>
</div>
<input class="usa-input--lg" id="filter-input" name="filter-input">
</div>
</div>

{% for org in organizations %}
<div class="project_section">
<div class="report_heading">
<h2>
{{ org.name }}
<img
src="{{org.avatar_url}}"
alt="Organization Avatar"
width="20"
>
</h2>
{% comment %} filter by fisma compliance level {% endcomment %}
<div class="usa-accordion border-base-lighter border-2px">
<div class="usa-accordion__heading">
<button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="fisma-level-content" id="fisma-level">FISMA Compliance Level</button>
</div>
<div id="fisma-level-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
<form class="usa-form">
<fieldset class="usa-fieldset" aria-labelledby="fisma-level-filter">
<legend class="usa-sr-only" aria-labelledby="fisma-level-filtering"></legend>
{% for level in filters.fisma_level %}
<div class="usa-checkbox padding-bottom-1">
<input type="checkbox" class="usa-checkbox__input" name="fisma-level-filter" id="fisma-level-{{ level | slug }}" value="{{ level }}">
<label class="usa-checkbox__label font-body-2xs text-base-dark" for="fisma-level-{{ level | slug }}">
<span>{{ level }}</span>
</label>
</div>
{% endfor %}
</fieldset>
</form>
</div>
</div>

<ul class="usa-card-group flex-align-stretch">
{% assign orgProjects = projects | findProjectsInOrg: org.name %}
{% for repo in orgProjects %}
{% render 'project-card', repo: repo, base_url: site.baseurl %}
{% endfor %}
</ul>
{% comment %} filter by project type {% endcomment %}
<div class="usa-accordion border-base-lighter border-2px">
<div class="usa-accordion__heading">
<button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="project-type-content" id="project-type">Project Type</button>
</div>
<div id="project-type-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
<form class="usa-form">
<fieldset class="usa-fieldset" aria-labelledby="project-type-filter">
<legend class="usa-sr-only" aria-labelledby="project-type-filtering"></legend>
{% for type in filters.project_type %}
<div class="usa-checkbox padding-bottom-1">
<input type="checkbox" class="usa-checkbox__input" name="project-type-filter" id="{{ type }}" value="{{ type }}">
<label class="usa-checkbox__label font-body-2xs text-base-dark" for="{{ type }}">
<span>{{ type }}</span>
</label>
</div>
{% endfor %}
</fieldset>
</form>
</div>
</div>
</div>
{% endfor %}
</div>

<div class="block">
<div class="search-and-sort">
<div class="search-container">
<label class="usa-label" for="filter-input">Search</label>
<div class="usa-input-group width-full maxw-none border-base-light">
<div class="usa-input-prefix" aria-hidden="true">
<svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
<use xlink:href={{ "/assets/img/sprite.svg#search"| url }} ></use>
</svg>
</div>
<input class="usa-input--lg" id="filter-input" name="filter-input">
</div>
</div>
<div class="sort-dropdown">
<form class="usa-form" id="sort-selection-form">
<label class="usa-label" for="sort-selection">Sort by</label>
<select class="usa-select border-base-light" id="sort-selection" name="sort-selection">
<option value="name">Project Name</option>
<option value="project_fisma_level">FISMA Compliance Level</option>
<option value="project_type">Project Type</option>
<option value="stargazers_count">Stars</option>
<option value="maturity_model_tier">Maturity Model Tier</option>
<option value="forks_count">Forks</option>
</select>
</form>

<form class="usa-form" id="sort-direction-form">
<label class="usa-label" for="sort-direction">Sort Direction</label>
<select class="usa-select border-base-light" id="sort-direction" name="sort-direction">
<option value="ascending">Ascending</option>
<option value="descending">Descending</option>
</select>
</form>
</div>
</div>

<div class="padding-left-05" id="filter-tags"></div>
<div id="content-container"></div>
</div>
</div>
71 changes: 71 additions & 0 deletions app/src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,75 @@
/* padding-y-3 */
padding-top:1.5rem;
padding-bottom:1.5rem;
}

.projects-container {
position: relative;
display: flex;
flex-direction: row;
gap: 1rem;
}

.block {
display: block;
width: 100%;
}

.dashboard-container {
display: flex;
flex-direction: row;
gap: 1rem;
/* padding-top: 5rem; */
}

.filters-container {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 3.4rem;
}

.search-container {
flex:1;
margin-bottom: 1rem;
box-sizing: border-box;
}

.search-and-sort {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 3rem;
}

.sort-dropdown {
display: flex;
flex-direction: row;
box-sizing: border-box;
text-align: right;
gap: 0.5rem;
margin-bottom: 1rem;

}

@media screen and (max-width: 1080px) {
.dashboard-container {
flex-direction: column;
}
}

@media screen and (max-width: 720px) {
.search-and-sort {
flex-direction: column;
gap: 0;
}

.search-container {
margin-bottom: 0;
}

.sort-dropdown {
text-align: left;
}
}
Loading

0 comments on commit d1ec0f8

Please sign in to comment.