geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull requests Projects 3 Releases 1 Packages 1 Wiki Activity

- axios config for cors

Browse source
This commit is contained in:
Arno Kaimbacher 2021-11-17 12:03:44 +01:00
parent 1660bc6830
commit 39d323b619
8 changed files with 1198 additions and 1262 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/vs-input/vs-input.ts
View file

@ -12,11 +12,11 @@ import { Dataset, Suggestion, SearchType } from "@/models/dataset";
name: "VsInput",
})
export default class VsInput extends Vue {
@Prop()
private title!: string;
// @Prop()
// private title!: string;
@Prop({ default: "Search" })
private placeholder!: string;
readonly placeholder!: string;
private display = "";
private value!: Suggestion;
@ -31,6 +31,7 @@ export default class VsInput extends Vue {
};
private rdrAPI!: DatasetService;
itemRefs!: Array<any>;
emits = ["filter"];
setItemRef(el: any) {
this.itemRefs.push(el);
@ -111,10 +112,10 @@ export default class VsInput extends Vue {
// this.value = null;
this.results = [];
this.error = "";
this.$emit("clear");
// this.$emit("clear");
}
@Emit("search-change")
// @Emit("search-change")
search(): string {
this.results = [];
// this.$emit("search", this.display)
@ -202,7 +203,7 @@ export default class VsInput extends Vue {
onEnter(): void {
if (this.selectedIndex === null) {
this.$emit("nothingSelected", this.display);
// this.$emit("nothingSelected", this.display);
return;
}
this.select(this.suggestions[this.selectedIndex]);
@ -210,15 +211,16 @@ export default class VsInput extends Vue {
}
@Emit("search-change")
select(obj: Suggestion): Suggestion {
private select(obj: Suggestion): Suggestion {
// if (!obj) {
// return;
// }
this.value = obj; //(obj["title_output"]) ? obj["title_output"] : obj.id
// this.display = obj; // this.formatDisplay(obj)
this.selectedDisplay = this.display;
// this.$emit("search", this.value);
this.close();
// this.$emit("update", this.value);
return this.value;
}
@ -245,6 +247,6 @@ export default class VsInput extends Vue {
this.results = [];
this.error = "";
//this.removeEventListener()
this.$emit("close");
// this.$emit("close");
}
}

87
src/components/vs-input/vs-input.vue
View file

@ -1,51 +1,52 @@
<template>
<div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px">
<div class="field has-addons">
<div class="control is-expanded">
<input
id="search_query"
class="input is-medium"
type="text"
name="q"
autocomplete="off"
v-model="display"
v-on:input="searchChanged"
v-bind:title="title"
v-bind:placeholder="placeholder"
v-on:keydown.down="onArrowDown"
v-on:keydown.up="onArrowUp"
v-on:keydown.enter="onEnter"
@keydown.tab="close"
v-on:focus="focus"
/>
<!-- <p>Message is: {{ display }}</p> -->
</div>
<div>
<div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px">
<div class="field has-addons">
<div class="control is-expanded">
<input
v-on:input="searchChanged"
id="search_query"
class="input is-medium"
type="text"
name="q"
autocomplete="off"
v-model="display"
v-bind:placeholder="placeholder"
v-on:keydown.down="onArrowDown"
v-on:keydown.up="onArrowUp"
v-on:keydown.enter="onEnter"
@keydown.tab="close"
v-on:focus="focus"
/>
<!-- <p>Message is: {{ display }}</p> v-on:input="searchChanged"-->
</div>
<div class="control">
<button class="button input is-medium search-button-icon" @click="search()">
<img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" />
</button>
<div class="control">
<button class="button input is-medium search-button-icon" @click="search()">
<img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" />
</button>
</div>
</div>
</div>
</div>
<div class="autocomplete-column is-half is-offset-one-quarter">
<ul class="autocomplete-results pure-u-23-24" v-show="showResults">
<li class="loading" v-if="isLoading">Loading results...</li>
<div class="autocomplete-column is-half is-offset-one-quarter">
<ul class="autocomplete-results pure-u-23-24" v-show="showResults">
<li class="loading" v-if="isLoading">Loading results...</li>
<li
v-else
v-for="(result, i) in suggestions"
:key="i"
class="autocomplete-result-item"
:class="{ 'is-active': isSelected(i) }"
@click.prevent="select(result)"
:ref="setItemRef"
>
<div class="small-label">
<label>{{ result.value }} ({{ result.type }})</label>
</div>
</li>
</ul>
<li
v-else
v-for="(result, i) in suggestions"
:key="i"
class="autocomplete-result-item"
:class="{ 'is-active': isSelected(i) }"
@click.prevent="select(result)"
:ref="setItemRef"
>
<div class="small-label">
<label>{{ result.value }} ({{ result.type }})</label>
</div>
</li>
</ul>
</div>
</div>
</template>