- feature request: autocomplete search also on the start page and on the dataset detail page

src/App.vue

@@ -9,7 +9,7 @@
     /> -->
     <nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
-            <a class="navbar-item" href="http://www.geologie.ac.at/" target="_blank">
+            <a class="navbar-item" href="/">
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
             </a>

src/assets/scss/main-styles.scss

@@ -103,7 +103,13 @@ $table-striped-row-even-hover-background-color: #ecf2fa;
     background-size: cover;
     background-position: top center;
     background-repeat: no-repeat;
+    padding: 18.2em 0 0 0;
     min-height: 562px;
+    width: 100%;
+    /* display: flex;
+    flex-direction: column; */
+    justify-content: center;
+    align-items: center;
 }
 .align-items-center {
     -webkit-box-align: center !important;
@@ -121,6 +127,35 @@ $table-striped-row-even-hover-background-color: #ecf2fa;
     }
   }
 
+
+  
+// search banner
+.banner {
+    background-image: url(./../../assets/site/img/main-search-banner.jpg);
+    background-size: cover;
+    background-position-x: center;
+    background-position-y: 25%;
+    background-repeat: no-repeat;
+    padding: 6.2em 0 6.2em 0;
+    min-height: 400px;
+    width: 100%;
+    /* display: flex;
+    flex-direction: column; */
+    justify-content: center;
+    align-items: center;
+}
+
+.mz-5 {
+    margin-bottom: 1.5 rem;
+}
+
+@media (max-width: 576px) {
+    .banner {
+        align-items: flex-start;
+        height: 400px;
+    }
+}
+
 /* =Section general styling
 -------- */
 // section {

src/components/vs-input/vs-input.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="is-multiline">
         <!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
             <div class="search-box mx-auto">

src/router/index.ts

