Skip to content

Commit

Permalink
Only show “MP” column in Explore page modal if area_type has an MP
Browse files Browse the repository at this point in the history 
This prevents “MP” showing as an always-empty column when you’re
exploring by local authority.

I implemented this as an `areaTypeHasMP()` method, because
`selectableDatasets`` changes when you enter search text, and I don’t
want all of the columns to appear/disappear as you search.

While I was there, I also took the opportunity to refactor the four
separate “Loading datasets…” status messages into a single, centred one.
  • Loading branch information
@zarino @struan
zarino authored and struan committed Apr 24, 2024
1 parent 3501868 commit 7a1e49b
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 21 deletions.
3 changes: 3 additions & 0 deletions hub/static/js/explore.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -625,6 +625,9 @@ const app = createApp({
},
getDataTypesForCurrentArea(dataset) {
return dataset.types.filter(t => t.area_type === this.area_type || t.area_type === null)
},
areaTypeHasMP(area_type) {
return ( area_type === "WMC" || area_type === "WMC23" )
}
}
})
Expand Down
33 changes: 12 additions & 21 deletions hub/templates/hub/includes/add-data-modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,46 +12,37 @@ <h2 class="modal-title h5 lh-1">Add ${ currentType }</h5>
</div>
</div>
<div class="modal-body bg-gray-100 pt-0">
<div class="row">
<div class="col-sm-6 col-lg-3">
<div v-if="!datasetsLoaded" class="d-flex align-items-center justify-content-center h-100 text-muted">
Loading datasets…
</div>
<div v-else class="row">
<div class="col-sm-6 col-lg" v-if="areaTypeHasMP(area_type)">
<h3 class="h5 my-3 text-primary">MP</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.mp.length" class="list-group">
<div v-if="selectableDatasets.mp.length" class="list-group">
<template v-for="dataset in selectableDatasets.mp">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="col-sm-6 col-lg">
<h3 class="h5 my-3 text-primary">Public opinion</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.opinion.length" class="list-group">
<div v-if="selectableDatasets.opinion.length" class="list-group">
<template v-for="dataset in selectableDatasets.opinion">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="col-sm-6 col-lg">
<h3 class="h5 my-3 text-primary">Place</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.place.length" class="list-group">
<div v-if="selectableDatasets.place.length" class="list-group">
<template v-for="dataset in selectableDatasets.place">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="col-sm-6 col-lg">
<h3 class="h5 my-3 text-primary">Movement</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.movement.length" class="list-group">
<div v-if="selectableDatasets.movement.length" class="list-group">
<template v-for="dataset in selectableDatasets.movement">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
Expand Down

0 comments on commit 7a1e49b

Please sign in to comment.