Resolve "Make progress page and search bar use GraphQL"

Closes #735 (closed)

aleksis/core/assets/components/SidenavSearch.vue

 <script>
-  export default {
-    methods: {
-        submit: function () {
-            this.$refs.form.submit()
-        },
+export default {
+  methods: {
+    submit: function () {
+      this.$refs.form.submit()
     },
-    props: ["action", "placeholder"],
-    name: "sidenav-search",
+  },
+  props: ["action", "placeholder"],
+  name: "sidenav-search",
+  data() {
+    return {
+      q: ""
+    }
   }
-  // FIXME: implement suggestions etc, use "loading" attribute
+}
 </script>
 
 <template>
-  <form method="get" ref="form" :action="action" id="search-form">
-    <v-text-field
-        :append-icon="'mdi-magnify'" @click:append="submit" single-line
-        id="search" name="q" type="search" enterkeyhint="search" :placeholder="placeholder"
-    ></v-text-field>
-  </form>
+  <ApolloQuery
+      :query="gql => gql`
+      query search ($q: String!) {
+        searchSnippets (query: $q, limit: 5) {
+          obj {
+            name
+            absoluteUrl
+            icon
+          }
+        }
+      }
+    `"
+      :variables="{
+      q
+    }"
+  >
+    <template v-slot="{ result: { loading, error, data, query } }">
+
+      <form method="get" ref="form" :action="action" id="search-form">
+        <v-autocomplete
+            :prepend-icon="'mdi-magnify'"
+            append-icon=""
+            @click:prepend="submit"
+            single-line
+            clearable
+            :loading="loading"
+            id="search"
+            name="q"
+            type="search"
+            enterkeyhint="search"
+            :label="placeholder"
+            :search-input.sync="q"
+            flat
+            solo
+            cache-items
+            hide-no-data
+            hide-details
+            :items="data.searchSnippets"
+            item-text="obj.name"
+        >
+          <template v-slot:item="{ item }">
+            <v-list-item :href="item.obj.absoluteUrl">
+              <v-list-item-icon v-if="item.obj.icon">
+                <v-icon v-text="'mdi-' + item.obj.icon"></v-icon>
+              </v-list-item-icon>
+              {{ item.obj.name }}
+            </v-list-item>
+          </template>
+        </v-autocomplete>
+      </form>
+    </template>
+  </ApolloQuery>
 </template>