- feature request: autocomplete search also on the start page and on the dataset detail page
This commit is contained in:
Arno Kaimbacher
parent
1239bb9df3
commit
3bd022bf54
|
|
@ -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>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const routes = [
|
|||
component: HelpViewComponent,
|
||||
},
|
||||
{
|
||||
path: "/search/:display?",
|
||||
path: "/search/:display?/:type?",
|
||||
name: "Search",
|
||||
component: SearchViewComponent,
|
||||
props: true,
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
|
||||
</div> -->
|
||||
<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/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" />
|
||||
|
|
|
|||
|
|
@ -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 } });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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""> -->
|
||||
|
||||
<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="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">
|
||||
<img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
|
||||
</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/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" />
|
||||
|
|
|
|||
|
|
@ -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("");
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
|
||||
</div> -->
|
||||
<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/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" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user