Add autocomplete and fix some bugs in feature search

app.js

@@ -177,7 +177,7 @@ app.get('/api/search/:letter?', function (req, res, next) {
   res.send(data)
 })
 
-app.get('/api/features/', function (req, res) {
+app.get('/api/glossary/features', function (req, res) {
   // Feature Glossary
   res.send(lib.glossary(loadDocuments(DIR)))
 })
@@ -185,9 +185,10 @@ app.get('/api/features/', function (req, res) {
 app.get('/api/features/:letter?', function (req, res) {
   // Feature Search Endpoint with query parameters
   // <feature category="diakritika" type="akut" subtype="akutstattgravis" ref="26">
-  if (!req.query.category){
-    res.send({})
-    return next('No Query provided')
+
+  if (!req.query) {
+    res.status(400).send('No Query provided')
+    return
   }
 
   let query = {
@@ -207,6 +208,11 @@ app.get('/api/features/:letter?', function (req, res) {
 
   for (let doc of documents) {
     let obj = loadDocument(doc)
+
+    if (!obj) {
+      continue
+    }
+
     if (obj.valid) {
       let results = lib.features(obj, query)
       if (results !== null) {

lib.js

@@ -188,12 +188,29 @@ function featureGlossary (objs) {
     }
   }
 
-  let featureArray = []
+  let categories = []
+  let types = []
+  let subtypes = []
+
   for (let feat of featureList) {
-    featureArray.push(featureToString(feat))
+    if (feat.category !== undefined) {
+      categories.push(feat.category)
+    }
+    if (feat.type !== undefined) {
+      types.push(feat.type)
+    }
+    if (feat.subtype !== undefined) {
+      subtypes.push(feat.subtype)
+    }
   }
 
-  return Array.from(new Set(featureArray))
+  let ret = {
+    categories: Array.from(new Set(categories)),
+    types: Array.from(new Set(types)),
+    subtypes: Array.from(new Set(subtypes))
+  }
+
+  return ret
 }
 
 function metadataTable (objs) {

src/components/Features.vue

@@ -8,23 +8,7 @@
     <v-flex xs12>
       <p>Features are annotated properties of each letter. They have a category, a type and a subtype. These properties are hierarchical.</p>
       <p>With the feature search you can quickly lookup the annotated features within all categories. The search supports regular expressions and can be restricted to a single letter.</p>
-    </v-flex>
 
-    <v-flex xs12>
-      <v-expansion-panel>
-        <v-expansion-panel-content>
-          <div slot="header">Glossary</div>
-          <v-card>
-            <v-card-text class="grey lighten-3">
-              <ul>
-                <li v-for="feat in feature_glossary">
-                  {{feat}}
-                </li>
-              </ul>
-            </v-card-text>
-          </v-card>
-        </v-expansion-panel-content>
-      </v-expansion-panel>
     </v-flex>
 
     <!-- Select Letter -->
@@ -34,34 +18,37 @@
         v-model="selected"
         label="Select"
         single-line
-        bottom
         prepend-icon="local_post_office"
         ></v-select>
     </v-flex>
 
     <!-- Input Fields for Search -->
     <v-flex xs12 md3>
-      <v-text-field
+      <v-autocomplete
         v-model="feature_category"
-        type="text" label="Category"
-        @keyup.enter.native="validate">
-      </v-text-field>
+        :items="feature_categories_glossary"
+        label="Category"
+        @keyup.enter.native="validate"
+        >
+    </v-autocomplete>
     </v-flex>
     <v-flex xs12 md3>
-      <v-text-field
+      <v-autocomplete
         v-model="feature_type"
-        type="text"
-        label="Type"
-        @keyup.enter.native="validate">
-      </v-text-field>
+        :items="feature_types_glossary"
+        label="Types"
+        @keyup.enter.native="validate"
+        >
+      </v-autocomplete>
     </v-flex>
     <v-flex xs12 md3>
-      <v-text-field
+      <v-autocomplete
         v-model="feature_subtype"
-        type="text"
-        label="Subtype"
-        @keyup.enter.native="validate">
-      </v-text-field>
+        :items="feature_subtypes_glossary"
+        label="Subtypes"
+        @keyup.enter.native="validate"
+        >
+    </v-autocomplete>
     </v-flex>
 
     <!-- Search Buttons -->
@@ -108,7 +95,9 @@ export default {
       header: 'Feature Search',
       invalid: false,
       searching: false,
-      feature_glossary: [],
+      feature_categories_glossary: [],
+      feature_types_glossary: [],
+      feature_subtypes_glossary: [],
       feature_category: '',
       feature_type: '',
       feature_subtype: '',
@@ -116,25 +105,24 @@ export default {
       letters: [
         { text: 'All' }
       ],
-      selected: { text: 'All' }
+      selected: 'All'
     }
   },
   methods: {
     clear () {
       // Clears the search input fields
-      this.feature_category = null
-      this.feature_type = null
-      this.feature_subtype = null
+      this.feature_category = ''
+      this.feature_type = ''
+      this.feature_subtype = ''
     },
     find () {
       // Call feature search API with parameters
       this.searching = true
 
       let url = 'http://localhost:3000/api/features/'
-      // TODO: this is a bit silly
       // Adding the lettername to the API endpoint
-      if (this.selected.text !== 'All') {
-        url = url + this.selected.text.replace(/ /g, '_') + '/'
+      if (this.selected !== 'All') {
+        url = url + this.selected
       }
 
       let params = {
@@ -173,14 +161,18 @@ export default {
   },
   created () {
     // Get feature glossary
-    this.$http.get('http://localhost:3000/api/features').then(function (data) {
-      this.feature_glossary = data.body
+    this.$http.get('http://localhost:3000/api/glossary/features').then(function (data) {
+      this.feature_categories_glossary = data.body.categories
+      this.feature_types_glossary = data.body.types
+      this.feature_subtypes_glossary = data.body.subtypes
     })
 
     // Create list of all letters
     this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
       for (let letter of data.body) {
-        this.letters.push({text: letter.name})
+        if (letter.valid) {
+          this.letters.push({text: letter.title})
+        }
       }
     })
   }