- 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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<template>
|
||||
<template>
|
||||
<div>
|
||||
<h3 v-if="heading && personlist.length && showHeading == true">{{ heading }}</h3>
|
||||
<table class="pure-table pure-table-horizontal" v-if="personlist.length">
|
||||
|
|
@ -12,86 +12,56 @@
|
|||
<th scope="col">
|
||||
<label for="language">
|
||||
<span>
|
||||
ORCID <i
|
||||
v-tooltip="{ content: messages.orcid, class: 'tooltip-custom tooltip-other-custom' }"
|
||||
class="far fa-lg fa-question-circle"
|
||||
></i>
|
||||
ORCID <i v-tooltip="{ content: messages.orcid, class: 'tooltip-custom tooltip-other-custom' }"
|
||||
class="far fa-lg fa-question-circle"></i>
|
||||
</span>
|
||||
</label>
|
||||
</th>
|
||||
<th scope="col" v-if="Object.keys(contributortypes).length">
|
||||
<span>Type</span>
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
v-bind:list="personlist"
|
||||
tag="tbody"
|
||||
v-on:start="isDragging=true"
|
||||
v-on:end="isDragging=false"
|
||||
>
|
||||
<tr
|
||||
v-for="(item, index) in personlist"
|
||||
v-bind:key="item.id"
|
||||
v-bind:class="[item.status==true ? 'activeClass' : 'inactiveClass']"
|
||||
>
|
||||
<draggable v-bind:list="personlist" tag="tbody" v-on:start="isDragging=true" v-on:end="isDragging=false">
|
||||
<tr v-for="(item, index) in personlist" v-bind:key="item.id"
|
||||
v-bind:class="[item.status==true ? 'activeClass' : 'inactiveClass']">
|
||||
<td scope="row">{{ index + 1 }}</td>
|
||||
<td>
|
||||
<input
|
||||
v-bind:name="heading+'['+index+'][id]'"
|
||||
class="form-control"
|
||||
v-model="item.id"
|
||||
readonly
|
||||
data-vv-scope="step-1"
|
||||
/>
|
||||
<input style="width:30px;" v-bind:name="heading+'['+index+'][id]'" class="form-control" v-model="item.id"
|
||||
readonly data-vv-scope="step-1" />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-bind:name="heading+'['+index+'][first_name]'"
|
||||
class="form-control"
|
||||
placeholder="[FIRST NAME]"
|
||||
v-model="item.first_name"
|
||||
v-bind:readonly="item.status==1"
|
||||
v-validate="'required'"
|
||||
data-vv-scope="step-1"
|
||||
/>
|
||||
<input v-bind:name="heading+'['+index+'][first_name]'" class="form-control" placeholder="[FIRST NAME]"
|
||||
v-model="item.first_name" v-bind:readonly="item.status==1" v-validate="'required'"
|
||||
data-vv-scope="step-1" />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-bind:name="heading+'['+index+'][last_name]'"
|
||||
class="form-control"
|
||||
placeholder="[LAST NAME]"
|
||||
v-model="item.last_name"
|
||||
v-bind:readonly="item.status==1"
|
||||
v-validate="'required'"
|
||||
data-vv-scope="step-1"
|
||||
/>
|
||||
<input v-bind:name="heading+'['+index+'][last_name]'" class="form-control" placeholder="[LAST NAME]"
|
||||
v-model="item.last_name" v-bind:readonly="item.status==1" v-validate="'required'"
|
||||
data-vv-scope="step-1" />
|
||||
</td>
|
||||
<td>
|
||||
<!-- v-validate="'required|email'" -->
|
||||
<input
|
||||
v-bind:name="heading+'['+index+'][email]'"
|
||||
class="form-control"
|
||||
placeholder="[EMAIL]"
|
||||
v-model="item.email"
|
||||
v-validate="{required: true, email: true, unique: [personlist, index, 'email']}"
|
||||
v-bind:readonly="item.status==1"
|
||||
data-vv-scope="step-1"
|
||||
/>
|
||||
<input v-bind:name="heading+'['+index+'][email]'" class="form-control" placeholder="[EMAIL]"
|
||||
v-model="item.email" v-validate="{required: true, email: true, unique: [personlist, index, 'email']}"
|
||||
v-bind:readonly="item.status==1" data-vv-scope="step-1" />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-bind:name="heading+'['+index+'][identifier_orcid]'"
|
||||
class="form-control"
|
||||
placeholder="[ORCID optional]"
|
||||
v-model="item.identifier_orcid"
|
||||
v-bind:readonly="item.status==1"
|
||||
data-vv-scope="step-1"
|
||||
/>
|
||||
<input style="width:70px;" v-bind:name="heading+'['+index+'][identifier_orcid]'" class="form-control"
|
||||
placeholder="[ORCID]" v-model="item.identifier_orcid" v-bind:readonly="item.status==1"
|
||||
data-vv-scope="step-1" />
|
||||
</td>
|
||||
<td v-if="Object.keys(contributortypes).length">
|
||||
<select type="text" v-bind:name="heading+'['+index+'][contributor_type]'" v-validate="{required: true}"
|
||||
data-vv-scope="step-1" v-model="item.contributor_type">
|
||||
<option v-for="(option, i) in contributortypes" :value="option" :key="i">
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
class="pure-button button-small is-warning"
|
||||
@click.prevent="removeAuthor(index)"
|
||||
>
|
||||
<button class="pure-button button-small is-warning" @click.prevent="removeAuthor(index)">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
|
|
@ -102,78 +72,83 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import draggable from "vuedraggable";
|
||||
import { Component, Inject, Vue, Prop, Watch } from "vue-property-decorator";
|
||||
import Tooltip from 'vue-directive-tooltip';
|
||||
import 'vue-directive-tooltip/dist/vueDirectiveTooltip.css';
|
||||
Vue.use(Tooltip);
|
||||
import draggable from "vuedraggable";
|
||||
import { Component, Inject, Vue, Prop, Watch } from "vue-property-decorator";
|
||||
import Tooltip from 'vue-directive-tooltip';
|
||||
import 'vue-directive-tooltip/dist/vueDirectiveTooltip.css';
|
||||
Vue.use(Tooltip);
|
||||
|
||||
@Component({
|
||||
components: { draggable }
|
||||
})
|
||||
export default class PersonTable extends Vue {
|
||||
@Inject("$validator") readonly $validator;
|
||||
// inject: {
|
||||
// $validator: "$validator"
|
||||
// },
|
||||
name: "person-table";
|
||||
// components: {
|
||||
// draggable
|
||||
// },
|
||||
@Component({
|
||||
components: { draggable }
|
||||
})
|
||||
export default class PersonTable extends Vue {
|
||||
@Inject("$validator") readonly $validator;
|
||||
// inject: {
|
||||
// $validator: "$validator"
|
||||
// },
|
||||
name: "person-table";
|
||||
// components: {
|
||||
// draggable
|
||||
// },
|
||||
|
||||
editable = true;
|
||||
isDragging = false;
|
||||
delayedDragging = false;
|
||||
editable = true;
|
||||
isDragging = false;
|
||||
delayedDragging = false;
|
||||
|
||||
@Prop({ default: true, type: Array })
|
||||
personlist;
|
||||
@Prop(Number)
|
||||
rowIndex;
|
||||
@Prop(String)
|
||||
heading;
|
||||
@Prop({ required: true, type: Array })
|
||||
messages;
|
||||
@Prop({ default: true, type: Boolean })
|
||||
showHeading;
|
||||
@Prop({ required: true, type: Array })
|
||||
personlist;
|
||||
@Prop({ default: {}, type: Object })
|
||||
contributortypes;
|
||||
@Prop(Number)
|
||||
rowIndex;
|
||||
@Prop(String)
|
||||
heading;
|
||||
@Prop({ required: true, type: Array })
|
||||
messages;
|
||||
@Prop({ default: true, type: Boolean })
|
||||
showHeading;
|
||||
|
||||
// props: {
|
||||
// personlist: {
|
||||
// type: Array,
|
||||
// required: true
|
||||
// },
|
||||
// rowIndex: {
|
||||
// type: Number
|
||||
// },
|
||||
// heading: String
|
||||
// },
|
||||
// props: {
|
||||
// personlist: {
|
||||
// type: Array,
|
||||
// required: true
|
||||
// },
|
||||
// rowIndex: {
|
||||
// type: Number
|
||||
// },
|
||||
// heading: String
|
||||
// },
|
||||
|
||||
itemAction(action, data, index) {
|
||||
console.log("custom-actions: " + action, data.full_name, index);
|
||||
itemAction(action, data, index) {
|
||||
console.log("custom-actions: " + action, data.full_name, index);
|
||||
}
|
||||
|
||||
removeAuthor(key) {
|
||||
this.personlist.splice(key, 1);
|
||||
}
|
||||
|
||||
onMove({ relatedContext, draggedContext }) {
|
||||
const relatedElement = relatedContext.element;
|
||||
const draggedElement = draggedContext.element;
|
||||
return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed;
|
||||
}
|
||||
}
|
||||
|
||||
removeAuthor(key) {
|
||||
this.personlist.splice(key, 1);
|
||||
}
|
||||
|
||||
onMove({ relatedContext, draggedContext }) {
|
||||
const relatedElement = relatedContext.element;
|
||||
const draggedElement = draggedContext.element;
|
||||
return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-actions button.ui.button {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
.custom-actions button.ui.button > i.icon {
|
||||
margin: auto !important;
|
||||
}
|
||||
.activeClass {
|
||||
background-color: aquamarine;
|
||||
}
|
||||
.inactiveClass {
|
||||
background-color: orange;
|
||||
}
|
||||
.custom-actions button.ui.button {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
|
||||
.custom-actions button.ui.button>i.icon {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.activeClass {
|
||||
background-color: aquamarine;
|
||||
}
|
||||
|
||||
.inactiveClass {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue