Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

Commit

Permalink
Merge pull request #462 from GFDRR/fix/453
Browse files Browse the repository at this point in the history 
Change country list filters and add sorting options
  • Loading branch information
Thomas Parisot authored Mar 8, 2019
2 parents 35bf598 + 8a86e64 commit 02751f6
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 74 deletions.
58 changes: 28 additions & 30 deletions frontend/dataset_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,32 +98,6 @@ <h1 class="page_title ">{{objCountry[0].name}}</h1>
</div>
</div>

<!-- Section HEADER - FINE -->

<div class="row">
<nav class="navbar navbar-hazard" id="menu-hazard">
<ul class="nav navbar-nav hazard-nav text-center ">
<li ng-repeat="hc in HazardCategory">
<a href="#" ng-click="setFilterCategoryDatasetList($event, hc.category.name)" ng-class="{active: aCategory.indexOf(hc.category.name)!==-1}"
title="Filter by {{hc.category.name}} category datasets">
<i class="{{getHCIcon(hc.category.id)}} fa-2x"></i>
<span>{{hc.category.name}}</span>
</a>
</li>
</ul>
<div class="menu_sep_countries"></div>
<ul class="nav navbar-nav hazard-nav text-center">
<li ng-repeat="appli in arrayHazardList">
<a href="#" ng-click="setFilterApplicabilityDatasetList($event, appli.desc)" ng-class="{active: aApplicability.indexOf(appli.desc)!==-1}"
title="Filter by {{appli.desc}} hazard datasets">
<i class="{{appli.icon}} fa-2x"></i>
<span>{{appli.desc}}</span>
</a>
</li>
</ul>
</nav>
</div>

<div class="row">
<dl class="col-xs-12 col-md-10 col-md-offset-1 col-xs-offset-0 dataset_metrics">
<dt><span class="label label-success label-small"></span> Open&nbsp;Data<br>
Expand All @@ -145,24 +119,48 @@ <h1 class="page_title ">{{objCountry[0].name}}</h1>
</div>

<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-xs-offset-0">
<div class="col-xs-12 col-sm-5 col-sm-offset-1 col-md-5 col-md-offset-1 col-lg-5 col-lg-offset-1">
<span style="font-size: 16px;">Show:
<a style="text-decoration: none;" href="#submitted" ng-click="setFilterMode($event, 'submitted')" ng-class="{active: filterMode == 'submitted'}">Submitted</a>,
<a style="text-decoration: none;" href="#notsubmitted" ng-class="{active: filterMode == 'notsubmitted'}" ng-click="setFilterMode($event, 'notsubmitted')">Not submitted</a>,
<a style="text-decoration: none;" href="#all" ng-class="{active: filterMode == 'all'}" ng-click="setFilterMode($event, 'all')">All</a>
</span>
<br/>
</div>

<div class="col-xs-12 col-sm-3 col-sm-offset-2 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for a dataset name" ng-model="datasetSearchFilter" aria-describedby="basic-addon1" ng-disabled="!datasetsByCategory.length">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-xs-offset-0">
<div class="table-responsive">
<table class="table table-hover table-expanded datasets-table">
<thead>
<tr>
<th title="Name of dataset">Dataset</th>
<th title="10 criteria assessing the availability and ease of use of the dataset">Open data criteria</th>
</tr>
<tr>
<th>
<div class="flex-container flex-row">
<span class="sort_arrow_up" ng-click="sortBy('name')" tabindex="0"><i class="fa fa-caret-up" aria-hidden="true" ng-style="{color: sortField === 'name' ? '#cb2431' : '#232323'}"></i></span>
<span class="sort_arrow_down" ng-click="sortBy('-name')" tabindex="0"><i class="fa fa-caret-down" aria-hidden="true" ng-style="{color: sortField === '-name' ? '#cb2431' : '#232323'}"></i></span>
</div>
</th>
<th>
<div class="flex-container flex-row text-center">
<span class="sort_arrow_up" ng-click="sortBy('openness')" tabindex="0"><i class="fa fa-caret-up" aria-hidden="true" ng-style="{color: sortField === 'openness'? '#cb2431' : '#232323'}"></i></span>
<span class="sort_arrow_down" ng-click="sortBy('-openness')" tabindex="0"><i class="fa fa-caret-down" aria-hidden="true" ng-style="{color: sortField === '-openness'? '#cb2431' : '#232323'}"></i></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in datasetsByCategory | orderBy: ['-openness', 'name'] | filter: checkVisibility" ng-class="{'single-dataset': !item.datasets, 'multiple-datasets': item.datasets, 'no-dataset': !item.dataset_id && !item.datasets}" tabindex="0">
<tr ng-repeat="item in datasetsByCategory | orderBy: sortPredicate | filter: checkVisibility | filter: byDatasetTitle" ng-class="{'single-dataset': !item.datasets, 'multiple-datasets': item.datasets, 'no-dataset': !item.dataset_id && !item.datasets}" tabindex="0">
<td ng-show="item.dataset_id && !item.datasets" data-openness="{{item.openness}}" data-dataset-id="{{item.dataset_id}}" ng-click="changepage('dataset_details.html?keyds=' + item.dataset_id, $event)">
<a ng-href="dataset_details.html?keyds={{item.dataset_id}}" class="dataset-title" ng-if="item.dataset_id" title="View details">{{item.name}}</a>
<span class="dataset-title" ng-if="item.datasets">{{item.name}}</span>
Expand Down Expand Up @@ -190,7 +188,7 @@ <h1 class="page_title ">{{objCountry[0].name}}</h1>

