Add search results order criteria

grails-app/conf/Config.groovy

@@ -83,7 +83,24 @@ featureToggles {
     geonetworkLinkMonitor = false
 }
 
+sortByFacet =  [
+        classId: 'Portal.search.SortByPanel',
+        name: 'sortbyFilter',
+        key: 'sortBy',
+        sortCriteria: [
+                popularity: "Popularity",
+                title: "Title",
+                changeDate: "Last Updated",
+        ],
+        collapsedByDefault: true
+]
+
 enabledFacets = [
+    sortByFacet,
+    [
+            classId: 'Portal.search.FreeTextSearchPanel',
+            key: 'freetextFilter'
+    ],
     [
         name: 'parameterFilter',
         key: 'Measured parameter'
@@ -109,16 +126,15 @@ enabledFacets = [
     [
         classId: 'Portal.search.GeoSelectionPanel',
         name: 'geoFilter'
-    ],
-    [
-        classId: 'Portal.search.FreeTextSearchPanel',
-        name: 'freetextFilter',
-        key: 'freetextFilter',
-        collapsedByDefault: false
     ]
 ]
 
 facetsGN3 = [
+     sortByFacet,
+     [
+             classId: 'Portal.search.FreeTextSearchPanel',
+             key: 'freetextFilter'
+     ],
     [
         name: 'parameterFilter',
         key: 'parameterCategories'
@@ -144,12 +160,6 @@ facetsGN3 = [
     [
         classId: 'Portal.search.GeoSelectionPanel',
         name: 'geoFilter'
-    ],
-    [
-        classId: 'Portal.search.FreeTextSearchPanel',
-        name: 'freetextFilter',
-        key: 'freetextFilter',
-        collapsedByDefault: false
     ]
 ]
 
@@ -196,7 +206,7 @@ environments {
 
         // overwritten by Chef in production
         grails.serverURL = "http://myaodn.example.com"
-        geonetwork.url = "http://catalogue-portal.aodn.org.au/geonetwork"
+        geonetwork.url = "https://catalogue-imos.aodn.org.au/geonetwork"
     }
 }
 
@@ -452,6 +462,7 @@ portal {
     ]
 
     mapGetFeatureInfoBuffer = 10
+    sortByCriteria = "popularity"
 }
 
 // Atlas of Australia

grails-app/views/_js_includes.gsp

@@ -76,6 +76,7 @@
     <script type="text/javascript" src="${resource(dir: 'js/portal/search', file: 'FacetedSearchResultsPanel.js')}"></script>
     <script type="text/javascript" src="${resource(dir: 'js/portal/search', file: 'FacetedSearchResultsDataView.js')}"></script>
     <script type="text/javascript" src="${resource(dir: 'js/portal/search', file: 'FreeTextSearchPanel.js')}"></script>
+    <script type="text/javascript" src="${resource(dir: 'js/portal/search', file: 'SortByPanel.js')}"></script>
     <script type="text/javascript" src="${resource(dir: 'js/portal/search', file: 'DateSelectionPanel.js')}"></script>
     <script type="text/javascript" src="${resource(dir: 'js/portal/search', file: 'GeoSelectionPanel.js')}"></script>
     <script type="text/javascript" src="${resource(dir: 'js/portal/search', file: 'MetadataExtent.js')}"></script>

src/test/javascript/portal/search/SearchFiltersPanelSpec.js

@@ -141,7 +141,8 @@ describe("Portal.search.SearchFiltersPanel", function() {
             on: noOp,
             reset: noOp,
             search: noOp,
-            hasFacetNode: returns(false)
+            hasFacetNode: returns(false),
+            hasFilters: returns(false)
         };
     }
 });

web-app/css/AODNTheme.css

