Feat: Add SearchBar to tile, Create Search Page for searching Project…

…s by Name

fixes: #13 , part 1 (projects)

web/src/components/Layout.vue

@@ -8,6 +8,8 @@
             <div v-html="header" />
           </router-link>
           <slot name="toolbar"></slot>
+
+          <SearchBar />
         </div>
         <div class="md-layout-item md-size-15 md-small-hide"></div>
       </div>
@@ -29,34 +31,38 @@
 
 <script>
 import ProjectRepository from '@/repositories/ProjectRepository'
+import SearchBar from '@/components/SearchBar.vue'
 
 export default {
   name: 'layout',
   props: {
     fullscreen: Boolean,
+
   },
   data() {
     const defaultHeader = '<img class="logo" alt="docat logo" src="' + require('../assets/logo.png') + '" /><h1>DOCAT</h1>'
     return {
       header: defaultHeader,
     }
   },
+  components: {
+    SearchBar,
+  },
   async created() {
     const config = await ProjectRepository.getConfig()
-    if (config.hasOwnProperty('headerHTML')){
+    if (config.hasOwnProperty('headerHTML')) {
       this.header = config.headerHTML
     }
-  }
+  },
 }
 </script>
 
 <style lang="scss">
 @import "~vue-material/dist/theme/engine"; // Import the theme engine
 
-@include md-register-theme("default", (
-  primary: #383838, // The primary color of your application
-  accent: #868686 // The accent or secondary color
-));
+@include md-register-theme("default", (primary: #383838, // The primary color of your application
+    accent: #868686 // The accent or secondary color
+  ));
 
 @import "~vue-material/dist/theme/all"; // Apply the theme
 

web/src/components/SearchBar.vue

@@ -0,0 +1,31 @@
+<template>
+    <input type="search" class="searchbar-small" placeholder="Search Projects" v-model="searchQuery"
+        @change="initialSearch()" />
+</template>
+
+<script>
+
+export default {
+    name: 'searchbar',
+    data() {
+        return {
+            searchQuery: ''
+        }
+    },
+    methods: {
+        initialSearch() {
+            this.$router.push({ path: '/search', query: { searchQuery: this.searchQuery } })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.searchbar-small {
+    padding: 10px;
+    border: 1px solid #e8e8e8;
+    border-radius: 7px;
+    margin-top: 16px;
+    float: right;
+}
+</style>

web/src/main.js

@@ -50,13 +50,15 @@ import Help from '@/pages/Help.vue'
 import Upload from '@/pages/Upload.vue'
 import Claim from '@/pages/Claim.vue'
 import Delete from '@/pages/Delete.vue'
+import Search from '@/pages/Search.vue'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/help', component: Help },
   { path: '/upload', component: Upload },
   { path: '/claim', component: Claim },
   { path: '/delete', component: Delete },
+  { path: '/search', component: Search},
   { path: '/:project/:version?/:location(.*)?', component: Docs }
 ]
 

web/src/pages/Search.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="container">
+        <div class="searchbar-container">
+            <input ref="searchbar" type="search" class="searchbar-fullsize" placeholder="Search Projects"
+                v-model="query" @input="debounceInput" />
+
+            <md-button class="md-icon-button md-fab md-secondary search-button" @click="search()">
+                <md-icon>search</md-icon>
+            </md-button>
+        </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">
+                <div class="md-title" v-html="result.displayHtml"></div>
+            </router-link>
+        </div>
+
+        <div class="no-results" v-else>
+            <div v-if="query.length">
+                No results for "{{ query }}"
+            </div>
+            <div v-else>
+                No results
+            </div>
+        </div>
+
+        <md-button to="/" class="home-button md-fab md-primary">
+            <md-icon>home</md-icon>
+            <md-tooltip md-direction="left">docs overview</md-tooltip>
+        </md-button>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import ProjectRepository from '@/repositories/ProjectRepository'
+
+export default {
+    name: 'search',
+    data() {
+        return {
+            query: this.$route.query.searchQuery ?? '',
+            projects: [],
+            results: []
+        }
+    },
+    async created() {
+        document.title = "Search | docat"
+        this.projects = await ProjectRepository.get()
+        this.search()
+    },
+    mounted() {
+        this.$refs.searchbar.focus()
+    },
+    methods: {
+        debounceInput: _.debounce(function (e) {
+            this.query = e.target.value
+            this.$router.replace({ query: { searchQuery: this.query } })
+            this.search();
+        }, 500),
+        search() {
+            if(!this.query) {
+                this.results = []
+                return
+            }
+
+            this.results = this.projects.filter(p => p.toLowerCase().includes(this.query.toLowerCase())).map(p => {
+                return {
+                    project: p,
+                    displayHtml: this.escapeHtml(p).replace(this.query, `<span class="highlighted">${this.query}</span>`)
+                }
+            }
+            );
+        },
+        escapeHtml(text) {
+            return text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.container{
+    padding-top: 16px; //margin in searchbar-container creates scroll
+}
+
+.search-button {
+    border-radius: 0px;
+    border-bottom-right-radius: 7px;
+    border-top-right-radius: 7px;
+    margin: 0px;
+    box-shadow: none;
+}
+
+.searchbar-container {
+    display: flex;
+    flex-direction: row;
+    width: 80%;
+    margin: 0 10% 0 10%;
+}
+
+.searchbar-fullsize {
+    padding: 10px;
+    border: 1px solid #e8e8e8;
+    border-radius: 7px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    font-size: 140%;
+    width: 100%;
+}
+
+.results-container {
+    margin: 16px 10% 0 10%;
+    display: flex;
+    flex-direction: column;
+}
+
+.result {
+    width: 100%;
+    height: 50px;
+    margin: 10px 0;
+    padding: 12px;
+    border-radius: 7px;
+    font-size: 120%;
+    background-color: #e8e8e8;
+}
+
+.highlighted {
+    background-color: yellow;
+}
+
+.home-button {
+    position: absolute;
+    bottom: 32px;
+    right: 50px;
+    border-radius: 7px;
+    margin-right: -1px;
+    height: 52px;
+    margin-top: 4px;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.42);
+}
+
+.no-results {
+    text-align: center;
+    font-size: 140%;
+    margin-top: 16px;
+}
+</style>