<table class="table table-hover datasets-table" ng-show="{{item.datasets}}">
<tbody>
<tr ng-repeat="dataset in item.datasets | orderBy: ['-openness', 'name'] | filter: checkVisibility" ng-click="changepage('dataset_details.html?keyds=' + dataset.dataset_id, $event)" tabindex="0">
<tr ng-repeat="dataset in item.datasets | orderBy: sortPredicate | filter: checkVisibility" ng-click="changepage('dataset_details.html?keyds=' + dataset.dataset_id, $event)" tabindex="0">
<th scope="row" data-openness="{{dataset.openness}}" data-dataset-id="{{dataset.dataset_id}}">
<div class="rodi_subtitle_datasetlist" ng-show="dataset.dataset_id">
<a ng-href="dataset_details.html?keyds={{dataset.dataset_id}}" class="text-muted trunkate" title="{{dataset.title || dataset.name}}">{{dataset.title || dataset.name}} {{dataset.institution}}</a>
Expand Down
69 changes: 25 additions & 44 deletions frontend/js/angular/controller_dataset_list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ RodiApp.controller('RodiCtrlDatasetList', ['$scope', 'RodiSrv', '$location', '$w
$scope.idCountry = $location.search().idcountry;
$scope.idDatasetCat = $location.search().idcategory || 0;
$scope.bLoading = true;
$scope.datasetSearchFilter = "";
$scope.bNoDataset = false;
$scope.bPopUpDetails = false;
$scope.datasetsByCategory = [];
Expand All @@ -36,10 +37,11 @@ RodiApp.controller('RodiCtrlDatasetList', ['$scope', 'RodiSrv', '$location', '$w
$scope.datasets_restricted_count = 0;
$scope.datasets_closed_count = 0;
$scope.datasets_unknown_count = 0;
$scope.sortField = "-openness";
$scope.sortPredicate = ['-openness', 'name'];


$scope.questions = RodiSrv.getQuestions();
$scope.HazardCategory = RodiSrv.getDataCategoryIcon();
$scope.arrayHazardList=RodiSrv.getHazardList();

RodiSrv.getCountryList().then(function(response) {
// Success
Expand All @@ -48,20 +50,14 @@ RodiApp.controller('RodiCtrlDatasetList', ['$scope', 'RodiSrv', '$location', '$w

});

$scope.getHCIcon = function(index)
{
return RodiSrv.getHCIcon(index - 1);
};

// Get dataset info
$scope.getQuestionCode = function(questionCode, objDataset)
{
return RodiSrv.getQuestions_code(questionCode, objDataset);
}

// Load Dataset list with filter
$scope.loadDatasetList = function()
{
$scope.loadDatasetList = function() {
$scope.datasetsByCategory = [];
$scope.bLoading = true;

Expand Down Expand Up @@ -143,41 +139,6 @@ RodiApp.controller('RodiCtrlDatasetList', ['$scope', 'RodiSrv', '$location', '$w
$scope.loadDatasetList();
}

$scope.setFilterApplicabilityDatasetList = function (filter) {
if ($scope.getApplicabilityNumber(filter) === 'n.a.') {
return;
}

var index = $scope.aApplicability.indexOf(filter);

if (index >-1){
$scope.aApplicability.splice(index,1);
$scope.loadDatasetList();

}else {
$scope.aCategory = [];
$scope.aApplicability = [];
$scope.aApplicability.push(filter);
$scope.loadDatasetList();
}

};

$scope.setFilterCategoryDatasetList = function ($event, filter) {
$event.preventDefault();
var index = $scope.aCategory.indexOf(filter);

if (index >-1){
$scope.aCategory.splice(index,1);
$scope.loadDatasetList();
}else {
$scope.aCategory = [];
$scope.aApplicability = [];
$scope.aCategory.push(filter);
$scope.loadDatasetList();
}
};

$scope.setPopupDetails = function(dataset){

$scope.bPopUpDetails = !$scope.bPopUpDetails;
Expand Down Expand Up @@ -206,6 +167,26 @@ RodiApp.controller('RodiCtrlDatasetList', ['$scope', 'RodiSrv', '$location', '$w

}

$scope.sortBy = function(property, alias) {
$scope.sortField = alias || property;
$scope.sortPredicate = property;
}

$scope.byDatasetTitle = function (item) {
if (!$scope.datasetSearchFilter.trim()) {
return true;
}

var term = $scope.datasetSearchFilter.toLowerCase();
var titles = [item.title, item.name].concat((item.datasets || []).map(function(item){
return item.title || item.name;
})).filter(function(title){ return title });

return titles.some(function(title) {
return Boolean(title.toLowerCase().match(term));
});
};

$scope.setFilterMode = function($event, type) {
$event.preventDefault();
$scope.filterMode = type;
Expand Down

0 comments on commit 02751f6

Please sign in to comment.