Feat(web): Add Search for Versions to Search Page

Now the search also returns project versions that use the correct link
(to the version itself). The project still links to the newest version.

fixes: #13

web/src/pages/Search.vue

@@ -10,7 +10,8 @@
         </div>
 
         <div class="results-container md-layout" v-if="results.length">
-            <router-link :to="`/${result.project}`" class="result" v-for="result of results" :key="result.project">
+            <router-link :to="`/${result.project}/${result.version}`" class="result" v-for="result of results"
+                :key="result.project + result.version">
                 <div class="md-title" v-html="result.displayHtml"></div>
             </router-link>
         </div>
@@ -24,7 +25,7 @@
             </div>
         </div>
 
-        <md-button to="/" class="home-button md-fab md-primary">
+        <md-button to="/" class="home-btn md-fab md-primary">
             <md-icon>home</md-icon>
             <md-tooltip md-direction="left">docs overview</md-tooltip>
         </md-button>
@@ -41,12 +42,31 @@ export default {
         return {
             query: this.$route.query.searchQuery ?? '',
             projects: [],
+            versions: [],
             results: []
         }
     },
     async created() {
         document.title = "Search | docat"
         this.projects = await ProjectRepository.get()
+
+        //perform initial search, so it doesn't take that long
+        this.search()
+
+        await Promise.all(this.projects.map(async project => {
+            const versionsForProject = (await ProjectRepository.getVersions(
+                project
+            )).sort((a, b) => ProjectRepository.compareVersions(a, b))
+
+            versionsForProject.forEach(version => {
+                this.versions.push({
+                    project: project,
+                    version: version
+                })
+            });
+        }))
+
+        //search again now with versions
         this.search()
     },
     mounted() {
@@ -59,18 +79,28 @@ export default {
             this.search();
         }, 500),
         search() {
-            if(!this.query) {
+            if (!this.query) {
                 this.results = []
                 return
             }
 
             this.results = this.projects.filter(p => p.toLowerCase().includes(this.query.toLowerCase())).map(p => {
                 return {
                     project: p,
+                    version: '',
                     displayHtml: this.escapeHtml(p).replace(this.query, `<span class="highlighted">${this.query}</span>`)
                 }
-            }
-            );
+            });
+
+            this.versions.forEach(v => {
+                if (v.version.name.toLowerCase().includes(this.query.toLowerCase())) {
+                    this.results.push({
+                        project: v.project,
+                        version: v.version.name,
+                        displayHtml: this.escapeHtml(`${v.project} v. ${v.version.name}`).replace(this.query, `<span class="highlighted">${this.query}</span>`)
+                    })
+                }
+            })
         },
         escapeHtml(text) {
             return text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
@@ -80,7 +110,7 @@ export default {
 </script>
 
 <style lang="scss">
-.container{
+.container {
     padding-top: 16px; //margin in searchbar-container creates scroll
 }
 
@@ -129,7 +159,7 @@ export default {
     background-color: yellow;
 }
 
-.home-button {
+.home-btn {
     position: absolute;
     bottom: 32px;
     right: 50px;