@@ -22,7 +22,7 @@ const routes = [
         component: HelpViewComponent,
     },
     {
-        path: "/search/:display?",
+        path: "/search/:display?/:type?",
         name: "Search",
         component: SearchViewComponent,
         props: true,

src/views/dataset-detail.component.ts/dataset-detail.component.ts

@@ -4,19 +4,23 @@ import { Prop } from "vue-property-decorator";
 import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
 import moment from "moment";
-import SimpleSearchComponent from "@/components/simple-search/simple-search-component.vue";
+// import SimpleSearchComponent from "@/components/simple-search/simple-search-component.vue";
+import VsInput from "@/components/vs-input/vs-input.vue";
+import { Suggestion } from "@/models/dataset";
 import { VUE_APP_PORTAL } from "@/constants";
 
 @Options({
     name: "DatasetDetailComponent",
     components: {
-        SimpleSearchComponent,
+        VsInput,
     },
 })
 export default class DatasetDetailComponent extends Vue {
     @Prop()
     datasetId!: number;
 
+    searchTerm: string | Suggestion = "";
+
     private subscriptions: Array<Subscription> = [];
     public dataset = {} as DbDataset;
     private error = "";
@@ -36,6 +40,20 @@ export default class DatasetDetailComponent extends Vue {
         }
     }
 
+    onSearch(suggestion: Suggestion | string): void {
+        let term;
+        if (typeof suggestion === "string") {
+            term = suggestion;
+            this.$router.push({ name: "Search", params: { display: term } });
+        } else if (suggestion instanceof Suggestion) {
+            term = suggestion.value;
+            this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } });
+        }
+
+        // this.searchTerm = suggestion;
+        // this.$router.push({ name: "Search", params: { display: term, suggestion instanceof Suggestion ? ty} });
+    }
+
     private getDataset(id: number): void {
         const newSub = DatasetService.getDataset(id).subscribe(
             (res: DbDataset) => {

src/views/dataset-detail.component.ts/dataset-detail.component.vue

@@ -37,7 +37,8 @@
                 </div>
             </div>
         </div> -->
-        <simple-search-component></simple-search-component>
+        <!-- <simple-search-component></simple-search-component> -->
+        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
     </div>
     <section class="section" v-if="loaded">
         <div class="container">
@@ -232,9 +233,10 @@
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.re3data.org/repository/r3d100013400"><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" /></a>
                 </div>
-                <!-- <div class="column col-sm text-center mobile-space">
+                <a target="_blank" href="http://www.geologie.ac.at/">
-                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
+                    <!-- <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" /> -->
-                </div> -->
+                    <img src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
+                </a>
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
                         <img src="@/assets/site/img/base-logo.gif" alt="logo base" />

src/views/home-view/home-view-component.ts

@@ -1,11 +1,27 @@
 import { Options, Vue } from "vue-class-component";
+import VsInput from "@/components/vs-input/vs-input.vue";
+import { Suggestion } from "@/models/dataset";
 
 @Options({
     name: "HomeViewComponent",
+    components: {
+        VsInput,
+    },
 })
 export default class HomeViewComponent extends Vue {
     public display = "";
 
+    onSearch(suggestion: Suggestion | string): void {
+        let term;
+        if (typeof suggestion === "string") {
+            term = suggestion;
+            this.$router.push({ name: "Search", params: { display: term } });
+        } else if (suggestion instanceof Suggestion) {
+            term = suggestion.value;
+            this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } });
+        }
+    }
+
     search(): void {
         this.$router.push({ name: "Search", params: { display: this.display } });
     }

src/views/home-view/home-view-component.vue

@@ -47,19 +47,12 @@
             <img src="https://bulma.io/images/placeholders/256x256.png" />
         </figure> -->
         <!-- class="columns help u-full-width featured-bg-image"> -->
-        <section data-sr id="help" class="columns header-image align-items-center h-100">
+        <section data-sr id="help" class="header-image align-items-center h-100">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
+            <!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
-                <!-- <img src="site/img/Main-banner-homepage-1280.jpg" class="img-fluid""> -->
-
                 <div class="search-box mx-auto">
-                    <!-- <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
-                        <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
-                        <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
-                    </form> -->
                     <div class="field has-addons main-search-from-bg">
                         <div class="control is-expanded">
                             <input id="search_query" class="input is-medium" type="text" name="q" autocomplete="off" v-model="display" />
-                            <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
                         </div>
                         <div class="control">
                             <button class="button input is-medium search-button-icon" @click="search()">
@@ -68,7 +61,8 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
+            <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
         </section>
 
         <div class="container">
@@ -188,9 +182,12 @@
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.re3data.org/repository/r3d100013400"><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" /></a>
                 </div>
-                <!-- <div class="column col-sm text-center mobile-space">
+                <div class="column col-sm text-center mobile-space">
-                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
+                    <a target="_blank" href="http://www.geologie.ac.at/">
-                </div> -->
+                        <!-- <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" /> -->
+                        <img src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
+                    </a>
+                </div>
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
                         <img src="@/assets/site/img/base-logo.gif" alt="logo base" />

src/views/search-view/search-view-component.ts

@@ -7,7 +7,7 @@ import ActiveFacetCategory from "@/components/active-facet-category/active-facet
 import { SolrSettings } from "@/models/solr";
 // import { DatasetService } from "@/services/dataset.service";
 import DatasetService from "../../services/dataset.service";
-import { Suggestion, Dataset } from "@/models/dataset";
+import { Suggestion, Dataset, SearchType } from "@/models/dataset";
 import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
 
@@ -24,6 +24,9 @@ export default class SearchViewComponent extends Vue {
     @Prop()
     display!: string;
 
+    @Prop()
+    type!: string;
+
     results: Array<Dataset> = [];
 
     // facets: FacetFields = new FacetFields();
@@ -68,10 +71,26 @@ export default class SearchViewComponent extends Vue {
             return false;
         }
     }
+    // getKeyName(value: string) {
+    //     return Object.entries(Suggestion).find(([key, val]) => val === value)?.[0];
+    // }
+    getEnumKeyByEnumValue<T extends { [index: string]: string }>(myEnum: T, enumValue: string): keyof T | null {
+        const keys = Object.keys(myEnum).filter((x) => myEnum[x] == enumValue);
+        return keys.length > 0 ? keys[0] : null;
+        // return keys[0];
+    }
 
     beforeMount(): void {
         // this.rdrAPI = new DatasetService();
-        if (this.display != undefined && this.display != "") {
+        if (this.display != "" && this.type != undefined) {
+            const enumKey = this.getEnumKeyByEnumValue(SearchType, this.type);
+            if (enumKey) {
+                const suggestion = new Suggestion(this.display, SearchType[enumKey]);
+                this.onSearch(suggestion);
+            } else {
+                this.onSearch(this.display);
+            }
+        } else if (this.display != "" && this.type == undefined) {
             this.onSearch(this.display);
         } else {
             this.onSearch("");

src/views/search-view/search-view-component.vue

@@ -126,9 +126,10 @@
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.re3data.org/repository/r3d100013400"><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" /></a>
                 </div>
-                <!-- <div class="column col-sm text-center mobile-space">
+                <a target="_blank" href="http://www.geologie.ac.at/">
-                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
+                    <!-- <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" /> -->
-                </div> -->
+                    <img src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
+                </a>
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
                         <img src="@/assets/site/img/base-logo.gif" alt="logo base" />