Skip to content

Commit

Permalink
projects.html: Add filters for searching projects
Browse files Browse the repository at this point in the history 
This commit adds filters for filtering the projects
based on project work status, tags, difficulty level,
initiatives and collaborating projects.

Closes coala#559
  • Loading branch information
@KVGarg
KVGarg committed Aug 13, 2019
1 parent f19f787 commit 7e271a3
Show file tree
Hide file tree
Showing 3 changed files with 320 additions and 3 deletions.
40 changes: 38 additions & 2 deletions partials/tabs/projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,39 @@
<br>
<div class="main-content container">
<div class="col m8 col offset-m2 s12">
<div class="input-field searchbar">
<input ng-model="searchText" placeholder="Search for a project" id="search" type="search" class="validate"> </div>
<div class="filter-projects-inputs">
<div class="input-field searchbar">
<input ng-model="searchText" placeholder="Search for a project" id="search" type="search" class="validate"> </div>
<div class="filter-btn apply-flex center-content">
<a id="filters" class="waves-effect waves-light btn-large" ng-click="toggleFiltersDisplay()">
<b>Filter Projects</b>
</a>
</div>
</div>
<div ng-class="{'display-none':!lc.displayFilters}" ng-click="toggleFiltersDisplay()">
<i class="fa fa-times close-filters"></i>
</div>
<div class="all-filters-option apply-flex center-content fade-in" ng-class="{'display-none':!lc.displayFilters}">
<h6><b>Filter Google Summer of Code Projects</b></h6>
<div class="filters-inputs apply-flex">
<div class="filter-select-fields apply-flex evenly-spread-content">
<label class="project-filter" ng-repeat="(filter, metadata) in projectFilterOptions">
<select class="{{ filter }}-selector" ng-model="metadata.model" ng-change="setModelList(filter, metadata.model)" name="{{ filter }}-selector" multiple>
<option value="" disabled>{{ metadata.label }}</option>
<option value="{{ value }}" ng-repeat="(key, value) in metadata.options">{{ key }}</option>
</select>
</label>
</div>
<div class="filter-btns">
<a class="waves-effect waves-light btn" ng-click="applyFilters()">
<i class="fa fa-check" aria-hidden="true"> Apply Filters</i>
</a>
<a class="waves-effect waves-light btn" ng-click="clearFilters()">
<i class="fa fa-trash-o clear-filters"> Clear Filters</i>
</a>
</div>
</div>
</div>
<div style="text-align: center;">
For more project ideas, <a href="https://github.com/coala/projects/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22Project+Proposal%22">click here</a>.
<br>
Expand All @@ -21,6 +52,9 @@
<div class="row outline">
<div class="parent-wrapper">
<div class="parent">
<div class="no-projects-found" ng-show="projectList.length === 0">
{{ message.noProjectsFound }}
</div>
<div ng-repeat="project in projectList | filter: searchText | orderBy: sortOrder" class="card child">
<div class="card-content waves-effect" ng-click="lc.showProject(project)">
<div class="card-title center">{{ project.name }}</div>
Expand Down Expand Up @@ -97,6 +131,8 @@
'slow');
})

$('.filter-select-fields select').material_select();

