- schow no contributor in oai if no contributor is defined
- add contributor_type during creating the dataset
This commit is contained in:
Arno Kaimbacher
parent
76bdfcdf92
commit
3a2336adad
23 changed files with 434 additions and 316 deletions
|
|
@ -1,155 +1,211 @@
|
|||
<!-- https://pineco.de/instant-ajax-search-laravel-vue/
|
||||
https://alligator.io/vuejs/vue-autocomplete-component/ -->
|
||||
<template>
|
||||
<div style="position:relative">
|
||||
<input type="search" @input="searchChanged" v-model="search" v-bind:readonly="isLoading == true" v-bind:title="title" v-bind:placeholder="title"
|
||||
class="pure-u-23-24" v-on:keydown.down="onArrowDown" v-on:keydown.up="onArrowUp" v-on:keydown.enter="onEnter">
|
||||
<!-- <ul class="autocomplete-results" v-show="results.length > 0"> -->
|
||||
<ul class="autocomplete-results pure-u-23-24" v-show="isOpen">
|
||||
<li class="loading" v-if="isLoading" >Loading results...</li>
|
||||
<div style="position:relative">
|
||||
<input
|
||||
type="search"
|
||||
@input="searchChanged"
|
||||
v-model="display"
|
||||
v-bind:readonly="isLoading == true"
|
||||
v-bind:title="title"
|
||||
v-bind:placeholder="title"
|
||||
class="pure-u-23-24"
|
||||
v-on:keydown.down="onArrowDown"
|
||||
v-on:keydown.up="onArrowUp"
|
||||
v-on:keydown.enter="onEnter"
|
||||
/>
|
||||
<!-- <ul class="autocomplete-results" v-show="results.length > 0"> -->
|
||||
<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="(suggestion, i) in results"
|
||||
:key="i"
|
||||
@click="setResult(suggestion)"
|
||||
class="autocomplete-result"
|
||||
:class="{ 'is-active': i === arrowCounter }"
|
||||
>
|
||||
<strong>{{ suggestion.full_name }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<li
|
||||
v-else
|
||||
v-for="(suggestion, i) in results"
|
||||
:key="i"
|
||||
@click.prevent="setResult(suggestion)"
|
||||
ref="options"
|
||||
class="autocomplete-result"
|
||||
:class="{ 'is-active': i === selectedIndex }"
|
||||
>
|
||||
<strong>{{ suggestion.full_name }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import axios from 'axios';
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import debounce from "lodash/debounce";
|
||||
import axios from "axios";
|
||||
import { Component, Prop, Watch } from "vue-property-decorator";
|
||||
|
||||
export default {
|
||||
@Component({})
|
||||
export default class MyAutocomplete extends Vue {
|
||||
//data from parent component
|
||||
props: {
|
||||
title: String
|
||||
// items: {
|
||||
// type: Array,
|
||||
// required: false,
|
||||
// default: () => []
|
||||
// },
|
||||
// isAsync: {
|
||||
// type: Boolean,
|
||||
// required: false,
|
||||
// default: false
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: null,
|
||||
results: [],
|
||||
isOpen: false,
|
||||
isLoading: false,
|
||||
isAsync: true,
|
||||
items: [],
|
||||
arrowCounter: -1
|
||||
};
|
||||
},
|
||||
@Prop()
|
||||
title: string;
|
||||
|
||||
// watch: {
|
||||
// search(after, before) {
|
||||
// this.isOpen = true;
|
||||
// this.filterResults();
|
||||
// }
|
||||
// },
|
||||
display: string = "";
|
||||
value = null;
|
||||
error: string = null;
|
||||
suggestions: Array<any> = [];
|
||||
isOpen = false;
|
||||
// isLoading = false;
|
||||
loading: boolean = false;
|
||||
isAsync: boolean = true;
|
||||
results: Array<any> = [];
|
||||
selectedIndex: number = null;
|
||||
selectedDisplay = null;
|
||||
|
||||
watch: {
|
||||
// Once the items content changes, it means the parent component
|
||||
// provided the needed data
|
||||
items: function(value, oldValue) {
|
||||
// we want to make sure we only do this when it's an async request
|
||||
if (this.isAsync) {
|
||||
this.results = value;
|
||||
this.isOpen = true;
|
||||
this.isLoading = false;
|
||||
} else {
|
||||
if (value.length !== oldValue.length) {
|
||||
this.results = value;
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setResult(person) {
|
||||
// this.search = person.full_name;
|
||||
this.reset();
|
||||
this.$emit("person", person);
|
||||
},
|
||||
reset() {
|
||||
this.search = "";
|
||||
this.results = [];
|
||||
this.isOpen = false;
|
||||
},
|
||||
searchChanged() {
|
||||
// Let's warn the parent that a change was made
|
||||
this.$emit("input", this.search);
|
||||
|
||||
if (this.search.length >= 2) {
|
||||
// Is the data given by an outside ajax request?
|
||||
if (this.isAsync) {
|
||||
this.isLoading = true;
|
||||
this.filterResults();
|
||||
} else {
|
||||
// Data is sync, we can search our flat array
|
||||
this.results = this.items.filter(item => {
|
||||
return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
|
||||
});
|
||||
this.isOpen = true;
|
||||
}
|
||||
} else {
|
||||
this.items = [];
|
||||
}
|
||||
},
|
||||
filterResults: _.debounce(function() {
|
||||
var self = this;
|
||||
axios
|
||||
.get("/api/persons", { params: { filter: this.search.toLowerCase() } })
|
||||
.then(function(response) {
|
||||
return (self.items = response.data.data);
|
||||
})
|
||||
.catch(function(error) {
|
||||
alert(error);
|
||||
});
|
||||
// this.results = this.items.filter(item => {
|
||||
// return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
|
||||
// });
|
||||
}, 300),
|
||||
onArrowDown() {
|
||||
if (this.arrowCounter < this.results.length - 1) {
|
||||
this.arrowCounter = this.arrowCounter + 1;
|
||||
}
|
||||
},
|
||||
onArrowUp() {
|
||||
if (this.arrowCounter > 0) {
|
||||
this.arrowCounter = this.arrowCounter - 1;
|
||||
}
|
||||
},
|
||||
onEnter() {
|
||||
if(Array.isArray(this.results) && this.results.length && this.arrowCounter !== -1 && this.arrowCounter < this.results.length){
|
||||
//this.search = this.results[this.arrowCounter];
|
||||
var person = this.results[this.arrowCounter];
|
||||
this.$emit("person", person);
|
||||
//this.isOpen = false;
|
||||
this.reset();
|
||||
this.arrowCounter = -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// isOpen() {
|
||||
// return this.results.length > 0;
|
||||
// }
|
||||
get showResults(): boolean {
|
||||
return this.results.length > 0;
|
||||
}
|
||||
};
|
||||
get noResults(): boolean {
|
||||
return Array.isArray(this.results) && this.results.length === 0;
|
||||
}
|
||||
get isLoading(): boolean {
|
||||
return this.loading === true;
|
||||
}
|
||||
get hasError(): boolean {
|
||||
return this.error !== null;
|
||||
}
|
||||
|
||||
@Watch("results")
|
||||
onResultsChanged(value: Array<string>, oldValue: Array<string>) {
|
||||
// we want to make sure we only do this when it's an async request
|
||||
if (this.isAsync) {
|
||||
this.suggestions = value;
|
||||
this.isOpen = true;
|
||||
this.loading = false;
|
||||
} else {
|
||||
if (value.length !== oldValue.length) {
|
||||
this.suggestions = value;
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setResult(person) {
|
||||
// this.search = person.full_name;
|
||||
this.clear();
|
||||
this.$emit("person", person);
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.display = "";
|
||||
this.results = [];
|
||||
this.error = null;
|
||||
this.$emit("clear");
|
||||
}
|
||||
|
||||
searchChanged() {
|
||||
// Let's warn the parent that a change was made
|
||||
this.$emit("input", this.display);
|
||||
|
||||
this.selectedIndex = null;
|
||||
|
||||
if (this.display.length >= 2) {
|
||||
// Is the data given by an outside ajax request?
|
||||
if (this.isAsync) {
|
||||
this.loading = true;
|
||||
this.resourceSearch();
|
||||
} else {
|
||||
// Data is sync, we can search our flat array
|
||||
this.results = this.results.filter(item => {
|
||||
return item.toLowerCase().indexOf(this.display.toLowerCase()) > -1;
|
||||
});
|
||||
this.isOpen = true;
|
||||
}
|
||||
} else {
|
||||
this.results = [];
|
||||
}
|
||||
}
|
||||
|
||||
resourceSearch = debounce(function() {
|
||||
var self = this;
|
||||
if (!this.display) {
|
||||
this.results = [];
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.request();
|
||||
// axios
|
||||
// .get("/api/persons", { params: { filter: this.display.toLowerCase() } })
|
||||
// .then(function(response) {
|
||||
// return (self.results = response.data.data);
|
||||
// })
|
||||
// .catch(function(error) {
|
||||
// alert(error);
|
||||
// });
|
||||
}, 200);
|
||||
|
||||
async request() {
|
||||
try {
|
||||
var res = await this.searchTerm(this.display.toLowerCase());
|
||||
this.error = null;
|
||||
this.results = res.data;
|
||||
this.loading = false;
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async searchTerm(term: string): Promise<any> {
|
||||
let res = await axios.get("/api/persons", { params: { filter: term } });
|
||||
return res.data; //.response;//.docs;
|
||||
}
|
||||
|
||||
onArrowDown(ev) {
|
||||
ev.preventDefault();
|
||||
if (this.selectedIndex === null) {
|
||||
this.selectedIndex = 0;
|
||||
return;
|
||||
}
|
||||
this.selectedIndex =
|
||||
this.selectedIndex === this.suggestions.length - 1
|
||||
? 0
|
||||
: this.selectedIndex + 1;
|
||||
this.fixScrolling();
|
||||
}
|
||||
|
||||
onArrowUp(ev) {
|
||||
ev.preventDefault();
|
||||
if (this.selectedIndex === null) {
|
||||
this.selectedIndex = this.suggestions.length - 1;
|
||||
return;
|
||||
}
|
||||
this.selectedIndex =
|
||||
this.selectedIndex === 0
|
||||
? this.suggestions.length - 1
|
||||
: this.selectedIndex - 1;
|
||||
this.fixScrolling();
|
||||
}
|
||||
|
||||
private fixScrolling() {
|
||||
const currentElement = this.$refs.options[this.selectedIndex];
|
||||
currentElement.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "start"
|
||||
});
|
||||
}
|
||||
|
||||
onEnter() {
|
||||
if (
|
||||
Array.isArray(this.results) &&
|
||||
this.results.length &&
|
||||
this.selectedIndex !== -1 &&
|
||||
this.selectedIndex < this.results.length
|
||||
) {
|
||||
//this.display = this.results[this.selectedIndex];
|
||||
var person = this.results[this.selectedIndex];
|
||||
this.$emit("person", person);
|
||||
this.clear();
|
||||
this.selectedIndex = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue