From 7df2e5f39264baba6efb3a75fc7d1f71d70e12f0 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Mon, 22 Jan 2024 10:06:08 +0000 Subject: [PATCH] Split datasets in Explore page modal into categories Fixes #206. --- hub/static/css/_explore.scss | 12 +++ hub/static/js/explore.esm.js | 48 ++++++------ .../hub/includes/add-data-modal-button.html | 12 +-- .../hub/includes/add-data-modal.html | 76 ++++++++++++------- hub/views/explore.py | 23 +++--- 5 files changed, 103 insertions(+), 68 deletions(-) diff --git a/hub/static/css/_explore.scss b/hub/static/css/_explore.scss index e8c94a679..24c22847f 100644 --- a/hub/static/css/_explore.scss +++ b/hub/static/css/_explore.scss @@ -41,6 +41,18 @@ $osm-sea-blue: rgb(168, 212, 243); background: $osm-sea-blue; } +.explore-modal { + // Full-width modal, even on large screens. + .modal-dialog { + margin: var(--#{$prefix}modal-margin); + max-width: none; + } + + .list-group { + --#{$prefix}list-group-item-padding-y: 0.75em; + } +} + @include media-breakpoint-up(md) { .explore { height: calc( 100vh - 100px ); diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js index 5960dcdc5..3b31711d3 100644 --- a/hub/static/js/explore.esm.js +++ b/hub/static/js/explore.esm.js @@ -35,7 +35,6 @@ const app = createApp({ currentType: 'filter', // what to add from the Add Dataset modal (filter, shader, or column) searchText: '', // filter datasets by name in the Add Dataset modal - browseDatasets: false, // show the full list of datasets in the Add Dataset modal? sortBy: 'Constituency Name', // column to use to sort the table sortOrder: 1, // sort order direction - 1 for ascending, 0 for descending downloadCsvWithNextTableUpdate: false, @@ -47,25 +46,19 @@ const app = createApp({ modal() { return new Modal(this.$refs.modal) }, - favouriteDatasets() { - return this.datasets.filter((d) => { - return ( d.is_favourite === true ) && this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d) - }) - }, - featuredDatasets() { - return this.datasets.filter((d) => { - return ( d.featured === true ) && this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d) - }) - }, - availableOtherDatasets() { - return this.datasets.filter((d) => { - return ( d.is_favourite === false && d.featured === false ) && this.datasetIsSelectable(d) - }) - }, - otherDatasets() { - return this.datasets.filter((d) => { - return ( d.is_favourite === false && d.featured === false ) && ( this.browseDatasets == true || this.searchText != '' ) && this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d) + selectableDatasets() { + let categories = { + mp: [], + opinion: [], + place: [], + movement: [] + } + this.datasets.forEach((d) => { + if ( this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d) ) { + categories[d.category].push(d) + } }) + return categories }, mapViewActive() { return this.view == 'map' @@ -99,9 +92,12 @@ const app = createApp({ this.$refs.filtersContainer.removeAttribute('hidden') this.$refs.shaderContainer.removeAttribute('hidden') this.$refs.columnContainer.removeAttribute('hidden') + this.$refs.modal.addEventListener('shown.bs.modal', (e) => { + this.$refs.modal.querySelector('.search-input input').focus() + this.$refs.modal.querySelector('.modal-body:last-child').scrollTop = 0 + }) this.$refs.modal.addEventListener('hidden.bs.modal', (e) => { this.searchText = '' - this.browseDatasets = false }) window.vuethis = this; @@ -122,6 +118,15 @@ const app = createApp({ d["stats"] = d["stats"][area_type] } }) + datasets = datasets.sort((a, b) => { + if (a.is_favourite != b.is_favourite) { + return a.is_favourite ? -1 : 1 + } else if (a.is_featured != b.is_featured) { + return a.is_featured ? -1 : 1 + } else { + return a.title.localeCompare(b.title) + } + }) this.datasets = datasets }) }, @@ -233,9 +238,6 @@ const app = createApp({ this.key = null this.legend = null }, - toggleBrowseDatasets() { - this.browseDatasets = !this.browseDatasets - }, state() { const state = {} diff --git a/hub/templates/hub/includes/add-data-modal-button.html b/hub/templates/hub/includes/add-data-modal-button.html index de889be86..189507126 100644 --- a/hub/templates/hub/includes/add-data-modal-button.html +++ b/hub/templates/hub/includes/add-data-modal-button.html @@ -1,12 +1,14 @@ - -
+
{% include 'hub/includes/icons/search.html' %}
-
- Loading… -
-
-

Your favourite datasets

-
- +
+
+
+
+

MP

+
+

Loading datasets…

+
+
+ +
-
-
-

Popular datasets

-
- +
+

Public opinion

+
+

Loading datasets…

+
+
+ +
-
-
-

More datasets

-
- +
+

Place

+
+

Loading datasets…

+
+
+ +
+
+
+

Movement

+
+

Loading datasets…

+
+
+ +
-
-
-
diff --git a/hub/views/explore.py b/hub/views/explore.py index 470fd9e96..ba2e5ddcd 100644 --- a/hub/views/explore.py +++ b/hub/views/explore.py @@ -74,24 +74,23 @@ def render_to_response(self, context, **response_kwargs): is_favourite = False if not is_non_member: - is_favourite = ( - UserDataSets.objects.filter( - data_set=d, - user=self.request.user, - ).exists(), - ) + is_favourite = UserDataSets.objects.filter( + data_set=d, + user=self.request.user, + ).exists() ds = dict( scope=scope, name=d.name, title=d.label, description=d.description, + category=d.category or "mp", source=d.source, source_label=d.source_label, is_favourite=is_favourite, is_filterable=d.is_filterable, is_shadable=d.is_shadable, - featured=d.featured, + is_featured=d.featured, comparators=dict( map(itemgetter("field_lookup", "title"), d.comparators) ), @@ -121,13 +120,14 @@ def render_to_response(self, context, **response_kwargs): datasets.append( { "scope": "public", - "featured": False, + "is_featured": False, "is_favourite": False, "is_filterable": False, "is_shadable": False, + "category": "mp", "name": "mp_name", "title": "MP Name", - "source": "Wikipedia", + "source_label": "Data from Wikipedia.", "areas_available": ["WMC"], } ) @@ -135,13 +135,14 @@ def render_to_response(self, context, **response_kwargs): datasets.append( { "scope": "public", - "featured": False, + "is_featured": False, "is_favourite": False, "is_filterable": False, "is_shadable": False, + "category": "place", "name": "gss", "title": "Constituency GSS code", - "source": "mySociety", + "source_label": "Data from mySociety.", "areas_available": ["WMC", "WMC23"], } )