Add a sort option on the search form

src/components/Search/Form.vue

@@ -41,6 +41,19 @@
           <!-- The input and label tags must be on the same line for the space between checkbox and label to show -->
         </div>
         <p v-if="!sources.length" class="help is-danger">Please select at least one source</p>
+        <div class="columns">
+          <div class="column is-narrow is-align-self-center">
+            <label class="label">Sort by</label>
+          </div>
+          <div class="column">
+            <div class="select is-fullwidth">
+              <select v-model="sort">
+                <option value="relevance">Relevance</option>
+                <option value="element_name">Element name</option>
+              </select>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <!-- Facet form -->
@@ -113,6 +126,7 @@ export default {
     allSources: ['element', 'transcription', 'metadata', 'entity'],
     sources: ['element', 'transcription', 'metadata', 'entity'],
     facets: {},
+    sort: 'relevance',
     SEARCH_HELP
   }),
   methods: {
@@ -185,6 +199,7 @@ export default {
         query: this.currentTerms.trim() || '*',
         only_facets: this.isEmpty.toString(),
         sources: [...this.sources],
+        sort: this.sort,
         ...checkedFacets
       }
     },
@@ -201,7 +216,8 @@ export default {
     params: {
       handler: 'parseParams',
       immediate: true
-    }
+    },
+    sort: 'submit'
   }
 }
 </script>