@@ -146,7 +146,7 @@ hr {
 }
 
 input, select, textarea {
-    background-color: #FCFCFC;
+    background-color: #FCFCFC! important;
     border: 1px solid #CCCCCC;
     font: 11px verdana, arial, helvetica, sans-serif;
     margin: 2px 0;
@@ -177,7 +177,6 @@ input, select, textarea {
 }
 
 .x-toolbar {
-    padding-top: 10px ! important;
     border: none;
     background: none;
 }
@@ -411,3 +410,16 @@ span.facetSearchHyperLink:hover {
 .mainToolBar .x-toolbar {
     padding: 9px! important;
 }
+
+.awesome-button {
+    border-radius: 4px;
+}
+
+.awesome-button.selected,
+.sortByPanelButton.selected {
+    background: #e8e8e8;
+}
+
+.sortByPanelButton:hover {
+    background: #bbbbbb;
+}

web-app/css/general.css

@@ -939,6 +939,7 @@ div.allwhite {
 }
 
 .filter-selection-panel-header {
+    float: left;
     padding-left: 3px;
 }
 
@@ -1165,10 +1166,6 @@ div:not(.x-tree-selected) * {
     background-color: #ffff99;
 }
 
-.search-filters-toolbar-title * {
-    font-size: 13px! important;
-}
-
 /* Form Items CSS */
 
 .x-form-item {
@@ -1191,8 +1188,7 @@ div:not(.x-tree-selected) * {
 
 #downLoadCartWidget span {
     display: inline-flex;
-    margin: 0 2px;
-    vertical-align: bottom;
+    margin: 1px 2px;
 }
 
 #downloadCartSize {
@@ -1370,3 +1366,22 @@ span.facetSearchHyperLink {
     border-radius: 6px;
     border: 1px solid #dcdcdc;
 }
+
+.sortByPanelButton {
+    display: inline-block;
+    font-weight: normal;
+    padding: 4px;
+    border-radius: 4px;
+    border: 1px solid #e8e8e8;
+    margin: 0 3px ;
+}
+
+.awesome-button {
+    padding: 3px 1px 1px 4px;
+    margin-top: 0;
+}
+
+.sortByPanel {
+    vertical-align: center;
+}
+

web-app/js/portal/lang/en.js

@@ -120,7 +120,7 @@ OpenLayers.Lang.en = OpenLayers.Util.extend(OpenLayers.Lang.en, {
     shareButtonTooltip: "Share link to new portal with only this collection",
 
     removeButton: '<span class="fa fa-fw fa-remove"></span> Remove',
-    carticon: '<span class="fa fa-2x fa-shopping-cart "></span> ',
+    carticon: '<span class="fa fa-lg fa-shopping-cart "></span> ',
 
     // Download View
     downloadConfirmationWindowTitle: 'Data Download',
@@ -174,6 +174,7 @@ OpenLayers.Lang.en = OpenLayers.Util.extend(OpenLayers.Lang.en, {
     platformFilter: 'Platform',
     temporalResolutionFilter: 'Temporal Resolution',
     parameterFilter: 'Parameter',
+    sortbyFilter: 'Sort By: ',
     freetextFilter: 'Keyword',
     freeTextFilterSearchErrorMsg: "Search for free text within metadata records ",
     freeTextFilterSearchHelperMsg: "Type keyword, press enter",
@@ -207,6 +208,8 @@ OpenLayers.Lang.en = OpenLayers.Util.extend(OpenLayers.Lang.en, {
 
     // FacetFilterPanel
     addAnother: 'Add another filter - where possible',
+    asc: 'Sort order normal',
+    desc: 'Sort order reversed',
 
     // Async Downloads
     asyncDownloadPanelTitleLoading: 'Requesting subset ...',
@@ -368,6 +371,8 @@ OpenLayers.Lang.en = OpenLayers.Util.extend(OpenLayers.Lang.en, {
     usabilityTestKeywordMagnifierLabel: "Magnifying glass",
     usabilityTestKeywordGotFocusLabel: "Got focus",
 
+    searchCriteriaSortAction: "Search Criteria SortBy",
+
     shareButton: "New portal with only this collection",
     menuItemGroupTitle: '<span class="menu-title">${title}</span>',
     wpsTrackingLabel: "WPS Service",

web-app/js/portal/search/SearchFiltersPanel.js

@@ -54,9 +54,11 @@ Portal.search.SearchFiltersPanel = Ext.extend(Ext.Panel, {
                 {
                     facetName: facet.key,
                     title: OpenLayers.i18n(facet.name),
+                    header: facet.name != undefined,
                     collapsedByDefault: collapsedByDefault,
                     searcher: config.searcher,
                     mapPanel: config.mapPanel,
+                    sortCriteria: facet.sortCriteria,
                     listeners: {
                         expand: this._onExpand,
                         scope: this
@@ -73,16 +75,17 @@ Portal.search.SearchFiltersPanel = Ext.extend(Ext.Panel, {
     _buildToolBar: function() {
         return new Ext.Toolbar({
             cls: 'search-filters-toolbar',
+            height: 25,
             border: false,
             frame: false,
-            items: [this._buildSpinner(), '->', this._buildNewSearchButton()]
+            items: [ '->', this._buildSpinner(), this._buildNewSearchButton()]
         });
     },
 
     _buildSpinner: function() {
         this.spinner = new Ext.Panel({
-            html: this._makeSpinnerText(OpenLayers.i18n('loadingResourceMessage', {'resource': 'search terms'})),
-            cls: 'search-filters-toolbar-title',
+            text: this._makeSpinnerText(OpenLayers.i18n('loadingResourceMessage', {'resource': 'search terms'})),
+            cls: 'x-hyperlink', // css match as this.newSearchButton
             hidden: false
         });
 
@@ -104,6 +107,7 @@ Portal.search.SearchFiltersPanel = Ext.extend(Ext.Panel, {
     },
 
     _setSpinnerText: function(newText) {
+        this.newSearchButton.hide();
         this.spinner.update(this._makeSpinnerText(newText));
         this.spinner.show();
     },
@@ -114,6 +118,7 @@ Portal.search.SearchFiltersPanel = Ext.extend(Ext.Panel, {
 
     _hideSpinnerText: function() {
         this.spinner.hide();
+        this.newSearchButton.setVisible(this.searcher.hasFilters());
     },
 
     _clearAllSearchFilters: function() {
@@ -135,7 +140,7 @@ Portal.search.SearchFiltersPanel = Ext.extend(Ext.Panel, {
 
     _setNewSearchButtonVisibility: function() {
         this._setSpinnerText(OpenLayers.i18n('loadingResourceMessage', {'resource': 'Collections'}));
-        this.newSearchButton.setVisible(this.searcher.hasFilters());
+
     },
 
     _showNewSearchForGeoFacet: function() {

web-app/js/portal/search/SearchPanel.js

@@ -10,7 +10,7 @@ Portal.search.SearchPanel = Ext.extend(Ext.Panel, {
             catalogUrl: Portal.app.appConfig.geonetwork.url,
             defaultParams: {
                 protocol: Portal.app.appConfig.portal.metadataProtocols.wms.join(' or '),
-                sortBy: 'popularity'
+                sortBy: Portal.app.appConfig.portal.sortByCriteria
             }
         });
 

web-app/js/portal/search/SortByPanel.js

@@ -0,0 +1,89 @@
+Ext.namespace('Portal.search');
+
+Portal.search.SortByPanel = Ext.extend(Ext.Panel, {
+
+    constructor: function(cfg) {
+        cfg = cfg || {};
+
+        if (cfg.title) {
+            this.originalTitle =  cfg.title;
+            cfg.title = this.buildTitle( cfg.title, "Default");
+        }
+
+        var toolItems = [];
+
+        for ( var key in cfg.sortCriteria ) {
+            toolItems.push( new Ext.Button({
+                id: key,
+                value: cfg.sortCriteria[key],
+                handler: this._onSelectSortCriteria,
+                scope: this,
+                styles: (key == "popularity") ? 'sortByPanelButton selected': 'sortByPanelButton'
+            }));
+        }
+        toolItems.reverse();
+
+        this.sortByAsc = new Ext.Button({
+            id: 'asc',
+            styles: 'fa x-tool-awesome awesome-button fa-sort-amount-asc selected',
+            handler: this._onSelect,
+            scope: this,
+            label: OpenLayers.i18n('asc')
+        });
+
+        this.sortByDesc = new Ext.Button({
+            id: 'desc',
+            styles: 'fa x-tool-awesome awesome-button fa-sort-amount-desc ',
+            handler: this._onSelect,
+            scope: this,
+            label: OpenLayers.i18n('desc')
+        });
+        toolItems.push(this.sortByAsc);
+        toolItems.push(this.sortByDesc);
+
+        var config = Ext.apply({
+            cls: 'sortByPanel',
+            collapsible: false,
+            collapsed: true,
+            toolTemplate: new Ext.Template('<div class="{styles} " title="{label}">{value}</div>'),
+            tools: toolItems
+        }, cfg);
+
+        Portal.search.SortByPanel.superclass.constructor.call(this, config);
+    },
+
+    initComponent: function() {
+        Portal.search.SortByPanel.superclass.initComponent.apply(this, arguments);
+    },
+
+    _onSelectSortCriteria: function(evt, item) {
+
+        jQuery('.sortByPanelButton').removeClass("selected");
+        item.addClass("selected");
+        Ext.iterate(this.tools, function(val) {
+            if (this.tools[val].id == item.id) {
+                this.searcher.setSortBy(val);
+                trackFacetUsage(OpenLayers.i18n('searchCriteriaSortAction'), val);
+            }
+        }, this);
+    },
+
+    _onSelect: function(evt, item) {
+        jQuery('.awesome-button').removeClass("selected");
+        item.addClass("selected");
+        Ext.iterate(this.tools, function(value) {
+            if (this.tools[value].id == item.id) {
+                this.searcher.selectedSortOrder = value;
+            }
+        }, this);
+        this.searcher.search();
+    },
+
+    buildTitle: function(title,selectedKey) {
+         return String.format('<span class="filter-selection-panel-header">{0}</span>', title)
+    },
+
+    removeAnyFilters: function() {
+        return true;
+    }
+});