$('.modal').modal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0.8, // Opacity of modal background
Expand Down
80 changes: 80 additions & 0 deletions resources/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,36 @@
.all-filters-option {
position: relative;
z-index: 1002;
min-width: 350px;
margin: 10px 0;
background-color: white;
box-shadow: 0 0 15px 2px black;
border-radius: 20px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.apply-flex {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.center-content {
justify-content: center;
}
.close-filters {
right: 6%;
margin-top: 1.25rem;
position: absolute;
z-index: 1003;
}
.display-none {
display: none;
}
.evenly-spread-content {
justify-content: space-evenly;
}
.hash_value_dup {
position: 'absolute';
left: '-9999px';
Expand Down Expand Up @@ -32,6 +65,36 @@
.fa-clipboard:hover .hinttext {
visibility: visible;
}
.filter-projects-inputs {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin-top: 1rem;
}
.filter-btn {
width: 165px;
z-index: 0;
}
.filter-btn .btn-large {
border-radius: 100px;
box-shadow: 0 0 10px 1px darkslategray;
}
.filters-btns {
width: 50%;
}
.filters-inputs {
justify-content: space-around;
padding: 20px 0;
}
.filter-select-fields {
width: 100%;
padding-top: 20px;
padding-bottom: 10px;
justify-content: space-around;
}
i.fa {
cursor: pointer;
}
.project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
cursor: pointer;
background-color: #f3f5f8;
Expand Down Expand Up @@ -114,6 +177,11 @@
border: 0;
z-index: 9;
}
.searchbar {
width: 85%;
min-width: 340px;
margin-top: 0;
}
.sha256sum_hash {
display: flex;
justify-content: space-evenly;
Expand All @@ -126,3 +194,15 @@
#sha256sum_hash_value {
word-wrap: break-word;
}
@-webkit-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fade-in {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
203 changes: 202 additions & 1 deletion resources/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,21 +94,221 @@
controller: function ($scope, $location, Languages) {
self = this

$scope.message = {}
$scope.projectFilterOptions = {}
$scope.filteredProjects = []
$scope.selectedStatusesList = []
$scope.selectedTagsList = []
$scope.selectedLevelsList = []
$scope.selectedInitiativesList = []
$scope.selectedCollabsList = []

var mapping = {
'': 0,
'crowded': 1,
'in_progress': 2,
'completed': 3
'completed': 3,
'disabled': 4
}

self.displayFilters = false
$scope.toggleFiltersDisplay = function(){
self.displayFilters = !self.displayFilters
$('select').material_select();
}

$scope.sortOrder = function(project) {
return mapping[project.status];
}

$scope.getFiltersMetadata = function(){
$http.get('data/projects.liquid')
.then(function (res) {
var projects = res.data;
angular.forEach(projects, function(project){
if (project.status.length === 0){
$scope.projectFilterOptions.status.options['NOT YET STARTED'] = 0
}
angular.forEach(project.status, function(state){
$scope.projectFilterOptions.status.options[state.toUpperCase()] = mapping[state]
})
angular.forEach(project.tags, function(tag){
$scope.projectFilterOptions.tags.options[tag] = tag
})
$scope.projectFilterOptions.difficulty.options[project.difficulty.toUpperCase()] = project.difficulty
angular.forEach(project.initiatives, function(initiative){
$scope.projectFilterOptions.initiatives.options[initiative] = initiative
})
angular.forEach(project.collaborating_projects, function(collab){
$scope.projectFilterOptions['collab-projects'].options[collab] = collab
})
})
})
}

$scope.initializeSelectorData = function(name, label, model_name){
$scope.projectFilterOptions[name] = {
label: label, model: model_name,options: {}
}
}

$scope.getAllFilters = function () {
$scope.initializeSelectorData('status', 'Status', 'selectedStatusesList')
$scope.initializeSelectorData('tags', 'Project Tags', 'selectedTagsList')
$scope.initializeSelectorData('difficulty', 'Difficulty Level', 'selectedLevelsList')
$scope.initializeSelectorData('initiatives', 'Initiatives', 'selectedInitiativesList')
$scope.initializeSelectorData('collab-projects', 'Collaborating Projects', 'selectedCollabsList')
$scope.getFiltersMetadata()
}

function getProjects(){
if($scope.filteredProjects.length > 0){
return $scope.filteredProjects
}
return $scope.allProjects
}

function filterProjectsByStatus(){
var selectedProjects = []
angular.forEach(getProjects(), function(project){
if (project.status.length === 0 && !selectedProjects.includes(project)){
if (
($scope.selectedStatusesList.includes("0") && project.mentors.length > 0) ||
($scope.selectedStatusesList.includes("4") && project.mentors.length === 0)
){
selectedProjects.push(project)
}
}
else {
angular.forEach(project.status, function (state) {
var mappedState = (mapping[state]).toString()
if ($scope.selectedStatusesList.includes(mappedState) && !selectedProjects.includes(project)) {
selectedProjects.push(project)
}
})
}
})
$scope.filteredProjects = selectedProjects
}

function filterProjectsByTags(){
var selectedProjects = []
angular.forEach(getProjects(), function(project){
angular.forEach(project.tags, function(tag){
if ($scope.selectedTagsList.includes(tag) && !selectedProjects.includes(project)){
selectedProjects.push(project)
}
})
})
$scope.filteredProjects = selectedProjects
}

function filterProjectsByDifficulty(){
var selectedProjects = []
angular.forEach(getProjects(), function(project){
if ($scope.selectedLevelsList.includes(project.difficulty) && !selectedProjects.includes(project)){
selectedProjects.push(project)
}
})
$scope.filteredProjects = selectedProjects
}

function filterProjectsByInitiatives(){
var selectedProjects = []
angular.forEach(getProjects(), function(project){
angular.forEach(project.initiatives, function(initiative){
if ($scope.selectedInitiativesList.includes(initiative) && !selectedProjects.includes(project)){
selectedProjects.push(project)
}
})
})
$scope.filteredProjects = selectedProjects
}

function filterProjectsByCollaboratingProjects(){
var selectedProjects = []
angular.forEach(getProjects(), function(project){
angular.forEach(project.collaborating_projects, function(collab){
if ($scope.selectedCollabsList.includes(collab) && !selectedProjects.includes(project)){
selectedProjects.push(project)
}
})
})
$scope.filteredProjects = selectedProjects
}

$scope.setModelList = function(filter, list){
if (filter === 'status'){
$scope.selectedStatusesList = list
}
else if (filter === 'tags'){
$scope.selectedTagsList = list
}
else if (filter === 'difficulty'){
$scope.selectedLevelsList = list
}
else if (filter === 'initiatives'){
$scope.selectedInitiativesList = list
}
else {
$scope.selectedCollabsList = list
}
}

function anyFiltersApplied(){
return (
$scope.selectedStatusesList.length > 0 ||
$scope.selectedTagsList.length > 0 ||
$scope.selectedLevelsList.length > 0 ||
$scope.selectedInitiativesList.length > 0 ||
$scope.selectedCollabsList.length > 0
)
}

$scope.applyFilters = function(){
$scope.filteredProjects = []
if(anyFiltersApplied()){
if ($scope.selectedStatusesList.length > 0) {
filterProjectsByStatus()
}
if ($scope.selectedTagsList.length > 0) {
filterProjectsByTags()
}
if ($scope.selectedLevelsList.length > 0) {
filterProjectsByDifficulty()
}
if ($scope.selectedInitiativesList.length > 0) {
filterProjectsByInitiatives()
}
if ($scope.selectedCollabsList.length > 0) {
filterProjectsByCollaboratingProjects()
}
if ($scope.filteredProjects.length === 0){
$scope.message.noProjectsFound = 'No projects found for your selected filters' +
' options! Please try a different filter search combination.'
$scope.projectList = []
}
else {
$scope.projectList = $scope.filteredProjects
}
}
else {
$scope.projectList = $scope.allProjects
}
}

$scope.clearFilters = function(){
$scope.projectList = $scope.allProjects
var select = $('select')
select.prop('selectedIndex', 0)
select.material_select()
}

$scope.getDefaultProjectsMetadata = function () {
$http.get('data/projects.liquid')
.then(function (res) {
$scope.projectList = res.data;
$scope.allProjects = res.data;
$scope.projectRequest();
})
}
Expand Down Expand Up @@ -281,6 +481,7 @@
$scope.searchText = search_requested
}

$scope.getAllFilters();
},
controllerAs: 'lc'
}
Expand Down

0 comments on commit 7e271a3

Please sign in to comment.