From 6d491345fe143edee5b5ae3947bdd7a6be87e39b Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Thu, 28 Nov 2024 14:20:52 +0100
Subject: [PATCH] sorting and filtering

---
 .../html/parts/org_results_page.html          | 68 +++++++++++++------
 .../static/resources/js/organizations.js      |  4 ++
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/apps/dnet-orgs-database-application/src/main/resources/static/resources/html/parts/org_results_page.html b/apps/dnet-orgs-database-application/src/main/resources/static/resources/html/parts/org_results_page.html
index 6a41abb5..f9c7f9ec 100644
--- a/apps/dnet-orgs-database-application/src/main/resources/static/resources/html/parts/org_results_page.html
+++ b/apps/dnet-orgs-database-application/src/main/resources/static/resources/html/parts/org_results_page.html
@@ -21,29 +21,53 @@
 <h4 ng-if="orgs.totalElements == 0" class="text-center">No results</h4>
 
 <div ng-if="orgs.totalElements > 0">
-
-	<div class="mb-4 text-center">
-		<div class="btn-group">
-			<button class="btn btn-sm btn-outline-primary" ng-click="gotoPage(orgs.number - 1, orgs.size)" ng-disabled="orgs.first">&laquo; Previous</button>			
-			<div class="dropdown">
-				<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Page {{orgs.number + 1}} of {{orgs.totalPages}}</button>
-				<div class="dropdown-menu">
-					<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(i, orgs.size)" ng-repeat="i in availablePages()">Page {{i + 1}}</a>
-				</div>
+	<div class="mb-2">
+		<div class="dropdown float-left">
+			<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by</button>
+			<div class="dropdown-menu">
+				<small>
+					<h6 class="dropdown-header">Ascending</h6>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('name', 'asc')"><b>name</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('country', 'asc')"><b>country</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('type', 'asc')"><b>type</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('status', 'asc')"><b>status</b></a>
+					<h6 class="dropdown-header">Descending</h6>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('name', 'desc')"><b>name</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('country', 'desc')"><b>country</b></a>	
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('type', 'desc')"><b>type</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('status', 'desc')"><b>status</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('n_similar_dups', 'desc')"><b># accepted dups</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('n_suggested_dups', 'desc')"><b># suggested dups</b></a>
+					<a class="dropdown-item ml-2" href="javascript:void(0)" ng-click="changeSort('n_different_dups', 'desc')"><b># rejected dups</b></a>
+				</small>
 			</div>
-			<div class="dropdown">
-				<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Size {{orgs.size}}</button>
-				<div class="dropdown-menu">
-					<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 10)">Size 10</a>
-					<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 25)">Size 25</a>
-					<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 50)">Size 50</a>
-					<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 100)">Size 100</a>
-					<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 200)">Size 200</a>
-					<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 500)">Size 500</a>
-				</div>
-			</div>
-			<button class="btn btn-sm btn-outline-primary" ng-click="gotoPage(orgs.number + 1, orgs.size)" ng-disabled="orgs.last">Next &raquo;</button>
 		</div>
+	
+		<div class="text-center">
+			<div class="btn-group">
+				<button class="btn btn-sm btn-outline-primary" ng-click="gotoPage(orgs.number - 1, orgs.size)" ng-disabled="orgs.first">&laquo; Previous</button>			
+				<div class="dropdown">
+					<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Page {{orgs.number + 1}} of {{orgs.totalPages}}</button>
+					<div class="dropdown-menu">
+						<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(i, orgs.size)" ng-repeat="i in availablePages()">Page {{i + 1}}</a>
+					</div>
+				</div>
+				<div class="dropdown">
+					<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Size {{orgs.size}}</button>
+					<div class="dropdown-menu">
+						<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 10)">Size 10</a>
+						<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 25)">Size 25</a>
+						<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 50)">Size 50</a>
+						<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 100)">Size 100</a>
+						<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 200)">Size 200</a>
+						<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(0, 500)">Size 500</a>
+					</div>
+				</div>
+				<button class="btn btn-sm btn-outline-primary" ng-click="gotoPage(orgs.number + 1, orgs.size)" ng-disabled="orgs.last">Next &raquo;</button>
+			</div>
+		</div>
+		
+		<input type="text" class="form-control mt-2" ng-model="orgsFilter" placeholder="Filter in current page..." />
 	</div>
 
 	<p ng-if="mode == 'select-modal'">Click the <b>organization name</b> to select the organization</p>
@@ -60,7 +84,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr ng-repeat="o in orgs.content" class="d-flex">
+			<tr ng-repeat="o in orgs.content | filter:orgsFilter" class="d-flex">
 				<td class="col-6">
 					<span class="badge badge-warning" ng-if="showStatus && o.status != 'approved'">{{o.status}}</span>
 
diff --git a/apps/dnet-orgs-database-application/src/main/resources/static/resources/js/organizations.js b/apps/dnet-orgs-database-application/src/main/resources/static/resources/js/organizations.js
index 5a29603e..37c84725 100644
--- a/apps/dnet-orgs-database-application/src/main/resources/static/resources/js/organizations.js
+++ b/apps/dnet-orgs-database-application/src/main/resources/static/resources/js/organizations.js
@@ -268,6 +268,10 @@ orgsModule.directive('orgResultsPage', function($http, $location, $route, $route
 				}
 			}
 
+			scope.changeSort = function(orderBy, orderType) {
+				scope.gotoPageAndSort(0, $routeParams.size, orderBy, orderType);
+			}
+			
 			scope.gotoPage = function(page, pageSize) {
 				scope.gotoPageAndSort(page, pageSize, $routeParams.orderBy, $routeParams.orderType);
 			}