WIP displaying data set columns

mysociety · Dec 4, 2023 · c5398c8 · c5398c8
1 parent 48e0e90
commit c5398c8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js
@@ -180,6 +180,10 @@ const app = createApp({
     addColumn(datasetName) {
       const dataset = this.getDataset(datasetName)
 
+      if (!dataset.selectedType && dataset.types) {
+        dataset.selectedType = dataset.types[0].name
+      }
+
       this.columns.push(dataset)
 
       trackEvent('explore_column_added', {
@@ -238,7 +242,11 @@ const app = createApp({
       if (this.columns.length) {
         var cols = []
         this.columns.forEach(function(d) {
-          cols.push(d.name)
+          if (d.selectedType) {
+            cols.push(d.selectedType)
+          } else {
+            cols.push(d.name)
+          }
         })
 
         state['columns'] = cols.join(',')

diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
@@ -135,6 +135,11 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 3: Add extra columns
                             <div class="d-flex">
                                 <h3 class="h6 mb-0 me-auto">${ column.title }</h3>
                                 <button @click="removeColumn(column.name)" type="button" class="btn-close p-0" aria-label="Remove column"></button>
+                                <div :class="{ 'filter__body': true, 'filter__body--expanded': true }">
+                                    <select v-if="column.is_range" v-model="column.selectedType" class="form-select form-select-sm flex-grow-0 flex-shrink-1">
+                                    <option v-for="ds_type in column.types" :value="ds_type.name">${ ds_type.title }</option>
+                                    </select>
+                                </div>
                             </div>
                         </div>
                     </div>