merge: #743 from ginger/column-picker

ckanext/nhm/theme/assets/less/multisearch.less

@@ -431,6 +431,30 @@
   }
 }
 
+.term-editor,
+.field-picker {
+  input {
+    border: @lighter-borders;
+    border-radius: @rounding;
+  }
+
+  select {
+    width: 100%;
+    min-height: unset !important;
+    height: unset;
+    border: @lighter-borders;
+    padding: 1.2px 2px 2px;
+  }
+
+  label {
+    margin-bottom: 0;
+
+    &::after {
+      content: none;
+    }
+  }
+}
+
 .term-editor {
   @wrapSize: @lg;
 
@@ -462,31 +486,10 @@
     }
   }
 
-  label {
-    margin-bottom: 0;
-
-    &::after {
-      content: none;
-    }
-  }
-
   .term-editor-block {
     width: 300px;
   }
 
-  select {
-    width: 100%;
-    min-height: unset !important;
-    height: unset;
-    border: @lighter-borders;
-    padding: 1.2px 2px 2px;
-  }
-
-  input {
-    border: @lighter-borders;
-    border-radius: @rounding;
-  }
-
   & .comparison-types {
     & input {
       display: none;
@@ -528,10 +531,10 @@
       padding: 10px 0;
     }
   }
+}
 
-  .field-picker button {
-    margin-left: 2px;
-  }
+.field-picker button {
+  margin-left: 2px;
 }
 
 .filter-buttons {
@@ -551,6 +554,11 @@
   }
 }
 
+.header-picker {
+  min-width: 200px;
+  right: 0;
+}
+
 // MAIN FORM ---------------------------------------------------------------------------------------
 
 .multisearch-form {
@@ -617,6 +625,7 @@
     display: flex;
     justify-content: center;
     gap: 5px;
+
     & > input,
     & > label {
       margin: 0;

ckanext/nhm/theme/assets/scripts/apps/search/src/components/Results.vue

@@ -63,11 +63,12 @@
               v-if="showFields"
               :callback="addCustomHeader"
               :resource-ids="resultResourceIds"
-              :classes="['floating']"
+              :classes="['floating', 'header-picker']"
               v-dismiss="{
                 switch: 'showFields',
                 ignore: ['#show-fields-' + _uid],
               }"
+              :selected-fields="headers.flat(1)"
             ></FieldPicker>
           </transition>
         </div>

ckanext/nhm/theme/assets/scripts/apps/search/src/components/misc/FieldPicker.vue

@@ -54,7 +54,8 @@ export default {
   computed: {
     ...mapState('results', ['resultData']),
     selectableFields() {
-      return this.fieldList.filter((f) => !this.selectedFields.includes(f));
+      const existingFields = this.selectedFields || []; // just in case it's null
+      return this.fieldList.filter((f) => !existingFields.includes(f));
     },
   },
   methods: {